@charset "UTF-8";
/* FlexVPN landing — Premium Dark + Coral (PR-5, 2026-05-05).
   Stitch + taste-skill enforced: asymmetric layouts (variance 8), spring
   motion (intensity 6), generous spacing (density 4), coral accent thread
   from PR-4 preserved on rich charcoal that maps 1:1 to mobile dark theme. */

/* ===== Reset ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;       /* PR-165: no rubber-band bounce at top/bottom */
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100svh;          /* svh = small viewport, STABLE through
                                    address-bar collapse on mobile. dvh would
                                    reflow page on scroll, causing jitter. */
    font-feature-settings: "ss01" on, "cv11" on;
}

/* Grain noise overlay removed in PR-9 — user feedback that it reads as
   "texture coating" rather than premium polish. Plain ink-on-ink for
   cleaner reading. */

a { color: inherit; text-decoration: none; }

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}

img, svg { display: block; max-width: 100%; }

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ===== Nav — Apple Liquid Glass (PR-2-redo, 2026-05-16) =====
   Premium polished optical glass — not frosted fog. Recipe:
   - near-transparent base (alpha 0.025) — material hint, not tint
   - tiny blur 12px — optical glass not milk
   - directional edge-refraction stroke via gradient border-bottom
   - top specular highlight (inset 1px brighter)
   - soft outer drop shadow (floats over hero)
   Falls back to solid bg under prefers-reduced-transparency. */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.04) 100%) 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 32px -12px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-transparency: reduce) {
    .nav {
        background: var(--bg-elev-1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .nav {
        background: var(--bg-elev-1);
    }
}

.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

/* PR-10: wordmark-only logo. Drops the abstract ring-glyph from PR-9 (it
   competed with the hero connection-ring and read as generic "circle").
   Refined wordmark with a tiny accent-dot suffix for brand differentiation. */
/* PR-42 premium polish: wordmark up to 22px so brand outweighs nav links
   (was 19px, ratio 1.36 vs anchors → now 1.57). Dot bumped 5→6px and sat
   closer to baseline (-2px vs -3px) so it stops floating. */
.nav-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--text);
    letter-spacing: -0.025em;
    transition: opacity var(--t);
}

.nav-logo:hover { opacity: 0.85; }

/* Tiny pulsing accent-dot after the wordmark — small brand signature
   without competing with the hero ring. */
.nav-logo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    align-self: baseline;
    transform: translateY(-2px);
    animation: logo-pulse 3.5s ease-in-out infinite;
}

@keyframes logo-pulse {
    0%, 100% { opacity: 1; transform: translateY(-2px) scale(1); }
    50%      { opacity: 0.5; transform: translateY(-2px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-logo-dot { animation: none; }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;                                /* PR-42: was 32px, slightly tighter */
}

/* PR-42: actions zone (Войти + CTA) sits at the end of .nav-links with
   a wider gap before it so auth visually separates from anchor nav. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);                      /* 8px between Войти and CTA */
    margin-left: 12px;                        /* 28+12 = 40px gap from anchors */
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--t);
    padding: var(--space-2) 0;
    position: relative;
}

.nav-link:hover {
    color: var(--text);
}

/* PR-13: active nav state — section in viewport gets underline accent. */
.nav-link.is-current {
    color: var(--text);
    position: relative;
}

.nav-link.is-current::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--accent);
    border-radius: 1px;
}

/* PR-43: Войти returns to a small outline pill — text link (PR-42)
   looked orphaned next to the magenta CTA. New pill is intentionally
   smaller than the CTA on every axis (font 13.5 vs 14, padding 7/14 vs
   9/16, no glow), so the visual hierarchy reads:
       hero CTA (big magenta)  >  nav CTA (small magenta)
                              >  Войти (tiny outline)
                              >  anchor links (text only).
   Each rung visibly tinier than the previous. */
.nav-signin {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    transition: color var(--t), border-color var(--t), background var(--t);
}

.nav-signin:hover {
    color: var(--text);
    border-color: var(--border-bright);
    background: var(--bg-elev-1);
}

/* PR-43: nav-CTA tightened one notch since the hero now owns the big
   primary CTA (single dominant point of action, the nav CTA is its
   smaller echo for users above the fold who didn't scroll yet). */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 9px 16px;
    border-radius: var(--r-pill);
    transition: background var(--t), box-shadow var(--t), transform var(--spring);
    box-shadow: 0 3px 10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-cta:hover {
    background: var(--accent-deep);
    box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.nav-cta:active {
    transform: translateY(0);
}

.nav-burger {
    display: none;
    color: var(--text);
    width: 44px;          /* WCAG / HIG min touch target */
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    transition: background var(--t);
}

.nav-burger:hover { background: var(--bg-elev-1); }
.nav-burger[aria-expanded="true"] { background: var(--bg-elev-2); }

@media (max-width: 880px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        max-height: calc(100svh - 64px);          /* PR-42 mobile-fix: drawer can't extend past viewport on tall menus */
        overflow-y: auto;
        background: var(--bg-elev-1);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-4);
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .nav-links.open { display: flex; }
    .nav-links .nav-link,
    .nav-links .nav-signin {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--border);
    }
    /* PR-42: actions zone stacks vertically inside drawer */
    .nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        margin-left: 0;
        margin-top: var(--space-3);
        width: 100%;
    }
    .nav-actions .nav-signin {
        text-align: center;
        border-bottom: none;
    }
    .nav-actions .nav-cta {
        justify-content: center;
        padding: 12px 18px;                       /* taller tap target inside drawer */
    }
    .nav-burger { display: flex; }
}

