/* ===== CABINET VISUAL SYSTEM OVERRIDES ===== */

.landing-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Arial Black', 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(200px, 30vw, 500px);
    color: rgba(255, 255, 255, 0.02);
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
    filter: blur(8px);
}

:root {
    --bg: #0A0A0A;
    --accent: #9B6DFF;
    --accent-hover: #EEAAFF;
    --accent-cyan: #00D4E0;
    --text-primary: #E8E8E8;
    --text-secondary: #A0A0A0;
    --text-muted: #707070;
    --text-disabled: #383838;
    --border-subtle: rgba(255, 255, 255, 0.022);
    --border-default: rgba(255, 255, 255, 0.045);
    --border-strong: rgba(255, 255, 255, 0.09);
    --card-bg: rgba(255, 255, 255, 0.012);
    --card-border: rgba(255, 255, 255, 0.022);
    --card-blur: 14px;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-padding-top: 86px;
    height: 100%;
    overflow: hidden;
}

#page-scroll {
    position: fixed;
    inset: 10px;
    border-radius: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    scroll-padding-top: 86px;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
}

body::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at top right, rgba(155, 109, 255, 0.13), transparent 48%),
        radial-gradient(ellipse at 44% 16%, rgba(0, 212, 224, 0.035), transparent 42%);
}

body::after {
    inset: 10px;
    z-index: 49;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
    /* backdrop-filter UDALEN — был fullscreen blur (inset:10px = весь viewport)
       который пере-блюрился на каждый scroll frame. Visual эффект — тонкая
       glass-frame border 10px от края, blur background был visually почти не
       заметен под opacity:0.018 background. Border + box-shadow остаются. */
}

::selection {
    background: rgba(155, 109, 255, 0.30);
    color: #fff;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(155, 109, 255, 0.30);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 109, 255, 0.55);
}

.noise-overlay {
    opacity: 0.012;
}

.glow-blob {
    inset: auto;
    border-radius: 0;
    filter: blur(30px);
    opacity: 0.58;
    transform: none;
}

.glow-blob-1 {
    top: -12px;
    left: 0;
    right: auto;
    width: min(760px, 86vw);
    height: min(620px, 70vh);
    background:
        radial-gradient(ellipse at 20% 8%, rgba(155, 109, 255, 0.09), transparent 42%),
        radial-gradient(ellipse at 82% 26%, rgba(0, 212, 224, 0.045), transparent 38%);
    animation: none;
}

.glow-blob-2 {
    right: 0;
    bottom: 12%;
    width: min(680px, 80vw);
    height: min(520px, 58vh);
    background:
        radial-gradient(ellipse at 70% 20%, rgba(238, 170, 255, 0.045), transparent 42%),
        radial-gradient(ellipse at 32% 76%, rgba(155, 109, 255, 0.07), transparent 44%);
    animation: none;
}

.watermark {
    color: rgba(255, 255, 255, 0.02);
    opacity: 0.9;
    animation: tide-watermark-drift 14s ease-in-out infinite;
}

@keyframes tide-watermark-drift {

    0%,
    100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translate3d(calc(-50% - 10px), calc(-50% + 6px), 0) scale(1.01);
        opacity: 1;
    }
}

.navbar {
    top: 10px;
    left: 10px;
    right: 10px;
    border-bottom: 0;
    background: transparent;
}

.navbar.scrolled {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-inner {
    height: 54px;
    padding: 0 14px 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar.scrolled .nav-inner {
    background: rgba(255, 255, 255, 0.026);
}

.nav-links {
    gap: 24px;
}

.nav-link {
    color: var(--text-muted);
    font-weight: 600;
    transition: color 180ms ease;
}

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

.lang-switch,
.mobile-menu-inner .lang-row {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
}

.lang-btn {
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    transition:
        transform 0.22s var(--spring),
        background-color 180ms ease,
        color 180ms ease;
}

.lang-btn.active {
    color: #D4C5FF;
    background: rgba(155, 109, 255, 0.22);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.lang-btn:active {
    transform: scale(0.88);
}

.btn-primary,
.btn-ghost {
    border-radius: 10px;
    font-weight: 700;
    transition:
        transform 0.22s var(--spring),
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms ease,
        color 180ms ease;
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-link:focus-visible,
.footer-link:focus-visible,
.faq-toggle:focus-visible,
.lang-btn:focus-visible {
    outline: 2px solid rgba(155, 109, 255, 0.55);
    outline-offset: 3px;
}

.btn-primary {
    background: var(--accent);
    box-shadow: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(155, 109, 255, 0.35);
}

.btn-primary:active,
.btn-ghost:active {
    transform: scale(0.94);
}

.btn-ghost {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-primary);
}

.btn-ghost:hover {
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
}

.hero {
    width: min(1120px, calc(100% - 40px));
    min-height: 86svh;
    margin: 0 auto;
    padding: 132px 18px 84px;
    text-align: left;
}

.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.78fr);
    align-items: center;
    gap: clamp(34px, 6vw, 74px);
    width: 96%;
    max-width: none;
    position: relative;
    z-index: 1;
}

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

.hero-kicker {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.032);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-kicker span:first-child {
    color: var(--accent);
}

.hero-kicker span+span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-kicker span+span::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 10px;
    vertical-align: -1px;
    background: rgba(255, 255, 255, 0.12);
}

.hero h1,
.section-title {
    letter-spacing: 0;
}

.hero h1 {
    max-width: 620px;
    font-size: 58px;
    line-height: 1.07;
    margin-bottom: 18px;
}

.hero p,
.section-sub,
.feature-card p,
.step p,
.pricing-card .plan-features li,
.faq-answer-inner p,
.footer-desc,
.footer-link {
    color: var(--text-muted);
}

.hero p {
    font-size: 16px;
    color: var(--text-secondary);
}

.hero-copy>p {
    max-width: 590px;
    margin: 0;
}

.hero-ctas {
    justify-content: flex-start;
    margin-top: 30px;
    margin-bottom: 0;
}

.hero-note {
    margin-top: 14px !important;
    color: var(--text-muted);
}

.accent-text {
    color: var(--accent);
}

.section {
    z-index: 1;
}

.section-title {
    font-size: 36px;
    line-height: 1.12;
}

.section-sub {
    font-size: 15px;
}

.divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
}

.spirit-img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(0 0 24px rgba(155, 109, 255, 0.6));
    animation: tide-float 4.8s ease-in-out infinite;
}

.hero-copy .spirit-img {
    width: 116px;
    margin: 0 0 22px;
}


.cabinet-preview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        0 34px 96px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.cabinet-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 76% 0%, rgba(155, 109, 255, 0.12), transparent 44%),
        radial-gradient(ellipse at 16% 24%, rgba(0, 212, 224, 0.045), transparent 36%);
    pointer-events: none;
}

