/* Layout: a 2035 publishing console. Deep indigo void, aurora light in brand ember + lagoon, glass panels with gradient hairline borders and corner registration marks. Type: Unbounded (display), Instrument Sans (reading), Fraunces italic (the human voice), JetBrains Mono (telemetry). Deliberately single dark theme. */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  color-scheme:dark;
  --void:#07060D; --deep:#0D0B18; --deep-2:#120F22; --panel:rgba(255,255,255,.03); --panel-2:rgba(255,255,255,.06);
  --edge:rgba(255,255,255,.08); --edge-2:rgba(255,255,255,.15); --edge-3:rgba(255,255,255,.26);
  --text:#F2EFF8; --dim:#B9B3CA; --faint:#8D87A3;
  --ember:#FF6B4A; --lagoon:#3FC1B0; --lilac:#A99BFF; --brass:#E6C98B;
  --on-ember:#140A06;
  --display:'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --sans:'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --r-sm:10px; --r:18px; --r-lg:28px;
  --hair:linear-gradient(140deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 38%,rgba(255,255,255,.03) 62%,rgba(255,107,74,.35));
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--void);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
::selection{background:var(--ember);color:var(--on-ember)}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2rem,6.1vw,5.1rem);letter-spacing:-.045em;font-weight:400}
h2{font-size:clamp(1.65rem,3.6vw,3rem);letter-spacing:-.04em}
h3{font-size:1.12rem;letter-spacing:-.02em;line-height:1.25;font-weight:500}
.serif{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
p{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon);display:inline-flex;align-items:center;gap:10px}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.tag.ember{color:var(--ember)} .tag.lilac{color:var(--lilac)} .tag.brass{color:var(--brass)}
.lede{font-size:clamp(1.06rem,1.45vw,1.24rem);color:var(--dim);max-width:60ch;line-height:1.6}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.section{padding-block:clamp(72px,10vw,136px);position:relative}
/* gradient hairline between sections */
.section + .section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 32px));height:1px;background:linear-gradient(90deg,transparent,var(--edge-2) 20%,rgba(255,107,74,.45) 50%,var(--edge-2) 80%,transparent)}
.section + .section::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);border:1px solid rgba(255,107,74,.7);background:var(--void)}
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;max-width:840px}
.stack{display:flex;flex-direction:column;gap:18px}

/* Aurora backdrop */
#aurora{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1px);background-size:3px 3px;mix-blend-mode:overlay}
.grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--edge) 1px,transparent 1px),linear-gradient(90deg,var(--edge) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%);opacity:.5}
main,header,footer{position:relative;z-index:2}

/* ---------- Border system ---------- */
/* 1. hairline: gradient 1px border on any rounded box */
.hairline{position:relative;border:0!important}
.hairline::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--hair);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .3s ease}
/* 2. beam: a light that travels around the border */
.beam::after{background:conic-gradient(from var(--ang),rgba(255,255,255,.08) 0deg,rgba(255,255,255,.08) 250deg,var(--ember) 300deg,var(--brass) 330deg,rgba(255,255,255,.08) 360deg);animation:spin 6s linear infinite}
@keyframes spin{to{--ang:360deg}}
/* 3. frame: registration marks at the corners */
.frame{position:relative}
.frame::before{content:"";position:absolute;inset:-10px;pointer-events:none;--c:rgba(255,107,74,.75);
  background:
   linear-gradient(var(--c),var(--c)) top left/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) top right/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) bottom left/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) bottom right/16px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px 16px no-repeat}