/* ===== Hero — asymmetric split (NOT centered, per variance 8) ===== */
.hero {
    padding-top: calc(64px + var(--space-9));
    padding-bottom: var(--space-10);
    position: relative;
    overflow: hidden;
    min-height: calc(100svh - 100px);  /* svh — see body comment above */
}

/* Aurora gradient mesh — slow lava-lamp drift (taste-skill MOTION 6:
   perpetual micro-interactions). Pure transform, GPU-accelerated. */
.hero::before {
    content: '';
    position: absolute;
    top: -300px;
    right: -200px;
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, var(--aurora-1) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(20px);
    will-change: transform;
    animation: blob-drift-a 38s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--aurora-2) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(40px);
    will-change: transform;
    animation: blob-drift-b 46s ease-in-out infinite;
}

@keyframes blob-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-60px, 80px) scale(1.06); }
    66%      { transform: translate(40px, -40px) scale(0.94); }
}

@keyframes blob-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(80px, -60px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero::after { animation: none !important; }
}

/* Mobile perf: shrink + freeze hero blobs to save GPU on low-end devices */
@media (max-width: 720px) {
    .hero::before, .hero::after {
        animation: none;
        transform: scale(0.6);
        filter: blur(28px);
    }
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-9);
    align-items: center;
}

@media (max-width: 920px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }
}

.hero-content { min-width: 0; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--space-5);
    padding: 6px 14px 6px 10px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    box-shadow: var(--border-inner);
}

.hero-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: pulse 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hero-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--text);
    margin-bottom: var(--space-5);
    /* PR-17 redesign-skill: balance headline lines so the accent word
       never ends up alone on the last row. Browsers without support fall
       back to the manual <br> structure already in the markup. */
    text-wrap: balance;
}

/* Hero emphasis: flat magenta + italic — aligns with .section-h2 em pattern
   used everywhere else on the page (consistent emphasis system). Was a
   3-stop gradient text-clip, but on a short single-line phrase the gradient
   read as "muddy magenta" rather than premium polish. */
.hero-h1 .accent {
    color: var(--accent);
    font-family: 'Outfit', serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.04em;
    padding-right: 0.06em;
}

.hero-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 560px;
    margin-bottom: var(--space-7);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 28px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--r-pill);
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--spring);
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    background: var(--accent-deep);
    box-shadow: var(--shadow-magenta), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    background: var(--bg-elev-1);
    color: var(--text);
    border-color: var(--border-bright);
    box-shadow: var(--border-inner);
}

.btn-ghost:hover {
    background: var(--bg-elev-2);
    border-color: var(--text-dim);
}

.btn-arrow {
    width: 14px;
    height: 14px;
    transition: transform var(--t);
}

.btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* PR-43: hero-secondary — text-link CTA next to primary magenta button.
   Replaces the previous .btn-ghost (a pill that visually competed with
   the primary). One pill + one text-link reads as clean hierarchy. */
.hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0 4px;
    transition: color var(--t);
    height: 56px;                          /* match .btn height for baseline align */
}
.hero-secondary svg {
    width: 14px;
    height: 14px;
    transition: transform var(--t);
}
.hero-secondary:hover {
    color: var(--accent);
}
.hero-secondary:hover svg {
    transform: translateX(3px);
}

/* Trust row — three flat chips below the CTAs. Old design had a leading
   ✓ on each chip; PR-43 drops the marker so the line reads as one
   continuous mono caption ("7 дней бесплатно · оплата в Telegram · до 5
   устройств"), matching landing.css's quiet metadata style. */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    padding-right: var(--space-3);
}
.hero-trust-item:not(:last-child)::after {
    content: "·";
    margin-left: var(--space-3);
    color: var(--text-faint);
}

/* ===== Hero grid — site-grid (PR-43) =================================
   Replaces the previous browser-mockup with ring + metrics list. Eight
   well-known services in a 4×2 grid (2×4 on phones). Border colour
   encodes the route: green = Russian (direct), magenta = foreign (via
   European exit). Each tile is a small dark-glass surface with a
   colourful logo, a name in display font, and a magenta ✓ in the
   top-right corner. */
.hero-grid {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-self: stretch;
}

.hero-grid-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.hero-grid-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

.site-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 920px) {
    .site-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
    .site-grid { grid-template-columns: repeat(2, 1fr); }
}

.site-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 12px 14px;
    background: var(--bg-elev-1);                /* fallback */
    border: 1px solid var(--border-bright);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--spring), border-color var(--t), background var(--t);
    /* Cascade-fade-in on initial render */
    opacity: 0;
    transform: translateY(8px);
    animation: site-tile-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .site-tile {
        background: rgba(21, 18, 30, 0.55);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}
