/* Fonts: Space Grotesk (titles), Inter (body) */
:root{
  --bg-1:#0a0518; --bg-2:#140b35; --bg-3:#1a0f44;
  --accent:#6C4AE6; --accent-2:#9B5DE5; --accent-3:#F15BB5; --accent-4:#00BBF9; --accent-5:#00F5D4;
  --glass: rgba(255,255,255,0.08);
  --text:#EDEAF7; --muted:#BFB8D9; --border:#5c3bbf;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:
    radial-gradient(1400px 680px at 20% 10%, #2a1b7a33, transparent),
    radial-gradient(1000px 500px at 80% 20%, #f15bb533, transparent),
    radial-gradient(1200px 700px at 40% 90%, #00bbf922, transparent),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; overflow-x:hidden;
}

/* Background canvas and film grain */
#bgParticles{position:fixed; inset:0; width:100%; height:100%; z-index:-2}
.noise-overlay{position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.12; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/></svg>'); mix-blend-mode: screen;}

.site-header{display:flex; align-items:center; justify-content:center; padding:32px 24px}
.logo{height:56px; width:auto; filter: drop-shadow(0 8px 28px #6c4ae666)}

.container{max-width:1150px; margin:0 auto; padding:0 20px}
.title{font-family:'Space Grotesk', Inter, sans-serif; font-size: clamp(2rem, 2vw + 2rem, 4rem); line-height:1.1; margin:0 0 12px}
.subtitle{font-size:1.1rem; color:var(--text); margin:0 0 10px}
.subtitle.emphasis strong{color:#fff}
.section-title{font-family:'Space Grotesk', Inter, sans-serif; font-weight:700}
.muted{color:var(--muted)}

.hero{margin-top:8px; padding:32px}
.countdown-wrap{margin:24px 0 0;}
.countdown{display:grid; grid-template-columns:repeat(4, minmax(90px, 1fr)); gap:14px; padding:16px; margin:18px 0 6px}
.countdown .segment{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 8px; background: rgba(255,255,255,0.03); border-radius:14px}
.countdown span{font-family:'Space Grotesk', Inter, sans-serif; font-weight:700; font-size:clamp(1.5rem, 1.2vw + 1.5rem, 2.6rem)}
.countdown label{font-size:.8rem; color:var(--muted)}
.eta{color:var(--muted); margin:4px 0 0}

.grid{margin:36px 0}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px}
.card{padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 14px 50px #00000050}
.card h3{margin:0 0 6px; font-family:'Space Grotesk', Inter, sans-serif}
.card p{margin:0; color:var(--muted)}
.card.more{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03))}

.cta{margin:38px 0 22px; padding:24px; text-align:center}

.site-footer{display:flex; justify-content:center; padding:30px; color:var(--muted)}

/* Glassmorphism */
.glass{background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)); border-radius:18px; backdrop-filter: blur(14px)}

/* Lively animated borders using conic gradients */
.bordered{position:relative}
.bordered::before{content:""; position:absolute; inset:-2px; padding:2px; border-radius:inherit; background:conic-gradient(from var(--angle), var(--accent), var(--accent-2), var(--accent-3), var(--accent-4), var(--accent-5), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4.5s linear infinite}
@keyframes spin{to{--angle:360deg}}

/* Extra lively pulse on product cards */
.lively{animation: glow 3.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow: 0 0 0px #0000, 0 0 0px #0000}50%{box-shadow: 0 16px 64px #6c4ae644, 0 0 0 1px #6c4ae688}}

/* Reveal on scroll */
.animate-reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
.animate-reveal.revealed{opacity:1; transform:none}

/* Responsive tweaks */
@media (max-width: 720px){
  .countdown{grid-template-columns:repeat(2, 1fr)}
}

/* Notify form */
.notify-form{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0 8px}
.notify-form input{flex:1 1 280px; min-width:240px; padding:12px 14px; border-radius:12px; border:1px solid #ffffff22; background:#0f0a20; color:#fff; outline:none}
.notify-form input:focus{border-color:#6c4ae6; box-shadow: 0 0 0 3px #6c4ae633}
.notify-form button{padding:12px 16px; border-radius:12px; border:1px solid #6c4ae6; background:linear-gradient(90deg, #6c4ae6, #9b5de5); color:white; font-weight:600; cursor:pointer}
.notify-form button.secondary{background:transparent; border-color:#ffffff33}
.feedback{min-height:20px; color:var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}