:root {
  --bg:#ffffff;
  --bg-2:#f8fafc;
  --panel:#ffffff;
  --panel-soft:#f7f8fa;
  --line:rgba(15,23,42,.10);
  --text:#102033;
  --muted:#617187;
  --soft:#8290a3;
  --accent:#2563eb;
  --accent-2:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow:0 28px 80px rgba(15,23,42,.11);
  --shadow-soft:0 12px 28px rgba(15,23,42,.065);
  --max:1180px;
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; min-height:100%; scroll-behavior:smooth; }
body {
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:#fff;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; height:auto; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline:3px solid rgba(37,99,235,.28); outline-offset:3px; }
::selection { background:rgba(16,185,129,.18); color:var(--text); }
.container { width:min(calc(100% - 32px), var(--max)); margin:0 auto; }
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(15,23,42,.035);
}
.site-header-inner {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark {
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--shadow-soft);
  flex:0 0 auto;
}
.brand-copy strong { display:block; font-size:1rem; line-height:1; }
.brand-copy span { display:block; margin-top:4px; color:var(--muted); font-size:.74rem; line-height:1.2; }
.nav { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:.9rem; font-weight:750; }
.nav a:hover { color:var(--text); }
.header-actions { display:flex; align-items:center; gap:10px; }
.btn {
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:850;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,.08); border-color:rgba(15,23,42,.18); }
.btn-primary { color:#fff; border:none; background:linear-gradient(135deg, #102033, #1d4ed8); box-shadow:0 18px 40px rgba(15,23,42,.18); }
.btn-soft { color:var(--text); background:#f8fafc; border-color:rgba(15,23,42,.10); }
.hero { padding:80px 0 54px; border-bottom:1px solid rgba(15,23,42,.07); background:linear-gradient(180deg,#fff 0%,#fff 72%,#fafafa 100%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(360px,.72fr); gap:34px; align-items:center; }
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent-2);
  box-shadow:0 0 0 6px rgba(16,185,129,.13);
}
h1 {
  margin:18px 0 0;
  font-size:clamp(2.8rem,5vw,5.4rem);
  line-height:.94;
  letter-spacing:-.06em;
  max-width:11ch;
}
.hero-copy {
  margin:22px 0 0;
  color:var(--muted);
  max-width:66ch;
  font-size:1.04rem;
  line-height:1.75;
}
.hero-actions { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-panel {
  padding:24px;
  border-radius:28px;
  background:linear-gradient(135deg,#08111f,#132339);
  color:#fff;
  box-shadow:0 30px 80px rgba(15,23,42,.22);
  border:1px solid rgba(96,165,250,.22);
}
.panel-kicker { color:#8fdcc6; font-size:.74rem; font-weight:950; text-transform:uppercase; letter-spacing:.1em; }
.panel-value { margin-top:14px; font-size:clamp(2.7rem,5vw,4.5rem); line-height:.88; letter-spacing:-.08em; font-weight:950; }
.panel-copy { margin-top:14px; color:rgba(226,232,240,.82); line-height:1.6; }
.signal-grid { margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.signal {
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.signal span { display:block; color:rgba(226,232,240,.72); font-size:.72rem; font-weight:850; }
.signal strong { display:block; margin-top:7px; color:#fff; font-size:1rem; letter-spacing:-.03em; }
.product-showcase {
  padding:34px 0 58px;
  background:#fff;
}
.showcase-shell {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:28px;
  align-items:center;
}
.showcase-copy {
  max-width:540px;
}
.showcase-label {
  display:inline-flex;
  padding:8px 11px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.showcase-copy h2 {
  margin:16px 0 0;
  font-size:clamp(1.9rem,3vw,3rem);
  line-height:1;
  letter-spacing:-.045em;
}
.showcase-copy p {
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.7;
}
.proof-strip {
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.proof-pill {
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.045);
}
.proof-pill span {
  display:block;
  color:var(--soft);
  font-size:.7rem;
  font-weight:850;
}
.proof-pill strong {
  display:block;
  margin-top:6px;
  font-size:.9rem;
  letter-spacing:-.025em;
}
.product-frame {
  overflow:hidden;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 28px 80px rgba(15,23,42,.14);
}
.browser-bar {
  height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 15px;
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.browser-dot {
  width:10px;
  height:10px;
  border-radius:999px;
  background:#cbd5e1;
}
.browser-dot:first-child { background:#ef4444; }
.browser-dot:nth-child(2) { background:#f59e0b; }
.browser-dot:nth-child(3) { background:#10b981; }
.browser-address {
  margin-left:8px;
  min-width:0;
  flex:1;
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--soft);
  font-size:.72rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-frame img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
}
.section { padding:54px 0; }
.section:nth-of-type(even) { background:#fafafa; border-top:1px solid rgba(15,23,42,.055); border-bottom:1px solid rgba(15,23,42,.055); }
.section-head { max-width:820px; margin-bottom:22px; }
.section-head h2 { margin:0; font-size:clamp(2rem,3vw,3.1rem); line-height:1; letter-spacing:-.045em; }
.section-head p { margin:12px 0 0; color:var(--muted); line-height:1.7; font-size:.98rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.card {
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(15,23,42,.055);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#102033,var(--accent-2));
  opacity:.78;
}
.card:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 50px rgba(15,23,42,.085);
  border-color:rgba(15,23,42,.16);
}
.card h3 { margin:0 0 9px; font-size:1.06rem; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); line-height:1.68; font-size:.94rem; }
.card ul { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.card li { position:relative; padding-left:18px; color:var(--soft); line-height:1.55; font-size:.9rem; }
.card li::before { content:""; position:absolute; left:0; top:.72em; width:7px; height:7px; border-radius:999px; transform:translateY(-50%); background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.workflow { display:grid; gap:10px; counter-reset:step; }
.workflow-item {
  counter-increment:step;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.workflow-item::before {
  content:counter(step);
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#102033;
  color:#fff;
  font-weight:950;
}
.workflow-item strong { display:block; font-size:.96rem; }
.workflow-item span { display:block; margin-top:5px; color:var(--muted); line-height:1.55; font-size:.9rem; }
.feature-links { display:flex; flex-wrap:wrap; gap:10px; }
.feature-links a {
  padding:10px 13px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:var(--text);
  font-size:.84rem;
  font-weight:850;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feature-links a:hover {
  transform:translateY(-1px);
  border-color:rgba(15,23,42,.18);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}
.cta {
  padding:32px;
  border-radius:30px;
  background:linear-gradient(135deg,#0b1220,#132339);
  color:#fff;
  border:1px solid rgba(15,23,42,.18);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.cta h2 { margin:0; font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.045em; }
.cta p { margin:9px 0 0; color:rgba(226,232,240,.78); line-height:1.65; max-width:660px; }
.cta .btn-primary { background:#fff; color:#102033; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.site-footer { padding:28px 0 42px; color:var(--muted); font-size:.9rem; }
.footer-inner { padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:980px) {
  .site-header { position:relative; }
  .site-header-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px 0; min-height:auto; }
  .nav { grid-column:1/-1; order:3; overflow:auto; padding-bottom:4px; }
  .header-actions .btn-soft { display:none; }
  .hero { padding:40px 0 28px; }
  .hero-grid, .grid-3, .grid-2, .showcase-shell { grid-template-columns:1fr; }
  .hero-panel { order:-1; }
  h1 { max-width:12ch; }
}
@media(max-width:620px) {
  .container { width:min(calc(100% - 20px), var(--max)); }
  .brand-copy span { display:none; }
  .header-actions .btn { min-height:42px; padding:0 13px; font-size:.85rem; }
  .nav { gap:12px; font-size:.82rem; }
  h1 { font-size:2.35rem; max-width:100%; }
  .hero-copy { font-size:.96rem; }
  .hero-actions .btn, .cta .btn { width:100%; }
  .signal-grid { grid-template-columns:1fr; }
  .proof-strip { grid-template-columns:1fr; }
  .product-frame { border-radius:18px; }
  .cta { padding:22px; }
}