/* =====================================================
   Aethervale SMP - Store Build v30
   Purple theme, animated backdrop, hover system
   ===================================================== */

:root{
  --bg:#0b0616;
  --bg-2:#120a24;
  --panel:rgba(28,17,54,.72);
  --panel-solid:#1a1030;
  --panel-2:rgba(38,23,71,.7);
  --line:rgba(168,132,255,.16);
  --line-strong:rgba(180,150,255,.34);
  --text:#f6f2ff;
  --muted:#a99cc4;
  --muted-2:#8a7cad;
  --accent:#8b5cf6;
  --accent-2:#c084fc;
  --accent-3:#e879f9;
  --deep:#5b21b6;
  --good:#34d399;
  --warn:#fbbf24;
  --radius:20px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --glow:0 0 40px rgba(139,92,246,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1220px,calc(100% - 32px));margin-inline:auto}

/* =====================================================
   ANIMATED BACKDROP
   ===================================================== */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bd-base{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #3b1b70 0%, #24123f 38%, #140a26 68%, #0b0616 100%);
}
.bd-nebula{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
  mix-blend-mode:screen;
}
.n1{width:820px;height:820px;left:-180px;top:-260px;background:radial-gradient(circle,#7c3aed 0%,transparent 68%);animation:drift1 26s ease-in-out infinite}
.n2{width:720px;height:720px;right:-200px;top:-140px;background:radial-gradient(circle,#c026d3 0%,transparent 68%);opacity:.4;animation:drift2 32s ease-in-out infinite}
.n3{width:900px;height:640px;left:32%;top:8%;background:radial-gradient(circle,#a855f7 0%,transparent 70%);opacity:.35;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(90px,60px,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-70px,80px,0) scale(.95)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-60px,-40px,0) scale(1.1)}}

/* perspective grid floor */
.bd-grid{
  position:absolute;left:-25%;right:-25%;bottom:-8%;height:62vh;
  background-image:
    linear-gradient(rgba(168,132,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,132,255,.16) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(64deg);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
          mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.45) 42%, transparent 78%);
  animation:gridflow 9s linear infinite;
  opacity:.7;
}
@keyframes gridflow{from{background-position:0 0,0 0}to{background-position:0 64px,64px 0}}

/* starfield */
.bd-stars{position:absolute;inset:0}
.bd-stars i{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--tw,4s) ease-in-out infinite;
  opacity:.5;
}
@keyframes twinkle{0%,100%{opacity:.16;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}

/* shooting stars */
.bd-shooting{position:absolute;inset:0}
.shoot{
  position:absolute;height:2px;width:180px;border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(220,200,255,.95) 60%, #fff 100%);
  filter:drop-shadow(0 0 6px rgba(200,160,255,.9));
  transform:rotate(18deg);
  opacity:0;
  animation:shoot var(--dur,5s) linear infinite;
  animation-delay:var(--del,0s);
}
@keyframes shoot{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(18deg) scaleX(.3)}
  6%{opacity:1}
  60%{opacity:1}
  100%{opacity:0;transform:translate3d(560px,180px,0) rotate(18deg) scaleX(1)}
}

.bd-scan{
  position:absolute;inset:0;opacity:.35;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
}
.bd-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 34%, transparent 30%, rgba(6,3,14,.55) 76%, rgba(5,2,12,.9) 100%);
}

main,.nav,.footer{position:relative;z-index:1}

/* =====================================================
   NAV
   ===================================================== */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(16px);
  background:rgba(11,6,22,.72);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{background:rgba(11,6,22,.92);box-shadow:0 12px 34px rgba(0,0,0,.42)}
.nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.nav-brand{display:flex;align-items:center;gap:10px}
.nav-brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-weight:900;font-size:13px;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  box-shadow:0 8px 22px rgba(139,92,246,.45);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s ease;
}
.nav-brand:hover .nav-brand-mark{transform:translateY(-2px) rotate(-6deg) scale(1.06);box-shadow:0 12px 28px rgba(192,132,252,.6)}
.nav-brand-text{font-weight:900;letter-spacing:.12em;font-size:14px;
  background:linear-gradient(90deg,#fff,#d9c2ff 60%,#f0abfc);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.nav-links{display:flex;gap:30px;align-items:center;font-size:13px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-3));
  transition:right .28s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}

.nav-right{display:flex;align-items:center;gap:10px}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn{
  --btn-bg:linear-gradient(135deg,var(--accent),#6d28d9);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:12px;padding:11px 20px;
  font-weight:900;font-size:14px;letter-spacing:.01em;color:#fff;cursor:pointer;
  background:var(--btn-bg);
  box-shadow:0 10px 26px rgba(109,40,217,.42);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .22s ease, filter .2s ease;
  position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(139,92,246,.6);filter:brightness(1.06)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:11px}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-ghost{
  --btn-bg:rgba(255,255,255,.05);
  border:1px solid var(--line-strong);
  box-shadow:none;color:#e9dcff;
}
.btn-ghost:hover{box-shadow:0 12px 26px rgba(139,92,246,.28);background:rgba(139,92,246,.16)}
.btn-cart{--btn-bg:rgba(255,255,255,.05);border:1px solid var(--line-strong);box-shadow:none;color:#e9dcff}
.btn-cart:hover{background:rgba(139,92,246,.2);box-shadow:0 12px 26px rgba(139,92,246,.3)}
.btn .ico,.btn svg{width:16px;height:16px}

/* =====================================================
   HERO
   ===================================================== */
.hero{position:relative;padding:64px 0 34px;text-align:center}
.hero-glow{
  position:absolute;left:50%;top:2%;translate:-50% 0;
  width:min(980px,94vw);height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(168,85,247,.42) 0%, rgba(139,92,246,.18) 42%, transparent 72%);
  filter:blur(12px);
  animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{opacity:.75;transform:translate(-50%,0) scale(1)}50%{opacity:1;transform:translate(-50%,0) scale(1.07)}}

.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-logo-wrap{position:relative;width:min(720px,88vw);animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-logo{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
/* The shine is a window masked to the logo artwork, so the light only ever
   crosses the letters - it never washes over the background. The moving
   band lives on ::before, inside that window. */
.hero-logo-shine{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:url('/logo.png?v=30');
          mask-image:url('/logo.png?v=30');
  -webkit-mask-size:100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  /* Luminance masking keeps the light letter faces catching the gleam while
     the black outlines and 3D sides stay crisp instead of washing to grey */
  -webkit-mask-source-type:luminance;
          mask-mode:luminance;
}
.hero-logo-shine::before{
  content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:52%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-170%);
  animation:sweep 8s cubic-bezier(.45,0,.22,1) infinite;
}
/* Travels left-to-right once, then parks past the right edge at zero
   opacity for the rest of the cycle, so the loop restart is never seen.
   (Previously it snapped back while still visible.) */
@keyframes sweep{
  0%,   5%  {transform:translateX(-170%);opacity:0}
  12%       {opacity:1}
  27%       {opacity:1}
  34%       {transform:translateX(330%);opacity:0}
  100%      {transform:translateX(330%);opacity:0}
}

.hero-tag{
  margin-top:6px;display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(139,92,246,.12);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#dcc9ff;
  backdrop-filter:blur(8px);
}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.hero-cards{
  margin-top:34px;width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
.info-card{
  display:flex;align-items:center;gap:16px;text-align:left;
  padding:16px 18px;border-radius:18px;cursor:pointer;
  border:1px solid var(--line);
  background:linear-gradient(140deg, rgba(38,22,72,.85), rgba(20,11,38,.9));
  box-shadow:0 16px 40px rgba(0,0,0,.42);
  color:var(--text);
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.25), border-color .25s ease, box-shadow .25s ease;
}
.info-card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at 12% 50%, rgba(139,92,246,.28), transparent 62%);
}
.info-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 24px 52px rgba(88,28,135,.55)}
.info-card:hover::after{opacity:1}
.info-icon{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(139,92,246,.3),rgba(192,132,252,.14));
  border:1px solid var(--line-strong);color:#dcc9ff;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.5), color .25s ease;
  position:relative;z-index:1;
}
.info-icon svg{width:26px;height:26px}
.info-card:hover .info-icon{transform:scale(1.08) rotate(-5deg);color:#fff}
.info-icon.discord{color:#a5b4fc}
.info-body{display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}
.info-eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.info-title{font-size:19px;font-weight:900;letter-spacing:-.01em}
.info-sub{font-size:12.5px;color:var(--muted)}
.info-action{
  margin-left:auto;position:relative;z-index:1;
  padding:9px 16px;border-radius:10px;font-size:12.5px;font-weight:900;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  box-shadow:0 8px 20px rgba(109,40,217,.45);
  transition:transform .22s ease, box-shadow .22s ease;
}
.info-card:hover .info-action{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 28px rgba(139,92,246,.6)}

/* =====================================================
   STORE BAR
   ===================================================== */
.store-bar-wrap{margin-top:30px}
.store-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 20px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(34,20,64,.86), rgba(19,11,36,.9));
  box-shadow:var(--shadow);
}
.store-id{display:flex;align-items:center;gap:14px;min-width:0}
.store-chip{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line-strong);
  background:radial-gradient(circle at 50% 30%, rgba(139,92,246,.4), rgba(15,8,30,.9));
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.store-chip img{width:88%;height:auto}
.store-bar:hover .store-chip{transform:rotate(-4deg) scale(1.05)}
.store-name{font-weight:900;font-size:17px}
.store-sub{font-size:12.5px;color:var(--muted)}
.store-account{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.store-welcome{text-align:right;line-height:1.25}
.store-welcome-title{font-weight:900;font-size:14px}
.store-welcome-sub{font-size:12px;color:var(--muted)}

/* =====================================================
   PANELS + SECTION HEADS
   ===================================================== */
.panel-wrap{margin-top:26px}
.panel{
  padding:30px;border-radius:26px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(30,18,58,.82), rgba(15,9,30,.88));
  box-shadow:var(--shadow);
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.panel h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;margin:6px 0 0}
.panel-note{max-width:520px;color:var(--muted);font-size:13.5px;margin:0}

