:root {
  --bg: #0a0a0f;
  --bg-card: rgba(15,15,25,0.85);
  --bg-card-hover: rgba(20,20,40,0.95);
  --text: #e8e8f0;
  --text-dim: #8888aa;
  --accent: #4a9eff;
  --accent-glow: rgba(74,158,255,0.25);
  --border: rgba(74,158,255,0.2);
  --border-hover: rgba(74,158,255,0.55);
  --grad: linear-gradient(135deg,#4a9eff,#7c4dff);
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --ease: 0.3s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'JetBrains Mono','Fira Code',monospace;
}

[data-theme="light"] {
  --bg: #f5f5fa;
  --bg-card: rgba(255,255,255,0.92);
  --bg-card-hover: #fff;
  --text: #1a1a2e;
  --text-dim: #666680;
  --accent: #2563eb;
  --accent-glow: rgba(37,99,235,0.12);
  --border: rgba(37,99,235,0.18);
  --border-hover: rgba(37,99,235,0.45);
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--ease), color var(--ease);
}
a { color: var(--accent); text-decoration:none; transition: color var(--ease); }
a:hover { color: var(--border-hover); }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* navbar */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:64px; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,10,15,0.82);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition: background var(--ease), box-shadow var(--ease);
}
[data-theme="light"] .nav { background:rgba(245,245,250,0.85); }
.nav.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.25); }

.nav-logo {
  display:flex; align-items:center; gap:0.5rem;
  font-size:1.35rem; font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-logo svg { width:28px; height:28px; }

.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a {
  color:var(--text-dim); font-size:0.88rem; font-weight:500;
  position:relative; transition:color var(--ease);
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transition:transform var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }

.nav-actions { display:flex; gap:0.6rem; align-items:center; }
.btn-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--ease);
}
.btn-icon svg { width:18px; height:18px; color:var(--text-dim); transition:color var(--ease); }
.btn-icon:hover { border-color:var(--border-hover); }
.btn-icon:hover svg { color:var(--accent); }

.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1.6rem; border-radius:var(--radius-sm);
  background:var(--grad); color:#fff;
  font-weight:600; font-size:0.9rem;
  box-shadow:0 4px 15px var(--accent-glow);
  transition:all var(--ease);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 25px var(--accent-glow);
  color:#fff;
}
.btn-primary svg { width:18px; height:18px; }

.btn-outline {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1.6rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); color:var(--text);
  font-weight:600; font-size:0.9rem;
  transition:all var(--ease);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-outline svg { width:18px; height:18px; }

/* lang dropdown */
.lang-dd { position:relative; }
.lang-menu {
  position:absolute; top:calc(100% + 4px); right:0;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:0.4rem 0; min-width:110px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--ease);
  backdrop-filter:blur(20px);
}
.lang-dd.open .lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang-opt {
  display:block; padding:0.45rem 1rem;
  color:var(--text-dim); font-size:0.82rem;
  transition:all var(--ease); cursor:pointer;
}
.lang-opt:hover { color:var(--accent); background:var(--accent-glow); }
.lang-opt.active { color:var(--accent); font-weight:600; }

/* mobile */
.nav-toggle { display:none; }
@media(max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    background:var(--bg-card); backdrop-filter:blur(20px);
    flex-direction:column; padding:1.5rem 2rem;
    border-bottom:1px solid var(--border);
    transform:translateY(-110%); opacity:0;
    transition:all var(--ease);
  }
  .nav-links.open { transform:translateY(0); opacity:1; }
  .nav-links a { padding:0.6rem 0; font-size:1rem; }
}

/* hero */
.hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding:6rem 2rem 4rem;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74,158,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(124,77,255,0.05) 0%, transparent 50%),
    var(--bg);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:60px 60px; opacity:0.12;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%);
}
.hero-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; width:2px; height:2px;
  background:var(--accent); border-radius:50%; opacity:0;
  animation:float-up linear infinite;
}
@keyframes float-up {
  0% { opacity:0; transform:translateY(100vh) scale(0); }
  10% { opacity:0.5; }
  90% { opacity:0.5; }
  100% { opacity:0; transform:translateY(-10vh) scale(1); }
}

