/* ============================================================
   KOGITO LANDING - STRUCTURE (components only)

   Ported from the AlphaZen landing. Rule: no colour literals here.
   Every colour is a token from theme.css, or rgba(var(--x-rgb), alpha).
   Check with:  grep -n "#[0-9A-Fa-f]\{3,6\}" structure.css   -> must be empty

   Context tokens. Components read --ink / --muted / --line-rgb /
   --kicker / --serif, never the d-/l- values directly. A section or a
   plate switches context by redefining these five, so the same card
   works on the dark ground, on the light grid, and inside a black plate.
   ============================================================ */

:root,
.plate{
  --ground:var(--d-ground);
  --ink:var(--d-ink);
  --muted:var(--d-muted);
  --line-rgb:var(--d-line-rgb);
  --kicker:var(--accent);
  --serif:var(--accent-soft);
}
.section--light{
  --ground:var(--l-ground);
  --ink:var(--l-ink);
  --muted:var(--l-muted);
  --line-rgb:var(--l-line-rgb);
  --kicker:var(--l-kicker);
  --serif:var(--l-accent-text);
}
/* Repeated on every context, because a var() inside a custom property is
   resolved where it is declared: declared on :root alone, the light section
   would inherit the dark hairline. */
:root,.plate,.section--light{
  --hairline:rgba(var(--line-rgb),.06);
  --hairline-strong:rgba(var(--line-rgb),.1);
}

/* ---------- BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  position:relative;
  background-color:var(--d-ground);
  /* Film grain only: no pattern on the dark ground. Depth comes from the orbs. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(var(--accent-rgb),.3)}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.4rem}
.wrap--wide{max-width:var(--wrap-wide)}
section{padding:4rem 0;border-top:1px solid var(--hairline)}
h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-bottom:1.2rem;color:var(--ink)}
h3{color:var(--ink)}
p{color:var(--muted)}
p strong{color:var(--ink);font-weight:600}
.lead{font-size:1rem;line-height:1.7;max-width:640px}

/* ---------- TYPE ACCENTS ---------- */
/* Serif italic: one or two words inside a heading, never a whole line. */
.serif{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--serif)}
/* Kicker: the small uppercase label above every heading. */
.kicker{
  display:inline-block;margin-bottom:1.1rem;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kicker);
}
/* Tag: smaller, bolder label inside cards (step names, card categories). */
.tag{
  display:block;margin-bottom:.6rem;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kicker);
}
/* Marker-pen highlight: the one borrowed flourish. Once per section, max. */
.mark{background:linear-gradient(180deg,transparent 54%,rgba(var(--accent-solid-rgb),.55) 54%);padding:0 .12em}

