/* =========================================================
   SHAOLIN MEOW — $MEOWLIN
   Temple / kung-fu monk theme. Palette pulled from the source
   photo: lacquer red pillars, saffron-gold robe, sunrise cream.
   ========================================================= */

:root{
  --void:#150c09;
  --deep:#2a1410;
  --wood:#3a2015;
  --red-900:#3a110c;
  --red-800:#5c1c13;
  --red-700:#7a2418;
  --red-600:#9c3320;
  --red-500:#c1462a;
  --gold-100:#fff3dc;
  --gold-200:#ffe9c2;
  --gold-300:#f7ce84;
  --gold-400:#e2a84a;
  --gold-500:#c98a3e;
  --cream:#fbe9cf;
  --paper:#f4e6cc;
  --ink:#2a1810;
  --ink-soft:#5b4232;

  --font-display:'Cinzel', 'Cinzel Decorative', serif;
  --font-body:'Noto Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --container:1180px;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--void);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}
svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

::selection{background:var(--gold-400); color:var(--red-900);}

/* ---------------- Grain overlay (procedural paper texture) ---------------- */
.grain-overlay{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image:url('../images/grain.png');
  background-size:340px 340px;
  opacity:.05; mix-blend-mode:overlay;
}

#emberCanvas{
  position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100%;
}

/* ================= PRELOADER ================= */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--void);
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.is-hidden{opacity:0; visibility:hidden;}
.preloader__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.1) brightness(.5); transform:scale(1.08);
}
.preloader__veil{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(21,12,9,.55) 0%, rgba(21,12,9,.92) 70%, var(--void) 100%);
}
.preloader__gate{position:absolute; inset:0; display:flex; z-index:2;}
.gate__leaf{
  flex:1; background:linear-gradient(180deg, var(--red-800), var(--red-900) 70%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.5);
  transition:transform 1.1s var(--ease);
}
.gate__leaf::after{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(226,168,74,.12) 0 2px, transparent 2px 40px);
}
.gate__leaf--left{transform-origin:left center;}
.gate__leaf--right{transform-origin:right center;}
#preloader.is-opening .gate__leaf--left{transform:translateX(-100%);}
#preloader.is-opening .gate__leaf--right{transform:translateX(100%);}

.preloader__center{position:relative; z-index:3; text-align:center; color:var(--gold-200);}
.preloader__seal{width:56px; height:56px; margin:0 auto 14px; opacity:.92; animation:pulse-seal 2.2s ease-in-out infinite;}
@keyframes pulse-seal{0%,100%{transform:scale(1); opacity:.85;} 50%{transform:scale(1.08); opacity:1;}}
.preloader__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:.32em;
  font-size:clamp(20px,4vw,30px); margin-bottom:22px; color:var(--gold-100);
  text-shadow:0 0 30px rgba(226,168,74,.4);
}
.preloader__bar{width:220px; height:3px; background:rgba(255,233,196,.15); margin:0 auto; border-radius:3px; overflow:hidden;}
.preloader__bar-fill{width:0%; height:100%; background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition:width .25s ease-out;}
.preloader__pct{margin-top:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; opacity:.65;}

