* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
}
a { color: var(--color-accent-blue); text-decoration: none; }
a:hover { color: var(--color-accent-teal); }
:focus-visible { outline: 2px solid var(--color-accent-blue); outline-offset: 3px; border-radius: 999px; }
::selection { background: #cddffb; }
img { max-width: 100%; display: block; }

:root {
  --font-body: 'Instrument Sans', Helvetica, sans-serif;
  --font-mono: 'Martian Mono', monospace;
  --color-bg: #eef1f5;
  --color-text: #121820;
  --color-text-secondary: #454d58;
  --color-text-muted: #474f5a;
  --color-accent-blue: #1450c8;
  --color-accent-teal: #0a6f68;
  --color-accent-teal-bright: #25c9b0;
  --color-dark-bg: #0c1520;
  --color-dark-bg-2: #060d15;
  --color-border: rgba(18, 24, 32, 0.09);
  --color-border-soft: rgba(18, 24, 32, 0.16);
  --radius-pill: 999px;
  --radius-card: 26px;
  --nav-height: 68px;
}

@keyframes vamIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

.container { max-width: 1300px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.section { padding: clamp(80px, 11vw, 150px) clamp(18px, 4vw, 40px); scroll-margin-top: var(--nav-height); }
.section-dark { background: var(--color-dark-bg); color: #fff; }

.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  transition: color 160ms ease, border-color 160ms ease;
}
a.pill:hover { color: var(--color-text); border-color: rgba(18, 24, 32, 0.36); }
.pill-solid { background: var(--color-text); color: #fff; border-color: var(--color-text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  font-weight: 500;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.btn-primary { color: #fff; background: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-blue); color: #fff; }
.btn-secondary { color: var(--color-text); border-color: var(--color-border-soft); }
.btn-secondary:hover { border-color: var(--color-text); color: var(--color-text); }

.reveal { opacity: 0; }
.reveal.is-visible { animation: vamIn 620ms ease both; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: blur(20px);
  transition: background 240ms ease, border-color 240ms ease;
}
.nav.is-scrolled { background: rgba(246, 248, 251, 0.85); border-bottom-color: rgba(18, 24, 32, 0.1); }
.nav-inner {
  height: var(--nav-height);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-size: 16.5px; font-weight: 600; letter-spacing: -0.03em; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); font-size: 14.5px; flex-wrap: wrap; }
.nav-links a { color: var(--color-text-muted); }
.nav-links a:hover { color: var(--color-text); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.footer { background: #e5eaf0; border-top: 1px solid rgba(18, 24, 32, 0.08); padding: clamp(46px, 7vw, 76px) clamp(18px, 4vw, 40px) 34px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #4a525d; max-width: 27ch; }
.footer-socials { display: flex; gap: 7px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-family: var(--font-mono); font-size: 10px; color: #5b636e; }
.footer-col a { font-size: 14px; color: var(--color-text-muted); }
.footer-col a:hover { color: var(--color-text); }
.footer-legal {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(18, 24, 32, 0.08);
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 9.5px; color: #5b636e;
}
.footer-legal a { color: #5b636e; }
.footer-legal a:hover { color: var(--color-text); }

.hero { padding-top: clamp(122px, 17vh, 190px); padding-bottom: clamp(60px, 9vw, 110px); background: radial-gradient(130% 80% at 78% -10%, #ffffff 0%, #f4f6fa 44%, #e9edf3 100%); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 5vw, 76px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 620px; }
.hero-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hero-copy h1 { margin: 0; font-size: clamp(42px, 6.6vw, 88px); line-height: 0.98; font-weight: 600; letter-spacing: -0.05em; text-wrap: balance; }
.hero-copy p { margin: 0; font-size: clamp(16.5px, 1.9vw, 20px); line-height: 1.6; color: var(--color-text-secondary); max-width: 50ch; }
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero-card {
  border-radius: var(--radius-card); background: #fff; border: 1px solid var(--color-border);
  padding: 26px; box-shadow: 0 44px 80px -54px #4f5762;
  display: flex; flex-direction: column; gap: 18px;
}
.hero-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 10px; color: #59616c; }
.hero-card-meta { color: var(--color-accent-teal); }
.hero-card-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-card-divider { height: 1px; background: var(--color-border); }
.hero-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14.5px; color: var(--color-text-muted); }
.hero-card-footer span { max-width: 30ch; }

.demo-inner { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 46px); }
.demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.demo-head h2 { margin: 0; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; color: #fff; max-width: 18ch; }
.demo-head p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); max-width: 40ch; }

.demo-video {
  border-radius: clamp(16px, 2vw, 26px); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--color-dark-bg-2); height: clamp(220px, 42vw, 640px);
  display: grid; place-items: center;
}
.demo-video span { font-family: var(--font-mono); font-size: clamp(9.5px, 1.1vw, 11.5px); color: rgba(255, 255, 255, 0.62); text-align: center; padding: 0 20px; }

.demo-chapters { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter-btn {
  font-family: var(--font-mono); font-size: 10.5px; padding: 10px 16px; border-radius: var(--radius-pill);
  cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.2);
}
.chapter-btn.is-active { background: #fff; color: var(--color-dark-bg); border-color: #fff; }

.suite-inner { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 52px); }
.suite-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.suite-head h2 { margin: 0; font-size: clamp(32px, 5vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; max-width: 16ch; }
.mono-label { font-family: var(--font-mono); font-size: 10.5px; color: #4f5762; }

.suite-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.suite-list { display: flex; flex-direction: column; gap: 6px; }
.suite-row {
  text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent;
  font-family: var(--font-body); width: 100%;
}
.suite-row.is-active { background: #fff; border-color: rgba(18, 24, 32, 0.12); }
.suite-row-slug { font-family: var(--font-mono); font-size: 10px; padding: 6px 11px; border-radius: var(--radius-pill); background: rgba(18, 24, 32, 0.06); color: #3f4751; white-space: nowrap; }
.suite-row.is-active .suite-row-slug { background: var(--color-accent-blue); color: #fff; }
.suite-row-name { font-size: 15.5px; font-weight: 500; color: #2c333d; }
.suite-row.is-active .suite-row-name { color: var(--color-text); }
.suite-row-price { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: #3f4751; }
.suite-row.is-active .suite-row-price { color: var(--color-accent-teal); }

.suite-panel {
  position: sticky; top: 92px; border-radius: var(--radius-card); background: #fff;
  border: 1px solid var(--color-border); overflow: hidden; box-shadow: 0 40px 80px -56px #4f5762;
}
.suite-panel-image {
  height: clamp(190px, 26vw, 300px);
  background: repeating-linear-gradient(135deg, rgba(18, 24, 32, 0.055) 0 13px, rgba(18, 24, 32, 0.015) 13px 26px);
  display: grid; place-items: center;
}
.suite-panel-image span { font-family: var(--font-mono); font-size: 10.5px; color: #5b636e; text-align: center; padding: 0 18px; }
.suite-panel-body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.suite-panel-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.suite-panel-title h3 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.035em; }
.suite-panel-title span { font-family: var(--font-mono); font-size: 15px; color: var(--color-accent-teal); }
.suite-panel-body > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
.suite-facts { display: flex; flex-direction: column; gap: 11px; }
.suite-fact { display: flex; align-items: baseline; gap: 14px; }
.suite-fact-key { font-family: var(--font-mono); font-size: 11px; min-width: 74px; color: var(--color-accent-blue); }
.suite-fact-val { font-size: 14.5px; line-height: 1.5; color: #454d58; }
.suite-fw { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.compare-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.compare-head { display: flex; flex-direction: column; gap: 16px; max-width: 34ch; }
.compare-head h2 { margin: 0; font-size: clamp(32px, 5vw, 62px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; }
.compare-head p { margin: 0; font-size: 17px; line-height: 1.6; color: #454d58; }

.compare-table { border-radius: 24px; background: #fff; border: 1px solid var(--color-border); overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; align-items: center; padding: 18px clamp(18px, 3vw, 30px); border-bottom: 1px solid rgba(18, 24, 32, 0.07); }
.compare-row-head { font-family: var(--font-mono); font-size: 10px; color: #59616c; border-bottom: 1px solid var(--color-border); }
.compare-col-ours { text-align: center; color: var(--color-text); }
.compare-row-head span:nth-child(3) { text-align: center; }
.compare-label { font-size: 15.5px; font-weight: 500; }
.compare-ours { text-align: center; font-size: 14px; color: var(--color-accent-teal); }
.compare-theirs { text-align: center; font-size: 14px; color: #4f5762; }

.support-inner { display: flex; flex-direction: column; gap: clamp(34px, 5vw, 60px); }
.support-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.support-head h2 { margin: 0; font-size: clamp(32px, 5vw, 62px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: #fff; max-width: 18ch; }
.mono-label-dark { color: rgba(255, 255, 255, 0.62); }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(24px, 4vw, 54px); }
.stat { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.stat-value { font-size: clamp(34px, 4.4vw, 54px); font-weight: 600; letter-spacing: -0.045em; color: #fff; line-height: 1; }
.stat-key { font-size: 15px; font-weight: 500; color: var(--color-accent-teal-bright); }
.stat-note { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.68); }

.pricing-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: center; }
.pricing-copy { display: flex; flex-direction: column; gap: 20px; }
.pricing-copy h2 { margin: 0; font-size: clamp(32px, 5vw, 60px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; max-width: 14ch; }
.pricing-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: #454d58; max-width: 44ch; }
.pricing-terms { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; color: #4f5762; }

.pricing-card { border-radius: var(--radius-card); background: var(--color-text); padding: clamp(28px, 4vw, 42px); display: flex; flex-direction: column; gap: 20px; }
.pricing-card-label { font-family: var(--font-mono); font-size: 10px; color: var(--color-accent-teal-bright); }
.pricing-card-price { display: flex; align-items: baseline; gap: 12px; }
.pricing-card-amount { font-size: clamp(44px, 6vw, 66px); font-weight: 600; letter-spacing: -0.05em; color: #fff; line-height: 1; }
.pricing-card-was { font-size: 15px; color: rgba(255, 255, 255, 0.64); }
.pricing-card-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pricing-card-pills .pill { font-size: 9.5px; padding: 7px 11px; border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.62); }

.btn-light { color: var(--color-text); background: #fff; }
.btn-light:hover { background: var(--color-accent-teal-bright); color: var(--color-text); }