:root {
  --bg: #06101A;
  --panel: #07111F;
  --layer: #081725;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.68);
  --text-muted: rgba(255,255,255,0.48);
  --accent: #7DD3FC;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, rgba(125,211,252,0.06), transparent 30%), linear-gradient(180deg, #06101A 0%, #07111F 45%, #06101A 100%);
  color: var(--text);
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: rgba(7,17,31,0.8); border-bottom: 1px solid var(--border); }
.navbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo-wrap { display:flex; align-items:center; gap:14px; }
.logo-mark { width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; background: rgba(125,211,252,0.10); border:1px solid rgba(125,211,252,0.24); color: var(--accent); font-weight: 800; letter-spacing: 0.08em; }
.logo-text { display:flex; flex-direction:column; gap:2px; }
.logo-name { font-size: 14px; font-weight: 700; letter-spacing: 0.22em; }
.logo-line { font-size: 11px; color: var(--text-muted); }
.nav-links { list-style:none; display:flex; gap:10px; margin:0; padding:0; flex-wrap:wrap; }
.nav-links a { padding:10px 14px; border-radius:999px; color: var(--text-secondary); transition: .2s ease; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.07); color: var(--text); }
.header-cta { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:16px; background:#fff; color:#06101A; font-weight:600; }
.hero { padding: 92px 0 84px; border-bottom: 1px solid var(--border); }
.hero-grid { display:grid; grid-template-columns: 1.08fr 0.92fr; gap:28px; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid rgba(125,211,252,0.20); background: rgba(125,211,252,0.10); color: var(--accent); font-size:12px; letter-spacing:0.24em; text-transform: uppercase; }
.badge-dot { width:8px; height:8px; border-radius:999px; background: var(--accent); }
h1 { font-size: 60px; line-height: 1.03; margin: 20px 0 0; max-width: 860px; }
h2 { font-size: 40px; line-height: 1.08; margin: 0 0 14px; }
.h2-tight { font-size: 30px; }
h3 { margin: 0 0 10px; font-size: 22px; line-height:1.2; }
.eyebrow { color: rgba(125,211,252,0.82); font-size:12px; text-transform:uppercase; letter-spacing:0.28em; margin-bottom: 12px; }
.lead { color: var(--text-secondary); font-size: 20px; margin: 22px 0 0; max-width: 760px; }
.section-copy, .muted { color: var(--text-secondary); font-size: 18px; }
.small { font-size: 12px; }
.title-sm { font-size: 14px; font-weight: 600; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.row { display:flex; gap:16px; align-items:center; }
.between { justify-content: space-between; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px; border-radius:18px; border:1px solid var(--border); font-weight:600; transition:.2s ease; }
.btn.primary { background:#fff; color:#06101A; }
.btn.primary:hover { background: rgba(255,255,255,0.92); }
.btn.secondary { background: rgba(255,255,255,0.05); color: var(--text); }
.btn.secondary:hover { background: rgba(255,255,255,0.10); }
.trust-strip { display:grid; gap:12px; grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
.trust-strip div, .pill { padding:14px 16px; border-radius:18px; border:1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); font-size:14px; }
.pill.warning { color:#FBBF24; }
section { padding: 96px 0; border-bottom: 1px solid var(--border); }
.grid-2, .grid-3 { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card, .panel, .cta-box, .mockup-shell, .workflow-stack > div { border:1px solid var(--border); background: var(--surface); border-radius: 28px; }
.card, .panel { padding: 26px; }
.card p, .panel p, .stat-sub, .list li { color: var(--text-secondary); }
.card-icon { width:48px; height:48px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; border:1px solid rgba(125,211,252,0.20); background: rgba(125,211,252,0.10); color: var(--accent); font-weight:700; }
.mockup-shell { overflow:hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.30); }
.mockup-top { padding:18px 20px; border-bottom:1px solid var(--border); background: rgba(255,255,255,0.04); display:flex; justify-content:space-between; gap:16px; align-items:center; }
.mockup-body { padding:20px; display:grid; gap:16px; }
.mockup-panel { border:1px solid var(--border); background: #081725; border-radius: 22px; padding: 16px; }
.mockup-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.stat { border-radius:18px; background: rgba(255,255,255,0.05); padding:14px; }
.stat-label { font-size:11px; text-transform:uppercase; letter-spacing:0.2em; color: var(--text-muted); }
.stat-value { margin-top:8px; font-size:15px; color: var(--text); }
.dual-grid { display:grid; gap:16px; grid-template-columns: repeat(2, 1fr); }
.mini-list { display:grid; gap:10px; color: var(--text-secondary); font-size:14px; }
.workflow-stack { display:grid; gap:16px; }
.workflow-stack > div { padding:20px; display:flex; gap:16px; background:#081725; }
.step-num { width:44px; height:44px; border-radius:18px; background: var(--accent); color:#06101A; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 44px; }
.callout { padding:18px 20px; border-radius:22px; border:1px solid rgba(125,211,252,0.16); background: rgba(125,211,252,0.08); color: var(--text); margin-top: 20px; }
.list { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.list li { border:1px solid var(--border); background: var(--surface-2); border-radius:18px; padding:16px; }
.cta-box { padding: 32px; background: rgba(125,211,252,0.06); border-color: rgba(125,211,252,0.16); }
.contact-grid { align-items: center; }
.links-grid { display:grid; gap:14px; }
.links-grid a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-radius:22px; border:1px solid var(--border); background: var(--surface-2); }
.links-grid strong { display:block; }
.links-grid span { color: var(--text-muted); font-size:14px; }
.footer { padding: 28px 0 44px; color: var(--text-muted); font-size: 14px; }
.footer-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
@media (max-width: 1080px) {
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }
  .hero-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .navbar { align-items:flex-start; flex-direction:column; padding:16px 0; }
  h1 { font-size: 36px; }
  .lead, .section-copy { font-size: 18px; }
  .hero-grid, .grid-2, .grid-3, .trust-strip, .dual-grid, .mockup-grid { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
}