/* ================= HEADER ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:16px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  background:rgba(21,12,9,.86);
  backdrop-filter:blur(14px);
  padding:10px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.35), 0 1px 0 rgba(226,168,74,.18);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;}

.brand{display:flex; align-items:center; gap:10px;}
.brand__seal{width:34px; height:34px;}
.brand__text{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.06em; color:var(--gold-100);}
.brand__text em{font-style:normal; color:var(--gold-400);}

.nav{display:flex; align-items:center; gap:26px;}
.nav__link{
  font-size:14px; font-weight:600; letter-spacing:.03em; color:var(--gold-200);
  position:relative; padding:4px 0; opacity:.86; transition:opacity .2s ease;
}
.nav__link:hover{opacity:1;}
.nav__link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--gold-400); transition:right .3s var(--ease);
}
.nav__link:hover::after{right:0;}
.nav__socials{display:flex; gap:10px;}

.icon-btn{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(226,168,74,.1); border:1px solid rgba(226,168,74,.35);
  color:var(--gold-200); transition:transform .25s var(--ease), background .25s ease, border-color .25s ease;
}
.icon-btn svg{width:16px; height:16px;}
.icon-stroke-fill{fill:currentColor; stroke:none;}
.icon-btn:hover{background:var(--gold-400); color:var(--red-900); transform:translateY(-2px) scale(1.06); border-color:var(--gold-400);}
.icon-btn--lg{width:46px; height:46px;}
.icon-btn--lg svg{width:20px; height:20px;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:38px; height:38px;
  align-items:center; justify-content:center; background:none; border:none;
  position:relative; z-index:401;
}
.nav-toggle span{width:22px; height:2px; background:var(--gold-200); border-radius:2px; transition:transform .3s var(--ease), opacity .3s ease;}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; z-index:400; background:#150b08;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transform:translateY(-100%); transition:transform .45s var(--ease);
}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav__link{font-family:var(--font-display); font-size:22px; color:var(--gold-100); letter-spacing:.05em;}
.mobile-nav__socials{display:flex; gap:16px; margin-top:6px;}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.02em;
  padding:13px 24px; border-radius:999px; border:2px solid transparent;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-icon{width:17px; height:17px; flex-shrink:0;}
.btn--gold{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--red-900);
  box-shadow:0 10px 30px -8px rgba(226,168,74,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold:hover{transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(226,168,74,.7), inset 0 1px 0 rgba(255,255,255,.5);}
.btn--outline{
  background:rgba(255,233,196,.05); color:var(--gold-100); border-color:rgba(226,168,74,.5);
}
.btn--outline:hover{background:rgba(226,168,74,.14); border-color:var(--gold-300); transform:translateY(-3px);}
.btn--outline-light{background:transparent; color:var(--cream); border-color:rgba(251,233,207,.4);}
.btn--outline-light:hover{background:rgba(251,233,207,.1); border-color:var(--cream); transform:translateY(-3px);}
.btn--lg{padding:16px 30px; font-size:15px;}
.btn--small{padding:9px 18px; font-size:13px;}
.btn:active{transform:translateY(0) scale(.97);}

/* ================= SECTIONS SHARED ================= */
.section{padding:120px 0; position:relative; z-index:2;}
.section--dark{background:linear-gradient(180deg, var(--red-900) 0%, #1c0b07 100%);}
.section-head{text-align:center; margin-bottom:56px;}
.eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--red-600); margin-bottom:14px; font-weight:700;
}
.eyebrow--light{color:var(--gold-400);}
.section-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.4vw,48px);
  color:var(--ink); line-height:1.15; margin:0;
}
.section-title--light{color:var(--gold-100);}
.lore,.chart,.gates{background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); color:var(--ink);}

/* reveal-on-scroll */
[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:150px 0 60px;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(226,168,74,.22), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--red-900) 55%, var(--red-800) 100%);
  overflow:hidden;
}
.hero__rays{
  position:absolute; top:-10%; left:50%; width:1400px; height:1400px; transform:translateX(-50%);
  background-size:contain; background-repeat:no-repeat; background-position:top center;
  opacity:.55; mix-blend-mode:screen; pointer-events:none;
}
.hero__mountains{position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;}
.mountains__far,.mountains__near{position:absolute; bottom:0; width:100%; height:100%;}
.mountains__far{fill:rgba(90,32,22,.55); opacity:.7;}
.mountains__near{fill:var(--void); opacity:.92;}

.hero__inner{position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center;}

.hero__badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 18px 8px 10px;
  border:1px solid rgba(226,168,74,.4); border-radius:999px; background:rgba(226,168,74,.08);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; color:var(--gold-300); margin-bottom:26px;
}
.hero__badge-seal{width:20px; height:20px; border-radius:4px;}

.hero__title{
  font-family:var(--font-display); font-weight:900; font-size:clamp(48px,10vw,108px);
  line-height:.98; letter-spacing:.02em; color:var(--gold-100); margin:0 0 18px;
  text-shadow:0 4px 0 rgba(58,17,12,.6), 0 30px 60px rgba(0,0,0,.5);
}
.hero__title-accent{
  background:linear-gradient(180deg, var(--gold-100), var(--gold-400) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__ticker{margin-bottom:16px;}
.ticker-pill{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:15px;
  letter-spacing:.08em; padding:8px 20px; border-radius:999px;
  background:linear-gradient(135deg, var(--red-600), var(--red-700));
  border:1px solid rgba(226,168,74,.5); color:var(--gold-100);
}

.hero__tagline{font-size:17px; color:var(--gold-200); opacity:.85; margin:0 0 34px; max-width:34ch;}

.hero__cta{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:56px;}

.hero__figure-wrap{
  position:relative; width:min(420px, 78vw); aspect-ratio:1/1; margin-top:8px;
  transform-style:preserve-3d; will-change:transform;
}
.hero__figure-glow{
  position:absolute; inset:-10%; border-radius:50%;
  background:radial-gradient(circle, rgba(226,168,74,.5), transparent 65%);
  filter:blur(10px); animation:glow-pulse 4.5s ease-in-out infinite;
}
@keyframes glow-pulse{0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:.9; transform:scale(1.06);}}
.hero__figure{
  position:relative; width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:4px solid var(--gold-300);
  box-shadow:0 25px 70px -15px rgba(0,0,0,.6), 0 0 0 10px rgba(122,36,24,.35), 0 0 0 11px rgba(226,168,74,.5);
}
.hero__ring{
  position:absolute; inset:-18px; border-radius:50%; border:1px dashed rgba(226,168,74,.45);
  animation:ring-spin 40s linear infinite;
}
@keyframes ring-spin{to{transform:rotate(360deg);}}

.hero__scroll{
  margin-top:54px; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; color:var(--gold-300); opacity:.75;
  animation:bob 2.4s ease-in-out infinite;
}
.hero__scroll svg{width:18px; height:18px;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);}}