.preview-watermark {
    position: absolute;
    right: -22px;
    bottom: 10px;
    z-index: 0;
    color: rgba(255, 255, 255, 0.022);
    font-size: 116px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    user-select: none;
}

.preview-sidebar,
.preview-main {
    position: relative;
    z-index: 1;
}

.preview-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 12px;
    background: rgba(0, 0, 0, 0.10);
}

.preview-logo {
    width: 34px;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at 72% 45%, transparent 0 37%, rgba(155, 109, 255, 0.94) 39% 48%, transparent 50%),
        linear-gradient(120deg, rgba(155, 109, 255, 0.9), rgba(238, 170, 255, 0.72));
    filter: drop-shadow(0 0 16px rgba(155, 109, 255, 0.42));
}

.preview-nav {
    width: 42px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.022);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.preview-nav.active {
    background: linear-gradient(135deg, rgba(155, 109, 255, 0.18), rgba(155, 109, 255, 0.055));
    box-shadow:
        inset 1px 0 0 rgba(155, 109, 255, 0.86),
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 0 24px rgba(155, 109, 255, 0.16);
}

.preview-nav.short {
    width: 32px;
}

.preview-plan {
    display: grid;
    gap: 5px;
    width: 52px;
    margin-top: auto;
    padding: 10px 8px;
    border: 1px solid rgba(155, 109, 255, 0.16);
    border-radius: 14px;
    background: rgba(155, 109, 255, 0.055);
    text-align: center;
}

.preview-plan span {
    height: 4px;
    border-radius: 999px;
    background: rgba(155, 109, 255, 0.34);
}

.preview-plan strong {
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
}

.preview-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.preview-chip {
    flex: 0 0 auto;
    border: 1px solid rgba(155, 109, 255, 0.18);
    border-radius: 999px;
    background: rgba(155, 109, 255, 0.075);
    padding: 5px 9px;
    color: #CFC5FF;
    font-size: 11px;
    line-height: 1;
}

.preview-card,
.preview-stat,
.preview-status {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.014);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.preview-primary {
    position: relative;
    display: flex;
    min-height: 154px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
}

.preview-primary::before {
    content: '';
    position: absolute;
    inset: -20% -12% auto 28%;
    height: 170px;
    background: radial-gradient(ellipse at center, rgba(155, 109, 255, 0.18), transparent 66%);
    pointer-events: none;
}

.preview-primary>div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.preview-eyebrow {
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.preview-primary strong {
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.05;
}

.preview-primary span:last-child,
.preview-status span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.preview-spirit {
    position: relative;
    z-index: 1;
    width: 92px;
    flex: 0 0 auto;
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(0 0 24px rgba(155, 109, 255, 0.6));
    animation: tide-float 4.8s ease-in-out infinite;
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.preview-stat {
    display: grid;
    min-width: 0;
    gap: 6px;
    border-radius: 14px;
    padding: 12px 10px;
}

.preview-stat span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.preview-stat strong {
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1;
}

.preview-status {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    border-radius: 16px;
    padding: 13px 14px;
}

.preview-status strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.2;
}

.preview-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.08), 0 0 22px rgba(74, 222, 128, 0.28);
}

@keyframes tide-float {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -10px, 0) rotate(-1.2deg);
    }
}

.glass-card,
.trust-bar,
.step-num,
.plan-badge,
.mobile-cta {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
}

.glass-card {
    border-radius: 16px;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.glass-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-default);
    background: rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 20px 62px rgba(0, 0, 0, 0.14);
}

.feature-card {
    padding: 26px;
}

.feature-icon,
.step-num {
    border: 1px solid rgba(155, 109, 255, 0.20);
    background: rgba(155, 109, 255, 0.08);
    color: var(--accent);
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.feature-icon svg {
    color: var(--accent);
}

.feature-card h3,
.step h3,
.faq-toggle span {
    color: var(--text-primary);
}

.steps {
    gap: 0;
}

.step-num {
    border-radius: 14px;
    font-size: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 0 18px rgba(155, 109, 255, 0.16);
}

.step-line {
    height: 2px;
    background-image: linear-gradient(90deg,
            rgba(155, 109, 255, 0),
            rgba(155, 109, 255, 0.95),
            rgba(0, 212, 224, 0.95),
            rgba(155, 109, 255, 0));
    background-size: 120px 100%;
    box-shadow: 0 0 18px rgba(155, 109, 255, 0.32);
    animation: tide-signal-flow 2.6s linear infinite;
}

.step-line::after {
    display: none;
}

@keyframes tide-signal-flow {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 0;
    }
}

.trust-bar {
    border-radius: 18px;
    padding: 18px 8px;
}

.trust-num,
.pricing-card .plan-price,
.check-icon {
    color: var(--accent);
}

.trust-label {
    color: var(--text-muted);
}

.trust-sep {
    background: rgba(255, 255, 255, 0.055);
}

.pricing-card {
    padding: 26px;
}

.pricing-best {
    border-color: rgba(155, 109, 255, 0.22);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.08), transparent 52%),
        rgba(255, 255, 255, 0.014);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 0 42px rgba(155, 109, 255, 0.08);
    transform: none;
}

.pricing-best:hover {
    transform: translateY(-1px);
    border-color: rgba(155, 109, 255, 0.32);
}

.plan-badge {
    color: rgba(155, 109, 255, 0.78);
    border-color: rgba(155, 109, 255, 0.10);
    background: rgba(155, 109, 255, 0.024);
    border-radius: 999px;
}

.plan-badge-best {
    color: #D4C5FF;
    border-color: rgba(155, 109, 255, 0.22);
    background: rgba(155, 109, 255, 0.16);
}

.plan-save {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.08);
}

.faq-item {
    border-radius: 16px;
}

.faq-toggle {
    transition: background-color 220ms ease;
}

.faq-toggle:hover {
    background: rgba(255, 255, 255, 0.018);
}

.faq-chevron {
    color: var(--text-muted);
}

.footer {
    border-top-color: var(--card-border);
    background: transparent;
}

.footer-bottom {
    border-top-color: var(--card-border);
}

.footer-col-title {
    color: var(--text-muted);
}

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

.mobile-cta {
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 18px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.012)),
        rgba(10, 10, 10, 0.78);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.mobile-menu {
    margin-top: 0;
    box-shadow: none;
}

.mobile-menu-inner {
    padding: 6px 0 14px !important;
}

.mobile-menu-nav-link {
    color: rgba(255, 255, 255, 0.6);
}

.mobile-menu-nav-link:hover {
    color: #fff;
}