/* ---------- CHIPS (soft filled, never outlined) ---------- */
.chip{
  display:inline-block;border-radius:var(--radius-chip);
  background:var(--accent-solid);color:var(--d-ground);
  font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.34rem .5rem;text-align:center;white-space:nowrap;
}
.chip--alt{background:var(--alt)}
.chip--pill{border-radius:999px}
/* --alt is a light fill: on the light ground it flips to ink, except inside a plate. */
.section--light .chip--alt:not(.plate .chip--alt){background:var(--l-ink);color:var(--l-ground)}
.chip--soft{background:rgba(var(--accent-rgb),.12);color:var(--serif)}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(var(--d-ground-rgb),.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{max-width:var(--wrap-wide);margin:0 auto;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{font-weight:800;letter-spacing:-.01em;text-decoration:none}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-cta{
  background:var(--accent);color:var(--d-ground);
  padding:.5rem 1.1rem;border-radius:6px;font-weight:700;font-size:.85rem;
  text-decoration:none;transition:background .2s;
}
.nav-cta:hover{background:var(--accent-soft)}
@media(max-width:560px){.nav-cta{padding:.5rem .8rem;font-size:.78rem}}

/* ---------- HERO ---------- */
.hero{border-top:none;padding:5.5rem 0 3.5rem;position:relative;overflow:hidden;text-align:center}
.hero::before{
  content:"";position:absolute;inset:-40% -20% auto;height:130%;
  background:radial-gradient(ellipse 60% 45% at 50% 8%,rgba(var(--accent-rgb),.13),transparent 65%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(1.9rem,5.2vw,2.9rem);font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:1.6rem}
.hero .lead{margin:0 auto 2rem}
/* Typewriter word: same typeface, distinguished by colour + weight + caret. */
.type-word{
  color:var(--accent-soft);font-weight:700;
  border-right:2px solid var(--accent-soft);padding-right:2px;
  animation:caret .9s step-end infinite;
}
@keyframes caret{50%{border-color:transparent}}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;text-decoration:none;border:none;cursor:pointer;
  background:var(--accent);color:var(--d-ground);
  font-family:inherit;font-weight:700;font-size:1rem;
  padding:.95rem 2.4rem;border-radius:8px;
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn:hover{background:var(--accent-soft);transform:translateY(-1px);box-shadow:0 8px 30px rgba(var(--accent-rgb),.22)}
.btn:active{transform:translateY(0)}
/* Pill with an arrow that nudges on hover. Two doors of equal weight:
   accent fill and --alt fill, never solid vs outlined. */
.btn--pill{
  position:relative;border-radius:999px;
  background:var(--accent-solid);
  padding:.95rem 2.9rem .95rem 2.1rem;
  box-shadow:0 8px 28px rgba(var(--accent-solid-rgb),.3);
}
.btn--pill::after{
  content:'\2192';position:absolute;right:1.35rem;top:50%;transform:translateY(-50%);
  font-size:.95rem;font-weight:700;transition:transform .22s ease;
}
.btn--pill:hover{background:var(--accent-solid-hover);box-shadow:0 12px 36px rgba(var(--accent-solid-rgb),.42);transform:translateY(-2px)}
.btn--pill:hover::after{transform:translateY(-50%) translateX(4px)}
.btn--alt{background:var(--alt);box-shadow:0 8px 28px rgba(var(--alt-rgb),.18)}
.btn--alt:hover{background:var(--alt-hover);box-shadow:0 12px 36px rgba(var(--alt-rgb),.3)}
.cta-pair{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){
  .cta-pair{flex-direction:column;align-items:stretch}
  .cta-pair .btn{text-align:center}
}

/* ---------- STATUS PILL (live dot) ---------- */
.status{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:1.4rem;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.07);
  font-size:.82rem;font-weight:600;color:var(--accent-soft);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:blinkDot 1.8s infinite}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.35}}
/* Radar pulse: for "something is running" (agents, live systems). */
.dot--pulse{animation:radar 2.4s ease-out infinite;box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}
@keyframes radar{
  0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}
  70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}

/* ---------- CARDS (dark ground) ---------- */
.card{
  border:1px solid var(--hairline-strong);border-radius:var(--radius-card);
  padding:1.7rem 1.5rem;background:rgba(var(--line-rgb),.015);
  display:flex;flex-direction:column;
}
.card h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.01em}
.card p{font-size:.92rem}
.card--highlight{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.06)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
@media(max-width:1000px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}

/* Key/value rows inside a card: a chip on the left, text on the right. */
.split{margin-top:1.1rem;border-top:1px solid var(--hairline);padding-top:.9rem;display:flex;flex-direction:column;gap:.7rem}
.split-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:.75rem;align-items:start}
.split-v{font-size:.84rem;line-height:1.5;color:var(--muted)}
@media(max-width:420px){.split-row{grid-template-columns:1fr;gap:.3rem}.split-row .chip{justify-self:start}}

/* ---------- STATS ---------- */
.stat .n{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.stat .l{font-size:.8rem;color:var(--muted);margin-top:.3rem;line-height:1.45}
.card--highlight.stat .n{color:var(--accent-soft)}
.card--highlight.stat .l{color:var(--ink)}

/* ---------- FLOW (numbered steps on a rail) ----------
   Rail runs to the next step in the same row, numbers light up as they
   enter the viewport (motion.js adds .lit). */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem 1.4rem;margin-top:2.6rem}
.flow-step{position:relative;text-align:left}
.flow-step::after{
  content:'';position:absolute;top:19px;left:50px;right:-1.4rem;height:1px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),.12));
}
.flow-step:nth-child(4n)::after{display:none}
.flow-num{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
  font-size:.82rem;font-weight:700;color:var(--accent-soft);background:var(--ground);
  border:1px solid rgba(var(--accent-rgb),.45);
  transition:background .45s ease,color .45s ease,box-shadow .45s ease;
}
.flow-step.lit .flow-num{background:var(--accent);color:var(--d-ground);border-color:var(--accent);box-shadow:0 0 22px rgba(var(--accent-rgb),.45)}
.flow-step .tag{min-height:2.7em;line-height:1.35;margin-bottom:.55rem}
.flow-step h3{font-size:1.02rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.01em;min-height:1.4em}
.flow-step p{font-size:.86rem;line-height:1.6}
@media(max-width:1000px){
  .flow{grid-template-columns:1fr 1fr}
  .flow-step:nth-child(4n)::after{display:block}
  .flow-step:nth-child(2n)::after{display:none}
}
@media(max-width:620px){
  .flow{grid-template-columns:1fr;gap:1.8rem}
  .flow-step::after{display:none !important}
  .flow-step .tag,.flow-step h3{min-height:0}
}

