/* =========================================================
   VIBE ISLAND — $VIBE
   palette sampled from the source photo
   ========================================================= */
:root{
  --abyss:#021a38;
  --deep:#04264f;
  --ocean:#0a4a82;
  --lagoon:#12b9c0;
  --aqua:#5ee6dc;
  --foam:#d9fbf6;
  --sand:#f3e2bf;
  --sand-2:#e7cc98;
  --palm:#2f5a17;
  --leaf:#86c23a;
  --lime:#b9ec4a;
  --sun:#ffb65c;
  --coral:#ff7a59;
  --white:#f4fbff;
  --ink:#04264f;
  --f-display:'Lilita One', 'Arial Black', Impact, sans-serif;
  --f-body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-lg:26px;
  --shadow-ink:0 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--f-body);
  background:var(--abyss);
  color:var(--white);
  overflow-x:hidden;
  line-height:1.5;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.container{width:min(1200px,100% - 40px);margin-inline:auto;position:relative;z-index:2}

/* ---------- text helpers ---------- */
.grad-aqua{background:linear-gradient(100deg,var(--aqua),#a8fff0 45%,var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-sun{background:linear-gradient(100deg,var(--sun),#ffd88a 50%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.buy .grad-sun{background:none;color:var(--coral);-webkit-text-fill-color:var(--coral)}

.sec-head{margin-bottom:56px}
.sec-head.center{text-align:center}
.sec-head h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(46px,7.4vw,108px);line-height:.92;letter-spacing:.01em;
  text-shadow:0 5px 0 rgba(2,26,56,.55);
}
.sec-head h2.ink{color:var(--ink);text-shadow:0 5px 0 rgba(255,255,255,.35)}
.sec-tag{
  display:inline-block;margin-bottom:18px;padding:8px 16px;border-radius:99px;
  font-family:var(--f-mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(94,230,220,.14);color:var(--aqua);border:1.5px solid rgba(94,230,220,.45);
}
.sec-tag.dark{background:var(--ink);color:var(--aqua);border-color:var(--ink)}
.sec-tag.sun{background:rgba(255,182,92,.16);color:var(--sun);border-color:rgba(255,182,92,.55)}

/* =========================================================
   PRELOADER
   ========================================================= */
#preloader{position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--deep)}
.pl-photo,.pl-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-photo img{object-position:50% 50%;transform:scale(1.18);transition:transform 2.4s cubic-bezier(.2,.7,.1,1),filter 1.2s}
#preloader.done .pl-photo img{transform:scale(1.02)}
.pl-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(2,26,56,.25),rgba(2,26,56,.78) 75%);transition:opacity 1s}
.pl-cloud{position:absolute;width:auto;pointer-events:none;filter:drop-shadow(0 20px 30px rgba(0,20,50,.35));transition:transform 1.6s cubic-bezier(.7,0,.2,1),opacity 1.6s}
.pl-cloud.c1{height:95vh;left:-6vw;top:-18vh;transform:scale(1.6)}
.pl-cloud.c2{height:95vh;right:-6vw;bottom:-18vh;transform:scale(1.6)}
.pl-cloud.c3{height:80vh;right:-8vw;top:-20vh;transform:scale(1.5)}
.pl-cloud.c4{height:80vh;left:-8vw;bottom:-20vh;transform:scale(1.5)}
.pl-cloud{animation:plDrift 6s ease-in-out infinite alternate}
@keyframes plDrift{to{translate:0 -14px}}
#preloader.done .pl-cloud.c1,#preloader.done .pl-cloud.c4{transform:translateX(-80vw) scale(2.2);opacity:0}
#preloader.done .pl-cloud.c2,#preloader.done .pl-cloud.c3{transform:translateX(80vw) scale(2.2);opacity:0}
#preloader.done .pl-shade{opacity:0}
#preloader.gone{opacity:0;visibility:hidden;transition:opacity .8s .2s,visibility 0s 1s}
.pl-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:20px;transition:opacity .6s,transform .8s}
#preloader.done .pl-center{opacity:0;transform:scale(.9) translateY(-20px)}
.pl-island{width:clamp(110px,16vw,170px);filter:drop-shadow(0 0 24px rgba(94,230,220,.7));animation:plFloat 2.6s ease-in-out infinite}
@keyframes plFloat{50%{transform:translateY(-10px) rotate(-4deg)}}
.pl-title{font-family:var(--f-display);font-size:clamp(46px,9vw,110px);line-height:.9;color:var(--white);text-shadow:0 6px 0 var(--ink),0 0 40px rgba(94,230,220,.5);letter-spacing:.02em}
.pl-route{display:flex;align-items:center;gap:14px;width:min(460px,86vw);font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.12em}
.pl-from{color:var(--sand)}.pl-to{color:var(--aqua)}
.pl-track{position:relative;flex:1;height:4px;border-radius:9px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 8px,transparent 8px 14px)}
.pl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:linear-gradient(90deg,var(--sand),var(--aqua));box-shadow:0 0 14px var(--aqua)}
.pl-plane{position:absolute;top:50%;left:0;width:24px;height:24px;fill:var(--white);transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(0 0 6px var(--aqua))}
.pl-pct{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,251,255,.75)}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:500;padding:16px 0;transition:padding .35s,background .35s,box-shadow .35s}
.site-header::before{content:"";position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(2,26,56,.7),rgba(2,26,56,0));transition:opacity .35s}
.site-header.scrolled::before{opacity:0}
.site-header.scrolled{padding:10px 0;background:rgba(2,26,56,.9);box-shadow:0 10px 30px rgba(0,10,30,.35)}
.header-inner{width:min(1320px,100% - 32px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:24px;letter-spacing:.02em;white-space:nowrap}
.logo img{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(94,230,220,.5));transition:transform .5s}
.logo:hover img{transform:rotate(-12deg) scale(1.08)}
.logo b{font-weight:400;color:var(--aqua);margin-left:4px}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav>a{font-weight:800;font-size:14px;letter-spacing:.04em;padding:10px 14px;border-radius:99px;transition:background .25s,color .25s}
.main-nav>a:hover{background:rgba(94,230,220,.16);color:var(--aqua)}
.nav-socials{display:flex;gap:10px;margin-left:10px}