/* =====================================================
   CATEGORY CARDS
   ===================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cat-card{
  position:relative;overflow:hidden;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:18px;
  padding:22px 24px;min-height:148px;border-radius:20px;border:none;
  background:linear-gradient(125deg,var(--cat-a),var(--cat-b));
  box-shadow:0 18px 42px rgba(76,29,149,.45);
  color:#fff;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.25), box-shadow .28s ease, filter .28s ease;
}
.cat-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .7s ease;
}
.cat-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 88% 12%, rgba(255,255,255,.28), transparent 52%);
  opacity:.6;transition:opacity .3s ease;
}
.cat-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 28px 60px rgba(126,34,206,.6);filter:saturate(1.1)}
.cat-card:hover::before{transform:translateX(130%)}
.cat-card:hover::after{opacity:1}
.cat-art{
  width:96px;height:96px;flex:0 0 96px;position:relative;z-index:1;
  filter:drop-shadow(0 12px 18px rgba(30,10,60,.5));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.5);
}
.cat-art svg{width:100%;height:100%}
.cat-card:hover .cat-art{transform:scale(1.1) rotate(-6deg)}
.cat-body{display:flex;flex-direction:column;position:relative;z-index:1}
.cat-eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.86}
.cat-title{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1.1;
  text-shadow:0 3px 12px rgba(45,12,80,.5)}
.cat-count{font-size:12.5px;opacity:.9;font-weight:700}
.cat-chev{
  margin-left:auto;position:relative;z-index:1;
  font-size:32px;font-weight:900;line-height:1;opacity:.85;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.5), opacity .25s ease;
}
.cat-card:hover .cat-chev{transform:translateX(7px);opacity:1}

/* =====================================================
   RANK CARDS
   ===================================================== */
