/* =========================================================
   BABY SUPER INU — navy / super-yellow / cape-red
   comic-book blocks: thick outlines, hard offset shadows
   ========================================================= */

:root{
  --navy:       #070d24;
  --navy-2:     #0c1535;
  --panel:      #111c45;
  --ink:        #f4f6ff;
  --ink-soft:   #b5bedf;
  --ink-mut:    #7c87b3;
  --yellow:     #ffc21a;
  --yellow-2:   #ffd84d;
  --blue:       #1f56d6;
  --blue-deep:  #10307e;
  --red:        #e0262c;
  --live:       #3ddc84;
  --line:       #26336b;
  --line-lt:    #34468c;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-ui:      'Space Grotesk', 'Arial', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --container: 1120px;
  --shadow: 4px 4px 0 var(--blue-deep);
  --shadow-sm: 2px 2px 0 var(--blue-deep);
  --card-shadow: 6px 6px 0 #02051a;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }

.band{ background:var(--navy); }
.band:nth-of-type(odd){ background:var(--navy-2); }

.eyebrow{
  display:inline-block;
  font-family:var(--font-ui);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); background:var(--yellow); font-weight:700;
  padding:3px 10px; border-radius:6px;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; color:var(--ink); }
h2{
  font-size:clamp(28px,4.2vw,44px); letter-spacing:-.005em; text-transform:uppercase; line-height:1.05;
  color:var(--yellow);
  text-shadow:2px 2px 0 var(--blue), 4px 4px 0 var(--blue-deep), 5px 5px 0 #02051a;
}
p{ margin:0; }

.section{ padding:64px 0; }
.section-head{ max-width:640px; margin:0 auto 32px; text-align:center; }
.section-head h2{ margin-top:14px; }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:15px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  border-radius:14px;
  font-family:var(--font-ui);
  font-size:14.5px;
  font-weight:700;
  border:2.5px solid #02051a;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn:hover{ transform:translate(2px,2px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translate(4px,4px); box-shadow:none; }
.btn-accent{ background:var(--yellow); color:#0a0f24; }
.btn-accent:hover{ background:var(--yellow-2); }
.btn-ghost{ background:var(--navy-2); border-color:var(--ink); color:var(--ink); box-shadow:4px 4px 0 var(--red); }
.btn-ghost:hover{ box-shadow:2px 2px 0 var(--red); }
.btn-ghost:active{ box-shadow:none; }

/* ---------- nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(7,13,36,.92), rgba(7,13,36,.7));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:3px solid var(--red);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:36px; height:36px; border-radius:50%; border:2.5px solid var(--yellow); object-fit:cover; }
.brand-text{ font-family:var(--font-display); font-size:19px; letter-spacing:.01em; }
.brand-text b{ color:var(--yellow); font-weight:400; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--yellow); }
.nav-cta .btn{ padding:9px 16px; font-size:13.5px; }

@media (max-width:860px){ .nav-links{ display:none; } }
@media (max-width:480px){ .nav{ padding:12px 16px; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:56px 0 64px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-20px; z-index:-2;
  background-image:var(--hero-img);
  background-size:cover; background-position:center 70%;
  filter:blur(14px) saturate(1.1);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,13,36,.55) 0%, rgba(7,13,36,.8) 60%, var(--navy) 97%);
}
.hero-banner{
  max-width:1000px; margin:0 auto;
  border:3px solid #02051a; border-radius:22px; overflow:hidden;
  box-shadow:8px 8px 0 var(--red), 0 20px 60px rgba(0,0,0,.5);
}
.hero-banner img{ width:100%; aspect-ratio:3/1; object-fit:cover; }
.hero-sub{ max-width:620px; margin:30px auto 0; color:var(--ink-soft); font-size:16.5px; }
.hero-sub b{ color:var(--yellow); font-weight:700; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

.ca-row{
  margin:30px auto 0; max-width:540px;
  display:flex; align-items:center; gap:8px;
  border-radius:14px; border:2.5px solid #02051a; box-shadow:var(--shadow);
  padding:9px 8px 9px 16px;
  background:var(--navy-2);
}
.ca-row span{
  font-family:var(--font-mono);
  font-size:11.5px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; text-align:left;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:pulse 1.8s infinite; flex-shrink:0; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.55);} 70%{ box-shadow:0 0 0 9px rgba(61,220,132,0);} 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0);} }
.copy-btn{
  background:var(--yellow); border:2px solid #02051a; color:#0a0f24;
  font-family:var(--font-ui); font-weight:700; font-size:11px; padding:7px 14px; border-radius:10px;
  flex-shrink:0;
}
.copy-btn.copied{ background:var(--live); }

@media (max-width:600px){
  .hero{ padding:28px 0 48px; }
  .hero-banner{ border-radius:14px; box-shadow:5px 5px 0 var(--red); }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
}
@media (max-width:480px){
  .ca-row{ padding:8px 6px 8px 14px; gap:6px; }
  .ca-row span{ font-size:9.5px; }
  .copy-btn{ font-size:9.5px; padding:6px 10px; }
}

/* ---------- hero file card ---------- */
.hero-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  max-width:900px; margin:0 auto;
  border:3px solid #02051a; border-radius:22px; overflow:hidden;
  background:var(--panel); box-shadow:8px 8px 0 var(--blue);
}
@media (max-width:760px){ .hero-card{ grid-template-columns:1fr; } }
.hero-card-img{ background:var(--blue-deep); }
.hero-card-img img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; }
.hero-card-body{ padding:30px 32px; display:flex; flex-direction:column; gap:18px; }
@media (max-width:480px){ .hero-card-body{ padding:22px 20px; } }
.card-tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--red); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.hero-card-body h3{ font-size:40px; color:var(--yellow); line-height:1; margin-top:-8px; text-shadow:3px 3px 0 var(--blue-deep); }

