/* ════════════════════════════════════════════════
   Vapih Trade — grape cartoon landing
   Trade in-game items · light / dark
════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Baloo+2:wght@500;600;700;800&display=swap');

:root{
  --grape:#7c5cff; --grape-d:#5b3ae0; --pink:#ff5ca8; --sky:#38bdf8;
  --yellow:#ffd23f; --mint:#2fe0a0; --coral:#ff6b6b;
  --bg:#f6f1ff; --bg2:#ece3ff; --panel:#ffffff; --panel2:#f4eeff;
  --ink:#221d3a; --line:#221d3a; --text:#2a2548; --muted:#6c6388;
  --bw:2.5px; --r:18px; --r-lg:28px;
  --pop:3px 3px 0 var(--ink); --pop-lg:6px 6px 0 var(--ink);
  --head:'Fredoka',system-ui,sans-serif; --body:'Baloo 2',system-ui,sans-serif;
}
[data-theme="dark"]{
  --bg:#15122b; --bg2:#1c1738; --panel:#211a40; --panel2:#2a2150;
  --ink:#0c0a18; --line:#0c0a18; --text:#efeaff; --muted:#a99fce;
  --pop:3px 3px 0 #0c0a18; --pop-lg:6px 6px 0 #0c0a18;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); background:var(--bg); color:var(--text); min-height:100vh;
  line-height:1.6; overflow-x:hidden;
  background-image:radial-gradient(circle at 10% 0%,rgba(124,92,255,.12),transparent 42%),radial-gradient(circle at 92% 8%,rgba(255,92,168,.10),transparent 40%),radial-gradient(circle at 50% 100%,rgba(56,189,248,.10),transparent 45%);
  transition:background .4s ease,color .4s ease;
}
h1,h2,h3,.brand{font-family:var(--head);font-weight:700}
::selection{background:var(--grape);color:#fff}
a{color:inherit;text-decoration:none}

/* ── topbar ── */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:14px clamp(16px,5vw,52px);background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);border-bottom:var(--bw) solid var(--line);
}
[data-theme="dark"] .topbar{background:rgba(33,26,64,.72)}
.brand{display:flex;align-items:center;gap:11px;font-size:1.35rem}
.brand .logo{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;
  background:linear-gradient(150deg,var(--grape),var(--grape-d));border:var(--bw) solid var(--line);
  box-shadow:var(--pop);color:#fff;transform:rotate(-5deg);
}
.brand b{color:var(--grape)}
.spacer{flex:1}
.btn{
  font-family:var(--head);font-weight:600;font-size:1rem;cursor:pointer;
  padding:11px 22px;border-radius:100px;border:var(--bw) solid var(--line);
  background:var(--panel);color:var(--text);box-shadow:var(--pop);transition:.15s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--pop-lg)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--grape);color:#fff}