.site-tile:nth-child(1)  { animation-delay: 0.04s; }
.site-tile:nth-child(2)  { animation-delay: 0.08s; }
.site-tile:nth-child(3)  { animation-delay: 0.12s; }
.site-tile:nth-child(4)  { animation-delay: 0.16s; }
.site-tile:nth-child(5)  { animation-delay: 0.20s; }
.site-tile:nth-child(6)  { animation-delay: 0.24s; }
.site-tile:nth-child(7)  { animation-delay: 0.28s; }
.site-tile:nth-child(8)  { animation-delay: 0.32s; }
.site-tile:nth-child(9)  { animation-delay: 0.36s; }
.site-tile:nth-child(10) { animation-delay: 0.40s; }
.site-tile:nth-child(11) { animation-delay: 0.44s; }
.site-tile:nth-child(12) { animation-delay: 0.48s; }
.site-tile:nth-child(13) { animation-delay: 0.52s; }
.site-tile:nth-child(14) { animation-delay: 0.56s; }
.site-tile:nth-child(15) { animation-delay: 0.60s; }
.site-tile:nth-child(16) { animation-delay: 0.64s; }

@keyframes site-tile-enter {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .site-tile { animation: none; opacity: 1; transform: none; }
}

.site-tile:hover {
    transform: translateY(-2px);
}

/* Russian sites — green border accent (direct route) */
.site-tile--ru {
    border-color: rgba(52, 211, 153, 0.22);
}
.site-tile--ru:hover {
    border-color: rgba(52, 211, 153, 0.45);
}

/* Foreign sites — magenta border accent (through tunnel) */
.site-tile--global {
    border-color: rgba(233, 66, 153, 0.22);
}
.site-tile--global:hover {
    border-color: rgba(233, 66, 153, 0.45);
}

/* PR-46: rebuilt as a brand-coloured tile that hosts a CSS-masked glyph.
   The glyph's shape comes from .site-tile-logo's --icon-url SVG, its
   colour from --logo-color (defaults to white). This lets us use raw
   monochrome Simple Icons SVGs and recolour them per-brand without
   editing the source files. Light brands (T-Bank yellow) override
   --logo-color to dark for readable contrast. */
.site-tile-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--brand, var(--bg-elev-2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-tile-logo .glyph {
    display: block;
    width: 24px;
    height: 24px;
    background: var(--logo-color, #FFFFFF);
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* PR-48: raw multicolor SVG mode for tiles where the source icon brings
   its own brand colors (full-color brand-supplied SVGs). The glyph
   element is hidden; the .site-tile-logo itself renders the SVG as a
   background-image at full tile size. background-size:contain keeps
   correct aspect ratio so transparent margins show the optional
   --brand background colour. */
.site-tile--raw .site-tile-logo {
    background-color: var(--brand, transparent);
    background-image: var(--icon-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.site-tile--raw .site-tile-logo .glyph {
    display: none;
}

.site-tile-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.site-tile-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px var(--accent-glow);
}
.site-tile-check svg {
    width: 11px;
    height: 11px;
}

.site-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
}
.site-grid-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.site-grid-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}
.site-grid-legend-dot--ru     { background: rgba(52, 211, 153, 0.65); }
.site-grid-legend-dot--global { background: rgba(233, 66, 153, 0.65); }

/* ===== Generic section primitives ===== */
.section {
    padding: var(--section-pad) 0;
    position: relative;
}

.section-tint { background: var(--bg-tint); }

.section-head {
    margin-bottom: var(--space-8);
    max-width: 760px;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.section-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.section-h2 em {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}

.section-lead {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-muted);
    /* PR-17: pretty wrapping prevents single-word last lines (orphans)
       in body paragraphs — different algorithm than `balance` (which is
       for headlines). */
    text-wrap: pretty;
    max-width: 640px;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ===== Architecture — asymmetric zig-zag (NOT 3-equal-cards) ===== */
.arch {
    display: grid;
    gap: var(--space-7);
}

/* Asymmetric flow strip — NOT 3-equal-cards. Big "1" + smaller "2"+"3". */
.arch-flow {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-7);
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--border-inner);
    position: relative;
    overflow: hidden;
}

.arch-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

@media (max-width: 720px) {
    .arch-flow {
        grid-template-columns: 1fr;
        padding: var(--space-5);
    }
}

.arch-flow-step { padding: var(--space-3) 0; }

.arch-flow-step-num {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--accent);
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--space-3);
    box-shadow: 0 6px 16px var(--accent-glow);
}

.arch-flow-step:nth-child(2) .arch-flow-step-num,
.arch-flow-step:nth-child(3) .arch-flow-step-num {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border-strong);
    box-shadow: none;
}

.arch-flow-step-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.015em;
}

.arch-flow-step-text {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ===== Servers — Bento layout (NOT equal grid). Bridge gets primary slot. ===== */
.status-bento {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-4);
}

@media (max-width: 920px) {
    .status-bento {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .status-bento { grid-template-columns: 1fr; }
}

.status-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-shadow: var(--border-inner);
    transition: border-color var(--t), transform var(--spring), background var(--t);
}

.status-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    background: var(--bg-elev-2);
}

.status-card-bridge {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-elev-1) 100%);
    border-color: var(--border-strong);
    padding: var(--space-6);
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.status-card-bridge::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.6;
}

.status-card-bridge .status-card-body { width: 100%; }

@media (max-width: 920px) {
    .status-card-bridge {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: row;
        align-items: center;
    }
}

.status-card-cc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border-bright);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text);
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.status-card-bridge .status-card-cc {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
    margin-bottom: var(--space-4);
}

.status-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }

.status-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.status-card-bridge .status-card-title {
    font-size: 22px;
    margin-bottom: var(--space-2);
}

.status-card-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.status-card-bridge .status-card-meta {
    font-size: 14px;
    margin-bottom: var(--space-4);
}

