:root {
  --background: #f7f9fc;
  --foreground: #101a32;
  --primary: #1557d0;
  --primary-foreground: #ffffff;
  --muted: #eef2f8;
  --muted-foreground: #5b6680;
  --border: #dfe5ef;
  --radius: 0.875rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 84% 4%, rgba(71, 118, 230, 0.12), transparent 30rem),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }

.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.site-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; font-size: 19px; letter-spacing: -0.02em; }
.brand-mark { width: 29px; height: 29px; padding: 6px; border-radius: 9px; display: flex; gap: 2.5px; align-items: center; justify-content: center; background: #101a32; box-shadow: 0 5px 14px rgba(16, 26, 50, .18); }
.brand-light { width: 4px; height: 14px; border-radius: 99px; }
.brand-light-red { background: #fa5d69; }
.brand-light-yellow { background: #f4c84b; }
.brand-light-green { background: #37c982; }
.nav-side { display: flex; align-items: center; gap: 24px; }
.nav-side > a { color: #58647a; font-size: 13px; font-weight: 650; }
.nav-side > a:hover { color: #1557d0; }
.product-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 620; color: #536078; background: rgba(255,255,255,.78); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; }

.hero { min-height: 660px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 78px; align-items: center; padding-block: 72px 96px; }
.hero-copy { max-width: 700px; }
.eyebrow { margin: 0 0 18px; color: #1557d0; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 780; }
h1, h2 { margin: 0; letter-spacing: -.052em; line-height: 1.02; }
h1 { max-width: 760px; font-size: clamp(50px, 6vw, 78px); font-weight: 790; }
h2 { font-size: clamp(38px, 4.2vw, 58px); font-weight: 770; }
.hero-lede { max-width: 650px; margin: 26px 0 0; color: #536078; font-size: 19px; line-height: 1.68; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 19px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: #1557d0; box-shadow: 0 12px 28px rgba(21, 87, 208, .22); }
.button-primary:hover { background: #104bb7; box-shadow: 0 16px 32px rgba(21, 87, 208, .28); }
.quiet-proof { display: inline-flex; align-items: center; gap: 7px; color: #536078; font-size: 14px; font-weight: 620; }
.quiet-proof svg { color: #178a53; }

.status-panel { position: relative; padding: 25px; border: 1px solid rgba(208,217,232,.9); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 28px 70px rgba(16,26,50,.12); backdrop-filter: blur(18px); }
.status-card { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 17px; background: #f6f8fb; border: 1px solid #e5e9f1; border-radius: 13px; }
.status-card-current { background: #f1fbf6; border-color: #bfe9d2; box-shadow: 0 8px 22px rgba(37,160,97,.08); }
.status-card strong, .status-card span { display: block; }
.status-card strong { font-size: 15px; }
.status-card div span { margin-top: 3px; color: #687389; font-size: 12px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.09); }
.status-red { background: #e74d5c; }
.status-yellow { background: #f2be35; }
.status-green { background: #2fbd78; }
.version-pill { padding: 4px 7px; border: 1px solid #dce2ec; border-radius: 7px; color: #58647b; background: white; font: 650 11px var(--font-geist-mono); }
.status-connector { display: flex; align-items: center; justify-content: center; gap: 7px; height: 55px; color: #778198; font-size: 12px; }
.status-legend { display: flex; gap: 15px; justify-content: center; border-top: 1px solid #e8ebf1; margin-top: 22px; padding-top: 20px; }
.status-legend span { display: inline-flex; align-items: center; gap: 6px; color: #69748a; font-size: 11px; font-weight: 640; }
.status-legend .status-dot { width: 8px; height: 8px; }

.product-proof { padding: 50px 0 120px; }
.proof-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; margin-bottom: 42px; }
.proof-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -42px; }
.proof-heading p:last-child { color: #5c6880; font-size: 17px; line-height: 1.6; }
.browser-frame { overflow: hidden; border: 1px solid #d9e0eb; border-radius: 18px; background: white; box-shadow: 0 30px 80px rgba(25,41,77,.14); }
.browser-frame img { display: block; width: 100%; height: auto; }
.browser-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: #f4f6f9; border-bottom: 1px solid #e2e6ee; }
.browser-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #cbd2df; }
.browser-bar div { width: min(370px, 48%); margin-inline: auto; border-radius: 6px; padding: 6px 10px; background: white; color: #778196; font-size: 10px; text-align: center; }

.lifecycle-section { padding: 120px 0; background: #111b35; color: white; }
.section-heading { max-width: 760px; }
.section-heading.centered { margin: 0 auto 58px; text-align: center; }
.section-heading.centered .eyebrow { color: #82abff; }
.section-heading > p:last-child { margin: 24px 0 0; color: #aeb8cc; font-size: 17px; line-height: 1.65; }
.lifecycle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lifecycle-card { overflow: hidden; padding: 24px 24px 0; border: 1px solid #2f3a55; border-radius: 16px; background: #17223e; box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.lifecycle-card.featured { transform: translateY(-12px); border-color: #406fc7; background: #192947; }
.lifecycle-card h3 { margin: 14px 0 7px; font-size: 21px; letter-spacing: -.025em; }
.lifecycle-card > p { min-height: 43px; margin: 0 0 22px; color: #aeb9cc; font-size: 13px; line-height: 1.55; }
.lifecycle-card img { display: block; width: calc(100% + 48px); max-width: none; margin-left: -24px; aspect-ratio: 1.72; object-fit: cover; object-position: center 38%; border-top: 1px solid #34405a; }
.card-kicker { display: flex; align-items: center; gap: 8px; color: #c6cede; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 760; }

.features { padding: 130px 0; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 100px; }
.split-heading > p { margin: 0 0 5px; color: #5c6880; font-size: 16px; line-height: 1.65; }
.feature-grid { margin-top: 58px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: 0 20px 54px rgba(25,41,77,.07); }
.feature-grid article { min-height: 230px; padding: 27px; border-right: 1px solid var(--border); }
.feature-grid article:last-child { border-right: 0; }
.feature-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid svg { width: 24px; height: 24px; color: #1557d0; }
.feature-grid h3 { margin: 36px 0 9px; font-size: 18px; letter-spacing: -.025em; }
.feature-grid p { margin: 0; color: #657087; font-size: 14px; line-height: 1.58; }

.security-band { padding: 74px 0; background: #e9f0ff; border-block: 1px solid #ccd9f2; }
.security-inner { display: grid; grid-template-columns: auto 1.15fr .85fr; align-items: center; gap: 28px 45px; }
.security-inner > svg { color: #1557d0; }
.security-inner .eyebrow { margin-bottom: 10px; }
.security-inner h2 { font-size: clamp(32px, 4vw, 48px); }
.security-inner > p { margin: 0; color: #53617a; font-size: 15px; line-height: 1.65; }

.final-cta { margin-block: 110px; padding: 54px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 22px; color: white; background: #1557d0; box-shadow: 0 26px 64px rgba(21,87,208,.22); }
.final-cta .eyebrow { margin-bottom: 13px; color: #c9dcff; }
.final-cta h2 { font-size: clamp(34px, 4vw, 52px); }
.final-cta p:last-child { margin: 14px 0 0; color: #dce8ff; }
.button-light { flex: none; color: #153266; background: white; box-shadow: 0 12px 26px rgba(10,32,75,.18); }

footer { padding: 36px 0; border-top: 1px solid var(--border); background: white; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.footer-inner > div { display: flex; gap: 22px; }
.footer-inner > div a { color: #5b667c; font-size: 13px; font-weight: 640; }
.footer-inner > p { justify-self: end; color: #7c8598; font-size: 12px; }

.policy-page { min-height: 100vh; background: white; }
.policy-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.policy-nav > a:last-child { color: #5d687e; font-size: 13px; font-weight: 650; }
.policy-content { width: min(740px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 120px; }
.policy-content h1 { font-size: clamp(46px, 6vw, 68px); }
.policy-content .policy-lede { margin: 28px 0 62px; color: #536078; font-size: 20px; line-height: 1.65; }
.policy-content h2 { margin: 48px 0 14px; font-size: 25px; letter-spacing: -.035em; line-height: 1.18; }
.policy-content h3 { margin: 30px 0 8px; font-size: 17px; letter-spacing: -.02em; }
.policy-content p, .policy-content li { color: #4e5a71; font-size: 15px; line-height: 1.75; }
.policy-content a { color: #1557d0; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.policy-content ul, .policy-content ol { padding-left: 22px; }
.policy-content li { margin: 8px 0; }
.policy-content code { padding: 2px 6px; border-radius: 5px; color: #17376f; background: #edf3ff; font: 650 13px var(--font-geist-mono); }
.status-list { padding-left: 0 !important; list-style: none; }
.status-list li { display: flex; align-items: center; gap: 9px; }
.status-list strong { color: #26344e; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 64px 84px; }
  .status-panel { width: min(100%, 540px); }
  .proof-heading { grid-template-columns: 1fr; gap: 15px; }
  .proof-heading .eyebrow { grid-column: auto; margin-bottom: 0; }
  .lifecycle-grid { grid-template-columns: 1fr; }
  .lifecycle-card.featured { transform: none; }
  .split-heading { grid-template-columns: 1fr; gap: 24px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid article:nth-child(2) { border-right: 0; }
  .feature-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .security-inner { grid-template-columns: auto 1fr; }
  .security-inner > p { grid-column: 2; }
  .final-cta { align-items: flex-start; flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-inner > div { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 28px, 1160px); }
  .nav-side > a, .product-tag { display: none; }
  .hero { min-height: auto; padding-top: 48px; }
  h1 { font-size: 45px; }
  .hero-lede { font-size: 17px; }
  .status-panel { padding: 16px; border-radius: 16px; }
  .status-legend { gap: 9px; flex-wrap: wrap; }
  .product-proof { padding-bottom: 84px; }
  .lifecycle-section, .features { padding-block: 84px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .feature-grid article:nth-child(3) { border-bottom: 1px solid var(--border); }
  .feature-grid article:last-child { border-bottom: 0; }
  .feature-grid h3 { margin-top: 24px; }
  .security-inner { grid-template-columns: 1fr; }
  .security-inner > p { grid-column: auto; }
  .final-cta { width: calc(100% - 28px); margin-block: 76px; padding: 32px 24px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-inner > div { grid-column: auto; grid-row: auto; flex-wrap: wrap; }
  .footer-inner > p { justify-self: start; }
  .policy-content { width: min(100% - 28px, 740px); padding-block: 70px 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

:root { --font-geist-sans: Arial, Helvetica, sans-serif; --font-geist-mono: monospace; }
a:focus-visible { outline: 3px solid #1557d0; outline-offset: 4px; }