:root{
  /* Light theme */
  --blue1:#2563eb;
  --blue2:#0ea5e9;
  --blue3:#4f46e5;

  --bg:#f6f8fc;
  --surface:rgba(255,255,255,.74);
  --surface-strong:rgba(255,255,255,.84);
  --text:#0f172a;
  --muted:#475569;

  --border:rgba(15,23,42,.12);
  --radius:18px;
  --shadow:0 16px 34px rgba(2,6,23,.10);
  --shadow-soft:0 12px 26px rgba(2,6,23,.08);
}

/* Dark theme overrides */
html[data-theme="dark"]{
  --bg:#0b1220;
  --surface:rgba(16,24,40,.72);
  --surface-strong:rgba(16,24,40,.86);
  --text:#e6edf7;
  --muted:rgba(230,237,247,.70);
  --border:rgba(230,237,247,.14);
  --shadow:0 18px 42px rgba(0,0,0,.35);
  --shadow-soft:0 14px 30px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 600px at 85% 18%, rgba(14,165,233,.12), transparent 55%),
    radial-gradient(800px 600px at 65% 90%, rgba(79,70,229,.10), transparent 60%),
    var(--bg);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(37,99,235,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 18%, rgba(14,165,233,.18), transparent 55%),
    radial-gradient(800px 600px at 65% 90%, rgba(79,70,229,.16), transparent 60%),
    var(--bg);
}

a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px}

/* Header */
.top{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--surface-strong) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 0;
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:22px;height:22px;border-radius:8px;
  background:linear-gradient(135deg,var(--blue1),var(--blue2));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent) inset,
             0 12px 18px color-mix(in srgb, var(--blue1) 22%, transparent);
}
.brand-name{font-weight:900;letter-spacing:.2px}
.tag{font-size:12px;color:var(--muted);margin-top:2px}

.navwrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:900;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav a:hover{
  background:color-mix(in srgb, var(--blue1) 10%, transparent);
  border-color:color-mix(in srgb, var(--blue1) 18%, transparent);
  color:var(--text);
}
.nav a.active{
  background:color-mix(in srgb, var(--blue1) 12%, transparent);
  border-color:color-mix(in srgb, var(--blue1) 24%, transparent);
  color:var(--text);
}
.nav .pill{
  border:1px solid color-mix(in srgb, var(--blue1) 22%, transparent);
  background:color-mix(in srgb, var(--surface-strong) 70%, transparent);
}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:9px 12px;
  font-weight:900;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  cursor:pointer;
  user-select:none;
}
.iconbtn:hover{border-color:color-mix(in srgb, var(--blue1) 24%, transparent)}
.icon{
  width:16px;height:16px;display:inline-block;
  background:linear-gradient(135deg,var(--blue1),var(--blue3));
  -webkit-mask: var(--mask) center / contain no-repeat;
          mask: var(--mask) center / contain no-repeat;
}
.icon.sun{--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12Zm0-16h1v3h-2V2h1Zm0 19h1v3h-2v-3h1ZM2 11h3v2H2v-2Zm17 0h3v2h-3v-2ZM4.2 5.6l2.1-2.1l1.4 1.4L5.6 7L4.2 5.6Zm12.1 12.1l2.1-2.1l1.4 1.4l-2.1 2.1l-1.4-1.4ZM18.4 5.6L17 7l-2.1-2.1l1.4-1.4l2.1 2.1ZM7 17l-1.4 1.4l-2.1-2.1L4.9 15l2.1 2.1Z"/></svg>');}
.icon.moon{--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"/></svg>');}

/* Hero */
.hero{padding:76px 0 38px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}}
h1{font-size:46px;line-height:1.08;margin:0 0 14px}
.subtitle{font-size:18px;color:var(--muted);margin:0 0 10px;line-height:1.6}
.support{color:var(--muted);margin:0 0 18px;line-height:1.6}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 16px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  background:transparent;
}
.btn.primary{
  background:linear-gradient(135deg,var(--blue1),var(--blue3));
  color:#fff;
  border-color:color-mix(in srgb, var(--blue1) 28%, transparent);
  box-shadow:0 14px 26px color-mix(in srgb, var(--blue1) 22%, transparent);
}
.btn.ghost{
  color:var(--blue1);
  background:color-mix(in srgb, var(--surface-strong) 70%, transparent);
  border-color:color-mix(in srgb, var(--blue1) 18%, transparent);
}
.btn.small{padding:10px 12px;border-radius:14px;font-weight:900}

