/* ════════════════════════════════════════════════
   WORQESTRA — Marketing site · Gravitas register
   Calm, Oura-style scroll storytelling
   ════════════════════════════════════════════════ */
:root{
  --teal-ink:#0F3A3E;
  --teal-deep:#0A2A2D;
  --surface:#1D484C;
  --inset:#0A2A2D;
  --cream:#F5F0E8;
  --cream-2:#EBE3D6;
  --ink-on-cream:#173033;
  --muted-dark:#5C6E63;     /* muted text on cream */
  --muted:#A2C2C5;          /* muted text on teal */
  --faint:#7CA9AD;
  --coral:#E87B68;
  --coral-hover:#DD5C46;
  --moss:#708050;
  --moss-2:#8A9764;
  --moss-3:#A4AF7E;
  --mustard:#D4A547;
  --mustard-2:#E2C260;
  --border-dark:#1D484C;
  --border-light:#DAD0C0;
  --display:"Fraunces",serif;
  --body:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.8,.18,1);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--teal-ink);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.serif{font-family:var(--display);font-optical-sizing:auto;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;max-width:100%;}

/* ───────── NAV ───────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(15,58,62,0.78);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:var(--border-dark);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;height:72px;padding:0 40px;
  display:flex;align-items:center;gap:40px;
}
.wordmark{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.01em;color:var(--cream);}
.nav-links{display:flex;gap:30px;margin-left:8px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .25s;}
.nav-links a:hover{color:var(--cream);}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px;}
.nav-signin{font-size:14px;font-weight:500;color:var(--muted);transition:color .25s;}
.nav-signin:hover{color:var(--cream);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  height:48px;padding:0 26px;border-radius:999px;
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background .25s, transform .25s, box-shadow .25s, border-color .25s, color .25s;
}
.btn .arr{transition:transform .25s;}
.btn:hover .arr{transform:translateX(4px);}
.btn-coral{background:var(--coral);color:var(--cream);box-shadow:0 10px 24px -10px rgba(232,123,104,0.65);}
.btn-coral:hover{background:var(--coral-hover);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(221,92,70,0.7);}
.btn-ghost-d{border:1px solid var(--border-dark);color:var(--cream);}
.btn-ghost-d:hover{background:var(--surface);border-color:var(--faint);}
.btn-ghost-l{border:1px solid var(--border-light);color:var(--ink-on-cream);}
.btn-ghost-l:hover{background:var(--cream-2);}
.btn-sm{height:42px;padding:0 22px;font-size:14px;}

/* ───────── SECTION SHELLS ───────── */
.section{position:relative;padding:140px 40px;}
.section .wrap{max-width:var(--maxw);margin:0 auto;}
.dark{background:var(--teal-ink);color:var(--cream);}
.deep{background:var(--teal-deep);color:var(--cream);}
.light{background:var(--cream);color:var(--ink-on-cream);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  margin-bottom:26px;
}
.eyebrow .tick{width:24px;height:2px;border-radius:2px;background:var(--coral);}
.dark .eyebrow,.deep .eyebrow{color:var(--muted);}
.light .eyebrow{color:var(--muted-dark);}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease), transform 1.1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}
.reveal.d4{transition-delay:.48s;}