.frame-label{position:absolute;top:-24px;left:24px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .95rem/1 var(--sans);letter-spacing:.005em;padding:16px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.btn-primary{background:var(--ember);color:var(--on-ember);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 40px -10px rgba(255,107,74,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 6px rgba(255,107,74,.15),0 14px 50px -10px rgba(255,107,74,.9)}
.btn-glass{background:var(--panel-2);border-color:var(--edge-2);color:var(--text);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn-glass:hover{background:rgba(255,255,255,.1);border-color:var(--edge-3)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label:focus-within{outline:2px solid var(--lagoon);outline-offset:3px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding-top:14px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(13,11,24,.66);backdrop-filter:blur(20px) saturate(140%);box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:500;letter-spacing:-.04em;font-size:1.05rem}
.brand small{font-family:var(--mono);font-size:.58rem;color:var(--faint);letter-spacing:.14em;font-weight:400;border:1px solid var(--edge-2);padding:3px 6px;border-radius:6px}
.links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.links a{display:block;padding:9px 12px;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:500;color:var(--dim)}
.links a:hover,.links a[aria-current="page"]{color:var(--text);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--edge)}
.cmd-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--edge-2);color:var(--dim);border-radius:999px;padding:10px 14px;font:500 .86rem var(--sans);cursor:pointer}
.cmd-btn:hover{color:var(--text);border-color:var(--edge-3)}
.cmd-btn kbd{font-family:var(--mono);font-size:.68rem;border:1px solid var(--edge-2);border-radius:5px;padding:2px 5px}
.bar .btn{padding:12px 18px}
@media (max-width:1180px){.links{display:none}}
.cmd-btn{white-space:nowrap}
@media (max-width:620px){.bar .btn-primary{display:none}.brand small{display:none}}
@media (max-width:380px){.cmd-btn{font-size:0;gap:0}.cmd-btn kbd{font-size:.68rem}}

/* Hero */
.hero{padding-block:clamp(56px,9vw,112px) clamp(48px,6vw,80px);position:relative}
.hero .wrap{display:flex;flex-direction:column;gap:30px;position:relative}
.hero h1 .serif{color:var(--brass)}
.rot{display:inline-block;color:var(--ember);font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em}
.rot span{display:inline-block;animation:rise .55s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(.35em);opacity:.2;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
.status{display:flex;flex-wrap:wrap;gap:0;font-family:var(--mono);font-size:.76rem;color:var(--faint);border-block:1px solid var(--edge);width:fit-content;max-width:100%}
.status span{padding:12px 18px;border-left:1px solid var(--edge)}
.status span:first-child{border-left:0;padding-left:0}
.status b{color:var(--text);font-weight:500}
.status i{font-style:normal;color:var(--lagoon)}
@media (max-width:700px){.status span{border-left:0;padding:8px 14px 8px 0}}

/* Console */
.console{border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));backdrop-filter:blur(24px);box-shadow:0 60px 120px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.console-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--edge);font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--edge-2)}
.dots i:first-child{background:var(--ember)}
.console-body{display:grid;grid-template-columns:1.1fr 1fr 1fr}
.console-body > div{padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0;border-left:1px solid var(--edge)}
.console-body > div:first-child{border-left:0}
@media (max-width:920px){.console-body{grid-template-columns:1fr}.console-body > div{border-left:0;border-top:1px solid var(--edge)}.console-body > div:first-child{border-top:0}}
.cl{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.chapters{display:grid;gap:9px}
.ch{display:grid;grid-template-columns:28px 1fr 70px;gap:10px;align-items:center;font-size:.86rem}
.ch .n{font-family:var(--mono);color:var(--faint);font-size:.74rem}
.ch .t{height:6px;border-radius:9px;background:var(--panel-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--edge)}
.ch .t span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--lilac),var(--lagoon))}
.ch .s{font-family:var(--mono);font-size:.68rem;text-align:right;color:var(--dim)}
.ch.live .s{color:var(--ember)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{border:1px solid var(--edge);border-radius:var(--r-sm);padding:12px;background:rgba(255,255,255,.015)}
.kpi b{display:block;font-family:var(--display);font-size:1.25rem;font-weight:400;letter-spacing:-.04em}
.kpi span{font-family:var(--mono);font-size:.66rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.kpi em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--lagoon)}
.feed{display:grid;gap:10px;font-size:.86rem}
.feed div{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;padding-bottom:10px;border-bottom:1px dashed var(--edge)}
.feed div:last-child{border-bottom:0}
.feed time{font-family:var(--mono);font-size:.7rem;color:var(--faint);padding-top:2px}
.feed b{font-weight:600}
.sample{font-family:var(--mono);font-size:.66rem;color:var(--faint);border:1px solid var(--edge-2);padding:3px 7px;border-radius:6px}

