:root{
  --orange:#FF4D00;
  --orange-soft:#ff7a3d;
  --cream:#FFFDF9;
  --ink:#1A1A1A;
  --ink-2:#121110;
  --ink-3:#0c0b0a;
  --muted:#b9b3aa;          /* legible muted on dark, ~7:1 on --ink */
  --line:rgba(255,253,249,.14);
  --panel:rgba(255,253,249,.045);
  --panel-2:rgba(255,253,249,.07);
  --font:'Sora', system-ui, sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, monospace;
  --maxw:1180px;
  /* z-scale */
  --z-bg:0; --z-content:1; --z-embers:2; --z-mascot:40; --z-meter:60;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  color:var(--cream);
  background:var(--ink-3);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;          /* clip, NOT hidden — hidden makes body a scroll container and breaks position:sticky (pinned-pan) */
}

/* ---------- themed scrollbar (matches the dark / ember world) ---------- */
html{scrollbar-color:var(--orange) rgba(255,253,249,.05);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(10,9,8,.7)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--orange),var(--orange-soft));
  border-radius:10px;border:3px solid var(--ink-3)}
::-webkit-scrollbar-thumb:hover{background:var(--orange-soft)}

/* ---------- reusable content card (anchors prose / CTAs so they don't float) ---------- */
.card{position:relative;overflow:hidden;border-radius:20px;
  background:var(--panel-2);border:1px solid var(--line);
  padding:clamp(28px,4vw,52px);
  backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 90% 4%,rgba(255,77,0,.10),transparent 60%)}
.card > *{position:relative}

/* ---------- junkyard dusk-to-dawn atmosphere (do-not-redesign placeholder) ---------- */
/* fixed scene; --dawn (0 dusk -> 1 dawn) is driven by scroll in JS */
.scene{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;--dawn:0}
.scene .sky{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%,
      rgba(255,77,0, calc(.20 + .35*var(--dawn))) 0%,
      rgba(255,77,0,0) 55%),
    linear-gradient(180deg,
      #0a0a14 0%,
      #14101c calc(22% - 8%*var(--dawn)),
      #241526 48%,
      #3a1c1e 72%,
      #1a0f0c 100%);
  transition:none;
}
.scene .sun{
  position:absolute;left:50%;bottom:-8vmin;width:46vmin;height:46vmin;
  transform:translateX(-50%) translateY(calc(18vmin - 26vmin*var(--dawn)));
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,180,90, calc(.55 + .35*var(--dawn))) 0%,
    rgba(255,120,40,.30) 38%,
    rgba(255,77,0,0) 70%);
  filter:blur(2px);
}
/* layered junk silhouettes */
.scene .ridge{position:absolute;left:0;right:0;bottom:0;height:42vmin}
.scene .ridge svg{position:absolute;bottom:0;width:200%;height:100%}
.scene .ridge--far svg path{fill:#160e14}
.scene .ridge--mid svg path{fill:#0f0a0c}
.scene .ridge--near svg path{fill:#070506}
.scene .haze{position:absolute;inset:0;background:radial-gradient(140% 60% at 50% 100%,rgba(255,77,0,.07),transparent 60%)}
.scene .grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- charge meter (scroll progress) ---------- */
.charge{position:fixed;top:0;left:0;right:0;height:4px;z-index:var(--z-meter);
  background:rgba(255,253,249,.06)}
.charge__fill{height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--orange),var(--orange-soft));
  box-shadow:0 0 14px rgba(255,77,0,.7);transition:width .08s linear}
.charge__bolt{position:fixed;top:10px;right:16px;z-index:var(--z-meter);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  display:flex;align-items:center;gap:6px}
.charge__bolt b{color:var(--orange);font-weight:600}

/* ---------- robot mascot ---------- */
.mascot{position:fixed;left:18px;bottom:18px;z-index:var(--z-mascot);width:64px;height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));animation:hover 4s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mascot .eye{animation:blink 5.5s steps(1) infinite}
@keyframes blink{0%,96%,100%{opacity:1}97%,99%{opacity:.15}}
@media (max-width:640px){.mascot{width:46px}}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
section{position:relative;z-index:var(--z-content)}
/* uniform section spacing — width-based so it's consistent across devices, with a mobile floor */
.block{padding-block:clamp(56px,8vw,120px)}

.cap{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.cap .name{color:var(--cream);background:var(--panel-2);border:1px solid var(--line);
  padding:4px 9px;border-radius:6px;font-weight:500}
.cap .tag{padding:4px 8px;border-radius:6px;font-weight:600;font-size:11px}
.cap .tag.css{color:#7fe7c4;background:rgba(127,231,196,.1);border:1px solid rgba(127,231,196,.25)}
.cap .tag.js{color:var(--orange-soft);background:rgba(255,122,61,.12);border:1px solid rgba(255,122,61,.3)}
.cap .tag.html{color:#9fb8ff;background:rgba(159,184,255,.1);border:1px solid rgba(159,184,255,.25)}

h2.head{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.04;letter-spacing:-.03em;
  font-weight:700;margin:0 0 .4em;text-wrap:balance}
.lead{color:var(--muted);max-width:62ch;font-size:clamp(1rem,1.4vw,1.12rem)}

.eyebrow-bare{text-shadow:0 2px 18px rgba(0,0,0,.7)}

/* ---------- shared reveal ---------- */
[data-reveal]{opacity:0;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-60px)}
[data-reveal="right"]{transform:translateX(60px)}
[data-reveal="up"]{transform:translateY(50px)}
[data-reveal="drop"]{transform:translateY(-60px)}
[data-reveal="zoom"]{transform:scale(.88)}
[data-reveal="blur"]{filter:blur(12px)}
[data-reveal="blur"].in{filter:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}

/* ============================================================ HERO */
.hero{min-height:92vh;display:flex;align-items:center;padding-top:60px}
.hero .wrap{max-width:1360px;padding-inline:clamp(18px,4vw,22px)}   /* match the nav pill width + edges */
.hero__grid{display:flex;align-items:center;gap:clamp(24px,4vw,72px);width:100%}
.hero__text{flex:1 1 auto;min-width:0;max-width:880px}
.hero__text h1{max-width:none}
.hero__bot{flex:0 0 auto;width:clamp(240px,30vw,400px);height:auto;pointer-events:none;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.55));animation:hover 5s ease-in-out infinite}
/* slow, cinematic fade-in for the hero bot (overrides the shared 0.7s reveal so it eases in rather than pops) */
.hero__bot[data-reveal]{transition:opacity 2.5s cubic-bezier(.2,.7,.2,1)}
@media(max-width:820px){
  .hero{min-height:auto;padding-block:clamp(48px,12vw,84px)}
  .hero__grid{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:30px}
  .hero__bot{align-self:center;margin-inline:auto;width:clamp(190px,52vw,300px)}}
