:root {
  --bg: #0b0908;
  --panel: #15110e;
  --paper: #eee7da;
  --bronze: #8b4d2d;
  --bronze-2: #b46d43;
  --orange: #ef6a25;
  --line: rgba(238, 231, 218, .18);
  --muted: rgba(238, 231, 218, .62);
  --shadow: 0 22px 70px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; width: 100%; }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.nav {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--paper);
  font-family: "Archivo Black";
}
.nav-actions { display: flex; gap: 18px; align-items: center; }
.nav-link { color: var(--muted); font-size: 14px; }
.nav-link:hover { color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 22px;
  background: var(--orange); color: #110b08;
  font-weight: 800; text-transform: uppercase;
  border: 1px solid var(--orange);
  transition: transform .2s ease, background .2s ease, color .2s ease;
  box-shadow: 5px 5px 0 rgba(238,231,218,.12);
}
.btn:hover { transform: translate(-2px,-2px); }
.btn-small { min-height: 42px; padding: 0 16px; font-size: 13px; box-shadow: 3px 3px 0 rgba(238,231,218,.12); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--line); }
.btn-light { background: var(--paper); border-color: var(--paper); color: #15100d; }
.btn-light-outline { background: transparent; color: var(--paper); border-color: var(--paper); }

.hero {
  min-height: calc(100vh - 86px);
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
  padding-block: 70px;
}
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.eyebrow.light { color: var(--paper); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
.hero h1, .final-cta h2, .story h2 {
  font-family: "Archivo Black", Impact, sans-serif;
  margin: 20px 0 22px;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.055em;
}
.hero h1 { font-size: clamp(66px, 8.3vw, 132px); }
.hero h1 span { display: block; }
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--paper); opacity: .72; }
.lead { max-width: 610px; color: var(--muted); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.token-strip {
  margin-top: 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 15px 0;
}
.token-label, .chain { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.ticker-copy { appearance: none; border: 0; background: none; color: var(--paper); cursor: pointer; text-align: left; font-weight: 800; font-size: 20px; }
.copy-icon { color: var(--orange); font-size: 15px; margin-left: 5px; }

.art-frame {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  border: 1px solid var(--line); background: #231812;
  box-shadow: var(--shadow);
}
.art-frame::before { content:""; position:absolute; inset:14px; border:1px solid rgba(238,231,218,.32); z-index:2; pointer-events:none; }
.art-frame img { height: 100%; object-fit: cover; filter: contrast(1.06) saturate(.86) sepia(.06); transform: scale(1.02); }
.art-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 54%,rgba(10,8,7,.5)); pointer-events:none; }
.target { position:absolute; width:44px; height:44px; border:1px solid rgba(238,231,218,.58); z-index:3; }
.target::before,.target::after { content:"";position:absolute;background:rgba(238,231,218,.58); }
.target::before { width:60px;height:1px;left:-9px;top:21px; }
.target::after { height:60px;width:1px;left:21px;top:-9px; }
.target-a { top:9%;left:8%; }
.target-b { right:8%;bottom:10%; }
.stamp { position:absolute; z-index:4; right:26px; top:26px; transform:rotate(6deg); border:2px solid var(--orange); color:var(--orange); padding:8px 10px; font-family:"Archivo Black"; font-size:13px; line-height:.95; text-align:center; }
.art-caption { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.14em; margin-top:12px; }

