@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
:root{
  --bg:#07040a;
  --panel:#0f0812;
  --accent:#8a2be2; /* purple neon */
  --accent-2:#6b2bd9;
  --accent-3:#4f1fb8;
  --muted:#9a92a8;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(138,43,226,0.06);
  --radius:12px;
  --card-shadow: 0 10px 40px rgba(12,6,24,0.6);
}
*{box-sizing:border-box}
.body-fix{min-height:100vh}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#e8e5ee;background:var(--bg);-webkit-font-smoothing:antialiased;}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Background neon pixel-ish pattern */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,#03020a 0%, #080313 50%, #0b0620 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:0.28;
  background-image:repeating-linear-gradient(45deg, rgba(106,13,173,0.06) 0 2px, transparent 2px 10px), radial-gradient(ellipse at 10% 20%, rgba(106,13,173,0.06), transparent 20%), radial-gradient(ellipse at 90% 80%, rgba(106,13,173,0.04), transparent 25%);
  mix-blend-mode:screen;
}

/* subtle animated gradient */
.bg-anim{position:fixed;inset:0;z-index:-3;opacity:0.38;pointer-events:none;background:linear-gradient(120deg, rgba(106,13,173,0.06), rgba(75,0,130,0.04));animation:shift 12s linear infinite}
@keyframes shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Navbar */
.nav-wrap{backdrop-filter:blur(6px);background:linear-gradient(180deg, rgba(10,6,18,0.35), rgba(10,6,18,0.12));border-bottom:1px solid rgba(255,255,255,0.02)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{color:var(--accent);font-weight:700;font-size:1.2rem;text-decoration:none;letter-spacing:0.6px}
.brand .dot{color:#fff;margin-left:4px;opacity:0.9}
.nav-links{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px}
.nav-links a:hover{color:#fff}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn.small{padding:6px 10px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 40px rgba(106,13,173,0.14);transition:transform .16s ease,box-shadow .16s ease}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(106,13,173,0.18)}
.btn.ghost{background:transparent;color:#ddd;border:1px solid rgba(255,255,255,0.04);transition:all .12s}
.btn.ghost:hover{transform:translateY(-1px);color:#fff}

.nav-toggle{display:none;background:transparent;border:0;padding:8px}
.nav-toggle .bar{display:block;width:20px;height:2px;background:var(--muted);margin:4px 0;border-radius:2px;transition:all .12s}

/* Hero */
.hero{padding:64px 0}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.title{font-size:2.6rem;margin:0 0 8px;color:#fff;text-shadow:0 8px 48px rgba(138,43,226,0.16)}
.lead{color:var(--muted);margin-bottom:18px}
.hero-ctas{display:flex;gap:12px}
.hero-visual{display:flex;justify-content:center}
.neon-card{padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);border:1px solid rgba(138,43,226,0.12);box-shadow:var(--card-shadow)}
.mock-window{width:360px;background:linear-gradient(180deg,#09060f, #10061a);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.mw-top{display:flex;gap:6px;padding:10px}
.mw-top .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.red{background:#ff5f57}
.dot.yellow{background:#ffbd2e}
.dot.green{background:#2ecc71}
.mw-body{padding:18px;color:var(--muted);font-family:monospace;font-size:0.95rem}

/* Features */
.features-section{padding:48px 0}
.section-title{color:#fff;margin:0 0 18px;font-size:1.4rem}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(138,43,226,0.02));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);transition:transform .14s,box-shadow .14s}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(75,0,130,0.12)}
.feature-card .icon{font-size:24px;color:var(--accent);margin-bottom:10px}
.feature-card h3{margin:0 0 8px;color:#fff}
.feature-card p{margin:0;color:var(--muted)}

.about-section{padding:36px 0}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.info-box{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:14px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);color:var(--muted);transition:transform .12s}
.info-box:hover{transform:translateY(-4px)}

.video-section{padding:36px 0}
.video-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(106,13,173,0.06)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.stats-section{padding:36px 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat-card{background:linear-gradient(90deg, rgba(138,43,226,0.04), rgba(107,43,217,0.02));padding:18px;border-radius:10px;text-align:center;transition:transform .12s}
.stat-card:hover{transform:translateY(-6px)}
.stat-num{font-size:1.6rem;color:#fff;font-weight:700}
.stat-label{color:var(--muted)}

.faq-section{padding:36px 0}
.accordion{display:block}
.accordion-item{margin-bottom:10px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.accordion-header{width:100%;text-align:left;padding:12px 16px;background:transparent;color:#fff;border:0;font-size:1rem;cursor:pointer}
.accordion-body{padding:12px 16px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(138,43,226,0.01));color:var(--muted);display:none}

.site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.socials a{color:var(--muted);margin-left:10px;text-decoration:none;font-size:1.1rem}

/* utility */
.muted{color:var(--muted)}


/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .features-grid,.info-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav-links{display:none;position:absolute;right:20px;top:64px;background:linear-gradient(180deg, rgba(10,6,18,0.95), rgba(10,6,18,0.9));padding:12px;border-radius:8px}
  .nav-toggle{display:block}
  .features-grid,.info-grid,.stats-grid{grid-template-columns:1fr}
  .title{font-size:1.8rem}
}