/* Marquee */
.marquee{border-block:1px solid var(--edge);overflow:hidden;padding-block:18px;background:rgba(7,6,13,.5);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:slide 44s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.6rem;color:var(--dim);white-space:nowrap}
.marquee span::after{content:"✦";font-style:normal;color:var(--ember);margin-left:48px;font-size:.9rem;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* Glass card */
.glass{position:relative;border-radius:var(--r);background:var(--panel);backdrop-filter:blur(16px);padding:28px;display:flex;flex-direction:column;gap:12px;overflow:hidden;min-width:0;transition:transform .25s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.glass::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(255,107,74,.13),transparent 45%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.glass:hover::before{opacity:1}
a.glass{text-decoration:none;color:inherit}
a.glass:hover{transform:translateY(-3px)}
a.glass:hover::after{background:linear-gradient(140deg,rgba(255,107,74,.7),rgba(255,255,255,.08) 45%,rgba(169,155,255,.5))}
.glass .go{margin-top:auto;font-family:var(--mono);font-size:.76rem;color:var(--ember);letter-spacing:.08em}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.idx{font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.06em}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.stat{padding:30px 26px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--edge);min-width:0}
.stat:first-child{border-left:0}
.stat b{font-family:var(--display);font-weight:300;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat p{color:var(--dim);font-size:.93rem}
.stat sup{font-family:var(--mono);font-size:.62rem;color:var(--ember)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--edge)}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid var(--edge)}.stat:first-child{border-top:0}}
.sources{font-family:var(--mono);font-size:.7rem;color:var(--faint);margin-top:16px;line-height:1.7}
.sources a{color:var(--faint)}

/* Stack selector */
.stackui{display:grid;grid-template-columns:330px 1fr;gap:18px}
@media (max-width:900px){.stackui{grid-template-columns:1fr}}
.layers{display:flex;flex-direction:column;gap:8px}
.layer{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;text-align:left;padding:18px;border-radius:14px;border:1px solid var(--edge);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;transition:all .2s ease}
.layer:hover{border-color:var(--edge-2)}
.layer .li{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.layer b{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:-.03em}
.layer small{display:block;color:var(--faint);font-size:.82rem}
.layer .ar{color:var(--faint)}
.layer[aria-pressed="true"]{border-color:rgba(255,107,74,.55);background:linear-gradient(90deg,rgba(255,107,74,.12),rgba(255,255,255,.02));box-shadow:inset 3px 0 0 var(--ember)}
.layer[aria-pressed="true"] .ar,.layer[aria-pressed="true"] .li{color:var(--ember)}
.layer-view{border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(169,155,255,.08),rgba(63,193,176,.04) 60%,transparent);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:18px;min-height:440px}
.layer-view h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.045em;line-height:1.1;font-weight:400}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:.84rem;padding:8px 13px;border-radius:999px;border:1px solid var(--edge-2);color:var(--dim);background:rgba(255,255,255,.02)}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto}
@media (max-width:560px){.metric-row{grid-template-columns:1fr}}
.metric{border-top:1px solid var(--edge-2);padding-top:12px}
.metric b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;letter-spacing:-.03em}
.metric span{font-family:var(--mono);font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

/* Personas */
.persona{gap:14px}
.persona .who{display:flex;align-items:center;gap:14px}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1rem;flex:none;box-shadow:inset 0 0 0 1px var(--edge-2)}
.persona dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.9rem;padding-top:14px;border-top:1px dashed var(--edge-2)}
.persona dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.persona dd{margin:0;color:var(--dim)}

/* Gantt */
.gantt{border-radius:var(--r-lg);background:var(--panel);padding:28px;overflow-x:auto}
.gantt-inner{min-width:760px;display:grid;gap:12px}
.g-row{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center}
.g-row > span{font-family:var(--display);font-size:.9rem;letter-spacing:-.02em}
.g-track{position:relative;height:38px;border-radius:10px;background:repeating-linear-gradient(90deg,var(--edge) 0 1px,transparent 1px calc(100%/12))}
.g-bar{position:absolute;top:6px;bottom:6px;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:.68rem;color:var(--void);white-space:nowrap;overflow:hidden;font-weight:500}
.g-scale{display:grid;grid-template-columns:140px 1fr;gap:16px}
.g-scale div{display:grid;grid-template-columns:repeat(12,1fr);font-family:var(--mono);font-size:.66rem;color:var(--faint)}
.g-milestone{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--brass)}
.g-milestone::after{content:attr(data-l);position:absolute;top:-18px;left:6px;font-family:var(--mono);font-size:.64rem;color:var(--brass);white-space:nowrap}

