:root{
  --void:#05061a; --navy:#0a1038; --blue:#2ea8ff; --ice:#9fe4ff;
  --ink:#eaf4ff; --dim:#8ea6c8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-width:1180px; background:var(--void); color:var(--ink);
  font-family:Inter,system-ui,sans-serif; overflow-x:hidden;
  background-image:radial-gradient(1200px 700px at 50% -5%, #141c52 0%, transparent 60%);
}
img{display:block; max-width:100%; height:auto}
h1,h2{margin:0}
.hand{font-family:Bungee,Impact,sans-serif; font-weight:400; letter-spacing:.01em}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:760px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:70px 20px 90px; overflow:hidden; text-align:center}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.78; filter:blur(1px) saturate(1.15); z-index:0; object-position:center 18%}
.hero::after{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(820px 460px at 50% 42%, rgba(5,6,26,.52), rgba(5,6,26,.9) 80%)}
.hero-inner{position:relative; z-index:2; max-width:900px}
.kicker{font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--ice);
  opacity:.85; margin-bottom:18px}
h1{font-family:Bungee,Impact,sans-serif; font-size:62px; line-height:.98; letter-spacing:.01em;
  text-shadow:0 0 28px rgba(46,168,255,.6), 0 6px 0 #071030}
h1 .big{font-size:92px; color:var(--ice); display:inline-block;
  text-shadow:0 0 34px rgba(46,168,255,.85), 0 7px 0 #071030}
.tick{font-family:Bungee,Impact,sans-serif; font-size:30px; color:var(--blue);
  margin-top:16px; letter-spacing:.06em}

/* ---------- CA ---------- */
.ca-box{margin:26px auto 0; max-width:620px; background:rgba(8,13,44,.86);
  border:2px solid rgba(46,168,255,.55); border-radius:14px; padding:14px 16px;
  box-shadow:0 0 34px rgba(46,168,255,.22) inset, 0 10px 30px rgba(0,0,0,.5)}
.ca-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  margin-bottom:8px}
.blink{color:var(--blue); animation:bl 1.1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.ca-row{display:flex; align-items:center; gap:12px}
.ca-row code{flex:1; min-width:0; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:15px; color:var(--ice); word-break:break-all; text-align:left; line-height:1.4}
.copy{flex:none; cursor:pointer; font-family:Bungee,Impact,sans-serif; font-size:13px;
  letter-spacing:.06em; color:#04122b; background:linear-gradient(#bfe9ff,#52b8ff);
  border:2px solid #d8f2ff; border-radius:9px; padding:9px 15px;
  box-shadow:0 3px 0 #1a63a8; transition:transform .08s, box-shadow .08s}
.copy:active{transform:translateY(3px); box-shadow:0 0 0 #1a63a8}

/* ---------- BUTTONS ---------- */
.btns{display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap}
.btn{display:inline-block; text-decoration:none; font-family:Bungee,Impact,sans-serif;
  font-size:16px; letter-spacing:.05em; padding:14px 26px; border-radius:11px;
  transition:transform .1s, box-shadow .1s}
.btn:active{transform:translateY(3px)}
.buy{color:#04122b; background:linear-gradient(#9fe4ff,#2ea8ff);
  border:2px solid #d8f2ff; box-shadow:0 5px 0 #16568f, 0 0 30px rgba(46,168,255,.45)}
.buy:active{box-shadow:0 2px 0 #16568f}
.x{color:var(--ice); background:rgba(10,16,56,.9); border:2px solid rgba(159,228,255,.5);
  box-shadow:0 5px 0 #0a1a3d}
.x:active{box-shadow:0 2px 0 #0a1a3d}
.big-btn{font-size:22px; padding:18px 42px; margin-top:28px}
.scroll-hint{position:relative; z-index:2; margin-top:44px; font-size:13px; color:var(--dim);
  letter-spacing:.12em; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px)}}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden; background:var(--blue); color:#04122b; padding:11px 0;
  border-top:3px solid #d8f2ff; border-bottom:3px solid #d8f2ff}
.marquee-track{display:flex; gap:38px; white-space:nowrap; width:max-content;
  font-family:Bungee,Impact,sans-serif; font-size:17px; letter-spacing:.05em;
  animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- BIG SHOTS ---------- */
.shot{position:relative; margin:0; line-height:0; background:#01030f}
.shot img{width:100%; max-height:92vh; object-fit:cover; object-position:center 28%}
.shot.tall{display:flex; justify-content:center; align-items:center;
  background:#02030e url("../img/texture-crystal.jpg") center/cover; padding:0}
.shot.tall img{width:auto; height:min(88vh,920px); max-height:none; max-width:100%;
  object-fit:contain; object-position:center}
.shot.tall::before{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(60% 70% at 50% 45%, transparent 35%, rgba(2,3,14,.82) 100%)}
.shot.tall img{position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
                     linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
             linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
.shot::after{content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(transparent 55%, rgba(5,6,26,.75))}
.cap{position:absolute; z-index:4; line-height:1.08; font-family:Bungee,Impact,sans-serif;
  font-size:40px; color:#fff; text-shadow:0 0 22px rgba(0,0,0,.9), 0 4px 0 #0a1a3d;
  background:rgba(5,8,30,.55); border:3px solid var(--ice); border-radius:12px;
  padding:14px 20px; max-width:560px}
.cap span{display:block; font-size:19px; color:var(--ice); margin-top:7px}
.cap u{text-decoration-color:var(--blue); text-decoration-thickness:5px}
.cap-bl{bottom:26%; left:5%} .cap-tr{top:14%; right:5%; text-align:right}
.cap-br{bottom:9%; right:6%; text-align:right}
.cap-low{left:50%; bottom:3.5%; transform:translateX(-50%); text-align:center; font-size:44px}
.cap-low.tilt-l{transform:translateX(-50%) rotate(-2deg); rotate:none}
.shot img.top-crop{object-position:center 12%}
.tilt-l{rotate:-2.4deg} .tilt-r{rotate:2deg}

/* ---------- GEMS ---------- */
.gem{position:absolute; width:88px; pointer-events:none; opacity:.85;
  filter:drop-shadow(0 0 16px rgba(46,168,255,.7)); animation:float 6s ease-in-out infinite}
.gem.g2{width:62px; animation-delay:-2.1s; animation-duration:7.4s}
.gem.g3{width:48px; animation-delay:-4s; animation-duration:8.2s}
@keyframes float{50%{transform:translateY(-16px) rotate(6deg)}}

/* ---------- TEXT BLOCKS ---------- */
.talk{position:relative; max-width:760px; margin:0 auto; padding:72px 24px; text-align:center}
.lead{font-family:Bungee,Impact,sans-serif; font-size:27px; color:var(--ice);
  line-height:1.3; margin:0 0 18px}
.talk p{font-size:18px; line-height:1.65; color:#cfe0f5; margin:0 0 14px}
.talk b{color:var(--blue)}
.small{font-size:13px !important; color:var(--dim) !important; letter-spacing:.04em;
  margin-top:22px !important}

/* ---------- FACES ---------- */
.faces{position:relative; max-width:1060px; margin:0 auto; padding:30px 24px 76px; text-align:center}
.faces h2{font-size:34px; color:var(--ice); margin-bottom:30px}
.face-row{display:flex; gap:22px; justify-content:center}
.face-row figure{margin:0; flex:1 1 0; min-width:0}
.face-row img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 22%;
  border:4px solid var(--ice); border-radius:16px;
  box-shadow:0 0 30px rgba(46,168,255,.3); transition:transform .18s}
.face-row figure:nth-child(1) img{rotate:-1.8deg}
.face-row figure:nth-child(3) img{rotate:1.8deg}
.face-row figure:hover img{transform:scale(1.04) rotate(0deg)}
.face-row figcaption{margin-top:12px; font-family:Bungee,Impact,sans-serif;
  font-size:16px; color:var(--blue)}

/* ---------- HOW TO BUY ---------- */
.buy-steps{position:relative; max-width:720px; margin:0 auto; padding:76px 24px; text-align:center}
.buy-steps h2{font-size:34px; color:var(--ice); margin-bottom:28px}
.buy-steps ol{text-align:left; margin:0; padding:0 0 0 26px}
.buy-steps li{font-size:18px; line-height:1.55; color:#cfe0f5; margin-bottom:16px;
  padding-left:8px}
.buy-steps li::marker{font-family:Bungee,Impact,sans-serif; color:var(--blue)}
.buy-steps b{color:#fff}

/* ---------- FOOTER ---------- */
footer{position:relative; text-align:center; padding:70px 24px 54px; border-top:3px solid rgba(46,168,255,.35);
  background:linear-gradient(rgba(10,16,56,.5), rgba(5,6,26,1))}
.foot-mark{width:130px; height:130px; object-fit:cover; object-position:center 20%;
  border-radius:50%; border:4px solid var(--ice); margin:0 auto 18px;
  box-shadow:0 0 34px rgba(46,168,255,.45)}
.small-tick{font-size:24px; margin-bottom:6px}
.foot-ca{margin-top:20px}
.disclaimer{max-width:620px; margin:38px auto 0; font-size:12px; line-height:1.7;
  color:var(--dim)}
.sig{margin-top:22px; font-size:12px; color:#56688a; letter-spacing:.05em}

/* ---------- TOAST ---------- */
.toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px);
  background:var(--ice); color:#04122b; font-family:Bungee,Impact,sans-serif; font-size:15px;
  padding:12px 24px; border-radius:11px; opacity:0; visibility:hidden;
  transition:opacity .2s, transform .2s, visibility .2s; z-index:99;
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
.toast.on{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

/* ---------- REVEAL ---------- */
[data-rv]{opacity:0; transform:translateY(26px); transition:opacity .6s, transform .6s}
[data-rv].in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  [data-rv]{opacity:1; transform:none}
}