/* =========================================================
   PIXEL — pixel-art memecoin landing
   ========================================================= */
:root{
  --bg:      #0a0512;
  --bg-2:    #140a24;
  --panel:   #180d2b;
  --panel-2: #1f1138;
  --purple:      #7c3aed;
  --purple-lt:   #a855f7;
  --purple-br:   #c084fc;
  --purple-glow: #b06bff;
  --yellow:   #ffcf3a;
  --yellow-d: #e0a100;
  --yellow-l: #ffe89a;
  --green:  #4ade80;
  --g-blue:   #4285F4;
  --g-red:    #EA4335;
  --g-yellow: #FBBC05;
  --g-green:  #34A853;
  --text:  #f3ecff;
  --muted: #b9a6d9;
  --line:  #6d28d9;

  --pix: 6px; /* pixel corner size */
  --head-h: 74px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--head-h); }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 78% -5%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(168,85,247,.14), transparent 55%),
    linear-gradient(180deg, #0c0618 0%, #0a0512 40%, #0a0512 100%);
  color:var(--text);
  font-family:'VT323', monospace;
  font-size:20px;
  line-height:1.35;
  overflow-x:hidden;
  min-height:100vh;
}
img{ image-rendering:pixelated; max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Press Start 2P', monospace; margin:0; line-height:1.35; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px; width:100%; }

/* Chinese font swap */
body.lang-zh, body.lang-zh .hero-sub, body.lang-zh p, body.lang-zh li{
  font-family:'Noto Sans SC', sans-serif;
}
body.lang-zh h1,
body.lang-zh h2,
body.lang-zh h3,
body.lang-zh h4,
body.lang-zh .brand-name,
body.lang-zh .nav-links a,
body.lang-zh .btn,
body.lang-zh .reward-label,
body.lang-zh .tk-label,
body.lang-zh .footer-slogan,
body.lang-zh .section-title{
  font-family:'Noto Sans SC', sans-serif;
  font-weight:900;
  letter-spacing:0;
}

/* language visibility */
.lang-en .lang-zh, .lang-zh .lang-en{ display:none; }

/* ---------- background fx ---------- */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 80% 20%, #d9c6ff 50%, transparent),
    radial-gradient(2px 2px at 50% 70%, #fff 50%, transparent),
    radial-gradient(1px 1px at 65% 45%, #b9a6d9 50%, transparent),
    radial-gradient(1px 1px at 35% 80%, #fff 50%, transparent),
    radial-gradient(2px 2px at 90% 65%, #c9b6ff 50%, transparent),
    radial-gradient(1px 1px at 12% 60%, #fff 50%, transparent);
  background-repeat:no-repeat;
  opacity:.55;
  animation:twinkle 4s steps(2) infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.35} 50%{opacity:.7} }
.scanlines{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.35;
}

/* ---------- reusable pixel box ---------- */
.pixel-box{
  position:relative;
  background:
    linear-gradient(180deg, rgba(40,20,70,.92), rgba(20,10,38,.94));
  border:3px solid var(--purple-lt);
  box-shadow:
    0 0 0 3px #0b0616,
    inset 0 0 0 2px rgba(124,58,237,.35),
    0 0 22px rgba(168,85,247,.35);
  clip-path:polygon(
    0 var(--pix), var(--pix) var(--pix), var(--pix) 0,
    calc(100% - var(--pix)) 0, calc(100% - var(--pix)) var(--pix), 100% var(--pix),
    100% calc(100% - var(--pix)), calc(100% - var(--pix)) calc(100% - var(--pix)), calc(100% - var(--pix)) 100%,
    var(--pix) 100%, var(--pix) calc(100% - var(--pix)), 0 calc(100% - var(--pix))
  );
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:'Press Start 2P', monospace;
  cursor:pointer; border:0; user-select:none;
  transition:transform .08s ease, filter .15s ease;
}
.btn:active{ transform:translateY(2px); }
.btn-buy{
  color:#3a2600;
  background:linear-gradient(180deg, #ffe066 0%, #ffcf3a 45%, #f0a800 100%);
  box-shadow:
    inset 3px 3px 0 var(--yellow-l),
    inset -3px -3px 0 #b97e00,
    0 0 0 3px #6b4600;
  text-shadow:1px 1px 0 rgba(255,255,255,.4);
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  filter:drop-shadow(0 0 10px rgba(255,200,60,.45));
}
.btn-buy:hover{ filter:drop-shadow(0 0 16px rgba(255,200,60,.75)); }
.btn-ghost{
  color:var(--purple-br);
  background:linear-gradient(180deg, rgba(60,30,100,.7), rgba(30,15,55,.8));
  box-shadow:inset 3px 3px 0 rgba(192,132,252,.35), inset -3px -3px 0 rgba(20,10,40,.9), 0 0 0 3px #4c1d95;
  clip-path:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  filter:drop-shadow(0 0 10px rgba(168,85,247,.4));
}
.btn-ghost:hover{ filter:drop-shadow(0 0 16px rgba(168,85,247,.7)); }
.big-btn{ padding:16px 22px; font-size:14px; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(12,6,24,.96), rgba(12,6,24,.86));
  border-bottom:3px solid var(--purple);
  box-shadow:0 3px 0 #0b0616, 0 6px 24px rgba(124,58,237,.35);
  backdrop-filter:blur(4px);
}
.nav-inner{
  max-width:1320px; margin:0 auto; height:var(--head-h);
  display:flex; align-items:center; gap:18px; padding:0 20px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:44px; height:44px; filter:drop-shadow(0 0 8px rgba(168,85,247,.8)); }
.brand-name{ font-family:'Press Start 2P'; font-size:26px; color:#fff; text-shadow:3px 3px 0 var(--purple); letter-spacing:1px; }
.brand-ver{ font-family:'Press Start 2P'; font-size:9px; color:var(--purple-br); align-self:flex-end; margin-bottom:4px; }
.nav-links{ display:flex; gap:22px; margin-left:24px; }
.nav-links a{
  font-family:'Press Start 2P'; font-size:12px; color:var(--muted);
  padding:6px 2px; position:relative; transition:color .15s;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:var(--purple-br); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background:var(--purple-br); box-shadow:0 0 8px var(--purple-br);
}
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.icon-btn{ background:none; border:0; cursor:pointer; padding:2px; line-height:0; filter:drop-shadow(0 0 4px rgba(168,85,247,.5)); }
.icon-btn:hover{ filter:drop-shadow(0 0 8px rgba(168,85,247,.9)); }
.lang-toggle{
  font-family:'Press Start 2P'; font-size:11px; color:var(--purple-br);
  background:linear-gradient(180deg, rgba(60,30,100,.7), rgba(30,15,55,.85));
  border:2px solid var(--purple-lt); padding:8px 10px; cursor:pointer;
  box-shadow:0 0 8px rgba(168,85,247,.4);
}
.lang-toggle:hover{ color:#fff; box-shadow:0 0 14px rgba(168,85,247,.7); }
.nav-buy{ padding:12px 16px; font-size:12px; }
.hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span{ width:24px; height:3px; background:var(--purple-br); display:block; }

/* ---------- HERO ---------- */
.hero{ position:relative; z-index:1; padding:56px 0 0; overflow:hidden; }
.hero-inner{
  max-width:1320px; margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:center;
  min-height:560px;
}
.hero-title .line{ display:block; font-size:40px; color:#fff; text-shadow:3px 3px 0 #2a1150; letter-spacing:1px; }
.hero-title .line.big{ font-size:74px; margin:2px 0; }
.hero-title .purple{ color:var(--purple-lt); text-shadow:4px 4px 0 #3a1170, 0 0 24px rgba(168,85,247,.6); -webkit-text-stroke:2px #4c1d95; }
.hero-title .googl{ letter-spacing:2px; }
.googl .g, .s-googl .g{ font-family:'Press Start 2P'; text-shadow:3px 3px 0 rgba(0,0,0,.5); }
.g-b{ color:var(--g-blue);} .g-r{ color:var(--g-red);} .g-y{ color:var(--g-yellow);} .g-b2{ color:var(--g-blue);} .g-g{ color:var(--g-green);}
.googl .dot{ color:var(--g-green); font-family:'Press Start 2P'; }
.hero-sub{ font-size:24px; color:#d9ccf5; margin:22px 0 26px; max-width:520px; }
.hero-sub .alpha{ color:var(--g-blue); font-weight:bold; }
.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; }

/* hero right */
.hero-right{ position:relative; height:100%; min-height:520px; display:flex; align-items:center; justify-content:center; }
.portal{ position:relative; width:min(430px, 80%); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.portal-glow{
  position:absolute; inset:6%;
  background:radial-gradient(circle at 50% 45%, rgba(180,120,255,.85), rgba(124,58,237,.4) 45%, transparent 70%);
  border-radius:50%;
  filter:blur(6px);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.06); opacity:1 } }
.hero-coin{
  position:relative; z-index:2; width:88%;
  filter:drop-shadow(0 0 26px rgba(168,85,247,.9));
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.portal-base{
  position:absolute; z-index:1; bottom:2%; left:50%; transform:translateX(-50%);
  width:70%; height:26px;
  background:radial-gradient(ellipse at center, rgba(200,140,255,.9), rgba(124,58,237,.2) 70%, transparent);
  filter:blur(3px);
}

.bubble{
  position:absolute; top:2%; right:2%; z-index:4;
  font-family:'Press Start 2P'; font-size:12px; color:#1a1a1a;
  background:#fff; padding:12px 14px; line-height:1.5;
  box-shadow:0 0 0 3px #000, 4px 4px 0 rgba(0,0,0,.4);
  animation:bob 3.4s ease-in-out infinite .3s;
}
.bubble::after{
  content:''; position:absolute; bottom:-12px; left:24px;
  border-width:12px 12px 0 0; border-style:solid; border-color:#fff transparent transparent transparent;
  filter:drop-shadow(2px 2px 0 #000);
}
.rocket{ position:absolute; top:14%; right:-2%; z-index:4; animation:fly 5s ease-in-out infinite; filter:drop-shadow(0 0 8px rgba(255,150,60,.6)); }
@keyframes fly{ 0%{ transform:translate(0,0) rotate(0) } 50%{ transform:translate(-16px,-18px) rotate(-6deg) } 100%{ transform:translate(0,0) rotate(0) } }

.search-tag{
  position:absolute; bottom:6%; right:0; z-index:4;
  display:flex; align-items:center; gap:10px; padding:12px 14px;
}
.search-tag-txt{ display:flex; flex-direction:column; font-family:'Press Start 2P'; font-size:11px; color:var(--purple-br); line-height:1.5; }
.mag{ line-height:0; }

/* hero floating pixels */
.hero-decor{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.px{ position:absolute; width:12px; height:12px; box-shadow:0 0 8px currentColor; }
.px-red{ background:var(--g-red); color:var(--g-red); top:20%; right:44%; }
.px-blue{ background:var(--g-blue); color:var(--g-blue); top:16%; right:20%; }
.px-yellow{ background:var(--g-yellow); color:var(--g-yellow); bottom:24%; right:46%; }
.px-green{ background:var(--g-green); color:var(--g-green); bottom:20%; right:14%; }
.px-b.px-red{ top:60%; right:8%; width:9px; height:9px; }
.px-b.px-blue{ top:40%; right:50%; width:9px; height:9px; }
.px{ animation:floaty 4s ease-in-out infinite; }
.px-blue{ animation-delay:.6s;} .px-yellow{ animation-delay:1.2s;} .px-green{ animation-delay:1.8s;}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.prop{ position:absolute; line-height:0; filter:drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.qblock{ top:52%; right:39%; animation:floaty 4.4s ease-in-out infinite .4s; }
.mushroom{ bottom:6%; left:3%; animation:floaty 5s ease-in-out infinite .8s; }
.twinkle{ position:absolute; color:#fff; font-size:16px; opacity:.8; animation:twk 2.6s steps(2) infinite; }
.t1{ top:10%; left:6%;} .t2{ top:30%; left:40%;} .t3{ top:8%; right:38%;} .t4{ bottom:30%; left:10%; color:#c9b6ff;} .t5{ top:50%; right:6%;}
@keyframes twk{ 0%,100%{ opacity:.2; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }

.mountains{
  position:relative; z-index:1; height:120px; margin-top:26px;
  background:
    linear-gradient(180deg, transparent, rgba(76,29,149,.35)),
    conic-gradient(from 135deg at 12% 100%, transparent 0 45deg, #2a1150 45deg 90deg, transparent 90deg),
    conic-gradient(from 135deg at 32% 100%, transparent 0 45deg, #1f0f3a 45deg 90deg, transparent 90deg),
    conic-gradient(from 135deg at 55% 100%, transparent 0 45deg, #2a1150 45deg 90deg, transparent 90deg),
    conic-gradient(from 135deg at 78% 100%, transparent 0 45deg, #1f0f3a 45deg 90deg, transparent 90deg),
    conic-gradient(from 135deg at 94% 100%, transparent 0 45deg, #2a1150 45deg 90deg, transparent 90deg);
  border-bottom:4px solid #3a1170;
}

/* ---------- FEATURES ---------- */
.features{ position:relative; z-index:1; padding:34px 0; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat{ padding:18px 16px; display:flex; flex-direction:row; align-items:center; gap:14px; }
.feat-ic{ line-height:0; flex:0 0 auto; filter:drop-shadow(0 0 8px rgba(168,85,247,.5)); }
.feat-ic.gen-emoji{ font-size:40px; line-height:1; }
.feat-txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.feat h3{ font-size:14px; color:#fff; line-height:1.3; }
.feat p{ font-size:19px; color:var(--muted); margin:0; }

/* ---------- MID GRID ---------- */
.mid{ position:relative; z-index:1; padding:14px 0 40px; }
.mid-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:16px; align-items:stretch; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:3px solid var(--line); }
.panel-head h2{ font-size:16px; color:var(--purple-br); text-shadow:2px 2px 0 #2a1150; }
.head-ic{ font-size:22px; line-height:0; }
.head-logo{ width:26px; height:26px; }

/* how it works */
.how{ display:flex; flex-direction:column; }
.steps{ display:flex; align-items:stretch; justify-content:space-between; gap:6px; padding:20px 16px; flex:1; }
.step{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
.step-no{
  position:absolute; top:-4px; left:8px; z-index:2;
  font-family:'Press Start 2P'; font-size:11px; color:#fff;
  background:var(--purple); padding:5px 6px; box-shadow:0 0 0 2px #2a1150, 0 0 8px rgba(124,58,237,.6);
}
.step-ic{ height:64px; display:flex; align-items:center; justify-content:center; }
.step-ic img{ width:56px; height:56px; filter:drop-shadow(0 0 8px rgba(168,85,247,.7)); }
.step h4{ font-size:11px; color:#fff; }
.step p{ font-size:17px; color:var(--muted); margin:0; }
.step p.forever{ color:var(--green); }
.arrow{ align-self:center; color:var(--purple-lt); font-size:26px; filter:drop-shadow(0 0 6px var(--purple-lt)); }

/* rewards */
.reward-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:14px 16px; border-bottom:2px dashed rgba(109,40,217,.5); }
.reward-label{ flex:1 0 100%; font-family:'Press Start 2P'; font-size:10px; color:var(--muted); }
.reward-val{ font-family:'Press Start 2P'; font-size:22px; }
.reward-val.small{ font-size:15px; }
.reward-val.green{ color:var(--green); text-shadow:0 0 10px rgba(74,222,128,.5); }
.reward-val.yellow{ color:var(--yellow); text-shadow:0 0 10px rgba(255,207,58,.5); }
.reward-unit{ font-family:'Press Start 2P'; font-size:11px; color:var(--muted); }
.reward-emoji{ margin-left:auto; font-size:22px; }
.reward-foot{ padding:12px 16px; font-family:'Press Start 2P'; font-size:9px; color:var(--green); display:flex; align-items:center; gap:8px; }
.blink{ animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.15} }

/* token info */
.tok-list{ list-style:none; margin:0; padding:6px 8px; }
.tok-list li{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:2px dashed rgba(109,40,217,.4); }
.tok-list li:last-child{ border-bottom:0; }
.tk{ width:22px; text-align:center; font-size:15px; }
.tk-label{ font-family:'Press Start 2P'; font-size:9px; color:var(--muted); flex:1; }
.tk-val{ font-family:'Press Start 2P'; font-size:11px; color:#fff; }
.tk-val.locked{ color:var(--green); }
.contract{ background:none; border:0; cursor:pointer; color:var(--purple-br); display:inline-flex; align-items:center; gap:6px; }
.contract:hover{ color:#fff; }
.copy-ic{ opacity:.8; }
.copied::after{ content:' ✓'; color:var(--green); }

/* ---------- SECTION TITLE ---------- */
.section-title{ text-align:center; font-size:26px; color:#fff; margin:0 0 26px; text-shadow:3px 3px 0 var(--purple); }
.roadmap, .faq, .memes, .buy-cta{ position:relative; z-index:1; padding:46px 0; }

/* roadmap */
.road-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.road{ padding:22px 20px; }
.road-phase{ font-family:'Press Start 2P'; font-size:26px; color:var(--purple-lt); text-shadow:2px 2px 0 #2a1150; }
.road h4{ font-size:16px; color:#fff; margin:10px 0 12px; }
.road ul{ list-style:none; margin:0; padding:0; }
.road li{ font-size:19px; color:var(--muted); padding:5px 0 5px 22px; position:relative; }
.road li::before{ content:'▸'; position:absolute; left:0; color:var(--green); }

/* faq */
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:840px; margin:0 auto; }
.faq-item{ padding:0; }
.faq-item summary{ cursor:pointer; list-style:none; font-family:'Press Start 2P'; font-size:13px; color:#fff; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--purple-br); font-size:20px; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ padding:0 20px 20px; color:var(--muted); font-size:20px; margin:0; }

/* memes */
.meme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.meme-card{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
.meme-card img{ width:100%; height:100%; object-fit:cover; }
.meme-ph{ font-size:64px; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:repeating-linear-gradient(45deg,#1a0f2e 0 10px,#221240 10px 20px); }

/* buy cta */
.buy-inner{ display:flex; align-items:center; gap:30px; padding:32px 34px; }
.buy-coin{ width:150px; height:150px; filter:drop-shadow(0 0 22px rgba(168,85,247,.8)); animation:bob 3.4s ease-in-out infinite; }
.buy-txt h2{ font-size:22px; color:#fff; margin-bottom:12px; }
.buy-txt p{ font-size:21px; color:var(--muted); margin:0 0 20px; max-width:560px; }

/* ---------- FOOTER ---------- */
.footer{ position:relative; z-index:1; border-top:4px solid var(--purple); margin-top:20px; background:linear-gradient(180deg, rgba(20,10,38,.6), rgba(10,5,18,.95)); }
.footer-band{ display:flex; align-items:center; justify-content:center; gap:26px; padding:26px 20px; flex-wrap:wrap; }
.footer-slogan{ font-family:'Press Start 2P'; font-size:30px; color:#fff; text-align:center; text-shadow:3px 3px 0 var(--purple); display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.footer-slogan .s-purple{ color:var(--purple-lt); }
.footer-slogan .s-googl .g{ font-size:30px; }
.foot-char img{ width:96px; height:96px; filter:drop-shadow(0 0 12px rgba(168,85,247,.6)); }
.foot-emoji{ font-size:70px; line-height:1; }
.footer-links{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; padding:16px 20px; border-top:3px solid var(--line); border-bottom:3px solid var(--line); }
.footer-links a{ font-family:'Press Start 2P'; font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; transition:color .15s; }
.footer-links a:hover{ color:var(--purple-br); }
.fl-ic{ font-size:16px; }
.footer-legal{ display:flex; justify-content:space-between; gap:16px; padding:16px 24px; max-width:1200px; margin:0 auto; font-size:16px; color:#7a6b96; flex-wrap:wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .nav-links.open{
    display:flex; flex-direction:column; position:absolute; top:var(--head-h); left:0; right:0;
    background:#12081f; border-bottom:3px solid var(--purple); padding:16px 20px; gap:14px;
  }
  .mid-grid{ grid-template-columns:1fr 1fr; }
  .how{ grid-column:1 / -1; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; padding-top:10px; }
  .hero-left{ order:2; }
  .hero-right{ order:1; min-height:360px; }
  .hero-btns{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-title .line.big{ font-size:56px; }
  .hero-title .line{ font-size:30px; }
  .road-grid, .meme-grid{ grid-template-columns:1fr 1fr; }
  .buy-inner{ flex-direction:column; text-align:center; }
  .buy-txt .hero-btns{ justify-content:center; }
}
@media (max-width: 560px){
  body{ font-size:18px; }
  .brand-name{ font-size:20px; }
  .hero-title .line.big{ font-size:40px; }
  .hero-title .line{ font-size:22px; }
  .hero-sub{ font-size:20px; }
  .grid-4, .mid-grid, .road-grid, .meme-grid{ grid-template-columns:1fr; }
  .steps{ flex-wrap:wrap; gap:20px; }
  .step{ flex:1 0 40%; }
  .arrow{ display:none; }
  .footer-slogan{ font-size:20px; }
  .footer-slogan .s-googl .g{ font-size:20px; }
  .nav-buy{ display:none; }
  .step-no{ transform:translateX(-50%); top:-10px; }
}