/* SLA */
.sla{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-radius:var(--r);overflow:hidden;background:var(--panel)}
.sla div{padding:22px;border-left:1px solid var(--edge);display:flex;flex-direction:column;gap:6px}
.sla div:first-child{border-left:0}
.sla b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.04em;color:var(--lagoon)}
.sla span{font-size:.88rem;color:var(--dim)}
@media (max-width:1000px){.sla{grid-template-columns:1fr 1fr}.sla div{border-left:0;border-top:1px solid var(--edge)}.sla div:nth-child(even){border-left:1px solid var(--edge)}.sla div:nth-child(-n+2){border-top:0}}
@media (max-width:480px){.sla{grid-template-columns:1fr}.sla div,.sla div:nth-child(even){border-left:0;border-top:1px solid var(--edge)}.sla div:first-child{border-top:0}}

/* Comparison matrix */
.matrix-wrap{overflow-x:auto;border-radius:var(--r-lg);background:var(--panel);backdrop-filter:blur(16px)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:860px;font-size:.92rem}
th,td{padding:16px 18px;border-bottom:1px solid var(--edge);text-align:left;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.02)}
thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:500;border-bottom:1px solid var(--edge-2)}
thead th.v{color:var(--ember)}
th.v,td.v{background:rgba(255,107,74,.07);border-left:1px solid rgba(255,107,74,.35);border-right:1px solid rgba(255,107,74,.35)}
tbody tr:hover td.v{background:rgba(255,107,74,.11)}
.y{color:var(--lagoon)} .p{color:var(--brass)} .n{color:var(--faint)}
.y::before{content:"● "} .p::before{content:"◐ "} .n::before{content:"○ "}

/* Signal loop */
.loop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.loop{grid-template-columns:1fr}}
.loop-fig{position:relative;max-width:520px;width:100%;margin-inline:auto}
.loop-fig svg{width:100%;height:auto;display:block}
.loop-fig .lbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-align:center}
.loop-steps{display:grid;gap:0}
.loop-steps div{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--edge)}
.loop-steps div:first-child{border-top:1px solid var(--edge)}
.loop-steps .i{font-family:var(--mono);color:var(--ember);font-size:.78rem;padding-top:3px}

/* OS demo */
.os{border-radius:var(--r-lg);background:rgba(13,11,24,.8);backdrop-filter:blur(24px);overflow:hidden}
.os-nav{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.os-nav button{font:500 .88rem var(--sans);padding:10px 16px;border-radius:999px;border:0;background:transparent;color:var(--dim);cursor:pointer}
.os-nav button[aria-selected="true"]{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--edge-2)}
.os-body{padding:clamp(18px,3vw,32px);display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media (max-width:860px){.os-body{grid-template-columns:1fr}}
.tile{border:1px solid var(--edge);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;background:rgba(255,255,255,.02)}
.tile svg{width:100%;height:auto;display:block}
.approve{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid var(--edge);border-radius:10px;font-size:.88rem}
.approve button{font:600 .8rem var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--edge-2);background:transparent;color:var(--text);cursor:pointer}
.approve button.done{background:var(--lagoon);color:#06201C;border-color:var(--lagoon)}

/* Orbit */
.orbit-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.orbit-wrap{grid-template-columns:1fr}}
.orbit{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto}
.orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--edge-2)}
.orbit .ring.r2{inset:18%;border-style:solid;border-color:var(--edge)}
.orbit .core{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,rgba(255,107,74,.5),rgba(169,155,255,.15) 60%,transparent 70%);display:grid;place-items:center;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1rem,2.4vw,1.5rem)}
.orbit button{position:absolute;transform:translate(-50%,-50%);font:600 .78rem var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--edge-2);background:rgba(13,11,24,.88);color:var(--dim);cursor:pointer;white-space:nowrap;transition:all .2s ease}
.orbit button:hover,.orbit button[aria-pressed="true"]{color:var(--on-ember);background:var(--ember);border-color:var(--ember)}
@media (max-width:520px){.orbit button{font-size:.66rem;padding:6px 8px}}
.genre-card{min-height:300px}
.genre-card h2{font-size:clamp(1.4rem,2.6vw,2.1rem)}