/* ---------- TICK / CROSS LISTS ---------- */
.ticks{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.ticks li{font-size:.92rem;line-height:1.6;color:var(--muted);padding-left:1.4rem;position:relative}
.ticks li strong{color:var(--ink)}
.ticks li::before{content:'\2713';position:absolute;left:0;top:-.05rem;font-weight:700;color:var(--accent)}
.ticks--no li::before{content:'\00d7';color:var(--negative)}

/* ---------- LIGHT SECTION (the Ferretti move) ----------
   Breaks the dark run: light ground with a faint square grid, black
   plates floating on it with real elevation. The rhythm change is what
   stops the page reading as one long dark slab. Use it for ONE or TWO
   sections per page, never alternate every section. */
.section--light{
  position:relative;z-index:1;
  background-color:var(--l-ground);
  background-image:
    linear-gradient(rgba(var(--l-line-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--l-line-rgb),.05) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  border-top:1px solid rgba(var(--l-line-rgb),.09);
  border-bottom:1px solid rgba(var(--l-line-rgb),.09);
}

/* ---------- PLATE (black card that floats on the light grid) ---------- */
.plate{
  background:var(--d-ground);color:var(--ink);
  border-radius:var(--radius-plate-lg);padding:1.7rem 1.6rem;
  box-shadow:0 26px 64px rgba(var(--d-ground-rgb),.22);
}
.plate--media{border-radius:var(--radius-plate);padding:.5rem;box-shadow:0 22px 56px rgba(var(--d-ground-rgb),.2)}
.plate--media img{width:100%;display:block;border-radius:var(--radius-card)}
.plate-head{
  display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted);
}
/* Rows inside a plate, staggered in when the plate reveals. */
.plate-list{display:flex;flex-direction:column;gap:.5rem}
.plate-row{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:.9rem;align-items:center;
  background:var(--d-surface-2);border:1px solid rgba(var(--d-line-rgb),.055);
  border-radius:var(--radius-row);padding:.78rem .9rem;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;
}
.plate.in .plate-row{opacity:1;transform:none}
.plate-row-title{display:block;font-size:.9rem;font-weight:700;color:var(--d-ink)}
.plate-row-text{display:block;font-size:.84rem;line-height:1.5;color:var(--d-muted);margin-top:.18rem}
@media(max-width:520px){.plate-row{grid-template-columns:1fr;gap:.45rem}.plate-row .chip{justify-self:start}}

/* ---------- FAQ ---------- */
.faq{max-width:var(--wrap);margin:2.2rem auto 0}
.faq details{border:1px solid var(--hairline-strong);border-radius:var(--radius-row);background:rgba(var(--line-rgb),.015);margin-bottom:.8rem;overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.3rem;
  font-size:.95rem;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background .2s;
}
.faq summary:hover{background:rgba(var(--line-rgb),.02)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--accent);transition:transform .25s;flex-shrink:0;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.3rem 1.2rem;font-size:.92rem;color:var(--muted)}

/* ---------- FINAL CTA ---------- */
.final-cta{
  border:1px solid var(--hairline-strong);border-radius:var(--radius-plate);
  background:
    radial-gradient(ellipse 70% 90% at 20% 0%,rgba(var(--accent-rgb),.08),transparent 60%),
    radial-gradient(ellipse 70% 90% at 90% 100%,rgba(var(--accent-rgb),.06),transparent 60%),
    var(--d-surface);
  text-align:center;padding:3.6rem 2rem;margin-top:1rem;
}
.final-cta .ready{font-size:clamp(2rem,5vw,2.8rem);font-weight:600;letter-spacing:-.01em;margin-bottom:1rem}
.final-cta p{max-width:460px;margin:0 auto 1.6rem}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--hairline);padding:3rem 0 3.4rem;text-align:center}
.footer .details{font-size:.78rem;color:var(--d-faint);line-height:1.8}

/* ---------- AMBIENT ORBS ----------
   A few large, heavily blurred accent orbs drifting very slowly (36s+).
   Absolute, not fixed: fixed + blur froze scrolling in an earlier round. */
