@layer reset, tokens, base, layout, components, widgets, pages;
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/outfit-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/outfit-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/outfit-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/outfit-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@view-transition { navigation: auto; }
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { min-block-size: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, canvas, video { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}
@layer tokens {
:root {
color-scheme: dark;
--fjord: #071824;
--fjord-2: #0a1f2e;
--current: #0f3044;
--glacier: #7fd6e8;
--aurora: #46e8b0;
--violet: #9a8cff;
--dawn: #ffb88a;
--snow: #f3f8fb;
--mist: #a3b9c9;
--ink: #04141d;
--bg: var(--fjord);
--fg: var(--snow);
--fg-2: var(--mist);
--line: rgb(163 185 201 / .2);
--line-strong: rgb(163 185 201 / .4);
--glass: rgb(15 48 68 / .5);
--font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
--step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
--step-0: clamp(1rem, .95rem + .25vw, 1.125rem);
--step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
--step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
--step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
--step-4: clamp(2.35rem, 1.5rem + 3.8vw, 4.6rem);
--step-5: clamp(2.7rem, 1.3rem + 6vw, 6rem);
--gutter: clamp(1.1rem, 4vw, 2.5rem);
--max: 78rem;
--ease: cubic-bezier(.2, .7, .2, 1);
}
}
@layer base {
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--step-0); font-weight: 400; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.012em; line-height: 1.2; }
p { text-wrap: pretty; max-inline-size: 62ch; }
a { text-decoration-thickness: .08em; text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgb(70 232 176 / .35); color: #fff; }
kbd { font-family: var(--mono); font-size: .72em; padding: .1em .45em; border: 1px solid var(--line-strong); border-radius: .3rem; color: var(--fg-2); }
.i { inline-size: 1.25em; block-size: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; inset: .75rem auto auto .75rem; z-index: 100; padding: .6rem 1rem; background: var(--snow); color: var(--ink); border-radius: .4rem; transform: translateY(-200%); }
.skip:focus { transform: none; }
}
@layer layout {
.wrap { inline-size: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(4rem, 9vw, 8rem); }
.section--tint { background: var(--fjord-2); }
.section-head { display: grid; gap: 1rem; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.section-head p { color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; }
.lede { color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; }
.stack > * + * { margin-block-start: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
}
@layer components {
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; border-block-end: 1px solid transparent; transition: background-color .3s, border-color .3s, backdrop-filter .3s; }
.site-header[data-stuck] { background: rgb(7 24 36 / .8); border-color: var(--line); backdrop-filter: blur(14px) saturate(1.3); }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; block-size: 4.5rem; }
.brand { display: block; flex: none; }
.brand img { block-size: 2.35rem; inline-size: auto; filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 1.5rem; margin-inline-start: auto; }
.nav__list { display: flex; gap: .25rem; list-style: none; padding: 0; }
.nav__link { display: block; padding: .5rem .8rem; border-radius: 999px; text-decoration: none; color: var(--fg-2); font-size: .95rem; font-weight: 400; transition: color .2s, background-color .2s; }
.nav__link:hover { color: var(--fg); background: rgb(255 255 255 / .06); }
.nav__link[aria-current="page"] { color: var(--fg); background: rgb(127 214 232 / .12); }
.nav__phone { display: none; }
.site-header__actions { display: flex; align-items: center; gap: .75rem; }
.kbd-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: .85rem; transition: border-color .2s, color .2s; }
.kbd-btn:hover { border-color: var(--glacier); color: var(--fg); }
.menu-btn { display: none; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; }
.menu-btn__close { display: none; }
[data-open] .menu-btn__open { display: none; }
[data-open] .menu-btn__close { display: block; }
.progress { position: absolute; inset: auto 0 -1px 0; block-size: 2px; background: linear-gradient(90deg, var(--aurora), var(--glacier), var(--violet)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s; }
.site-header[data-stuck] .progress { opacity: 1; }
@media (max-width: 68rem) {
.kbd-btn span, .kbd-btn kbd { display: none; }
.kbd-btn { padding: .6rem; }
}
@media (max-width: 63.99rem) {
.menu-btn { display: grid; }
.site-header__actions .btn { display: none; }
.site-header__actions { margin-inline-start: auto; }
.nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2rem; padding: 6.5rem var(--gutter) 2rem; background: rgb(7 24 36 / .97); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(-.75rem); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; overflow-y: auto; }
[data-open] .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__list { flex-direction: column; gap: 0; }
.nav__link { padding: 1.1rem 0; border-radius: 0; border-block-end: 1px solid var(--line); font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.nav__link[aria-current="page"] { background: none; color: var(--aurora); }
.nav__phone { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--step-1); text-decoration: none; color: var(--glacier); }
html:has([data-open]) { overflow: hidden; }
}
}
@layer components {
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1.1; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, background-color .2s, border-color .2s; }
.btn--sm { padding: .6rem 1.05rem; font-size: .92rem; }
.btn--primary { color: var(--ink); background: linear-gradient(105deg, var(--aurora), var(--glacier)); box-shadow: 0 10px 30px -12px rgb(70 232 176 / .7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgb(70 232 176 / .85); }
.btn--ghost { color: var(--fg); border-color: var(--line-strong); background: rgb(255 255 255 / .03); }
.btn--ghost:hover { border-color: var(--glacier); background: rgb(127 214 232 / .09); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
}
@layer components {
.site-footer { position: relative; margin-block-start: 0; background: #050f19; border-block-start: 1px solid var(--line); padding-block-start: 4.5rem; }
.site-footer__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-block-end: 3rem; }
.site-footer__logo { block-size: 2.6rem; inline-size: auto; margin-block-end: 1rem; filter: brightness(0) invert(1); }
.site-footer__brand p { color: var(--fg-2); }
.site-footer__title { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin-block-end: 1rem; color: var(--fg); }
.site-footer li + li { margin-block-start: .55rem; }
.site-footer__link { color: var(--fg-2); text-decoration: none; transition: color .2s; }
.site-footer__link:hover, .site-footer__link[aria-current="page"] { color: var(--aurora); }
.site-footer__note { color: var(--fg-2); }
.site-footer__base { position: relative; padding-block: 1.5rem; border-block-start: 1px solid var(--line); color: var(--fg-2); font-size: var(--step--1); }
.ridge { position: absolute; inset-inline: 0; pointer-events: none; }
.ridge--footer { inset-block-start: 0; block-size: 4.5rem; transform: translateY(-99%); opacity: .9; }
@media (max-width: 52rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
}
@layer components {
.palette { inline-size: min(34rem, 100% - 2rem); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: .9rem; background: rgb(9 30 44 / .96); color: var(--fg); box-shadow: 0 40px 90px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(127 214 232 / .06); backdrop-filter: blur(20px); overflow: hidden; }
.palette::backdrop { background: rgb(3 10 16 / .7); backdrop-filter: blur(4px); }
.palette[open] { animation: pal-in .22s var(--ease); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-.6rem) scale(.98); } }
.palette__search { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border-block-end: 1px solid var(--line); color: var(--fg-2); }
.palette__search input { flex: 1; min-inline-size: 0; background: none; border: 0; outline: 0; color: var(--fg); font-size: 1.05rem; }
.palette__list { list-style: none; padding: .4rem; max-block-size: 20rem; overflow-y: auto; }
.palette__list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .8rem; border-radius: .5rem; cursor: pointer; }
.palette__list li small { color: var(--fg-2); font-size: .78rem; }
.palette__list li[aria-selected="true"] { background: rgb(127 214 232 / .13); }
.palette__list li[hidden] { display: none; }
}
@layer components {
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .45rem; }
.field__label { font-size: .92rem; color: var(--fg-2); }
.field__input { inline-size: 100%; padding: .85rem 1rem; background: rgb(255 255 255 / .04); border: 1px solid var(--line-strong); border-radius: .5rem; color: var(--fg); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field__input::placeholder { color: rgb(163 185 201 / .55); }
.field__input:hover { border-color: rgb(127 214 232 / .6); }
.field__input:focus-visible { outline: 0; border-color: var(--glacier); box-shadow: 0 0 0 3px rgb(127 214 232 / .22); background: rgb(255 255 255 / .06); }
.field__input:user-invalid { border-color: var(--dawn); }
textarea.field__input { min-block-size: 9rem; resize: vertical; }
select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%; background-size: .4rem .4rem; background-repeat: no-repeat; padding-inline-end: 2.5rem; }
select.field__input option { background: #0a1f2e; color: #f3f8fb; }
.form__hp { position: absolute; inset-inline-start: -9999px; }
.form__status { min-block-size: 1.5rem; font-size: .95rem; }
.form__status[data-state="ok"] { color: var(--aurora); }
.form__status[data-state="error"] { color: var(--dawn); }
@media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } }
}
@layer components {
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: min(100svh, 62rem); padding-block: 9rem clamp(10rem, 24vw, 20rem); overflow: clip; background: var(--fjord); }
.hero__fallback { position: absolute; inset: 0; z-index: -4; background:
radial-gradient(55% 45% at 78% 28%, rgb(70 232 176 / .32), transparent 70%),
radial-gradient(45% 40% at 56% 18%, rgb(154 140 255 / .3), transparent 70%),
linear-gradient(#050f19, #0a2534 72%, #0d3140); }
.hero__sky { position: absolute; inset: 0; z-index: -3; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 1.4s ease; }
.hero__sky[data-ready] { opacity: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
linear-gradient(90deg, rgb(5 16 26 / .82), rgb(5 16 26 / .45) 42%, transparent 74%),
linear-gradient(0deg, rgb(7 24 36 / .6), transparent 38%); }
.hero__ridge { position: absolute; inset: auto 0 -1px 0; z-index: -1; inline-size: 100%; block-size: clamp(10rem, 30vw, 26rem); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero h1 { font-size: var(--step-5); max-inline-size: 12.5ch; letter-spacing: -.038em; line-height: .96; }
.hero__lede { margin-block: 1.6rem 2.2rem; max-inline-size: 40ch; color: rgb(243 248 251 / .82); font-size: var(--step-1); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__ridge .r-far { fill: #0d2f42; }
.hero__ridge .r-mid { fill: #0a2536; }
.hero__ridge .r-near { fill: var(--fjord); }
.hero__ridge .r-rim { fill: none; stroke: rgb(127 214 232 / .45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hero__ridge .r-link { stroke: rgb(127 214 232 / .35); stroke-width: 1; stroke-dasharray: 3 6; fill: none; vector-effect: non-scaling-stroke; }
.hero__ridge .r-node { fill: var(--aurora); }
.hero__ridge .r-ping { fill: none; stroke: var(--aurora); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: node-ping 3.6s ease-out infinite; animation-delay: var(--d, 0s); vector-effect: non-scaling-stroke; }
@keyframes node-ping { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
[data-enter] { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(1.4rem); } }
@media (max-width: 62rem) {
.hero { align-items: start; padding-block-end: clamp(11rem, 34vw, 18rem); }
.hero__grid { grid-template-columns: 1fr; }
.hero h1 { max-inline-size: 14ch; }
}
}
@layer components {
.log { inline-size: 100%; max-inline-size: 27rem; justify-self: end; padding: 1.1rem 1.25rem 1rem; background: var(--glass); border: 1px solid var(--line-strong); border-radius: .75rem; backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.log__head { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.log__dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--aurora); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(70 232 176 / .7); } 80%, 100% { box-shadow: 0 0 0 .6rem rgb(70 232 176 / 0); } }
.log__tag { margin-inline-start: auto; font-weight: 400; color: var(--fg-2); font-size: .8rem; }
.log__list { list-style: none; padding: 0; margin-block-start: .8rem; block-size: 15rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.log__item { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; padding-block: .55rem; border-block-start: 1px solid var(--line); font-size: .9rem; line-height: 1.35; max-block-size: 6rem; overflow: hidden; animation: log-in .7s var(--ease) both; }
.log__item time { font-family: var(--mono); font-size: .78rem; color: var(--glacier); padding-block-start: .15em; }
.log__item[data-tone="warn"] time { color: var(--dawn); }
@keyframes log-in { from { max-block-size: 0; padding-block: 0; opacity: 0; } }
}
@layer components {
.page-head { position: relative; isolation: isolate; padding-block: clamp(8rem, 16vw, 11rem) clamp(5rem, 9vw, 7.5rem); overflow: clip; }
.page-head::before { content: ""; position: absolute; inset: -25% -10% 0; z-index: -1; background:
radial-gradient(45% 60% at 82% 18%, rgb(70 232 176 / .26), transparent 70%),
radial-gradient(40% 55% at 58% 0%, rgb(154 140 255 / .28), transparent 72%),
radial-gradient(35% 45% at 96% 48%, rgb(127 214 232 / .18), transparent 70%); animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-4%, 3%, 0) scale(1.07); } }
.page-head h1 { max-inline-size: 15ch; }
.page-head .lede { margin-block-start: 1.4rem; max-inline-size: 46ch; }
.page-head__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 2.2rem; }
.ridge--head { inset-block-end: -1px; block-size: clamp(3.5rem, 9vw, 7rem); z-index: -1; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-size: .95rem; color: var(--fg-2); background: rgb(255 255 255 / .03); transition: border-color .2s, color .2s, background-color .2s; }
.chip:hover { border-color: var(--aurora); color: var(--fg); background: rgb(70 232 176 / .08); }
}
@layer components {
.cover { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cover__intro { position: sticky; inset-block-start: 7rem; display: grid; gap: 1.25rem; justify-items: start; }
.cover__intro p { color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; }
.cover__list { list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
.cover__row { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-block: 1.6rem; border-block-end: 1px solid var(--line); text-decoration: none; color: inherit; }
.cover__row::after { content: ""; position: absolute; inset: auto auto -1px 0; block-size: 2px; inline-size: 0; background: linear-gradient(90deg, var(--aurora), var(--glacier)); transition: inline-size .55s var(--ease); }
.cover__row:hover::after, .cover__row:focus-visible::after { inline-size: 100%; }
.cover__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 1px solid var(--line-strong); border-radius: .6rem; color: var(--glacier); transition: color .3s, border-color .3s, background-color .3s; }
.cover__row:hover .cover__icon, .cover__row:focus-visible .cover__icon { color: var(--aurora); border-color: var(--aurora); background: rgb(70 232 176 / .08); }
.cover__row p { color: var(--fg-2); margin-block-start: .35rem; font-size: 1rem; }
@media (max-width: 56rem) { .cover { grid-template-columns: 1fr; } .cover__intro { position: static; } }
}
@layer components {
.duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.duo__panel { position: relative; isolation: isolate; display: grid; gap: 1.75rem; align-content: space-between; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line-strong); border-radius: 1rem; background: linear-gradient(160deg, rgb(15 48 68 / .85), rgb(8 26 38 / .85)); overflow: clip; }
.duo__panel::before { content: ""; position: absolute; inset: -30% -20% auto auto; inline-size: 70%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--glow, rgb(70 232 176 / .25)), transparent 68%); }
.duo__panel--ai { --glow: rgb(154 140 255 / .32); border-radius: 1rem 3rem 1rem 1rem; }
.duo__panel h3 { font-size: var(--step-2); letter-spacing: -.02em; }
.duo__panel p { color: var(--fg-2); margin-block-start: .8rem; }
.duo__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fg); text-decoration-color: var(--aurora); }
@media (max-width: 62rem) { .duo { grid-template-columns: 1fr; } }
}
@layer components {
.section--snow { --bg: var(--snow); --fg: #0b2231; --fg-2: #3d566a; --line: rgb(11 34 49 / .16); --line-strong: rgb(11 34 49 / .34); background: var(--bg); color: var(--fg); }
.section--snow::before { content: ""; position: absolute; inset: auto 0 calc(100% - 1px) 0; block-size: clamp(2.2rem, 6vw, 5rem); background: var(--snow); clip-path: polygon(0 100%, 0 62%, 6% 48%, 11% 60%, 20% 22%, 26% 44%, 33% 30%, 42% 66%, 49% 40%, 57% 10%, 65% 46%, 72% 30%, 81% 60%, 89% 26%, 95% 46%, 100% 32%, 100% 100%); }
.section--snow .btn--ghost { color: var(--fg); background: rgb(11 34 49 / .04); }
.section--snow .btn--ghost:hover { background: rgb(11 34 49 / .09); border-color: #0b2231; }
}
@layer components {
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; counter-reset: step; }
.steps::before { content: ""; position: absolute; inset: 1rem 0 auto 0; block-size: 1px; background: var(--line-strong); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps__item { position: relative; padding: 3rem 1.5rem 0 0; counter-increment: step; }
.steps__item::before { content: counter(step); position: absolute; inset: 0 auto auto 0; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--fg); color: var(--bg); font-weight: 600; font-size: .9rem; }
.steps__item h3 { margin-block-end: .5rem; }
.steps__item p { color: var(--fg-2); font-size: 1rem; }
@media (max-width: 62rem) {
.steps, .steps--5 { grid-template-columns: 1fr; gap: 2rem; }
.steps::before { inset: 1rem auto 1rem 1rem; inline-size: 1px; block-size: auto; }
.steps__item { padding: 0 0 0 3.25rem; }
}
}
@layer components {
.faq { border-block-start: 1px solid var(--line); }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.3rem; font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; line-height: 1.25; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; inline-size: 1.85rem; block-size: 1.85rem; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / .8rem 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px .8rem no-repeat; transition: transform .35s var(--ease), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: rgb(70 232 176 / .14); }
.faq details > p { padding-block-end: 1.5rem; color: var(--fg-2); }
.faq summary:hover { color: var(--aurora); }
.section--snow .faq summary:hover { color: #0a7a5a; }
@supports (interpolate-size: allow-keywords) {
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
}
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-layout > .section-head { margin: 0; position: sticky; inset-block-start: 7rem; }
@media (max-width: 56rem) { .faq-layout { grid-template-columns: 1fr; } .faq-layout > .section-head { position: static; } }
}
@layer components {
.cta { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(4.5rem, 10vw, 8rem); border-block-start: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: -30% 0 -60%; z-index: -1; background:
radial-gradient(40% 55% at 85% 40%, rgb(70 232 176 / .28), transparent 70%),
radial-gradient(35% 50% at 58% 62%, rgb(154 140 255 / .26), transparent 70%); animation: drift 26s ease-in-out infinite alternate; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.cta h2 { font-size: var(--step-4); max-inline-size: 14ch; }
.cta__side { display: grid; gap: 1.1rem; justify-items: start; }
.cta__side p { color: var(--fg-2); }
.cta__phone { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--step-2); font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.cta__phone:hover { color: var(--aurora); }
@media (max-width: 52rem) { .cta__grid { grid-template-columns: 1fr; } }
}
@layer widgets {
.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); border-block-start: 1px solid var(--line); }
.service:nth-of-type(even) .viz { order: -1; }
.service__title { display: flex; align-items: center; gap: .9rem; margin-block-end: 1.1rem; }
.service__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--line-strong); border-radius: .6rem; color: var(--aurora); }
.service h2 { font-size: var(--step-3); }
.service__body > p { color: var(--fg-2); font-size: var(--step-0); }
.checks { list-style: none; padding: 0; margin-block-start: 1.5rem; display: grid; gap: .65rem; }
.checks li { display: flex; gap: .7rem; align-items: start; color: var(--fg-2); }
.checks .i { color: var(--aurora); margin-block-start: .22em; }
.viz { position: relative; border: 1px solid var(--line-strong); border-radius: 1rem; background: radial-gradient(90% 80% at 50% 0%, rgb(15 48 68 / .95), rgb(6 20 30 / .95)); padding: clamp(1rem, 2.5vw, 1.75rem); overflow: clip; }
.viz__caption { margin-block-start: .9rem; font-size: var(--step--1); color: var(--fg-2); }
@media (max-width: 56rem) { .service { grid-template-columns: 1fr; } .service:nth-of-type(even) .viz { order: 0; } }
.legend { list-style: none; padding: 0; margin-block-start: 1rem; display: grid; gap: .4rem; font-size: .9rem; color: var(--fg-2); }
.legend li { display: flex; align-items: center; gap: .6rem; }
.legend i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--dawn); flex: none; }
.legend i.ok { background: var(--aurora); }
}
@layer widgets {
.radar { inline-size: min(100%, 26rem); margin-inline: auto; block-size: auto; }
.radar__ring { fill: none; stroke: rgb(127 214 232 / .22); stroke-width: 1; }
.radar__axis { stroke: rgb(127 214 232 / .14); stroke-width: 1; }
.radar__sweep { transform-origin: 50% 50%; transform-box: view-box; animation: spin 6s linear infinite; animation-play-state: paused; }
.radar__blip { transform-box: fill-box; transform-origin: center; opacity: 0; animation: blip 6s linear infinite; animation-delay: var(--d); animation-play-state: paused; }
.is-live .radar__sweep, .is-live .radar__blip { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blip {
0% { opacity: 0; fill: var(--dawn); transform: scale(.4); }
3% { opacity: 1; transform: scale(1.5); }
8% { transform: scale(1); }
30% { fill: var(--dawn); }
38% { fill: var(--aurora); }
78% { opacity: .9; }
100% { opacity: 0; fill: var(--aurora); }
}
}
@layer widgets {
.net { inline-size: 100%; block-size: auto; }
.net__link { fill: none; stroke: rgb(127 214 232 / .5); stroke-width: 1.4; stroke-dasharray: 3 7; animation: dash 1.4s linear infinite; animation-play-state: paused; }
.is-live .net__link { animation-play-state: running; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.net__node { fill: #0d2b3d; stroke: var(--glacier); stroke-width: 1.5; }
.net__node--core { stroke: var(--aurora); }
.net__label { fill: var(--mist); font-size: 12px; font-family: var(--font); text-anchor: middle; }
.net__wave { fill: none; stroke: var(--aurora); stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: wifi 2.4s ease-out infinite; animation-delay: var(--d, 0s); animation-play-state: paused; }
.is-live .net__wave { animation-play-state: running; }
@keyframes wifi { 0% { opacity: .9; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
.net__packet { fill: var(--aurora); }
}
@layer widgets {
.plates { inline-size: 100%; block-size: auto; }
.plate { animation: bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); animation-play-state: paused; }
.is-live .plate { animation-play-state: running; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.plate__top { fill: rgb(15 48 68 / .9); stroke: var(--glacier); stroke-width: 1.4; }
.plate__side { fill: rgb(8 30 44 / .95); stroke: rgb(127 214 232 / .5); stroke-width: 1; }
.plate__label { fill: var(--snow); font: 600 14px var(--font); }
.plate__sub { fill: var(--mist); font: 400 11.5px var(--font); }
.plates__beam { stroke: var(--aurora); stroke-width: 1.4; stroke-dasharray: 2 6; fill: none; animation: dash 1.2s linear infinite; animation-play-state: paused; }
.is-live .plates__beam { animation-play-state: running; }
}
@layer widgets {
.term { font-family: var(--mono); font-size: .85rem; line-height: 1.75; color: #d5e4ee; }
.term__bar { display: flex; align-items: center; gap: .4rem; padding-block-end: .9rem; margin-block-end: .9rem; border-block-end: 1px solid var(--line); color: var(--fg-2); font-size: .78rem; }
.term__bar i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: rgb(163 185 201 / .35); }
.term__bar span { margin-inline-start: .6rem; }
.term__body { min-block-size: 13rem; white-space: pre-wrap; }
.term .t-ok { color: var(--aurora); }
.term .t-dim { color: var(--mist); }
.term .t-warn { color: var(--dawn); }
.term .t-you { color: var(--glacier); }
.term__caret { display: inline-block; inline-size: .55em; block-size: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; background: var(--aurora); animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
}
@layer widgets {
.backup { display: grid; gap: 1.1rem; }
.backup__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.backup__head output { font-family: var(--mono); color: var(--glacier); font-size: .9rem; }
.backup input[type="range"] { inline-size: 100%; appearance: none; background: none; block-size: 2rem; cursor: pointer; }
.backup input[type="range"]::-webkit-slider-runnable-track { block-size: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--aurora) 0 var(--fill, 50%), rgb(163 185 201 / .3) var(--fill, 50%)); }
.backup input[type="range"]::-moz-range-track { block-size: 4px; border-radius: 4px; background: rgb(163 185 201 / .3); }
.backup input[type="range"]::-moz-range-progress { block-size: 4px; border-radius: 4px; background: var(--aurora); }
.backup input[type="range"]::-webkit-slider-thumb { appearance: none; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: -.65rem; border-radius: 50%; background: var(--snow); border: 3px solid var(--aurora); box-shadow: 0 0 0 6px rgb(70 232 176 / .16); }
.backup input[type="range"]::-moz-range-thumb { inline-size: 1.1rem; block-size: 1.1rem; border-radius: 50%; background: var(--snow); border: 3px solid var(--aurora); box-shadow: 0 0 0 6px rgb(70 232 176 / .16); }
.backup__ticks { display: flex; justify-content: space-between; list-style: none; padding: 0; margin-block-start: -.4rem; font-family: var(--mono); font-size: .72rem; color: var(--fg-2); }
.backup__files { list-style: none; padding: 0; display: grid; gap: .5rem; }
.backup__files li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .92rem; transition: border-color .3s, background-color .3s; }
.backup__files li span:last-child { font-family: var(--mono); font-size: .8rem; color: var(--aurora); white-space: nowrap; }
.backup__files li[data-state="bad"] { border-color: rgb(255 184 138 / .55); background: rgb(255 184 138 / .07); }
.backup__files li[data-state="bad"] span:last-child { color: var(--dawn); }
.backup__bar { block-size: 4px; border-radius: 4px; background: rgb(163 185 201 / .2); overflow: hidden; }
.backup__bar span { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--aurora), var(--glacier)); }
.backup__status { min-block-size: 1.4rem; font-size: .92rem; color: var(--fg-2); }
.backup__status[data-state="ok"] { color: var(--aurora); }
}
@layer widgets {
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line-strong); border-radius: 1rem; overflow: clip; background: #061520; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); }
.demo__code { padding: 1.25rem 1.4rem; font-family: var(--mono); font-size: .82rem; line-height: 1.75; color: #cfe0ec; min-block-size: 22rem; overflow: hidden; }
.demo__bar { display: flex; align-items: center; gap: .4rem; margin-block-end: 1rem; color: var(--fg-2); font-size: .75rem; }
.demo__bar i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: rgb(163 185 201 / .35); }
.demo__bar span { margin-inline-start: .6rem; }
.demo__code pre { font: inherit; white-space: pre-wrap; }
.c-tag { color: #8fd3ff; } .c-attr { color: #b7a8ff; } .c-str { color: #7ff0c2; } .c-txt { color: #e8f1f7; } .c-com { color: #6f8ba0; }
.demo__preview { position: relative; background: #eef4f8; color: #0b2231; padding: 0; display: grid; grid-template-rows: auto 1fr; }
.demo__chrome { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #dbe6ee; }
.demo__chrome i { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #9db3c3; }
.demo__chrome span { margin-inline-start: .5rem; flex: 1; padding: .2rem .7rem; border-radius: 99px; background: #f6fafc; color: #52697a; font-size: .74rem; }
.demo__page { position: relative; padding: 1.1rem 1.3rem 1.4rem; display: grid; align-content: start; gap: 1rem; }
.demo__page > * { opacity: 0; transform: translateY(.6rem); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.demo__page > .is-in { opacity: 1; transform: none; }
.demo__nav { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .9rem; }
.demo__nav span { display: inline-block; padding: .3rem .75rem; border-radius: 99px; background: #0b2231; color: #fff; font-size: .72rem; font-weight: 400; }
.demo__hero { padding-block: 1.2rem .4rem; }
.demo__hero b { display: block; font-size: 1.55rem; line-height: 1.05; letter-spacing: -.03em; max-inline-size: 12ch; }
.demo__hero small { display: block; margin-block-start: .5rem; color: #4b6476; font-size: .8rem; max-inline-size: 30ch; }
.demo__btn { justify-self: start; padding: .5rem 1rem; border-radius: 99px; background: linear-gradient(105deg, #1fbf8f, #45b9d6); color: #04141d; font-size: .8rem; font-weight: 600; }
.demo__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.demo__cards i { display: block; block-size: 3.4rem; border-radius: .5rem; background: #d5e3ec; }
.demo__cards i:nth-child(2) { background: #c4dbe8; } .demo__cards i:nth-child(3) { background: #e2edf3; }
@media (max-width: 52rem) { .demo { grid-template-columns: 1fr; } .demo__code { min-block-size: 16rem; } }
}
@layer widgets {
.chat { display: grid; grid-template-rows: auto 1fr auto; min-block-size: 27rem; border: 1px solid var(--line-strong); border-radius: 1rem; background: rgb(6 20 30 / .85); overflow: clip; }
.chat__head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-block-end: 1px solid var(--line); }
.chat__avatar { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--aurora), var(--violet)); color: var(--ink); }
.chat__head strong { display: block; line-height: 1.2; }
.chat__head small { color: var(--fg-2); font-size: .8rem; }
.chat__log { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem; overflow-y: auto; max-block-size: 22rem; }
.bubble { max-inline-size: 85%; padding: .7rem 1rem; border-radius: 1.1rem; font-size: .95rem; line-height: 1.45; animation: pop .35s var(--ease) both; }
.bubble--bot { align-self: flex-start; background: rgb(255 255 255 / .07); border-end-start-radius: .3rem; }
.bubble--you { align-self: flex-end; background: rgb(70 232 176 / .16); border: 1px solid rgb(70 232 176 / .35); border-end-end-radius: .3rem; }
.bubble--typing { display: inline-flex; gap: .3rem; align-items: center; padding-block: .9rem; }
.bubble--typing i { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--mist); animation: typing 1s infinite; }
.bubble--typing i:nth-child(2) { animation-delay: .15s; } .bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 30% { transform: translateY(-.25rem); opacity: 1; } 0%, 60%, 100% { opacity: .5; } }
@keyframes pop { from { opacity: 0; transform: translateY(.5rem) scale(.98); } }
.chat__options { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.2rem 1.2rem; border-block-start: 1px solid var(--line); min-block-size: 4.6rem; }
.chat__options button { padding: .5rem .95rem; border: 1px solid var(--line-strong); border-radius: 99px; background: rgb(255 255 255 / .04); font-size: .9rem; transition: border-color .2s, background-color .2s; }
.chat__options button:hover { border-color: var(--aurora); background: rgb(70 232 176 / .1); }
.wave { display: flex; align-items: center; gap: 3px; block-size: 3.6rem; }
.wave span { flex: 1; max-inline-size: 5px; block-size: 100%; border-radius: 3px; background: var(--glacier); transform: scaleY(.14); animation: wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.11s); animation-play-state: paused; }
.is-live .wave span, .wave.is-speaking span { animation-play-state: running; }
.wave.is-speaking span { background: var(--aurora); animation-duration: .75s; }
@keyframes wave { 50% { transform: scaleY(var(--h, .6)); } }
}
@layer widgets {
.flow { inline-size: 100%; block-size: auto; }
.flow__node { fill: rgb(15 48 68 / .95); stroke: var(--glacier); stroke-width: 1.4; }
.flow__node--ai { stroke: var(--violet); fill: rgb(46 40 96 / .9); }
.flow__text { fill: var(--snow); font: 600 13.5px var(--font); text-anchor: middle; }
.flow__sub { fill: var(--mist); font: 400 11px var(--font); text-anchor: middle; }
.flow__link { fill: none; stroke: rgb(127 214 232 / .5); stroke-width: 1.4; stroke-dasharray: 3 7; animation: dash 1.4s linear infinite; animation-play-state: paused; }
.is-live .flow__link { animation-play-state: running; }
.flow__token { fill: var(--aurora); }
}
@layer widgets {
.advisor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.advisor fieldset { border: 0; padding: 0; min-inline-size: 0; }
.advisor legend { font-weight: 600; font-size: var(--step-1); letter-spacing: -.012em; margin-block-end: .9rem; }
.advisor__group + .advisor__group { margin-block-start: 2rem; }
.pillset { display: flex; flex-wrap: wrap; gap: .6rem; }
.pillset input { position: absolute; opacity: 0; pointer-events: none; }
.pillset label { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 99px; cursor: pointer; font-size: .98rem; transition: border-color .2s, background-color .2s, color .2s; }
.pillset label:hover { border-color: var(--aurora); }
.pillset input:checked + label { border-color: var(--aurora); background: rgb(70 232 176 / .14); color: var(--fg); }
.pillset input:focus-visible + label { outline: 2px solid var(--glacier); outline-offset: 3px; }
.advisor__result { position: sticky; inset-block-start: 7rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line-strong); border-radius: 1rem; background: linear-gradient(160deg, rgb(15 48 68 / .85), rgb(8 26 38 / .9)); }
.advisor__result h3 { font-size: var(--step-2); margin-block-end: .9rem; }
.advisor__result ul { list-style: none; padding: 0; display: grid; gap: .7rem; margin-block: 1.2rem 1.6rem; }
.advisor__result li { display: flex; gap: .7rem; color: var(--fg-2); }
.advisor__result li .i { color: var(--aurora); margin-block-start: .22em; }
.advisor__result li strong { color: var(--fg); font-weight: 600; }
@media (max-width: 56rem) { .advisor { grid-template-columns: 1fr; } .advisor__result { position: static; } }
}
@layer pages {
.managed { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.managed li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
.managed .i { inline-size: 1.7rem; block-size: 1.7rem; color: var(--glacier); }
.managed h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.managed p { color: var(--fg-2); font-size: .95rem; margin-block-start: .25rem; }
@media (max-width: 62rem) { .managed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .managed { grid-template-columns: 1fr; } }
.rows { list-style: none; padding: 0; border-block-end: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(1.5rem, 5vw, 5rem); padding-block: 1.6rem; border-block-start: 1px solid var(--line); align-items: baseline; }
.rows h3 { font-size: var(--step-1); }
.rows p { color: var(--fg-2); }
@media (max-width: 44rem) { .rows li { grid-template-columns: 1fr; gap: .5rem; } }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.pair > div > p { color: var(--fg-2); margin-block-start: .7rem; }
@media (max-width: 52rem) { .pair { grid-template-columns: 1fr; } }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cap + .cap { margin-block-start: clamp(3rem, 7vw, 6rem); }
.cap__text > p { color: var(--fg-2); margin-block-start: 1rem; }
.cap__text .cluster { margin-block-start: 1.6rem; }
@media (max-width: 56rem) { .cap { grid-template-columns: 1fr; } }
.quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.quote-pair h2 { font-size: var(--step-2); margin-block-end: 1rem; }
.quote-pair p { color: var(--fg-2); font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 52rem) { .quote-pair { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
.facts li { padding: 1.6rem 1.5rem 1.6rem 0; }
.facts li + li { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--line); }
.facts strong { display: block; font-size: var(--step-2); letter-spacing: -.025em; line-height: 1.1; }
.facts span { display: block; margin-block-start: .5rem; color: var(--fg-2); font-size: .95rem; }
@media (max-width: 56rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } .facts li:nth-child(n+3) { border-block-start: 1px solid var(--line); } }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-side { display: grid; gap: 2rem; }
.contact-side dl { display: grid; gap: 1.5rem; }
.contact-side dt { display: flex; align-items: center; gap: .6rem; color: var(--fg-2); font-size: .95rem; margin-block-end: .25rem; }
.contact-side dt .i { color: var(--aurora); }
.contact-side dd { font-size: var(--step-1); font-weight: 600; letter-spacing: -.015em; }
.contact-side dd a { text-decoration: none; }
.contact-side dd a:hover { color: var(--aurora); }
.contact-side dd small { display: block; margin-block-start: .25rem; font-size: .92rem; font-weight: 400; letter-spacing: 0; color: var(--fg-2); }
.form-panel { padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--line-strong); border-radius: 1rem; background: linear-gradient(160deg, rgb(15 48 68 / .7), rgb(8 26 38 / .8)); }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: 1fr; } }
.ridge { inline-size: 100%; }
.ridge .r-far { fill: #0d2f42; }
.ridge .r-rim { fill: none; stroke: rgb(127 214 232 / .38); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ridge .r-near { fill: var(--fjord); }
.ridge--footer .r-far { fill: #0a2233; }
.ridge--footer .r-near { fill: #050f19; }
.mini-code { margin: 0; padding: 1rem 1.1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: #cfe0ec; background: rgb(3 12 19 / .7); border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.section:not(.section--snow), .cta { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
.lost { min-block-size: 70vh; display: grid; align-content: center; padding-block: 9rem 5rem; }
.lost p { margin-block: 1.2rem 2rem; color: var(--fg-2); font-size: var(--step-1); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
[data-enter] { animation: none; }
.log__dot, .term__caret { animation: none; }
.radar__blip { opacity: .9; fill: var(--aurora); }
.hero__ridge .r-ping { display: none; }
}