/* ==========================================================
   BUNDLE PAID — $BUNPAID
   Palette sampled from the source photo: fog, iron, moss,
   pewter steel, linen cape, brass fleur, leather strap.
   ========================================================== */
:root{
  --fog:#abb4c3; --mist:#d9dee5; --mist-2:#c3cad5;
  --iron:#262523; --char:#151610; --char-2:#1c1e16;
  --moss:#2b3316; --moss-2:#3d4626; --olive:#50543d;
  --pewter:#9ea0a3; --steel:#c9ccd0; --steel-d:#6c7178;
  --linen:#d8d3c6; --linen-d:#b9b2a2;
  --brass:#b89a5e; --brass-l:#ecd9a4; --brass-d:#6d5630;
  --leather:#6a4428; --leather-d:#3a261a;
  --f-display:"Pirata One","UnifrakturMaguntia",Georgia,serif;
  --f-sc:"Cormorant SC",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--char);color:var(--mist);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{display:block}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto;position:relative;z-index:2}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:900;background:url(../img/grain.png);opacity:.55;mix-blend-mode:overlay}

/* ---------- shared typography ---------- */
.kicker{font-family:var(--f-sc);font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:.9rem;color:var(--leather);margin:0 0 .4rem}
.kicker.light{color:var(--brass)}
.h-display{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:.95;margin:0;color:var(--iron);letter-spacing:.01em}
.h-display.light{color:var(--mist)}
.sec-head{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}