@media(prefers-reduced-motion:reduce){.hero__bot{animation:none}}
.hero__kicker{font-family:var(--mono);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-soft)}
.hero h1{font-size:clamp(2.3rem,6.5vw,4.7rem);line-height:1;letter-spacing:-.04em;
  font-weight:800;margin:.18em 0 .3em;text-wrap:balance}
.hero h1 .frac{color:var(--orange);position:relative}
.hero p{max-width:54ch;color:#e6e0d6;font-size:clamp(1.05rem,1.7vw,1.28rem)}
.hero__scroll{margin-top:42px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--muted);display:flex;align-items:center;gap:10px}
.hero__scroll .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.4)}}

/* ============================================================ slide-in */
.slide-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);
  align-items:center;margin-bottom:clamp(40px,8vh,96px)}
.slide-row:last-child{margin-bottom:0}
.slide-row:nth-child(even) .slide-row__text{order:2}
.slide-row__visual{aspect-ratio:4/3;border-radius:14px;border:4px solid rgba(255,253,249,.95);
  background:
    repeating-linear-gradient(135deg,rgba(255,77,0,.07) 0 2px,transparent 2px 13px),
    linear-gradient(150deg,#22171a,#0f0b0c);
  display:grid;place-items:center;position:relative;overflow:hidden}
.slide-row__visual b{font-family:var(--mono);color:var(--orange-soft);font-size:42px;font-weight:600;opacity:.5}
.slide-row__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-row__visual::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 70% 20%,rgba(255,77,0,.18),transparent 70%)}
.slide-row h3{font-size:clamp(1.4rem,3vw,2rem);margin:.2em 0 .35em;letter-spacing:-.02em}
.slide-row p{color:var(--muted);margin:0}
.snum{font-family:var(--mono);color:var(--orange);font-size:13px;letter-spacing:.1em}
@media (max-width:760px){
  .slide-row{grid-template-columns:1fr;gap:20px}
  .slide-row:nth-child(even) .slide-row__text{order:0}
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(40px)}
}

/* ============================================================ drop-grid */
.drop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chip{padding:26px 22px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(2px)}
.chip .k{font-family:var(--mono);font-size:12px;color:var(--orange-soft);letter-spacing:.05em}
.chip .v{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.03em;margin-top:6px}
.chip .s{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.drop-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ swipe-rail */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail__card{scroll-snap-align:center;flex:0 0 min(80%,420px);border-radius:16px;
  border:1px solid var(--line);overflow:hidden;background:var(--ink-2)}
.rail__card .ph{aspect-ratio:16/10;
  background:linear-gradient(150deg,#2a1a1d,#0e0a0b);position:relative;display:grid;place-items:center}
.rail__card .ph b{font-family:var(--mono);font-size:clamp(2rem,5vw,3.4rem);color:rgba(255,122,61,.35);font-weight:600}
.rail__card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rail__card .ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 70% at 30% 10%,rgba(255,77,0,.22),transparent 65%)}
.rail__card .meta{padding:20px 22px}
.rail__card .meta h4{margin:0 0 6px;font-size:1.25rem;letter-spacing:-.02em}
.rail__card .meta p{margin:0;color:var(--muted);font-size:.92rem}
.rail__hint{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:6px}

/* ============================================================ pinned-pan */
.pan-track{height:520vh;position:relative}
.pan-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pan-stage__cap{position:absolute;top:clamp(20px,5vh,48px);left:0;right:0}
.pan-row{display:flex;gap:clamp(20px,4vw,48px);padding:0 12vw;will-change:transform}
.pan-panel{flex:0 0 clamp(280px,40vw,460px);min-height:clamp(280px,52vh,440px);
  border-radius:18px;border:1px solid var(--line);background:var(--panel-2);
  padding:34px 32px;display:flex;flex-direction:column;justify-content:space-between}
.pan-panel .pstep{font-family:var(--mono);font-size:64px;font-weight:600;color:var(--orange);
  line-height:1;opacity:.85}
.pan-panel h3{font-size:clamp(1.4rem,2.6vw,2rem);margin:18px 0 10px;letter-spacing:-.02em}
.pan-panel p{color:var(--muted);margin:0}
.pan-progress{position:absolute;left:12vw;right:12vw;bottom:clamp(24px,6vh,56px);height:3px;
  background:rgba(255,253,249,.1);border-radius:2px}
.pan-progress i{display:block;height:100%;width:0;background:var(--orange);border-radius:2px;
  box-shadow:0 0 10px rgba(255,77,0,.6)}
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .pan-track{height:auto}
  .pan-stage{position:static;height:auto;overflow:visible;padding:0}
  .pan-stage__cap{position:static;margin-bottom:clamp(20px,4vh,36px)}
  .pan-row{flex-direction:column;gap:clamp(16px,4vw,26px);padding:0 clamp(20px,5vw,40px);transform:none!important}
  .pan-panel{flex:0 0 auto}
  .pan-progress{display:none}
}

/* ============================================================ sticky-stack */
.stack{position:relative}
.stack__card{position:sticky;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-3));
  box-shadow:0 -16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,253,249,.06);
  padding:clamp(28px,4vw,44px);margin-bottom:24px}
