:root {
    color-scheme: light;
    --ink: #142038;
    --muted: #505f77;
    --line: #dbe3ef;
    --blue: #254ccc;
    --deep-blue: #183aa7;
    --mint: #6cebd1;
    --tint: #f4f7fc;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.035em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid #4985ff; outline-offset: 4px; }
.shell { width: min(1216px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: absolute; inset: 8px auto auto 8px; z-index: 2; padding: 10px 16px; background: #fff; transform: translateY(-150%); }
.skip:focus { transform: none; }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1.15; }
.brand strong { display: block; font-size: .99rem; letter-spacing: -.025em; }
.brand small { display: block; margin-top: 4px; font-size: .59rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.brand-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--ink); border-radius: 11px; color: var(--mint); }
.brand-icon svg { width: 23px; }
.site-nav, .account, .actions { display: flex; align-items: center; flex-wrap: wrap; }
.site-nav { gap: 6px clamp(12px, 1.5vw, 22px); }
.account { gap: 6px 16px; }
.site-nav a, .sign-in { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 650; }
.site-nav a:hover, .sign-in:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 50px; padding: 11px 17px; border: 1px solid transparent; border-radius: 9px; background: var(--blue); color: #fff; font-size: .89rem; font-weight: 750; text-align: center; }
.button:hover { background: var(--deep-blue); }
.button.compact { min-height: 44px; padding: 8px 14px; }
.button.outline { color: var(--ink); background: #fff; border-color: #bdcbe2; }
.button.outline:hover { color: var(--blue); border-color: var(--blue); }

.hero-band { background: radial-gradient(ellipse at 92% 10%, #dde8ff, transparent 58%), linear-gradient(#f5f8ff, #fff); border-bottom: 1px solid var(--line); }
.hero-layout { display: grid; grid-template-columns: 1fr 1.03fr; align-items: center; gap: clamp(24px, 4vw, 64px); padding-block: clamp(44px, 7vw, 104px); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #c4d4f3; border-radius: 99px; color: var(--deep-blue); background: #eef3ff; font-size: .68rem; font-weight: 800; letter-spacing: .09em; }
.badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }
.hero-copy h1 { font-size: clamp(2.65rem, 5.15vw, 4.75rem); letter-spacing: -.065em; margin: 18px 0; }
.hero-copy h1 em { color: var(--blue); font-style: normal; display: block; }
.hero-copy p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 44ch; }
.actions { gap: 10px; margin-top: 24px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 19px; color: var(--muted); font-size: .79rem; font-weight: 650; }
.hero-notes span::before { content: "✓"; color: #116d58; margin-right: 6px; }

.console { min-width: 0; border: 1px solid #2b4263; border-radius: 19px; overflow: hidden; color: #f3f7ff; background: radial-gradient(ellipse at 15% 48%, #12354c, #101c31 62%); box-shadow: 0 22px 44px #17345d30; }
.console-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #30425e; background: #0d1729; }
.console-dots { display: flex; gap: 5px; }
.console-dots i { width: 7px; height: 7px; border-radius: 50%; background: #7891b5; }
.console-dots i:first-child { background: var(--mint); }
.demo-label { border: 1px solid #3d5c73; border-radius: 5px; padding: 2px 7px; color: var(--mint); font: 700 .64rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.console-inner { padding: clamp(15px, 2.2vw, 30px); }
.console-kicker { color: var(--mint); font: 700 .69rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }
.console h2 { margin: 7px 0; font-size: clamp(1.35rem, 2.3vw, 2rem); }
.demo-note, .console-data span, .console-bottom { color: #b5c6df; font-size: .76rem; }
.console-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 14px; margin-block: 16px; }
.radar { position: relative; display: grid; place-items: center; isolation: isolate; width: min(100%, 170px); aspect-ratio: 1; margin-inline: auto; overflow: hidden; border-radius: 50%; border: 1px solid #519b9d; background: repeating-radial-gradient(circle, transparent 0 18%, #4ca6a458 18.4% 19%, transparent 19.4% 25%), linear-gradient(transparent 49.5%, #4ca6a458 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #4ca6a458 50%, transparent 50.5%), #103446; }
.radar b { color: var(--mint); font: 800 clamp(1rem, 3vw, 2rem)/1 ui-monospace, monospace; text-shadow: 0 0 16px #5de9d399; }
.radar-scan { position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 25deg, transparent 71%, #61f7d44d 99%, #61f7d47d); }
.ping { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.ping.one { top: 27%; left: 59%; }
.ping.two { top: 62%; left: 28%; }
.ping.three { top: 67%; left: 75%; }
.stages { padding: 0; margin: 0; list-style: none; display: grid; gap: 6px; }
.stages li { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid #324664; border-radius: 7px; background: #15253c; font-size: .76rem; font-weight: 650; }
.stages li span { color: var(--mint); font: .72rem/1.4 ui-monospace, monospace; }
.is-animated .radar-scan { animation: sweep 8s linear infinite; }
.is-animated .stages li { animation: highlight 8s ease infinite; }
.is-animated .stages li:nth-child(2) { animation-delay: 2.5s; }
.is-animated .stages li:nth-child(3) { animation-delay: 5s; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes highlight { 0%, 26%, 100% { border-color: #324664; } 12% { border-color: #67d9c4; } }
.console-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.console-data div { display: grid; gap: 2px; padding: 8px; border: 1px solid #324664; background: #111e33; border-radius: 7px; overflow-wrap: anywhere; }
.console-data strong { font-size: .8rem; }
.console-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; margin-top: 9px; }
.motion-toggle { min-height: 44px; padding: 0 4px; border: 0; color: var(--mint); background: transparent; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.section { padding-block: clamp(46px, 6.1vw, 86px); }
.tinted { background: var(--tint); border-block: 1px solid var(--line); }
.section-heading { margin-bottom: 26px; }
.section-heading h2 { max-width: 23ch; font-size: clamp(1.95rem, 3.6vw, 3.3rem); margin-top: 7px; }
.eyebrow, .category { color: var(--deep-blue); font: 750 .72rem/1.5 ui-monospace, monospace; letter-spacing: .11em; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { padding: clamp(16px, 2.5vw, 30px); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.card h3, .steps h3 { font-size: 1.28rem; margin: 12px 0 7px; }
.card p, .steps p, .faq-list p { color: var(--muted); }
.tile { display: grid; place-items: center; width: 40px; height: 40px; color: var(--blue); background: #ebf0ff; border-radius: 9px; font-size: 1.3rem; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { border-top: 1px solid #b9c9e8; padding: 14px 8px 0 0; }
.step-number { color: var(--blue); font: 750 1rem/1.4 ui-monospace, monospace; }
.pricing .featured { border-color: #7d9bef; box-shadow: inset 0 3px var(--blue); }
.pricing .price { color: var(--ink); font-size: 1.12rem; font-weight: 750; margin-bottom: 8px; }
.pricing .button { margin-top: 17px; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { padding: 15px 0; cursor: pointer; font-weight: 720; }
.faq-list p { padding-bottom: 14px; max-width: 64ch; }
.site-footer { background: #0e192c; color: #c3d0e5; }
.footer-content { padding-block: 42px; display: grid; grid-template-columns: 1.5fr .65fr 1fr; gap: 16px; }
.footer-content strong, .footer-brand { color: #fff; font-weight: 750; }
.footer-content a { display: block; width: fit-content; overflow-wrap: anywhere; }
.footer-content a:hover { text-decoration: underline; }
.footer-content p, .footer-content a:not(.footer-brand) { font-size: .9rem; margin-top: 5px; }
.footer-bottom { border-top: 1px solid #354560; padding-block: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; font-size: .8rem; }

@media (max-width: 1050px) {
    .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-top: 12px; gap: 3px 14px; }
    .site-nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
    .account { justify-content: flex-end; }
}
@media (max-width: 850px) {
    .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .console { width: min(100%, 620px); }
    .hero-copy h1 { max-width: 16ch; }
}
@media (max-width: 640px) {
    .shell { width: calc(100% - 36px); }
    .card-grid, .faq-layout, .footer-content { grid-template-columns: minmax(0, 1fr); }
    .steps { gap: 19px; }
    .faq-layout .section-heading { margin-bottom: 0; }
    .footer-content { gap: 20px; }
}
@media (max-width: 460px) {
    .header-inner { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
    .site-nav { grid-row: 3; gap: 0 12px; }
    .account { justify-content: flex-start; margin-block: 2px 4px; }
    .actions { align-items: stretch; flex-direction: column; }
    .console-grid { gap: 8px; }
    .console-data { grid-template-columns: minmax(0, 1fr); }
}