/* ==========================================================================
   TRUMP BATON — $TRUMBATON
   ========================================================================== */

:root{
  --navy:        #121426;
  --navy-2:      #1b1f3a;
  --navy-3:      #262b4d;
  --navy-soft:   #2f3560;
  --cream:       #f4ede3;
  --cream-dim:   #cfc4b2;
  --red:         #d81c1f;
  --green:       #1ba86f;
  --green-light: #3ad696;
  --gold:        #ce9b54;
  --gold-light:  #e8c383;

  --font-display: "Big Shoulders", sans-serif;
  --font-body: "Poppins", sans-serif;

  --container-w: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight:400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
svg{ width:1em; height:1em; fill:currentColor; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
p{ margin:0; }
.container{ width:100%; max-width: var(--container-w); margin:0 auto; padding:0 24px; }

::selection{ background: var(--green); color:#fff; }

/* scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--cream); }
::-webkit-scrollbar-thumb{ background: var(--navy-3); border-radius:10px; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.35; filter:saturate(1.3);
}
.preloader-bg::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--navy) 85%);
}
.preloader-inner{ position:relative; z-index:2; text-align:center; color:var(--cream); padding: 0 20px; }
.preloader-badge{
  width:110px; height:110px; border-radius:50%;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 8px rgba(206,155,84,.12), 0 20px 60px rgba(0,0,0,.5);
  animation: preloaderPulse 2.2s ease-in-out infinite;
  margin: 0 auto 22px;
  object-fit: cover;
}
@keyframes preloaderPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}
.preloader-word{
  font-family: var(--font-display);
  font-weight:800; text-transform:uppercase;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  letter-spacing:.03em;
  line-height:.95;
}
.preloader-word span{ display:block; color: var(--green-light); }
.preloader-bar{
  width:min(280px, 60vw); height:6px; border-radius:6px;
  background: rgba(244,237,227,.15);
  margin: 26px auto 10px;
  overflow:hidden;
}
.preloader-bar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--green-light));
  border-radius:6px;
  transition: width .25s var(--ease);
}
.preloader-pct{ font-weight:700; letter-spacing:.05em; font-size:.85rem; color: var(--gold-light); }
.preloader-tag{ margin-top:8px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--cream-dim); }

/* ==========================================================================
   GRAIN OVERLAY (subtle texture across whole page)
   ========================================================================== */
.grain-overlay{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  background-image:url('../images/noise.png');
  background-size:300px 300px;
  opacity:.5;
  mix-blend-mode:overlay;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-body); font-weight:700; font-size:.95rem;
  padding: 15px 28px; border-radius: 100px; border: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  position:relative;
}
.btn-ic, .copy-ic{ width:18px; height:18px; flex:none; }
.btn-primary{
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: var(--navy);
  box-shadow: 0 10px 30px -8px rgba(27,168,111,.65);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px -8px rgba(27,168,111,.8); }
.btn-outline{
  background: rgba(244,237,227,.06);
  color: var(--cream);
  border: 1.5px solid rgba(244,237,227,.35);
  backdrop-filter: blur(6px);
}
.btn-outline:hover{ background: rgba(244,237,227,.14); transform: translateY(-3px); border-color: var(--gold-light); }
.btn-lg{ padding: 18px 34px; font-size:1.02rem; }
.btn-sm{ padding:10px 20px; font-size:.82rem; }
.btn-block{ width:100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 18px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
#siteHeader.scrolled{
  background: rgba(18,20,38,.88);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.header-inner{ display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{ width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); object-fit:cover; }
.brand-word{
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:1.1rem; letter-spacing:.02em;
  color: var(--cream);
}
.brand-word em{ font-style:normal; color: var(--green-light); }

.main-nav{ display:flex; align-items:center; gap: 28px; }
.main-nav a{
  font-weight:600; font-size:.88rem; letter-spacing:.02em;
  color: var(--cream); opacity:.82;
  transition: opacity .25s;
  position:relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--green); transition: right .3s var(--ease);
}
.main-nav a:hover{ opacity:1; }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(244,237,227,.1);
  color: var(--cream);
  border: none;
  transition: background .25s, transform .25s, color .25s;
  flex:none;
}
.icon-btn svg{ width:18px; height:18px; flex:none; }
.icon-btn:hover{ background: var(--green); color:#fff; transform: translateY(-2px); }

.ca-chip{
  display:flex; align-items:center; gap:8px;
  background: rgba(244,237,227,.1);
  border:none; border-radius:100px;
  padding: 10px 16px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color: var(--cream);
  transition: background .25s;
}
.ca-chip:hover{ background: var(--gold); color: var(--navy); }
.ca-chip .copy-ic{ width:15px; height:15px; opacity:.7; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:50%; border:none;
  background: rgba(244,237,227,.1);
}
.nav-toggle span{
  width:18px; height:2px; background: var(--cream); margin:0 auto; display:block;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  max-height:0; overflow:hidden;
  background: rgba(18,20,38,.97); backdrop-filter: blur(14px);
  transition: max-height .45s var(--ease);
}
.mobile-nav.open{ max-height:600px; }
.mobile-nav a{
  color: var(--cream); padding: 16px 24px; font-weight:600;
  border-top: 1px solid rgba(244,237,227,.08);
}
.mobile-nav-actions{ padding: 18px 24px 26px; display:flex; flex-direction:column; gap:16px; }
.mobile-social{ display:flex; gap:12px; justify-content:center; }
.mobile-social .icon-btn{ background: rgba(244,237,227,.1); color: var(--cream); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  background: var(--navy);
  overflow:hidden;
  padding-top: 110px;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position: center 20%;
  transform: scale(1.1);
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 25% 40%, rgba(18,20,38,.4) 0%, rgba(18,20,38,.92) 60%),
    linear-gradient(180deg, rgba(18,20,38,.65) 0%, rgba(18,20,38,.55) 40%, var(--navy) 100%);
}
#sparkleCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:20px;
  padding-top: 30px; padding-bottom: 70px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--green-light); font-weight:700; font-size:.78rem; letter-spacing:.15em;
  margin-bottom:18px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--green-light); box-shadow: 0 0 12px var(--green-light); animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.hero-title{
  color: var(--cream);
  font-size: clamp(3.4rem, 8.5vw, 7.2rem);
  line-height:.86;
  letter-spacing:.005em;
}
.hero-title .line1{ display:block; }
.hero-title .line2{ display:block; color: var(--green-light); text-shadow: 0 0 60px rgba(58,214,150,.35); }