.stack__card:nth-child(1){top:96px}
.stack__card:nth-child(2){top:116px}
.stack__card:nth-child(3){top:136px}
.stack__card:nth-child(4){top:156px}
.stack__card .tier{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
.stack__card .tier h3{font-size:clamp(1.4rem,3vw,2.1rem);margin:0;letter-spacing:-.02em}
.stack__card .price{font-family:var(--mono);font-size:clamp(1.3rem,2.5vw,1.8rem);color:var(--orange)}
.stack__card .price span{color:var(--muted);font-size:.7em}
.stack__card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 26px}
.stack__card li{color:var(--muted);padding-left:22px;position:relative}
.stack__card li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.stack__spacer{height:10vh}

/* ============================================================ bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
.bento .tile{border-radius:16px;border:1px solid var(--line);background:var(--panel);
  padding:26px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.bento .tile .ico{font-family:var(--mono);font-size:26px;color:var(--orange-soft)}
.bento .tile h4{margin:14px 0 6px;font-size:1.2rem;letter-spacing:-.01em}
.bento .tile p{margin:0;color:var(--muted);font-size:.9rem}
.bento .feature{grid-column:span 2;grid-row:span 2;
  background:linear-gradient(155deg,rgba(255,77,0,.16),rgba(255,77,0,0) 60%),var(--panel-2)}
.bento .feature h4{font-size:clamp(1.5rem,3vw,2.2rem)}
.bento .feature p{font-size:1rem}
.bento .wide{grid-column:span 2}
.bento .tile::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 80% at 90% 10%,rgba(255,77,0,.1),transparent 60%);pointer-events:none}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}
  .bento .feature{grid-column:span 2;grid-row:span 1}.bento .wide{grid-column:span 2}}
@media (max-width:520px){.bento{grid-template-columns:1fr}
  .bento .feature,.bento .wide{grid-column:span 1}}

/* ============================================================ marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:scroll-x 56s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--mono);font-size:clamp(1.1rem,2.4vw,1.7rem);
  color:var(--cream);padding:0 28px;display:inline-flex;align-items:center;gap:28px;white-space:nowrap}
.marquee__track span::after{content:"●";color:var(--orange);font-size:.5em}
@keyframes scroll-x{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;gap:8px}}

/* ============================================================ counter */
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,4vw,40px)}
.counter-grid .stat{text-align:left}
.counter-grid .num{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.counter-grid .num em{color:var(--orange);font-style:normal}
.counter-grid .lbl{color:var(--muted);font-family:var(--mono);font-size:.82rem;
  letter-spacing:.04em;margin-top:10px}
@media (max-width:760px){.counter-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ tabs / accordion */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.tabs__btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs__btns button{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--muted);
  background:transparent;border:1px solid var(--line);padding:9px 14px;border-radius:8px;cursor:pointer;
  transition:all .2s ease}
.tabs__btns button:hover{color:var(--cream);border-color:var(--orange-soft)}
.tabs__btns button[aria-selected="true"]{color:var(--ink);background:var(--orange);border-color:var(--orange);font-weight:600}
.tabs__panel{display:none;animation:fade .35s ease;padding:clamp(24px,3.4vw,38px);
  border:1px solid var(--line);border-radius:16px;background:var(--panel-2);
  backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%)}
.tabs__panel.active{display:block}
.tabs__panel h4{margin:0 0 12px;font-size:clamp(1.2rem,2.2vw,1.55rem);letter-spacing:-.01em;color:var(--cream)}
.tabs__panel p{margin:0;color:var(--muted);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.75}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:12px;
  background:var(--panel);overflow:hidden}
details[open]{background:var(--panel-2)}
summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary .pm{font-family:var(--mono);color:var(--orange);font-size:1.3rem;transition:transform .25s ease}
details[open] summary .pm{transform:rotate(45deg)}
details .body{padding:0 20px 20px;color:var(--muted)}
@media (max-width:760px){.swap{grid-template-columns:1fr}}
/* desktop-only column reverse (mirror an editorial split without breaking mobile order) */
@media(min-width:761px){.swap--rev>*:first-child{order:2}}
/* ---------- Nano Suite: inline code, check-points, flat-file "window" visual ---------- */
code{font-family:var(--mono);font-size:.88em;background:rgba(255,77,0,.10);color:var(--orange-soft);padding:.08em .42em;border-radius:5px}
.nano-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.nano-points li{position:relative;padding-left:24px;color:var(--cream);font-size:.97rem;line-height:1.5}
.nano-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--orange);font-weight:700}
.nano-code{align-self:start;background:#0e0c14;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--mono);box-shadow:0 18px 44px -24px rgba(0,0,0,.75)}
.nano-code__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,253,249,.03)}
.nano-code__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,253,249,.18)}
.nano-code__bar i:first-child{background:var(--orange)}
.nano-code__file{margin-left:8px;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.nano-code pre{margin:0;padding:clamp(18px,2.6vw,30px);font-size:.92rem;line-height:1.9;color:#cfc9c0;overflow-x:auto;white-space:pre;min-height:330px;box-sizing:border-box}
.nano-code .k{color:var(--orange-soft)}
.nano-code .s{color:#8fd0a0}
.nano-code .c{color:#6b6760}

/* ============================================================ text-colour-fill */
.fill-prose{font-size:clamp(1.5rem,4vw,2.7rem);line-height:1.32;font-weight:500;
  letter-spacing:-.02em;max-width:20ch;margin:0 auto;text-align:center}
.fill-prose .w{color:#4a463f;transition:color .5s ease;display:inline-block}
.fill-prose .w.lit{color:var(--cream)}
.fill-prose .w.accent.lit{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.fill-prose .w{color:var(--cream)}.fill-prose .w.accent{color:var(--orange)}}
/* body-prose variant of the fill: dims, then lights to cream as you read down it */
.fill-text .w{color:rgba(244,236,221,.26);transition:color .55s ease}
.fill-text .w.lit{color:var(--cream)}
@media (prefers-reduced-motion:reduce){.fill-text .w,.fill-text .w.lit{color:var(--muted)}}

/* ============================================================ embers (demo strip) */
.ember-demo{position:relative;height:340px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,#1a0f0c,#070505);
  display:grid;place-items:center}
.ember-demo .label{font-family:var(--mono);color:var(--muted);font-size:13px;z-index:2;text-align:center}
.ember-field{position:absolute;inset:0;pointer-events:none;z-index:1}
.ember{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:var(--spark,var(--orange));box-shadow:0 0 8px 1px var(--spark,var(--orange));
  animation:rise var(--dur,9s) linear infinite;animation-delay:var(--del,0s);opacity:0}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:.9}
  50%{transform:translateY(-160px) translateX(var(--dx,14px)) scale(.9)}
  90%{opacity:.55}
  100%{transform:translateY(-320px) translateX(calc(var(--dx,14px)*-1)) scale(.4);opacity:0}
}
/* ambient hero embers */
.hero-embers{position:absolute;inset:0;z-index:var(--z-embers);pointer-events:none;overflow:hidden}
@media (prefers-reduced-motion:reduce){.ember,.hero-embers .ember{animation:none;opacity:.35}}

/* ============================================================ footer */
footer{position:relative;z-index:var(--z-content);border-top:1px solid var(--line);margin-top:60px;
  padding:clamp(48px,7vh,88px) 0 70px;background:rgba(8,7,11,.82);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.footer-cta{text-align:center;max-width:640px;margin:0 auto;padding-bottom:clamp(40px,6vh,68px);border-bottom:1px solid var(--line)}
.footer-cta p{color:var(--muted);margin:0 auto 26px;max-width:52ch}
.footer-cta__btn{display:inline-block;padding:14px 28px;border-radius:11px;background:var(--orange);
  color:#1a0c04;font-weight:600;transition:filter .2s,transform .2s}
.footer-cta__btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);text-align:left;margin-top:clamp(40px,6vh,68px)}
.footer-brand{font-weight:700;font-size:18px;margin-bottom:12px}
.footer-brand span{color:var(--orange)}
.footer-tagline{color:var(--muted);font-size:14px;max-width:34ch;line-height:1.6}
.footer-social{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}
.footer-social a,.footer-col a{color:var(--muted);font-size:14px}
.footer-social a:hover,.footer-col a:hover{color:var(--orange)}
.footer-col h5{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.footer-bottom{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:12px;text-align:center}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================ NAV (added) + wider footer */
.charge__bolt{display:none}   /* hidden — the nav now occupies the top-right */
.site-nav{position:sticky;top:clamp(10px,2vh,20px);z-index:55;padding-inline:clamp(14px,4vw,32px)}
.site-nav .nav-inner{max-width:1360px;margin-inline:auto;
  display:flex;align-items:center;gap:18px;height:70px;padding:0 14px 0 26px;position:relative;
  border-radius:999px;border:1px solid var(--line);
  background:rgba(12,11,16,.66);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.75)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:18px;color:var(--cream)}
.brand span{color:var(--orange)}
.brand-bot{height:30px;width:auto;flex:0 0 auto;border-radius:7px;object-fit:contain}
.menu{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-top{padding:9px 13px;border-radius:9px;font-size:15px;color:var(--muted);font-weight:500;transition:color .2s}
.nav-top:hover{color:var(--cream)}
.nav-cta{margin-left:10px;padding:10px 18px;border-radius:10px;background:var(--orange);color:#1a0c04;font-weight:600;font-size:14px}
.nav-cta:hover{filter:brightness(1.08)}
.nav-toggle{display:none}
@media(max-width:860px){
  .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
  .nav-toggle span{width:22px;height:2px;background:var(--cream);border-radius:2px}
  .menu{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:10px;border-radius:20px;border:1px solid var(--line);background:rgba(12,11,16,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 44px -24px rgba(0,0,0,.75)}
  .site-nav.nav-open .menu{display:flex}
  .nav-top{padding:13px 14px;font-size:16px}
  .nav-cta{margin:8px 4px 4px;text-align:center}
}
/* wider footer content */
footer .wrap{max-width:1360px}
/* no underlines on links */
a{text-decoration:none}

/* ============================================================ WORLDS (per-page atmosphere)
   Default (no/world-junkyard) uses the .scene .sky + ridge fills defined above.
   Each world overrides the gradient, sun, haze, ridge fills and --spark (ember colour). */

/* WEB DESIGN — cool blueprint night: deep indigo, electric-blue glow, blue sparks */
body.world-workbench{--spark:#6db6ff}
body.world-workbench .scene .sky{
  background:
    radial-gradient(105% 64% at 50% 116%, rgba(86,150,255,.22), rgba(86,150,255,0) 55%),
    linear-gradient(180deg,#080a14 0%,#0c1020 26%,#101830 52%,#14213f 78%,#0a0e1c 100%)}
body.world-workbench .scene .sun{background:radial-gradient(circle,rgba(150,195,255,.46),rgba(90,150,255,.26) 38%,rgba(70,120,235,0) 70%)}
body.world-workbench .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(90,150,255,.09),transparent 58%)}
body.world-workbench .ridge--far svg path{fill:#101a30}
body.world-workbench .ridge--mid svg path{fill:#0b1222}
body.world-workbench .ridge--near svg path{fill:#070b15}
/* ============================================================ 3-up cards (services / pricing tiers) */
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(32px,5vh,56px);align-items:stretch}
.cards-3 .card{display:flex;flex-direction:column;padding:clamp(24px,3vw,34px)}
.cards-3 .card .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:8px}
.cards-3 .card h3{color:var(--cream);font-size:1.3rem;margin-bottom:10px}
.cards-3 .card > p{color:var(--muted);margin-bottom:14px}
.cards-3 .card .price{font-family:var(--mono);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--orange);margin:2px 0 6px}
.cards-3 .card ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.cards-3 .card li{position:relative;padding-left:22px;color:var(--muted);font-size:.95rem}
.cards-3 .card li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.cards-3 .card .link{color:var(--orange-soft);font-weight:500;margin-top:auto}
.cards-3 .card .link:hover{color:var(--cream)}
.cards-3 .card--popular{border-color:rgba(255,90,31,.5)}
@media(max-width:760px){.cards-3{grid-template-columns:1fr}}
/* ============================================================ fixed-fee build cards (one-off — deliberately distinct from the monthly .cards-3) */
.build-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(34px,5vh,56px);align-items:stretch}
.build-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,36px);border-radius:18px;
  border:1px solid var(--line);background:var(--panel-2);
  backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%);
  transition:transform .2s,border-color .2s}
.build-card:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.45)}
.build-card__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft);display:block;margin-bottom:14px}
.build-card h3{font-size:clamp(1.25rem,2.2vw,1.5rem);color:var(--cream);margin:0;letter-spacing:-.01em}
.build-card__price{font-family:var(--mono);font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--orange);font-weight:600;letter-spacing:-.02em;margin:.18em 0 0;line-height:1}
.build-card__desc{color:var(--muted);font-size:.95rem;margin:.85em 0 0;min-height:2.7em}
.build-card ul{list-style:none;margin:clamp(18px,2.5vh,24px) 0 clamp(22px,3vh,28px);padding:0;display:flex;flex-direction:column;gap:11px}
.build-card li{position:relative;padding-left:26px;color:var(--cream);font-size:.95rem;line-height:1.5}
.build-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--orange);font-weight:700}
.build-card .card-btn{margin-top:auto}
/* ---------- hero action buttons (inner pages) ---------- */
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,4vh,40px)}
.btn-ghost{display:inline-flex;align-items:center;padding:13px 24px;border-radius:11px;font-weight:600;font-size:15px;color:var(--cream);background:rgba(255,253,249,.06);border:1px solid var(--line);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);transition:transform .2s,border-color .2s}
.btn-ghost:hover{border-color:var(--orange-soft);transform:translateY(-2px)}
/* price-card buttons (ghost by default, filled on the popular tier) */
.card-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;width:100%;
  padding:13px 22px;border-radius:11px;font-weight:600;font-size:15px;
  color:var(--cream);background:rgba(255,253,249,.06);border:1px solid var(--line);
  transition:transform .2s,border-color .2s,background .2s}