.ticker-band { overflow:hidden; border-block:1px solid var(--line); background:var(--orange); color:#160c08; transform:rotate(-1.4deg) scale(1.02); margin:32px 0 110px; }
.ticker-track { white-space:nowrap; display:inline-block; padding:15px 0; font-family:"Archivo Black"; font-size:24px; animation:marquee 20s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-kicker { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.story { padding: 40px 0 120px; }
.story-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:80px; margin-top:22px; }
.story h2 { font-size:clamp(44px,6vw,84px); margin:0; }
.story-copy { font-size:19px; line-height:1.65; color:var(--muted); }
.story-copy strong { color:var(--paper); }

.gallery { display:grid; grid-template-columns:1.3fr .7fr; grid-template-rows:360px 360px; gap:16px; padding-bottom:120px; }
.panel { margin:0; position:relative; overflow:hidden; border:1px solid var(--line); background:#20150f; }
.panel-large { grid-row:1 / span 2; }
.panel img { height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.panel:hover img { transform:scale(1.04); }
.panel-large img { object-position:center; }
.panel-crop-a img { object-position:50% 13%; transform:scale(1.25); }
.panel-crop-a:hover img { transform:scale(1.3); }
.panel-crop-b img { object-position:50% 47%; transform:scale(1.7); }
.panel-crop-b:hover img { transform:scale(1.75); }
.panel::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.72)); }
.panel figcaption { position:absolute;left:18px;bottom:16px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.16em; }

.specs { padding-bottom:120px; }
.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); margin-top:22px; }
.spec-card { padding:30px 30px 36px 0; border-bottom:1px solid var(--line); }
.spec-card + .spec-card { padding-left:30px; border-left:1px solid var(--line); }
.spec-no { color:var(--orange); font-family:"Archivo Black"; }
.spec-card h3 { font-family:"Archivo Black"; font-size:28px; margin:38px 0 10px; }
.spec-card p { color:var(--muted); line-height:1.5; margin:0; }

.contract { padding-bottom:120px; display:grid; grid-template-columns:.65fr 1.35fr; gap:30px; align-items:end; }
.contract h2 { font-family:"Archivo Black"; text-transform:uppercase; font-size:48px; margin:18px 0 0; }
.contract-box { appearance:none; border:1px solid var(--line); background:#12100e; color:var(--paper); padding:22px; cursor:pointer; display:flex; gap:20px; justify-content:space-between; text-align:left; word-break:break-all; }
.contract-box span:last-child { color:var(--orange); white-space:nowrap; font-size:11px; font-weight:800; }

.final-cta { position:relative; min-height:560px; overflow:hidden; border:1px solid var(--line); margin-bottom:30px; display:flex; align-items:center; }
.cta-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,9,7,.92) 25%,rgba(14,9,7,.25)), url('assets/juggernaut-jotchua.png') center 44%/cover no-repeat; filter:saturate(.85); }
.cta-content { position:relative; z-index:2; padding:70px; }
.final-cta h2 { font-size:clamp(62px,9vw,126px); margin:20px 0; }
.final-cta h2 span { color:var(--orange); }
.final-cta p { font-size:18px; color:rgba(238,231,218,.72); }

.footer { min-height:100px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
.toast { position:fixed; right:24px; bottom:24px; z-index:110; background:var(--paper); color:#130e0b; font-weight:900; letter-spacing:.1em; font-size:12px; padding:14px 18px; transform:translateY(90px); opacity:0; transition:.25s ease; }
.toast.show { transform:translateY(0); opacity:1; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }

@media (max-width: 900px) {
  .nav-link { display:none; }
  .hero { grid-template-columns:1fr; gap:40px; padding-top:48px; }
  .hero-copy { order:1; }
  .hero-art { order:2; }
  .story-grid { grid-template-columns:1fr; gap:28px; }
  .gallery { grid-template-columns:1fr 1fr; grid-template-rows:520px 260px; }
  .panel-large { grid-row:auto; grid-column:1 / span 2; }
  .spec-grid { grid-template-columns:1fr; }
  .spec-card + .spec-card { border-left:0; padding-left:0; }
  .contract { grid-template-columns:1fr; }
  .cta-content { padding:44px; }
}
@media (max-width: 600px) {
  .shell { width:min(100% - 24px,1180px); }
  .nav { height:72px; }
  .brand span:last-child { display:none; }
  .hero { min-height:auto; padding-block:42px 72px; }
  .hero h1 { font-size:clamp(52px,18vw,84px); }
  .hero-actions { display:grid; }
  .btn { width:100%; }
  .token-strip { grid-template-columns:1fr auto; }
  .token-label { grid-column:1/-1; }
  .ticker-band { margin-bottom:80px; }
  .gallery { grid-template-columns:1fr; grid-template-rows:430px 260px 260px; padding-bottom:90px; }
  .panel-large { grid-column:auto; }
  .story,.specs,.contract { padding-bottom:90px; }
  .final-cta { min-height:520px; }
  .cta-content { padding:28px 22px; }
  .final-cta h2 { font-size:clamp(54px,17vw,82px); }
  .footer { gap:20px; align-items:flex-start; flex-direction:column; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}