/* ================= MARQUEE ================= */
.marquee{
  position:relative; z-index:2; overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg, var(--red-700), var(--red-600) 50%, var(--red-700));
  border-top:1px solid rgba(226,168,74,.4); border-bottom:1px solid rgba(226,168,74,.4);
  padding:14px 0;
}
.marquee__track{display:inline-flex; animation:marquee 32s linear infinite;}
.marquee__track span{
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:.06em;
  color:var(--gold-200); padding-right:0;
}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ================= LORE ================= */
.lore__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
.lore__visual{position:relative; display:flex; justify-content:center;}
.moon-gate{
  position:relative; width:min(420px,100%); aspect-ratio:1/1; border-radius:50%;
  padding:14px; background:linear-gradient(135deg, var(--red-700), var(--red-800));
  box-shadow:0 30px 60px -20px rgba(58,17,12,.4);
}
.moon-gate__img{width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid var(--gold-300);}
.moon-gate__ring{position:absolute; inset:0; border-radius:50%; border:2px dashed rgba(122,36,24,.35);}
.lore__seal-float{
  position:absolute; width:90px; height:90px; bottom:-18px; right:6%;
  box-shadow:0 14px 30px rgba(0,0,0,.3); border-radius:12px;
  transform:rotate(-8deg);
}

.eyebrow{color:var(--red-600);}
.lore .section-title{text-align:left; margin-bottom:30px;}

.scroll-card{
  position:relative; background:var(--gold-100); border:1px solid rgba(122,36,24,.15);
  border-left:4px solid var(--red-600); border-radius:12px; padding:22px 24px 22px 60px;
  margin-bottom:16px; box-shadow:0 10px 26px -14px rgba(58,17,12,.25);
}
.scroll-card__mark{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-size:26px; color:var(--red-600); opacity:.55;
}
.scroll-card h3{margin:0 0 6px; font-family:var(--font-display); font-size:17px; color:var(--ink);}
.scroll-card p{margin:0; font-size:14.5px; color:var(--ink-soft);}

/* ================= HOW TO BUY ================= */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:50px;}
.step-card{
  position:relative; background:rgba(255,233,196,.05); border:1px solid rgba(226,168,74,.22);
  border-radius:var(--radius); padding:30px 22px; text-align:left;
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .3s ease, background .3s ease;
}
.step-card:hover{border-color:rgba(226,168,74,.5); background:rgba(255,233,196,.08);}
.step-card__num{
  font-family:var(--font-mono); font-size:12px; color:var(--gold-500); letter-spacing:.1em; opacity:.8;
}
.step-card__icon{
  width:46px; height:46px; border-radius:12px; margin:14px 0 16px;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display:flex; align-items:center; justify-content:center; color:var(--red-900);
}
.step-card__icon svg{width:22px; height:22px; stroke-width:2;}
.step-card h3{font-family:var(--font-display); font-size:17px; margin:0 0 8px; color:var(--gold-100);}
.step-card p{margin:0; font-size:13.5px; color:var(--gold-200); opacity:.75;}