.power-list{ display:grid; gap:0; }
.power{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1.5px dashed var(--line-lt); font-size:14px; }
.power .k{ font-family:var(--font-mono); font-size:12px; color:var(--ink-mut); text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.power .v{ font-weight:600; text-align:right; }

.stat-bars{ display:grid; gap:10px; }
.bar{ display:grid; grid-template-columns:96px 1fr; align-items:center; gap:12px; }
.bar span{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; }
.bar i{
  display:block; height:12px; border-radius:6px; border:2px solid #02051a;
  background:linear-gradient(90deg, var(--yellow) var(--w), var(--navy) var(--w));
}

/* ---------- holder rewards ---------- */
.rewards-panel{
  max-width:900px; margin:0 auto;
  border:3px solid #02051a; border-radius:22px;
  background:var(--panel); padding:32px;
  box-shadow:8px 8px 0 var(--red);
}
@media (max-width:480px){ .rewards-panel{ padding:20px; } }
.rewards-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px){ .rewards-grid{ grid-template-columns:1fr; } }
.rewards-stat{ border:2px dashed var(--line-lt); border-radius:14px; padding:22px 24px; background:var(--navy-2); }
.rewards-stat .label{ font-family:var(--font-ui); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mut); font-weight:700; }
.rewards-stat .value{ font-family:var(--font-display); font-size:clamp(28px,4vw,38px); color:var(--yellow); margin-top:6px; line-height:1.15; }
.rewards-stat .sub{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-top:6px; }
.rewards-meta{ margin-top:20px; padding-top:16px; border-top:1.5px dashed var(--line-lt); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-mut); text-align:center; }
.rewards-meta a{ color:var(--yellow); text-decoration:underline; text-underline-offset:2px; }

/* ---------- how to buy ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{ border:2.5px solid #02051a; border-radius:16px; padding:22px 20px; background:var(--panel); box-shadow:4px 4px 0 var(--blue); }
.step .n{
  width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:17px; border:2px solid #02051a;
}
.step h3{ font-family:var(--font-ui); font-size:16px; margin-top:14px; font-weight:700; }
.step p{ margin-top:8px; color:var(--ink-soft); font-size:13.5px; }

.links-box{ margin-top:22px; border:2.5px solid var(--line-lt); border-radius:16px; padding:24px 28px; background:var(--navy); }
@media (max-width:480px){ .links-box{ padding:20px; } }
.links-box h3{ font-family:var(--font-ui); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; }
.links-rows{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px 32px; }
@media (max-width:600px){ .links-rows{ grid-template-columns:1fr; } }
.links-rows div{ display:flex; justify-content:space-between; gap:12px; border-bottom:1.5px dashed var(--line); padding-bottom:8px; font-family:var(--font-mono); font-size:12px; }
.links-rows .k{ color:var(--ink-mut); }
.links-rows .v{ color:var(--ink); text-align:right; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.links-rows a.v{ color:var(--yellow); }

/* ---------- footer ---------- */
footer{ padding:36px 0 26px; border-top:3px solid var(--red); background:var(--navy); }
.footer-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.social-row{ display:flex; gap:12px; }
.social-btn{
  width:42px; height:42px; border-radius:12px; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; background:var(--navy-2);
  box-shadow:3px 3px 0 var(--red);
  transition:transform .12s ease, box-shadow .12s ease;
}
.social-btn:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--red); }
.social-btn svg{ width:17px; height:17px; }

.disclaimer{
  margin-top:20px; padding-top:16px; border-top:1.5px dashed var(--line);
  font-size:11.5px; color:var(--ink-mut); line-height:1.7; text-align:center;
}
.disclaimer b{ color:var(--ink-soft); }
.copyright{ text-align:center; margin-top:10px; font-family:var(--font-ui); font-size:12px; color:var(--ink-mut); }

@media (prefers-reduced-motion: reduce){
  .live-dot{ animation:none !important; }
  .btn, .social-btn{ transition:none; }
}