/* sticker-style social buttons */
.soc-btn{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:14px;
  font-family:var(--f-display);font-size:18px;letter-spacing:.04em;color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .18s,box-shadow .18s;
}
.soc-btn svg{width:20px;height:20px;fill:currentColor}
.soc-btn.tg{background:linear-gradient(160deg,#9ff5ee,var(--aqua))}
.soc-btn.x{background:linear-gradient(160deg,#fff4dc,var(--sand))}
.soc-btn:hover{transform:translateY(-3px) rotate(-3deg);box-shadow:0 7px 0 var(--ink)}
.soc-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.soc-btn.big{height:58px;padding:0 24px 0 18px;font-size:22px;border-radius:18px}
.soc-btn.big svg{width:26px;height:26px}

.nav-toggle{display:none;position:relative;z-index:510;width:48px;height:48px;border-radius:14px;background:var(--sand);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:3px;border-radius:3px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:210vh;height:210svh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-scene{position:absolute;inset:0;will-change:transform}
.hero-photo,.hero-photo img{position:absolute;inset:0;width:100%;height:100%}
.hero-photo img{object-fit:cover;object-position:24% 50%;transform-origin:74% 50%;will-change:transform}
.hero-sheen{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 60% at 74% 50%,rgba(94,230,220,.18),transparent 70%);
  mix-blend-mode:screen;animation:sheen 6s ease-in-out infinite alternate}
@keyframes sheen{to{opacity:.35}}
.hero-grad{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,26,56,.82) 0%,rgba(2,26,56,.55) 30%,rgba(2,26,56,0) 52%),
    linear-gradient(0deg,rgba(2,26,56,.7) 0%,rgba(2,26,56,0) 26%);}
.h-cloud{position:absolute;pointer-events:none;will-change:transform;filter:drop-shadow(0 18px 24px rgba(0,20,50,.3))}
.hc1{height:58vh;left:-4vw;top:-10vh}
.hc2{height:48vh;left:-3vw;bottom:-8vh}
.hc3{height:56vh;right:-4vw;top:-9vh}
.hc4{height:52vh;right:-5vw;bottom:-9vh}

.hero-content{position:absolute;z-index:3;left:max(24px,6vw);top:50%;transform:translateY(-46%);width:min(640px,48vw);will-change:transform,opacity}
.coords{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--foam);opacity:.85;margin-bottom:14px}
.coords span{color:var(--lime)}
.hero-title{font-family:var(--f-display);font-weight:400;line-height:.84;letter-spacing:.01em;font-size:clamp(70px,8.8vw,150px)}
.ht-line{display:block;color:var(--white);
  text-shadow:0 3px 0 var(--aqua),0 8px 0 var(--ink),0 14px 30px rgba(0,10,30,.5)}
.ht-2{background:linear-gradient(180deg,#eaffb0 0%,var(--lime) 40%,var(--leaf) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 var(--palm)) drop-shadow(0 7px 0 var(--ink)) drop-shadow(0 14px 22px rgba(0,10,30,.5))}
.ticker-sticker{
  display:inline-block;margin:18px 0 30px;padding:8px 22px 10px;border-radius:16px;
  font-family:var(--f-display);font-size:clamp(30px,3.4vw,46px);color:var(--ink);
  background:linear-gradient(160deg,#fff7e2,var(--sand) 60%,var(--sand-2));
  border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);transform:rotate(-5deg);
  animation:stickerBob 3.4s ease-in-out infinite;
}
@keyframes stickerBob{50%{transform:rotate(-2deg) translateY(-5px)}}

.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px}

/* pump.fun chunky button */
.btn-pump{display:inline-block;border-radius:22px;background:var(--ink);padding-bottom:8px;transition:padding .15s,transform .15s;position:relative}
.btn-pump::after{content:"";position:absolute;inset:-10px;border-radius:30px;background:radial-gradient(closest-side,rgba(185,236,74,.55),transparent);z-index:-1;animation:pumpGlow 2.4s ease-in-out infinite}
@keyframes pumpGlow{50%{opacity:.35;transform:scale(1.06)}}
.bp-face{display:flex;align-items:center;gap:14px;padding:16px 26px 16px 18px;border-radius:20px;border:3px solid var(--ink);
  background:linear-gradient(170deg,#eaffb0 0%,var(--lime) 40%,#5fc93a 100%);color:var(--ink);transition:transform .15s}
.btn-pump .pill{width:42px;height:42px;flex:none;animation:pillSpin 5s ease-in-out infinite}
@keyframes pillSpin{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-25deg)}90%{transform:rotate(15deg)}}
.bp-text{display:flex;flex-direction:column;font-family:var(--f-display);font-size:clamp(30px,3vw,40px);line-height:.95}
.bp-text small{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.bp-peace{font-size:32px;margin-left:6px;display:inline-block;animation:wave 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wave{50%{transform:rotate(18deg)}}
.btn-pump:hover .bp-face{transform:translateY(-3px)}
.btn-pump:active .bp-face{transform:translateY(6px)}
.btn-pump.small .bp-face{padding:12px 22px}
.btn-pump.small .bp-text{font-size:30px}

/* boarding-pass CA */
.boarding-pass{display:flex;width:min(520px,100%);cursor:pointer;filter:drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 18px 24px rgba(0,10,30,.35));transition:transform .2s;user-select:none;outline:none}
.boarding-pass:hover{transform:translateY(-3px) rotate(-.6deg)}
.boarding-pass:active{transform:translateY(3px)}
.boarding-pass:focus-visible{outline:3px dashed var(--aqua);outline-offset:6px}
.bp-main{flex:1;min-width:0;padding:14px 18px;color:var(--ink);
  background:
    radial-gradient(circle at 100% 0,transparent 11px,var(--sand) 12px) top right/100% 51% no-repeat,
    radial-gradient(circle at 100% 100%,transparent 11px,var(--sand) 12px) bottom right/100% 51% no-repeat;
  border-radius:16px 0 0 16px}
.bp-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.75;margin-bottom:6px;border-bottom:1.5px dashed rgba(4,38,79,.35);padding-bottom:6px}
.bp-ca{display:flex;align-items:center;gap:10px;min-width:0}
.bp-ca em{font-style:normal;font-family:var(--f-display);font-size:20px;background:var(--ink);color:var(--sand);padding:0 8px;border-radius:7px;flex:none}
.bp-ca code{font-family:var(--f-mono);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bp-stub{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink);
  background:
    radial-gradient(circle at 0 0,transparent 11px,var(--aqua) 12px) top left/100% 51% no-repeat,
    radial-gradient(circle at 0 100%,transparent 11px,var(--aqua) 12px) bottom left/100% 51% no-repeat;
  border-radius:0 16px 16px 0;border-left:2.5px dashed rgba(4,38,79,.5)}
.bp-stub svg{width:24px;height:24px}
.stub-lbl{font-family:var(--f-display);font-size:18px;letter-spacing:.06em}
.boarding-pass.copied .bp-stub{background:
    radial-gradient(circle at 0 0,transparent 11px,var(--lime) 12px) top left/100% 51% no-repeat,
    radial-gradient(circle at 0 100%,transparent 11px,var(--lime) 12px) bottom left/100% 51% no-repeat}
.boarding-pass.mini{width:min(460px,100%)}
.boarding-pass.mini .bp-stub{width:80px}

.scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--foam)}
.scroll-cue i{width:26px;height:42px;border-radius:14px;border:2px solid var(--foam);position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:4px;background:var(--aqua);transform:translateX(-50%);animation:cue 1.6s infinite}
@keyframes cue{to{transform:translate(-50%,14px);opacity:0}}

