.cinehero{color:#fff;min-height:min(760px, calc(100vh - 88px));display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:radial-gradient(1100px 620px at 50% 62%, rgba(172,132,57,.13), transparent 60%),
  linear-gradient(160deg,#07090F 0%,#0E1322 55%,#06080E 100%)}

/* gold light-streak: a slow horizontal sweep of light behind the headline */
.cinehero::after{
  content:"";position:absolute;left:-30%;right:-30%;top:38%;height:2px;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(199,162,91,0) 12%,rgba(232,206,148,.85) 50%,rgba(199,162,91,0) 88%,transparent);
  filter:blur(1.5px);
  box-shadow:0 0 120px 34px rgba(172,132,57,.20), 0 0 40px 8px rgba(232,206,148,.20);
  opacity:.55;
  animation:streak 14s ease-in-out infinite;
}
@keyframes streak{
  0%,100%{transform:translateX(-6%) scaleX(.92);opacity:.38}
  50%    {transform:translateX(6%)  scaleX(1.06);opacity:.72}
}
@media(prefers-reduced-motion:reduce){.cinehero::after{animation:none;opacity:.5}}
.cinehero::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:linear-gradient(rgba(199,162,91,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(199,162,91,.5) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(1000px 640px at 50% 55%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 640px at 50% 55%, #000 30%, transparent 78%)}
.ch-top{display:grid;grid-template-columns:1.08fr .92fr;gap:78px;align-items:center;
  max-width:1280px;margin:0 auto;padding:72px 48px 60px;width:100%;position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-b);margin-bottom:30px}
.kicker::before{content:"";width:44px;height:1px;background:var(--gold-b)}
.cinehero h1{font-weight:300;font-size:clamp(2.2rem,3.9vw,3.5rem);line-height:1.16;letter-spacing:-.012em}
.cinehero h1 em{
  font-style:normal;font-weight:600;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hi) 40%,var(--gold-b) 60%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:sheen 9s ease-in-out infinite;
  filter:drop-shadow(0 0 26px rgba(199,162,91,.30));
}
.sub{color:#B9BBC4;font-size:.95rem;line-height:1.85;font-weight:400;max-width:520px}
.capline{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-b);margin:26px 0 34px;line-height:1.9}
.btn-row{display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:.25s}
/* .btn-gold intentionally NOT redefined here — style.css owns the gold gradient
   and glow. Re-declaring it flat was overriding the theme on this page only. */
.btn-line{color:#fff;border:1px solid rgba(199,162,91,.5);transition:.25s}
.btn-line:hover{border-color:var(--gold-b);color:var(--gold-hi);box-shadow:0 0 28px rgba(199,162,91,.28)}
.trans{flex:1;max-width:1320px;margin:0 auto;padding:36px 24px 56px;width:100%;position:relative}
#tsvg{width:100%;height:auto;display:block}

/* Remap the diagram's hardcoded old-gold to the sharper palette.
   CSS beats SVG presentation attributes, so this recolours all 27
   inline occurrences without touching the markup. */
#tsvg [fill="#C7A25B"]{fill:var(--gold-b)}
#tsvg [stroke="#C7A25B"]{stroke:var(--gold-b)}
#tsvg [fill="#6B5A34"]{fill:#9A7B2E}
#tsvg [fill="#C98A3B"]{fill:#E0A445}
#tsvg [stop-color="#C7A25B"]{stop-color:var(--gold-b)}
#tsvg [stop-color="#AC8439"]{stop-color:var(--gold)}
#tsvg [stroke="#2A3042"]{stroke:#333A50}
/* svg type */
.chip-t{font-size:9.5px;font-weight:600;letter-spacing:.05em;fill:#B7B9C2}
.chip{cursor:pointer}
.chip.sel rect:first-of-type{stroke:#C7A25B;stroke-width:1.8}
.warn-t{font-size:8.5px;font-weight:600;letter-spacing:.08em;fill:#C98A3B}
.tangle{stroke:#333A4E;stroke-width:1;fill:none}
.cap{stroke:#C7A25B;stroke-width:1.8;fill:none;stroke-linecap:round}
.cap.sel{stroke-width:3.2}
.fan{stroke:#C7A25B;stroke-width:1.4;fill:none;opacity:.85}
.ring-t{font-size:9px;font-weight:700;letter-spacing:.22em;fill:var(--gold-b)}
.core-sub2{font-size:8px;font-weight:700;letter-spacing:.24em;fill:#DADBE1}
.stage-h{font-size:10.5px;font-weight:700;letter-spacing:.26em;fill:var(--gold-b)}
.stage-h.dim{fill:#9B9DA6}
.plat-title{font-size:8.6px;font-weight:700;letter-spacing:.16em;fill:var(--gold-b)}
.plat-foot{font-size:8px;font-weight:700;letter-spacing:.2em;fill:#8A8C96}
.x-l{font-size:10.5px;font-weight:500;fill:#DADBE1}
.x-s{font-size:8.6px;font-weight:700;letter-spacing:.14em;fill:var(--gold-b)}
.final-t{font-size:13px;font-weight:700;letter-spacing:.24em;fill:var(--gold-b)}
/* controls */
.ctrl{display:flex;align-items:center;gap:18px;justify-content:center;max-width:640px;margin:2px auto 0;opacity:0;transition:opacity .6s}
.ctrl.show{opacity:1}
.ctrl-l{font-size:.62rem;font-weight:700;letter-spacing:.18em;color:#9B9DA6}
.ctrl input[type=range]{flex:1;appearance:none;height:2px;background:linear-gradient(90deg,#3A3F52,var(--gold-b));outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold-b);border:2px solid #0B0E17;box-shadow:0 0 0 1.5px var(--gold-b);cursor:pointer}
.replay{background:none;border:1px solid rgba(199,162,91,.45);color:var(--gold-b);font-family:inherit;font-size:.6rem;font-weight:700;letter-spacing:.16em;padding:7px 12px;cursor:pointer}
.trace{text-align:center;font-size:.78rem;font-weight:400;color:#B9BBC4;max-width:820px;margin:22px auto 0;min-height:22px;line-height:1.75}
.trace strong{color:var(--gold-b);font-weight:600;letter-spacing:.06em}
/* proof strip — a deliberate band, not a whisper */
.proof{
  position:relative;z-index:5;margin-top:0;
  border-top:1px solid rgba(239,198,92,.42);
  border-bottom:1px solid rgba(239,198,92,.18);
  background:linear-gradient(180deg, rgba(212,160,46,.09), rgba(4,6,11,.92) 70%);
  box-shadow:inset 0 1px 0 rgba(255,231,166,.14);
}
.proof-inner{max-width:1280px;margin:0 auto;padding:44px 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:52px}
.proof-item{border-left:2px solid var(--gold);padding-left:22px;transition:border-color .3s}
.proof-item:hover{border-left-color:var(--gold-hi)}
.p-big{font-weight:400;font-size:1.42rem;letter-spacing:.01em;line-height:1.2;
  background:linear-gradient(120deg,var(--gold),var(--gold-hi) 55%,var(--gold-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(239,198,92,.34))}
.p-small{font-size:.78rem;color:#B9BBC4;font-weight:400;margin-top:10px;line-height:1.65}
/* mobile */
.mob-sys{display:none}
@media(max-width:980px){
  .ch-top{grid-template-columns:1fr;gap:10px;padding:36px 26px 0;align-items:start}
  .trans,.ctrl,.trace{display:none}
  .mob-sys{display:block;margin:36px auto 30px;max-width:430px;padding:0 26px}
  .mob-stage{background:#131829;border:1.5px solid #2E3447;padding:18px 20px;text-align:center;cursor:pointer;transition:border-color .5s,background .5s}
  .mob-stage .mt{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:#9B9DA6;transition:color .5s}
  .mob-stage .ms{font-size:.64rem;font-weight:600;letter-spacing:.08em;color:#8A8C96;margin-top:8px;text-transform:uppercase;line-height:1.7;transition:color .5s}
  .mob-stage .md{max-height:0;overflow:hidden;transition:max-height .35s,margin .35s;font-size:.78rem;font-weight:400;color:#B9BBC4;line-height:1.6}
  .mob-stage.open .md{max-height:170px;margin-top:12px}
  .mob-stage.frag{border-left:4px solid #C98A3B}
  .mob-stage.frag .tag{display:inline-block;background:#14171F;border:1px solid #2A3042;color:#B7B9C2;font-size:.6rem;font-weight:600;letter-spacing:.06em;padding:4px 8px;margin:3px 2px}
  .mob-stage.frag .tag:nth-child(odd){transform:rotate(-1.6deg)}
  .mob-stage.frag .tag:nth-child(even){transform:rotate(1.4deg)}
  .mob-stage.frag .warnline{color:#C98A3B;font-size:.62rem;font-weight:600;letter-spacing:.1em;margin-top:10px}
  .mob-stage.core.act{border-color:rgba(199,162,91,.6);background:radial-gradient(circle at 50% 0%,rgba(199,162,91,.14),#0E1220 70%)}
  .mob-stage.core.act .mt{color:var(--gold-b)}
  .mob-stage.calm.act{border-left:4px solid var(--gold);border-color:rgba(199,162,91,.45)}
  .mob-stage.calm.act .mt{color:#E8E8EC}
  .mob-stage.calm.act .ms{color:var(--gold-b)}
  .mob-arrow{width:2px;height:26px;background:linear-gradient(#6B5A34,var(--gold-b));margin:0 auto;position:relative}
  .mob-arrow::after{content:"";position:absolute;bottom:-1px;left:-4px;border:5px solid transparent;border-top-color:var(--gold)}
  .mob-final{text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--gold-b);margin-top:18px}
  .proof-inner{grid-template-columns:1fr 1fr;gap:20px;padding:18px 26px}
}
@media (min-width:981px) and (max-height:820px){
  .ch-top{padding:34px 48px 4px}
  h1{font-size:clamp(2rem,3.4vw,2.9rem)}
  .sub{font-size:.88rem;max-width:480px}
  .capline{margin:12px 0 18px}
  .btn{padding:12px 22px}
}
@media (prefers-reduced-motion:reduce){ .ctrl{opacity:1} }