:root {
  --bg: #f5f8fb;
  --surface: #ffffff;
  --surface-soft: #eef3f8;
  --text: #142033;
  --muted: #5d697b;
  --line: #d7e1ec;
  --blue: #236496;
  --blue-dark: #173f62;
  --grey: #7f8791;
  --grey-dark: #4f5762;
  --success: #2b6f5a;
  --shadow: 0 18px 46px rgba(20, 32, 51, 0.08);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shell: min(1180px, calc(100vw - 32px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #fbfdff 0%, var(--bg) 55%, #ffffff 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.shell { width: var(--shell); margin: 0 auto; }
.site-nav {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(35,100,150,0.08);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 16px 0; }
.brand img { width: 150px; height: auto; }
.nav-links { display:flex; gap: 22px; align-items:center; font-weight:600; color: var(--grey-dark); }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-login, .btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: white !important; padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow);
}
.menu-toggle { display:none; background:none; border:none; padding:0; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--text); margin:5px 0; }
.hero { padding: 56px 0 24px; }
.hero-grid, .pod-grid, .contact-grid, .dashboard-grid, .cta-band {
  display:grid; gap: 32px;
}
.hero-grid { grid-template-columns: 1.15fr .85fr; align-items:center; }
.eyebrow, .pill {
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px;
  border-radius:999px; background: rgba(35,100,150,.08); color: var(--blue-dark); font-weight:700; font-size:14px;
}
.hero h1, .section-head h2, .contact-card h1, .login-card h1 {
  margin: 18px 0 16px; line-height: 1.02;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); letter-spacing: -0.04em; }