.bg-ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);animation:orbDrift ease-in-out infinite alternate}
.orb--1{width:560px;height:560px;top:0;left:-8%;background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 70%);animation-duration:36s}
.orb--2{width:460px;height:460px;top:26%;left:68%;background:radial-gradient(circle,rgba(var(--accent-soft-rgb),.09),transparent 70%);animation-duration:44s;animation-delay:-14s}
.orb--3{width:500px;height:500px;top:58%;left:2%;background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 70%);animation-duration:40s;animation-delay:-22s}
.orb--4{width:440px;height:440px;top:82%;left:62%;background:radial-gradient(circle,rgba(var(--accent-soft-rgb),.08),transparent 70%);animation-duration:48s;animation-delay:-6s}
@keyframes orbDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(50px,70px) scale(1.08)}}

/* ---------- HEX FIELD (hero background) ----------
   Two copies of one flat-top hex pattern: a dim one always visible, a
   hot one visible only inside a radial mask that follows the pointer
   (--mx/--my, set by hex.js). The cell under the pointer lights up and
   fades, leaving a trail. Pattern geometry is written by hex.js from
   --hex-r so the CSS and the hit-testing never disagree. */
.hex-field{position:relative;overflow:hidden;isolation:isolate}
.hex-field::before{
  content:"";position:absolute;inset:0;z-index:-5;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%,rgba(var(--accent-rgb),.10),transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 40%,var(--d-ground-warm),var(--d-ground) 75%);
}
.hex-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hex-layer path{fill:none}
/* Dim layer fades toward the centre so the headline sits on a calm ground. */
.hex-dim{
  z-index:-3;
  -webkit-mask-image:radial-gradient(ellipse 46% 42% at 50% 46%,rgba(0,0,0,.22),#000 100%);
          mask-image:radial-gradient(ellipse 46% 42% at 50% 46%,rgba(0,0,0,.22),#000 100%);
}
.hex-dim path{stroke:rgba(var(--accent-rgb),.42);stroke-width:1.3}
.hex-lit{
  z-index:-2;
  -webkit-mask-image:radial-gradient(circle var(--spot) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.45) 40%,transparent 72%);
          mask-image:radial-gradient(circle var(--spot) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.45) 40%,transparent 72%);
  filter:drop-shadow(0 0 3px rgba(var(--accent-soft-rgb),.7));
}
.hex-lit path{stroke:var(--accent-soft);stroke-width:1.6}
.hex-spot{
  position:absolute;inset:0;z-index:-4;pointer-events:none;
  background:radial-gradient(circle calc(var(--spot) * 1.3) at var(--mx,50%) var(--my,40%),rgba(var(--accent-rgb),.16),transparent 70%);
}
.hex-cell{fill:rgba(var(--accent-soft-rgb),.07);stroke:var(--accent-soft);stroke-width:1.4;animation:hexFade 1.6s ease-out forwards}
@keyframes hexFade{0%{opacity:1}100%{opacity:0}}
.glint{
  position:absolute;z-index:-1;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--alt-rgb),.95) 0 2px,rgba(var(--accent-soft-rgb),.55) 4px,rgba(var(--accent-rgb),.18) 18px,transparent 45px);
  animation:twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
/* Hero on the hex field: centred, full height, its own ground. */
.hero.hex-field{min-height:min(100vh,920px);display:flex;align-items:center;padding:7rem 0 5rem;border-top:none}
.hero.hex-field::before{inset:0;height:auto}
.hero h1 .l{display:block}
.hero-sub{max-width:520px;margin:0 auto 2.2rem;font-size:1.05rem;color:var(--d-muted)}

/* ---------- HERO v1 (aligned to the Framer references) ----------
   Badge pill, big tight title with a soft white-to-grey fade, one serif
   phrase typed in, short muted sub, a single CTA, a copper horizon. */
