/* ============================================================
   EpochCore · QCSC 7-Layer Cake — Marketing face (specimen sheet)
   Built on canonical tokens (colors_and_type.css).
   Oscillation Orange chrome · per-layer Quantum-Palette identity.
   ============================================================ */

:root{
  --ink:#0a0b0e; --panel:#15171e; --panel-deep:#0f1117; --panel-hi:#1e2230;
  --hair:rgba(244,244,240,0.08); --hair-bold:rgba(244,244,240,0.20);
  --paper:#f4f4f0; --paper-dim:rgba(244,244,240,0.78);
  --mute:rgba(244,244,240,0.50); --mute-dim:rgba(244,244,240,0.30);
  --accent:#ff6a1a; --accent-soft:rgba(255,106,26,0.12); --accent-line:rgba(255,106,26,0.35);
  --verify:#2dd881;
  --sans:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --pageW:1280px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:1px;}
.wrap{max-width:var(--pageW);margin:0 auto;padding:0 48px;}

/* ── marquee ─────────────────────────────────────────────── */
.marquee{
  border-bottom:1px solid var(--hair); background:var(--ink);
  overflow:hidden; position:relative;
}
.marquee::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,transparent 6%,transparent 94%,var(--ink) 100%);
}
.marquee-track{
  display:flex; white-space:nowrap; padding:11px 0;
  animation:cake-marquee 90s linear infinite; width:max-content;
}
.marquee-track span{
  font-family:var(--mono); font-size:11px; color:var(--accent); opacity:.72;
  letter-spacing:2.2px; padding:0 30px; display:inline-flex; align-items:center; gap:22px;
}
.marquee-track .dia{color:var(--mute);opacity:.4;}
@keyframes cake-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,14,0.85);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav-in{height:68px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:inline-flex;align-items:baseline;gap:12px;}
.brand b{font-weight:700;font-size:18px;letter-spacing:-0.4px;color:var(--paper);}
.brand .mono{font-size:11px;color:var(--mute);letter-spacing:1.2px;}
.nav-links{display:flex;gap:24px;}
.nav-links a{display:inline-flex;gap:7px;align-items:baseline;color:var(--mute);transition:color .15s;}
.nav-links a:hover{color:var(--paper);}
.nav-links .n{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1px;}
.nav-links .l{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.nav-cta{
  display:inline-flex;align-items:center;gap:9px;padding:10px 17px;
  background:var(--accent);color:#0a0b0e;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
}
.nav-cta:hover{filter:brightness(1.08);}

/* ── headlight atmosphere ────────────────────────────────── */
.headlight{position:relative;isolation:isolate;}
.headlight::before{
  content:"";position:absolute;top:-260px;left:-220px;width:900px;height:900px;
  background:radial-gradient(circle,rgba(255,106,26,0.13) 0,transparent 60%);
  pointer-events:none;z-index:0;
}
.headlight::after{
  content:"";position:absolute;bottom:-340px;right:-220px;width:1000px;height:1000px;
  background:radial-gradient(circle,rgba(35,200,233,0.09) 0,transparent 60%);
  pointer-events:none;z-index:0;
}
.headlight>*{position:relative;z-index:1;}

/* ── frame label ─────────────────────────────────────────── */
.frame-label{display:inline-flex;align-items:center;gap:14px;}
.frame-label .bar{width:28px;height:1px;background:var(--accent);}
.frame-label .bar.sm{width:14px;background:var(--hair-bold);}
.frame-label .mono{font-size:13px;letter-spacing:1px;color:var(--accent);font-weight:500;}
.frame-label .mono.kind{color:var(--paper);}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding:64px 0 56px;}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:1.2px;color:var(--accent);
  text-transform:uppercase;font-weight:500;margin-bottom:26px;}
