:root {
  color-scheme: dark;
  --bg: #0a0e14;
  --surface: #111720;
  --surface-2: #161e29;
  --surface-3: #1c2633;
  --line: #293443;
  --line-soft: rgba(255, 255, 255, 0.09);
  --text: #f5f7fa;
  --muted: #aab4c2;
  --blue: #76a7ff;
  --blue-strong: #5f8ff0;
  --blue-ink: #08111f;
  --green: #5bc997;
  --amber: #f1bc5b;
  --paper: #f3f5f7;
  --paper-2: #e8edf2;
  --paper-text: #17202c;
  --paper-muted: #5d6877;
  --max: 1180px;
  --header-height: 72px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; letter-spacing: 0; }
body, button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }
.site-container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 92px 0; }
.section-compact { padding: 64px 0; }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: 0; }
.section-heading p { margin: 0; color: var(--muted); font-size: 18px; }
.kicker { margin: 0 0 14px; color: var(--blue); font-size: 13px; font-weight: 780; text-transform: uppercase; }
.status-kicker { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(91, 201, 151, 0.12); }

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); border-bottom: 1px solid var(--line-soft); background: rgba(10, 14, 20, 0.94); backdrop-filter: blur(16px); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.product-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.product-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid #334155; border-radius: 8px; background: #131c29; color: var(--blue); font-size: 14px; font-weight: 850; }
.product-name { min-width: 0; display: grid; line-height: 1.08; }
.product-name strong { font-size: 15px; }
.product-name small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 650; }
.site-nav { display: flex; align-items: center; gap: 25px; color: var(--muted); font-size: 14px; font-weight: 650; }
.site-nav a { transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.nav-cta { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: var(--blue-ink) !important; font-weight: 780; }
.nav-cta:hover { background: #91b9ff; }
.nav-toggle { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; }
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; }
.nav-toggle span + span { margin-top: 4px; }

.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 760; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.button:hover { border-color: #435167; background: var(--surface-3); transform: translateY(-1px); }
.button-primary { border-color: var(--blue); background: var(--blue); color: var(--blue-ink); }
.button-primary:hover { border-color: #91b9ff; background: #91b9ff; }
.button-light { border-color: #cbd3dd; background: #fff; color: var(--paper-text); }
.button-light:hover { border-color: #aeb9c8; background: #fff; }
.button:disabled { opacity: 0.48; cursor: not-allowed; transform: none; }
.button-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.product-hero { min-height: min(620px, calc(100svh - 112px)); border-bottom: 1px solid var(--line); background: #090d13; }
.hero-content { min-height: min(620px, calc(100svh - 112px)); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 54px; padding-bottom: 62px; }
.hero-content h1 { margin: 0; font-size: clamp(50px, 8vw, 94px); line-height: 0.98; letter-spacing: 0; }
.hero-title { max-width: 690px; margin: 18px 0 0; font-size: clamp(25px, 4vw, 43px); font-weight: 720; line-height: 1.12; }
.hero-copy { max-width: 650px; margin: 20px 0 28px; color: #c9d1dd; font-size: 18px; }
.hero-meta { display: flex; gap: 18px; margin-top: 28px; color: #b8c2d0; font-size: 13px; font-weight: 650; }
.hero-meta span { display: flex; align-items: center; gap: 7px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

.light-band { background: var(--paper); color: var(--paper-text); }
.light-band .kicker { color: #315f9d; }
.light-band .section-heading p, .light-band .muted { color: var(--paper-muted); }
.flow-grid { display: block; }
.flow-copy { max-width: 850px; }
.flow-copy h2 { margin: 0 0 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; }
.flow-copy > p { margin: 0; color: var(--paper-muted); font-size: 17px; }
.workflow-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; }
.workflow-list strong { color: #315f9d; font-size: 13px; }
.workflow-list span { font-weight: 710; }
.workflow-list small { display: block; margin-top: 3px; color: var(--paper-muted); font-size: 14px; }
.flow-visual { position: relative; margin: 48px 0 0; padding: 20px 20px 20px 62px; }
.flow-visual::before { content: ""; position: absolute; inset: 0; border: 1px solid #cbd3dc; border-radius: 8px; background: #e5eaf0; }
.flow-visual img, .flow-visual video { position: relative; width: 100%; border: 1px solid #273241; border-radius: 8px; box-shadow: 0 18px 42px rgba(19, 30, 44, 0.18); }
.workflow-video video { display: block; aspect-ratio: 2772 / 1716; object-fit: contain; background: #fff; }
.workflow-video figcaption { position: relative; margin: 11px 2px 0; color: var(--paper-muted); font-size: 12px; font-weight: 650; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-item { min-width: 0; padding: 30px 28px 32px 0; }
.feature-item + .feature-item { padding-left: 28px; border-left: 1px solid var(--line); }
.feature-number { color: var(--blue); font-size: 12px; font-weight: 820; }
.feature-item h3 { margin: 30px 0 9px; font-size: 20px; }
.feature-item p { margin: 0; color: var(--muted); font-size: 15px; }

.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
.showcase-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.showcase-item img { width: 100%; height: auto; object-fit: contain; object-position: top left; border-bottom: 1px solid var(--line); }
.showcase-copy { padding: 22px; }
.showcase-copy h3 { margin: 0 0 7px; font-size: 19px; }
.showcase-copy p { margin: 0; color: var(--muted); font-size: 14px; }

.cloud-band { border-top: 1px solid #29405d; border-bottom: 1px solid #29405d; background: #122238; }
.cloud-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 70px; align-items: center; }
.cloud-grid h2 { margin: 0 0 14px; font-size: clamp(31px, 4vw, 48px); line-height: 1.08; }
.cloud-grid p { margin: 0; color: #bdcbe0; font-size: 17px; }
.cloud-facts { display: grid; gap: 10px; }
.cloud-fact { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.cloud-fact:last-child { border-bottom: 0; }
.cloud-check { color: var(--green); font-weight: 850; }
.cloud-fact strong { display: block; font-size: 14px; }
.cloud-fact small { color: #aebcd0; font-size: 13px; }

.cta-band { border-bottom: 1px solid var(--line); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cta-inner h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); }
.cta-inner p { max-width: 700px; margin: 0; color: var(--muted); }

.company-band { background: var(--paper); color: var(--paper-text); }
.company-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 90px; align-items: start; }
.company-brand { display: flex; align-items: center; gap: 14px; }
.company-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #c7d0da; border-radius: 8px; background: #fff; color: #315f9d; font-size: 22px; font-weight: 850; }
.company-brand strong { display: block; font-size: 22px; }
.company-brand small { color: var(--paper-muted); }
.company-copy h2 { margin: 0 0 15px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.company-copy p { margin: 0 0 22px; color: var(--paper-muted); font-size: 17px; }
.company-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.company-value { padding-top: 14px; border-top: 2px solid #315f9d; }
.company-value strong { display: block; margin-bottom: 5px; }
.company-value span { color: var(--paper-muted); font-size: 13px; }

.company-hero { min-height: 600px; display: grid; align-items: center; padding: 72px 0; background: var(--paper); color: var(--paper-text); }
.company-hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.company-logo-frame { width: min(540px, 88vw); margin-bottom: 48px; }
.company-logo { display: block; width: 100%; height: auto; }
.company-hero p { max-width: 700px; margin: 0; color: var(--paper-muted); font-size: 19px; }
.company-principles { display: flex; gap: 10px 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 18px; border-top: 1px solid #cbd3dc; color: #435064; font-size: 13px; font-weight: 760; }
.company-principles span { display: flex; align-items: center; gap: 8px; }
.company-principles span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #315f9d; }
.company-story { border-top: 1px solid var(--line); }
.company-story-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 86px; align-items: start; }
.company-story h2 { margin: 0; font-size: clamp(31px, 4vw, 48px); line-height: 1.08; }
.company-story-copy > p { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
.company-contact { border-top: 1px solid var(--line); }

.page-hero { padding: 76px 0 50px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 820px; margin: 0 0 16px; font-size: clamp(42px, 6vw, 68px); line-height: 1.03; }
.page-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: 18px; }
.release-line { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted); font-size: 13px; }

.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-item { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.platform-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.platform-head h2 { margin: 0 0 4px; font-size: 23px; }
.platform-head p { margin: 0; color: var(--muted); font-size: 14px; }
.platform-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--blue); font-size: 12px; font-weight: 850; }
.download-button { width: 100%; margin-top: 24px; }
.download-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.install-step { padding: 26px 26px 0 0; }
.install-step + .install-step { padding-left: 26px; border-left: 1px solid var(--line); }
.install-step strong { color: var(--blue); font-size: 12px; }
.install-step h3 { margin: 22px 0 7px; font-size: 18px; }
.install-step p { margin: 0; color: var(--muted); font-size: 14px; }
.beta-notice { margin-top: 34px; padding: 17px 18px; border-left: 3px solid var(--amber); background: #1d1a13; color: #d8cfbd; font-size: 14px; }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan { min-width: 0; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.plan.featured { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
.plan-label { min-height: 20px; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.plan h2 { margin: 8px 0 2px; font-size: 22px; }
.price { margin: 8px 0 18px; font-size: 30px; font-weight: 820; }
.price small { color: var(--muted); font-size: 13px; font-weight: 600; }
.features { flex: 1; display: grid; align-content: start; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.features li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 850; }
.pricing-notice { display: none; margin-bottom: 24px; padding: 13px 15px; border-left: 3px solid var(--amber); background: #211c11; color: #eed69d; }
.pricing-notice.show { display: block; }
.legal-note { margin-top: 18px !important; color: var(--muted); font-size: 13px !important; }
.account { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); gap: 58px; padding-top: 44px; border-top: 1px solid var(--line); }
.account-copy h2 { margin: 0 0 10px; font-size: 30px; }
.account-copy p { margin: 0; color: var(--muted); }
.account-panel { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.account-head strong { font-size: 17px; }
.tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
.tab { min-height: 34px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.tab.active { background: var(--surface-3); color: var(--text); }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 720; }
input, select, textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 7px; padding: 0 11px; background: var(--bg); color: var(--text); outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(118, 167, 255, 0.15); }
.hidden { display: none !important; }
.status { min-height: 22px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.status.error { color: #ff9b9b; }
.status.success { color: #79ddb0; }
.signed-in { display: grid; gap: 12px; }
.signed-in small { color: var(--muted); }
.legal-consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.legal-consent input { width: 18px; min-height: 18px; margin: 2px 0 0; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }

@media (max-width: 980px) {
  .nav-toggle { display: grid; }
  .site-nav { position: absolute; top: var(--header-height); left: 0; right: 0; display: none; align-items: stretch; gap: 0; padding: 12px 20px 18px; border-bottom: 1px solid var(--line); background: #0d121a; }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 12px 4px; }
  .nav-cta { margin-top: 8px; padding: 0 15px !important; }
  .flow-grid, .cloud-grid, .company-grid, .company-story-grid, .account { grid-template-columns: 1fr; gap: 40px; }
  .flow-visual { max-width: 680px; }
  .workflow-list { grid-template-columns: 1fr; gap: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-item { padding: 25px 0; }
  .feature-item + .feature-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .feature-item h3 { margin-top: 16px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  :root { --header-height: 64px; }
  .site-container { width: min(100% - 28px, var(--max)); }
  .section { padding: 68px 0; }
  .section-compact { padding: 50px 0; }
  .product-name small { display: none; }
  .product-hero, .hero-content { min-height: 610px; }
  .hero-content { justify-content: center; padding-bottom: 48px; }
  .hero-content h1 { font-size: 52px; }
  .hero-title { font-size: 28px; }
  .hero-copy { font-size: 16px; }
  .hero-meta { display: grid; gap: 7px; margin-top: 22px; }
  .flow-visual { padding: 12px 12px 12px 28px; }
  .company-logo-frame { margin-bottom: 32px; }
  .showcase-grid, .download-grid, .install-grid, .plans, .company-values { grid-template-columns: 1fr; }
  .company-hero { min-height: 560px; padding: 54px 0; }
  .install-step { padding: 22px 0; }
  .install-step + .install-step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .cta-inner, .footer-inner { align-items: flex-start; flex-direction: column; }
  .cta-inner { gap: 24px; }
  .footer-inner { justify-content: center; padding: 20px 0; }
  .page-hero { padding-top: 52px; }
  .button-row .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}