/* ============================================================
   POLARIS CAPITAL — shared stylesheet
   Brand system carried over from the v5 story deck.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --mid-green:  #4EB65A;
  --brand-green:#6CB64E;   /* the symbol's green */
  --deep-teal:  #043436;
  --teal-tint:  #0A4244;
  --lyg:        #B6ECB8;   /* light green */
  --light-gray: #EFEFEF;
  --grey:       #A5A5A5;
  --onyx:       #0F0F0F;
  --paper:      #F4F2EE;
  --amber:      #D9A441;

  --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Geist Mono", "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--onyx);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.3rem, 4vw, 3rem); }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid-green);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--mid-green);
  display: inline-block;
}

/* ---------- ticker strip ---------- */
.ticker-strip {
  background: var(--deep-teal);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ticker-strip .tradingview-widget-container { min-height: 46px; }
/* fallback marquee (only shows if the TV widget fails to load) */
.ticker-fallback { display: none; }
.ticker-fallback.show {
  display: flex; gap: 2.4rem; align-items: center;
  color: var(--light-gray); font-family: var(--mono); font-size: .8rem;
  padding: .8rem 1rem; white-space: nowrap;
  animation: scrollx 40s linear infinite;
}
.ticker-fallback .up { color: var(--mid-green); }
.ticker-fallback .dn { color: #E4756B; }
@keyframes scrollx { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,242,238,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,15,15,.07);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { width: 30px; height: 26px; }
.brand .word { font-weight: 500; font-size: 1.28rem; letter-spacing: -.02em; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a {
  font-size: .92rem; color: #2a2a2a; position: relative; padding: .2rem 0;
  transition: color .2s;
}
.nav__links a:hover { color: var(--mid-green); }
.nav__links a.active { color: var(--onyx); }
.nav__links a.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height: 2px; background: var(--mid-green);
}
.nav__cta {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  border: 1px solid var(--onyx); border-radius: 999px;
  padding: .5rem 1.1rem; transition: all .2s;
}
.nav__cta:hover { background: var(--onyx); color: var(--paper); }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav__burger span { display:block; width: 24px; height: 2px; background: var(--onyx); margin: 5px 0; transition: .3s; }

/* ---------- section rhythm ---------- */
section { padding: clamp(3.6rem, 8vw, 7rem) 0; position: relative; }
.section--dark {
  background: radial-gradient(ellipse at 22% 0%, var(--teal-tint) 0%, var(--deep-teal) 58%, #022527 100%);
  color: var(--light-gray);
}
.section--dark .eyebrow, .section--dark .eyebrow::before { color: var(--lyg); background-color: var(--lyg); }
.section--dark .eyebrow { background: none; }
.section--dark .eyebrow::before { background: var(--lyg); }

h1,h2,h3 { line-height: 1.08; letter-spacing: -.025em; }
.display { font-family: var(--display); }
.h-hero  { font-family: var(--display); font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.h-sec   { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: .5rem; }
.lead    { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: #3a3a3a; max-width: 60ch; }
.section--dark .lead { color: #c9d6d3; }
.muted   { color: var(--grey); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem,6vw,5.5rem); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center;
}
.hero h1 { margin: 1.1rem 0 1.4rem; }
.hero h1 em { font-style: normal; color: var(--mid-green); }
.hero .lead { margin-bottom: 2rem; }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; }

/* staircase signature (echoes the brand header) */
.stair { position: relative; width: 100%; max-width: 430px; margin-left: auto; }
.stair svg { width: 100%; height: auto; display: block; overflow: visible; }
.stair rect { transform-origin: center; }
.stair .blk { opacity: 0; animation: stairIn .7s var(--ease) forwards; }
.stair .blk:nth-child(1){ animation-delay:.05s } .stair .blk:nth-child(2){ animation-delay:.13s }
.stair .blk:nth-child(3){ animation-delay:.21s } .stair .blk:nth-child(4){ animation-delay:.29s }
.stair .blk:nth-child(5){ animation-delay:.37s } .stair .blk:nth-child(6){ animation-delay:.45s }
.stair .blk:nth-child(7){ animation-delay:.53s } .stair .blk:nth-child(8){ animation-delay:.61s }
.stair .blk:nth-child(9){ animation-delay:.69s } .stair .blk:nth-child(10){ animation-delay:.77s }
.stair .mark { opacity: 0; animation: markIn .8s var(--ease) .55s forwards; }
@keyframes stairIn { from { opacity:0; } to { opacity:1; } }
@keyframes markIn  { from { opacity:0; } to { opacity:1; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  padding: .8rem 1.5rem; border-radius: 999px; cursor: pointer;
  transition: all .2s var(--ease); border: 1px solid transparent;
}
.btn--primary { background: var(--onyx); color: var(--paper); }
.btn--primary:hover { background: var(--mid-green); color: var(--onyx); }
.btn--ghost { border-color: rgba(15,15,15,.25); color: var(--onyx); }
.btn--ghost:hover { border-color: var(--onyx); }
.section--dark .btn--ghost { border-color: rgba(255,255,255,.3); color: var(--light-gray); }
.section--dark .btn--ghost:hover { border-color: var(--lyg); color: var(--lyg); }
.btn--light { background: var(--lyg); color: var(--deep-teal); }
.btn--light:hover { background: #fff; }

/* ---------- generic grids / cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }

.card {
  background: #fff; border: 1px solid rgba(15,15,15,.08);
  border-radius: 16px; padding: 1.7rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(4,52,54,.10); }
.section--dark .card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: var(--light-gray);
}
.card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.card p  { font-size: .95rem; color: #4a4a4a; }
.section--dark .card p { color: #b9c6c3; }
.card .num { font-family: var(--mono); font-size: .78rem; color: var(--mid-green); letter-spacing: .1em; }

/* ---------- process loop (lab) ---------- */
.loop { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; counter-reset: step; }
.loop .step { position: relative; padding-top: 1.6rem; }
.loop .step .k { font-family: var(--mono); font-size: .8rem; color: var(--mid-green); }
.loop .step h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; margin: .3rem 0 .5rem; }
.loop .step p { font-size: .9rem; color: #b9c6c3; }
.loop .step::before {
  content:""; position:absolute; top:0; left:0; width: 34px; height: 3px; background: var(--mid-green);
}

/* ---------- factsheet ---------- */
.fact { background:#fff; border:1px solid rgba(15,15,15,.09); border-radius: 18px; overflow: hidden; }
.fact__head { padding: 1.5rem 1.6rem 1.2rem; border-bottom: 1px solid rgba(15,15,15,.07); }
.fact__tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px; display: inline-block;
}
.tag--live { background: rgba(78,182,90,.14); color: #2f7d3a; }
.tag--bt   { background: rgba(217,164,65,.16); color: #9a6f18; }
.fact__name { font-family: var(--display); font-weight: 600; font-size: 1.7rem; margin: .7rem 0 .1rem; letter-spacing: -.02em; }
.fact__desc { font-size: .9rem; color: var(--grey); }
.fact__body { padding: 1.2rem 1.6rem 1.6rem; }
.metric { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem 0; border-bottom: 1px dashed rgba(15,15,15,.10); }
.metric:last-child { border-bottom: 0; }
.metric .lab { font-size: .88rem; color: #555; }
.metric .val { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; }
.val.pos { color: #2f7d3a; } .val.neg { color: #C0503F; }

/* ---------- twitter ---------- */
.tw-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }
.tw-embed { min-height: 420px; border-radius: 14px; overflow: hidden; }

/* ---------- case study chart ---------- */
.capbars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 1.5rem; }
.capbar { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.3rem; }
.capbar .pct { font-family: var(--mono); font-size: 2.2rem; color: var(--lyg); }
.capbar .cap { font-size: .82rem; color: #b9c6c3; margin-top:.3rem; }
.capbar .track { height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; margin-top: 1rem; overflow: hidden; }
.capbar .fill { height: 100%; background: var(--mid-green); border-radius: 4px; width: 0; transition: width 1.1s var(--ease); }

/* ---------- team ---------- */
.person { }
.person .role { font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--mid-green); }
.person h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin:.35rem 0 .7rem; letter-spacing: -.02em; }
.person ul { list-style: none; }
.person li { font-size:.92rem; color:#4a4a4a; padding-left: 1.1rem; position: relative; margin-bottom:.35rem; }
.person li::before { content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background: var(--mid-green); border-radius:1px; }

/* ---------- footer ---------- */
.footer { background: var(--onyx); color: #cfcfcf; padding: 3.4rem 0 2.2rem; }
.footer__top { display:flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.footer .brand .word { color:#fff; }
.footer__links { display:flex; gap: 3rem; flex-wrap: wrap; }
.footer__col h4 { font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--grey); margin-bottom:.8rem; font-weight:500; }
.footer__col a { display:block; font-size:.92rem; color:#cfcfcf; margin-bottom:.5rem; }
.footer__col a:hover { color: var(--mid-green); }
.footer__disc { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size:.76rem; color: var(--grey); max-width: 90ch; }
.footer__legal { margin-top: 1rem; font-size:.78rem; color:#8a8a8a; display:flex; justify-content: space-between; flex-wrap: wrap; gap:.6rem; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .stair { max-width: 340px; margin: 1.4rem auto 0; }
  .loop { grid-template-columns: repeat(2,1fr); }
  .g-4 { grid-template-columns: repeat(2,1fr); }
  .g-3 { grid-template-columns: 1fr; }
  .tw-wrap { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__links.open {
    display: flex; flex-direction: column; position: absolute; top: 68px; left:0; right:0;
    background: var(--paper); padding: 1.2rem 1.5rem 1.6rem; gap: 1rem;
    border-bottom: 1px solid rgba(15,15,15,.08);
  }
  .capbars { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .stair .blk, .stair .mark { opacity: 1; }
}

/* ============================================================
   v2 — visual components (allocation, models, frontier, speed, cost)
   ============================================================ */

/* big stat tiles */
.stat { font-family: var(--mono); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -.02em; }
.stat .u { color: var(--mid-green); }
.card .lbl { font-weight: 600; font-size: 1rem; margin-top: .75rem; letter-spacing: -.01em; }
.card .cap { font-size: .84rem; color: #6a6a6a; margin-top: .25rem; }
.section--dark .card .cap { color: #a9b7b4; }

/* diagram frame */
.diagram { background:#fff; border:1px solid rgba(15,15,15,.08); border-radius:18px; padding: clamp(1.2rem,3vw,2rem); }
.section--dark .diagram { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); }
.diagram svg { width:100%; height:auto; display:block; overflow:visible; }
.diagram .dcap { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-top:1rem; }

/* animated flow lines */
.flow { stroke-dasharray: 5 7; animation: dash 1.3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* node label text in svg */
.svg-t   { font-family: var(--sans); font-weight:600; fill: var(--onyx); }
.svg-sub { font-family: var(--mono); fill: var(--grey); }
.section--dark .svg-t { fill: var(--light-gray); }

/* two-up visual layout */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:stretch; }

/* model chips */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.chip {
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  padding:.5rem .8rem; border-radius:999px;
  border:1px solid rgba(78,182,90,.4); color:#2f7d3a; background:rgba(78,182,90,.08);
}
.section--dark .chip { color:var(--lyg); border-color:rgba(182,236,184,.35); background:rgba(182,236,184,.08); }

/* comparison bars */
.compare { display:grid; gap:.9rem; margin-top:.4rem; }
.compare .row { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:1rem; }
.compare .k { font-size:.9rem; color:#555; }
.section--dark .compare .k { color:#b9c6c3; }
.compare .track { position:relative; height:38px; }
.compare .bar { height:38px; border-radius:9px; display:flex; align-items:center; padding:0 .9rem;
  font-family:var(--mono); font-size:.8rem; color:#fff; white-space:nowrap; }
.compare .bar.b-slow { background: rgba(120,120,120,.35); color:#333; }
.section--dark .compare .bar.b-slow { color:#cfe; background:rgba(255,255,255,.14); }
.compare .bar.b-fast { background: var(--mid-green); color:var(--deep-teal); font-weight:500; }

/* cost stack */
.cost { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cost .col { border:1px solid rgba(15,15,15,.08); border-radius:14px; padding:1.2rem; background:#fff; }
.section--dark .cost .col { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); }
.cost .col h4 { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:.9rem; }
.cost .layer { height:26px; border-radius:6px; margin-bottom:.5rem; display:flex; align-items:center; padding:0 .7rem; font-size:.8rem; }
.cost .layer.big { background:rgba(192,80,63,.16); color:#9a3c2e; }
.cost .layer.mid { background:rgba(217,164,65,.18); color:#8a5f12; }
.cost .layer.sm  { background:rgba(78,182,90,.16); color:#2f7d3a; }
.cost .total { margin-top:.6rem; font-family:var(--mono); font-size:1.4rem; letter-spacing:-.02em; }

@media (max-width: 820px){
  .duo { grid-template-columns:1fr; }
  .cost { grid-template-columns:1fr; }
  .compare .row { grid-template-columns:96px 1fr; }
}

/* ============================================================
   v3 — reporting (dashboard + chat mock)
   ============================================================ */
.dash, .chat { background:#fff; border:1px solid rgba(15,15,15,.08); border-radius:16px; padding:1.4rem; }
.section--dark .dash, .section--dark .chat { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.dash .dhead { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:.9rem; }
.dash svg { width:100%; height:auto; display:block; }
.dash .chips { margin-top:1rem; }

.chat { display:flex; flex-direction:column; gap:.65rem; }
.bubble { padding:.65rem .95rem; border-radius:15px; font-size:.9rem; line-height:1.45; max-width:86%; }
.bubble.u { align-self:flex-end; background:var(--deep-teal); color:#EFEFEF; border-bottom-right-radius:5px; }
.bubble.a { align-self:flex-start; background:var(--light-gray); color:#1c1c1c; border-bottom-left-radius:5px; }
.section--dark .bubble.a { background:rgba(255,255,255,.10); color:#e6efec; }
.chat .ask { margin-top:.4rem; display:flex; gap:.5rem; align-items:center; border:1px solid rgba(15,15,15,.14); border-radius:999px; padding:.55rem .9rem; color:var(--grey); font-size:.85rem; }
.section--dark .chat .ask { border-color:rgba(255,255,255,.16); }
.chat .ask .send { margin-left:auto; width:26px; height:26px; border-radius:50%; background:var(--mid-green); display:grid; place-items:center; color:#043436; font-weight:700; }