.hero h1{
  margin:0; font-weight:700; font-size:clamp(52px,7vw,116px); line-height:0.92;
  letter-spacing:-3.4px; color:var(--paper); max-width:14ch;
}
.hero h1 .ac{color:var(--accent);}
.hero .lede{
  margin:30px 0 0; max-width:640px; font-size:19px; line-height:1.55;
  color:var(--paper-dim); letter-spacing:-0.1px; text-wrap:pretty;
}
.hero .lede .ac{color:var(--accent);}
.canon-strip{
  margin-top:34px; display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--hair);
  width:fit-content; max-width:100%;
}
.canon-strip .c{padding:14px 22px;border-right:1px solid var(--hair);}
.canon-strip .c:last-child{border-right:none;}
.canon-strip .k{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;}
.canon-strip .v{font-family:var(--mono);font-size:15px;color:var(--paper);margin-top:5px;letter-spacing:.3px;}
.canon-strip .v.ac{color:var(--accent);}

/* ── enforce-by-default guarantee band ───────────────────── */
.enforce{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,var(--accent-soft),transparent 70%);}
.enforce-in{padding:46px 0 50px;}
.enforce .tag{font-family:var(--mono);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:12px;}
.enforce .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verify);
  box-shadow:0 0 10px var(--verify);animation:ep-pulse 1.6s infinite;}
.enforce h2{margin:18px 0 0;font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.04;
  letter-spacing:-1.6px;color:var(--paper);max-width:20ch;}
.enforce h2 .ac{color:var(--accent);}
.enforce .pillars{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);}
.pillar{background:var(--panel);padding:24px 26px;}
.pillar .ph{display:flex;align-items:center;gap:10px;}
.pillar .ck{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--verify);}
.pillar .pn{font-family:var(--mono);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--paper);font-weight:600;}
.pillar .pd{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--paper-dim);letter-spacing:-0.05px;}
.pillar .pd b{color:var(--paper);font-weight:600;}
.pillar .pm{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--accent);text-transform:uppercase;}
.enforce .stacks{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;}
.enforce .stacks b{color:var(--paper);font-weight:500;}
.enforce .stacks .dot{color:var(--accent);opacity:.6;}
@media (max-width:880px){.enforce .pillars{grid-template-columns:1fr;}}

/* ── cake section ────────────────────────────────────────── */
.cake-sec{padding:40px 0 96px;}
.cake-head{margin-bottom:40px;}
.cake-head h2{
  margin:18px 0 0;font-weight:700;font-size:clamp(36px,4.6vw,62px);line-height:1;
  letter-spacing:-2px;color:var(--paper);max-width:18ch;
}
.cake-head h2 .ac{color:var(--accent);}
.cake-head p{margin:20px 0 0;max-width:680px;font-size:17px;line-height:1.55;color:var(--paper-dim);letter-spacing:-0.1px;}

/* the stack — flush layers, read top(01)→bottom(07) */
.cake{position:relative;border:1px solid var(--hair-bold);background:var(--panel-deep);}
.layer{
  --lc:var(--accent);
  position:relative; display:grid; grid-template-columns:96px 1fr 320px;
  align-items:center; gap:0;
  background:var(--panel); border-bottom:1px solid var(--ink);
  box-shadow:inset 0 -5px 0 -1px color-mix(in srgb,var(--lc) 28%,#000);
  opacity:0; transform:translateY(14px);
  transition:transform .22s ease, background .22s ease;
}
.layer.in{animation:cake-rise .55s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes cake-rise{to{opacity:1;transform:none;}}
.layer:last-child{border-bottom:none;}
.layer:hover{background:var(--panel-hi);transform:translateX(3px);}

/* left rail: number + color identity */
.layer-no{
  align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  padding:30px 0; border-right:1px solid var(--hair);
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 14%,transparent),transparent);
  position:relative;
}
.layer-no::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--lc);}
.layer-no .num{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--lc);letter-spacing:1px;line-height:1;}
.layer-no .of{font-family:var(--mono);font-size:9px;color:var(--mute);letter-spacing:1.5px;}