.hero p.lead, .section-head p, .contact-card p, .spec-list li, .feature-card p, .step-card p, .pod-copy p, .cta-copy p {
  color: var(--muted); line-height: 1.7;
}
.gradient { color: var(--blue); }
.button-row { display:flex; gap:16px; flex-wrap:wrap; margin: 28px 0; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 14px 20px;
  border-radius: 999px; font-weight:700; border:1px solid transparent; cursor:pointer;
}
.btn-secondary { background: white; color: var(--blue-dark); border-color: var(--line); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color:white; }
.metric-row, .feature-grid, .steps-grid, .detail-grid, .stats-grid, .cards-grid {
  display:grid; gap: 18px;
}
.metric-row { grid-template-columns: repeat(3, 1fr); margin-top:24px; }
.metric, .feature-card, .step-card, .detail-card, .spec-card, .contact-card, .info-card, .login-card, .dashboard-panel, .stat-card, .lead-card, .newsletter-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.metric { padding: 22px; }
.metric strong { display:block; font-size: 1.8rem; color: var(--blue-dark); }
.metric span { color: var(--muted); }
.browser-card {
  position: relative; background: linear-gradient(180deg, #ffffff 0%, #f0f5fb 100%); border: 1px solid #dce8f2;
  border-radius: 34px; padding: 24px; box-shadow: 0 22px 54px rgba(29,66,102,.12); overflow:hidden;
}
.browser-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dots { display:flex; gap:8px; }
.dots span { width: 10px; height:10px; border-radius:50%; background:#cdd8e5; }
.url-chip { padding: 10px 14px; border-radius: 999px; background: white; border: 1px solid var(--line); font-size:14px; color: var(--grey-dark); }
.scan-card { background:#152235; color:white; border-radius:28px; padding:24px; }
.scan-list { display:grid; gap: 12px; margin: 18px 0 0; }
.scan-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); }
.scan-item strong { color:#bfe1ff; }
.indicator { position:absolute; right: 18px; bottom: 18px; background:#ffffff; border-radius:999px; border:1px solid #cfe2ef; padding:14px 18px; display:flex; gap:10px; align-items:center; box-shadow: var(--shadow); }
.indicator-dot { width:12px; height:12px; border-radius:50%; background:var(--success); box-shadow:0 0 0 8px rgba(43,111,90,.12); }
.section { padding: 72px 0; }
.section-head { margin-bottom: 28px; max-width: 700px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature-card, .step-card, .detail-card, .spec-card, .contact-card, .info-card, .login-card, .dashboard-panel, .newsletter-card { padding: 26px; }
.icon-circle {
  width: 54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px;
  background: linear-gradient(135deg, rgba(35,100,150,.16) 0%, rgba(127,135,145,.16) 100%); color: var(--blue-dark);
}
.icon-circle svg { width: 24px; height:24px; }
.feature-card h3, .step-card h3, .detail-card h3, .stat-card h3, .dashboard-panel h3, .newsletter-card h3 { margin: 0 0 10px; }
.steps-grid { grid-template-columns: repeat(4, 1fr); }
.step-number { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--blue); text-transform: uppercase; }
.pod-grid { grid-template-columns: .95fr 1.05fr; align-items:center; }
.pod-visual { position:relative; }
.device-frame {
  padding: 18px; border-radius: 36px; background: linear-gradient(160deg, #ffffff 0%, #edf3f8 100%); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.device-frame img { width: 100%; border-radius: 24px; }
.float-card {
  position:absolute; right:-10px; bottom:20px; width:min(42%, 260px); padding:12px; border-radius:26px;
  background:white; border:1px solid var(--line); box-shadow: var(--shadow); animation: floaty 5s ease-in-out infinite;
}
.float-card img { border-radius: 18px; }
@keyframes floaty { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.video-feature-shell {
  width: min(calc(100vw - 32px), 760px);
  max-width: none;
  margin: 0 auto;
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.full-width-video-card {
  padding: 0;
  overflow: hidden;
}
.video-frame-wrap {
  position: relative;
  width: 100%;
  padding-top: 58.3333%;
  aspect-ratio: 12 / 7;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(160deg, #ffffff 0%, #edf3f8 100%);
  border: 1px solid var(--line);
}
.full-width-video-wrap {
  border: 0;
  border-radius: 32px;
}
.video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
  background: #0f172a;
}
.full-width-video-wrap .video-frame {
  border-radius: 32px;
}
.video-placeholder-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 36px 24px;
  border-radius: 24px;
  border: 1px dashed #b8c9da;
  background: linear-gradient(180deg, #fbfdff 0%, #eef4fa 100%);
}
.video-placeholder-minimal {
  min-height: 320px;
  aspect-ratio: 12 / 7;
  border: 0;
  border-radius: 32px;
  background: linear-gradient(180deg, #f8fbfe 0%, #edf4fa 100%);
}
.video-placeholder-state p { max-width: 620px; color: var(--muted); }
.video-actions { justify-content: center; margin-bottom: 0; }
.cards-grid { grid-template-columns: repeat(3, 1fr); }
.spec-list { margin: 0; padding-left: 18px; }
.cta-band {
  grid-template-columns: 1.1fr .9fr; align-items:center; margin-top: 28px; padding: 32px;
  border-radius: 30px; background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%); color: white;
}
.contact-grid { grid-template-columns: 1fr 1fr; align-items:start; }
.contact-card, .info-card, .login-card { padding: 34px; }
form { display:grid; gap:16px; }
label { font-weight:700; display:grid; gap:8px; }
input, textarea, select {
  width:100%; border:1px solid var(--line); border-radius: 16px; padding: 14px 16px; font: inherit; color: var(--text); background:#fff;
}
textarea { min-height: 140px; resize: vertical; }
.radio-stack { display:grid; gap:10px; }
.radio-option { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:16px; border:1px solid var(--line); background:#fff; }
.radio-option input { width:auto; margin-top:4px; }
.flash { margin-bottom: 18px; padding: 14px 16px; border-radius: 18px; font-weight:700; }
.flash.success { background: rgba(43,111,90,.12); color: var(--success); }
.flash.error { background: rgba(200,62,62,.08); color:#912727; }
.site-footer { margin-top: 56px; padding: 42px 0 26px; background: #142033; color: #dce6f2; }
.footer-grid { display:grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 26px; }
.footer-grid h4 { color:white; margin-top:0; }
.footer-grid a { display:block; color:#dce6f2; margin: 10px 0; }
.footer-logo { width: 170px; background:white; padding:10px; border-radius: 20px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-top: 24px; margin-top: 18px; border-top:1px solid rgba(255,255,255,.12); }
.admin-chip { color:white; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 16px; }
.stats-grid { grid-template-columns: repeat(4, 1fr); }
.stat-card { padding: 24px; }
.stat-card strong { display:block; font-size: 2rem; color: var(--blue-dark); margin-top: 10px; }
.dashboard-grid { grid-template-columns: 1fr; }
.dashboard-panel { margin-bottom: 22px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding: 14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color: var(--grey-dark); font-size: 14px; }
.badge { display:inline-flex; padding:8px 12px; border-radius:999px; font-weight:700; font-size: 13px; background: rgba(35,100,150,.1); color: var(--blue-dark); }
.badge.invest { background: rgba(17,62,103,.12); }
.badge.preorder { background: rgba(35,100,150,.12); }
.badge.newsletter { background: rgba(127,135,145,.14); }
.analytics-bars { display:grid; grid-template-columns: repeat(7, 1fr); gap: 14px; align-items:end; min-height: 220px; margin-top: 14px; }
.bar-col { display:grid; gap:10px; justify-items:center; }
.bar {
  width: 100%; max-width: 72px; border-radius: 20px 20px 8px 8px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
}
.small { font-size: 14px; color: var(--muted); }
@media (max-width: 980px) {
  .hero-grid, .pod-grid, .contact-grid, .cta-band, .footer-grid { grid-template-columns: 1fr; }
  .video-placeholder-state { min-height: 280px; }
  .video-placeholder-minimal { min-height: 180px; }
  .feature-grid, .steps-grid, .cards-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .float-card { position: static; width: 100%; margin-top: 16px; }
}
@media (max-width: 760px) {
  .menu-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:76px; left:16px; right:16px; padding:20px; border-radius:24px; background:white; border:1px solid var(--line); box-shadow:var(--shadow); flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .metric-row, .feature-grid, .steps-grid, .cards-grid, .stats-grid, .analytics-bars { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.5rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}