/* ───────── HERO ───────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:120px 40px 80px;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(29,72,76,0.55), transparent 60%),
    var(--teal-ink);
  overflow:hidden;
}
.hero-grid{
  max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:0.04em;color:var(--muted);
  padding:7px 14px 7px 12px;border:1px solid var(--border-dark);border-radius:999px;margin-bottom:30px;
}
.hero-eyebrow .pulse{width:7px;height:7px;border-radius:999px;background:var(--moss-3);position:relative;}
.hero-eyebrow .pulse::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:1px solid var(--moss-3);opacity:.5;animation:ripple 2.6s var(--ease) infinite;}
@keyframes ripple{0%{transform:scale(.6);opacity:.6;}100%{transform:scale(1.8);opacity:0;}}
.hero h1{
  font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(44px,5.4vw,76px);line-height:1.02;letter-spacing:-0.025em;color:var(--cream);
  margin-bottom:28px;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--coral);}
.hero-sub{font-size:19px;line-height:1.6;color:var(--muted);max-width:30ch;margin-bottom:38px;}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.hero-note{margin-top:24px;font-size:13px;color:var(--faint);display:flex;align-items:center;gap:9px;}
.hero-note .dot{width:5px;height:5px;border-radius:999px;background:var(--faint);}

/* hero product cluster */
.cluster{position:relative;height:520px;}
.float{
  position:absolute;border-radius:18px;border:1px solid var(--border-dark);
  background:var(--surface);box-shadow:0 30px 60px -20px rgba(7,30,33,0.7);
  will-change:transform;
}
.float .pad{padding:20px 22px;}
.f-hero{top:40px;left:0;width:330px;z-index:3;}
.f-path{bottom:8px;right:0;width:288px;z-index:2;}
.f-badge{
  top:0;right:36px;z-index:4;width:auto;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  background:rgba(138,151,100,0.16);border-color:rgba(138,151,100,0.4);backdrop-filter:blur(6px);
}
.f-badge .bdot{width:8px;height:8px;border-radius:999px;background:var(--moss-3);}
.f-badge span{font-size:12.5px;font-weight:500;color:var(--moss-3);white-space:nowrap;}

/* mini dashboard components (reused product UI) */
.mini-strip{font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:7px;margin-bottom:16px;}
.mini-strip .spark{color:var(--mustard-2);}
.mini-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.mini-role{font-family:var(--display);font-weight:500;font-size:24px;color:var(--cream);letter-spacing:-0.01em;margin:5px 0 2px;}
.mini-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;}
.mini-match-label{font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
.mini-match{font-family:var(--display);font-weight:500;font-size:60px;line-height:.9;color:var(--coral);letter-spacing:-0.03em;display:flex;align-items:flex-start;}
.mini-match .pct{font-size:28px;margin-top:5px;}
.mini-apply{height:34px;padding:0 18px;border-radius:999px;background:var(--coral);color:var(--cream);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.mini-agent{font-size:9.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--inset);color:var(--muted);border:1px solid var(--border-dark);}
.mini-fit{font-size:11px;color:var(--muted);}
.mini-fit b{color:var(--cream);font-family:var(--mono);}
.mini-top{display:flex;align-items:center;justify-content:space-between;}
.mini-title{font-family:var(--display);font-weight:500;font-size:15px;color:var(--cream);margin:12px 0 10px;line-height:1.2;}
.mini-track{height:5px;border-radius:999px;background:var(--inset);overflow:hidden;}
.mini-fill{height:100%;border-radius:999px;background:var(--moss-2);}
.mini-strip-stage{display:flex;gap:4px;margin-top:14px;}
.mini-seg{flex:1;height:4px;border-radius:999px;background:rgba(124,169,173,0.2);}
.mini-seg.done{background:var(--moss-2);}
.mini-seg.cur{background:var(--coral);height:5px;margin-top:-.5px;}

.scroll-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);
}
.scroll-cue .line{width:1px;height:42px;background:linear-gradient(var(--faint),transparent);position:relative;overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--cream);animation:cue 2.4s var(--ease) infinite;}
@keyframes cue{0%{top:-50%;}60%,100%{top:100%;}}

/* ───────── PROBLEM ───────── */
.lead{
  font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(30px,3.6vw,50px);line-height:1.18;letter-spacing:-0.02em;
  max-width:18ch;text-wrap:balance;
}
.light .lead em{font-style:italic;color:var(--coral);}
.problem-grid{display:grid;grid-template-columns:1fr 0.9fr;gap:64px;align-items:center;}
.problem-points{display:flex;flex-direction:column;gap:0;}
.ppoint{padding:26px 0;border-top:1px solid var(--border-light);}
.ppoint:last-child{border-bottom:1px solid var(--border-light);}
.ppoint h3{font-family:var(--display);font-weight:500;font-size:21px;color:var(--ink-on-cream);margin-bottom:8px;letter-spacing:-0.01em;}
.ppoint p{font-size:15px;line-height:1.6;color:var(--muted-dark);max-width:44ch;}
.ppoint .num{font-family:var(--mono);font-size:12px;color:var(--coral);font-weight:500;letter-spacing:0.1em;}