.ticker-big{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  color: var(--gold-light); letter-spacing:.06em;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  margin-top:14px;
}
.hero-sub{
  color: var(--cream-dim); font-size:1.02rem; line-height:1.6;
  margin-top:18px; max-width:440px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.hero-links{ display:flex; flex-wrap:wrap; gap:22px; margin-top:26px; }
.text-link{ font-size:.85rem; font-weight:600; color: var(--cream-dim); transition: color .25s; }
.text-link:hover{ color: var(--green-light); }

.js-copy-ca{ background:none; }
.hero-ctas .js-copy-ca{ background: rgba(244,237,227,.06); }

.hero-figure{
  position:relative; display:flex; align-items:center; justify-content:center;
  perspective: 1200px;
}
.hero-figure-glow{
  position:absolute; width:110%; height:110%; left:-5%; top:-5%;
  background: radial-gradient(closest-side, rgba(27,168,111,.35), transparent 70%);
  filter: blur(10px);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
.hero-img{
  position:relative; z-index:2;
  width: min(100%, 460px);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
  will-change: transform;
  animation: floatY 5.5s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes floatY{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-16px);} }

.badge-orbit{
  position:absolute; z-index:3;
  background: rgba(18,20,38,.55);
  border: 1px solid rgba(206,155,84,.5);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size:.68rem; font-weight:700; letter-spacing:.08em;
  padding: 8px 14px; border-radius:100px;
  animation: orbitFloat 6s ease-in-out infinite;
}
.badge-1{ top:8%; right:2%; animation-delay:0s; }
.badge-2{ bottom:22%; left:-2%; animation-delay:.8s; }
.badge-3{ bottom:4%; right:10%; animation-delay:1.6s; }
@keyframes orbitFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; width:26px; height:42px; border-radius:16px;
  border:2px solid rgba(244,237,227,.4);
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:4px; height:8px; border-radius:4px; background: var(--green-light);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-strip{
  position:relative; z-index:3;
  background: linear-gradient(90deg, var(--green), #159260);
  color: var(--navy);
  padding: 16px 0;
  overflow:hidden;
  transform: rotate(-1.2deg) scale(1.02);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  margin-top: -14px;
}
.marquee-track{ display:inline-flex; white-space:nowrap; animation: marquee 26s linear infinite; }
.marquee-track span{
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: 1.3rem; letter-spacing:.04em; padding: 0 28px;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }

/* ==========================================================================
   SECTION GENERIC
   ========================================================================== */
.section{ position:relative; padding: 110px 0; }
.section-head{ text-align:center; max-width:720px; margin: 0 auto 56px; }
.kicker{
  display:inline-block; font-weight:700; letter-spacing:.18em; font-size:.75rem;
  color: var(--green);
  margin-bottom:14px;
}
.section-head h2{ font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height:1.05; color: var(--navy); }

/* reveal */
[data-reveal]{ opacity:0; transform: translateY(48px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].revealed{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   LORE
   ========================================================================== */
.lore{ background: var(--cream); }
.lore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:60px; }
.lore-card{
  background:#fff; border-radius: var(--radius-lg);
  padding: 38px 30px; box-shadow: 0 20px 50px -25px rgba(18,20,38,.25);
  border: 1px solid rgba(18,20,38,.06);
  transition: transform .1s linear, box-shadow .35s var(--ease);
}
.lore-card:hover{ box-shadow: 0 30px 60px -20px rgba(18,20,38,.35); }
.lore-card-num{
  font-family: var(--font-display); font-weight:800; font-size:2.2rem;
  color: var(--gold); opacity:.55; margin-bottom:6px;
}
.lore-card h3{ font-size:1.25rem; margin-bottom:12px; color: var(--navy); }
.lore-card p{ color:#5b5a63; line-height:1.65; font-size:.95rem; }

.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  background: var(--navy); border-radius: var(--radius-lg);
  padding: 40px 20px;
}
.stat{ text-align:center; color: var(--cream); }
.stat-num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size: clamp(1.6rem,3vw,2.3rem); color: var(--green-light); margin-bottom:6px;
}
.stat-label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--cream-dim); }

