:root{
  --bg:#0a0f1f; --panel:#0f172a; --muted:#9aa4b2; --text:#e5edff;
  --primary:#22d3ee; --secondary:#6366f1; --ring:0 0 0 2px rgba(34,211,238,.35);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --gradient-hot:linear-gradient(135deg, #ff6b6b, #ee5a6f);
  --gradient-premium:linear-gradient(135deg, #ffd700, #ffed4e);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.grid{display:grid;gap:24px}
.card{background:var(--panel);border:1px solid #1c2542;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.badge{font-size:13px;background:#0c1327;border:1px solid #253156;color:#9bb0cf;padding:6px 12px;border-radius:999px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:14px;background:#121c33;border:1px solid #273351;cursor:pointer;transition:.2s transform,.2s box-shadow;font-weight:700}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--secondary));border:0;box-shadow:var(--shadow);color:#0a0f1f;font-weight:800}
.btn.huge{font-size:22px;padding:22px 34px;border-radius:18px}
.nav{position:sticky;top:0;background:rgba(10,15,31,.6);backdrop-filter:blur(8px);border-bottom:1px solid #1b2645;z-index:50}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px}
.version-badge{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#0a0f1f;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.5px;margin-left:4px}
.hero{padding:80px 0 40px;background:radial-gradient(1200px 600px at 50% -220px, rgba(99,102,241,.25), transparent 60%);text-align:center}
.hero h1{font-size:56px;line-height:1.1;margin:12px 0 18px;background:linear-gradient(135deg, #fff, #a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .hero-subtitle{color:#cbd5e1;max-width:760px;margin:0 auto;font-size:18px}
.hero .hero-subtitle strong{color:var(--primary);font-weight:700}
.section{padding:64px 0}
.section-subtitle{color:var(--muted);font-size:18px;text-align:center;margin:0 auto 32px;max-width:700px}

/* Video Hero Section */
.video-hero{position:relative}
.video-container{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.5);border:2px solid #1e3a8a;transition:transform .3s ease}
.video-container:hover{transform:scale(1.02)}
.video-player{width:100%;height:auto;display:block;background:#000}
.video-caption{text-align:center;margin-top:16px}
.video-caption h3{margin:0 0 6px;font-size:24px}
.video-caption p{color:var(--muted);margin:0}

/* Instruction Card */
.instruction-card{background:linear-gradient(135deg, #0e1529 0%, #0f172a 100%);border:2px solid #2563eb !important}
.instruction-card h3{color:var(--primary);margin:0 0 16px}

/* Features Section */
.features-section{background:linear-gradient(180deg, transparent, rgba(15,23,42,.5), transparent)}
.features{grid-template-columns:repeat(3,1fr)}
.feature{border:1px solid #223050;background:linear-gradient(135deg, #0e1529, #0f172a);border-radius:14px;padding:24px;text-align:center;transition:all .3s ease}
.feature:hover{border-color:#3b82f6;transform:translateY(-6px)}
.feature-gif{width:120px;height:120px;margin:0 auto 20px;border-radius:16px;overflow:hidden;border:2px solid rgba(34,211,238,.3);background:#000}
.feature-gif img{width:100%;height:100%;object-fit:cover}
.feature h3{margin:0 0 10px;font-size:20px}
.feature p{color:var(--muted);margin:0;font-size:15px}
.kbd{font-family:ui-monospace,monospace;background:#0c1224;border:1px solid #253156;border-radius:8px;padding:2px 6px;color:#b8c3d6;font-size:12px}
.footer{padding:44px 0;border-top:1px solid #1b2645;color:#98a2b3}
.alert{background:#0e182f;border:1px dashed #28406f;border-radius:14px;padding:12px;color:#aac0df}
hr{border:0;border-top:1px solid #1b2645;margin:24px 0}

/* Ticker */
.ticker{position:relative;overflow:hidden;border:1px solid #223050;border-radius:12px;background:#0d1428}
.ticker-track{display:flex;gap:24px;white-space:nowrap;animation:scroll 18s linear infinite;padding:10px 0 10px 10px}
.ticker-item{display:flex;align-items:center;gap:8px;background:#0f192f;border:1px solid #283a63;border-radius:999px;padding:6px 10px;color:#cfe2ff}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bookmarklet Animation */
@keyframes bookmarklet-pulse{
  0%, 80%, 100%{box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(34,211,238,.7)}
  90%{box-shadow:0 10px 40px rgba(34,211,238,.4), 0 0 0 8px rgba(34,211,238,0)}
}
@keyframes bookmarklet-glow{
  0%, 80%, 100%{filter:brightness(1)}
  90%{filter:brightness(1.15)}
}
.btn.bookmarklet{
  animation:bookmarklet-pulse 5s ease-in-out infinite, bookmarklet-glow 5s ease-in-out infinite;
  position:relative;
}
.btn.bookmarklet::after{
  content:'📌 Drag me!';
  position:absolute;
  top:-32px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, #ff6b6b, #ee5a6f);
  color:#fff;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  animation:tooltip-bounce 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tooltip-bounce{
  0%, 80%, 100%{opacity:0;transform:translateX(-50%) translateY(0)}
  85%, 95%{opacity:1;transform:translateX(-50%) translateY(-4px)}
}


/* Catalog Section */
.catalog-section{background:radial-gradient(800px 600px at 50% 50%, rgba(99,102,241,.08), transparent)}
.catalog{grid-template-columns:repeat(3,1fr)}
.bot-card{padding:0;overflow:hidden;position:relative}
.bot-image{position:relative;height:180px;overflow:hidden;background:linear-gradient(135deg, #1e3a8a, #1e293b)}
.bot-image img{width:100%;height:100%;object-fit:cover;opacity:.7;object-position:center}
.bot-badge{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;z-index:2}
.bot-badge.hot{background:var(--gradient-hot);border-color:#ff6b6b;color:#fff}
.bot-badge.new{background:linear-gradient(135deg, #22d3ee, #3b82f6);border-color:#22d3ee;color:#fff}
.bot-badge.premium{background:var(--gradient-premium);border-color:#ffd700;color:#0a0f1f}
.bot-content{padding:20px}
.bot-content h3{margin:0 0 10px;font-size:20px}
.bot-content ul{list-style:none;padding:0;margin:12px 0 0;color:var(--muted);font-size:14px}
.bot-content ul li{padding:4px 0}
.bot-card.combo{border:2px solid #fbbf24}
.bot-card.combo .bot-image{background:linear-gradient(135deg, #fbbf24, #f59e0b)}

/* Pricing Section */
.pricing-section{background:linear-gradient(180deg, transparent, rgba(15,23,42,.3), transparent)}
.pricing-grid{gap:32px}
.price-card{text-align:center;padding:32px 24px;position:relative}
.price-card.featured{background:linear-gradient(135deg, #1e293b, #0f172a);box-shadow:0 25px 50px rgba(99,102,241,.3)}
.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-hot);padding:6px 16px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.5px}
.instant-activation-badge{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#0a0f1f;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:700;margin:16px 0;display:inline-block;box-shadow:0 4px 12px rgba(34,211,238,.4)}
.price-header h3{margin:0 0 6px;font-size:24px}
.price-header .muted{font-size:14px}
.price-amount{margin:20px 0}
.price-amount h2{font-size:48px;margin:0;display:inline-block}
.price-amount span{color:var(--muted);font-size:16px;margin-left:4px}
.price-features{list-style:none;padding:0;margin:24px 0;text-align:left}
.price-features li{padding:10px 0;border-bottom:1px solid #1e293b;color:#cbd5e1}
.price-card .btn{width:100%;margin-top:12px}
.price-guarantee{margin-top:16px;font-size:13px;color:#10b981;font-weight:600}

@media(max-width:960px){ 
  .features{grid-template-columns:repeat(3,1fr)}
  .catalog{grid-template-columns:1fr 1fr} 
  .pricing-grid{grid-template-columns:repeat(2,1fr) !important}
  .hero h1{font-size:42px}
  .price-card.featured{transform:none !important}
  .container{padding:0 16px}
  .section{padding:56px 0}
  .hero{padding:60px 0 40px}
  .feature{padding:12px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .feature-gif{width:60px;height:60px;margin:0 auto 8px;border-radius:10px}
  .feature h3{font-size:13px;margin:0 0 6px;line-height:1.2}
  .feature p{font-size:11px;line-height:1.3}
  .price-card{padding:16px 12px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .price-header h3{font-size:18px;margin:0 0 4px}
  .price-header .muted{font-size:12px}
  .price-amount h2{font-size:36px}
  .price-amount span{font-size:14px}
  .price-features{font-size:12px;margin:16px 0}
  .price-features li{padding:6px 0}
  .instant-activation-badge{font-size:11px;padding:8px 12px;margin:12px 0}
  .popular-badge{font-size:10px;padding:4px 12px}
  .price-guarantee{font-size:11px;margin-top:12px}
  .badge{font-size:11px;padding:4px 10px}
  .version-badge{font-size:10px;padding:2px 6px}
  .card{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .instruction-card{padding:16px;border-radius:12px}
  .instruction-card h3{font-size:16px;margin:0 0 12px}
  .video-hero{margin:20px auto !important}
  .video-container{border-radius:10px}
  .video-caption h3{font-size:18px;margin:8px 0 4px}
  .video-caption p{font-size:14px}
  .bot-card{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .footer{text-align:center;padding:36px 0}
  .footer .brand{justify-content:center;margin-bottom:12px}
}
@media(max-width:640px){ 
  .hero h1{font-size:32px;line-height:1.15}
  .hero .hero-subtitle{font-size:15px;padding:0 8px;line-height:1.5}
  .play-button{width:60px;height:60px;font-size:24px}
  .container{padding:0 12px}
  .nav{position:sticky}
  .nav .row{flex-wrap:nowrap;gap:10px;padding:12px 0;justify-content:space-between}
  .nav .row > div{order:2;width:auto;justify-content:flex-end;gap:6px}
  .nav .btn{padding:8px 14px;font-size:12px;width:auto;max-width:none}
  .btn{padding:14px 22px;font-size:14px;width:100%;max-width:280px;margin:0 auto}
  .btn.huge{font-size:17px;padding:18px 32px;width:100%;max-width:320px;margin:24px auto 12px}
  .brand{font-size:15px}
  .brand img{width:24px;height:24px}
  .section{padding:48px 0}
  .section h2{font-size:26px;padding:0 8px;line-height:1.2}
  .section-subtitle{font-size:15px;padding:0 8px;line-height:1.4}
  .card{padding:16px}
  .bot-content{padding:16px}
  .bot-image{height:140px}
  .feature-gif{width:55px;height:55px}
  .feature h3{font-size:12px}
  .feature p{font-size:10px}
  .price-card{padding:20px 14px}
  .price-amount h2{font-size:38px}
  .pricing-grid{gap:20px}
  .instruction-card ol{padding-left:18px;font-size:13px;line-height:1.4}
  .instruction-card ol li{margin-bottom:8px}
  .video-container{border-radius:10px}
  .ticker-track{gap:14px;font-size:13px}
  .footer{padding:32px 0;font-size:13px}
  .footer .brand{font-size:15px}
  .footer p{margin:12px auto;text-align:center}
}

@media(max-width:480px){
  .hero h1{font-size:28px;line-height:1.15}
  .hero .hero-subtitle{font-size:14px}
  .btn.huge{font-size:16px;padding:16px 28px;max-width:100%}
  .btn{font-size:13px;padding:12px 20px;max-width:100%}
  .section h2{font-size:24px;line-height:1.2}
  .section-subtitle{font-size:14px}
  .nav{position:relative}
  .pricing-grid{grid-template-columns:1fr !important}
  .price-card.featured{margin-top:16px}
  .badge{font-size:10px;padding:4px 8px}
  .instruction-card h3{font-size:15px}
  .instruction-card ol{font-size:12px}
  .video-caption h3{font-size:16px}
  .hero{padding:48px 0 32px}
}