.wrap--hero{max-width:1000px}
.hero.hex-field:has(.horizon){padding:7.5rem 0 9.5rem}
/* Varied glint size so the hover-only field reads as a starfield. */
.glint{width:calc(90px * var(--g,1));height:calc(90px * var(--g,1));margin:calc(-45px * var(--g,1)) 0 0 calc(-45px * var(--g,1))}
.badge{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--hairline-strong);background:rgba(var(--line-rgb),.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.82rem;font-weight:500;color:var(--ink);
}
.hero-title{
  font-size:clamp(2.3rem,6vw,4.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.06;
  margin-bottom:1.6rem;
}
.grad{
  background:linear-gradient(180deg,var(--d-ink) 30%,rgba(var(--d-line-rgb),.58));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The typed phrase gets its own line with a fixed height, so the layout
   never jumps while it types and deletes. */
.type-line{min-height:1.12em}
.type-line .serif{letter-spacing:-.01em}
.serif.type-word{font-weight:400;color:var(--accent-soft);border-right-color:rgba(var(--accent-soft-rgb),.8);padding-right:4px}
.hero .hero-sub{font-size:1.08rem;line-height:1.6;max-width:500px}
/* Planet-edge glow at the bottom of the hero. Sits above the hex layers so
   the grid dips behind it. */
.horizon{
  position:absolute;left:50%;bottom:calc(-70vw + 70px);z-index:-1;pointer-events:none;
  width:150vw;height:76vw;border-radius:50%;transform:translateX(-50%);
  background:var(--d-ground);
  border-top:1px solid rgba(var(--accent-soft-rgb),.55);
  box-shadow:0 -10px 40px rgba(var(--accent-rgb),.28),0 -40px 120px rgba(var(--accent-rgb),.16),inset 0 24px 60px rgba(var(--accent-rgb),.10);
}

/* Hover-only hex field: at rest only the glints show; the grid fades in
   around the pointer and out again when it leaves. */
.hex-field--hover .hex-dim,
.hex-field--hover .hex-lit,
.hex-field--hover .hex-spot{opacity:0;transition:opacity .7s ease}
.hex-field--hover.is-lit .hex-dim,
.hex-field--hover.is-lit .hex-lit,
.hex-field--hover.is-lit .hex-spot{opacity:1}
.hex-field--hover .hex-dim{
  -webkit-mask-image:radial-gradient(circle calc(var(--spot) * 1.7) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);
          mask-image:radial-gradient(circle calc(var(--spot) * 1.7) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);
}

/* Floating nav, as in the references: a bordered bar inset from the edges. */
.nav{background:transparent;border-bottom:none;padding:.8rem 1rem 0}
.nav-inner{
  border:1px solid var(--hairline-strong);border-radius:14px;
  background:rgba(var(--d-ground-rgb),.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* ---------- LEAD FORM ---------- */
.lead-form{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem;margin:2.2rem auto 0;max-width:640px;text-align:left;
  padding:1.8rem;border:1px solid var(--hairline-strong);border-radius:var(--radius-plate);
  background:rgba(var(--d-ground-rgb),.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lead-form label{display:flex;flex-direction:column;gap:.45rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted)}
.lead-form .span-2{grid-column:1 / -1}
.lead-form input,.lead-form select,.lead-form textarea{
  font:inherit;font-size:.92rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--d-ink);
  background:var(--d-surface);border:1px solid var(--hairline-strong);border-radius:var(--radius-row);
  padding:.75rem .85rem;min-height:44px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.lead-form textarea{resize:vertical;line-height:1.5}
.lead-form ::placeholder{color:var(--d-faint)}
.lead-form select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.lead-form .check{flex-direction:row;align-items:flex-start;gap:.6rem;font-size:.8rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5}
.lead-form .check input{width:18px;min-height:18px;height:18px;margin-top:.1rem;accent-color:var(--accent);flex:none}
.lead-form .check a{color:var(--accent-soft)}
.lead-form .btn{justify-self:center;margin-top:.4rem}
@media(max-width:600px){.lead-form{grid-template-columns:1fr;padding:1.3rem}}

/* ---------- MARQUEE (logos or text reviews) ----------
   The track holds the items twice; translating by -50% loops seamlessly.
   Pauses on hover so a review can be read. Edges fade into the ground. */
.marquee{
  position:relative;overflow:hidden;padding:1.6rem 0;border-top:1px solid var(--hairline);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:3.2rem;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-label{display:block;text-align:center;margin-bottom:1.2rem;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--d-faint)}
.logo-slot{
  flex:none;display:flex;align-items:center;justify-content:center;height:44px;min-width:140px;padding:0 1.2rem;
  border:1px dashed rgba(var(--d-line-rgb),.14);border-radius:var(--radius-row);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--d-faint);
}
/* Wider band: more air, bigger slots. */
.marquee--wide{padding:3rem 0 3.2rem;border-bottom:1px solid var(--hairline)}
.marquee--wide .marquee-label{margin-bottom:1.8rem}
.marquee--wide .marquee-track{gap:4.5rem}
.marquee--wide .logo-slot{height:64px;min-width:200px}
.review{flex:none;max-width:420px;font-size:.92rem;line-height:1.55;color:var(--d-muted)}
.review b{display:block;margin-top:.4rem;font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--accent)}

/* ---------- PAIN CARDS (icon + two lines) ---------- */
.pain{gap:1rem}
.pain .card{padding:1.5rem 1.4rem;gap:.2rem}
.pain .card h3{font-size:1.02rem;margin-bottom:.25rem}
.pain .card p{font-size:.88rem;line-height:1.55}
.ico{width:38px;height:38px;margin-bottom:1rem;color:var(--accent)}
.ico *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- FLOW with hex nodes ---------- */
.flow--hex .flow-num{
  border:none;border-radius:0;width:44px;height:40px;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:rgba(var(--accent-rgb),.22);
}
.flow--hex .flow-step::after{top:20px;left:56px}
.flow--hex .flow-step.lit .flow-num{background:var(--accent);box-shadow:none}

/* ---------- CALENDAR STRIP (inside the feasibility plate) ---------- */
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;margin-top:1.1rem}
.cal span{
  height:28px;border-radius:6px;background:rgba(var(--d-line-rgb),.05);
  font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--d-faint);
  display:flex;align-items:center;justify-content:center;
}
.cal span.on{background:rgba(var(--accent-rgb),.22);color:var(--accent-soft)}
.cal span.go{background:var(--accent-solid);color:var(--d-ground)}

/* ---------- CASES ---------- */
.case .n{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--accent-soft);font-variant-numeric:tabular-nums;line-height:1.1;margin:.9rem 0 .2rem}
.case .n-l{font-size:.8rem;color:var(--muted);margin-bottom:1rem}
.case h3{font-size:1rem}
.case p{font-size:.86rem}
.case .chip{align-self:flex-start}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:240px minmax(0,1fr);gap:2.4rem;align-items:center}
.photo-slot{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--d-faint)}
.about-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 1.4rem}
.link-arrow{font-weight:700;font-size:.9rem;color:var(--serif);text-decoration:none}
.link-arrow:hover{text-decoration:underline}
@media(max-width:700px){.about{grid-template-columns:1fr}.photo-slot{max-width:240px}}