/* ==========================================================================
   HOW TO BUY
   ========================================================================== */
.how-to-buy{ background: var(--navy); color: var(--cream); }
.how-to-buy .kicker{ color: var(--gold-light); }
.how-to-buy .section-head h2{ color: var(--cream); }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:50px; }
.step-card{
  background: rgba(244,237,227,.05);
  border: 1px solid rgba(244,237,227,.12);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  transition: transform .1s linear, background .3s;
}
.step-card:hover{ background: rgba(244,237,227,.09); }
.step-icon{
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  color: var(--navy);
}
.step-icon svg{ width:26px; height:26px; }
.step-no{ font-size:.7rem; font-weight:700; letter-spacing:.14em; color: var(--gold-light); }
.step-card h3{ font-size:1.15rem; margin:10px 0 10px; color:var(--cream); }
.step-card p{ font-size:.9rem; color: var(--cream-dim); line-height:1.6; }

.ca-panel{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: rgba(244,237,227,.05);
  border: 1px dashed rgba(206,155,84,.5);
  border-radius: var(--radius-lg);
  padding: 34px 24px; text-align:center;
}
.ca-panel-label{ font-size:.72rem; letter-spacing:.18em; color: var(--gold-light); font-weight:700; }
.ca-panel-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.ca-panel-text{
  font-family: monospace; font-size: .95rem; color: var(--cream);
  background: rgba(0,0,0,.25); padding:12px 18px; border-radius:10px;
  word-break: break-all;
}

/* ==========================================================================
   CHART
   ========================================================================== */
.chart-section{ background: var(--cream); }
.chart-frame{
  border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid rgba(18,20,38,.08);
  box-shadow: 0 30px 70px -30px rgba(18,20,38,.3);
}
.chart-frame-bar{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--navy); color: var(--cream);
  padding: 16px 24px; font-size:.78rem; font-weight:700; letter-spacing:.06em;
}
.chart-frame-bar .text-link{ color: var(--green-light); }
.chart-embed-wrap{ position:relative; width:100%; padding-bottom:62%; background: var(--navy-2); }
.chart-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ==========================================================================
   ROADMAP
   ========================================================================== */