.btn.pink{background:var(--pink);color:#fff}
.btn.lg{padding:15px 32px;font-size:1.15rem}

/* ── hero ── */
.hero{
  max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(18px,5vw,40px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.hero-copy .pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;
  background:var(--yellow);color:#5b4500;border:2px solid var(--line);border-radius:100px;
  padding:6px 16px;box-shadow:var(--pop);margin-bottom:20px;font-size:.92rem;
}
.hero-copy h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1.08}
.hero-copy h1 .g{color:var(--grape)}
.hero-copy h1 .p{color:var(--pink)}
.hero-copy p{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--muted);margin:18px 0 30px;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-stats .s b{font-family:var(--head);font-size:1.7rem;color:var(--grape);display:block;line-height:1}
.hero-stats .s span{font-size:.9rem;color:var(--muted)}

/* ── hero art: floating item cards ── */
.hero-art{position:relative;height:min(440px,76vw)}
.blob{
  position:absolute;inset:8% 6%;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  background:linear-gradient(150deg,var(--grape),var(--pink));opacity:.16;
  filter:blur(6px);animation:morph 9s ease-in-out infinite;
}
@keyframes morph{0%,100%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%}50%{border-radius:60% 40% 42% 58%/44% 60% 40% 56%}}
.item{
  position:absolute;width:138px;background:var(--panel);border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--pop-lg);padding:16px 14px;text-align:center;
  animation:float 5s ease-in-out infinite;
}
.item .ico{font-size:2.6rem;display:block;margin-bottom:6px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.12))}
.item b{font-family:var(--head);font-size:1.02rem;display:block}
.item .price{
  display:inline-block;margin-top:8px;font-family:var(--head);font-weight:600;font-size:.85rem;
  background:var(--mint);color:#0a3b29;border:2px solid var(--line);border-radius:100px;padding:3px 12px;
}
.item.i1{top:2%;left:6%;transform:rotate(-6deg);animation-delay:0s;background:linear-gradient(160deg,#fff,#efe9ff)}
.item.i2{top:30%;right:2%;transform:rotate(5deg);animation-delay:.8s;background:linear-gradient(160deg,#fff,#ffe9f4)}
.item.i3{bottom:4%;left:18%;transform:rotate(4deg);animation-delay:1.6s;background:linear-gradient(160deg,#fff,#e6f7ff)}
.item.i4{bottom:24%;right:14%;transform:rotate(-4deg);animation-delay:2.4s;background:linear-gradient(160deg,#fff,#fff6e0)}
[data-theme="dark"] .item{background:var(--panel2)!important}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media(prefers-reduced-motion:reduce){.item,.blob{animation:none}}

/* ── games marquee ── */
.marquee{border-block:var(--bw) solid var(--line);background:var(--grape);overflow:hidden;padding:12px 0}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll 22s linear infinite;font-family:var(--head);font-weight:600;color:#fff;font-size:1.2rem;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:10px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── sections ── */
.section{max-width:1100px;margin:0 auto;padding:clamp(46px,7vw,86px) clamp(18px,5vw,40px)}
.section h2{font-size:clamp(1.9rem,4.5vw,2.8rem);text-align:center}
.section .sub{text-align:center;color:var(--muted);max-width:560px;margin:12px auto 0;font-size:1.08rem}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:46px}
.step{
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:28px 24px;position:relative;transition:.18s;
}
.step:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:var(--pop-lg)}
.step .n{
  position:absolute;top:-18px;right:22px;width:40px;height:40px;display:grid;place-items:center;
  font-family:var(--head);font-weight:700;background:var(--yellow);color:#5b4500;
  border:var(--bw) solid var(--line);border-radius:50%;box-shadow:var(--pop);
}
.step .ico{font-size:2.6rem;display:block;margin-bottom:12px}
.step h3{font-size:1.35rem;margin-bottom:6px}
.step p{color:var(--muted)}

/* ── featured items ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin-top:46px}
.card{
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:22px 18px;text-align:center;transition:.18s;cursor:pointer;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--pop-lg);border-color:var(--grape)}
.card .ico{font-size:3rem;display:block;margin-bottom:10px}
.card b{font-family:var(--head);font-size:1.15rem;display:block}
.card small{color:var(--muted)}
.card .price{display:inline-block;margin-top:10px;font-family:var(--head);font-weight:600;background:var(--grape);color:#fff;border:2px solid var(--line);border-radius:100px;padding:4px 16px}

/* ── trust ── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:46px}
.trust .t{display:flex;gap:14px;align-items:flex-start;background:var(--panel2);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:20px}
.trust .t .ico{font-size:2rem;flex:0 0 auto}
.trust .t b{font-family:var(--head);font-size:1.1rem;display:block;margin-bottom:3px}
.trust .t span{color:var(--muted);font-size:.95rem}

/* ── CTA ── */
.cta{
  max-width:1000px;margin:0 auto clamp(40px,7vw,80px);
  background:linear-gradient(150deg,var(--grape),var(--grape-d));
  border:var(--bw) solid var(--line);border-radius:var(--r-lg);box-shadow:var(--pop-lg);
  padding:clamp(36px,6vw,64px) 28px;text-align:center;color:#fff;position:relative;overflow:hidden;
}
.cta::before{content:"🎮";position:absolute;font-size:9rem;opacity:.12;top:-20px;left:-10px;transform:rotate(-15deg)}
.cta::after{content:"💎";position:absolute;font-size:8rem;opacity:.12;bottom:-26px;right:-6px;transform:rotate(12deg)}
.cta h2{color:#fff;font-size:clamp(1.8rem,5vw,2.6rem);position:relative}
.cta p{color:rgba(255,255,255,.9);max-width:480px;margin:12px auto 26px;position:relative;font-size:1.1rem}
.cta .btn{position:relative}

/* ── footer ── */
.footer{border-top:var(--bw) solid var(--line);padding:30px clamp(18px,5vw,40px);text-align:center;color:var(--muted);font-size:.95rem}
.footer b{color:var(--grape);font-family:var(--head)}

@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:30px}
  .hero-art{order:-1;height:min(360px,82vw)}
  .topbar .ghost-hide{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   ✦ VAPIH LEGENDARY THEME TOGGLE ✦  (shared sun⇄moon sky switch)
═══════════════════════════════════════════════════════════════ */
.vp-toggle{position:relative;width:64px;height:32px;border-radius:100px;border:2.5px solid var(--line,#221d3a);background:linear-gradient(160deg,#8fd6ff,#5fb8ff 55%,#3a93f0);cursor:pointer;padding:0;flex:0 0 auto;overflow:hidden;box-shadow:inset 0 2px 5px rgba(255,255,255,.45),2px 2px 0 var(--line,#221d3a);transition:background .5s ease,transform .15s ease,box-shadow .15s ease;vertical-align:middle;}
.vp-toggle:hover{transform:translateY(-2px) scale(1.03);}
.vp-toggle:active{transform:scale(.95);}
[data-theme="dark"] .vp-toggle{background:linear-gradient(160deg,#1b1d3a,#2b1d52 60%,#3a2068);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),2px 2px 0 var(--line,#0c0a18);}
.vp-toggle::before{content:"";position:absolute;top:8px;left:9px;width:2.5px;height:2.5px;border-radius:50%;background:#fff;box-shadow:7px 5px 0 -.5px rgba(255,255,255,.85),15px -3px 0 -1px rgba(255,255,255,.7),21px 7px 0 -1px rgba(255,255,255,.6),12px 12px 0 -1px rgba(255,255,255,.55);opacity:0;transition:opacity .4s ease;pointer-events:none;}
[data-theme="dark"] .vp-toggle::before{opacity:1;}
.vp-toggle .vp-tt-thumb{position:absolute;top:50%;left:4px;width:23px;height:23px;transform:translate(32px,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6,#ffd24d 60%,#ffb02e);box-shadow:0 0 10px 2px rgba(255,200,70,.7),inset -2px -2px 3px rgba(180,120,0,.3);transition:transform .5s cubic-bezier(.34,1.7,.5,1),background .5s ease,box-shadow .5s ease;pointer-events:none;}
.vp-toggle .vp-tt-thumb::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,transparent 62%,#ffd24d 62%,#ffd24d 70%,transparent 71%);-webkit-mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);opacity:.9;animation:vpSun 9s linear infinite;}
@keyframes vpSun{to{transform:rotate(360deg);}}
[data-theme="dark"] .vp-toggle .vp-tt-thumb{transform:translate(0,-50%);background:radial-gradient(circle at 35% 30%,#fdfbf0,#dfe3ef 65%,#c3c9dd);box-shadow:inset -5px -3px 0 -1px rgba(150,160,190,.55),0 0 8px 1px rgba(220,230,255,.4);}
[data-theme="dark"] .vp-toggle .vp-tt-thumb::before{opacity:0;}
@media (prefers-reduced-motion: reduce){.vp-toggle .vp-tt-thumb::before{animation:none;}.vp-toggle,.vp-toggle .vp-tt-thumb{transition-duration:.05ms;}}