/* Taperead — shared base styles */
:root{
  --bg:#07090C;
  --bg-elev:#0C1117;
  --bg-elev-2:#10171F;
  --bg-elev-3:#161E27;
  --border:#1A2230;
  --border-hi:#28344A;
  --border-glow:rgba(0,229,255,0.18);
  --ink:#E8EAED;
  --ink-2:#C7CCD3;
  --ink-dim:#8A93A1;
  --ink-mute:#7C8898;
  --ink-faint:#3A4250;
  --accent:#00E5FF;
  --accent-2:#56F0FF;
  --accent-dim:rgba(0,229,255,0.12);
  --up:#22E0A1;
  --down:#FF6B6B;
  --warn:#FFB547;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";}
body{overflow-x:hidden;}

/* Background scaffolding: subtle grid + vignette */
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
}
.bg-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,229,255,0.06), transparent 60%);
}

/* Typographic primitives */
.mono{font-family:var(--mono);font-feature-settings:"ss01","ss02","zero";}
.upper{text-transform:uppercase;letter-spacing:0.14em;}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-dim);}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border-radius:6px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.04em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);color:#001318;border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(0,229,255,0.15), 0 10px 40px -10px rgba(0,229,255,0.55);
}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-hi);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* Section scaffold */
.container{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:1;}
section{position:relative;z-index:1;}
.section-label{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink-dim);font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:32px;width:100%;
}
.section-label::before{
  content:"";width:8px;height:8px;border-radius:1px;background:var(--accent);box-shadow:0 0 12px var(--accent);
}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;}

::selection{background:var(--accent);color:#001318;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute);}

@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.35}}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse-dot 1.6s infinite;}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marquee 60s linear infinite;}
/* Pause the ticker when the user hovers anywhere on the strip — gives
   them a chance to actually read a headline. */
.marquee-host:hover .marquee-track{animation-play-state:paused;}
/* Respect the user's reduced-motion preference everywhere on the page. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track{animation:none;}
  .live-dot{animation:none;}
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@keyframes flow{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes number-flicker{0%{opacity:0.4;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}

@media (max-width: 900px){
  .container{padding:0 20px;}
}

.twk-panel{z-index:2147483646;}

/* ── Subpage chrome ───────────────────────────────────────────── */
.page-hero{
  padding:120px 0 64px;
  border-bottom:1px solid var(--border);
}
.page-hero h1{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(40px, 6vw, 76px);letter-spacing:-0.025em;line-height:1;
  margin:24px 0 18px;
}
.page-hero .sub{
  font-size:18px;color:var(--ink-dim);max-width:680px;line-height:1.55;text-wrap:pretty;margin:0;
}
.page-body{padding:72px 0 96px;}

/* numbered legal section */
.legal-row{
  display:grid;grid-template-columns:120px 1fr;gap:48px;
  padding:32px 0;border-top:1px solid var(--border);
}
.legal-row:last-child{border-bottom:1px solid var(--border);}
.legal-row .n{
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--ink-mute);
  padding-top:6px;
}
.legal-row h3{
  font-family:var(--mono);font-size:18px;font-weight:600;
  letter-spacing:-0.01em;margin:0 0 12px;color:var(--ink);
}
.legal-row p, .legal-row li{
  font-size:15px;line-height:1.7;color:var(--ink-2);max-width:720px;
  text-wrap:pretty;margin:0 0 10px;
}
.legal-row ul{margin:8px 0 12px;padding-left:20px;}
.legal-row a{color:var(--accent);text-decoration:none;}
.legal-row a:hover{text-decoration:underline;}
.legal-row .kbd{
  font-family:var(--mono);font-size:13px;
  padding:2px 6px;background:var(--bg-elev-2);border:1px solid var(--border-hi);
  border-radius:3px;color:var(--ink);
}

@media (max-width: 720px){
  .legal-row{grid-template-columns:1fr;gap:8px;}
}

/* Landing-page responsive overrides */
@media (max-width: 980px) {
  .nav-links { display: none !important; }
  .page-nav-links { display: none !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pipeline { grid-template-columns: 1fr !important; }
  .pipeline-arrow { display: none !important; }
  .whynow-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .founder-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .problem-grid > div { border-right: none !important; border-bottom: 1px solid var(--border); }
  .problem-grid > div:last-child { border-bottom: none !important; }
}
@media (max-width: 720px) {
  h1 { font-size: 44px !important; }

  /* ─────────────────────────────────────────────────────────────────────────
     Big Impact Graph — desktop is a 3-column Sankey-style grid (sources →
     sectors → stocks) with an absolutely-positioned <svg> drawing the edges
     between columns. On a phone the 3 columns require ~680px minimum, which
     overflows every mobile viewport. So:
       1. Collapse the body grid to a single vertical stack.
       2. Hide the <svg> path overlay entirely — the lines were drawn between
          horizontally-adjacent columns and have nowhere meaningful to land
          when the layout is vertical.
       3. Replace the per-column right-border with a per-column bottom-border.
     The phase animation still plays — node colours, headline ticker, and
     scenario auto-cycle all keep working; only the connecting lines are
     suppressed (the data was duplicated by the lit nodes anyway).
     ───────────────────────────────────────────────────────────────────── */
  .impact-graph-body {
    grid-template-columns: 1fr !important;
  }
  .impact-graph-body > svg {
    display: none !important;
  }
  .impact-graph-body > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .impact-graph-body > div:last-child {
    border-bottom: none !important;
  }

  /* Graph header strip — let the right-side CONF / TTI / PHASE stats wrap
     under the typing headline on mobile rather than squashing into 3 cols. */
  .impact-graph-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .impact-graph-headline {
    width: 100%;
    flex: 1 1 100% !important;
  }
}

/* General narrow-width polish (applies to anything <= 600 px). */
@media (max-width: 600px) {
  /* Container padding shrinks from 32 → 16 so sections breathe. */
  .container { padding: 0 16px !important; }

  /* Hero stat strip: 3 columns at ~110 px each is OK but tight; restack
     vertically on the smallest phones for legibility. */
  .hero-stat-strip {
    grid-template-columns: 1fr !important;
  }
  .hero-stat-strip > div {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .hero-stat-strip > div:last-child {
    border-bottom: none !important;
  }

  /* Waitlist portfolio buttons: 4-wide row → 2x2 grid below 480 px so the
     labels (< ₹1L, ₹1–10L, ₹10L–1Cr, ₹1Cr+) stop being chopped. */
  .waitlist-portfolio {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Why-Now market table: drop the dedicated chart column on very narrow
     phones — the bars become decorative noise and we'd rather give the
     label its full width. */
  .whynow-row {
    grid-template-columns: 1fr 100px !important;
    gap: 14px !important;
  }
  .whynow-row .mini-bar { display: none !important; }
}