:root { --navy:#101831; --red:#e12a40; --gold:#ffcb52; --paper:#fff1d6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--navy); color:var(--paper); font:16px/1.55 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #ffac2e; outline-offset:5px; }
header,footer { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 6%; }
header { border-bottom:1px solid #fff2d635; }
nav { display:flex; align-items:center; gap:22px; font-size:13px; font-weight:750; }
.brand { font:950 italic 25px/1 "Arial Black",Impact,sans-serif; letter-spacing:-.05em; }
.brand span { color:var(--gold); }
.button { display:inline-flex; align-items:center; padding:11px 15px; border:2px solid #14172b; background:#ff5364; color:#15172b; box-shadow:3px 4px #070c20; border-radius:5px; font:850 13px/1.25 system-ui,sans-serif; transition:transform .18s; }
.button:hover { transform:translateY(-3px); }
.yellow { background:var(--gold); }
.outline { background:#17254b; color:var(--paper); border-color:#fff1d67a; }
.hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:5%; align-items:center; position:relative; isolation:isolate; overflow:hidden; padding:clamp(35px,6vw,88px) 7%; background:radial-gradient(ellipse at 78% 50%,#3157a4,#15254d 55%,#101831 92%); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-conic-gradient(from 15deg at 80% 55%,#a9c4ff1a 0deg 7deg,transparent 7deg 20deg); }
.ticker { display:inline-block; background:var(--red); color:#fff; font:800 14px monospace; margin:0 0 22px; padding:6px 13px; transform:skew(-8deg); }
h1,h2 { margin:0; font-family:"Arial Black",Impact,system-ui,sans-serif; font-weight:950; font-style:italic; letter-spacing:-.065em; line-height:.87; }
h1 { font-size:clamp(65px,9.7vw,149px); text-shadow:4px 5px #080d20; }
h1 em,h2 em { color:var(--gold); font-style:inherit; }
.copy>p:not(.ticker) { font-size:clamp(17px,2vw,25px); max-width:340px; margin:24px 0; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
figure { margin:0; border:4px solid #11162c; box-shadow:9px 9px var(--red); transform:rotate(2deg); }
figure img { display:block; width:100%; height:auto; }
.origin { padding:clamp(37px,6vw,84px) 7%; background:var(--paper); color:#151b35; }
.origin-copy { display:grid; grid-template-columns:1.05fr .95fr; align-items:end; gap:30px; margin-bottom:28px; }
h2 { font-size:clamp(39px,6vw,90px); line-height:.95; }
.origin h2 em { color:#a82034; }
.origin p { margin:0; max-width:480px; font-size:clamp(16px,1.55vw,21px); }
.origin img { display:block; width:100%; height:auto; border:3px solid var(--navy); box-shadow:6px 6px #a82034; }
.finale { padding:clamp(44px,7vw,100px) 7%; background:#a82034; }
.finale h2 { font-size:clamp(36px,5.5vw,79px); max-width:950px; margin-bottom:24px; }
footer { font-size:13px; font-weight:750; }
@media(max-width:680px) { .hero,.origin-copy { grid-template-columns:minmax(0,1fr); } .hero { gap:34px; } h1 { font-size:clamp(66px,15vw,112px); } .origin-copy { gap:18px; } nav>a:first-child { display:none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }