:root{
  --bg:#03040c; --ink:#eaf6ff; --cyan:#3fe0ff; --blue:#2a6bff; --violet:#8a5cff;
  --gold:#ffd23f; --red:#ff3b3b; --mute:#93a6c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Space Mono",ui-monospace,monospace;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- meme wall background ---------- */
.wall{position:fixed;inset:-10vh -4vw;display:flex;gap:14px;z-index:0;transform:rotate(-6deg) scale(1.15);pointer-events:none}
.wall .col{flex:1;overflow:hidden}
.wall .track{display:flex;flex-direction:column;gap:14px;animation:up var(--d) linear infinite}
.wall img{width:100%;aspect-ratio:4/5;object-fit:cover;border:4px solid #fff;border-radius:3px;filter:saturate(1.05) brightness(.62)}
.wall .col:nth-child(even) img{aspect-ratio:1/1}
@keyframes up{to{transform:translateY(-50%)}}
.wall-shade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(3,4,12,.45),rgba(3,4,12,.15) 75%)}
main,header,footer,.band{position:relative;z-index:2}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;display:flex;align-items:center;gap:16px;padding:10px 18px;
  background:rgba(3,4,12,.82);backdrop-filter:blur(8px);border-bottom:2px solid rgba(63,224,255,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Anton,Impact,sans-serif;font-size:22px;letter-spacing:.04em;color:var(--cyan)}
.brand img{width:36px;height:36px;border-radius:50%;border:2px solid var(--cyan);object-fit:cover}
.bar nav{display:flex;gap:18px;margin-left:12px}
.bar nav a{text-decoration:none;color:var(--mute);font-size:14px}
.bar nav a:hover{color:var(--ink)}
.bar-cta{margin-left:auto;display:flex;gap:8px}

.btn{display:inline-block;cursor:pointer;border:0;text-decoration:none;font-family:Anton,Impact,sans-serif;letter-spacing:.05em;
  background:var(--gold);color:#120c00;padding:10px 18px;border-radius:6px;font-size:16px;box-shadow:0 4px 0 #a37d00;transition:transform .1s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #a37d00}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.btn.big{font-size:22px;padding:14px 26px}
.btn.sm{font-size:14px;padding:8px 14px;box-shadow:0 3px 0 #a37d00}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100vh - 60px);display:flex;align-items:center;overflow:hidden;border-bottom:4px solid #fff}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,12,.92) 0%,rgba(3,4,12,.6) 45%,rgba(3,4,12,0) 75%)}
.hero-txt{position:relative;z-index:1;padding:40px 5vw;max-width:760px}
.kicker{margin:0 0 10px;color:var(--cyan);text-transform:uppercase;letter-spacing:.2em;font-size:13px}
h1{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;line-height:.9;text-transform:uppercase}
h1 span{display:block}
h1 span:first-child{font-size:clamp(34px,6vw,72px);color:#fff}
h1 span:last-child{font-size:clamp(38px,8.4vw,112px);
  background:linear-gradient(180deg,#fff 0%,#9ff0ff 40%,#2a8bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(63,224,255,.55)) drop-shadow(4px 5px 0 #0a1a4a)}
.tick{display:inline-block;margin:16px 0 6px;background:var(--gold);color:#120c00;font-family:Anton,Impact,sans-serif;font-size:30px;padding:2px 14px;transform:rotate(-2deg);box-shadow:5px 5px 0 #000}
.slogan{font-size:20px;margin:14px 0 22px;color:#fff}
.dots::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ca-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.ca-row code{background:rgba(0,0,0,.6);border:1px dashed var(--cyan);padding:9px 12px;border-radius:6px;font-size:13px;word-break:break-all;max-width:100%}
.ca-row.center{justify-content:center;margin:30px 0 22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- multilingual band ---------- */
.band{background:var(--cyan);color:#001425;overflow:hidden;border-bottom:4px solid #fff;transform:rotate(-1.2deg);margin:-8px -10px 0;box-shadow:0 6px 0 #000}
.band-in{display:flex;gap:42px;width:max-content;padding:12px 0;animation:slide 26s linear infinite;font-family:Anton,Impact,"Noto Sans JP","Malgun Gothic",sans-serif;font-size:26px;white-space:nowrap}
.band-in span::after{content:"✦";margin-left:42px;color:#001a66}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- lore ---------- */
.lore{padding:90px 18px 40px;display:flex;justify-content:center}
.lore-card{max-width:680px;background:#fff;color:#0b0b14;padding:34px 36px;border-radius:4px;transform:rotate(1deg);box-shadow:10px 10px 0 var(--blue);position:relative}
.lore-card::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;background:rgba(255,230,120,.85);transform:translateX(-50%) rotate(-3deg)}
.lore-card h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:40px;margin:0 0 14px;text-transform:uppercase}
.lore-card p{font-size:16px;line-height:1.6;margin:0 0 12px}
.lore-big{font-family:Anton,Impact,sans-serif;font-size:30px !important;color:var(--blue);margin-top:18px !important;text-transform:uppercase}

/* ---------- meme grid ---------- */
.sec-title{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(40px,7vw,84px);text-align:center;margin:0 0 34px;
  color:#fff;text-shadow:0 0 22px rgba(63,224,255,.5),4px 4px 0 var(--blue)}
.sec-title small{display:block;font-family:"Space Mono",monospace;font-size:14px;text-transform:none;text-shadow:none;color:var(--mute);margin-top:6px}
.memes{padding:60px 18px 80px}
.grid{columns:4 280px;column-gap:22px;max-width:1400px;margin:0 auto}
.meme{break-inside:avoid;margin:0 0 26px;background:#fff;padding:10px 10px 0;border-radius:3px;box-shadow:6px 8px 0 rgba(0,0,0,.6);
  transform:rotate(var(--r)) translateY(30px);opacity:0;transition:transform .5s,opacity .5s}
.meme.in{opacity:1;transform:rotate(var(--r))}
.meme:hover{transform:rotate(0) scale(1.03);z-index:3;position:relative}
.pic{position:relative;overflow:hidden}
.pic img{width:100%}
.mt{position:absolute;left:4%;right:4%;text-align:center;font-family:Impact,Anton,"Malgun Gothic","Yu Gothic","Microsoft YaHei",sans-serif;
  color:#fff;font-size:clamp(20px,2.1vw,30px);line-height:1.02;text-transform:uppercase;
  -webkit-text-stroke:1.6px #000;paint-order:stroke fill;text-shadow:2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000}
.mt.top{top:6px}
.mt.bot{bottom:8px}
.meme figcaption{color:#222;font-size:12px;letter-spacing:.12em;padding:9px 2px 10px;font-weight:700}

/* ---------- buy ---------- */
.buy{padding:70px 18px 100px;text-align:center}
.steps{list-style:none;padding:0;margin:0 auto;max-width:1100px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
.steps li{background:rgba(5,10,30,.85);border:2px solid var(--cyan);border-radius:8px;padding:22px;opacity:0;transform:translateY(20px);transition:.5s}
.steps li.in{opacity:1;transform:none}
.steps b{display:inline-grid;place-items:center;width:42px;height:42px;background:var(--gold);color:#000;font-family:Anton,Impact,sans-serif;font-size:24px;border-radius:50%}
.steps h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;text-transform:uppercase;margin:12px 0 6px}
.steps p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}

/* ---------- footer ---------- */
footer{text-align:center;padding:50px 18px 60px;background:rgba(3,4,12,.95);border-top:4px solid #fff}
.foot-big{font-family:Anton,Impact,sans-serif;font-size:clamp(60px,14vw,180px);margin:0;line-height:1;
  background:linear-gradient(180deg,#fff,#2a8bff);-webkit-background-clip:text;background-clip:text;color:transparent}
footer p{color:var(--mute);font-size:12px;max-width:620px;margin:10px auto}
footer .btn{margin-top:14px}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .bar nav{display:none}
  .wall .col:nth-child(n+4){display:none}
  .steps{grid-template-columns:1fr 1fr}
  .hero{align-items:flex-end}
  .hero-img{object-position:93% 0%}
  .hero::after{background:linear-gradient(0deg,rgba(3,4,12,.95) 0%,rgba(3,4,12,.6) 55%,rgba(3,4,12,.1) 100%)}
  .hero-txt{padding:30px 16px 36px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .lore-card{padding:26px 20px}
  .btn.big{font-size:18px;padding:12px 18px}
  .bar{padding:8px 12px}
  .brand span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .wall .track,.band-in{animation:none}
}