:root {
  --ink: #090a08;
  --panel: #11140f;
  --acid: #b8ff2c;
  --rust: #b84f25;
  --paper: #e8e4d5;
  --muted: #949887;
  --line: rgba(232, 228, 213, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 84% 8%, rgba(184,255,44,.09), transparent 26rem),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    var(--ink);
  background-size: auto, 100% 7px, auto;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin: auto; }

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(9,10,8,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { font: 900 1.1rem/1 Arial Black, sans-serif; text-decoration: none; letter-spacing: -.04em; }
.brand i { color: var(--acid); font-style: normal; }
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { color: var(--muted); font-weight: 800; font-size: .76rem; text-decoration: none; letter-spacing: .12em; text-transform: uppercase; }
.links a:hover,.links a[aria-current="page"] { color: var(--paper); }
.actions { display: flex; gap: 9px; }
.button {
  min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--paper); text-decoration: none; font-weight: 900;
  letter-spacing: .08em; font-size: .75rem; text-transform: uppercase; transition: .18s ease;
}
.button:hover { transform: translateY(-2px); border-color: var(--paper); }
.button.buy { background: var(--acid); color: #101408; border-color: var(--acid); box-shadow: 5px 5px 0 var(--rust); }

.hero { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.03fr .97fr; align-items: stretch; }
.hero-copy { padding: clamp(64px, 10vw, 140px) 8vw 72px max(20px, calc((100vw - 1180px)/2)); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { color: var(--acid); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 900; }
h1,h2 { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-transform: uppercase; margin: 0; line-height: .84; letter-spacing: -.035em; }
h1 { font-size: clamp(5rem, 11vw, 10rem); }
h1 span { color: transparent; -webkit-text-stroke: 1px var(--paper); }
.hero-copy p { max-width: 540px; color: #b9bcae; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; margin: 32px 0; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { position: relative; min-height: 560px; overflow: hidden; border-left: 1px solid var(--line); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.83); }
.hero-visual::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(0,0,0,.55); pointer-events:none; }
.stamp { position: absolute; right: 24px; bottom: 24px; z-index: 2; width: 116px; aspect-ratio:1; border: 2px solid var(--acid); border-radius:50%; color:var(--acid); display:grid; place-items:center; text-align:center; font-weight:900; font-size:.67rem; letter-spacing:.13em; transform:rotate(-9deg); }

.ticker { overflow: hidden; white-space: nowrap; background: var(--acid); color: #0b0d08; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; padding: 13px 0; }
.ticker div { display: inline-block; min-width: 200%; animation: crawl 18s linear infinite; }
@keyframes crawl { to { transform: translateX(-50%); } }

.section { padding: 110px 0; }
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom: 42px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.section-head h2 { font-size: clamp(3.4rem,7vw,6.4rem); }
.section-head p { color:var(--muted); max-width:370px; line-height:1.55; margin:0; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card { background:var(--panel); padding:34px; min-height:230px; }
.card b { display:block; color:var(--acid); font:900 3rem/1 Impact,sans-serif; }
.card h3 { text-transform:uppercase; margin:30px 0 8px; }
.card p { color:var(--muted); line-height:1.55; margin:0; }
.quote { border-left:6px solid var(--acid); padding: 8px 0 8px 28px; font:900 clamp(2.2rem,5vw,5rem)/1 Impact,sans-serif; text-transform:uppercase; max-width:950px; }

.page-hero { padding: 110px 0 64px; border-bottom:1px solid var(--line); }
.page-hero h1 { max-width:980px; }
.page-hero p { max-width:600px; color:var(--muted); line-height:1.6; font-size:1.08rem; }
.story-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start; }
.story-grid img { position:sticky; top:108px; aspect-ratio:1; object-fit:cover; }
.chapters { border-top:1px solid var(--line); }
.chapter { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:34px 0; border-bottom:1px solid var(--line); }
.chapter span { color:var(--acid); font-weight:900; }
.chapter h3 { margin:0 0 10px; text-transform:uppercase; font-size:1.35rem; }
.chapter p { color:#aeb2a2; line-height:1.7; margin:0; }

.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.gallery figure { margin:0; position:relative; overflow:hidden; background:var(--panel); cursor:zoom-in; border:1px solid var(--line); }
.gallery figure:nth-child(1) { grid-column:span 7; }
.gallery figure:nth-child(2) { grid-column:span 5; margin-top:80px; }
.gallery figure:nth-child(3) { grid-column:3/span 8; }
.gallery img { width:100%; aspect-ratio:1; object-fit:cover; transition:.35s ease; }
.gallery figure:hover img { transform:scale(1.025); filter:brightness(.72); }
.gallery figcaption { position:absolute; left:18px; bottom:16px; text-transform:uppercase; font-weight:900; letter-spacing:.08em; opacity:0; transform:translateY(8px); transition:.25s; }
.gallery figure:hover figcaption { opacity:1; transform:none; }
.lightbox { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.94); display:none; place-items:center; padding:28px; cursor:zoom-out; }
.lightbox.open { display:grid; }
.lightbox img { max-height:90vh; max-width:92vw; }

.final-cta { padding:90px 0; background:var(--rust); color:#fff; }
.final-cta .shell { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.final-cta h2 { font-size:clamp(3.4rem,8vw,7rem); }
.final-cta .button.buy { background:#fff; color:#111; border-color:#fff; box-shadow:6px 6px 0 #111; min-width:150px; }
footer { padding:28px 0; color:var(--muted); border-top:1px solid var(--line); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
footer .shell { display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 800px) {
  .shell { width:min(100% - 28px,1180px); }
  .nav { flex-wrap:wrap; padding:15px 0; gap:14px; }
  .links { order:3; width:100%; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:14px; }
  .actions .button { padding:0 13px; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:70px 20px 55px; }
  .hero-visual { min-height:72vh; border-left:0; border-top:1px solid var(--line); }
  .section { padding:72px 0; }
  .section-head,.final-cta .shell { align-items:flex-start; flex-direction:column; }
  .cards { grid-template-columns:1fr; }
  .story-grid { grid-template-columns:1fr; gap:38px; }
  .story-grid img { position:static; }
  .gallery figure:nth-child(n) { grid-column:span 12; margin-top:0; }
  footer .shell { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