.card-btn:hover{border-color:var(--orange-soft);transform:translateY(-2px)}
.card--popular .card-btn{background:var(--orange);color:#1a0c04;border-color:var(--orange)}
.card--popular .card-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
/* slide-in rows that carry a feature list (web-design services) */
.slide-row__text .row-list{list-style:none;margin:16px 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 22px}
.slide-row__text .row-list li{position:relative;padding-left:20px;color:var(--muted);font-size:.93rem}
.slide-row__text .row-list li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.slide-row__text .link{color:var(--orange-soft);font-weight:500;display:inline-block;margin-top:2px}
.slide-row__text .link:hover{color:var(--cream)}
/* sticky-stack used as a step sequence (the .price slot becomes the step number) */
.stack__card .step{font-family:var(--mono);font-size:clamp(1.3rem,2.5vw,1.8rem);color:var(--orange)}
/* step-flow — a typographic process row (web design "how we work"); NOT used on home */
.flow{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.flow__step{position:relative;padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--line)}
.flow__step::after{content:"";position:absolute;top:-2px;left:0;width:40px;height:3px;background:var(--orange)}
.flow__num{display:block;font-family:var(--mono);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--orange);opacity:.9;line-height:1;margin-bottom:16px}
.flow__step h3{font-size:clamp(1.25rem,2.4vw,1.65rem);margin:0 0 .4em;letter-spacing:-.02em}
.flow__step p{margin:0;color:var(--muted)}
@media(max-width:720px){.flow{grid-template-columns:1fr;gap:30px}}
/* SOFTWARE — deep emerald "engine room", mint sparks (distinct from junkyard purple + web-design blue) */
body.world-engine{--spark:#3fe0a8}
body.world-engine .scene .sky{
  background:
    radial-gradient(105% 64% at 50% 116%, rgba(46,206,150,.18), rgba(46,206,150,0) 55%),
    linear-gradient(180deg,#07120f 0%,#0a1813 26%,#0c211a 52%,#0e2c21 78%,#06110c 100%)}
body.world-engine .scene .sun{background:radial-gradient(circle,rgba(120,235,190,.42),rgba(60,200,150,.24) 38%,rgba(40,180,130,0) 70%)}
body.world-engine .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(50,200,150,.08),transparent 58%)}
body.world-engine .ridge--far svg path{fill:#0c2018}
body.world-engine .ridge--mid svg path{fill:#08160f}
body.world-engine .ridge--near svg path{fill:#050d09}

/* product index — one row per piece of software, links out (software page) */
.prod-list{margin-top:clamp(36px,5vh,56px);border-top:1px solid var(--line)}
.prod{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:center;
  padding:clamp(26px,4vw,42px) 0;border-bottom:1px solid var(--line)}
.prod__num{font-family:var(--mono);font-size:clamp(1rem,1.5vw,1.2rem);color:var(--orange);opacity:.85;align-self:start;padding-top:.4em}
.prod__body{min-width:0}
.prod__tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft)}
.prod__name{font-size:clamp(1.45rem,3vw,2.1rem);margin:.16em 0 .3em;letter-spacing:-.02em;line-height:1.05}
.prod__desc{color:var(--muted);margin:0;max-width:62ch}
.prod__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:11px 20px;border-radius:11px;font-weight:600;font-size:14px;color:var(--cream);
  background:rgba(255,253,249,.06);border:1px solid var(--line);
  transition:transform .2s,border-color .2s,background .2s}
.prod__cta:hover{border-color:var(--orange-soft);transform:translateY(-2px)}
.prod__cta--soon{opacity:.45;pointer-events:none}
@media(max-width:760px){
  .prod{grid-template-columns:auto 1fr;gap:12px 16px}
  .prod__cta{grid-column:1 / -1;justify-self:start;margin-top:6px}
}
/* software catalogue: product cards + featured blocks */
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));gap:clamp(14px,2vw,20px);margin-top:clamp(26px,4vh,42px)}
.app-card{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);border-radius:16px;
  background:var(--panel-2);border:1px solid var(--line);
  backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
  transition:transform .2s,border-color .2s}