/* ---------- BOOKING (TidyCal embed slot) ---------- */
.booking{margin:1.8rem auto 0;max-width:560px;min-height:340px;border:1px dashed rgba(var(--d-line-rgb),.16);border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:rgba(var(--d-ground-rgb),.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.booking .big{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:var(--accent-soft);line-height:1}
.booking small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d-faint)}

/* ---------- LOGO BAND ----------
   Only four logos: the window is narrower than one set, so they keep
   rotating. Heights are tuned per logo for equal optical weight. */
.marquee--logos{padding:3rem 0 3.2rem;border-bottom:1px solid var(--hairline);-webkit-mask-image:none;mask-image:none}
.marquee-window{
  max-width:720px;margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.marquee--logos .marquee-label{margin-bottom:1.8rem}
.marquee--logos .marquee-track{gap:4.5rem;align-items:center;padding-right:4.5rem;animation-duration:26s}
.logo{flex:none;display:block;width:auto;opacity:.82;transition:opacity .2s}
.logo:hover{opacity:1}
.logo--colussi{height:44px}
.logo--qfarma{height:30px}
.logo--tl{height:52px}
.logo--alphazen{height:30px}

/* ---------- PHASES (method as tabs on a lit rail) ---------- */
.phases{margin-top:2.4rem}
.phase-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1rem}
.phase-tab{
  position:relative;display:flex;align-items:center;gap:.75rem;text-align:left;cursor:pointer;
  font:inherit;color:var(--muted);background:rgba(var(--line-rgb),.03);
  border:1px solid rgba(var(--line-rgb),.1);border-radius:var(--radius-card);
  padding:.85rem 1rem 1.1rem;transition:background .3s,border-color .3s,color .3s;
}
.phase-tab:hover{background:rgba(var(--line-rgb),.06)}
.phase-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.phase-num{
  flex:none;width:40px;height:36px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:rgba(var(--accent-rgb),.2);color:var(--serif);font-size:.78rem;font-weight:700;
  transition:background .4s,color .4s,transform .4s;
}
.phase-name{font-size:.9rem;font-weight:700;line-height:1.25}
.phase-bar{position:absolute;left:1rem;right:1rem;bottom:.5rem;height:2px;border-radius:2px;background:rgba(var(--line-rgb),.08);overflow:hidden}
.phase-bar i{display:block;height:100%;width:0;background:var(--accent)}
/* done = phases already shown light up, like the AlphaZen rail */
.phase-tab.is-done .phase-num{background:rgba(var(--accent-rgb),.55);color:var(--d-ground)}
.phase-tab.is-done .phase-bar i{width:100%}
.phase-tab[aria-selected="true"]{background:var(--d-ground);border-color:var(--d-ground);color:var(--d-ink);box-shadow:0 18px 40px rgba(var(--d-ground-rgb),.18)}
.phase-tab[aria-selected="true"] .phase-num{background:var(--accent);color:var(--d-ground);transform:scale(1.06)}
.phase-tab[aria-selected="true"] .phase-bar{background:rgba(var(--d-line-rgb),.1)}
.phases.is-auto .phase-tab[aria-selected="true"] .phase-bar i{animation:phaseFill var(--phase-ms,8000ms) linear forwards}
.phases:not(.is-auto) .phase-tab[aria-selected="true"] .phase-bar i{width:100%}
@keyframes phaseFill{from{width:0}to{width:100%}}

