:root{--bg:#0a0c15; --muted:#a4b2c8; --text:#e9f0ff; --accent:#7aa2ff; --accent2:#59f3c2; --magenta:#ff4fd8; --shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;min-height:100%}
/* Ambient + grid (kept subtle) */
body:before{content:""; position:fixed; inset:-25%; z-index:-3; background:
  radial-gradient(60% 60% at 18% 12%, rgba(122,162,255,.25), rgba(122,162,255,0) 60%),
  radial-gradient(50% 50% at 90% 10%, rgba(89,243,194,.18), rgba(89,243,194,0) 60%),
  radial-gradient(40% 40% at 22% 88%, rgba(255,79,216,.12), rgba(255,79,216,0) 60%);
  filter: blur(38px)}
body:after{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background-image:
  repeating-linear-gradient(135deg, rgba(122,162,255,.12) 0, rgba(122,162,255,.12) 1px, transparent 1px, transparent 26px),
  repeating-linear-gradient(135deg, rgba(89,243,194,.10) 0, rgba(89,243,194,.10) 1px, transparent 1px, transparent 13px),
  repeating-linear-gradient(135deg, rgba(255,79,216,.10) 0, rgba(255,79,216,.10) 1px, transparent 1px, transparent 52px);
  mix-blend-mode: screen; animation: gridMove 45s linear infinite; opacity:.45; filter: blur(.3px)}
@keyframes gridMove{0%{background-position:0 0,0 0,0 0}100%{background-position:400px 400px,200px 200px,800px 800px}}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)); color:#0b0f1a; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px 14px; box-shadow:0 12px 30px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:46px; filter: drop-shadow(0 0 6px rgba(122,162,255,.55)) drop-shadow(0 0 10px rgba(255,79,216,.25))}
.badge{font-size:12px;color:#0c1b2a;background:linear-gradient(135deg,var(--accent),var(--accent2));padding:6px 10px;border-radius:999px;font-weight:700}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;margin-top:22px}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--shadow);padding:28px;overflow:hidden}
h1{font-size:38px;line-height:1.1;margin:8px 0}
.sub{color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.feature{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.section{margin:38px 0}
.hero-banner{width:100%;height:260px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background-position:center;background-size:contain;background-repeat:no-repeat;background-image:url('assets/krea-transparent.png');background-color:rgba(255,255,255,.12);box-shadow:var(--shadow)}
/* Progress bar */
.progress-wrap{margin-top:14px}
.progress-outer{background:rgba(255,255,255,.08);border-radius:999px;height:14px;overflow:hidden;max-width:480px;margin:0 auto}
.progress-bar{height:14px;width:var(--progress,0%);background:linear-gradient(90deg,#7aa2ff,#59f3c2,#ff4fd8);transition:width .3s ease}
/* Bumpsale button pulse */
.bumpsale_button{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:12px;font-weight:800;text-decoration:none;background:linear-gradient(135deg,#7aa2ff,#59f3c2);color:#041023;box-shadow:0 10px 20px rgba(90,170,255,.25),0 0 0 0 rgba(122,162,255,.55);animation:pulseGlow 2.6s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 10px 20px rgba(90,170,255,.25),0 0 0 0 rgba(122,162,255,0)}50%{box-shadow:0 12px 26px rgba(90,170,255,.35),0 0 22px 6px rgba(255,79,216,.20),0 0 44px 10px rgba(89,243,194,.18)}}
/* Watermark */
.watermark{position:fixed; left:18px; bottom:18px; width:92px; opacity:.16; z-index:5; pointer-events:none; animation: breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.10; transform:translateY(0)} 50%{opacity:.22; transform:translateY(-2px)}}
/* CTA pill */
.cta-pill{position:fixed; left:16px; bottom:16px; z-index:10; background:linear-gradient(135deg,var(--accent),var(--magenta)); color:#041023; font-weight:800; padding:12px 16px; border-radius:999px; text-decoration:none; box-shadow:0 10px 20px rgba(90,170,255,.25); transition:opacity .3s ease}
/* Footer */
.footer{display:flex;justify-content:space-between;gap:12px;padding:28px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);margin-top:38px}
.footer a{color:var(--muted);text-decoration:none}
/* Mobile */
@media (max-width:920px){.hero{grid-template-columns:1fr}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr} .logo{height:40px} .watermark{left:12px; bottom:auto; top:12px; width:72px}}
/* Free-offer button (non-pulsing) */
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;font-weight:800;text-decoration:none;color:#041023;box-shadow:0 10px 20px rgba(0,0,0,.15)}
.free-offer .feature{background:linear-gradient(180deg, rgba(255,79,216,.12), rgba(255,79,216,.05)); border:1px solid rgba(255,79,216,.30)} .btn-secondary{background:linear-gradient(135deg,#ff4fd8,#ff8ce8)}