/* ===== CABINET-GRADE SECTION SYSTEM ===== */
.divider {
    max-width: min(1120px, calc(100% - 40px));
    opacity: 0.72;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent),
        linear-gradient(90deg, transparent 18%, rgba(155, 109, 255, 0.18), transparent 82%);
}

.section {
    isolation: isolate;
    padding: 96px 20px;
}

.section::before {
    content: '';
    position: absolute;
    inset: 28px 0 auto;
    z-index: -1;
    height: min(520px, 62vh);
    pointer-events: none;
    background:
        radial-gradient(ellipse at 16% 12%, rgba(155, 109, 255, 0.072), transparent 44%),
        radial-gradient(ellipse at 78% 18%, rgba(0, 212, 224, 0.026), transparent 38%);
    filter: blur(28px);
    opacity: 0.72;
}

.section-inner {
    width: min(1120px, 100%);
    position: relative;
}

.section-title {
    max-width: 760px;
    margin-inline: auto;
    font-size: 38px;
    font-weight: 850;
}

.section-sub {
    margin-bottom: 42px;
}

.section-title::after {
    content: '';
    display: block;
    width: 38px;
    height: 2px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(155, 109, 255, 0.96), rgba(155, 109, 255, 0.72), transparent);
    box-shadow: 0 0 18px rgba(155, 109, 255, 0.30);
}

.glass-card,
.trust-bar,
.faq-item,
.pricing-card {
    position: relative;
    overflow: hidden;
}

.glass-card::before,
.pricing-card::before,
.faq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 14% 0%, rgba(155, 109, 255, 0.075), transparent 42%),
        radial-gradient(ellipse at 96% 24%, rgba(0, 212, 224, 0.027), transparent 32%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.glass-card>*,
.pricing-card>*,
.faq-item>* {
    position: relative;
    z-index: 1;
}

.glass-card:hover::before,
.pricing-card:hover::before,
.faq-item:hover::before {
    opacity: 1;
}

.glass-card {
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.009));
}

.glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.082);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 24px 70px rgba(0, 0, 0, 0.24),
        0 0 42px rgba(155, 109, 255, 0.055);
}

/* Trust strip mirrors the cabinet KPI strip instead of reading like a banner. */
.trust-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1120px;
    margin-inline: auto;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.052);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.017), rgba(255, 255, 255, 0.008)),
        rgba(10, 10, 10, 0.48);
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.trust-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 104px;
    padding: 21px 16px 18px;
    transition: background-color 240ms ease;
}

.trust-item:hover {
    background: rgba(255, 255, 255, 0.018);
}

.trust-num {
    display: block;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
    text-shadow: 0 0 22px rgba(155, 109, 255, 0.26);
}

.trust-label {
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
}

.trust-sep {
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.055);
}

body>.hero+.divider+.section {
    padding: 32px 20px 78px !important;
}

#features .section-inner,
#pricing .section-inner,
#faq .section-inner {
    max-width: 1120px;
}

.features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.feature-card:nth-child(1) {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.12), transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0.009));
}

.feature-card:nth-child(6) {
    background:
        radial-gradient(ellipse at 82% 0%, rgba(0, 212, 224, 0.052), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.021), rgba(255, 255, 255, 0.008));
}

.feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(238, 170, 255, 0.18), transparent 64%),
        rgba(155, 109, 255, 0.085);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 0 26px rgba(155, 109, 255, 0.10);
}

.feature-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: 0;
}

.feature-card p {
    margin: 0;
    line-height: 1.64;
}

.feature-card p+p {
    margin-top: auto !important;
    padding-top: 14px;
}

/* How section becomes a calm cabinet workflow panel. */
.steps {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}

.step {
    flex: 1 1 0;
    max-width: none;
    min-height: 214px;
    padding: 24px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008)),
        rgba(255, 255, 255, 0.006);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
    text-align: left;
    transition:
        transform 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        background-color 260ms ease;
}

.step:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.075);
    background-color: rgba(255, 255, 255, 0.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 22px 62px rgba(0, 0, 0, 0.18);
}

.step-num {
    width: 42px;
    height: 42px;
    margin: 0 0 18px;
    border-radius: 14px;
    font-size: 15px;
}

.step h3 {
    font-size: 17px;
    line-height: 1.28;
}

.step p {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.step-line {
    position: relative;
    flex: 0 0 52px;
    align-self: center;
    width: 52px;
    margin: 0 -22px;
    transform: translateY(20px);
    z-index: 2;
}

/* Pricing gets denser, cleaner, and more product-like. */
.pricing-grid,
.pricing-row-2 {
    gap: 12px;
}

.pricing-card {
    display: flex;
    min-height: 430px;
    flex-direction: column;
    border-radius: 20px;
    padding: 24px;
    border-color: rgba(255, 255, 255, 0.038);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.019), rgba(255, 255, 255, 0.008)),
        rgba(255, 255, 255, 0.006);
}

.pricing-card .plan-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.pricing-card .plan-price {
    margin-top: 8px;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.96;
}

.pricing-card .plan-per,
.pricing-card .plan-old {
    color: var(--text-muted);
}

.pricing-card .plan-features {
    display: grid;
    gap: 0;
    margin: 22px 0 24px;
}

.pricing-card .plan-features li {
    min-height: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    padding: 9px 0;
    color: var(--text-secondary);
}

.pricing-card .plan-features li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.pricing-card .btn-primary {
    margin-top: auto;
}

.pricing-best {
    border-color: rgba(155, 109, 255, 0.30);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.18), transparent 48%),
        radial-gradient(ellipse at 110% 82%, rgba(0, 212, 224, 0.055), transparent 42%),
        rgba(255, 255, 255, 0.014);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.024),
        0 0 0 1px rgba(155, 109, 255, 0.05),
        0 26px 80px rgba(155, 109, 255, 0.10);
}

.pricing-best:hover {
    transform: translateY(-4px);
    border-color: rgba(155, 109, 255, 0.42);
}

.plan-badge,
.plan-save {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.pricing-note {
    max-width: 760px;
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.012);
    color: var(--text-muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014);
}

.faq-list {
    display: grid;
    max-width: 920px;
    gap: 10px;
}

.faq-item {
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.006)),
        rgba(255, 255, 255, 0.006);
}

.faq-toggle {
    min-height: 64px;
    padding: 20px 22px;
}

.faq-toggle span {
    font-size: 15px;
    letter-spacing: 0;
}

.faq-chevron {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.018);
}

.faq-answer-inner {
    padding: 0 22px 22px;
}

.faq-answer-inner p {
    color: var(--text-secondary);
}