.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badge{
  font-size:12px;color:color-mix(in srgb, var(--text) 78%, transparent);
  background:color-mix(in srgb, var(--surface-strong) 75%, transparent);
  border:1px solid var(--border);
  padding:8px 10px;border-radius:999px;
  box-shadow:0 10px 18px rgba(2,6,23,.06);
}

/* Sections */
.section{padding:62px 0}
.section.alt{background:color-mix(in srgb, var(--blue1) 7%, var(--surface-strong))}
h2{margin:0 0 10px;font-size:22px}
h3{margin:0 0 8px;font-size:16px}
p{line-height:1.65}
.muted{color:var(--muted)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 980px){h1{font-size:40px}.grid.two{grid-template-columns:1fr}}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width:220px; height:220px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--blue1) 22%, transparent), transparent 60%);
  transform:rotate(12deg);
}
.card > *{position:relative; z-index:1}

.feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width: 980px){.feature-row{grid-template-columns:1fr}}
.feature{border-radius:var(--radius);padding:18px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.feature .title{font-weight:950;font-size:16px;margin-bottom:6px}
.feature .desc{color:var(--muted);line-height:1.55}
.feature .chip{display:inline-flex;align-items:center;margin-top:12px;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid var(--border);background:color-mix(in srgb, var(--surface-strong) 75%, transparent)}
.feature.v1{--accent:var(--blue1)}
.feature.v2{--accent:var(--blue2)}
.feature.v3{--accent:var(--blue3)}
.feature::after{
  content:"";
  position:absolute; inset:-60px -60px auto auto;
  width:220px; height:220px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);
  transform:rotate(10deg);
}
.feature .bar{height:4px;border-radius:999px;background:var(--accent);width:42px;margin-bottom:10px;box-shadow:0 10px 20px color-mix(in srgb, var(--accent) 25%, transparent)}
.feature *{position:relative;z-index:1}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 980px){.split{grid-template-columns:1fr}}
.split-card{border-radius:var(--radius);padding:22px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden;position:relative}
.split-card::after{
  content:"";position:absolute; inset:-60px -60px auto auto;
  width:260px;height:260px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  transform:rotate(12deg);
}
.split-card .bar{height:4px;border-radius:999px;background:var(--accent);width:42px;margin-bottom:12px}
.split-card *{position:relative;z-index:1}

.callout{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input[type="email"], select{
  flex:1 1 220px;min-width:220px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);
  outline:none;font-size:14px;background:color-mix(in srgb, var(--bg) 70%, transparent);color:var(--text)
}
select{flex:0 1 200px}
input:focus, select:focus{border-color:color-mix(in srgb, var(--blue1) 42%, transparent);box-shadow:0 0 0 4px color-mix(in srgb, var(--blue1) 18%, transparent)}
.fineprint{font-size:12px;color:var(--muted);margin:10px 0 0}

.footer{border-top:1px solid var(--border);background:color-mix(in srgb, var(--surface-strong) 70%, transparent);padding:18px 0}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.page-title{padding:40px 0 14px}
.page-title h1{font-size:34px;margin:0 0 10px}
.breadcrumb{color:var(--muted);font-size:13px}

/* Market cards */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.tool-card::after{
  content:"";position:absolute;inset:-70px -70px auto auto;width:260px;height:260px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%);
  transform:rotate(12deg);
}
.tool-card *{position:relative;z-index:1}
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tool-title{font-weight:950;font-size:16px;margin:0}
.tool-sub{margin:6px 0 0;color:var(--muted);line-height:1.55}
.tool-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid var(--border);background:color-mix(in srgb, var(--surface-strong) 75%, transparent)}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pulse{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent);margin-top:3px}
.small{font-size:12px;color:var(--muted)}




/* Header hardening (prevents tall header) */
.brand{display:flex;gap:12px;align-items:center}
.logo-img{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  border-radius:8px;
  display:block;
  object-fit:contain;
}
.top img{max-height:28px}
.header-row{align-items:center}

/* Mock screenshots */
.mock-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:14px}
.mockshot{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.mockshot img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid color-mix(in srgb, var(--border) 70%, transparent)}
.mockcap{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}