.app-card:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.4)}
.app-card h3{font-size:1.2rem;margin:0 0 8px;letter-spacing:-.01em}
.app-card p{color:var(--muted);margin:0 0 16px;font-size:.94rem;flex:1}
.app-card__link{color:var(--orange-soft);font-weight:600;font-size:.92rem;margin-top:auto}
.app-card__link:hover{color:var(--cream)}
.app-card__plat{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.app-card__plat a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange-soft);background:rgba(255,122,61,.1);border:1px solid rgba(255,122,61,.28);
  padding:5px 10px;border-radius:6px;transition:background .2s,color .2s,border-color .2s}
.app-card__plat a:hover{background:var(--orange);color:#1a0c04;border-color:var(--orange)}
/* featured block (Canvas Code Generator, Retro Media Vault) */
.feat-app{margin-top:clamp(26px,4vh,42px);padding:clamp(28px,4vw,48px);border-radius:20px;overflow:hidden;position:relative;
  background:var(--panel-2);border:1px solid rgba(255,122,61,.3)}
.feat-app::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 95% at 100% 0,rgba(255,77,0,.13),transparent 60%)}
.feat-app > *{position:relative}
.feat-app .badge{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.feat-app h3{font-size:clamp(1.5rem,3vw,2.1rem);margin:.3em 0 .35em;letter-spacing:-.02em}
.feat-app > p{color:#e6e0d6;max-width:72ch;margin:0 0 22px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 26px;margin:0 0 26px;padding:0;list-style:none}
.feat-grid li{position:relative;padding-left:22px;color:var(--muted);font-size:.95rem}
.feat-grid li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
/* flagship card: the lead product in a section, sits above the supporting grid */
.flagship{position:relative;overflow:hidden;margin-top:clamp(26px,4vh,44px);
  padding:clamp(30px,4.5vw,54px);border-radius:22px;
  background:linear-gradient(135deg,rgba(255,253,249,.09),rgba(255,253,249,.028));
  border:1px solid rgba(255,122,61,.32)}
.flagship::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 110% at 90% -10%,rgba(255,77,0,.17),transparent 62%)}
.flagship > *{position:relative}
.flagship .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.flagship h3{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.25em 0 .32em;letter-spacing:-.025em;line-height:1.02}
.flagship > p{color:#e6e0d6;max-width:58ch;margin:0 0 22px;font-size:clamp(1.02rem,1.4vw,1.16rem)}
.flagship__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.flagship__chips span{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);padding:6px 12px;border-radius:8px}
.flagship .app-card__plat{margin-top:4px}
.grid-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:clamp(28px,4vh,40px) 0 0}
/* extend sticky-stack to handle up to 6 cards (software web apps) */
.stack__card:nth-child(5){top:176px}
.stack__card:nth-child(6){top:196px}
.stack__card .price{font-family:var(--mono);color:var(--orange-soft)}
/* sticky-stack cards tinted to the engine (green) world so they don't read as black blocks */
body.world-engine .stack__card{background:linear-gradient(180deg,rgba(20,42,33,.97),rgba(9,21,16,.98))}
/* clearer green stack cards (the previous tint read as black-brown) */
body.world-engine .stack__card{
  background:linear-gradient(180deg,rgba(28,62,49,.96),rgba(14,34,26,.97));
  box-shadow:0 -16px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(120,235,190,.14);
  border-color:rgba(120,235,190,.16)}
/* ============================================================ PREMIUM PRODUCT INDEX (software) */
.idx{margin-top:clamp(34px,5vh,58px);border-top:1px solid var(--line)}
.idx__row{position:relative;display:grid;grid-template-columns:clamp(44px,5vw,84px) 1fr auto;align-items:center;
  gap:clamp(18px,3.5vw,48px);padding:clamp(26px,3.4vw,42px) clamp(6px,1.4vw,20px);
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .45s cubic-bezier(.2,.7,.2,1)}
.idx__row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-soft) 42%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
a.idx__row:hover{background:linear-gradient(90deg,rgba(120,235,190,.07),rgba(120,235,190,0) 62%)}
a.idx__row:hover::after{transform:scaleX(1)}
.idx__num{font-family:var(--mono);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1;
  color:rgba(255,253,249,.17);font-variant-numeric:tabular-nums;transition:color .45s,transform .45s}