.phase-stage{padding:0;overflow:hidden;border-radius:var(--radius-plate-lg)}
.phase-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:440px}
.phase-panel[hidden]{display:none}
.phase-text{padding:2rem 2rem 1.8rem;border-right:1px solid rgba(var(--d-line-rgb),.07)}
.phase-text h3{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.4rem;color:var(--d-ink)}
.phase-text > p{font-size:.92rem;color:var(--d-muted);margin-bottom:1.2rem}
.phase-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.phase-list li{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:.8rem;align-items:baseline;
  font-size:.86rem;line-height:1.45;color:var(--d-muted);
  opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .45s ease;
}
.phase-list li b{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-soft);position:relative;padding-left:.9rem}
.phase-list li b::before{content:"";position:absolute;left:0;top:.3em;width:6px;height:6px;background:var(--accent);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.phase-out{margin-top:1.3rem;padding-top:1rem;border-top:1px solid rgba(var(--d-line-rgb),.08);font-size:.84rem;color:var(--d-ink)}
.phase-out span{display:block;margin-bottom:.3rem;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.phase-panel.is-in .phase-list li{opacity:1;transform:none}

.phase-visual{position:relative;padding:1.6rem;background:radial-gradient(ellipse 80% 70% at 70% 30%,rgba(var(--accent-rgb),.08),transparent 70%);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.viz-head{display:flex;align-items:center;gap:.35rem;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--d-faint)}
.viz-head i{width:7px;height:7px;border-radius:50%;background:rgba(var(--d-line-rgb),.14)}
.viz-head i:nth-child(3){margin-right:.5rem}

/* 01: process table, bars fill and tags pop in sequence */
.viz-table{border:1px solid rgba(var(--d-line-rgb),.08);border-radius:var(--radius-row);overflow:hidden}
.vt-row{display:grid;grid-template-columns:1.25fr 1fr 96px;gap:.8rem;align-items:center;padding:.62rem .85rem;border-top:1px solid rgba(var(--d-line-rgb),.06);font-size:.8rem;color:var(--d-ink)}
.vt-th{border-top:none;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--d-faint)}
.vt-bar{height:6px;border-radius:3px;background:rgba(var(--d-line-rgb),.06);overflow:hidden}
.vt-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),var(--accent-soft));transition:width .9s var(--ease-out)}
.vt-tag{justify-self:start;font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .45rem;border-radius:5px;opacity:0;transform:scale(.85);transition:opacity .35s,transform .35s}
.t-auto{background:var(--accent-solid);color:var(--d-ground)}
.t-simp{background:rgba(var(--accent-rgb),.2);color:var(--accent-soft)}
.t-keep{background:rgba(var(--d-line-rgb),.08);color:var(--d-muted)}
.phase-panel.is-in .vt-bar i{width:var(--w)}
.phase-panel.is-in .vt-tag{opacity:1;transform:none}