/* center: plain-English + technical */
.layer-body{padding:30px 36px;}
.layer-tag{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--lc);font-weight:600;display:inline-flex;align-items:center;gap:12px;}
.layer-tag .op{
  font-size:9px;letter-spacing:1px;padding:3px 8px;color:#04140f;background:var(--verify);
  font-weight:700;border-radius:0;
}
.layer-body h3{margin:13px 0 0;font-weight:700;font-size:30px;letter-spacing:-1px;color:var(--paper);line-height:1.02;}
.layer-body p{margin:9px 0 0;font-size:15px;line-height:1.5;color:var(--paper-dim);letter-spacing:-0.05px;max-width:52ch;}

/* right: spec + hash */
.layer-spec{align-self:stretch;padding:26px 30px;border-left:1px solid var(--hair);background:var(--panel-deep);}
.layer-spec .sk{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;}
.layer-spec .sv{font-family:var(--mono);font-size:13px;color:var(--paper);margin-top:5px;letter-spacing:.3px;line-height:1.5;word-break:break-all;}
.layer-spec .sv .ac{color:var(--lc);}
.layer-hash{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;color:var(--mute);word-break:break-all;line-height:1.5;}
.layer-hash .lead{color:var(--lc);}

/* memory foundation — the base the seven layers rest on */
.layer.base{
  border-top:2px solid color-mix(in srgb,var(--lc) 55%,var(--ink));
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 9%,var(--panel-deep)),var(--panel-deep));
  box-shadow:inset 0 -8px 0 -1px color-mix(in srgb,var(--lc) 36%,#000);
}
.layer.base .layer-no .num{font-size:24px;}
.layer.base .layer-no .of{color:var(--lc);opacity:.8;}
.layer-tag .base-pill{
  font-size:9px;letter-spacing:1px;padding:3px 8px;color:var(--ink);background:var(--lc);font-weight:700;
}

/* plate base under the cake */
.cake-plate{height:16px;margin:0 64px;background:linear-gradient(180deg,var(--panel-hi),transparent);
  border-bottom:1px solid var(--hair);border-left:1px solid var(--hair);border-right:1px solid var(--hair);}

/* memory layer expandable detail */
.mem-detail{margin-top:14px;border-top:1px solid var(--hair);padding-top:12px;}
.mem-detail summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--lc);
}
.mem-detail summary::-webkit-details-marker{display:none;}
.mem-detail summary .tw{transition:transform .2s ease;display:inline-block;}
.mem-detail[open] summary .tw{transform:rotate(90deg);}
.mem-flow{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);}
.mem-flow .col{background:var(--panel-deep);padding:18px 20px;}
.mem-flow .col h4{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--paper);font-weight:600;}
.mem-flow .col h4 .ac{color:var(--lc);}
.mem-step{display:grid;grid-template-columns:22px 1fr;gap:11px;padding:7px 0;align-items:baseline;}
.mem-step .i{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--lc);}
.mem-step .t{font-size:13.5px;line-height:1.45;color:var(--paper-dim);letter-spacing:-0.05px;}
.mem-step .t code{font-family:var(--mono);font-size:12px;color:var(--paper);background:rgba(244,244,240,0.06);padding:1px 5px;}
@media (max-width:680px){.mem-flow{grid-template-columns:1fr;}}

/* recipe / ingredients card */
.recipe{margin-top:28px;border:1px solid var(--hair-bold);background:var(--panel);}
.recipe-head{display:flex;justify-content:space-between;align-items:baseline;padding:20px 28px;border-bottom:1px solid var(--hair);}
.recipe-head .t{font-family:var(--mono);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-weight:600;}
.recipe-head .s{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;}
.ingredient{--ic:var(--accent);display:grid;grid-template-columns:300px 1fr 260px;gap:28px;align-items:center;
  padding:22px 28px;border-bottom:1px solid var(--hair);}