.hero-content { position:relative; z-index:2; text-align:center; max-width:860px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.35rem 1rem; border-radius:999px;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--accent); font-size:0.78rem; font-weight:600;
  margin-bottom:1.5rem;
  opacity:0; transform:translateY(20px);
  animation:fadeUp 0.6s ease 0.3s forwards;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero h1 {
  font-size:clamp(2.5rem,6vw,4.2rem);
  font-weight:800; line-height:1.1; margin-bottom:1.25rem;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.8s ease 0.5s forwards;
}
.hero h1 .grad {
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p {
  font-size:1.1rem; color:var(--text-dim);
  max-width:560px; margin:0 auto 2.5rem;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.8s ease 0.7s forwards;
}
.hero-btns {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(30px);
  animation:fadeUp 0.8s ease 0.9s forwards;
}
.hero-stats {
  display:flex; gap:3rem; justify-content:center; margin-top:3rem;
  opacity:0; animation:fadeUp 0.8s ease 1.1s forwards;
}
.stat { text-align:center; }
.stat-num { font-size:2rem; font-weight:800; color:var(--accent); font-family:var(--mono); }
.stat-label { font-size:0.78rem; color:var(--text-dim); margin-top:0.2rem; }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* hero fly-in */
.hero-content .hero-badge { animation:flyIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-content h1 { animation:flyIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.hero-content p { animation:flyIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero-btns { animation:flyIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.8s both; }
.hero-stats { animation:flyIn 0.8s cubic-bezier(0.16,1,0.3,1) 1s both; }
@keyframes flyIn {
  0% { opacity:0; transform:translateY(40px) scale(0.96); filter:blur(6px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

/* glow pulse on badge */
.hero-badge { animation:flyIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both, badgeGlow 3s ease-in-out 1.5s infinite; }
@keyframes badgeGlow {
  0%,100% { box-shadow:0 0 0 0 var(--accent-glow); }
  50% { box-shadow:0 0 20px 4px var(--accent-glow); }
}

/* stat number shimmer */
.stat-num { position:relative; }
.stat-num::after {
  content:''; position:absolute; inset:-2px;
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  animation:shimmer 3s ease-in-out infinite;
  pointer-events:none; border-radius:4px;
}
@keyframes shimmer {
  0% { transform:translateX(-100%); opacity:0; }
  50% { opacity:1; }
  100% { transform:translateX(100%); opacity:0; }
}

/* feat card stagger */
.feat-card { transition:all 0.4s cubic-bezier(0.16,1,0.3,1); }
.feat-card:hover { transform:translateY(-6px) scale(1.02); }

/* mod tag bounce */
.mod-tag { transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.mod-tag:hover { transform:translateY(-3px) scale(1.04); }

/* screenshot parallax hint */
.shot-card { transition:all 0.5s cubic-bezier(0.16,1,0.3,1); }
.shot-card:hover { transform:translateY(-6px) scale(1.01); }

/* cta button pulse */
.cta .btn-primary { animation:ctaPulse 2.5s ease-in-out infinite; }
@keyframes ctaPulse {
  0%,100% { box-shadow:0 4px 15px var(--accent-glow); }
  50% { box-shadow:0 4px 30px var(--accent-glow),0 0 60px var(--accent-glow); }
}

/* sections */
.section { padding:6rem 2rem; position:relative; }
.container { max-width:1140px; margin:0 auto; }
.sec-hd { text-align:center; margin-bottom:3.5rem; }
.sec-hd h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:0.6rem; }
.sec-hd p { color:var(--text-dim); font-size:1rem; max-width:520px; margin:0 auto; }

/* features */
.feat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
}
.feat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.75rem;
  transition:all var(--ease);
  position:relative; overflow:hidden;
  display:block;
}
.feat-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--ease);
}
.feat-card:hover {
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.feat-card:hover::before { transform:scaleX(1); }
.feat-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-glow);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.feat-icon svg { width:22px; height:22px; color:var(--accent); }
.feat-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:0.4rem; }
.feat-card p { color:var(--text-dim); font-size:0.88rem; line-height:1.55; }

/* screenshots */
.shot-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:768px) { .shot-grid { grid-template-columns:1fr; } }
.shot-card {
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border);
  transition:all var(--ease); position:relative;
}
.shot-card:hover { border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--shadow); }
.shot-card img { width:100%; transition:transform 0.5s ease; }
.shot-card:hover img { transform:scale(1.03); }
.shot-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,10,15,0.8),transparent 50%);
  display:flex; align-items:flex-end; padding:1.25rem;
  opacity:0; transition:opacity var(--ease);
}
.shot-card:hover .shot-overlay { opacity:1; }
.shot-overlay span { color:#fff; font-weight:600; font-size:0.9rem; }

/* modules */
.mod-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0.75rem;
}
.mod-tag {
  padding:0.7rem 1rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:0.6rem;
  font-weight:600; font-size:0.88rem;
  transition:all var(--ease);
  cursor:pointer;
}
.mod-tag:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.mod-tag svg { width:18px; height:18px; flex-shrink:0; }