.rank-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rank{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:22px;border-radius:20px;min-height:520px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(41,25,76,.9), rgba(18,10,34,.94));
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), border-color .28s ease, box-shadow .28s ease;
}
.rank::after{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-80px;top:-80px;background:var(--rank-b);filter:blur(34px);opacity:.28;
  transition:opacity .32s ease, transform .32s ease;
}
.rank::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--rank-a),var(--rank-b));
  opacity:.85;
}
.rank:hover{transform:translateY(-8px);border-color:var(--line-strong);
  box-shadow:0 28px 60px rgba(76,29,149,.5)}
.rank:hover::after{opacity:.5;transform:scale(1.15)}
.rank.is-owned{border-color:rgba(52,211,153,.45)}
.rank.is-owned::after{background:var(--good);opacity:.28}

.rank-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}
.tier{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#cbb6f5}
.badge{
  font-size:10px;font-weight:900;padding:5px 9px;border-radius:999px;letter-spacing:.06em;
  background:rgba(255,255,255,.07);border:1px solid var(--line-strong);color:#e2d3ff
}
.badge.hot{background:linear-gradient(135deg,var(--accent),var(--accent-3));border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(192,132,252,.45)}
.badge.top{background:linear-gradient(135deg,#c026d3,#f0abfc);border-color:transparent;color:#2b0a37}
.rank h3{font-size:27px;margin:10px 0 4px;letter-spacing:-.03em;position:relative;z-index:1}
.rank .price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
  font-size:32px;font-weight:950;margin:2px 0 12px;position:relative;z-index:1;line-height:1.2;
}
.rank .price small{font-size:12.5px;color:var(--muted);font-weight:700}
.rank-desc{color:var(--muted);font-size:12.5px;margin:0 0 14px;position:relative;z-index:1}
.rank ul{list-style:none;padding:0;margin:0 0 18px;color:#d6cbec;font-size:13px;position:relative;z-index:1}
.rank li{padding:5px 0 5px 20px;position:relative}
.rank li::before{content:"✦";color:var(--accent-2);font-weight:900;position:absolute;left:0;top:5px}
.rank li b{color:#fff}
.rank .buy{margin-top:auto}

.price-was{
  font-size:17px;font-weight:800;color:var(--muted);text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.4);
}
.price-off-badge{
  display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.05em;white-space:nowrap;
  color:#04281a;background:linear-gradient(135deg,#6ee7b7,var(--good));
  border-radius:999px;padding:4px 10px;
  box-shadow:0 6px 16px rgba(52,211,153,.4);
  animation:popIn .35s cubic-bezier(.2,.9,.3,1.6);
}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.rank-status-note{margin-top:11px;color:var(--muted);font-size:11.5px;text-align:center;min-height:16px;position:relative;z-index:1}
.rank-status-note b{color:#fff}

/* buy button (shared by ranks + crates) */
.buy{
  width:100%;border:none;border-radius:13px;padding:13px 15px;
  font-weight:900;font-size:14px;color:#fff;cursor:pointer;position:relative;overflow:hidden;z-index:1;
  background:linear-gradient(135deg,var(--rank-a,var(--accent)),var(--rank-b,#6d28d9));
  box-shadow:0 12px 28px rgba(109,40,217,.42);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3), box-shadow .22s ease, filter .2s ease;
}
.buy::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.32) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .6s ease;
}
.buy:hover:not([disabled]){transform:translateY(-3px);box-shadow:0 18px 38px rgba(139,92,246,.6);filter:brightness(1.07)}
.buy:hover:not([disabled])::before{transform:translateX(130%)}
.buy[disabled]{cursor:default;opacity:.6;filter:none;background:rgba(255,255,255,.07);color:var(--muted);box-shadow:none}

/* =====================================================
   UPGRADE CARDS
   ===================================================== */
.upg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.upg-card{
  padding:22px;border-radius:18px;position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(40,24,74,.85), rgba(17,10,32,.9));
  transition:transform .26s cubic-bezier(.2,.9,.3,1.25), border-color .26s ease, box-shadow .26s ease;
}
.upg-card::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;
  background:var(--u);filter:blur(38px);opacity:.24;transition:opacity .3s ease}
.upg-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 24px 50px rgba(76,29,149,.45)}
.upg-card:hover::after{opacity:.42}
.upg-flow{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;position:relative;z-index:1}
.upg-flow i{font-style:normal;color:var(--accent-2);font-size:18px}
.upg-prices{display:flex;align-items:center;gap:10px;margin:12px 0 8px;position:relative;z-index:1}
.upg-prices s{color:var(--muted);font-size:16px;font-weight:700}
.upg-prices b{font-size:29px;font-weight:950}
.upg-prices em{font-style:normal;font-size:10.5px;font-weight:900;color:#04281a;
  background:linear-gradient(135deg,#6ee7b7,var(--good));border-radius:999px;padding:4px 9px}
.upg-card p{margin:0;color:var(--muted);font-size:12.5px;position:relative;z-index:1}
.upg-note{
  margin-top:18px;padding:18px 20px;border-radius:16px;font-size:13px;color:var(--muted);
  border:1px solid var(--line);background:rgba(139,92,246,.08);
}
.upg-note b{display:block;color:#fff;margin-bottom:4px}

/* =====================================================
   CRATES
   ===================================================== */
.crate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.crate{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:22px;border-radius:20px;min-height:430px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(38,22,70,.88), rgba(17,10,32,.92));
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), border-color .28s ease, box-shadow .28s ease;
}
.crate::after{content:"";position:absolute;right:-70px;top:-70px;width:170px;height:170px;border-radius:50%;
  background:var(--c);filter:blur(34px);opacity:.26;transition:opacity .3s ease,transform .3s ease}
.crate:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:0 26px 56px rgba(76,29,149,.48)}
.crate:hover::after{opacity:.45;transform:scale(1.14)}
.crate-badge{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#cbb6f5;position:relative;z-index:1}
.crate h3{font-size:25px;margin:8px 0 2px;letter-spacing:-.03em;position:relative;z-index:1}
.crate .price{font-size:31px;font-weight:950;margin:4px 0 14px;position:relative;z-index:1}
.crate .price small{font-size:12.5px;color:var(--muted);font-weight:700}
.crate ul{list-style:none;padding:0;margin:0 0 16px;color:#d6cbec;font-size:13px;position:relative;z-index:1}
.crate li{padding:5px 0 5px 20px;position:relative}
.crate li::before{content:"✓";color:var(--good);font-weight:900;position:absolute;left:0;top:5px}
.bundles{border-top:1px solid var(--line);padding-top:13px;margin-top:auto;display:grid;gap:7px;position:relative;z-index:1}
.bundle{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;
  padding:3px 7px;border-radius:8px;transition:background .2s ease,color .2s ease}
.bundle:hover{background:rgba(139,92,246,.14);color:#fff}
.bundle b{color:#fff}
.crate .buy{margin-top:14px;--rank-a:var(--c);--rank-b:#6d28d9}

/* =====================================================
   FEATURES
   ===================================================== */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.feature{
  padding:22px;border-radius:17px;border:1px solid var(--line);
  background:rgba(255,255,255,.026);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.feature:hover{transform:translateY(-5px);background:rgba(139,92,246,.12);border-color:var(--line-strong)}
.f-ico{font-size:22px;display:block;margin-bottom:8px}
.feature b{display:block;font-size:17px;margin-bottom:5px}
.f-sub{color:var(--muted);font-size:13px}

/* =====================================================
   SUPPORT
   ===================================================== */
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.support-card{
  padding:24px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(40,24,74,.8), rgba(17,10,32,.9));
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.support-card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 22px 46px rgba(76,29,149,.42)}
.support-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.support-card p{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.support-card .warn{
  padding:13px 15px;border-radius:12px;font-size:12.5px;color:#e7d9ff;
  border:1px solid rgba(251,191,36,.28);background:rgba(251,191,36,.09);margin-bottom:16px;
}

/* =====================================================
   CTA + FOOTER
   ===================================================== */
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:32px;border-radius:24px;border:1px solid var(--line-strong);
  background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(192,132,252,.1));
  box-shadow:var(--shadow);
}
.cta h3{margin:0 0 6px;font-size:26px;letter-spacing:-.02em}
.cta p{margin:0;color:var(--muted);font-size:13.5px}

.footer{margin-top:48px;border-top:1px solid var(--line);background:rgba(9,5,18,.72);backdrop-filter:blur(10px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:34px 0 22px;flex-wrap:wrap}
.footer-logo{width:190px;height:auto;opacity:.94}
.footer-brand p{margin:10px 0 0;color:var(--muted);font-size:12.5px}
.footer-links{display:flex;gap:22px;color:var(--muted);font-size:13px;font-weight:700;flex-wrap:wrap}
.footer-links a{transition:color .2s ease}
.footer-links a:hover{color:#fff}
.footer-social{display:flex;gap:12px}
.social{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:13px;font-weight:800;color:#ded0ff;
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.social svg{width:18px;height:18px}
.social:hover{transform:translateY(-3px);background:rgba(139,92,246,.2);border-color:var(--line-strong);
  box-shadow:0 12px 26px rgba(139,92,246,.35);color:#fff}
.footer-legal{padding-bottom:26px;color:var(--muted-2);font-size:12px}

/* =====================================================
   NOTICE + CART FAB
   ===================================================== */
.notice{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:80;
  padding:13px 22px;border-radius:14px;font-weight:800;font-size:13.5px;
  border:1px solid var(--line-strong);background:rgba(26,15,48,.96);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translate(-50%,14px);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.4);
}
.notice.show{opacity:1;transform:translate(-50%,0)}

.cart-fab{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 18px;border:none;border-radius:16px;cursor:pointer;color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--accent),#6d28d9);
  box-shadow:0 18px 40px rgba(109,40,217,.5);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4), box-shadow .22s ease;
}
.cart-fab:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 24px 50px rgba(139,92,246,.65)}
.cart-fab .ico{width:19px;height:19px}
.cart-count{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:rgba(0,0,0,.32);font-size:12px;font-weight:900;
}

/* =====================================================
   REVEAL ON SCROLL
   ===================================================== */
/* Progressive enhancement: content is only hidden once site.js has
   confirmed it can reveal it again. If the script fails to load, every
   section stays visible instead of leaving a blank store. */
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal[data-delay="1"]{transition-delay:.08s}
.js-reveal .reveal[data-delay="2"]{transition-delay:.16s}
.js-reveal .reveal[data-delay="3"]{transition-delay:.24s}
.section-flash{animation:flash 1.1s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(192,132,252,.55)}100%{box-shadow:0 0 0 26px rgba(192,132,252,0)}}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1080px){
  .rank-grid,.crate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .upg-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav-links{display:none}
  .hero-cards,.cat-grid,.support-grid{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .panel{padding:22px}
  .store-bar{justify-content:center;text-align:center}
  .store-welcome{text-align:center}
  .cta{flex-direction:column;text-align:center}
}
@media (max-width:560px){
  .rank-grid,.crate-grid,.feature-grid{grid-template-columns:1fr}
  .cat-art{width:72px;height:72px;flex-basis:72px}
  .cat-title{font-size:23px}
  .footer-inner{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.05s !important}
  .reveal{opacity:1;transform:none}
}