.ingredient:last-child{border-bottom:none;}
.ingredient .repo{display:flex;flex-direction:column;gap:6px;}
.ingredient .repo .nm{font-family:var(--mono);font-size:15px;color:var(--ic);letter-spacing:.3px;font-weight:600;}
.ingredient .repo .role{font-family:var(--sans);font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--mute);}
.ingredient .desc{font-size:14.5px;line-height:1.5;color:var(--paper-dim);letter-spacing:-0.05px;}
.ingredient .desc b{color:var(--paper);font-weight:600;}
.ingredient .powers{border-left:1px solid var(--hair);padding-left:22px;}
.ingredient .powers .pk{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);}
.ingredient .powers .pv{margin-top:7px;display:flex;flex-wrap:wrap;gap:7px;}
.ingredient .powers .chip{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--ic);
  border:1px solid color-mix(in srgb,var(--ic) 40%,transparent);padding:4px 9px;background:color-mix(in srgb,var(--ic) 8%,transparent);}
@media (max-width:1040px){.ingredient{grid-template-columns:1fr;gap:16px;}.ingredient .powers{border-left:none;padding-left:0;border-top:1px solid var(--hair);padding-top:16px;}}

/* ── closing frame ───────────────────────────────────────── */
.close-sec{padding:80px 0 40px;border-top:1px solid var(--hair);}
.close-sec h2{margin:18px 0 0;font-weight:700;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-2.4px;color:var(--paper);max-width:16ch;}
.close-sec h2 .ac{color:var(--accent);}
.close-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 22px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;}
.btn.primary{background:var(--accent);color:#0a0b0e;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{border:1px solid var(--accent-line);color:var(--paper);}
.btn.ghost:hover{border-color:var(--accent);}

/* hash line + verified stamp */
.hashline{margin-top:64px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hashline .pfx{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:1px;text-transform:uppercase;}
.hashline .bar{width:16px;height:1px;background:var(--hair);}
.hashline .hx{font-family:var(--mono);font-size:15px;letter-spacing:1px;color:var(--paper);font-weight:500;word-break:break-all;}
.hashline .hx .lead{color:var(--accent);}
.stamp{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;background:var(--verify);color:#03110a;margin-left:auto;
  animation:cake-stamp 1s cubic-bezier(.2,.7,.3,1) both;}
.stamp .mono{font-size:12px;font-weight:600;letter-spacing:.8px;}
@keyframes cake-stamp{0%{opacity:0;transform:scale(1.4) rotate(-10deg);}100%{opacity:1;transform:scale(1) rotate(-8deg);}}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--hair);padding:72px 0 36px;background:var(--ink);}
.foot-grid{margin-top:30px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;}
.foot h3{margin:0;font-weight:700;font-size:34px;letter-spacing:-1px;color:var(--paper);line-height:1;}
.foot p{margin:16px 0 0;max-width:420px;font-size:14px;line-height:1.55;color:var(--paper-dim);letter-spacing:-0.05px;}
.foot p .ac{color:var(--accent);}
.foot .seed{display:block;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--mute-dim);}
.foot-col .ct{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--accent);text-transform:uppercase;font-weight:500;}
.foot-col .links{display:flex;flex-direction:column;gap:11px;margin-top:16px;}
.foot-col .links a{color:var(--paper-dim);font-size:14px;letter-spacing:-0.05px;transition:color .15s;}
.foot-col .links a:hover{color:var(--accent);}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.foot-bottom .mono{font-size:11px;letter-spacing:1px;color:var(--mute-dim);}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1040px){
  .layer{grid-template-columns:80px 1fr;}
  .layer-spec{grid-column:1 / -1;border-left:none;border-top:1px solid var(--hair);}
}
@media (max-width:680px){
  .wrap{padding:0 22px;}
  .nav-links{display:none;}
  .canon-strip{flex-direction:column;width:100%;}
  .canon-strip .c{border-right:none;border-bottom:1px solid var(--hair);}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .layer-body{padding:24px;}
}
@media (prefers-reduced-motion:reduce){
  .layer{opacity:1;transform:none;animation:none;}
  .marquee-track{animation:none;}
}