:root{--bg:#0b0c0f;--card:#121318;--text:#e6e8ee;--muted:#9aa0aa;--brand:#4c8dff;--brand2:#7aa2ff;--border:#1c1e26;--footer:#0e1218}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fa;
    --card:#ffffff;
    --text:#1b1d22;
    --muted:#5a6270;
    --brand:#3b78ff;
    --brand2:#6ea0ff;
    --border:#d0d5dd;
    --footer:#f1f2f5;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text)}
.hero{padding:64px 24px;text-align:center}
.logo{width:96px;height:96px;display:block;margin:0 auto 16px}
.logo--small{width:28px;height:28px;margin:0}
.navbar{position:sticky;top:0;z-index:10;background:var(--card)}
.navbar .inner{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nav-links a{padding:6px 10px;border-radius:8px;background:transparent;color:var(--text);text-decoration:none}
.nav-links a:hover{color:var(--brand)}
.dropdown{position:relative}
.dropdown .trigger{padding:6px 10px;background:transparent;color:var(--text);cursor:pointer;border:none;outline:none;-webkit-appearance:none;appearance:none;border-radius:0;font:inherit}
.dropdown .trigger:hover{color:var(--brand)}
.dropdown .menu{position:absolute;top:36px;right:0;min-width:160px;background:var(--card);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(6px) scale(.98);transition:opacity .18s ease, transform .18s ease;pointer-events:none}
.dropdown .menu a{display:block;padding:10px 12px;color:var(--text)}
.dropdown .menu a:hover{color:var(--brand)}
.dropdown.open .menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
@media (hover: hover){
  .dropdown:hover .menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
}
.logo-dark{display:block}
.logo-light{display:none}
@media (prefers-color-scheme: light){
  .logo-dark{display:none}
  .logo-light{display:block}
}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:block}
.subtitle{color:var(--muted);max-width:900px;margin:8px auto 16px;line-height:1.6}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--border);color:var(--text);text-decoration:none;background:var(--card)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));border-color:transparent;color:#fff}
.container{max-width:1040px;margin:0 auto;padding:0 24px}
section{margin:24px 0;padding:24px}
h1{font-size:32px;margin:8px 0}
h2{font-size:20px;margin:0 0 16px}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.link-card{display:flex;align-items:center;justify-content:center;padding:14px;border:1px solid var(--border);border-radius:12px;color:var(--text);text-decoration:none;transition:transform .12s ease, border-color .12s ease}
.link-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.features{margin:0;padding:0 0 0 18px;line-height:1.8;color:var(--muted)}
.cta-block{display:flex;justify-content:center}
.footer{padding:28px 24px;text-align:center;color:var(--muted);background:var(--footer);border-top:1px solid var(--border)}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fa;
    --card:#ffffff;
    --text:#1b1d22;
    --muted:#5a6270;
    --brand:#3b78ff;
    --brand2:#6ea0ff;
    --border:#d0d5dd;
    --footer:#f1f2f5;
  }
}
:root[data-theme="light"]{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#1b1d22;
  --muted:#5a6270;
  --brand:#3b78ff;
  --brand2:#6ea0ff;
  --border:#d0d5dd;
  --footer:#f1f2f5;
}
:root[data-theme="dark"]{
  --bg:#0b0c0f;
  --card:#121318;
  --text:#e6e8ee;
  --muted:#9aa0aa;
  --brand:#4c8dff;
  --brand2:#7aa2ff;
  --border:#1c1e26;
  --footer:#0e1218;
}
.theme-toggle{padding:6px 10px;background:transparent;color:var(--text);cursor:pointer;border:none;outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.theme-toggle:hover{color:var(--brand)}
.theme-toggle svg{width:18px;height:18px;display:block}
#themeIcon{display:inline-flex;align-items:center;justify-content:center}
#themeIcon svg{transition:transform .18s ease, opacity .18s ease}
#themeIcon.swap svg{transform:scale(.9) rotate(8deg);opacity:.7}

/* Product Comparison Styles */
.product-comparison{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin:32px 0;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.product-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  text-align:center;
  transition:transform .2s ease, border-color .2s ease;
  position:relative;
}

.product-card:hover{
  transform:translateY(-4px);
  border-color:var(--brand);
}

.product-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:16px;
}

.product-header h3{
  margin:0;
  font-size:22px;
  font-weight:600;
}

.product-badge{
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.product-badge.professional{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;
}

.product-badge.lite{
  background:linear-gradient(90deg,#10b981,#34d399);
  color:#fff;
}

.product-icon{
  font-size:48px;
  margin-bottom:16px;
  line-height:1;
}

.product-description{
  color:var(--muted);
  margin:16px 0;
  line-height:1.6;
  font-size:15px;
}

.product-features{
  text-align:left;
  margin:24px 0;
  padding:0;
  list-style:none;
  line-height:1.8;
  font-size:14px;
  color:var(--text);
}

.product-features li{
  padding:4px 0;
}

.product-features li:nth-child(7){
  color:#f59e0b;
  font-style:italic;
}

.product-cta{
  margin-top:24px;
}

/* Language dropdown styling */
#lang .trigger{
  padding:6px 8px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  border:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  border-radius:6px;
  font-size:14px;
}

#lang .trigger:hover{
  color:var(--brand);
  background:rgba(74, 141, 255, 0.1);
}

#lang .menu a{
  display:block;
  padding:8px 12px;
  color:var(--text);
  text-decoration:none;
}

#lang .menu a:hover{
  color:var(--brand);
  background:rgba(74, 141, 255, 0.1);
}

@media (max-width: 640px){
  .navbar .inner{gap:6px;padding:6px 10px}
  .nav-links{gap:6px;flex-wrap:wrap}
  .theme-toggle{padding:4px 6px}
  #lang .trigger{padding:4px 6px;font-size:12px}
}