:root {
  --bg: #0b0f1a;
  --bg-alt: #111827;
  --card: #161e2e;
  --text: #e5e9f0;
  --muted: #94a3b8;
  --accent: #22c55e;
  --accent-hover: #16a34a;
  --accent2: #38bdf8;
  --border: #1f2a3d;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Nav */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,15,26,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-size: 1.25rem; font-weight: 700; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo img { height: 32px; width: 32px; border-radius: 8px; }
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.btn {
  display: inline-block;
  background: var(--accent-hover);
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}
.btn:hover { background: #15803d; transform: translateY(-1px); }
.btn-small { padding: 8px 18px; font-size: 0.9rem; }
.btn-outline {
  background: transparent;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--card); }

/* Hero */
.hero { padding: 96px 0 72px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -50% -20%;
  background: radial-gradient(ellipse at 50% 0%, rgba(34,197,94,0.12), transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(56,189,248,0.08), transparent 50%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(1.7rem, 3.1vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  position: relative;
}
.hero p.sub {
  font-size: 1.2rem; color: var(--muted);
  max-width: 640px; margin: 0 auto 36px; position: relative;
}
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }
.hero-note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); position: relative; }

/* App mockup — the interactive demo of the desktop app, iframed for isolation
   (demo.html ships its own CSS, which would otherwise collide with .btn/.card).
   Wider than the old screenshot: the demo needs 980px to lay out its sidebar
   beside the tabs, and below that it falls back to its own stacked layout. */
/* The demo breaks out of the 1100px .container: a desktop app UI needs the
   room, and the sidebar + tab pane read much better wide. Capped at 1440px so
   it does not sprawl on an ultrawide monitor. The 48px keeps it clear of the
   scrollbar (100vw includes it, the document width does not). */
.mockup {
  width: min(1440px, calc(100vw - 48px));
  max-width: none;
  margin: 64px 0 0 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}
.mockup img { display: block; width: 100%; height: auto; }
.mockup iframe {
  display: block; width: 100%; border: 0;
  height: 706px;                 /* replaced by the real height on load */
  color-scheme: dark;
  background: var(--card);       /* any transient gap shows the card, not white */
}
.mockup-hint {
  width: min(1440px, calc(100vw - 48px));
  margin: 12px 0 0 50%;
  transform: translateX(-50%);
  color: var(--muted); font-size: 0.85rem; text-align: center;
}
@media (max-width: 640px) {
  .mockup, .mockup-hint { width: calc(100vw - 32px); }
}

/* Sections */
section { padding: 88px 0; }
section.alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.section-head h2 { font-size: 2rem; font-weight: 700; margin-bottom: 12px; }
.section-head p { color: var(--muted); }

/* Features */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .2s, border-color .2s;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(34,197,94,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 18px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.95rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; counter-reset: step; }
.step { text-align: center; }
.step .num {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hover), #0284c7);
  color: #ffffff; font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.plan {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .2s, border-color .2s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--accent); }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(34,197,94,0.12); }
.plan .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-hover); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plan .price { font-size: 1.7rem; font-weight: 800; margin: 6px 0 2px; }
.plan .price.quote { font-size: 1.05rem; font-weight: 600; color: var(--muted); }
.plan .tagline { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan li { position: relative; padding-left: 26px; font-size: 0.94rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.plan li strong { font-weight: 700; }
.plan li.no { color: var(--muted); }
.plan li.no::before { content: "—"; color: var(--muted); }
.plan .btn { width: 100%; text-align: center; margin-top: auto; }
.plans-note { text-align: center; color: var(--muted); font-size: 0.88rem; margin-top: 28px; }

/* FAQ */
details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px;
}
details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer p, footer a { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 24px; }

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links { gap: 8px; }
  .logo { font-size: 1.1rem; }
  .btn-small { padding: 7px 10px; font-size: 0.8rem; }
  .logo { gap: 5px; }
  section { padding: 60px 0; }
}