a.idx__row:hover .idx__num{color:var(--orange);transform:translateY(-2px)}
.idx__body{min-width:0}
.idx__tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft);margin-bottom:.6em}
.idx__name{font-size:clamp(1.45rem,3vw,2.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0 0 .32em;color:var(--cream)}
.idx__desc{color:var(--muted);margin:0;max-width:60ch;font-size:clamp(.97rem,1.15vw,1.06rem);text-wrap:pretty}
.idx__go{justify-self:end;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.02em;color:var(--muted);white-space:nowrap;transition:color .45s}
.idx__go .arr{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
a.idx__row:hover .idx__go{color:var(--cream)}
a.idx__row:hover .idx__go .arr{transform:translateX(6px)}
.idx__plat{justify-self:end;display:flex;flex-wrap:wrap;gap:7px;max-width:230px;justify-content:flex-end}
.idx__plat a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-soft);
  background:rgba(255,122,61,.1);border:1px solid rgba(255,122,61,.28);padding:6px 11px;border-radius:7px;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.idx__plat a:hover{background:var(--orange);color:#160a03;border-color:var(--orange);transform:translateY(-2px)}
@media(max-width:680px){
  .idx__row{grid-template-columns:auto 1fr;gap:12px 16px;padding-block:clamp(24px,6vw,32px)}
  .idx__go,.idx__plat{grid-column:1/-1;justify-self:start;margin-top:10px;max-width:none}
  .idx__num{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.idx__row,.idx__num,.idx__go,.idx__go .arr,.idx__row::after{transition:none}}
/* idx name/desc must stack (spans default inline) */
.idx__name,.idx__desc{display:block}
/* HOSTING — deep teal "signal" world, cyan sparks (the connection stays up) */
body.world-signal{--spark:#3fd6e0}
body.world-signal .scene .sky{
  background:
    radial-gradient(105% 64% at 50% 116%, rgba(52,200,222,.17), rgba(52,200,222,0) 55%),
    linear-gradient(180deg,#06141a 0%,#08212b 26%,#0a2d39 52%,#0d3b48 78%,#05121a 100%)}
body.world-signal .scene .sun{background:radial-gradient(circle,rgba(140,228,238,.4),rgba(60,190,212,.24) 38%,rgba(40,168,190,0) 70%)}
body.world-signal .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(52,200,222,.08),transparent 58%)}
body.world-signal .ridge--far svg path{fill:#0a2832}
body.world-signal .ridge--mid svg path{fill:#071c24}
body.world-signal .ridge--near svg path{fill:#041117}

/* clean feature list (no cards) — restrained, hairline-topped items */
.feat-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(26px,3.5vw,46px) clamp(36px,5vw,72px);margin-top:clamp(34px,5vh,56px)}
.feat-list__item{padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.feat-list__item h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;letter-spacing:-.01em;margin:0 0 .5em;color:var(--cream)}
.feat-list__item p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.7;max-width:44ch}
/* optional add-ons: editorial priced menu (name + selling line + price per row) */
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:0 clamp(40px,5vw,80px);margin-top:clamp(28px,4vh,44px)}
.addon{padding:clamp(18px,2.4vw,26px) 0;border-top:1px solid var(--line)}
.addon__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px}
.addon__name{margin:0;font-size:clamp(1.12rem,1.9vw,1.35rem);font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.addon__price{font-family:var(--mono);font-size:clamp(1rem,1.5vw,1.18rem);font-weight:600;color:var(--orange);white-space:nowrap;letter-spacing:.01em}
.addon__price span{color:var(--muted);font-weight:400;font-size:.78em}
.addon p{margin:.55em 0 0;color:var(--muted);font-size:.95rem;line-height:1.65;max-width:46ch}
.addons__foot{margin-top:clamp(22px,3vh,34px);padding-top:clamp(16px,2vw,20px);border-top:1px solid var(--line);font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;line-height:1.7;color:var(--muted)}
.addons__foot b{color:var(--cream);font-weight:600}
/* editorial split (card-less): eyebrow + heading left, prose right, hairline rule above */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(26px,5vw,72px);
  padding-top:clamp(30px,4vh,52px);border-top:1px solid var(--line)}
.split__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:14px}
.split h3{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;color:var(--cream);text-wrap:balance}
.split__body p{color:var(--muted);margin:0;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.75;max-width:62ch}
.split__body p + p{margin-top:1.1em}
.split__body a:not(.footer-cta__btn):not(.btn-ghost){color:var(--orange-soft)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:14px}}
/* SEO — gold "beacon" world (a light in the dark = being found), gold sparks */
body.world-beacon{--spark:#ffcf7a}
body.world-beacon .scene .sky{
  background:
    radial-gradient(100% 60% at 50% 116%, rgba(255,196,96,.22), rgba(255,196,96,0) 56%),
    linear-gradient(180deg,#0b0b11 0%,#0e0e15 28%,#121119 54%,#171410 80%,#0a0a0d 100%)}
body.world-beacon .scene .sun{background:radial-gradient(circle,rgba(255,214,140,.46),rgba(255,180,90,.26) 38%,rgba(255,160,70,0) 70%)}
body.world-beacon .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(255,190,100,.08),transparent 58%)}
body.world-beacon .ridge--far svg path{fill:#1a160f}
body.world-beacon .ridge--mid svg path{fill:#12100b}
body.world-beacon .ridge--near svg path{fill:#0a0805}

/* NANO — deep ember / dark-orange world (the Nano Suite); software keeps the green engine world */
body.world-nano{--spark:#ff8a3d}
body.world-nano .scene .sky{
  background:
    radial-gradient(100% 62% at 50% 118%, rgba(255,90,20,.26), rgba(255,90,20,0) 56%),
    linear-gradient(180deg,#0c0907 0%,#140d08 26%,#241208 52%,#2e1509 78%,#0b0705 100%)}
body.world-nano .scene .sun{background:radial-gradient(circle,rgba(255,150,70,.5),rgba(255,95,25,.28) 38%,rgba(255,77,0,0) 70%)}
body.world-nano .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(255,90,20,.10),transparent 58%)}
body.world-nano .ridge--far svg path{fill:#1d1109}
body.world-nano .ridge--mid svg path{fill:#150c07}
body.world-nano .ridge--near svg path{fill:#0a0604}

/* card-less columns with lists (SEO rules of engagement) */
.cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(28px,4vw,56px);margin-top:clamp(34px,5vh,56px)}
.cols-3__col{padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.cols-3__col h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;letter-spacing:-.01em;margin:0 0 16px;color:var(--cream)}
.cols-3__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cols-3__col li{color:var(--muted);padding-left:20px;position:relative;font-size:.96rem;line-height:1.5}
.cols-3__col li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.cols-3__col li em{color:var(--orange-soft);font-style:normal}

/* card-less pricing tiers (SEO) */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(28px,4vw,52px);margin-top:clamp(34px,5vh,56px)}
.tiers__col{padding-top:clamp(18px,2.2vw,24px);border-top:2px solid var(--line)}
.tiers__col--pop{border-top-color:var(--orange)}
.tiers__pop{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:8px}
.tiers__name{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--cream)}
.tiers__price{font-family:var(--mono);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--orange);margin:.3em 0 .1em}
.tiers__price span{color:var(--muted);font-size:.55em}
.tiers__col > p{color:var(--muted);margin:0 0 16px;font-size:.96rem}
.tiers__col ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.tiers__col li{color:var(--muted);padding-left:20px;position:relative;font-size:.94rem}
.tiers__col li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.tiers__col .link{color:var(--orange-soft);font-weight:600;font-size:.95rem}
.tiers__col .link:hover{color:var(--cream)}

/* bare editorial index (non-link, no 3rd column) — SEO timeline */
.idx--bare .idx__row{grid-template-columns:clamp(44px,5vw,84px) 1fr;cursor:default}
/* ABOUT — violet "gateway" world */
body.world-gateway{--spark:#b794ff}
body.world-gateway .scene .sky{background:radial-gradient(105% 64% at 50% 116%, rgba(150,110,255,.20), rgba(150,110,255,0) 55%),linear-gradient(180deg,#0c0a16 0%,#120e22 26%,#191230 52%,#221842 78%,#0c0916 100%)}
body.world-gateway .scene .sun{background:radial-gradient(circle,rgba(190,150,255,.44),rgba(150,110,255,.26) 38%,rgba(120,80,230,0) 70%)}
body.world-gateway .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(150,110,255,.08),transparent 58%)}
body.world-gateway .ridge--far svg path{fill:#1a1430}
body.world-gateway .ridge--mid svg path{fill:#120d22}
body.world-gateway .ridge--near svg path{fill:#0a0716}

/* CONTACT — calm warm-charcoal "shack" world, brand-orange glow */
body.world-shack{--spark:#ff7a3d}
body.world-shack .scene .sky{background:radial-gradient(105% 60% at 50% 116%, rgba(255,90,30,.16), rgba(255,90,30,0) 55%),linear-gradient(180deg,#0c0c10 0%,#111015 28%,#16141a 54%,#1c1814 80%,#0b0a0c 100%)}
body.world-shack .scene .sun{background:radial-gradient(circle,rgba(255,160,90,.4),rgba(255,120,50,.24) 38%,rgba(255,90,30,0) 70%)}
body.world-shack .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(255,120,50,.07),transparent 58%)}
body.world-shack .ridge--far svg path{fill:#1a1510}
body.world-shack .ridge--mid svg path{fill:#12100c}
body.world-shack .ridge--near svg path{fill:#0a0806}

/* contact form (card-less; inputs sit on the world) */
.cform{max-width:700px;margin-top:clamp(30px,4vh,48px);display:grid;gap:clamp(18px,2.4vw,22px)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,22px)}
@media(max-width:560px){.cform__row{grid-template-columns:1fr}}
.cform__group label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.cform input,.cform select,.cform textarea{width:100%;background:rgba(255,253,249,.04);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--cream);font-family:var(--font);font-size:1rem;line-height:1.5;transition:border-color .2s,background .2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--orange-soft);background:rgba(255,253,249,.07)}
.cform textarea{min-height:170px;resize:vertical}
.cform select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b9b3aa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
/* dropdown options: match the dark nav panel (native popups can't take blur/radius, so solid dark + cream text) */
.cform select option{background:#0c0b10;color:var(--cream)}
.cform select option:disabled{color:var(--muted)}
.cform .submit-btn{justify-self:start;display:inline-flex;align-items:center;padding:14px 30px;border-radius:12px;font-weight:600;font-size:15px;color:#1a0c04;background:var(--orange);border:0;cursor:pointer;transition:filter .2s,transform .2s}
.cform .submit-btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.cform .submit-btn:disabled{opacity:.6;cursor:default;transform:none}
.cform .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.form-status{font-size:.9rem;color:var(--muted)}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:var(--z-meter);display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:rgba(18,17,16,.96);border:1px solid var(--line);backdrop-filter:blur(10px);color:var(--cream);font-size:.95rem;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.toast.show{opacity:1;transform:none}
.toast.hide{opacity:0;transform:translateY(10px)}
.toast-success{border-color:rgba(80,220,150,.45)}
.toast-error{border-color:rgba(255,90,60,.5)}
.toast-close{margin-left:auto;background:0;border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
/* LEGAL pages — understated steel-slate "ledger" world */
body.world-ledger{--spark:#8aa0b8}
body.world-ledger .scene .sky{background:radial-gradient(105% 60% at 50% 116%, rgba(130,160,200,.14), rgba(130,160,200,0) 55%),linear-gradient(180deg,#0b0d11 0%,#0f1218 28%,#13171e 54%,#181d26 80%,#0a0c10 100%)}
body.world-ledger .scene .sun{background:radial-gradient(circle,rgba(160,185,215,.32),rgba(120,150,190,.2) 38%,rgba(90,120,160,0) 70%)}
body.world-ledger .scene .haze{background:radial-gradient(140% 55% at 50% 100%,rgba(130,160,200,.06),transparent 58%)}
body.world-ledger .ridge--far svg path{fill:#141923}
body.world-ledger .ridge--mid svg path{fill:#0e1219}
body.world-ledger .ridge--near svg path{fill:#080a0f}

/* legal document prose (card-less; hairline rule before each section) */
.legal{max-width:70ch;margin-top:clamp(32px,4.5vh,52px)}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.02em;color:var(--cream);margin:clamp(40px,5.5vh,60px) 0 .55em;padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line);text-wrap:balance}
.legal > h2:first-child{margin-top:0;border-top:0;padding-top:0}
.legal h3{font-size:1.08rem;font-weight:600;color:var(--cream);margin:1.7em 0 .5em}
.legal p{color:var(--muted);line-height:1.8;margin:0 0 1em;text-wrap:pretty}
.legal ul{list-style:none;margin:.3em 0 1.3em;padding:0;display:flex;flex-direction:column;gap:11px}
.legal li{position:relative;padding-left:22px;color:var(--muted);line-height:1.7}
.legal li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.legal strong{color:#e6e0d6;font-weight:600}
.legal a{color:var(--orange-soft)}
.legal-head{padding-top:clamp(108px,16vh,168px)}
/* FAQ accordion (card-less, native details, hairline rows) */
.faq{max-width:760px;margin-top:clamp(30px,4vh,48px)}
.faq__cat{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft);margin:clamp(36px,5vh,54px) 0 4px;padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.faq__cat:first-of-type{margin-top:0;border-top:0;padding-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 42px 18px 0;position:relative;font-size:clamp(1.02rem,1.5vw,1.15rem);font-weight:500;color:var(--cream);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.5rem;font-weight:400;color:var(--orange);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--orange-soft)}
.faq__a{padding:0 42px 22px 0;color:var(--muted);line-height:1.75}
.faq__a a{color:var(--orange-soft)}
.faq__a strong{color:#e6e0d6}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* flatten the FAQ accordion (override the global card-style details rule) */
.faq details{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:0;background:transparent}
.faq details[open]{background:transparent}