.status-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.status-card-bridge .status-card-side {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-4);
}

.status-card-latency {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.status-card-bridge .status-card-latency { font-size: 16px; }

.status-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ok);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.status-card-status-down { color: var(--err); }
.status-card-status-down .status-card-dot {
    background: var(--err);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

.status-foot {
    margin-top: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-dim);
    font-size: 13px;
}

.status-foot-link {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 1px;
    transition: color var(--t);
}

.status-foot-link:hover { color: var(--accent-deep); }

/* ===== Logs (transparency) — Editorial 2-col header (PR-landing-editorial, 2026-05-25)
   Replaces the standard `.section-head` (eyebrow → h2 → lead vertical stack)
   in THIS section ONLY. Other sections keep `.section-head`. The 6-section
   identical-header parade was reading as AI-template rhythm; this is the
   designated break-the-rhythm moment.

   Recipe:
   - 1.25fr/1fr asymmetric grid (h2 dominant, lead as sidebar)
   - h2 explodes to clamp(44, 96) — biggest type on the page after hero H1
   - lead baseline-aligned with h2's last line (align-items: end)
   - rule line under the whole header anchors the editorial gesture
   Mobile: collapses to 1-col, gap tightens, rule line stays.
   Glass + magenta untouched. */
.transparency-head {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-7);
    align-items: end;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) {
    .transparency-head {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        align-items: start;
        padding-bottom: var(--space-5);
        margin-bottom: var(--space-6);
    }
}
.transparency-h2 {
    font-family: var(--font-display);
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--text);
    text-wrap: balance;
    margin: 0;
}
.transparency-h2 em {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
    /* Outfit italic + serif fallback — same trick as `.hero-h1 .accent`.
       Letterforms of Outfit italic register as "different voice" even
       without a true serif loaded; the fallback gives a chance at a real
       serif on systems that have one. */
    font-family: 'Outfit', serif;
    letter-spacing: -0.05em;
    padding-right: 0.04em;
}
.transparency-lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    text-wrap: pretty;
    margin: 0;
    /* baseline-align with the bottom of the h2's last line */
    padding-bottom: 8px;
}
@media (max-width: 720px) {
    .transparency-lead {
        padding-bottom: 0;
    }
}

/* ===== Logs (transparency) — Asymmetric 5/4 split ===== */
.kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

@media (max-width: 720px) {
    .kv-grid { grid-template-columns: 1fr; }
}

.kv-col {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--space-7);
    box-shadow: var(--shadow-sm), var(--border-inner);
    transition: border-color var(--t);
}

.kv-col:hover { border-color: var(--border-bright); }

.kv-col-no .kv-col-title { color: var(--ok); }
.kv-col-yes .kv-col-title { color: var(--accent); }

.kv-col-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.kv-col-title-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kv-col-no .kv-col-title-icon {
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.24);
}

.kv-col-yes .kv-col-title-icon {
    background: var(--accent-soft);
    border: 1px solid var(--border-strong);
}

.kv-col-title-icon svg { width: 14px; height: 14px; }

.kv-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.kv-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: var(--space-3);
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.5;
}

.kv-mark {
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.kv-col-no .kv-mark {
    background: rgba(52, 211, 153, 0.10);
    color: var(--ok);
    border: 1px solid rgba(52, 211, 153, 0.22);
}

.kv-col-yes .kv-mark {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--border-strong);
}

.kv-mark svg { width: 12px; height: 12px; }

/* ===== Pricing — popular tier visually larger (asymmetric) ===== */
.pricing {
    display: flex;
    justify-content: center;
}

/* Apple Liquid Glass — single premium-glass moment in content area.
   Clean material edge (PR-fix 2026-05-16): no perimeter border-image
   (caused visible "boxed-card" outline on prod). Edges defined by:
   - top specular inset highlight (the "light hitting glass top" cue)
   - subtle bottom inset hint (refraction depth)
   - light outer float shadow (floats not boxed)
   On hover: top specular shifts to magenta brand tint + magenta-tinted
   outer glow for premium feedback. */
.pricing-card {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: none;
    border-radius: var(--r-2xl);
    overflow: hidden;
    width: 100%;
    max-width: 1140px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        0 12px 32px -8px rgba(0, 0, 0, 0.32),
        0 2px 8px -1px rgba(0, 0, 0, 0.20);
    position: relative;
    transition: box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(233, 66, 153, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        0 12px 36px -8px rgba(233, 66, 153, 0.18),
        0 2px 8px -1px rgba(0, 0, 0, 0.20);
}

@media (prefers-reduced-transparency: reduce) {
    .pricing-card {
        background: var(--bg-elev-1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--border);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .pricing-card {
        background: var(--bg-elev-1);
    }
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

.pricing-card-head {
    padding: var(--space-7);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(28, 32, 48, 0.4) 0%, transparent 100%);
}

.pricing-card-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
}

.pricing-card-included {
    font-size: 15px;
    color: var(--text-muted);
}

.pricing-card-trial {
    padding: 10px 16px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    font-size: 13.5px;
    font-weight: 600;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr 1fr;
}

@media (max-width: 920px) {
    .pricing-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
}

.pricing-period {
    padding: var(--space-7) var(--space-5);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    transition: background var(--t);
}

.pricing-period:last-child { border-right: 0; }

@media (max-width: 920px) {
    .pricing-period:nth-child(2n) { border-right: 0; }
    .pricing-period:nth-child(3) { border-right: 1px solid var(--border); }
}

@media (max-width: 480px) {
    .pricing-period { border-right: 0; }
}

.pricing-period-popular {
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
}

.pricing-popular-tag {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 5px 10px;
    border-radius: var(--r-sm);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.pricing-period-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.pricing-period-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text);
}