.roadmap{ background: var(--navy); color:var(--cream); position:relative; overflow:hidden; }
.roadmap .kicker{ color: var(--gold-light); }
.roadmap .section-head h2{ color: var(--cream); }
.timeline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative;
}
.timeline::before{
  content:''; position:absolute; top:26px; left:6%; right:6%; height:2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
  opacity:.5;
}
.timeline-item{ position:relative; padding-top:70px; }
.timeline-dot{
  position:absolute; top:0; left:0;
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy); font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px -8px rgba(206,155,84,.6);
}
.timeline-item h3{ font-size:1.15rem; margin-bottom:10px; }
.timeline-item p{ font-size:.9rem; color: var(--cream-dim); line-height:1.6; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{ background: var(--cream); }
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows:160px;
  gap:18px;
}
.gallery-card{
  border-radius: var(--radius-md); overflow:hidden; position:relative;
  box-shadow: 0 20px 40px -20px rgba(18,20,38,.35);
}
.gallery-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.gallery-card:hover img{ transform: scale(1.08); }
.gallery-tall{ grid-row: span 2; grid-column: span 1; }
.gallery-wide{ grid-column: span 2; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ position:relative; padding: 130px 0; overflow:hidden; }
.cta-bg{
  position:absolute; inset:0; background-size:cover; background-position:center 25%;
}
.cta-bg::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, var(--navy) 0%, rgba(18,20,38,.85) 50%, var(--navy) 100%);
}
.cta-box{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.cta-box h2{ color: var(--cream); font-size: clamp(2rem, 4.6vw, 3rem); line-height:1.1; margin-bottom:34px; }
.cta-box-ctas{ justify-content:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--navy); color: var(--cream); padding: 70px 0 40px; }
.footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:36px; border-bottom:1px solid rgba(244,237,227,.1); }
.footer-social{ display:flex; gap:12px; }
.footer-social .icon-btn{ background: rgba(244,237,227,.08); color: var(--cream); }

.footer-jump-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  margin: 36px 0;
}
.jump-btn{
  text-align:center; padding: 16px 10px; border-radius: 100px;
  background: rgba(244,237,227,.06);
  border: 1px solid rgba(244,237,227,.14);
  font-weight:700; font-size:.85rem;
  transition: background .25s, transform .25s, border-color .25s;
}
.jump-btn:hover{ background: var(--green); color: var(--navy); border-color: var(--green); transform: translateY(-3px); }

.footer-ca{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background: rgba(244,237,227,.05);
  border: 1px dashed rgba(206,155,84,.4);
  border-radius:100px;
  padding: 14px 22px;
  max-width:560px; margin: 0 auto 36px;
  font-family: monospace; font-size:.85rem;
  word-break: break-all; text-align:center;
}
.footer-ca .icon-btn{ background: rgba(244,237,227,.1); width:34px; height:34px; flex:none; }

.disclaimer{ font-size:.76rem; line-height:1.7; color: var(--cream-dim); text-align:center; max-width:760px; margin:0 auto 18px; opacity:.75; }
.copyright{ text-align:center; font-size:.78rem; color: var(--cream-dim); opacity:.6; }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:32px; transform: translateX(-50%) translateY(30px);
  background: var(--navy); color: var(--cream);
  border: 1px solid var(--green);
  padding: 14px 26px; border-radius:100px;
  font-weight:600; font-size:.88rem;
  opacity:0; pointer-events:none; z-index:9998;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   TILT (3D)
   ========================================================================== */
[data-tilt]{ transform-style: preserve-3d; will-change: transform; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .main-nav, .header-actions{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:2; }
  .hero-figure{ order:1; max-width:380px; margin:0 auto 20px; }
  .hero-ctas, .hero-links{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .lore-grid{ grid-template-columns:1fr; }
  .steps-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:repeat(2,1fr); row-gap:50px; }
  .timeline::before{ display:none; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-tall{ grid-row: span 2; }
  .gallery-wide{ grid-column: span 2; }
  .footer-jump-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 620px){
  .section{ padding: 80px 0; }
  .steps-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .footer-jump-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ justify-content:center; text-align:center; }
  .marquee-track span{ font-size:1rem; padding:0 18px; }
  .hero{ padding-top:100px; }
  .ca-chip span{ display:none; }
}

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