body>.section:last-of-type {
    padding-top: 72px !important;
    padding-bottom: 96px !important;
}

body>.section:last-of-type .section-inner {
    max-width: 900px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.052);
    border-radius: 24px;
    padding: 50px 28px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(155, 109, 255, 0.13), transparent 54%),
        radial-gradient(ellipse at 100% 90%, rgba(0, 212, 224, 0.045), transparent 40%),
        rgba(255, 255, 255, 0.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 32px 92px rgba(0, 0, 0, 0.24);
}

body>.section:last-of-type .section-title {
    font-size: 36px;
}

.footer {
    margin: 0 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.052);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.006)),
        rgba(10, 10, 10, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.016),
        0 26px 72px rgba(0, 0, 0, 0.22);
}

.footer-inner {
    max-width: 1120px;
}

.footer-logo {
    width: fit-content;
    border: 1px solid rgba(155, 109, 255, 0.10);
    border-radius: 14px;
    padding: 8px 12px;
    background: rgba(155, 109, 255, 0.035);
}

.footer-desc {
    margin-top: 16px;
}

.footer-col-title {
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
}

.footer-link {
    transition:
        color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.footer-link:hover {
    transform: translateX(2px);
    opacity: 1;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
}

.footer-bottom div:first-child {
    color: var(--text-secondary);
}

.reveal {
    transform: translateY(12px) scale(0.985);
    filter: blur(2px);
    transition:
        opacity 0.52s var(--ease-out),
        transform 0.52s var(--ease-out),
        filter 0.52s var(--ease-out);
}

.reveal.visible {
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ===== DESIGN REVIEW POLISH PASS ===== */
.navbar {
    top: 20px;
}

.nav-inner {
    border: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012)),
        rgba(12, 12, 15, 0.50);
    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.018);
}

.navbar.scrolled .nav-inner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.014)),
        rgba(12, 12, 15, 0.62);
}

.lang-switch,
.mobile-menu-inner .lang-row {
    border: 0;
    background: rgba(0, 0, 0, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.018),
        0 8px 22px rgba(0, 0, 0, 0.18);
}

.lang-btn.active {
    box-shadow:
        0 6px 18px rgba(155, 109, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.footer-logo {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.footer-logo img {
    filter:
        brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(0 0 22px rgba(155, 109, 255, 0.35));
    transition:
        transform 260ms var(--spring),
        filter 260ms ease;
}

.footer-logo:hover img {
    transform: translateY(-1px);
    filter:
        brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg) brightness(108%) drop-shadow(0 0 30px rgba(155, 109, 255, 0.50));
}

@media (min-width: 981px) {
    .hero {
        width: min(1160px, calc(100% - 56px));
        min-height: 90svh;
        padding: 134px 0 72px;
    }

    .hero-content {
        grid-template-columns: minmax(430px, 0.92fr) minmax(480px, 0.88fr);
        gap: clamp(10px, 3vw, 42px);
        align-items: center;
    }

    .hero-content::before,
    .hero-content::after {
        display: none;
    }

    .hero-copy {
        position: relative;
        z-index: 3;
        overflow: visible;
        border: none;
        border-radius: 0;
        padding: 20px 0 40px;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hero-copy::before {
        display: none;
    }

    .hero-copy::after {
        display: none;
    }

    .hero-copy .spirit-img {
        display: none;
    }

    .hero-kicker {
        border: 0;
        margin-bottom: 20px;
        padding: 7px 12px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014)),
            rgba(0, 0, 0, 0.20);
        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.020);
    }

    .hero h1 {
        max-width: 620px;
        font-size: 46px;
        line-height: 0.96;
        text-wrap: balance;
    }

    .hero h1 .accent-text {
        background: linear-gradient(110deg, #9B6DFF 0%, #C8AAFF 34%, #9B6DFF 66%, #EEAAFF 100%);
        background-size: 220% 100%;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 0 0 34px rgba(155, 109, 255, 0.20);
        animation: tide-title-shimmer 8s ease-in-out infinite;
    }

    .hero-copy>p {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.72;
    }

    .hero-ctas {
        gap: 12px;
        margin-top: 28px;
    }




    .cabinet-preview {
        min-height: 462px;
        border-radius: 28px;
        border-color: rgba(255, 255, 255, 0.075);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.015)),
            rgba(9, 9, 12, 0.42);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.038),
            inset 0 -1px 0 rgba(255, 255, 255, 0.012),
            0 38px 120px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(28px) saturate(155%);
        -webkit-backdrop-filter: blur(28px) saturate(155%);
        transform: translate3d(0, 0, 0);
        animation: tide-preview-float 8.5s ease-in-out infinite;
    }

    .cabinet-preview::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.050) 48%, transparent 62%),
            radial-gradient(ellipse at 68% 18%, rgba(255, 255, 255, 0.035), transparent 40%);
        transform: translateX(-36%);
        opacity: 0.58;
        pointer-events: none;
        animation: tide-preview-sheen 9s ease-in-out infinite;
    }

    .preview-card,
    .preview-stat,
    .preview-status {
        border-color: rgba(255, 255, 255, 0.052);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012)),
            rgba(255, 255, 255, 0.010);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .preview-primary {
        min-height: 166px;
    }

    .preview-dot {
        animation: tide-dot-pulse 2.8s ease-in-out infinite;
    }

    #features .section-inner {
        max-width: 1160px;
    }

    .features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: auto;
        min-height: 246px;
        border-radius: 24px;
        padding: 26px;
        background:
            radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.082), transparent 42%),
            radial-gradient(ellipse at 100% 100%, rgba(0, 212, 224, 0.032), transparent 38%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.020), rgba(255, 255, 255, 0.007));
    }

    .feature-card:hover {
        transform: translateY(-3px);
    }

    .feature-card::after {
        content: '';
        position: absolute;
        left: 26px;
        right: 26px;
        bottom: 22px;
        height: 1px;
        background: linear-gradient(90deg, rgba(155, 109, 255, 0.34), rgba(0, 212, 224, 0.16), transparent);
        opacity: 0.42;
        pointer-events: none;
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 24px;
        border: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(238, 170, 255, 0.24), transparent 62%),
            rgba(155, 109, 255, 0.11);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 16px 36px rgba(155, 109, 255, 0.10);
    }

    .feature-card h3 {
        font-size: 19px;
    }

    .feature-card p {
        max-width: 36ch;
        line-height: 1.72;
    }

    .steps {
        gap: 14px;
    }

    .step {
        border-color: rgba(255, 255, 255, 0.036);
        border-radius: 22px;
        background:
            radial-gradient(ellipse at 18% 0%, rgba(155, 109, 255, 0.070), transparent 44%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.007));
    }

    .step-line {
        flex: 0 0 34px;
        width: 34px;
        height: 1px;
        margin: 0 -2px;
        transform: translateY(22px);
        background: linear-gradient(90deg, transparent, rgba(155, 109, 255, 0.46), rgba(0, 212, 224, 0.22), transparent);
        background-size: auto;
        box-shadow: none;
        animation: none;
        opacity: 0.72;
    }

    .step-line::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(155, 109, 255, 0.70);
        box-shadow: 0 0 14px rgba(155, 109, 255, 0.28);
        transform: translate(-50%, -50%);
    }
}