.pricing-period-price-num {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
}

.pricing-period-popular .pricing-period-price-num { color: var(--accent); }

.pricing-period-price-unit {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-period-stars {
    font-size: 13px;
    color: var(--text-muted);
}

.pricing-period-discount {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ok);
    font-weight: 600;
    margin-top: auto;
    padding-top: var(--space-2);
    min-height: 18px;
    letter-spacing: 0.04em;
}

.pricing-period-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg-elev-2);
    border: 1px solid var(--border-bright);
    border-radius: var(--r-pill);
    transition: all var(--t);
}

.pricing-period-cta:hover {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: 0 6px 16px var(--accent-glow);
}

.pricing-period-popular .pricing-period-cta {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    box-shadow: 0 8px 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pricing-period-popular .pricing-period-cta:hover {
    background: var(--accent-deep);
    transform: translateY(-1px);
}

.pricing-card-foot {
    padding: var(--space-4) var(--space-7);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.pricing-card-foot-pay {
    color: var(--text);
    font-weight: 600;
}

/* ===== FAQ ===== */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 920px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t);
    box-shadow: var(--border-inner);
}

.faq-item[open] {
    border-color: var(--border-strong);
    box-shadow: var(--depth-2);
}

.faq-q {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: 16.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q-chevron {
    width: 22px;
    height: 22px;
    color: var(--accent);
    transition: transform var(--t);
    flex-shrink: 0;
}

.faq-item[open] .faq-q-chevron {
    transform: rotate(180deg);
}

.faq-a {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.7;
    text-wrap: pretty;
}

.faq-a a {
    color: var(--accent);
    font-weight: 500;
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 1px;
    transition: color var(--t);
}

.faq-a a:hover { color: var(--accent-deep); }

.faq-a .mono {
    font-size: 13px;
    background: var(--bg);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ===== Manifesto «О нас» — personal voice section (PR-11) ===== */
.manifesto-wrap {
    padding: var(--space-9) 0;
}

.manifesto {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

/* PR-landing-editorial 2026-05-25: editorial drop-cap on manifesto opener.
   Drops the templated `.eyebrow` ("О нас") above the body — the eyebrow
   was reading as a marketing tag that competed with the personal voice
   ("мы запустили FlexVPN потому что нам самим надоело"). The drop-cap on
   the first letter takes over the visual entry job and signals "this is
   hand-written editorial", not "this is an About Us block".

   float: left lets body text wrap around the cap. Magenta italic echoes
   the hero accent (.hero-h1 .accent) and the transparency-h2 em — same
   serif-fallback trick. */
.manifesto-drop {
    float: left;
    font-family: 'Outfit', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(72px, 11vw, 132px);
    line-height: 0.82;
    color: var(--accent);
    padding-right: 12px;
    padding-top: 6px;
    letter-spacing: -0.06em;
    /* Anti-aliasing tuned for large display weight on dark bg */
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 720px) {
    .manifesto-drop {
        font-size: clamp(64px, 18vw, 96px);
        padding-right: 10px;
        padding-top: 4px;
    }
}

.manifesto-body {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--text);
    text-wrap: pretty;
}

.manifesto-body p {
    margin-bottom: 1em;
}

.manifesto-body p:last-child {
    margin-bottom: 0;
}

/* Em uses the brand-thread accent in italic — same single-color treatment
   as hero h1 emphasis (NOT a multi-stop gradient per LILA-ban). */
.manifesto-body em {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

.manifesto-body strong {
    font-weight: 500;
    color: var(--text);
}

.manifesto-body a {
    color: var(--accent);
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 1px;
    transition: color var(--t);
}

.manifesto-body a:hover {
    color: var(--accent-deep);
}

.manifesto-sig {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.manifesto-sig-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 0 16px var(--accent-soft);
}

.manifesto-sig-meta {
    line-height: 1.4;
    font-size: 14px;
}

.manifesto-sig-name {
    color: var(--text);
    font-weight: 600;
}

.manifesto-sig-sub {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* ===== Final CTA — closing argument (PR-11) ===== */
.final-cta {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: var(--space-10) 0;
    border-top: 1px solid var(--border);
}

.final-cta-mesh {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 140%;
    background:
        radial-gradient(ellipse at 30% 30%, var(--aurora-1) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, var(--aurora-2) 0%, transparent 55%);
    filter: blur(60px) saturate(140%);
    opacity: 0.5;
    pointer-events: none;
    will-change: transform;
    animation: blob-drift-a 38s ease-in-out infinite;
}

@media (max-width: 720px) {
    .final-cta-mesh { animation: none; opacity: 0.4; filter: blur(48px); }
}

/* Apple Liquid Glass — closing kulminacja.
   Sits over .final-cta-mesh magenta aurora — material refracts the brand glow.
   Clean material edge (PR-fix 2026-05-16): no perimeter border-image
   (caused visible "boxed-card" outline on prod). Top specular tinted
   magenta — gets brand refraction WITHOUT a perimeter stroke. */
.final-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: none;
    border-radius: var(--r-xl);
    padding: var(--space-7) var(--space-6);
    box-shadow:
        inset 0 1px 0 rgba(233, 66, 153, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02),
        0 16px 40px -10px rgba(0, 0, 0, 0.38),
        0 2px 10px -1px rgba(0, 0, 0, 0.22);
    margin: 0 auto;
}

@media (prefers-reduced-transparency: reduce) {
    .final-cta-inner {
        background: var(--bg-elev-1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--border-strong);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .final-cta-inner {
        background: var(--bg-elev-1);
    }
}

.final-cta-h2 {
    font-family: var(--font-display);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.final-cta-h2 em {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}

.final-cta-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: var(--space-7);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
}

.final-cta-actions {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.final-cta-btn {
    height: 60px;
    padding: 0 32px;
    font-size: 16px;
}

.final-cta-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ===== Footer ===== */
.footer {
    padding: var(--space-8) 0 var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--bg-elev-1);
    color: var(--text-muted);
    font-size: 14px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1fr;
    gap: var(--space-7);
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
    .footer-brand-col { grid-column: 1 / -1; }
}

.footer-brand {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: var(--space-3);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 17px;
    letter-spacing: -0.02em;
}

/* PR-10: footer wordmark with same accent-dot as nav. */
.footer-brand-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    align-self: baseline;
    transform: translateY(-3px);
    animation: logo-pulse 3.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .footer-brand-dot { animation: none; }
}

.footer-tagline {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.6;
    max-width: 360px;
}

.footer-col-title {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-3);
}

.footer-link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-link {
    color: var(--text-muted);
    transition: color var(--t);
}

.footer-link:hover {
    color: var(--accent);
}

.footer-bottom {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--text-dim);
    font-size: 13px;
}

.footer-bottom-canary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.footer-bottom-canary-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    animation: pulse 2.4s infinite;
}