/* 02: KPI tiles count up, line draws over the budget */
.viz-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.viz-kpis div,.viz-status div{border:1px solid rgba(var(--d-line-rgb),.08);border-radius:var(--radius-row);padding:.7rem .8rem;background:rgba(var(--d-line-rgb),.02)}
.viz-kpis small,.viz-status small{display:block;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--d-faint)}
.viz-kpis b,.viz-status b{display:block;margin-top:.25rem;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--accent-soft);font-variant-numeric:tabular-nums}
.viz-chart{width:100%;height:150px;border:1px solid rgba(var(--d-line-rgb),.08);border-radius:var(--radius-row);background:rgba(var(--d-line-rgb),.015)}
.vc-grid{stroke:rgba(var(--d-line-rgb),.06);stroke-width:1;fill:none}
.vc-plan{stroke:rgba(var(--d-line-rgb),.28);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
.vc-line{stroke:var(--accent-soft);stroke-width:2.2;fill:none;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.vc-area{fill:rgba(var(--accent-rgb),.14);opacity:0;transition:opacity .8s 1.2s}
.phase-panel.is-in .vc-line{stroke-dashoffset:0}
.phase-panel.is-in .vc-area{opacity:1}
.viz-legend{display:flex;gap:1rem;font-size:.66rem;color:var(--d-muted)}
.viz-legend span::before{content:"";display:inline-block;width:14px;height:2px;margin-right:.4rem;vertical-align:middle}
.lg-a::before{background:var(--accent-soft)}
.lg-b::before{background:repeating-linear-gradient(90deg,rgba(var(--d-line-rgb),.4) 0 4px,transparent 4px 8px)}

/* 03: data flow, sources -> hub -> outputs, dots travelling */
.viz-flow{width:100%;height:auto;max-height:260px}
.vf-links path{fill:none;stroke:rgba(var(--accent-rgb),.35);stroke-width:1.4}
.vf-dots circle{fill:var(--accent-soft);filter:drop-shadow(0 0 4px rgba(var(--accent-soft-rgb),.9))}
.vf-src rect,.vf-out rect{fill:var(--d-surface-2);stroke:rgba(var(--d-line-rgb),.12)}
.vf-out rect{stroke:rgba(var(--accent-rgb),.5)}
.viz-flow text{fill:var(--d-ink);font-size:9.5px;font-weight:600;text-anchor:middle;font-family:var(--font-body)}
.vf-hub{fill:var(--accent);transform-origin:160px 100px;animation:hubPulse 2.4s ease-in-out infinite}
@keyframes hubPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(var(--accent-rgb),.6))}50%{filter:drop-shadow(0 0 12px rgba(var(--accent-soft-rgb),.95))}}

/* 04: 30 daily checks light up left to right */
.viz-days{display:grid;grid-template-columns:repeat(15,1fr);gap:5px}
.viz-days i{aspect-ratio:1;border-radius:4px;background:rgba(var(--d-line-rgb),.06);transition:background .3s,box-shadow .3s}
.viz-days i.on{background:rgba(var(--accent-rgb),.55)}
.viz-days i.warn{background:var(--negative);box-shadow:0 0 10px rgba(var(--accent-rgb),.3)}
.viz-days i.fix{background:var(--accent-soft)}
.viz-status{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

@media(max-width:900px){
  .phase-tabs{grid-template-columns:1fr 1fr}
  .phase-panel{grid-template-columns:1fr;min-height:0}
  .phase-text{border-right:none;border-bottom:1px solid rgba(var(--d-line-rgb),.07)}
}
@media(max-width:520px){
  .phase-tabs{gap:.45rem}
  .phase-tab{padding:.7rem .7rem .95rem;gap:.5rem}
  .phase-name{font-size:.8rem}
  .phase-list li{grid-template-columns:1fr;gap:.1rem}
  .phase-text{padding:1.5rem 1.3rem}
  .phase-visual{padding:1.2rem}
  .vt-row{grid-template-columns:1.2fr .8fr 84px;gap:.5rem;padding:.55rem .6rem;font-size:.72rem}
}

/* ---------- BOOKING (TidyCal embed) ---------- */
.booking-embed{
  margin:2.2rem auto 0;max-width:760px;min-height:420px;padding:1rem;
  border:1px solid var(--hairline-strong);border-radius:var(--radius-plate);
  background:rgba(var(--alt-rgb),.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.booking-embed .tidycal-embed{width:100%}
/* The fallback link stays useful if the embed is blocked; once the
   calendar iframe has been injected it steps back to a small text link. */
.booking-embed:has(iframe) .booking-fallback{
  background:none;box-shadow:none;color:var(--l-muted);padding:.2rem .6rem;font-size:.82rem;font-weight:600;text-decoration:underline
}
.booking-embed:has(iframe) .booking-fallback::after{content:none}
.booking-embed iframe{width:100%;border:0}

/* ---------- CASES / ABOUT additions ---------- */
.case .n--status{display:flex;align-items:center;gap:.6rem;font-size:1.6rem}
.about-photo{padding:.45rem;aspect-ratio:auto}
.about-photo img{width:100%;height:auto;display:block;border-radius:var(--radius-card)}
.about-role{margin:-.6rem 0 1rem;font-size:.95rem;font-weight:600;color:var(--l-accent-text)}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity var(--reveal-duration) var(--ease-out),transform var(--reveal-duration) var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.plate-row{opacity:1;transform:none;transition:none}
  .btn,.nav-cta,.dot,.type-word,.orb,.flow-num,.glint,.marquee-track{transition:none;animation:none}
  .hex-cell{display:none}
  .phase-list li,.vt-tag{opacity:1;transform:none;transition:none}
  .vt-bar i,.vc-line,.vc-area{transition:none}
  .vf-hub{animation:none}
  .marquee{overflow-x:auto}
}