@keyframes tide-stage-breathe {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.86;
    }

    50% {
        transform: translate3d(10px, -8px, 0) scale(1.012);
        opacity: 1;
    }
}

@keyframes tide-grid-drift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 0, 0 76px;
    }
}

@keyframes tide-mascot-orbit {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    35% {
        transform: translate3d(8px, -9px, 0) rotate(-2deg);
    }

    70% {
        transform: translate3d(-5px, 5px, 0) rotate(1deg);
    }
}

@keyframes tide-title-shimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes tide-glass-chip-a {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(10px, -7px, 0);
        opacity: 0.92;
    }
}

@keyframes tide-glass-chip-b {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.66;
    }

    50% {
        transform: translate3d(-8px, 8px, 0);
        opacity: 0.86;
    }
}

@keyframes tide-orb-drift-a {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(18px, 12px, 0);
    }
}

@keyframes tide-orb-drift-b {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-14px, -10px, 0);
    }
}

@keyframes tide-preview-float {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -8px, 0);
    }
}

@keyframes tide-preview-sheen {

    0%,
    100% {
        transform: translateX(-42%);
        opacity: 0;
    }

    45%,
    58% {
        opacity: 0.58;
    }

    72% {
        transform: translateX(36%);
        opacity: 0;
    }
}

@keyframes tide-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.08), 0 0 22px rgba(74, 222, 128, 0.28);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.10), 0 0 30px rgba(74, 222, 128, 0.36);
    }
}

