*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#0d0b12;
  --panel:#17131f;
  --panel2:#1e1828;
  --line:#34274b;
  --text:#f2eefb;
  --muted:#b9afcf;
  --accent:#9b3dff;
  --accent2:#d1457d;
  --good:#1fbf75;
  --goodbg:#103025;
  --danger:#6f7078;
  --shadow:0 18px 48px rgba(0,0,0,.35);
}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:radial-gradient(circle at top left,#1e1230 0,#0d0b12 42%,#09070d 100%);
  color:var(--text);
  line-height:1.55;
}
.bg-grid{
  position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 90%);
}
.container{width:min(1180px,calc(100% - 30px));margin:0 auto}
.hero{padding:28px 0 8px;position:relative;z-index:1}
.hero-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px}
.brand-badge{
  width:70px;height:70px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-weight:900;font-size:28px;box-shadow:var(--shadow)
}
.eyebrow{font-size:12px;letter-spacing:2px;color:#d7ccef;text-transform:uppercase}
h1{margin:4px 0 6px;font-size:34px;line-height:1.1}
.tagline{margin:0;color:var(--muted)}
.topnav{display:flex;gap:18px;flex-wrap:wrap;padding-top:12px}
.topnav a{color:#ddd;text-decoration:none;font-size:14px;opacity:.9}
.topnav a:hover{opacity:1}
.layout{position:relative;z-index:1;padding:26px 0 40px}
.product-card{
  display:grid;grid-template-columns:1.02fr 1.15fr;gap:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;padding:26px;box-shadow:var(--shadow);backdrop-filter: blur(4px);
}
.visual-panel{display:flex;flex-direction:column;gap:18px}
.visual-frame{
  min-height:430px;border-radius:22px;padding:20px;
  background:linear-gradient(140deg,#20172e 0,#16111e 55%,#120f17 100%);
  border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden
}
.visual-frame:before{
  content:"";position:absolute;inset:auto -40px 30px auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--accent2),transparent 65%);filter:blur(24px);opacity:.25
}
.visual-frame:after{
  content:"";position:absolute;inset:20px auto auto 20px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 60%);filter:blur(32px);opacity:.25
}
.product-box{
  width:min(92%,420px);aspect-ratio:1/1.12;border-radius:24px;
  background:linear-gradient(180deg,#efe9f6 0,#dbd3e7 100%);
  color:#2a2134;padding:22px;box-shadow:0 22px 55px rgba(0,0,0,.35);
  transform:rotate(-4deg);position:relative;border:8px solid #f8f5fb
}
.box-top,.box-footer{font-size:12px;font-weight:800;letter-spacing:2px;color:#6a586f;text-transform:uppercase}
.box-main{display:flex;min-height:300px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pokeball{
  width:112px;height:112px;border-radius:50%;
  background:
    linear-gradient(to bottom,#d63f58 0 48%,#20232a 48% 52%,#fff 52% 100%);
  border:6px solid #20232a;position:relative;margin-bottom:18px
}
.pokeball:before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid #20232a
}
.box-title{font-size:30px;font-weight:900;letter-spacing:1px;line-height:1.05}
.box-sub{margin-top:8px;font-size:18px;color:#52425b}
.villain-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;padding:18px
}
.villain-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#cdbde8;margin-bottom:12px}
.villain-silhouette{
  height:170px;border-radius:18px;margin-bottom:12px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.1) 0 20px, transparent 21px),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.1) 0 55px, transparent 56px),
    linear-gradient(180deg, rgba(209,69,125,.22), rgba(155,61,255,.18)),
    linear-gradient(135deg,#17131f,#110d16);
  position:relative;overflow:hidden
}
.villain-silhouette:after{
  content:"";position:absolute;inset:auto 0 0 0;height:56px;
  background:linear-gradient(180deg,transparent,#0f0c14)
}
.villain-name{font-size:20px;font-weight:700;margin-bottom:6px}
.details-panel{display:flex;flex-direction:column}
.chip{
  display:inline-flex;align-self:flex-start;padding:8px 12px;border-radius:999px;
  background:rgba(155,61,255,.14);border:1px solid rgba(155,61,255,.28);color:#e5d8ff;font-size:12px
}
h2{font-size:38px;line-height:1.05;margin:14px 0 14px}
.price-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.price{font-size:34px;font-weight:800}
.stock{
  display:inline-block;padding:10px 14px;border-radius:10px;
  background:#2c2b31;color:#d7d7dc;border:1px solid #4c4b54;font-weight:700
}
.stock.available{background:var(--goodbg);color:#7df0b1;border-color:#2d925e}
.lead{color:var(--muted);font-size:16px;margin:6px 0 16px}
.features{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;padding-left:20px;color:#e5dff3;margin:0 0 20px
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.fake-buy,.ghost-btn,#toggleStockBtn,.secondary-test-btn{
  padding:13px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:700;font-size:14px
}
.fake-buy,#toggleStockBtn{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff
}
.ghost-btn,.secondary-test-btn{
  background:transparent;color:#f2eefb;border:1px solid rgba(255,255,255,.18)
}
.test-panel{
  border:1px dashed rgba(255,255,255,.18);border-radius:18px;padding:18px;
  background:rgba(255,255,255,.03);margin-bottom:18px
}
.test-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#d5c8ee}
.test-subtitle{color:var(--muted);font-size:14px;margin:6px 0 14px}
.test-buttons{display:flex;gap:10px;flex-wrap:wrap}
.telegram-state{margin-top:12px;font-size:12px;color:#ffb8c9}
.telegram-state.ok{color:#7df0b1}
.test-stock-message{margin-top:8px;font-size:13px;color:#d8d1e8;min-height:20px}
.meta{display:flex;flex-wrap:wrap;gap:12px;color:#bcb2cf;font-size:13px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.info-box{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px
}
.info-box h3{margin:0 0 8px;font-size:18px}
.info-box p{margin:0;color:var(--muted)}
.footer{padding:26px 0 40px;color:#a89ebc}
.footer-inner{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
@media(max-width:980px){
  .product-card{grid-template-columns:1fr}
}
@media(max-width:720px){
  h2{font-size:30px}.features{grid-template-columns:1fr}.price{font-size:28px}.info-grid{grid-template-columns:1fr}
  .brand-badge{width:58px;height:58px;font-size:24px}
}