/* Pricing */
.price{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:300;letter-spacing:-.05em;line-height:1}
.price small{font-family:var(--sans);font-size:.9rem;color:var(--faint);font-weight:400;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;color:var(--dim);font-size:.94rem}
.plan li::before{content:"→ ";color:var(--lagoon);font-family:var(--mono)}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan.hot{background:linear-gradient(180deg,rgba(255,107,74,.12),rgba(255,255,255,.02))}
.config{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.config{grid-template-columns:1fr}}
.toggles{display:grid;gap:10px}
.tg{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;border:1px solid var(--edge);background:var(--panel);cursor:pointer}
.tg:hover{border-color:var(--edge-2)}
.tg input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--edge-2);position:relative;cursor:pointer;flex:none;transition:background .2s ease}
.tg input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform .2s ease}
.tg input:checked{background:var(--ember)}
.tg input:checked::after{transform:translateX(18px)}
.tg span small{display:block;color:var(--faint);font-size:.82rem}
.total{position:sticky;top:110px;border-radius:var(--r-lg);padding:28px;background:linear-gradient(160deg,rgba(255,107,74,.14),rgba(169,155,255,.06));display:flex;flex-direction:column;gap:14px}
.total .big{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:300;letter-spacing:-.05em}
.total dl{display:grid;grid-template-columns:1fr auto;gap:8px 14px;margin:0;font-size:.9rem;padding-top:14px;border-top:1px dashed var(--edge-2)}
.total dt{color:var(--dim)} .total dd{margin:0;font-family:var(--mono);font-size:.8rem}
input[type=range]{width:100%;accent-color:var(--ember)}
label.f{display:flex;flex-direction:column;gap:8px;font-size:.92rem;color:var(--dim);font-weight:500}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;border:1px solid var(--edge-2);background:rgba(255,255,255,.03);color:var(--text);width:100%;transition:border-color .2s ease, box-shadow .2s ease}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{border-color:rgba(255,107,74,.6);box-shadow:0 0 0 4px rgba(255,107,74,.12);outline:none}
select option{background:var(--deep)}

/* Charter */
.charter{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.charter{grid-template-columns:1fr}}
.charter .glass b{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.8rem;letter-spacing:-.02em}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--edge-2)}
.faq details{border-bottom:1px solid var(--edge)}
.faq details[open]{border-bottom-color:rgba(255,107,74,.35)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-size:1.1rem;font-weight:500;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ember);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:22px;color:var(--dim);max-width:70ch}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.split > *{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* Inner pages */
.phero{padding-block:clamp(56px,8vw,104px) 40px;position:relative}
.phero .wrap{display:flex;flex-direction:column;gap:22px;position:relative}
.crumb{font-family:var(--mono);font-size:.74rem;color:var(--faint);letter-spacing:.06em}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--text)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:0}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--dim);padding:12px 0;border-bottom:1px solid var(--edge)}
.ticks li:first-child{border-top:1px solid var(--edge)}
.ticks li::before{content:"✦";color:var(--ember);font-size:.8rem;padding-top:3px}
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:14px;counter-reset:t}
@media (max-width:900px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}
.timeline li{counter-increment:t;border-radius:14px;padding:18px;background:var(--panel);display:flex;flex-direction:column;gap:6px;position:relative}
.timeline li::before{content:"0" counter(t);font-family:var(--mono);color:var(--ember);font-size:.76rem}
.timeline b{font-family:var(--display);font-weight:400;font-size:.98rem;letter-spacing:-.03em}
.timeline p{color:var(--dim);font-size:.9rem}
.prose{display:flex;flex-direction:column;gap:18px;max-width:68ch}
.prose p,.prose li{color:var(--dim);font-size:1.06rem}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-top:18px;padding-top:22px;border-top:1px solid var(--edge)}
.prose ul,.prose ol{padding-left:20px;display:grid;gap:8px;margin:0}
.prose a{color:var(--ember)}
.answer{border-left:2px solid var(--lagoon);padding:16px 20px;background:rgba(63,193,176,.07);color:var(--text)!important;border-radius:0 12px 12px 0}
.sticky{position:sticky;top:110px}
.note{font-family:var(--mono);font-size:.74rem;color:var(--faint);border:1px dashed var(--edge-2);border-radius:12px;padding:12px 16px}