/* ===== Spotlight border (Section 8 Creative Arsenal — Spotlight Border Card).
   Mouse-tracking radial gradient under cursor on the card. JS sets --mx/--my
   from mousemove. Pure CSS render — no continuous JS work. */
.spot {
    position: relative;
    isolation: isolate;
}

.spot::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        var(--accent-soft),
        transparent 55%
    );
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.spot:hover::after { opacity: 1; }

/* Make sure card content stays above the spotlight overlay */
.spot > * { position: relative; z-index: 2; }

/* ===== Staggered fade-rise (taste-skill: "Do not mount lists or grids
   instantly. Use cascade delays for waterfall reveals."). Pure CSS — no JS,
   uses --index custom prop set from Jinja loop. */
@keyframes fade-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-rise {
    animation: fade-rise 540ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--index, 0) * 50ms);
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .fade-rise { animation: none; }
}

/* ===== Skip-to-main link (WCAG / a11y) ===== */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 20px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 14px;
    z-index: 1000;
    transform: translateY(-150%);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--text);
    outline-offset: 2px;
}

/* ===== Magnetic CTA (rAF-driven from JS — sets --mx/--my/--strength) ===== */
.btn[data-magnet],
.nav-cta[data-magnet],
.sticky-cta-btn[data-magnet] {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                background var(--t), color var(--t), box-shadow var(--t);
}

/* When the user is actively hovering, JS removes the transition so the pull
   feels instant; restored on leave for a smooth snap-back. */
[data-magnet].is-magnet-active {
    transition: background var(--t), color var(--t), box-shadow var(--t);
}

/* PR-12 jitter-fix: prevent hover-lift transforms from overriding the
   magnetic transform on hover. Without this, .btn-primary:hover wins by
   specificity and applies translateY(-1px), which fights the magnetic
   translate(--mx, --my). Result: button "jumps" between hover-lift and
   magnetic position. Now hover keeps the magnetic transform — the lift
   feel comes from the magnetic pull itself. */
.btn[data-magnet]:hover,
.btn[data-magnet]:active,
.nav-cta[data-magnet]:hover,
.nav-cta[data-magnet]:active,
.sticky-cta-btn[data-magnet]:hover,
.sticky-cta-btn[data-magnet]:active {
    transform: translate(var(--mx, 0px), var(--my, 0px));
}

/* ===== Scroll-stack story (sticky pin + 3 frames + 3 triggers) ===== */
.scroll-stack {
    padding: var(--section-pad) 0;
    position: relative;
}

.scroll-stack-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: start;
    margin-top: var(--space-7);
}

.scroll-stack-pin-wrap {
    /* Acts as the sticky boundary — height matches the right-column scroll
       length so the pin sticks throughout the trigger sequence. */
    position: relative;
    height: 100%;
}

.scroll-stack-pin {
    position: sticky;
    top: calc(64px + var(--space-5));
    height: calc(100svh - 64px - var(--space-7));  /* svh prevents pin-height
                                                      jitter when mobile address
                                                      bar collapses mid-scroll. */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    padding: var(--space-6);
    overflow: hidden;
    box-shadow: var(--depth-3);
}

.scroll-stack-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, var(--accent-tint) 0%, transparent 60%);
    pointer-events: none;
}

.scroll-stack-frame {
    position: absolute;
    inset: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.scroll-stack-frame.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ss-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}

/* SVG primitive styles — single source of truth */
.ss-phone {
    fill: var(--bg-elev-2);
    stroke: var(--border-bright);
    stroke-width: 1.5;
}
.ss-server-dim {
    fill: var(--bg-elev-1);
    stroke: var(--border);
    stroke-width: 1.5;
    opacity: 0.55;
}
.ss-label {
    fill: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}