/* ───────── ORCHESTRA (pinned) ───────── */
.orchestra{position:relative;background:var(--teal-deep);}
.orch-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px;overflow:hidden;
}
.orch-head{
  position:absolute;top:48px;left:50%;transform:translateX(-50%);
  text-align:center;width:100%;
}
.orch-head .eyebrow{margin-bottom:0;justify-content:center;}
.orch-inner{
  max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.orch-text{position:relative;min-height:300px;}
.orch-panel{
  position:absolute;inset:0;opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;display:flex;flex-direction:column;justify-content:center;
}
.orch-panel.active{opacity:1;transform:none;pointer-events:auto;}
.orch-agent{font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.orch-agent .adot{width:9px;height:9px;border-radius:999px;}
.orch-panel h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,3.4vw,46px);line-height:1.08;letter-spacing:-0.02em;color:var(--cream);margin-bottom:20px;text-wrap:balance;}
.orch-panel p{font-size:17px;line-height:1.65;color:var(--muted);max-width:38ch;margin-bottom:24px;}
.orch-detail{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:13px;color:var(--faint);padding:10px 16px;border:1px solid var(--border-dark);border-radius:999px;
}
.orch-detail .mono{color:var(--cream);}

/* orbital visual */
.orbital{position:relative;width:100%;aspect-ratio:1;max-width:460px;margin:0 auto;}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(124,169,173,0.16);top:50%;left:50%;transform:translate(-50%,-50%);}
.ring.r1{width:38%;height:38%;}
.ring.r2{width:68%;height:68%;}
.ring.r3{width:100%;height:100%;border-style:dashed;border-color:rgba(124,169,173,0.1);animation:spin 80s linear infinite;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.orb-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2a6064,#143b3f);
  border:1px solid var(--border-dark);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:0 0 40px -8px rgba(232,123,104,0.0);transition:box-shadow .6s;z-index:5;
}
.orb-center .you{font-family:var(--display);font-size:13px;color:var(--cream);}
.orb-center .sub{font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-top:2px;}
.node{
  position:absolute;top:50%;left:50%;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border-dark);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s, opacity .6s;
  opacity:.5;z-index:4;
}
.node svg{width:24px;height:24px;opacity:.8;transition:opacity .5s;}
.node .nlabel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .5s;
}
.node.lit{opacity:1;transform:scale(1.18);}
.node.lit .nlabel{opacity:1;}
.conn{position:absolute;top:50%;left:50%;height:1px;transform-origin:left center;background:linear-gradient(90deg,rgba(232,123,104,0),rgba(232,123,104,0.5));opacity:0;transition:opacity .6s;z-index:1;}
.conn.lit{opacity:1;}

/* progress rail */
.orch-rail{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;align-items:center;
}
.orch-rail .r{width:34px;height:3px;border-radius:3px;background:rgba(124,169,173,0.25);transition:background .4s, width .4s;}
.orch-rail .r.on{background:var(--coral);width:52px;}

/* ───────── MOAT ───────── */
.moat-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center;}
.moat-card{
  background:var(--teal-ink);border-radius:20px;padding:36px;color:var(--cream);
  box-shadow:0 40px 80px -30px rgba(7,30,33,0.5);border:1px solid var(--border-dark);
}
.moat-card .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.moat-card .mc-title{font-family:var(--display);font-weight:500;font-size:20px;color:var(--cream);}
.moat-card .mc-sub{font-size:12px;color:var(--faint);font-family:var(--mono);}
.pat{margin-bottom:20px;}
.pat:last-child{margin-bottom:0;}
.pat-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px;}
.pat-label{font-size:14px;font-weight:500;color:var(--cream);}
.pat-pct{font-family:var(--mono);font-size:13px;color:var(--muted);flex-shrink:0;}
.pat-track{height:6px;border-radius:999px;background:var(--inset);overflow:hidden;}
.pat-fill{height:100%;width:0;border-radius:999px;transition:width 1.3s var(--ease);}
.stat-line{display:flex;gap:40px;margin-top:36px;}
.stat .v{font-family:var(--display);font-weight:500;font-size:44px;color:var(--ink-on-cream);letter-spacing:-0.02em;line-height:1;}
.light .stat .v em{color:var(--coral);font-style:normal;}
.stat .l{font-size:13.5px;color:var(--muted-dark);margin-top:8px;max-width:18ch;line-height:1.5;}