/* Consult */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{font:500 .84rem var(--mono);padding:12px;border-radius:10px;border:1px solid var(--edge-2);background:transparent;color:var(--dim);cursor:pointer}
.slot[aria-pressed="true"]{border-color:var(--ember);color:var(--text);background:rgba(255,107,74,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 .88rem var(--sans);padding:10px 14px;border-radius:999px;border:1px solid var(--edge-2);background:transparent;color:var(--dim);cursor:pointer}
.chip:hover{border-color:var(--edge-3);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--void);border-color:var(--text)}
.ok{border-radius:12px;padding:16px;background:rgba(63,193,176,.12);border:1px solid rgba(63,193,176,.4)}

/* Palette */
.palette{position:fixed;inset:0;z-index:100;background:rgba(4,3,8,.6);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.palette-box{width:min(620px,100%);border-radius:18px;background:rgba(17,14,30,.97);box-shadow:0 40px 100px -20px rgba(0,0,0,.9);overflow:hidden}
.palette input{border:0;border-bottom:1px solid var(--edge);border-radius:0;padding:20px 22px;font-size:1.1rem;background:transparent}
.palette input:focus{box-shadow:none;border-color:var(--edge)}
.palette ul{list-style:none;margin:0;padding:8px;max-height:52vh;overflow:auto}
.palette li a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--dim)}
.palette li a small{font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.palette li a.on,.palette li a:hover{background:var(--panel-2);color:var(--text);box-shadow:inset 2px 0 0 var(--ember)}

/* Footer */
footer{border-top:1px solid var(--edge);padding-block:72px 40px;background:rgba(7,6,13,.78)}
.news{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;border-radius:var(--r-lg);padding:32px;background:var(--panel);margin-bottom:64px}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1 1 220px}
@media (max-width:800px){.news{grid-template-columns:1fr}}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
@media (max-width:960px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.94rem}
footer a{color:var(--dim);text-decoration:none} footer a:hover{color:var(--text)}
.giant{font-family:var(--display);font-size:clamp(3rem,14vw,12rem);font-weight:500;letter-spacing:-.08em;line-height:.85;margin-top:56px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap;overflow:hidden}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--edge);font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.page{animation:pagein .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pagein{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Live-site additions ---------- */
.skip{position:absolute;left:-999px;top:12px;z-index:200;background:var(--ember);color:var(--on-ember);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
.err{border-radius:12px;padding:16px;background:rgba(255,107,74,.12);border:1px solid rgba(255,107,74,.45)}
.legal{display:flex;gap:18px;flex-wrap:wrap}
.legal a{color:var(--faint);text-decoration:none}.legal a:hover{color:var(--text)}
.btn[disabled]{opacity:.6;cursor:progress}
.mnav-btn{display:none;align-items:center;background:transparent;border:1px solid var(--edge-2);color:var(--text);border-radius:999px;padding:10px 14px;font:600 .86rem var(--sans);cursor:pointer}
@media (max-width:1180px){.mnav-btn{display:inline-flex}}
@media (max-width:620px){.cmd-btn{display:none}}
.mnav{position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);top:calc(100% + 8px);border-radius:var(--r);background:rgba(13,11,24,.97);backdrop-filter:blur(20px);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.mnav a{padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--dim)}
.mnav a:hover,.mnav a[aria-current="page"]{background:var(--panel-2);color:var(--text)}
@media (min-width:1181px){.mnav{display:none!important}}
.top .wrap{position:relative}