/* ---------- rivets (shared) ---------- */
.rivet{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#c9ccd0 30%,#6c7178 70%,#2c2e31 100%);box-shadow:0 1px 2px rgba(0,0,0,.6);z-index:3}
.rivet.tl{top:12px;left:12px}.rivet.tr{top:12px;right:12px}.rivet.bl{bottom:12px;left:12px}.rivet.br{bottom:12px;right:12px}

/* ==========================================================
   PRELOADER — full-screen photo, sword fills, diagonal slash
   ========================================================== */
.preloader{position:fixed;inset:0;z-index:1000;pointer-events:all}
.pl-half{position:absolute;inset:0;overflow:hidden;transition:transform 1.1s var(--ease)}
.pl-a{clip-path:polygon(0 0,100% 0,100% 30.4%,0 70.4%)}
.pl-b{clip-path:polygon(0 70%,100% 30%,100% 100%,0 100%)}
.pl-img{position:absolute;inset:-4%;background:#8f98a6 url(../img/scene-full.webp) center 58%/cover no-repeat;animation:plZoom 6s ease-out forwards;filter:saturate(.9)}
.pl-half::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(21,22,16,.05) 0,rgba(21,22,16,.55) 75%),linear-gradient(180deg,rgba(21,22,16,.25),rgba(21,22,16,.55))}
@keyframes plZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.pl-fog{position:absolute;inset:0;background:url(../img/fog.webp) 0 70%/1600px 600px repeat-x;opacity:.7;animation:fogDrift 40s linear infinite;pointer-events:none;transition:opacity .6s}
.pl-center{position:absolute;left:50%;bottom:clamp(40px,12vh,120px);transform:translateX(-50%);width:min(560px,86vw);text-align:center;transition:opacity .4s}
.pl-ticker{font-family:var(--f-display);font-size:clamp(3rem,9vw,5.5rem);color:var(--mist);line-height:1;text-shadow:0 4px 30px rgba(0,0,0,.6);margin-bottom:.4rem}
.pl-sword{position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.pl-sword-svg{width:100%;height:auto;opacity:.35;filter:grayscale(1)}
.pl-glint{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path .25s linear}
.pl-glint svg{width:100%;height:auto;filter:drop-shadow(0 0 8px rgba(236,217,164,.6))}
.pl-row{display:flex;justify-content:space-between;margin-top:.7rem;font-family:var(--f-sc);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;color:var(--mist)}
.pl-pct{font-family:var(--f-mono);letter-spacing:.05em}
.pl-slash{position:absolute;left:-10%;top:50%;width:120%;height:3px;background:linear-gradient(90deg,transparent,#fff 30%,var(--brass-l) 50%,#fff 70%,transparent);transform:rotate(-21.8deg) scaleX(0);transform-origin:0 50%;box-shadow:0 0 24px 6px rgba(255,255,255,.7);opacity:0}
.preloader.slash .pl-slash{animation:slash .45s var(--ease) forwards}
@keyframes slash{0%{opacity:1;transform:rotate(var(--ang,-21.8deg)) scaleX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--ang,-21.8deg)) scaleX(1)}}
.preloader.open .pl-a{transform:translate(-6%,-110%)}
.preloader.open .pl-b{transform:translate(6%,110%)}
.preloader.open .pl-center,.preloader.open .pl-fog{opacity:0}
.preloader.done{display:none}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:600;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 clamp(16px,3vw,40px);transition:background .4s,box-shadow .4s,height .3s}
.site-header.scrolled{background:rgba(21,22,16,.94);box-shadow:0 1px 0 rgba(184,154,94,.35),0 10px 30px rgba(0,0,0,.35);height:64px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-coin{width:46px;height:46px;border-radius:50%;padding:2px;background:conic-gradient(from 20deg,var(--brass-l),var(--brass-d),var(--brass),var(--brass-l),var(--brass-d),var(--brass-l));box-shadow:0 3px 10px rgba(0,0,0,.35)}
.brand-coin img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.brand-name{font-family:var(--f-display);font-size:1.75rem;line-height:1;color:var(--iron);transition:color .4s}
.site-header.scrolled .brand-name,body.nav-open .brand-name{color:var(--mist)}
.main-nav{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.main-nav a{font-family:var(--f-sc);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.95rem;color:var(--iron);position:relative;padding:.3rem 0;transition:color .3s}
.site-header.scrolled .main-nav a{color:var(--mist)}
.main-nav a::after{content:"";position:absolute;left:50%;bottom:-2px;width:0;height:2px;background:var(--brass);transition:width .3s var(--ease),left .3s var(--ease)}
.main-nav a:hover::after{width:100%;left:0}
.head-social{display:flex;align-items:center;gap:.6rem}

/* shield buttons (X / TG / DEX) */
.shield-btn{--s:44px;width:var(--s);height:calc(var(--s)*1.14);display:grid;place-items:center;position:relative;
  clip-path:polygon(50% 0,100% 12%,100% 55%,50% 100%,0 55%,0 12%);
  background:linear-gradient(160deg,#f1f3f5 0%,#a8adb3 45%,#6c7178 100%);transition:transform .3s var(--ease),filter .3s}
.shield-btn::before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(160deg,#2c2d2a,#151610)}
.shield-btn svg{position:relative;width:45%;height:45%;fill:var(--steel);transform:translateY(-8%);transition:fill .3s}
.shield-btn:hover{transform:translateY(-3px) rotate(-4deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.shield-btn:hover svg{fill:var(--brass-l)}
.shield-btn.big{--s:58px}
.nav-toggle{display:none;width:44px;height:44px;position:relative;z-index:602;border-radius:10px;background:var(--iron);flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{width:20px;height:2px;background:var(--steel);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:590;background:#151610;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav>a{font-family:var(--f-display);font-size:2.6rem;color:var(--mist)}
.mn-social{display:flex;gap:1rem;margin-top:1rem}

/* sword scroll progress */
.sword-progress{position:fixed;right:18px;top:50%;width:min(46vh,380px);transform:translate(50%,-50%) rotate(90deg);transform-origin:center;z-index:500;pointer-events:none;opacity:0;transition:opacity .5s}
.sword-progress.show{opacity:.95}
.sword-progress>svg{width:100%;height:auto;filter:grayscale(.9) brightness(.6) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sp-fill{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.sp-fill svg{width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(236,217,164,.5))}

/* ==========================================================
   HERO — layered 3D fog stage
   ========================================================== */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#aab3c1}
.hero-stage{position:absolute;inset:0;perspective:1200px}
.h-layer{position:absolute;inset:0;will-change:transform}
.h-bg{inset:-4%}
.h-bg-img{position:absolute;inset:0;background:url(../img/moor-wide.webp) center 62%/cover no-repeat}
.h-title{display:flex;justify-content:center;align-items:flex-start;padding-top:calc(var(--hdr) + 5vh);pointer-events:none}
.giant{margin:0;font-family:var(--f-display);font-weight:400;line-height:.78;text-align:center;color:var(--iron);font-size:clamp(5rem,19vw,19rem);letter-spacing:.005em;display:flex;gap:.18em;opacity:.9;mix-blend-mode:multiply;text-shadow:0 0 1px rgba(0,0,0,.2)}
.giant span{display:inline-block}
.h-knight{display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.knight-tilt{width:min(78vh,64vw);margin-bottom:-3.5vh;transform-style:preserve-3d;transition:transform .2s linear;filter:drop-shadow(0 30px 30px rgba(15,18,10,.35))}
.knight-tilt img{width:100%;height:auto}
.fog-gl{width:100%;height:100%;pointer-events:none;opacity:.9}
.fog-strip{position:absolute;left:0;width:100%;height:600px;background:url(../img/fog.webp) 0 0/1600px 600px repeat-x;pointer-events:none}
.fs-1{bottom:18%;opacity:.55;animation:fogDrift 70s linear infinite}
.fs-2{bottom:-160px;opacity:.75;animation:fogDrift 45s linear infinite reverse}
.fs-3{bottom:-60px;opacity:.35;animation:fogDrift 90s linear infinite;transform:scaleY(.7)}
@keyframes fogDrift{from{background-position:0 0}to{background-position:1600px 0}}
.h-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(21,22,16,.45) 100%),linear-gradient(180deg,transparent 70%,rgba(21,22,16,.55) 100%)}

.hero-ui{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(28px,6vh,64px);z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:min(560px,92vw)}
.ticker-seal{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1.1rem .45rem .5rem;border-radius:999px;background:linear-gradient(180deg,rgba(21,22,16,.88),rgba(38,37,35,.88));box-shadow:inset 0 0 0 1px rgba(236,217,164,.35),0 8px 20px rgba(0,0,0,.35)}
.ticker-seal .seal-fleur{width:34px;height:34px;padding:6px;border-radius:50%;fill:#4e3d20;background:radial-gradient(circle at 35% 30%,var(--brass-l),var(--brass) 55%,var(--brass-d));box-shadow:inset 0 -2px 3px rgba(0,0,0,.35)}
.ticker-seal span{font-family:var(--f-mono);font-weight:700;letter-spacing:.08em;font-size:1.15rem;color:var(--brass-l)}
.hero-tag{margin:0;font-family:var(--f-display);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1;color:var(--mist);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ---------- pump.fun button: brass medal + leather body ---------- */
.btn-pump{position:relative;display:inline-flex;align-items:center;gap:.9rem;padding:.55rem 1.8rem .55rem .55rem;border-radius:999px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 30% 0%,#8a5a36 0%,var(--leather) 45%,var(--leather-d) 100%);
  box-shadow:inset 0 0 0 2px rgba(236,217,164,.55),inset 0 -4px 10px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.45),0 0 0 4px rgba(21,22,16,.55);transition:transform .35s var(--ease),box-shadow .35s}
.btn-pump::before{content:"";position:absolute;inset:6px 6px 6px 62px;border-radius:999px;border:1.5px dashed rgba(236,217,164,.45);pointer-events:none}
.bp-medal{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:radial-gradient(circle at 35% 28%,#fff5d6 0,var(--brass-l) 18%,var(--brass) 55%,var(--brass-d) 100%);
  box-shadow:inset 0 0 0 3px rgba(109,86,48,.7),inset 0 -3px 6px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.5);transition:transform .6s var(--ease)}
.bp-medal svg{width:34px;height:34px;fill:#4e3d20;filter:drop-shadow(0 1px 0 rgba(255,245,214,.6))}
.bp-text{display:flex;flex-direction:column;line-height:1;font-family:var(--f-display);font-size:2rem;color:#f4ead0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bp-text small{font-family:var(--f-sc);font-weight:700;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-l);margin-bottom:.15rem}
.bp-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,240,200,.35) 50%,transparent 65%);transform:translateX(-120%);z-index:-1}
.btn-pump:hover{transform:translateY(-3px) scale(1.02);box-shadow:inset 0 0 0 2px rgba(236,217,164,.9),inset 0 -4px 10px rgba(0,0,0,.4),0 18px 36px rgba(0,0,0,.5),0 0 0 4px rgba(184,154,94,.45)}
.btn-pump:hover .bp-medal{transform:rotate(360deg)}
.btn-pump:hover .bp-shine{animation:shine .9s ease}
@keyframes shine{to{transform:translateX(120%)}}

/* ---------- CA strap: leather strap + brass buckle ---------- */
.ca-strap{position:relative;display:inline-flex;align-items:center;gap:.6rem;height:58px;padding:0 .5rem 0 .7rem;border-radius:10px;max-width:100%;
  background:linear-gradient(180deg,#7a4f30 0%,var(--leather) 40%,var(--leather-d) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,220,180,.15),0 10px 24px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.ca-strap::before{content:"";position:absolute;inset:5px;border-radius:6px;border:1.5px dashed rgba(236,217,164,.35);pointer-events:none}
.cs-buckle{width:30px;height:36px;flex-shrink:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.cs-label{font-family:var(--f-sc);font-weight:700;letter-spacing:.2em;color:var(--brass-l);font-size:.9rem}
.cs-value{font-family:var(--f-mono);font-weight:700;font-size:.95rem;color:#f4ead0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:22ch}
.cs-copy{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:radial-gradient(circle at 35% 28%,var(--brass-l),var(--brass) 55%,var(--brass-d));box-shadow:inset 0 -2px 4px rgba(0,0,0,.35)}
.cs-copy svg{width:20px;height:20px;fill:#3a2a12;grid-area:1/1}
.ic-check{opacity:0;transform:scale(.5);transition:.25s}
.ic-copy{transition:.25s}
.copied .ic-check{opacity:1;transform:none}
.copied .ic-copy{opacity:0;transform:scale(.5)}
.ca-strap:hover{transform:translateY(-2px)}
.ca-strap.small{height:52px}

/* scroll cue */
.scroll-cue{position:absolute;right:clamp(20px,4vw,56px);bottom:clamp(28px,6vh,64px);z-index:5;width:30px;height:50px;border:2px solid rgba(217,222,229,.8);border-radius:16px}
.scroll-cue span{position:absolute;left:50%;top:9px;width:4px;height:10px;margin-left:-2px;border-radius:2px;background:var(--mist);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------- leather strap marquee ---------- */
.strap-band{position:relative;z-index:4;overflow:hidden;padding:18px 0;margin-top:-1px;
  background:linear-gradient(180deg,#7a4f30,var(--leather) 45%,var(--leather-d));
  box-shadow:inset 0 3px 0 rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.35)}
.strap-band::before,.strap-band::after{content:"";position:absolute;left:0;right:0;height:0;border-top:2px dashed rgba(236,217,164,.45)}
.strap-band::before{top:8px}.strap-band::after{bottom:8px}
.strap-track{display:flex;align-items:center;gap:2rem;width:max-content;animation:marquee 32s linear infinite}
.strap-track span{font-family:var(--f-display);font-size:2.2rem;line-height:1;color:#f4ead0;white-space:nowrap}
.strap-track svg{width:44px;height:44px;padding:8px;border-radius:50%;fill:#4e3d20;background:radial-gradient(circle at 35% 28%,var(--brass-l),var(--brass) 55%,var(--brass-d));flex-shrink:0;box-shadow:0 2px 4px rgba(0,0,0,.5)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================
   LORE — linen banner + relics
   ========================================================== */
.lore{position:relative;padding:clamp(90px,12vw,160px) 0;overflow:hidden;background:linear-gradient(180deg,#b7bfcb,#cfd5dd 40%,#aab3c1)}
.lore-bg{position:absolute;inset:-20% 0;background:url(../img/moor-square.webp) center/cover;opacity:.45;filter:blur(2px)}
.lore::after{content:"";position:absolute;inset:0;background:url(../img/fog.webp) 0 100%/1600px 600px repeat-x;opacity:.6;animation:fogDrift 80s linear infinite;pointer-events:none}
.lore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.banner-cloth{position:relative;filter:drop-shadow(0 30px 40px rgba(21,22,16,.35));transform-origin:50% 0}
.bc-rod{height:18px;margin:0 -18px;border-radius:9px;background:linear-gradient(180deg,var(--brass-l),var(--brass) 45%,var(--brass-d));position:relative;z-index:2;box-shadow:0 4px 8px rgba(0,0,0,.3)}
.bc-rod::before,.bc-rod::after{content:"";position:absolute;top:-7px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff5d6,var(--brass) 55%,var(--brass-d))}
.bc-rod::before{left:-14px}.bc-rod::after{right:-14px}
.bc-body{position:relative;padding:clamp(2rem,4vw,3.2rem) clamp(1.6rem,3.5vw,2.8rem) clamp(5rem,8vw,6.5rem);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.08)),url(../img/linen.webp) 0 0/320px;color:var(--iron);
  clip-path:polygon(0 0,100% 0,100% 88%,92% 91%,84% 88%,75% 94%,66% 90%,58% 96%,50% 92%,42% 97%,34% 91%,25% 95%,16% 89%,8% 93%,0 89%);
  animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
.bc-body::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 60px),linear-gradient(90deg,rgba(0,0,0,.12),transparent 20%,transparent 80%,rgba(0,0,0,.12));pointer-events:none}
@keyframes sway{0%,100%{transform:skewX(0) rotate(0)}50%{transform:skewX(-1.2deg) rotate(.4deg)}}
.bc-body .h-display{font-size:clamp(2.6rem,5vw,4.2rem);margin-bottom:1.2rem}
.lore-line{font-size:clamp(1.05rem,1.5vw,1.2rem);margin:0 0 .7rem;font-weight:600;color:#34332e;position:relative}
.lore-line.strong{font-family:var(--f-display);font-size:clamp(1.6rem,2.4vw,2rem);font-weight:400;color:var(--leather);margin-top:1.1rem;line-height:1.05}
.bc-fleur{position:absolute;right:1.6rem;bottom:3.6rem;width:70px;height:70px;fill:var(--brass-d);opacity:.28}

.relics{position:relative;height:clamp(420px,46vw,560px);perspective:1400px}
.relic{position:absolute;margin:0;width:58%;aspect-ratio:1;padding:10px;border-radius:6px;transform-style:preserve-3d;
  background:linear-gradient(145deg,#e9ecef,#9ea0a3 45%,#5e6268);box-shadow:0 24px 50px rgba(21,22,16,.45),inset 0 0 0 1px rgba(255,255,255,.4);transition:transform .25s ease-out}
.relic img{width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.relic figcaption{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) translateZ(30px);white-space:nowrap;padding:.35rem 1rem;border-radius:4px;font-family:var(--f-display);font-size:1.35rem;line-height:1;color:#f4ead0;background:linear-gradient(180deg,#7a4f30,var(--leather-d));box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 0 0 1px rgba(236,217,164,.4)}
.r1{left:0;top:4%;--rot:-8deg;z-index:1}
.r1 figcaption,.r2 figcaption{top:-16px;bottom:auto}
.r2{right:0;top:0;--rot:7deg;z-index:2}
.r3{left:22%;bottom:0;--rot:-2deg;z-index:3}
.relic{transform:rotate(var(--rot))}

/* ==========================================================
   HOW TO BUY — steel plates
   ========================================================== */
.buy{position:relative;padding:clamp(90px,12vw,150px) 0;background:
  radial-gradient(ellipse at 50% 0%,rgba(171,180,195,.14),transparent 60%),
  linear-gradient(180deg,#1c1e16,#151610 60%,#12130e)}
.buy::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1c1e16 0%,rgba(21,22,16,.6) 40%,#12130e 100%),url(../img/scene-far.webp) center 60%/cover;opacity:.9;pointer-events:none}
.buy .wrap{z-index:2}
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);perspective:1200px}
.plate{position:relative;padding:3.2rem 1.5rem 2rem;min-height:250px;border-radius:8px;transform-style:preserve-3d;
  background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(0,0,0,.35)),url(../img/steel.webp) center/cover;
  color:var(--iron);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 -6px 14px rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.5);transition:transform .25s ease-out}
.plate::after{content:"";position:absolute;inset:26px;border:1px solid rgba(38,37,35,.25);border-radius:4px;pointer-events:none}
.numeral{display:block;font-family:var(--f-display);font-size:4.2rem;line-height:.9;color:#2a2a27;text-shadow:0 1px 0 rgba(255,255,255,.7),0 -1px 0 rgba(0,0,0,.35);margin-bottom:.6rem}
.plate h3{font-family:var(--f-display);font-weight:400;font-size:1.9rem;line-height:1;margin:0 0 .5rem}
.plate p{margin:0;font-weight:700;color:#3b3a36}
.buy-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:clamp(2.2rem,5vw,3.5rem)}

/* ==========================================================
   CHART — the watchtower (dusk)
   ========================================================== */
.chart{position:relative;padding:clamp(90px,12vw,150px) 0;overflow:hidden;background:#1a2030}
.chart-bg{position:absolute;inset:-25% 0;background:url(../img/scene-dusk.webp) center 40%/cover;opacity:.55}
.chart::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#12130e 0%,rgba(18,19,14,.3) 25%,rgba(18,19,14,.35) 75%,#b4bcc8 100%)}
.chart-frame{position:relative;padding:22px;border-radius:12px;background:linear-gradient(145deg,#e9ecef,#9ea0a3 40%,#4e5257);box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.4)}
.chart-frame::before{content:"";position:absolute;inset:10px;border-radius:8px;background:
  radial-gradient(circle,transparent 3px,#3d4046 3.5px,#7d8288 5px,transparent 5.5px) 0 0/10px 10px;opacity:.9}
.chart-inner{position:relative;z-index:2;height:min(640px,70vh);min-height:420px;border-radius:6px;overflow:hidden;background:#0f100c;box-shadow:inset 0 0 0 2px rgba(0,0,0,.6)}
.chart-inner iframe{width:100%;height:100%;border:0;display:block}
.chart-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem;
  background:radial-gradient(ellipse at 50% 60%,rgba(184,154,94,.18),transparent 60%),url(../img/scene-dusk.webp) center/cover;color:var(--mist)}
.chart-wait::before{content:"";position:absolute;inset:0;background:rgba(15,16,12,.55)}
.chart-wait>*{position:relative}
.cw-fleur{width:90px;height:90px;fill:var(--brass);filter:drop-shadow(0 0 18px rgba(236,217,164,.55));animation:flame 2.4s ease-in-out infinite}
@keyframes flame{50%{filter:drop-shadow(0 0 34px rgba(236,217,164,.85));transform:scale(1.05)}}
.chart-wait p{margin:0;font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.4rem)}
.chart-actions{display:flex;justify-content:center;margin-top:1.8rem;position:relative;z-index:2}
.btn-steel{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.8rem;border-radius:8px;font-family:var(--f-display);font-size:1.6rem;line-height:1;color:var(--iron);position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%,rgba(0,0,0,.3)),url(../img/steel.webp) center/cover;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.45);transition:transform .3s var(--ease)}
.btn-steel svg{width:24px;height:24px;fill:var(--iron)}
.btn-steel:hover{transform:translateY(-3px)}

/* ==========================================================
   ROADMAP — standing stones rising from the fog
   ========================================================== */
.roadmap{position:relative;padding:clamp(90px,12vw,150px) 0 clamp(120px,14vw,180px);overflow:hidden;background:#b4bcc8}
.rm-bg{position:absolute;inset:-25% 0;background:url(../img/moor-wide.webp) center 45%/cover}
.roadmap::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#b4bcc8 0%,rgba(180,188,200,.25) 22%,rgba(180,188,200,.1) 60%,rgba(21,22,16,.7) 100%)}
.rm-fog{position:absolute;left:0;right:0;bottom:0;height:600px;z-index:3;pointer-events:none}
.fs-4{bottom:-120px;opacity:.85;animation:fogDrift 55s linear infinite}
.roadmap .sec-head .h-display{text-shadow:0 2px 30px rgba(217,222,229,.8)}
.stones{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,30px);align-items:end;z-index:2}
.stone{position:relative;filter:drop-shadow(0 26px 30px rgba(21,22,16,.45))}
.stone-body{position:relative;padding:3rem 1.4rem 2.4rem;color:#f0ede4;min-height:340px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(21,22,16,.55)),url(../img/stone.webp) center/cover;
  clip-path:polygon(14% 4%,38% 0,70% 2%,90% 8%,97% 30%,100% 70%,96% 100%,4% 100%,0 64%,4% 24%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.4)}
.s1 .stone-body{min-height:300px}.s2 .stone-body{min-height:350px;clip-path:polygon(8% 6%,30% 0,64% 3%,92% 0,100% 26%,97% 66%,100% 100%,0 100%,3% 60%,0 20%)}
.s3 .stone-body{min-height:400px}.s4 .stone-body{min-height:450px;clip-path:polygon(20% 3%,50% 0,80% 4%,95% 16%,100% 55%,97% 100%,3% 100%,0 55%,5% 16%)}
.st-num{font-family:var(--f-display);font-size:3.6rem;line-height:.9;color:#ecd9a4;text-shadow:0 2px 8px rgba(0,0,0,.7);margin-bottom:auto}
.stone h3{font-family:var(--f-display);font-weight:400;font-size:2.1rem;line-height:1;margin:1.4rem 0 .6rem;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.stone ul{list-style:none;margin:0;padding:0;font-weight:700;font-size:.98rem}
.stone li{position:relative;padding-left:1.1rem;margin:.25rem 0;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.stone li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;transform:rotate(45deg);background:var(--brass-l)}

/* ==========================================================
   RALLY POINTS — big gate buttons
   ========================================================== */
.rally{position:relative;padding:clamp(90px,12vw,150px) 0;background:
  radial-gradient(ellipse at 50% 100%,rgba(184,154,94,.12),transparent 60%),linear-gradient(180deg,#171913,#101109)}
.gates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.gate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-height:190px;padding:1.6rem 1rem 2.4rem;text-align:center;
  clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);
  background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,0) 45%,rgba(0,0,0,.35)),url(../img/steel.webp) center/cover;color:var(--iron);
  transition:transform .35s var(--ease),filter .35s;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.gate::before{content:"";position:absolute;inset:7px;clip-path:inherit;border:0;background:linear-gradient(160deg,#2a2b27,#151610);z-index:0;transition:background .35s}
.gate>*{position:relative;z-index:1}
.g-ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,var(--brass-l),var(--brass) 55%,var(--brass-d));box-shadow:inset 0 -3px 5px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.5)}
.g-ico svg{width:26px;height:26px;fill:#3a2a12;grid-area:1/1}
.g-num{font-family:var(--f-display);font-size:2.8rem;line-height:.9;color:var(--brass)}
.g-t{font-family:var(--f-display);font-size:1.75rem;line-height:1;color:var(--mist)}
.g-s{font-family:var(--f-sc);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pewter);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gate:hover{transform:translateY(-8px)}
.gate:hover::before{background:linear-gradient(160deg,#3d4626,#1c1e16)}
.gate-main::before{background:radial-gradient(120% 140% at 30% 0%,#8a5a36,var(--leather) 45%,var(--leather-d))}
.gate-main:hover::before{background:radial-gradient(120% 140% at 30% 0%,#9c6840,#7a4f30 45%,var(--leather-d))}
.gate-main .g-s{color:var(--brass-l)}

/* ---------- footer ---------- */
.site-footer{position:relative;background:#0d0e09;padding:3rem 0 2rem;border-top:1px solid rgba(184,154,94,.3)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:.9rem}
.foot-brand img{width:64px;height:64px;object-fit:contain}
.foot-brand strong{display:block;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1}
.foot-brand span{font-family:var(--f-mono);color:var(--brass);font-weight:700}
.foot-social{display:flex;gap:.8rem}
.disclaimer{width:min(1200px,100% - 40px);margin:2rem auto 0;text-align:center;font-size:.78rem;color:#7b7d74}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:950;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:.8rem 1.4rem;border-radius:8px;font-weight:800;
  background:linear-gradient(180deg,#7a4f30,var(--leather-d));color:#f4ead0;box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(236,217,164,.45);transition:.35s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ==========================================================
   REVEALS
   ========================================================== */
[data-reveal]{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal="up"]{opacity:0;transform:translateY(40px)}
.js [data-reveal="drop"]{opacity:0;transform:translateY(-60px) rotate(-2deg)}
.js [data-reveal="relic"]{opacity:0;transform:translateY(80px) rotate(calc(var(--rot) * 3)) scale(.85)}
.js [data-reveal="forge"]{opacity:0;transform:translateY(50px) rotateX(35deg) scale(.92);filter:brightness(2.2) blur(4px)}
.js [data-reveal="rise"]{opacity:0;transform:translateY(140px);filter:blur(6px) brightness(1.6)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
.js [data-reveal="relic"].in{transform:rotate(var(--rot))}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1024px){
  .gates{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stone-body,.s1 .stone-body,.s2 .stone-body,.s3 .stone-body,.s4 .stone-body{min-height:300px}
}
@media (max-width:860px){
  .main-nav{display:none}
  .nav-toggle{display:flex}
  .head-social>.shield-btn{--s:38px}
  .sword-progress{display:none}
  .lore-grid{grid-template-columns:minmax(0,1fr)}
  .relics{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:22px}
  .relic{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto;padding:6px}
  .relic figcaption{font-size:1rem;padding:.3rem .6rem;bottom:-14px}
  .gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gate-main{grid-column:1/-1}
}
@media (max-width:600px){
  :root{--hdr:64px}
  .brand-name{font-size:1.4rem}
  .brand-coin{width:40px;height:40px}
  .hero{min-height:640px}
  .giant{flex-direction:column;gap:0;font-size:clamp(5.2rem,31vw,9rem);line-height:.8}
  .knight-tilt{width:min(108vw,58vh);margin-bottom:22vh}
  .hero-ui{left:16px;right:16px;bottom:22px;max-width:none;align-items:stretch}
  .ticker-seal{align-self:flex-start}
  .hero-tag{display:none}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .btn-pump{justify-content:center}
  .ca-strap{width:100%}
  .cs-value{flex:1;max-width:none}
  .scroll-cue{display:none}
  .plates,.stones{grid-template-columns:minmax(0,1fr)}
  .plate{min-height:0}
  .stone-body,.s1 .stone-body,.s2 .stone-body,.s3 .stone-body,.s4 .stone-body{min-height:250px}
  .gate{min-height:170px}
  .g-t{font-size:1.5rem}
  .foot-inner{flex-direction:column;text-align:center}
  .strap-track span{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}