.ss-label-dim {
    fill: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 10.5px;
}
.ss-row {
    fill: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}
.ss-tag-block {
    fill: var(--err);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.ss-tag-ok {
    fill: var(--ok);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.ss-tag-direct {
    fill: var(--ok);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.ss-tag-vpn {
    fill: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.ss-path-blocked {
    stroke: var(--err);
    stroke-width: 2;
    fill: none;
    opacity: 0.6;
}
.ss-path-active {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}
.ss-path-direct {
    stroke: var(--ok);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}
.ss-flow-dot {
    fill: var(--accent);
    animation: ss-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes ss-dot-pulse {
    0%, 100% { transform: translateX(-30px); opacity: 0; }
    20%      { opacity: 1; }
    80%      { opacity: 1; }
    100%     { transform: translateX(30px); opacity: 0; }
}
.ss-block circle {
    fill: rgba(248, 113, 113, 0.14);
    stroke: var(--err);
    stroke-width: 2;
}
.ss-block path {
    stroke: var(--err);
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
}

/* PR-10: redesigned SVG primitives — phone screens, tag-pills, chips, server globes */
.ss-phone-screen {
    fill: var(--bg-elev-1);
    stroke: var(--border);
    stroke-width: 1;
}
.ss-phone-notch {
    fill: var(--bg);
}
.ss-screen-line {
    fill: var(--text-dim);
}
.ss-screen-line-accent {
    fill: var(--accent);
}
.ss-screen-spinner {
    stroke: var(--accent);
    fill: none;
    transform-origin: center;
    transform-box: fill-box;
    animation: ss-spinner 2.4s linear infinite;
}
@keyframes ss-spinner {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-screen-spinner { animation: none; }
}

.ss-block-halo {
    fill: rgba(248, 113, 113, 0.16);
    filter: blur(4px);
}
.ss-block-ring {
    fill: rgba(248, 113, 113, 0.10);
    stroke: var(--err);
    stroke-width: 2;
}
.ss-block-x {
    stroke: var(--err);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
}

.ss-flow-blocked {
    fill: var(--err);
    animation: ss-dot-blocked 2.2s ease-in-out infinite;
}
@keyframes ss-dot-blocked {
    0%   { transform: translateX(-30px); opacity: 0; }
    25%  { transform: translateX(0); opacity: 1; }
    55%  { transform: translateX(70px); opacity: 1; }
    65%  { transform: translateX(85px); opacity: 0; }
    100% { transform: translateX(-30px); opacity: 0; }
}

/* Tag-pills (rectangle + text) — used for DPI / OK / DIRECT / VPN labels */
.ss-tag-pill {
    fill: rgba(255, 255, 255, 0.04);
    stroke: var(--border);
    stroke-width: 1;
}
.ss-tag-pill-block {
    fill: rgba(248, 113, 113, 0.14);
    stroke: rgba(248, 113, 113, 0.32);
}
.ss-tag-pill-ok {
    fill: rgba(52, 211, 153, 0.10);
    stroke: rgba(52, 211, 153, 0.28);
}
.ss-tag-pill-direct {
    fill: rgba(52, 211, 153, 0.12);
    stroke: rgba(52, 211, 153, 0.32);
}
.ss-tag-pill-vpn {
    fill: var(--accent-soft);
    stroke: var(--border-strong);
}

/* PR-44 Phase 2: magenta circle node (replaces .ss-bridge-pill in
   Frame 1 + Frame 2). Layered halo + ring + core + accent dot —
   same FlexVPN brand mark as the nav wordmark, now scaled up to
   serve as the storytelling node in the scroll-stack. No text. */
.ss-flex-halo {
    fill: var(--accent-glow);
    filter: blur(10px);
    opacity: 0.5;
}
.ss-flex-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    opacity: 0.55;
}
.ss-flex-core {
    fill: var(--bg-elev-2);
    stroke: var(--accent);
    stroke-width: 1.5;
}
.ss-flex-dot {
    fill: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* PR-44 Phase 2: Frame 0 service tiles + bottom blocked flow dot */
.ss-frame0-tile {
    stroke: var(--border-bright);
    stroke-width: 1;
}
.ss-flow-blocked-bottom {
    fill: var(--err);
    animation: ss-dot-blocked-bottom 2.2s ease-in-out infinite;
}
@keyframes ss-dot-blocked-bottom {
    0%   { transform: translate(-30px, -30px); opacity: 0; }
    25%  { transform: translate(0, 0); opacity: 1; }
    55%  { transform: translate(70px, 28px); opacity: 1; }
    65%  { transform: translate(85px, 32px); opacity: 0; }
    100% { transform: translate(-30px, -30px); opacity: 0; }
}

/* Globe (Frame 1, active right) */
.ss-globe-bg {
    fill: var(--bg-elev-1);
}
.ss-globe-stroke {
    stroke: var(--accent);
    fill: none;
}
.ss-globe-line {
    stroke: var(--accent);
    fill: none;
    opacity: 0.6;
}

/* Server globe (Frame 0, dim foreign-server) */
.ss-server-globe {
    stroke: var(--text-dim);
    opacity: 0.55;
}

/* Chips for app names (Frame 2) */
.ss-chip {
    fill: var(--bg-elev-2);
    stroke: var(--border);
    stroke-width: 1;
}
.ss-chip-vpn {
    fill: var(--accent-tint);
    stroke: var(--border-strong);
}
.ss-chip-text {
    fill: var(--text);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* PR-14: cluster captions for Frame 2 (replaces overlapping tag-pills) */
.ss-cluster-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ss-cluster-label-direct { fill: var(--ok); }
.ss-cluster-label-vpn    { fill: var(--accent); }

/* Second flow dot (different phase) */
.ss-flow-dot-2 {
    fill: var(--accent);
    animation: ss-dot-pulse 1.6s ease-in-out infinite;
    animation-delay: 0.7s;
}

/* Direct branch (green) flow dot */
.ss-flow-dot-direct {
    fill: var(--ok);
    animation: ss-dot-pulse-direct 1.8s ease-in-out infinite;
}
@keyframes ss-dot-pulse-direct {
    0%, 100% { opacity: 0; transform: translate(-30px, 0); }
    20%      { opacity: 1; }
    80%      { opacity: 1; }
    100%     { opacity: 0; transform: translate(40px, -16px); }
}

/* Bottom branch (VPN) flow dot — different phase */
.ss-flow-dot-bottom {
    animation-delay: 0.4s;
}
/* Legacy .ss-bridge* classes removed in PR-44 Phase 2 — replaced by
   .ss-flex-* (magenta circle node, no text labels). */
.ss-globe {
    fill: var(--bg-elev-2);
    stroke: var(--border-bright);
    stroke-width: 1.5;
}
.ss-globe-grid {
    stroke: var(--text-dim);
    stroke-width: 1;
    fill: none;
}

/* Triggers (right column) */
.scroll-stack-track {
    display: flex;
    flex-direction: column;
}

.scroll-stack-trigger {
    min-height: 70vh;
    padding: var(--space-7) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0.4;
    transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-stack-trigger.is-active { opacity: 1; }

.scroll-stack-step {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.scroll-stack-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.scroll-stack-title em {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}

.scroll-stack-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 540px;
    text-wrap: pretty;
}

.scroll-stack-text .mono {
    background: var(--bg-elev-2);
    padding: 2px 7px;
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 13px;
    border: 1px solid var(--border);
}

/* Mobile: collapse sticky → linear sequence */
@media (max-width: 920px) {
    .scroll-stack-rail {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .scroll-stack-pin-wrap {
        order: 0;
        height: auto;
    }
    .scroll-stack-pin {
        position: relative;
        top: auto;
        height: auto;
        min-height: 280px;
    }
    .scroll-stack-frame {
        position: relative;
        inset: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        display: none;
    }
    .scroll-stack-frame.mobile-show { display: flex; }
    .scroll-stack-trigger {
        min-height: auto;
        opacity: 1;
        padding: var(--space-5) 0;
    }
}

/* ===== Sticky bottom CTA — slides up after hero scroll-past ===== */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--bg-glass);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid var(--border-bright);
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.32);
}

.sticky-cta[data-visible="true"] {
    transform: translateY(0);
}

/* PR-9: hide on desktop. The full nav (with «Начать бесплатно» CTA visible)
   makes the sticky bar redundant on big screens — was reading as duplicate
   header/footer when both visible. Mobile (<=920px) keeps it: nav-links
   collapse under burger so the sticky CTA is the only ever-visible button. */
@media (min-width: 921px) {
    .sticky-cta {
        display: none !important;
    }
}

.sticky-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.sticky-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sticky-cta-brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    font-size: 16px;
    letter-spacing: -0.01em;
}

.sticky-cta-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-ink);
    background: var(--accent);
    border-radius: var(--r-pill);
    box-shadow: 0 8px 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: background var(--t), box-shadow var(--t), transform var(--spring);
}

.sticky-cta-btn:hover {
    background: var(--accent-deep);
    box-shadow: var(--shadow-magenta), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (max-width: 480px) {
    .sticky-cta-sub { display: none; }
    .sticky-cta-btn { padding: 10px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}

/* ===== Back-to-top floating button (PR-13) — desktop only ===== */
.to-top {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 80;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-bright);
    border-radius: var(--r-pill);
    color: var(--accent);
    box-shadow: var(--depth-2);
    cursor: pointer;
    transform: translateY(80px);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
                background var(--t), border-color var(--t);
    touch-action: manipulation;
}

.to-top svg {
    width: 18px;
    height: 18px;
}

.to-top[data-visible="true"] {
    transform: translateY(0);
    opacity: 1;
}

.to-top:hover {
    background: var(--bg-elev-2);
    border-color: var(--accent);
}

@media (min-width: 921px) {
    .to-top { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity 120ms linear; transform: none !important; }
}

/* ===== PR-13 Performance + touch fixes ===== */

/* touch-action: manipulation — кill 300ms tap delay on iOS Safari */
.btn,
.nav-cta,
.nav-link,
.nav-signin,
.faq-q,
.pricing-period-cta,
.sticky-cta-btn,
.status-foot-link {
    touch-action: manipulation;
}

/* content-visibility: auto on below-fold sections — browser skips paint
   while offscreen, faster initial render. contain-intrinsic-size reserves
   approximate height to prevent scrollbar/anchor jumps. Hero and #how
   stay opaque (above-fold + sticky observer needs layout computed). */
#servers,
#logs,
#pricing,
#faq,
#about,
.final-cta {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}