@media (max-width: 1023px) {
    body::after {
        inset: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .hero h1 {
        font-size: 44px;
    }
}

@media (max-width: 980px) {
    .hero {
        width: min(680px, calc(100% - 32px));
        min-height: auto;
        padding: 120px 0 62px;
        text-align: center;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-copy .spirit-img,
    .hero-kicker {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-copy>p {
        margin: 0 auto;
    }

    .hero-ctas {
        justify-content: center;
    }

    .cabinet-preview {
        grid-template-columns: 68px minmax(0, 1fr);
        min-height: 356px;
        text-align: left;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: span 1;
    }

    .feature-card:nth-child(1) {
        grid-column: 1 / -1;
    }

    .steps {
        flex-direction: column;
    }

    .step-line {
        display: none;
    }

    .step {
        width: 100%;
        min-height: 0;
    }

    .pricing-grid,
    .pricing-row-2 {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        min-height: 0;
    }
}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .noise-overlay {
        width: 100vw !important;
        max-width: 100vw;
        overflow: hidden;
    }

    .glow-blob,
    .watermark {
        contain: paint;
    }

    .navbar {
        top: 8px;
        left: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }

    .navbar.scrolled {
        border: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }

    .nav-inner {
        height: 50px;
        padding: 0 12px 0 14px;
        border-bottom-color: transparent;
        border-radius: 18px;
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.015);
    }

    .mobile-menu:not(.open) {
        margin-top: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .mobile-menu.open {
        margin-top: 8px;
    }

    .hero {
        min-height: auto;
        width: min(430px, calc(100% - 32px));
        padding-top: 88px;
        padding-bottom: 30px;
        overflow: hidden;
    }

    .hero-content {
        gap: 18px;
        overflow: hidden;
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 31px;
        line-height: 1.08;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.48;
    }

    .hero-kicker {
        max-width: 100%;
        gap: 8px;
        margin-bottom: 12px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .hero-copy .spirit-img {
        width: 76px;
        margin-bottom: 10px;
    }

    .hero-ctas {
        gap: 10px;
        margin-top: 18px;
    }

    .hero .btn-primary,
    .hero .btn-ghost {
        min-height: 46px;
        padding: 12px 18px;
        border-radius: 13px;
    }

    .hero-note {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.45;
    }

    .cabinet-preview {
        grid-template-columns: 1fr;
        min-height: 264px;
        border-radius: 20px;
        overflow: hidden;
    }

    .preview-sidebar {
        display: none;
    }

    .preview-main {
        gap: 8px;
        padding: 12px;
    }

    .preview-header {
        font-size: 11px;
    }

    .preview-chip {
        padding: 4px 8px;
        font-size: 10px;
    }

    .preview-watermark {
        right: -12px;
        bottom: 2px;
        font-size: 70px;
    }

    .preview-primary {
        min-height: 104px;
        padding: 12px;
        border-radius: 16px;
        overflow: hidden;
    }

    .preview-primary>div {
        gap: 4px;
    }

    .preview-eyebrow {
        font-size: 9px;
    }

    .preview-primary strong {
        font-size: 17px;
    }

    .preview-primary span:last-child {
        font-size: 10px;
        line-height: 1.3;
    }

    .preview-spirit {
        width: 58px;
        flex: 0 0 auto;
    }

    .preview-metrics {
        gap: 8px;
    }

    .preview-stat {
        padding: 8px;
        border-radius: 12px;
    }

    .preview-stat span {
        font-size: 8px;
    }

    .preview-stat strong {
        font-size: 14px;
    }

    .preview-status {
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 13px;
    }

    .preview-status strong {
        font-size: 12px;
    }

    .section-title {
        font-size: 30px;
    }

    .section {
        padding: 70px 16px !important;
    }

    body>.hero+.divider+.section {
        padding: 12px 16px 48px !important;
    }

    body>.section:last-of-type {
        padding: 52px 16px 68px !important;
    }

    body>.section:last-of-type .section-inner {
        border-radius: 18px;
        padding: 28px 16px;
    }

    body>.section:last-of-type .section-title {
        font-size: 28px;
        line-height: 1.12;
    }

    body>.section:last-of-type .reveal[style*="margin-top:32px"] {
        margin-top: 22px !important;
    }

    body>.section:last-of-type .btn-primary {
        width: min(100%, 286px) !important;
        min-height: 52px;
        justify-content: center;
        gap: 8px;
        padding: 0 18px !important;
        border-radius: 15px;
        font-size: 14px !important;
        line-height: 1;
        white-space: nowrap;
    }

    body>.section:last-of-type .btn-primary svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    body>.section:last-of-type p {
        font-size: 12px !important;
        line-height: 1.45;
    }

    .section-sub {
        margin-bottom: 30px;
    }

    .mobile-cta {
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: min(calc(100vw - 20px), calc(100% - 20px));
        max-width: calc(100vw - 20px);
        bottom: max(10px, env(safe-area-inset-bottom));
        padding: 8px;
        border-radius: 16px;
    }

    .mobile-cta .btn-primary {
        min-height: 44px;
        border-radius: 12px;
        padding: 12px 16px;
    }

    #how.section {
        padding: 70px 16px 82px !important;
    }

    #how .section-inner {
        width: min(430px, 100%);
    }

    #how .section-title {
        max-width: 100%;
    }

    #how .section-sub {
        margin-bottom: 28px;
    }

    #how .steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 12px !important;
    }

    #how .step {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px !important;
        text-align: left !important;
        border-radius: 20px;
        transform: none !important;
    }

    #how .step:hover {
        transform: none !important;
    }

    #how .step-num {
        grid-row: 1 / span 2;
        width: 42px;
        height: 42px;
        margin: 0 !important;
    }

    #how .step h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.25;
    }

    #how .step p {
        grid-column: 2;
        margin: 6px 0 0;
        font-size: 14px;
        line-height: 1.55;
    }

    #how .step-line {
        display: none !important;
    }

    #how .reveal[style*="text-align:center"] {
        margin-top: 24px !important;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .feature-card,
    .feature-card:nth-child(1),
    .feature-card:nth-child(6) {
        grid-column: span 1;
        min-height: 0;
    }

    .feature-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
        padding: 16px 18px;
        border-radius: 18px;
    }

    .feature-card::after {
        display: none;
    }

    .feature-card .feature-icon {
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 14px;
    }

    .feature-card h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.25;
        align-self: center;
    }

    .feature-card p {
        grid-column: 1 / -1;
        margin: 4px 0 0;
        max-width: none;
        font-size: 14px;
        line-height: 1.46;
    }

    .feature-card p+p {
        margin-top: 8px !important;
        padding-top: 0;
    }

    .pricing-grid,
    .pricing-row-2 {
        gap: 10px;
    }

    .pricing-card {
        min-height: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .pricing-card>[style*="justify-content:space-between"] {
        margin-bottom: 10px !important;
    }

    .pricing-card>[style*="margin-bottom:0.5rem"] {
        margin-bottom: 6px !important;
    }

    .pricing-card .plan-label {
        font-size: 10px;
    }

    .pricing-card .plan-price {
        margin-top: 6px;
        font-size: 32px;
        line-height: 1.06;
    }

    .pricing-card .plan-per,
    .pricing-card .plan-old {
        font-size: 12px;
    }

    .pricing-card .plan-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin: 14px 0 16px;
    }

    .pricing-card .plan-features li {
        min-height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.044);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.012);
        gap: 8px;
        padding: 7px 9px;
        font-size: 12px;
        line-height: 1.25;
    }

    .pricing-card .plan-features li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.044);
    }

    .pricing-card .check-icon {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    .pricing-card .btn-primary {
        min-height: 44px;
        padding: 12px 18px;
        border-radius: 12px;
    }

    .plan-badge,
    .plan-save {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .trust-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
        border-radius: 18px;
    }

    .trust-sep {
        display: none;
    }

    .trust-item {
        min-height: 78px;
        padding: 12px 6px 10px;
    }

    .trust-num {
        font-size: 25px;
    }

    .trust-label {
        font-size: 8px;
        line-height: 1.2;
    }

    #faq.section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    #faq .section-sub {
        display: none;
    }

    #faq .section-title::after {
        margin-top: 14px;
    }

    .faq-list {
        gap: 8px;
    }

    .faq-item {
        border-radius: 14px;
    }

    .faq-toggle {
        min-height: 52px;
        padding: 14px 16px;
    }

    .faq-toggle span {
        font-size: 14px;
        line-height: 1.25;
    }

    .faq-chevron {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .faq-answer-inner {
        padding: 0 16px 16px;
    }

    .faq-answer-inner p {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .footer {
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

@media (max-width: 480px) {

    .btn-primary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .hero-ctas {
        width: 100%;
    }

    .hero-kicker span+span {
        display: none;
    }

    .hero-kicker span+span::before {
        display: none;
    }

    .preview-status span {
        display: none;
    }

    .trust-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trust-item:last-child {
        grid-column: auto;
    }

    .trust-item {
        min-height: 72px;
        padding: 11px 5px 9px;
    }

    .trust-num {
        font-size: 23px;
    }

    .trust-label {
        font-size: 7.5px;
    }

    .section-title {
        font-size: 28px;
    }

    .pricing-note {
        padding: 12px 14px;
    }

    .feature-card {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        padding: 15px 16px;
    }

    .feature-card .feature-icon {
        width: 40px;
        height: 40px;
    }

    .feature-card p {
        line-height: 1.44;
    }

    .pricing-card {
        padding: 16px;
    }

    .pricing-card .plan-price {
        font-size: 30px;
    }

    .pricing-card .plan-features {
        margin: 12px 0 14px;
    }

    .pricing-card .plan-features li {
        min-height: 32px;
        padding: 6px 8px;
    }

    #how.section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #how .step {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px 17px !important;
    }

    #how .step-num {
        grid-row: auto;
        margin-bottom: 12px !important;
    }

    #how .step p {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .watermark,
    .spirit-img,
    .hero-content::before,
    .hero-content::after,
    .preview-spirit,
    .cabinet-preview,
    .cabinet-preview::after,
    .preview-dot,
    .step-line,
    .reveal,
    .btn-primary,
    .btn-ghost,
    .glass-card,
    .pricing-card,
    .faq-item,
    .step,
    .lang-btn {
        animation: none;
        transition: none;
    }
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS (2026-05-02)
   Дизайн НЕ меняем — только хинты браузеру + дешёвые альтернативы.
   Цель: устранить scroll jank без визуальных изменений.

   Что делается:
   - reveal animation: фильтр blur при появлении заменён на чистый translate+opacity
     (filter blur — самое дорогое для GPU; визуально на полсекунды эффект почти
     неотличим, но FPS на скролле взлетает в 3-5×)
   - infinite background animations теперь явно promoted на свой compositor layer
     через will-change: transform, чтобы они НЕ триггерили repaint парента
   - content-visibility: auto на FAQ, How и Pricing секциях — браузер пропускает
     layout/paint этих секций пока они вне viewport (Chromium), graceful degrade
     в Safari/Firefox (просто игнорируется)
   - paint containment на heavy фоновых elements — изолирует их repaint от соседей
   - hover transitions с transform/box-shadow получили will-change только при hover
============================================================================= */

/* 1) Reveal animation БЕЗ filter blur — самая большая победа.
      ~80 .reveal элементов ранее анимировали filter blur, что блокирует GPU.
      will-change УБРАН с .reveal — overuse на 80 элементах создавал 80 GPU
      слоёв и расходовал видеопамять (MDN: will-change overuse = perf regression).
      Plain CSS transition без compositor hint вполне справляется. */
.reveal {
    filter: none !important;
    transition:
        opacity 0.52s var(--ease-out),
        transform 0.52s var(--ease-out) !important;
}

.reveal.visible {
    filter: none !important;
}

/* 2) Compositor promotion ТОЛЬКО для critical fixed-position infinite-anim
      элементов которые реально animate. translateZ(0) уже даёт GPU layer без
      will-change overhead. Removed: spirit-img, preview-spirit, step-line,
      preview-dot, cabinet-preview::after — they are inline elements, не нужно
      их promotion. */
.glow-blob,
.watermark {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* cabinet-preview ТОЛЬКО получает translateZ — without will-change. */
.cabinet-preview {
    transform: translateZ(0);
}

/* 3) Изоляция paint для тяжёлых фоновых слоёв — браузер не пересчитывает
      их при изменениях соседних элементов. */
.glow-blob,
.watermark,
.noise-overlay,
.landing-watermark {
    contain: layout paint style;
}

/* 4) content-visibility на секции ниже viewport — Chromium-only оптимизация,
      пропускает render крупных секций пока они не видимы. Other browsers
      просто игнорируют — без regression. contain-intrinsic-size резервирует
      placeholder layout, чтобы scrollbar не дёргался при появлении контента.
      NOTE: footer НЕ включаем — JS читает footer.offsetTop для mobile-cta
      logic, а с content-visibility auto offsetTop становится приближённым
      и mobile-cta может скрываться слишком рано. */
#features,
#how,
#pricing,
#faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* 5) Mobile (<768px): убираем самые тяжёлые backdrop-filter, которые
      реально незаметны на маленьком экране, но iOS Safari на них умирает.
      body::after — фуллскрин blur(14px) на инсете 10px, переписываем
      в обычный фон без backdrop-filter (визуально дельта <2%). */
@media (max-width: 768px) {
    body::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Заменяем стеклянный effect на статичный градиент-затемнение,
           который выглядит почти идентично на маленьком экране */
        background: rgba(255, 255, 255, 0.012);
    }

    /* Reduce hero stage backdrop-filter on mobile (huge win on iOS Safari) */
    .hero-content::before {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .cabinet-preview {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .preview-card,
    .preview-stat,
    .preview-status {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Glass card backdrop-filter снизим на mobile с 14px до 6px —
       визуально 95% такой же эффект, perf ~2× быстрее */
    :root {
        --card-blur: 6px;
    }

    /* Step-line shimmer — animation можно отключить на mobile, она
       визуально фоновая и почти не заметна на маленьком экране */
    .step-line {
        animation: none !important;
        background: linear-gradient(90deg, var(--accent), rgba(155, 109, 255, 0.2)) !important;
    }
}

/* 6) Mobile <480px — самые маломощные устройства, ещё агрессивнее. */
@media (max-width: 480px) {

    /* Watermark (50vw текст × blur(8px)) на маленьком экране почти не виден,
       drop animation глаз не ловит — выключаем animation, оставляем static */
    .watermark,
    .landing-watermark {
        animation: none !important;
    }

    /* Spirit float animation — оставляем (это hero focal point), но
       снижаем frequency через cubic-bezier который меньше раз в секунду меняет */

    /* Title shimmer на mobile отключается (background-position animation
       на тексте = repaint каждого глифа каждый frame) */
    .hero h1 .accent-text {
        animation: none !important;
        background-position: 0% 50% !important;
    }
}

/* (NOTE: body-level `contain` removed — потенциально создаёт новый
   containing block для position:fixed элементов и ломает navbar/mobile-cta
   pinning. Для нашего use case win нет, риск есть.) */

/* =============================================================================
   PERFORMANCE WAVE 2 (2026-05-02 night) — desktop hero/cabinet-preview lag fix
   Owner reported lag specifically on hero "TIDE Control / Web Cabinet preview"
   card. Root cause: 5 nested backdrop-filter elements inside an already-blurred
   parent + tide-dot-pulse animating box-shadow (paint-bound).

   Все правки ниже визуально неотличимы (вложенный backdrop-filter рисуется на
   уже размытой поверхности parent — он не добавляет видимого blur), но
   убирают катастрофическую composition cost.
============================================================================= */

/* 7) Inner preview cards: drop backdrop-filter ON DESKTOP TOO.
      Эти 5 elements (preview-card, 3× preview-stat, preview-status) лежат
      внутри .cabinet-preview которая уже имеет backdrop-filter:blur(16-28px).
      Вложенный backdrop-filter рисует blur НА УЖЕ размытой поверхности
      родителя — визуальной разницы 0, perf cost catastrophic (5× recompute
      на каждый scroll). */
.preview-card,
.preview-stat,
.preview-status {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 8) Snizhem outer cabinet-preview blur 28px → 18px на desktop.
      Между 18 и 28 разница на dark UI ≈ 2-3% яркости — почти неотличимо.
      Compositing cost backdrop-filter растёт нелинейно с blur radius:
      blur(18) ≈ 40% cheaper than blur(28). */
@media (min-width: 1024px) {
    .cabinet-preview {
        backdrop-filter: blur(18px) saturate(155%);
        -webkit-backdrop-filter: blur(18px) saturate(155%);
    }
}

/* 9) tide-dot-pulse animates box-shadow (paint-bound) infinitely on
      .preview-dot. Replace with ::before pseudo-overlay that animates
      opacity+transform (compositor-only, ~10× cheaper). Visually
      indistinguishable — green halo still pulses, just rendered via
      a separate composite layer instead of repainting parent. */
.preview-dot {
    /* Cancel original keyframes — switch to pseudo-overlay technique */
    animation: none !important;
    position: relative;
}

.preview-dot::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.32) 0%, rgba(74, 222, 128, 0.10) 52%, transparent 70%);
    animation: tide-dot-pulse-cheap 2.8s ease-in-out infinite;
    pointer-events: none;
    /* Force own GPU layer so parent never repaints */
    will-change: opacity, transform;
    transform: translateZ(0);
}

@keyframes tide-dot-pulse-cheap {

    0%,
    100% {
        opacity: 0.55;
        transform: translateZ(0) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateZ(0) scale(1.18);
    }
}

/* 10) tide-stage-breathe анимирует scale(1.012) — крошечный скейл (1.2%)
       заставляет браузер пересчитывать backdrop-filter parent'а на каждый
       frame. Убираем scale, оставляем translate+opacity (визуально
       перемещение 10×8px едва заметно, scale 1.012 вообще не заметно). */
@keyframes tide-stage-breathe-cheap {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.86;
    }

    50% {
        transform: translate3d(10px, -8px, 0);
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    .hero-content::before {
        animation-name: tide-stage-breathe-cheap !important;
    }
}

/* 11) Glow blob filter:blur(120px) is the desktop's expensive defaults
       — capping at blur(80px) on mobile loses ~30% visual softness but
       cuts paint cost ~50%. Desktop unchanged. */
@media (max-width: 768px) {
    .glow-blob {
        filter: blur(60px) !important;
    }
}

/* =============================================================================
   PERFORMANCE WAVE 4 (2026-05-02 night) — radical hero killers removal
   После wave 1+2+3 юзер всё равно ощущает лаги. Atomic-level audit нашёл
   три РЕАЛЬНО paint-bound infinite анимации на hero, которые перерисовывают
   огромную область каждый frame:

   1. .hero-content::after — repeating-linear-gradient + tide-grid-drift 12s
      animates background-position. Repeating-gradient — это full-area paint
      каждый frame, не cheap composite. На 1900×1080 экране это ~2 МП пикселей
      перерисовываются 60 раз в секунду.
   2. .hero h1 .accent-text — tide-title-shimmer 8s animates background-position
      ON TEXT. Каждый глиф "Быстрый приватный интернет" перерисовывается каждый
      frame. На high-DPI экране это очень дорого.
   3. SVG feTurbulence noise overlay — fixed inset:0 z-index:9999 opacity:0.018.
      Opacity 0.018 = 98% transparent, эффект чисто декоративный. Cost не
      maximum (one-time raster), но удержание SVG context в памяти.

   Plus более expensive filter chains на mascot images.
============================================================================= */

/* 12) Kill repeating-gradient grid drift animation on hero (paint-bound).
       Visible эффект — едва уловимая тонкая сетка с 1px полосами 40px apart
       at 0.022 opacity. На dark UI она почти невидима. Удаление улучшает
       FPS на ~5-10 кадров на mid-range desktop. */
.hero-content::after {
    animation: none !important;
}

/* 13) Kill text shimmer on hero accent-text (paint каждого глифа каждый frame).
       Static gradient остаётся — visual эффект — мягкий purple text instead
       of цикличный shimmer. Юзер не теряет ощущение premium, gain ~3-5 FPS. */
.hero h1 .accent-text {
    animation: none !important;
    background-position: 0% 50% !important;
}

/* 14) Kill SVG feTurbulence noise overlay полностью. opacity:0.018 = 98%
       прозрачность, эффект чисто грейн на тёмном фоне, который никто не
       заметит. SVG raster of fullscreen feTurbulence keeps a separate
       composition layer in memory. */
.noise-overlay {
    display: none !important;
}

/* 15) Reduce hero-content::before backdrop-filter blur 20→10px on desktop.
       Это glass-stage за hero текстом. Под opacity:0.95 + radial gradients
       разница между 10 и 20 px blur визуально незаметна. */
@media (min-width: 1024px) {
    .hero-content::before {
        backdrop-filter: blur(10px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    }

}

/* 16) Mascot filter chain простой → прямой purple tint.
       Original: brightness(0) saturate(100%) invert(45%) sepia(90%)
                 saturate(700%) hue-rotate(220deg) brightness(101%) drop-shadow(...)
       6-step filter chain каждый запускает GPU pass. Объединяем в:
       - brightness(0) saturate(100%) invert(45%) sepia(90%) hue-rotate(220deg)
         (5 steps вместо 6, drop-shadow вынесен в text-shadow на parent)
       Visual: цвет purple остаётся идентичным, glow effect через CSS box-shadow
       вместо filter:drop-shadow.

       NOTE: spirit-img + preview-spirit оба используют этот pattern. */
.spirit-img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg);
    /* Glow effect через box-shadow вместо filter:drop-shadow (≈3× cheaper).
       Box-shadow не рендерит за scaled element, но spirit-img фиксирован
       по размеру — для нашего кейса equivalent. */
}

@media (min-width: 1024px) {
    .preview-spirit {
        filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg);
    }
}

