/* ============================================================
   Fraktus landing — nav, hero, chaos fragments, storm, messy
   ============================================================ */

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:28px;
  padding:14px 28px;transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;}
.nav.scrolled{background:rgba(241,238,233,0.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair), 0 8px 30px rgba(120,105,90,0.12);}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-logo{width:32px;height:32px;filter:drop-shadow(0 2px 5px rgba(120,105,90,0.3));}
.nav-word{font-weight:700;font-size:19px;letter-spacing:-0.02em;}
.nav-sub{font-size:11px;font-weight:800;letter-spacing:0.12em;color:var(--ink-400);text-transform:uppercase;margin-top:3px;}
.nav-links{display:flex;gap:4px;margin-left:auto;}
.nav-links a{font-size:14px;font-weight:650;color:var(--ink-500);padding:9px 14px;border-radius:99px;transition:.2s;}
.nav-links a:hover{color:var(--ink-900);background:rgba(120,105,90,0.08);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.crisis-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--rose-700);
  background:var(--rose-100);padding:9px 15px;border-radius:99px;transition:.2s;}
.crisis-pill:hover{background:var(--rose-200);}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:110px 28px 60px;overflow:hidden;}
.hero-grid{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:40px;align-items:center;max-width:1280px;margin:0 auto;width:100%;}
.hero-copy{pointer-events:auto;}
.hero-chip{padding:9px 16px;margin-bottom:22px;}
.hero-h{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-0.03em;color:var(--ink-900);
  text-wrap:balance;font-weight:500;}
.hero-h em{font-style:italic;color:var(--clay-600);}
.hero-sub{font-size:clamp(16px,1.35vw,19.5px);color:var(--ink-500);font-weight:500;line-height:1.55;
  max-width:560px;margin-top:22px;text-wrap:pretty;}
