:root {
    color-scheme: dark;
    --blue: #0a84ff;
    --blue-dark: #0071e3;
    --blue-soft: rgba(10, 132, 255, .14);
    --blue-pale: #111a27;
    --ink: #f4f6f9;
    --muted: #a4adbb;
    --subtle: #737e8d;
    --line: rgba(171, 190, 215, .14);
    --line-strong: rgba(171, 190, 215, .22);
    --surface: #171f2b;
    --white: #111923;
    --success: #30d158;
    --danger: #ff453a;
    --container: 1520px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --shadow-window: 0 44px 100px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.04);
}

html { background: #080d14; }
body {
    background:
        radial-gradient(circle at 78% 4%, rgba(18, 83, 154, .18), transparent 28%),
        radial-gradient(circle at 8% 28%, rgba(14, 75, 109, .12), transparent 24%),
        #090f17;
    color: var(--ink);
}
::selection { background: rgba(10,132,255,.45); color: #fff; }
:focus-visible { outline-color: rgba(10,132,255,.75); }

.site-header {
    border-bottom-color: var(--line);
    background: rgba(10, 15, 22, .84);
    backdrop-filter: saturate(130%) blur(24px);
}
.site-header.is-scrolled { border-color: var(--line-strong); box-shadow: 0 14px 44px rgba(0,0,0,.24); }
.header-inner { min-height: 74px; }
.brand { color: #f7f8fb; }
.brand__mark { border-radius: 11px; box-shadow: 0 10px 28px rgba(10,132,255,.28); }
.desktop-nav a { color: #aeb7c4; }
.desktop-nav a:hover { color: #fff; }
.language-switcher { border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.language-button { color: #798495; }
.language-button.is-active { background: #273244; color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.language-menu { border-color: var(--line-strong); background: rgba(18,27,39,.98); box-shadow: 0 22px 54px rgba(0,0,0,.34); }
.language-menu button { color: #8994a3; }
.language-menu button:hover, .language-menu button.is-active { background: #273244; color: #fff; }
.menu-button { border-color: var(--line-strong); background: #18212d; }
.menu-button span { background: #fff; }

.button { border-radius: 12px; }
.button--primary { background: linear-gradient(180deg, #168cff, #0878ef); box-shadow: 0 12px 34px rgba(10,132,255,.25), inset 0 1px rgba(255,255,255,.22); }
.button--primary:hover { background: linear-gradient(180deg, #2a98ff, #0b7be9); }
.button--outline { border-color: rgba(185,202,224,.3); background: rgba(255,255,255,.035); color: #f3f5f8; }
.button--outline:hover { border-color: rgba(10,132,255,.7); background: rgba(10,132,255,.09); }
.button--white { background: #f3f6fb; color: #096bd1; }

.hero { padding-top: clamp(76px, 8vw, 124px); }
.hero__grid { grid-template-columns: minmax(440px, .78fr) minmax(650px, 1.35fr); gap: clamp(48px, 5vw, 86px); }
.hero__content { padding-top: 0; }
.hero h1 { color: #f7f8fa; text-shadow: 0 3px 28px rgba(0,0,0,.28); }
.hero h1 span:last-child { color: #d7dde6; }
.hero__lead { color: #a8b2bf; }
.hero__trust { color: #8f99a8; }
.hero__trust li::before { color: var(--success); }

.product-window {
    top: 0;
    border-color: rgba(167,189,218,.24);
    border-radius: 25px;
    background: #101722;
    box-shadow: var(--shadow-window), 0 0 90px rgba(10,132,255,.10);
}
.product-window__bar { border-color: var(--line); background: #14191f; }
.product-window__bar > strong { color: #f4f6f8; }
.product-status { border-color: var(--line); background: #1c2531; color: #b9c2ce; }
.product-window__body { min-height: 575px; }
.workspace-nav { border-color: var(--line); background: linear-gradient(180deg, #151e2b, #111925); }
.workspace-nav__label { color: #768293; }
.workspace-button, .workspace-add { color: #aeb7c4; }
.workspace-button:hover { background: rgba(255,255,255,.045); }
.workspace-button.is-active { border-color: rgba(10,132,255,.75); background: rgba(10,132,255,.22); color: #f4f8ff; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.workspace-icon { border-color: var(--line-strong); background: #202a38; color: #b9c5d4; }
.workspace-button.is-active .workspace-icon { border-color: #0a84ff; background: #0a84ff; color: #fff; box-shadow: 0 7px 20px rgba(10,132,255,.28); }
.workspace-stage { background: #0d1420; }
.workspace-stage__header { border-color: var(--line); background: linear-gradient(120deg, #212936, #172436); }
.workspace-stage__header > div > span { color: #7f8b9a; }
.restore-button { border-radius: 11px; background: #0a84ff; box-shadow: 0 10px 26px rgba(10,132,255,.26); }
.desktop { background: #111925; }
.desktop__wallpaper { background: radial-gradient(circle at 75% 25%, #243954, #172332 48%, #0d1520) !important; }
.mini-window { border-color: rgba(179,199,224,.2); background: #1e2734; color: #d5dce5; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mini-window__bar { border-color: var(--line); color: #9ca7b5; }
.mini-window__bar span { color: #eef1f5; }
.mini-window--code { background: #111720; }
.mini-window--finder ul { color: #aab4c2; }
.mini-window--finder li { border-color: var(--line); }
.restore-toast, .save-confirmation { border-color: var(--line-strong); background: rgba(28,38,51,.96); color: #f5f7fa; box-shadow: 0 14px 36px rgba(0,0,0,.3); }
.restore-toast > span, .save-confirmation > span { background: var(--success); }
.restore-toast small, .save-confirmation small { color: #8e99a8; }

.apps-strip { border-color: var(--line); color: #778392; }
.apps-strip b { color: #8f9aa9; }
.statement { background: linear-gradient(180deg, rgba(18,27,39,.94), rgba(12,19,28,.94)); border-block: 1px solid var(--line); }
.statement h2 span:last-child { color: #748091; }

.features, .pricing, .faq { background: transparent; }
.section-intro p, .automation__intro > p, .faq__intro > p { color: #9da8b6; }
.workflow { border-color: var(--line); }
.workflow-connector::before { background: var(--line); }
.workflow-connector i { box-shadow: 0 0 0 8px #090f17; }
.feature-copy p { color: #929dab; }
.cluster-window, .laptop-screen { border-color: var(--line-strong); background: #1a2330; box-shadow: 0 18px 38px rgba(0,0,0,.25); }
.cluster-window::before { border-color: var(--line); background: #222c39; }
.cluster-window > span { background: #354354; }
.cluster-window--editor > span { background: #245a91; }
.tiny-layout span { border-color: var(--line-strong); background: #202a38; }
.privacy-feature, .modes-feature { border-color: var(--line); }
.privacy-panel, .mode-rail { border-color: var(--line-strong); background: rgba(22,31,43,.65); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.privacy-lock { border-color: var(--line); }
.mode-rail button { border-color: var(--line); background: transparent; color: #8994a3; }
.mode-rail button:hover, .mode-rail button.is-active { background: rgba(10,132,255,.13); color: #5eacff; }

.automation { background: linear-gradient(180deg, #111a27, #0c131d); border-block: 1px solid var(--line); }
.trigger-panel { border-color: var(--line); }
.trigger-panel button, .event-panel, .action-panel, .launch-panel, .previous-workspace { border-color: var(--line-strong) !important; background: #182230 !important; color: #dbe1e8; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.trigger-panel button:hover, .trigger-panel button.is-active { border-color: #0a84ff !important; background: rgba(10,132,255,.16) !important; color: #fff; }
.action-panel li, .previous-workspace small { color: #8e9aa9; }
.previous-workspace { padding: 24px 28px; }

.pricing-grid { border-color: var(--line); }
.plan { border-color: var(--line-strong) !important; background: linear-gradient(145deg, rgba(27,37,51,.92), rgba(17,24,35,.92)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.plan--featured { border-color: rgba(10,132,255,.55) !important; box-shadow: 0 26px 70px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05); }
.plan li, .pricing-note { color: #909baa; }
.pro-feature-groups strong { color: #f1f5fa; }
.pro-feature-groups span { color: #8f9aaa; }
.vpn-bonus { border-color: rgba(10,132,255,.42); background: linear-gradient(135deg, rgba(10,132,255,.16), rgba(48,209,88,.09)); box-shadow: inset 0 1px rgba(255,255,255,.045); }
.vpn-bonus__icon { background: linear-gradient(135deg, #0a84ff, #30d158); box-shadow: 0 14px 34px rgba(10,132,255,.24); }
.vpn-bonus p { color: #d7e2ef; }
.vpn-bonus--hero { border-color: rgba(10,132,255,.58); background: linear-gradient(105deg, rgba(19,70,126,.48), rgba(15,66,49,.34)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 22px 56px rgba(0,0,0,.18); }
.vpn-bonus--hero:hover { border-color: rgba(48,209,88,.5); background: linear-gradient(105deg, rgba(24,86,151,.54), rgba(17,86,61,.42)); }
.vpn-bonus--hero p { color: #c9d4e2; }
.accordion-item { border-color: var(--line-strong) !important; background: rgba(24,33,46,.72); }
.accordion-item button { color: #edf1f5; }
.accordion-item > button { padding: 24px 28px; }
.accordion-content p { color: #9da8b6; }
.accordion-item.is-open .accordion-content > p { padding: 2px 72px 30px 28px; }

.site-footer { border-color: var(--line); background: #080d14; }
.footer__brand p, .site-footer nav a { color: #7f8a99; }

.legal-page {
    background:
        radial-gradient(circle at 82% 2%, rgba(10,132,255,.18), transparent 30%),
        radial-gradient(circle at 8% 24%, rgba(48,209,88,.08), transparent 28%),
        #090f17;
}
.legal-page .site-header { background: rgba(10,15,22,.88); }
.legal-page .legal-back { color: #9ba6b5; }
.legal-page .legal-back:hover { color: #5eacff; }
.legal-content { max-width: 980px; }
.legal-kicker { color: #5eacff; letter-spacing: .06em; text-transform: uppercase; }
.legal-content h1 { color: #f5f7fa; text-shadow: 0 3px 28px rgba(0,0,0,.24); }
.legal-lead { color: #a8b2bf; }
.legal-content section {
    margin-top: 16px;
    padding: 30px 32px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(27,37,51,.9), rgba(17,24,35,.88));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.legal-content section:first-of-type { margin-top: 52px; border-top: 1px solid var(--line-strong); }
.legal-content h2 { color: #edf1f5; }
.legal-content section p { color: #9da8b6; }
.legal-content section a { color: #5eacff; }
.legal-updated { color: #7f8a99; }

@media (max-width: 1180px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__content { max-width: 820px; }
    .product-window { width: 100%; }
}

@media (max-width: 900px) {
    .mobile-nav { border-color: var(--line); background: rgba(12,18,27,.98); }
    .mobile-nav a { border-color: var(--line); color: #d6dde6; }
    .product-window__body { grid-template-columns: 150px 1fr; }
}

@media (max-width: 700px) {
    .hero { padding-top: 54px; }
    .hero h1 { font-size: clamp(46px, 14vw, 66px); }
    .hero__grid { gap: 50px; }
    .hero__actions .button { width: 100%; }
    .product-window { border-radius: 18px; }
    .product-window__body { display: block; min-height: 0; }
    .workspace-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
    .workspace-nav__label, .workspace-add { display: none; }
    .workspace-button { min-width: max-content; width: auto; }
    .workspace-stage__header { padding: 14px; }
    .desktop { min-height: 390px; }
    .apps-strip { grid-template-columns: 1fr; }
    .statement__inner { grid-template-columns: 36px 1fr; }
    .statement h2 { grid-column: 1 / -1; }
    .previous-workspace { padding: 22px 18px; }
    .accordion-item > button { padding: 21px 18px; }
    .accordion-item.is-open .accordion-content > p { padding: 0 44px 24px 18px; }
}