.ca-panel{
  max-width:640px; margin:0 auto 40px; text-align:center;
  background:rgba(0,0,0,.25); border:1px solid rgba(226,168,74,.3); border-radius:16px; padding:22px 26px;
}
.ca-panel__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; color:var(--gold-400); text-transform:uppercase;}
.ca-panel__row{display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; justify-content:center;}
.ca-panel__code{
  font-family:var(--font-mono); font-size:13.5px; color:var(--gold-100);
  background:rgba(255,255,255,.05); padding:10px 16px; border-radius:10px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.buy__ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ================= CHART ================= */
.chart-frame{
  position:relative; max-width:920px; margin:0 auto; padding:26px;
  background:linear-gradient(135deg, var(--red-700), var(--red-800));
  border-radius:22px; box-shadow:0 30px 70px -25px rgba(58,17,12,.4);
}
.chart-frame__corner{position:absolute; width:34px; height:34px; border:3px solid var(--gold-300); opacity:.85;}
.chart-frame__corner.tl{top:10px; left:10px; border-right:none; border-bottom:none; border-top-left-radius:10px;}
.chart-frame__corner.tr{top:10px; right:10px; border-left:none; border-bottom:none; border-top-right-radius:10px;}
.chart-frame__corner.bl{bottom:10px; left:10px; border-right:none; border-top:none; border-bottom-left-radius:10px;}
.chart-frame__corner.br{bottom:10px; right:10px; border-left:none; border-top:none; border-bottom-right-radius:10px;}
.chart-frame__inner{
  background:var(--void); border-radius:14px; overflow:hidden; min-height:460px;
  display:flex; align-items:center; justify-content:center;
}
.chart-frame__inner iframe{width:100%; height:520px; border:0; display:block;}
.chart-placeholder{text-align:center; padding:60px 30px; color:var(--gold-200);}
.chart-placeholder__seal{width:64px; height:64px; margin:0 auto 18px; opacity:.85;}
.chart-placeholder p{font-family:var(--font-display); font-size:20px; margin:0 0 8px; color:var(--gold-100);}
.chart-placeholder span{font-size:13px; opacity:.6;}

/* ================= ROADMAP ================= */
.dragon-path{position:relative; padding-top:10px;}
.dragon-path__line{width:100%; height:240px; margin-bottom:-40px; overflow:visible;}
.dragon-path__line path{
  fill:none; stroke:var(--gold-400); stroke-width:2.5; stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.6s var(--ease); opacity:.5;
}
.dragon-path__line path.is-drawn{stroke-dashoffset:0;}
.dragon-path__nodes{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:2;
}
.rank-card{
  background:rgba(255,233,196,.04); border:1px solid rgba(226,168,74,.2);
  border-radius:var(--radius); padding:26px 22px; text-align:left;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .3s ease, border-color .3s ease;
}
.rank-card:hover{border-color:rgba(226,168,74,.5);}
.rank-card__belt{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  padding:5px 12px; border-radius:999px; color:var(--ink); background:var(--belt,#fff);
  margin-bottom:16px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.rank-card h3{font-family:var(--font-display); font-size:18px; margin:0 0 8px; color:var(--gold-100);}
.rank-card p{margin:0; font-size:13.5px; color:var(--gold-200); opacity:.75;}

/* ================= GATES / FOOTER CTA ================= */
.gates__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gate-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:34px 20px; border-radius:16px; background:var(--gold-100);
  border:1px solid rgba(122,36,24,.15); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.03em;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease, color .3s ease;
  border:none; text-align:center;
}
.gate-btn svg{width:26px; height:26px; stroke-width:1.6; color:var(--red-600); transition:color .3s ease;}
.gate-btn:hover{background:linear-gradient(135deg, var(--red-600), var(--red-700)); color:var(--gold-100); box-shadow:0 20px 40px -16px rgba(122,36,24,.5); transform:translateY(-4px);}
.gate-btn:hover svg{color:var(--gold-300);}
.gate-btn--ca{background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); color:var(--red-900);}
.gate-btn--ca svg{color:var(--red-800);}

/* ================= FOOTER ================= */
.site-footer{
  position:relative; z-index:2; background:var(--void); padding:64px 0 34px;
  border-top:1px solid rgba(226,168,74,.2); text-align:center;
}
.footer__inner{display:flex; flex-direction:column; align-items:center; gap:14px;}
.brand--footer .brand__text{font-size:19px;}
.footer__ticker{font-family:var(--font-mono); color:var(--gold-400); letter-spacing:.15em; font-size:13px; margin:0;}
.footer__socials{display:flex; gap:14px; margin:8px 0 18px;}
.footer__fine{max-width:560px; font-size:11.5px; color:rgba(251,233,207,.45); line-height:1.6; margin:0 0 10px;}
.footer__copy{font-size:12px; color:rgba(251,233,207,.35); margin:0;}

/* ================= TOAST ================= */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold-300); color:var(--red-900); font-weight:700; font-size:13.5px;
  padding:12px 22px; border-radius:999px; z-index:2000; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
}
.toast.is-visible{opacity:1; transform:translateX(-50%) translateY(0);}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  .lore__grid{grid-template-columns:1fr; gap:44px; text-align:center;}
  .lore .section-title{text-align:center;}
  .scroll-card{text-align:left;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .dragon-path__nodes{grid-template-columns:repeat(2,1fr);}
  .dragon-path__line{display:none;}
  .gates__grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 600px){
  .section{padding:84px 0;}
  .steps{grid-template-columns:1fr;}
  .dragon-path__nodes{grid-template-columns:1fr;}
  .gates__grid{grid-template-columns:1fr 1fr;}
  .hero{padding-top:120px;}
  .hero__cta{flex-direction:column; width:100%;}
  .hero__cta .btn{width:100%;}
  .buy__ctas{flex-direction:column; width:100%;}
  .buy__ctas .btn{width:100%;}
  .ca-panel__code{font-size:11.5px;}
  .marquee__track span{font-size:14px;}
}

@media (min-width: 801px){
  .site-header:not(.scrolled) .header__inner{width:100%;}
}