.hero-sub strong{color:var(--ink-700);}
.hero-ctas{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-note{font-size:13.5px;font-weight:600;color:var(--ink-400);margin-top:20px;}

/* theater (right column) */
.hero-theater{position:relative;height:min(560px,62vh);min-height:420px;}
.core{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(0);width:108px;height:108px;
  z-index:3;transition:transform 1s cubic-bezier(.3,1.5,.4,1);}
.core.on{transform:translate(-50%,-50%) scale(1);}
.core-logo{width:108px;height:108px;filter:drop-shadow(0 14px 26px rgba(174,160,144,0.55)) drop-shadow(0 0 38px rgba(232,111,69,0.4));}
.core-ring{position:absolute;inset:0;border-radius:38%;border:1.5px solid rgba(216,93,54,0.35);opacity:0;}
.core.on .core-ring{animation:coreRing calc(3.2s/var(--motion,1)) ease-out infinite;}
.core.on .r2{animation-delay:1.05s;}
.core.on .r3{animation-delay:2.1s;}
@keyframes coreRing{0%{transform:scale(1);opacity:.65;}100%{transform:scale(2.6);opacity:0;}}

/* ordered flow column that emerges from the core */
.order-flow{position:absolute;left:50%;top:calc(42% + 78px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;z-index:4;width:max-content;}
.flow-chip{display:flex;align-items:center;gap:9px;background:var(--card-hi);border-radius:99px;
  box-shadow:var(--sh-sm);padding:9px 17px;font-size:13.5px;font-weight:700;color:var(--ink-700);
  opacity:0;transform:translateY(-18px) scale(.6);}
.flow-chip.snap{animation:flowSnap .7s cubic-bezier(.3,1.6,.4,1) forwards;}
@keyframes flowSnap{60%{opacity:1;transform:translateY(2px) scale(1.04);}100%{opacity:1;transform:none;}}
.flow-chip .fdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fdot.clay{background:var(--clay-500);} .fdot.sage{background:var(--sage-600);}
.fdot.amber{background:var(--amber-500);} .fdot.blue{background:var(--blue-500);}
.fdot.source{background:var(--ink-300);}
.flow-tie{width:1.5px;height:7px;background:var(--ink-300);opacity:0;margin:-4px 0;}
.flow-tie.snap{animation:tieIn .4s ease forwards;}
@keyframes tieIn{to{opacity:.6;}}

.replay{position:absolute;right:6px;bottom:0;display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;
  background:transparent;color:var(--ink-400);font-family:var(--font-ui);font-size:13px;font-weight:700;
  padding:9px 13px;border-radius:99px;transition:.2s;opacity:0;}
.replay.on{opacity:1;}
.replay:hover{color:var(--clay-600);background:rgba(120,105,90,0.07);}

/* ---------- chaos fragments (hero + storm reuse) ---------- */
.chaos-field{position:absolute;inset:0;z-index:1;overflow:hidden;}
.frag{position:absolute;left:0;top:0;will-change:transform,opacity;width:max-content;max-width:240px;
  font-family:var(--font-ui);line-height:1.25;}
.frag-inner{border-radius:14px;padding:11px 14px;box-shadow:var(--sh-sm);position:relative;}
.frag .ft{font-size:13px;font-weight:700;color:var(--ink-900);}
.frag .fs{font-size:11px;font-weight:600;color:var(--ink-500);margin-top:3px;}
.frag .fw{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:3px;}

.frag-note .frag-inner{background:linear-gradient(150deg,#faf0d4,#f3e3b8);box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.5);}
.frag-note .ft{color:#5d4a1d;font-family:var(--font-serif);font-style:italic;font-size:14.5px;font-weight:500;}
.frag-pdf .frag-inner{background:var(--card-hi);padding-right:38px;}
.frag-pdf .frag-inner::after{content:attr(data-tag);position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;
  color:var(--rose-700);background:var(--rose-100);padding:3px 6px;border-radius:6px;}
.frag-msg .frag-inner{background:linear-gradient(150deg,#eef3f7,#dfe9f0);border-radius:16px 16px 16px 4px;}
.frag-msg .ft{color:var(--blue-700);font-weight:650;}
.frag-eob .frag-inner{background:linear-gradient(150deg,#fdf3f0,#f8e2dc);border:1px solid var(--rose-200);}
.frag-eob .ft{color:var(--rose-700);letter-spacing:.02em;}
.frag-pill .frag-inner{background:linear-gradient(150deg,#fff,#f4efe8);border-radius:99px;display:flex;align-items:center;gap:8px;padding:9px 16px;}
.frag-pill .frag-inner::before{content:"";width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg,#ee7a52 50%,#fff 50%);box-shadow:0 0 0 1px var(--hair);}
.frag-appt .frag-inner{background:var(--card);border-left:4px solid var(--clay-500);border-radius:10px;}
.frag-task .frag-inner{background:var(--card-hi);display:flex;align-items:center;gap:9px;}
.frag-task .frag-inner::before{content:"";width:15px;height:15px;border-radius:5px;flex-shrink:0;
  box-shadow:var(--sh-in);background:var(--sunken);}
.frag-voice .frag-inner{background:linear-gradient(150deg,#2e2a25,#221f1b);border-radius:18px;}
.frag-voice .ft{color:#f1ede7;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:14.5px;}
.frag-voice .fw{color:#9a9085;}
.frag-band .frag-inner{background:repeating-linear-gradient(90deg,#fdfcfa 0 18px,#f3efe9 18px 20px);border:1px solid var(--hair);border-radius:99px;padding:8px 18px;}
.frag-band .ft{font-size:10.5px;letter-spacing:.1em;color:var(--ink-700);}
.frag-band .fs{font-size:9.5px;letter-spacing:.08em;}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;
  border:2px solid var(--ink-300);border-radius:16px;z-index:6;opacity:.7;}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:3px;
  background:var(--clay-500);animation:cue calc(1.8s/var(--motion,1)) ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1;}55%{transform:translateY(14px);opacity:.2;}}

/* ---------- shared section scaffolding ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 28px;}
.wrap-split{max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.s-h{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-0.025em;font-weight:500;color:var(--ink-900);
  text-wrap:balance;margin-top:14px;max-width:820px;}
.s-h em{font-style:italic;color:var(--clay-600);}
.s-sub{font-size:clamp(15.5px,1.25vw,18px);color:var(--ink-500);font-weight:500;line-height:1.55;margin-top:16px;max-width:640px;text-wrap:pretty;}
.s-sub em{font-family:var(--font-serif);color:var(--ink-700);}

/* ---------- 02 storm ----------
   Bounded to one viewport (no pinned scrollytelling): the clustering
   animation plays on entry and #messy follows immediately after. */
.storm{position:relative;}
.storm-sticky{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:11vh;}
.storm-head{text-align:center;z-index:5;position:relative;max-width:820px;padding:0 28px;}
.storm-head .s-h{margin-left:auto;margin-right:auto;}
.storm-head .s-sub{margin-left:auto;margin-right:auto;}
.storm-stage{position:absolute;inset:0;z-index:1;}
.storm-stage .frag{transition:none;}
.cluster-label{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transition:opacity .5s ease;}
.cluster-label.on{opacity:1;}
.cluster-label .cl-chip{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--card-hi);box-shadow:var(--sh-sm);border-radius:99px;padding:8px 16px;color:var(--ink-700);}
.cluster-label .cl-count{font-size:11.5px;font-weight:700;color:var(--ink-400);}
.storm-foot{position:absolute;bottom:5vh;left:0;right:0;text-align:center;font-size:14px;font-weight:700;
  color:var(--ink-400);z-index:5;transition:opacity .4s ease;}

/* ---------- 03 one messy thing ---------- */
.messy{padding:140px 0 150px;position:relative;}
.messy .wrap{text-align:center;}
.messy .s-h,.messy .s-sub{margin-left:auto;margin-right:auto;}
.messy-card{max-width:760px;margin:44px auto 0;padding:26px;}
.messy-input{display:flex;align-items:flex-start;gap:2px;min-height:84px;padding:22px 26px;text-align:left;
  font-size:clamp(17px,1.6vw,22px);font-weight:500;color:var(--ink-900);line-height:1.45;font-family:var(--font-serif);font-style:italic;}
.messy-caret{width:2.5px;height:1.35em;background:var(--clay-500);border-radius:2px;flex-shrink:0;margin-right:8px;
  animation:caret 1.1s steps(1) infinite;margin-top:.12em;}
@keyframes caret{50%{opacity:0;}}
.messy-hint{margin-top:14px;font-size:12.5px;font-weight:700;color:var(--ink-400);letter-spacing:.04em;}
.messy-response{max-width:760px;margin:0 auto;}
.resp-line{height:54px;display:flex;justify-content:center;}
.resp-line i{width:1.5px;background:linear-gradient(var(--clay-500),var(--ink-300));display:block;height:0;transition:height .8s cubic-bezier(.2,.8,.2,1);}
.messy-response.in .resp-line i{height:100%;}
.resp-card{text-align:left;padding:28px 30px;max-width:620px;margin:0 auto;}
.resp-card .dot{width:8px;height:8px;border-radius:50%;background:var(--clay-500);animation:respPulse calc(2.4s/var(--motion,1)) ease-in-out infinite;}
@keyframes respPulse{50%{box-shadow:0 0 0 6px rgba(232,111,69,0.15);}}
.resp-h{font-size:22px;font-weight:700;letter-spacing:-0.015em;line-height:1.25;margin-top:14px;text-wrap:balance;}
.resp-p{font-size:15px;color:var(--ink-500);font-weight:500;line-height:1.55;margin-top:10px;text-wrap:pretty;}
.resp-ctas{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap;}
.messy-then{font-size:14.5px;font-weight:700;color:var(--ink-400);margin-top:40px;}
.messy-modules{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:18px;}
.module-chip{display:inline-flex;align-items:center;gap:8px;background:var(--card-hi);box-shadow:var(--sh-sm);
  border-radius:99px;padding:11px 19px;font-size:14px;font-weight:700;color:var(--ink-700);
  opacity:0;transform:translateY(16px) scale(.85);transition:transform .6s cubic-bezier(.3,1.5,.4,1), opacity .5s ease;transition-delay:var(--d,0s);}
.messy-response.in .module-chip{opacity:1;transform:none;}
.module-chip i{width:8px;height:8px;border-radius:50%;display:block;}

/* mini buttons (shared w/ docs) */
.mini-btn{display:inline-flex;align-items:center;gap:6px;border-radius:99px;font-size:12.5px;font-weight:700;
  padding:9px 14px;cursor:pointer;background:var(--card-hi);box-shadow:var(--sh-sm);color:var(--ink-700);transition:.2s;}
.mini-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-md);}
.mini-btn.primary{background:linear-gradient(180deg,#ee7a52,#d95a30);color:#fff;box-shadow:0 6px 14px rgba(216,93,54,0.3);}