/* =========================================================
   WAVE MARQUEE
   ========================================================= */
.wave-band{position:relative;z-index:5;background:var(--aqua);margin-top:-1px}
.wave-top{position:absolute;left:0;bottom:100%;width:100%;height:40px;fill:var(--aqua)}
.marquee{overflow:hidden;padding:14px 0 16px;border-bottom:3px solid var(--ink)}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee-track span{font-family:var(--f-display);font-size:clamp(26px,3vw,40px);color:var(--ink);padding:0 28px;white-space:nowrap}
.marquee-track span:nth-child(even){color:var(--white);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   BACKGROUNDS
   ========================================================= */
.ocean-bg{position:relative;background-color:var(--deep);
  background-image:
    radial-gradient(ellipse at 80% 0%,rgba(94,230,220,.16),transparent 55%),
    radial-gradient(ellipse at 0% 100%,rgba(18,185,192,.14),transparent 50%),
    url(../img/ocean-tile.webp);
  background-size:auto,auto,640px;background-attachment:scroll}
.ocean-bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,26,56,.55),rgba(2,26,56,0) 20%,rgba(2,26,56,0) 80%,rgba(2,26,56,.55))}
.lagoon-bg{position:relative;background-color:var(--lagoon);
  background-image:
    linear-gradient(180deg,rgba(94,230,220,.25),rgba(18,185,192,0) 40%,rgba(10,74,130,.35)),
    url(../img/lagoon-tile.webp);
  background-size:auto,720px;}
