:root {
  --ink: #0a1730;
  --ink-soft: #172947;
  --paper: #f5f7fa;
  --white: #ffffff;
  --blue: #2c69f1;
  --cyan: #31bde8;
  --green: #56d69d;
  --muted: #64718a;
  --line: #dbe1ea;
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.shell { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #122343; font-size: 18px; font-weight: 800; letter-spacing: -.7px; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 8px; font-size: 15px; }
.brand span span { color: var(--blue); }
.nav { display: flex; align-items: center; gap: 25px; color: #59667c; font-size: 13px; font-weight: 700; }
.nav a:hover { color: var(--blue); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 22px rgba(44,105,241,.2); }
.button-quiet { color: #33425d; border: 1px solid var(--line); background: #fff; }
.hero { min-height: 655px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 62px; padding: 70px 32px 84px; max-width: 1264px; margin: 0 auto; overflow: hidden; }
.eyebrow { margin: 0 0 18px; color: #5e6e8e; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .9px; text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(86,214,157,.14); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -2.2px; line-height: 1.04; }
h1 { margin-bottom: 24px; font-size: clamp(49px, 5.5vw, 76px); font-weight: 800; }
h1 em, h2 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 510px; color: #526078; font-size: 17px; line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.microcopy { margin-top: 19px; color: #7f8ba0; font-size: 11px; }
.product-card { position: relative; width: min(100%, 438px); justify-self: center; padding: 12px; overflow: visible; border: 1px solid #c9d0dd; border-radius: 20px; background: #e7edf5; box-shadow: 22px 28px 0 #d6deeb, 0 25px 65px rgba(13,31,69,.18); transform: rotate(2.2deg); }
.app-window { overflow: hidden; border-radius: 11px; background: #0f1d37; box-shadow: 0 5px 18px rgba(6,19,43,.16); }
.window-bar { height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 11px; background: #172a4b; }
.window-bar i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #54719e; }
.window-name { margin-left: 7px; color: #b9c9e4; font-family: "DM Mono", monospace; font-size: 9px; }
.app-body { display: grid; grid-template-columns: 72px 1fr; min-height: 310px; }
.app-side { padding: 17px 10px; background: #132443; }
.app-side span { display: block; height: 7px; margin: 0 0 15px; border-radius: 99px; background: #314b72; }
.app-side span:first-child { background: var(--cyan); }
.app-main { padding: 18px; background: #eff5fc; }
.app-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.app-topline b { color: #102142; font-size: 12px; letter-spacing: -.2px; }
.app-topline small { padding: 4px 7px; color: #18709a; background: #d5f1fa; border-radius: 5px; font-family: "DM Mono", monospace; font-size: 8px; }
.study-list { display: grid; gap: 7px; }
.study-row { display: grid; grid-template-columns: 30px 1fr 37px; align-items: center; gap: 9px; padding: 9px; border: 1px solid #d7e1ef; border-radius: 7px; background: #fff; }
.study-icon { width: 29px; height: 29px; border-radius: 6px; background: linear-gradient(135deg, #9fc7da, #eff5f7 48%, #477891 50%, #112b43); }
.study-copy strong, .study-copy span { display: block; }
.study-copy strong { color: #233a60; font-size: 8px; }.study-copy span { margin-top: 3px; color: #7d90ac; font-size: 7px; }
.study-status { color: #27a376; font-family: "DM Mono", monospace; font-size: 7px; text-align: right; }
.product-note { position: absolute; z-index: 1; right: -34px; bottom: 44px; padding: 10px 12px; color: #d8ecff; background: #111f3d; border-radius: 7px; box-shadow: 0 8px 20px rgba(3,12,31,.25); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .2px; transform: rotate(-2.2deg); }
.product-note i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(86,214,157,.14); }
.proof-band { display: flex; justify-content: center; align-items: center; gap: 22px; min-height: 96px; padding: 18px; color: #d6e0f4; background: var(--ink); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.proof-band p { margin: 0; }.proof-band i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: var(--cyan); }
section { padding: 112px 0; }
.section-heading { max-width: 735px; }.section-heading h2 { margin-bottom: 0; font-size: clamp(34px, 4vw, 55px); }.section-heading p { margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.workflow { padding-bottom: 118px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.step { min-height: 234px; padding: 25px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.64); }
.step-number { margin-bottom: 51px; color: var(--blue); font-family: "DM Mono", monospace; font-size: 12px; }.step h3 { margin-bottom: 13px; font-size: 24px; }.step p:last-child { margin-bottom: 0; color: #617089; font-size: 13px; line-height: 1.65; }
.desktop-feature { background: #fff; }
.feature-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.feature-copy { padding: 66px; color: #edf5ff; align-self: center; }.feature-copy .eyebrow { color: #71cdeb; }.feature-copy .eyebrow::before { background: var(--cyan); box-shadow: none; }.feature-copy h2 { margin-bottom: 20px; font-size: clamp(32px, 3.3vw, 45px); }.feature-copy p:not(.eyebrow) { max-width: 435px; color: #b5c4dc; font-size: 14px; line-height: 1.75; }.feature-copy ul { padding: 0; margin: 26px 0 0; list-style: none; color: #d8e7fa; font-size: 13px; line-height: 2.15; }.feature-copy li::before { content: "→"; margin-right: 10px; color: var(--cyan); }
.network-map { position: relative; display: grid; place-items: center; min-height: 410px; overflow: hidden; background: radial-gradient(circle at 45% 44%, #315b97, #152747 47%, #0d1c36 100%); }
.network-map::before, .network-map::after { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(119,190,250,.21); border-radius: 50%; }.network-map::after { width: 210px; height: 210px; }
.node { position: absolute; z-index: 1; padding: 9px 11px; border: 1px solid rgba(150,208,255,.24); border-radius: 7px; color: #dcecff; background: rgba(13,31,62,.83); box-shadow: 0 12px 25px rgba(3,12,30,.25); font-family: "DM Mono", monospace; font-size: 10px; }.node::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }.node.server { padding: 17px 20px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 700; }.node.server::before { background: #a9f3d1; }.node.one { top: 19%; right: 15%; }.node.two { bottom: 17%; left: 12%; }.node.three { right: 9%; bottom: 26%; }.node.four { top: 19%; left: 11%; }
.cloud { background: #eef3f8; }.cloud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }.cloud-card { min-height: 250px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.cloud-card .icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 38px; border-radius: 11px; color: #1767aa; background: #d9eff8; font-size: 20px; }.cloud-card h3 { margin-bottom: 10px; font-size: 23px; }.cloud-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.pricing-callout { padding: 105px 32px; color: #fff; text-align: center; background: radial-gradient(circle at 52% 30%, #244d9e 0, #13284e 35%, #07142c 74%); }.pricing-callout h2 { margin: 0 auto 16px; max-width: 780px; font-size: clamp(42px, 5vw, 65px); }.pricing-callout h2 em { color: #59cef1; }.pricing-callout p { max-width: 610px; margin: 0 auto 29px; color: #b8cced; font-size: 16px; line-height: 1.7; }.pricing-callout .button-primary { color: var(--blue); background: #fff; box-shadow: none; }.pricing-callout .button-quiet { color: #fff; border-color: rgba(255,255,255,.38); background: transparent; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 122px; color: #7d899c; font-size: 12px; }.footer-links { display: flex; gap: 17px; flex-wrap: wrap; }.footer-links a:hover { color: var(--blue); }
@media (max-width: 800px) { .shell { padding: 0 21px; }.nav { display: none; }.hero { grid-template-columns: 1fr; gap: 49px; padding: 56px 25px 74px; }.product-card { max-width: 390px; }.steps, .cloud-grid { grid-template-columns: 1fr; }.feature-layout { grid-template-columns: 1fr; }.feature-copy { padding: 50px 29px; }.network-map { min-height: 350px; }.proof-band { flex-wrap: wrap; gap: 10px 15px; }.proof-band p { width: 42%; }.proof-band i { display: none; } section { padding: 78px 0; } footer { align-items: flex-start; justify-content: center; flex-direction: column; padding: 30px 0; }.site-header { height: 75px; }.product-note { right: -18px; }.cloud-card { min-height: 0; }.cloud-card .icon { margin-bottom: 25px; } }
@media (max-width: 450px) { .hero { padding-right: 20px; padding-left: 20px; }.actions .button { width: 100%; }.product-card { transform: none; }.product-note { right: -8px; bottom: 24px; transform: none; }.pricing-callout { padding-right: 20px; padding-left: 20px; } }