/* cta */
.cta {
  text-align:center; padding:6rem 2rem; position:relative;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,var(--accent-glow),transparent 70%);
  opacity:0.5;
}
.cta-inner { position:relative; z-index:2; }
.cta-inner h2 { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; margin-bottom:0.8rem; }
.cta-inner p { color:var(--text-dim); font-size:1.05rem; margin-bottom:2rem; max-width:460px; margin-left:auto; margin-right:auto; }

/* footer */
.footer {
  padding:2.5rem 2rem;
  border-top:1px solid var(--border);
  text-align:center;
}
.footer-links { display:flex; gap:1.5rem; justify-content:center; margin-bottom:1rem; flex-wrap:wrap; }
.footer-links a { color:var(--text-dim); font-size:0.82rem; }
.footer-links a:hover { color:var(--accent); }
.footer-copy { color:var(--text-dim); font-size:0.75rem; }

/* reveal */
/* pricing */
.price-scroll {
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  padding:0.5rem 0 1rem;
  margin:0 -2rem;
  padding-left:2rem;
  padding-right:2rem;
}
.price-scroll::-webkit-scrollbar { display:none; }

.price-track {
  display:flex;
  gap:0.75rem;
  width:max-content;
  padding-bottom:0.5rem;
}
.price-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  text-align:center;
  transition:all var(--ease);
  position:relative;
  display:block;
  min-width:140px;
  flex-shrink:0;
}
.price-card:hover {
  border-color:var(--border-hover);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.price-card.highlight {
  border-color:var(--accent);
  background:var(--accent-glow);
}
.price-card.highlight:hover {
  border-color:var(--accent);
  box-shadow:0 8px 30px var(--accent-glow);
}
.price-card.agent {
  border-color:#ff9500;
  background:rgba(255,149,0,0.08);
}
.price-card.agent:hover {
  border-color:#ff9500;
  box-shadow:0 8px 30px rgba(255,149,0,0.2);
}
.price-badge {
  position:absolute; top:-10px; right:12px;
  background:var(--grad);
  color:#fff;
  font-size:0.65rem;
  font-weight:700;
  padding:0.2rem 0.6rem;
  border-radius:6px;
}
.price-card.agent .price-badge {
  background:linear-gradient(135deg,#ff9500,#ff6b00);
}
.price-name {
  font-size:0.9rem;
  font-weight:700;
  color:var(--text-dim);
  margin-bottom:0.5rem;
}
.price-val {
  font-size:2rem;
  font-weight:800;
  margin-bottom:0.3rem;
  font-family:var(--mono);
}
.price-sym {
  font-size:1rem;
  font-weight:600;
  vertical-align:super;
  color:var(--text-dim);
}
.price-unit {
  font-size:0.75rem;
  font-weight:500;
  color:var(--text-dim);
}
.price-sub {
  font-size:0.78rem;
  color:var(--text-dim);
}
@media(max-width:640px) {
  .price-scroll { margin:0 -1rem; padding-left:1rem; padding-right:1rem; }
  .price-card { min-width:130px; padding:1rem 1.25rem; }
  .price-val { font-size:1.6rem; }
}

/* reveal */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }
.reveal-l { opacity:0; transform:translateX(-36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-l.vis { opacity:1; transform:translateX(0); }
.reveal-r { opacity:0; transform:translateX(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal-r.vis { opacity:1; transform:translateX(0); }

/* lazy img */
.lazy { opacity:0; transition:opacity 0.5s; }
.lazy.ld { opacity:1; }