.lagoon-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(../img/lagoon-tile.webp) 200px 120px/980px;mix-blend-mode:soft-light;opacity:.4;animation:caustic 18s linear infinite alternate}
@keyframes caustic{to{background-position:520px 380px}}

/* =========================================================
   LORE
   ========================================================= */
.lore{padding:150px 0 170px;overflow:hidden}
.float-island{position:absolute;right:-60px;top:70px;width:clamp(200px,24vw,340px);z-index:1;opacity:.9;perspective:800px}
.float-island img{filter:drop-shadow(0 30px 40px rgba(0,10,30,.6)) drop-shadow(0 0 30px rgba(94,230,220,.35));animation:islandFloat 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes islandFloat{50%{transform:translateY(-18px) rotate(6deg)}}
.postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;perspective:1200px}
.postcard{background:var(--sand);color:var(--ink);border-radius:18px;padding:12px;
  border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink),0 30px 50px rgba(0,10,30,.45);
  transform:rotate(var(--r,0deg));transform-style:preserve-3d;transition:box-shadow .3s}
.pc-photo{border-radius:10px;overflow:hidden;aspect-ratio:4/3;border:2.5px solid var(--ink)}
.pc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.postcard:hover .pc-photo img{transform:scale(1.08)}
.pc-body{position:relative;padding:18px 8px 10px;transform:translateZ(30px)}
.pc-body h3{font-family:var(--f-display);font-weight:400;font-size:36px;line-height:1}
.pc-body p{margin-top:8px;font-weight:700;font-size:16px;opacity:.85;max-width:88%}
.pc-stamp{position:absolute;right:6px;top:-40px;width:66px;height:78px;background:var(--white);padding:6px;
  border:2px dashed var(--ink);transform:rotate(8deg);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pc-stamp img{width:100%;height:100%;object-fit:contain;background:linear-gradient(160deg,var(--aqua),var(--ocean))}
.pc-post{display:inline-block;margin-top:14px;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.18em;padding:4px 10px;border:2px solid var(--coral);color:var(--coral);border-radius:99px;transform:rotate(-3deg)}

/* =========================================================
   HOW TO BUY
   ========================================================= */
.buy{padding:170px 0 170px;color:var(--ink);overflow:hidden}
.wave-divider{position:absolute;left:0;width:100%;height:70px;z-index:3}
.wave-divider.top{top:-1px;fill:var(--deep)}
.wave-divider.bottom{bottom:-1px;fill:var(--deep)}
.buy-head{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:10px}
.buy .sec-head{margin-bottom:40px}

/* 3D coin */
.coin3d-wrap{position:relative;width:200px;height:230px;perspective:900px;flex:none;margin-right:40px}
.coin3d{position:absolute;left:0;top:0;width:200px;height:200px;transform-style:preserve-3d;animation:coinSpin 6s linear infinite}
@keyframes coinSpin{from{transform:rotateY(0) rotateX(8deg)}to{transform:rotateY(360deg) rotateX(8deg)}}
.coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;border:6px solid var(--ink);box-shadow:inset 0 0 0 6px var(--sand)}
.coin-face.front{transform:translateZ(9px)}
.coin-face.front img{width:100%;height:100%;object-fit:cover}
.coin-face.back{transform:rotateY(180deg) translateZ(9px);background:radial-gradient(circle at 35% 30%,#fff5d8,var(--sand) 45%,var(--sand-2));display:flex;align-items:center;justify-content:center}
.coin-face.back span{font-family:var(--f-display);font-size:52px;color:var(--ink)}
.coin-edge{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d}
.coin-edge::before,.coin-edge::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink)}
.coin-edge::before{transform:translateZ(3px)}
.coin-edge::after{transform:translateZ(-3px)}
.coin-shadow{position:absolute;left:30px;right:30px;bottom:0;height:16px;border-radius:50%;background:rgba(4,38,79,.35);filter:blur(6px);animation:coinShadow 3s ease-in-out infinite}
@keyframes coinShadow{50%{transform:scaleX(.8);opacity:.6}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1000px}
.step{position:relative;background:var(--white);border:3px solid var(--ink);border-radius:20px;padding:24px 22px 18px;box-shadow:0 7px 0 var(--ink);transform-style:preserve-3d;overflow:hidden}
.step::before{content:"";position:absolute;left:-12px;top:62px;width:22px;height:22px;border-radius:50%;background:var(--lagoon);border:3px solid var(--ink)}
.step::after{content:"";position:absolute;right:-12px;top:62px;width:22px;height:22px;border-radius:50%;background:var(--lagoon);border:3px solid var(--ink)}
.step-gate{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.18em;background:var(--ink);color:var(--aqua);padding:5px 10px;border-radius:8px;margin-bottom:28px}
.step h3{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1;margin-bottom:8px;border-top:2px dashed rgba(4,38,79,.3);padding-top:14px}
.step p{font-weight:700;font-size:15px;opacity:.8;min-height:48px}
.step-barcode{margin-top:18px;height:30px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px);opacity:.85;border-radius:3px}
.step:nth-child(4){background:linear-gradient(160deg,#f3ffd6,var(--lime))}
.buy-cta{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:56px;flex-wrap:wrap}
.btn-ghost{height:64px;padding:0 28px;border-radius:20px;border:3px solid var(--ink);background:var(--sand);box-shadow:0 6px 0 var(--ink);font-family:var(--f-display);font-size:26px;color:var(--ink);transition:transform .15s,box-shadow .15s}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.btn-ghost:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost.copied{background:var(--lime)}

/* =========================================================
   CHART
   ========================================================= */
.chart{padding:130px 0 150px}
.chart-frame{border-radius:var(--r-lg);border:3px solid var(--aqua);background:rgba(2,26,56,.7);overflow:hidden;box-shadow:0 0 0 8px rgba(94,230,220,.12),0 40px 80px rgba(0,10,30,.55)}
.chart-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(90deg,var(--aqua),#9ff5ee);color:var(--ink);font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.12em}
.chart-bar .dot{width:12px;height:12px;border-radius:50%;background:var(--ink);opacity:.8}
.chart-bar .dot:nth-child(2){opacity:.55}.chart-bar .dot:nth-child(3){opacity:.3}
.chart-lbl{margin-left:10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-open{background:var(--ink);color:var(--aqua);padding:7px 12px;border-radius:9px;white-space:nowrap;transition:transform .2s}
.chart-open:hover{transform:translateY(-2px)}
.chart-body{position:relative;height:min(620px,70vh);min-height:420px}
.chart-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chart-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;
  background:radial-gradient(ellipse at center,rgba(18,185,192,.22),transparent 60%)}
.chart-placeholder p{font-size:18px;color:var(--foam)}
.chart-placeholder b{font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--aqua);display:inline-block;margin-top:6px}
.tide-rings{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.tide-rings img{width:96px;position:relative;z-index:2;animation:plFloat 3s ease-in-out infinite}
.tide-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--aqua);animation:ring 3s ease-out infinite;opacity:0}
.tide-rings i:nth-child(2){animation-delay:1s}.tide-rings i:nth-child(3){animation-delay:2s}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* =========================================================
   ROADMAP
   ========================================================= */
.roadmap{position:relative;padding:140px 0 160px;overflow:hidden}
.rm-bg{position:absolute;inset:-10% 0;z-index:0}
.rm-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;will-change:transform}
.rm-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,var(--deep) 0%,rgba(4,38,79,.7) 12%,rgba(20,20,50,.5) 50%,rgba(4,38,79,.65) 86%,var(--abyss) 100%)}
.route{position:relative;max-width:1000px;margin:0 auto;padding:20px 0}
.route-svg{position:absolute;left:50%;top:0;height:100%;width:260px;transform:translateX(-50%);overflow:visible;pointer-events:none}
.route-base{fill:none;stroke:rgba(255,255,255,.35);stroke-width:3;stroke-dasharray:2 12;stroke-linecap:round;vector-effect:non-scaling-stroke}
.route-draw{fill:none;stroke:var(--sun);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 8px rgba(255,182,92,.8))}
.route-plane{position:absolute;left:0;top:0;width:40px;height:40px;fill:var(--white);z-index:4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 10px var(--sun));pointer-events:none;will-change:transform}
.stop{position:relative;display:flex;align-items:center;min-height:250px;perspective:1000px}
.stop.left{justify-content:flex-start}
.stop.right{justify-content:flex-end}
.stop-pin{position:absolute;left:50%;top:50%;width:74px;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(94,230,220,.6))}
.stop-pin::before{content:"";position:absolute;left:50%;top:50%;width:110px;height:110px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(94,230,220,.45),transparent 70%);z-index:-1;animation:ring 3s ease-out infinite}
.stop-card{width:min(400px,calc(50% - 70px));background:rgba(255,247,226,.96);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:24px 26px;box-shadow:0 8px 0 var(--ink),0 30px 50px rgba(0,0,0,.4);transform-style:preserve-3d}
.stop-num{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--coral)}
.stop-card h3{font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1;margin:6px 0 12px}
.stop-card ul{list-style:none;display:grid;gap:6px}
.stop-card li{font-weight:700;padding-left:26px;position:relative}
.stop-card li::before{content:"✌";position:absolute;left:0;top:0;color:var(--lagoon)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;padding:150px 0 50px;overflow:hidden}
.ft-bg{position:absolute;inset:0;z-index:0}
.ft-bg img{width:100%;height:100%;object-fit:cover}
.ft-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--abyss) 0%,rgba(2,26,56,.55) 30%,rgba(2,26,56,.7) 70%,var(--abyss) 100%)}
.departures{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.tag-btn{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:120px;padding:20px 24px 20px 84px;border-radius:20px;
  border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink),0 20px 40px rgba(0,0,0,.35);color:var(--ink);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;transform:rotate(var(--rot,0deg))}