/* Navbar logo — same purple recolor.
   Source asset (tide-wave-v2.{svg,avif,webp}) is pastel pink RGB(243,224,255)
   from the "pink accent" brand epoch (commit 3b0ff03). Without this filter
   the nav logo renders raw pink on mobile (PC users may see purple from old
   browser cache predating the pink rebase, but a fresh fetch gives pink).
   Same recolor chain as .spirit-img / .footer-logo / .preview-spirit. */
.nav-logo img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(220deg);
}

/* =============================================================================
   PERFORMANCE WAVE 5 (2026-05-02 night) — aggressive backdrop-filter reduction
   Owner test confirmed (через diagnostic snippet): backdrop-filter ВСЁ ЕЩЁ
   корень. На странице ~20 active backdrop-filter elements (17 glass-cards +
   navbar.scrolled + cabinet-preview + 2 pseudo). Каждый — composition
   bottleneck. Текущая стратегия: drastically снизить blur radius где визуально
   на dark UI разница незаметна, и отключить полностью на static decorative
   elements.

   Justified blur radius cuts on dark UI:
   - На dark surface (background opacity 0.012-0.022) blur effect почти
     unvisible независимо от radius — он просто mixes already-dark colors.
   - Visible glass effect создают: border (rgba 0.06-0.09) + box-shadow,
     не blur. Blur добавляет tonal subtlety которая полезна на bright/varied
     backgrounds, но на uniform dark — не critical.

   Compositing cost растёт нелинейно с blur radius:
   blur(2)≈1, blur(4)≈3, blur(8)≈10, blur(14)≈25, blur(20)≈45, blur(28)≈80.
   Drop с 14→4 = 6× cheaper, drop с 28→8 = 8× cheaper.
============================================================================= */

/* 17) Glass cards: --card-blur 14px → 4px на desktop. 17 cards × 6× cheaper
       composite = HUGE win. Visually на dark UI разница меньше чем 1% pixel
       brightness. */
:root {
    --card-blur: 4px;
}

/* 18) Cabinet-preview: blur 18px → 8px на desktop. */
@media (min-width: 1024px) {
    .cabinet-preview {
        backdrop-filter: blur(8px) saturate(155%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(155%) !important;
    }

    /* hero-content::before: blur 10px → 4px на desktop. */
    .hero-content::before {
        backdrop-filter: blur(4px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(4px) saturate(140%) !important;
    }
}