/* ───────── CLANS / PROOF ───────── */
.clan-head{text-align:center;max-width:24ch;margin:0 auto 64px;}
.clan-head .lead{margin:0 auto;}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.quote{
  background:var(--surface);border:1px solid var(--border-dark);border-radius:18px;padding:30px;
  display:flex;flex-direction:column;gap:22px;transition:transform .4s var(--ease), box-shadow .4s;
}
.quote:hover{transform:translateY(-4px);box-shadow:0 30px 50px -24px rgba(7,30,33,0.6);}
.quote p{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.5;color:var(--cream);letter-spacing:-0.01em;text-wrap:pretty;}
.quote .by{display:flex;align-items:center;gap:12px;margin-top:auto;}
.quote .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,#2a6064,#163b3f);border:1px solid var(--border-dark);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--cream);}
.quote .who .n{font-size:14px;font-weight:600;color:var(--cream);}
.quote .who .r{font-size:12.5px;color:var(--faint);margin-top:2px;}
.cohort{
  margin-top:28px;display:flex;align-items:center;justify-content:center;gap:16px;
  padding:22px;border-radius:16px;border:1px dashed var(--border-dark);
  font-size:15px;color:var(--muted);text-align:center;flex-wrap:wrap;
}
.cohort b{color:var(--moss-3);font-weight:600;}
.cohort .mono{color:var(--cream);}

/* ───────── CLOSING ───────── */
.closing{
  position:relative;text-align:center;
  padding:160px 40px;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(29,72,76,0.6), transparent 60%),
    var(--teal-deep);
  overflow:hidden;
}
.closing .wrap{max-width:760px;margin:0 auto;position:relative;z-index:2;}
.closing h2{
  font-family:var(--display);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:-0.025em;color:var(--cream);
  margin-bottom:26px;text-wrap:balance;
}
.closing h2 em{font-style:italic;color:var(--coral);}
.closing p{font-size:19px;line-height:1.6;color:var(--muted);max-width:34ch;margin:0 auto 40px;}
.closing-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;}
/* faint orbital echo behind closing */
.closing .echo{position:absolute;top:50%;left:50%;width:680px;height:680px;border-radius:50%;border:1px solid rgba(124,169,173,0.08);transform:translate(-50%,-50%);}
.closing .echo.e2{width:980px;height:980px;}

/* footer */
.foot{background:var(--teal-deep);border-top:1px solid var(--border-dark);padding:44px 40px;}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.foot .wordmark{font-size:18px;}
.foot .links{display:flex;gap:26px;}
.foot .links a{font-size:13.5px;color:var(--muted);transition:color .25s;}
.foot .links a:hover{color:var(--cream);}
.foot .copy{font-size:12.5px;color:var(--faint);}

/* ───────── RESPONSIVE ───────── */
@media (max-width:960px){
  .hero-grid,.problem-grid,.moat-grid,.orch-inner{grid-template-columns:1fr;gap:48px;}
  .cluster{height:440px;margin-top:20px;}
  .quotes{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .section{padding:96px 28px;}
  .hero{padding:120px 28px 90px;}
  .orch-text{min-height:240px;order:2;}
  .orbital{max-width:340px;order:1;}
  .stat-line{gap:28px;}
}
@media (max-width:560px){
  .nav-signin{display:none;}
  .hero h1{font-size:clamp(38px,11vw,52px);}
  .float.f-path{display:none;}
  .f-hero{left:50%;transform:translateX(-50%);}
}

/* ───────── REDUCED MOTION ───────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .ring.r3,.scroll-cue .line::after,.hero-eyebrow .pulse::after{animation:none!important;}
  .float{transform:none!important;}
}