/* ========== Base, Theme, Tokens ========== */
:root{
  --bg: #0a0d12;
  --bg-2:#0f1520;
  --panel:#0f1117;
  --card:#0b0f14;
  --text:#e7eef7;
  --muted:#9ba7b4;
  --line:#1f2430;
  --accent:#22d3ee;
  --accent2:#00ff88;
  --ring: rgba(34,211,238,.35);
  --radius:14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:linear-gradient(180deg,var(--bg),#06080c 50%,#04070a);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px; line-height:1.6;
}

/* Subtle animated grid / glow background */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(0,255,136,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(34,211,238,.09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 35%),
    repeating-linear-gradient( 90deg, rgba(255,255,255,.022), rgba(255,255,255,.022) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.018), rgba(255,255,255,.018) 1px, transparent 1px, transparent 40px);
  animation: float 16s linear infinite;
}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Layout */
.container{width:min(1120px,92vw); margin:0 auto; padding: 0 0;}
.section{padding: 64px 0}
.section.narrow{max-width:800px; margin:0 auto}
.section-title{font-size:clamp(22px,3vw,28px); margin:0 0 18px; font-weight:800; letter-spacing:.4px}
.lead{font-size:1.125rem; color:var(--text); opacity:.9}
.muted{color:var(--muted)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(8px);
  background:linear-gradient(180deg,rgba(10,13,18,.9),rgba(10,13,18,.6) 70%, rgba(10,13,18,0));
  border-bottom:1px solid rgba(255,255,255,.04);
}
.site-header .brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  padding:14px 0 14px; margin-left:16px; font-weight:800;
}
.logo{filter: drop-shadow(0 0 12px rgba(0,255,160,.2))}
.brand-name{font-weight:800; font-size:1.05rem; letter-spacing:.4px}
.accent{background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}

.nav{display:flex; align-items:center; gap:18px; margin-right:16px; justify-content:flex-end}
.nav a{color:var(--muted); text-decoration:none; padding:10px 4px; font-weight:600}
.nav a.active{color:var(--text)}
.nav a:hover{color:#fff}
.nav-toggle{display:none; background:transparent; border:0; padding:10px; margin-left:auto; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; border-radius:2px}
.mobile-menu{display:none; flex-direction:column; padding:8px 16px; gap:8px; border-top:1px solid rgba(255,255,255,.06); background:rgba(8,11,16,.8); backdrop-filter: blur(8px)}
.mobile-menu a{color:var(--text); text-decoration:none; padding:10px 6px; border-radius:10px}
.mobile-menu a:hover{background:rgba(255,255,255,.04)}

/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center; padding: 48px 0 16px}
.hero-copy .badge{
  display:inline-block; font-family:"JetBrains Mono", monospace; font-size:.75rem; letter-spacing:.3px;
  padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:var(--muted);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.hero h1{font-size: clamp(28px,5vw,52px); line-height:1.08; margin:12px 0 10px; font-weight:800}
.hero .wa{background:linear-gradient(90deg, var(--accent2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--muted); font-size:1.05rem; max-width:640px}
.cta{display:flex; gap:12px; margin:18px 0}
.cta.center{justify-content:center}
.price-note{color:var(--muted); font-size:.95rem; margin-top:6px}

/* Buttons */
.btn{--b:rgba(255,255,255,.08); --bg:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; letter-spacing:.3px; text-decoration:none; color:#fff; border:1px solid var(--b); background:var(--bg);
  box-shadow: var(--shadow); position:relative; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px; box-shadow: 0 0 0 6px rgba(34,211,238,.12)}
.btn:hover{transform: translateY(-1px)}
.btn-primary{background: linear-gradient(90deg, var(--accent), var(--accent2)); border-color: transparent}
.btn-outline{border-color: rgba(34,211,238,.5)}
.btn-ghost{background: transparent; border-color: rgba(255,255,255,.16)}
.inline{color:#9be7f5}

/* Cards / Glass */
.card.glass{
  background: radial-gradient(150% 140% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.grid2{display:grid; grid-template-columns: repeat(2,1fr); gap:18px}
.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.grid4{display:grid; grid-template-columns: repeat(4,1fr); gap:18px}

.feature{background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:12px}
.feature .icon{font-size:20px; display:inline-block; margin-bottom:6px}

/* Phone mock */
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; min-height:380px}
.glow{position:absolute; inset:-10%; background:radial-gradient(50% 60% at 50% 40%, rgba(0,255,136,.18), transparent), radial-gradient(60% 60% at 60% 20%, rgba(34,211,238,.18), transparent); filter: blur(34px); z-index:-1}
.phone{
  width:min(360px, 90%); background:#0b0f14; border-radius:28px; border:1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden; transform: perspective(1000px) rotateY(-10deg) rotateX(3deg); transition: transform .6s ease;
}
.hero-visual:hover .phone{transform: perspective(1000px) rotateY(0) rotateX(0)}
.phone-notch{height:22px; background:linear-gradient(90deg, #000, #0d131c, #000)}
.chat{padding:14px; display:flex; flex-direction:column; gap:8px}
.bubble{padding:10px 12px; border-radius:14px; font-size:.92rem; line-height:1.4; border:1px solid rgba(255,255,255,.08)}
.bubble.you{align-self:flex-end; background:rgba(255,255,255,.06)}
.bubble.ai{align-self:flex-start; background:linear-gradient(180deg, rgba(0,255,136,.10), rgba(255,255,255,.03))}

/* Timeline */
.timeline{position:relative; list-style:none; padding:0; margin:0}
.timeline::before{content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.timeline li{display:grid; grid-template-columns: 120px 24px 1fr; align-items:flex-start; gap:16px; margin:10px 0}
.timeline .time{color:var(--muted); font-family:"JetBrains Mono", monospace; font-size:.85rem}
.timeline .dot{width:16px; height:16px; border-radius:50%; background: radial-gradient(circle at 40% 40%, var(--accent2), var(--accent)); box-shadow:0 0 10px rgba(0,255,136,.6)}
.timeline .tl-card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px}

/* FAQ */
.faq details{background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:14px; border-radius:12px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:700}
.faq details[open]{background:rgba(255,255,255,.04)}

/* Footer */
.site-footer{padding:28px 0 50px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.footer-grid{display:flex; align-items:center; justify-content:space-between}
.footer-links{display:flex; gap:16px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:#fff}
.brand.small{font-weight:800}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Tables / lists */
.bullets{padding-left:18px}
.bullets li{margin:.4rem 0}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:24px}
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .nav a{display:none}
  .nav-toggle{display:block}
  .mobile-menu{display:flex}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-grid{animation:none}
  .btn, .reveal{transition:none}
  .phone{transition:none}
}