.tag-btn::before{content:"";position:absolute;left:18px;top:50%;width:14px;height:14px;border-radius:50%;background:var(--abyss);border:3px solid var(--ink);transform:translateY(-50%)}
.tag-btn i{position:absolute;left:40px;top:50%;transform:translateY(-50%);font-style:normal;font-size:30px;width:36px;text-align:center}
.tag-btn b{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1}
.tag-btn small{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:4px}
.tag-btn:hover{transform:translateY(-6px) rotate(0deg) scale(1.03);box-shadow:0 14px 0 var(--ink),0 30px 50px rgba(0,0,0,.45)}
.tag-btn:active{transform:translateY(4px);box-shadow:0 3px 0 var(--ink)}
.t-home{background:linear-gradient(160deg,#fff7e2,var(--sand));--rot:-2deg}
.t-lore{background:linear-gradient(160deg,#ffe0cf,#ffb694);--rot:1.5deg}
.t-buy{background:linear-gradient(160deg,#eaffb0,var(--lime));--rot:-1deg}
.t-chart{background:linear-gradient(160deg,#c9fff8,var(--aqua));--rot:2deg}
.t-road{background:linear-gradient(160deg,#ffe8b8,var(--sun));--rot:-1.5deg}
.t-pump{background:linear-gradient(160deg,#dfffd0,#62d651);--rot:1deg}
.t-dex{background:linear-gradient(160deg,#e6f3ff,#9cc9ff);--rot:-2deg}
.t-tg{background:linear-gradient(160deg,#d0f4ff,#5fc6f0);--rot:1.5deg}
.t-x{background:linear-gradient(160deg,#ffffff,#d9e2ea);--rot:-1deg}
.ft-bottom{margin-top:80px;display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}
.ft-socials{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.ft-logo{width:90px;filter:drop-shadow(0 0 20px rgba(94,230,220,.5));animation:plFloat 4s ease-in-out infinite}
.disclaimer{max-width:620px;font-size:12px;opacity:.6}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:900;transform:translate(-50%,140%);padding:14px 24px;border-radius:16px;background:var(--lime);color:var(--ink);font-family:var(--f-display);font-size:22px;border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.toast.show{transform:translate(-50%,0)}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal[data-reveal="up"]{transform:translateY(60px)}
.reveal[data-reveal="zoom"]{transform:scale(.85)}
.reveal[data-reveal="left"]{transform:translateX(-80px)}
.reveal[data-reveal="right"]{transform:translateX(80px)}
.reveal[data-reveal="card"]{transform:translateY(80px) rotateX(35deg) rotate(var(--r,0deg));transform-origin:50% 100%}
.reveal.in{opacity:1;transform:none}
.reveal.in[data-reveal="card"]{transform:rotate(var(--r,0deg))}
.no-js .reveal{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .postcards{gap:22px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pc-body h3{font-size:30px}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .main-nav{position:fixed;inset:0;z-index:505;flex-direction:column;justify-content:center;gap:10px;
    background:#04264f;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
  .nav-open .main-nav{opacity:1;visibility:visible;transition:opacity .35s}
  .main-nav>a{font-family:var(--f-display);font-weight:400;font-size:40px;padding:6px 20px}
  .nav-socials{margin:24px 0 0}
  .logo{position:relative;z-index:510}
  .postcards{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .buy-head{flex-direction:column;align-items:flex-start}
  .coin3d-wrap{align-self:center;margin:0 0 30px}
  .departures{grid-template-columns:repeat(2,1fr)}
  /* roadmap stacks */
  .route-svg{left:34px;transform:none;width:60px}
  .route-plane{display:none}
  .stop,.stop.left,.stop.right{justify-content:flex-end;min-height:0;padding:22px 0}
  .stop-pin{left:34px;width:54px}
  .stop-card{width:calc(100% - 82px)}
  .stop-card h3{font-size:32px}
}
@media (max-aspect-ratio:1/1){
  .hero-photo img{object-position:50% 50%;transform-origin:50% 52%}
  .hero-grad{background:
    linear-gradient(180deg,rgba(2,26,56,.85) 0%,rgba(2,26,56,.25) 30%,rgba(2,26,56,0) 45%,rgba(2,26,56,0) 55%,rgba(2,26,56,.85) 82%,rgba(2,26,56,.95) 100%)}
  .hero-content{left:0;right:0;top:0;bottom:0;transform:none;width:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:94px 18px 76px}
  .hero-title{font-size:clamp(64px,19vw,120px)}
  .ht-line{display:inline}
  .ticker-sticker{margin:12px 0 0}
  .hero-cta{margin-top:auto;align-items:center;width:100%}
  .coords{margin-bottom:8px}
  .hc1{height:36vh}.hc2{height:30vh}.hc3{height:34vh}.hc4{height:30vh}
}
@media (max-width:560px){
  .container{width:calc(100% - 32px)}
  .sec-head{margin-bottom:40px}
  .steps{grid-template-columns:1fr}
  .departures{grid-template-columns:1fr;gap:16px}
  .tag-btn{min-height:88px}
  .tag-btn b{font-size:26px}
  .logo{font-size:20px}
  .logo img{width:34px;height:34px}
  .bp-face{padding:12px 20px 12px 14px}
  .btn-pump .pill{width:34px;height:34px}
  .bp-stub{width:74px}
  .bp-ca code{font-size:12px}
  .lore,.buy{padding:120px 0}
  .float-island{width:160px;right:-50px;top:40px;opacity:.55}
  .scroll-cue{display:none}
  .ft-socials .soc-btn.big{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}