:root {
        --primary: #0A1628;
        --primary-soft: #0F2447;
        --secondary: #1D4ED8;
        --accent: #3B6FD9;
        --accent-light: #EFF4FF;

        --text: #0F172A;
        --text-muted: #475569;
        --text-light: #64748B;

        --background: #F6F8FB;
        --surface: #FFFFFF;
        --surface-elevated: #FFFFFF;

        --border: #E2E8F0;
        --border-subtle: #EEF2F6;

        --radius-sm: clamp(8px, 0.8vw, 10px);
        --radius-md: clamp(12px, 1.2vw, 16px);
        --radius-lg: clamp(16px, 1.5vw, 20px);

        --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
        --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.04);
        --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.06);
        --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.06), 0 32px 64px rgba(29, 78, 216, 0.08);
        --shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.08), 0 36px 72px rgba(29, 78, 216, 0.1);

        --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        --container: clamp(1100px, 85vw, 1400px);

        --text-xs: clamp(0.75rem, 0.7vw, 0.8125rem);
        --text-sm: clamp(0.8125rem, 0.8vw, 0.875rem);
        --text-base: clamp(0.9375rem, 0.9vw, 1rem);
        --text-lg: clamp(1rem, 1.05vw, 1.125rem);
        --text-xl: clamp(1.125rem, 1.15vw, 1.25rem);
        --text-2xl: clamp(1.25rem, 1.4vw, 1.5rem);
        --text-3xl: clamp(1.5rem, 2.5vw, 2.5rem);
        --text-4xl: clamp(1.75rem, 3.5vw, 3.25rem);
        --text-hero: clamp(2rem, 5vw, 4.25rem);
    }

    /* ─── Fluid spacing tokens ─── */
    :root {
        --space-xs: clamp(4px, 0.3vw, 6px);
        --space-sm: clamp(8px, 0.6vw, 12px);
        --space-md: clamp(16px, 1.2vw, 24px);
        --space-lg: clamp(24px, 2vw, 36px);
        --space-xl: clamp(32px, 3vw, 48px);
        --space-2xl: clamp(48px, 4vw, 72px);
        --space-3xl: clamp(64px, 6vw, 96px);

        --section-padding-small: clamp(16px, 3dvh, 32px);
        --section-padding-medium: clamp(32px, 5dvh, 64px);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 88px;
        /* clip (not hidden) — "hidden" makes html/body a scroll container,
           which breaks position:sticky on the header for every descendant */
        overflow-x: clip;
        max-width: 100%;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: var(--text-base);
        line-height: 1.6;
        color: var(--text);
        background:
            radial-gradient(ellipse 80% 50% at 0% 0%, rgba(29, 78, 216, 0.06), transparent 50%),
            radial-gradient(ellipse 60% 40% at 100% 0%, rgba(59, 111, 217, 0.05), transparent 45%),
            var(--background);
        overflow-x: clip;
        max-width: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* .header is now position:fixed (removed from flow) — reserve its
           height here so content doesn't slide in underneath it. Must match
           .header-container's own height exactly (see clamp below). */
        padding-top: clamp(56px, 5dvh, 72px);
    }

    .container {
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 clamp(12px, 2vw, 24px);
    }


    /* ─── Language Switcher ─── */
    .lang-switcher {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        margin-left: 8px;
        padding: 3px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--border);
        border-radius: 8px;
        backdrop-filter: blur(8px);
    }

    .lang-switcher__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 8px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-muted);
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        letter-spacing: 0.02em;
        line-height: 1;
        min-width: 32px;
    }

    .lang-switcher__btn:hover {
        color: var(--text);
        background: rgba(59, 111, 217, 0.06);
    }

    .lang-switcher__btn--active {
        color: #fff;
        background: var(--secondary);
        box-shadow: 0 1px 4px rgba(29, 78, 216, 0.25);
    }

    .lang-switcher__btn--active:hover {
        color: #fff;
        background: var(--secondary);
    }

    .lang-switcher__divider {
        width: 1px;
        height: 14px;
        background: var(--border);
        flex-shrink: 0;
    }

    @media (max-width: 1024px) {
        .lang-switcher {
            margin-left: 4px;
            padding: 2px;
        }
        .lang-switcher__btn {
            padding: 3px 6px;
            font-size: 0.7rem;
            min-width: 28px;
        }
    }

    /* ─── Cursor Sphere ─── */

    .cursor-sphere-wrap {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 999998;
        width: 25px;
        height: 25px;
        opacity: 0;
        transition: opacity 0.4s ease;
        will-change: transform;
    }

    .cursor-sphere-wrap.active {
        opacity: 1;
    }

    .cursor-sphere {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background:
            radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9) 0%, rgba(196, 167, 255, 0.7) 20%, rgba(139, 92, 246, 0.6) 40%, rgba(99, 102, 241, 0.5) 70%, rgba(59, 130, 246, 0.4) 100%);
        box-shadow:
            0 0 20px rgba(139, 92, 246, 0.6),
            0 0 40px rgba(139, 92, 246, 0.3),
            0 0 60px rgba(99, 102, 241, 0.2),
            inset 0 2px 4px rgba(255, 255, 255, 0.4),
            inset 0 -2px 6px rgba(0, 0, 0, 0.1);
        animation: sphereFloat 3s ease-in-out infinite, sphereRotate 8s linear infinite;
        transform-origin: center;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .cursor-sphere::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 6px;
        width: 8px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: rotate(-25deg);
        filter: blur(2px);
    }

    .cursor-sphere::after {
        content: '';
        position: absolute;
        bottom: 3px;
        right: 4px;
        width: 4px;
        height: 2px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(15deg);
        filter: blur(1px);
    }

    .cursor-sphere-glow {
        position: absolute;
        inset: -12px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, rgba(99, 102, 241, 0.2) 40%, rgba(59, 130, 246, 0.1) 70%, transparent 100%);
        transform: scale(0);
        opacity: 0;
        transition: none;
        will-change: transform, opacity;
        filter: blur(6px);
    }

    @keyframes sphereFloat {
        0%, 100% {
            transform: scale(1) translateY(0);
            box-shadow:
                0 0 20px rgba(139, 92, 246, 0.5),
                0 0 40px rgba(139, 92, 246, 0.25),
                0 0 60px rgba(59, 130, 246, 0.15);
        }
        50% {
            transform: scale(1.15) translateY(-2px);
            box-shadow:
                0 0 25px rgba(139, 92, 246, 0.7),
                0 0 50px rgba(139, 92, 246, 0.35),
                0 0 80px rgba(59, 130, 246, 0.25);
        }
    }

    @keyframes sphereRotate {
        0% {
            filter: hue-rotate(0deg);
        }
        100% {
            filter: hue-rotate(360deg);
        }
    }

    @keyframes spherePulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }

    .cursor-sphere.pulse {
        animation: sphereFloat 3s ease-in-out infinite, sphereRotate 8s linear infinite, spherePulse 0.4s ease-in-out;
    }

    /* ─── Cursor Line Trail ─── */

    .cursor-trail-canvas {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 999999;
    }

    @media (max-width: 768px) {
        .cursor-trail-canvas,
        .cursor-sphere {
            display: none;
        }
    }

    /* ─── Keyframe Animations ─── */

    @keyframes shimmer {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    @keyframes pulseGlow {
        0%, 100% { transform: scale(1); opacity: .7; }
        50% { transform: scale(1.1); opacity: 1; }
    }
    @keyframes gradientMove {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes fadeInScale {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
    }
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes ripple {
        0%   { transform: scale(0); opacity: 0.5; }
        100% { transform: scale(4); opacity: 0; }
    }
    @keyframes borderTravel {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes floatParticle {
        0%   { transform: translateY(100%) translateX(0); opacity: 0; }
        10%  { opacity: 0.15; }
        90%  { opacity: 0.15; }
        100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
    }
    @keyframes heroImageFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes heroCardFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }
    @keyframes protectionIntro {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroFadeIn {
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes processGlowDrift {
        from { transform: translate(0, 0) scale(1); }
        to   { transform: translate(24px, -16px) scale(1.08); }
    }
    @keyframes processDotPulse {
        0%, 100% { transform: scale(1); opacity: 0.7; }
        50%      { transform: scale(1.35); opacity: 1; }
    }
    @keyframes stepNumberFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-4px); }
    }
    @keyframes stepIconFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-8px); }
    }
    @keyframes partnersMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    @keyframes modalBgIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    @keyframes modalContentIn {
        from { opacity: 0; transform: scale(0.95) translateY(12px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes shieldFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes pulseDot {
        0%, 100% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(1.5); }
    }
    @keyframes ringRotate {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    @keyframes networkDash {
        to { stroke-dashoffset: -260; }
    }
    @keyframes nodePulse {
        0%, 100% { transform: scale(1); opacity: 0.85; }
        50% { transform: scale(1.25); opacity: 1; }
    }
    @keyframes particlePulse {
        0%, 100% { opacity: 0.45; transform: scale(0.85); }
        50% { opacity: 1; transform: scale(1.15); }
    }

    /* ─── Header ─── */

    .header {
        /* fixed, not sticky — sticky has too many edge cases (containing
           blocks from filter/backdrop-filter/transform on ancestors, plus
           extra WebKit/iOS-specific quirks) that made the header intermittently
           un-pin itself. fixed sidesteps all of that; body gets padding-top
           below to reserve the space fixed removes from normal flow. */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-bottom: 1px solid transparent;
        transition: border-color var(--transition), box-shadow var(--transition);
    }

    /* backdrop-filter lives on ::before, not .header itself — backdrop-filter
       (like transform/filter) creates a new containing block for position:fixed
       descendants, which broke the mobile nav's fixed positioning since .nav
       is nested inside .header */
    .header::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: background var(--transition);
    }

    .header-container {
        position: relative;
    }

    .header.scrolled {
        border-bottom-color: var(--border-subtle);
        box-shadow: var(--shadow-xs);
    }

    .header.scrolled::before {
        background: rgba(255, 255, 255, 0.95);
    }

    .header-container {
        height: clamp(56px, 5dvh, 72px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(16px, 2.5vw, 32px);
    }

    .logo {
        text-decoration: none;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }
    .logo:hover {
        transform: scale(1.03);
    }

    .logo img {
        height: clamp(28px, 2.5dvh, 36px);
        display: block;
    }

    .nav {
        display: flex;
        gap: clamp(16px, 2.5vw, 32px);
    }

    .nav-link {
        white-space: nowrap;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: -0.01em;
        transition: color var(--transition);
        position: relative;
    }
    .nav a::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--secondary);
        border-radius: 2px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav a:hover::after,
    .nav a.active::after {
        width: 100%;
    }
    .nav a:hover,
    .nav a.active {
        color: var(--text);
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: clamp(8px, 1vw, 12px);
    }

    /* The full nav (9 links) genuinely doesn't fit between the burger
       breakpoint (992px, in responsive.css) and ~1150px — measured a real
       ~28px horizontal overflow at 1024px. Tighten spacing just in that
       band so nothing gets clipped; wider screens are unaffected. */
    @media (min-width: 993px) and (max-width: 1150px) {
        .nav {
            gap: 12px;
        }

        .nav a {
            font-size: 0.78rem;
        }

        .header-container {
            gap: 12px;
        }

        .header-right {
            gap: 6px;
        }
    }

    .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(36px, 3vw, 40px);
        height: clamp(36px, 3vw, 40px);
        border-radius: clamp(8px, 0.8vw, 10px);
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-muted);
        text-decoration: none;
        transition: all var(--transition);
    }

    .social-icon:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .social-icon--wa:hover {
        color: #25D366;
        border-color: rgba(37, 211, 102, 0.3);
        background: rgba(37, 211, 102, 0.06);
    }

    .social-icon--tg:hover {
        color: #0088cc;
        border-color: rgba(0, 136, 204, 0.3);
        background: rgba(0, 136, 204, 0.06);
    }

    .phone {
        text-decoration: none;
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    /* ─── Burger menu ─── */

    .burger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: clamp(4px, 0.4vw, 5px);
        width: clamp(36px, 3vw, 40px);
        height: clamp(36px, 3vw, 40px);
        padding: clamp(6px, 0.6vw, 8px);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        cursor: pointer;
        transition: border-color var(--transition), background var(--transition);
    }

    .burger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: transform var(--transition), opacity var(--transition);
    }

    .burger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* clip, not hidden — same reason as html/body's overflow-x fix above:
       "hidden" turns body into a scroll container and breaks position:sticky
       on the header, so the navbar itself unpins the moment the mobile menu
       opens. "clip" still locks background scroll without that side effect. */
    body.menu-open {
        overflow: clip;
    }

    /* ─── Buttons ─── */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: clamp(10px, 1vw, 12px) clamp(18px, 2vw, 24px);
        border: none;
        border-radius: var(--radius-sm);
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        transition:
            background var(--transition),
            color var(--transition),
            border-color var(--transition),
            box-shadow var(--transition),
            transform var(--transition);
    }

    .btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        background-size: 200% 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .btn:hover::after {
        opacity: 1;
        animation: shimmer 2s ease-in-out infinite;
    }

    .btn-primary {
        background: linear-gradient(180deg, var(--secondary) 0%, #1E3A8A 100%);
        background-size: 200% 200%;
        color: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(29, 78, 216, 0.25);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.1), 0 8px 24px rgba(29, 78, 216, 0.3);
    }

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

    .btn-secondary {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
        box-shadow: var(--shadow-xs);
    }

    .btn-secondary:hover {
        border-color: rgba(29, 78, 216, 0.3);
        background: var(--accent-light);
        color: var(--secondary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    /* ─── Hero ─── */

    .hero {
        position: relative;
        overflow: hidden;
        padding: 48px 0 80px;
        min-height: calc(100vh - 72px);
        min-height: calc(100dvh - 72px);
        display: flex;
        align-items: center;
        background:
            radial-gradient(ellipse 90% 70% at 92% 8%, rgba(29, 78, 216, 0.14), transparent 55%),
            radial-gradient(ellipse 55% 45% at 8% 35%, rgba(59, 111, 217, 0.08), transparent 50%),
            linear-gradient(180deg, #FFFFFF 0%, var(--background) 100%);
    }

    .hero::before {
        content: "";
        position: absolute;
        width: 900px;
        height: 900px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(29, 78, 216, 0.09) 0%, transparent 68%);
        top: -320px;
        right: -280px;
        pointer-events: none;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(29, 78, 216, 0.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(29, 78, 216, 0.022) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, black 15%, transparent 78%);
        -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 45%, black 15%, transparent 78%);
        pointer-events: none;
    }

    .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero > .container {
        width: 100%;
    }

    .hero-container {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: center;
        gap: 24px 40px;
        max-width: 1360px;
    }

    .hero-content {
        max-width: 580px;
        justify-self: start;
        margin-right: auto;
        text-align: left;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 5.1vw, 3.75rem);
        line-height: 1.06;
        font-weight: 800;
        letter-spacing: -0.035em;
        margin-bottom: 24px;
        color: var(--primary);
    }

    .hero h1 span {
        background: linear-gradient(135deg, var(--secondary) 0%, #3B82F6 50%, var(--accent) 100%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradientMove 4s ease infinite;
    }

    .hero p {
        font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
        line-height: 1.75;
        color: var(--text-muted);
        margin-bottom: 36px;
        max-width: 520px;
    }

    /* Compound selector (higher specificity) so the hero intro paragraph
       keeps a comfortable reading size instead of the var(--text-sm)
       (13px) mobile override in responsive.css. */
    .hero .hero-content p {
        font-size: clamp(0.9375rem, 3.2vw, 1.0625rem);
    }

    .hero-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .hero-buttons .btn {
        flex: 1 1 0;
        min-width: 220px;
        white-space: normal;
        text-align: center;
    }

    .hero-image {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: 520px;
    }

    .hero-visual {
        position: relative;
        width: 100%;
        max-width: 780px;
        min-height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-visual-bg {
        position: absolute;
        inset: 8% 0 8% 12%;
        border-radius: var(--radius-lg);
        background:
            linear-gradient(145deg, rgba(239, 244, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(219, 234, 254, 0.35) 100%);
        border: 1px solid rgba(29, 78, 216, 0.1);
        box-shadow:
            0 4px 24px rgba(29, 78, 216, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        z-index: 0;
    }

    .hero-visual-bg::before {
        content: "";
        position: absolute;
        width: 70%;
        height: 70%;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(29, 78, 216, 0.12) 0%, transparent 70%);
        filter: blur(24px);
    }

    .hero-visual img {
        position: relative;
        z-index: 1;
        width: 115%;
        max-width: 820px;
        height: auto;
        min-height: 440px;
        object-fit: contain;
        object-position: center center;
        filter: drop-shadow(0 32px 64px rgba(29, 78, 216, 0.14));
        animation: heroImageFloat 7s ease-in-out infinite;
    }

    .hero-float-card {
        position: absolute;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(29, 78, 216, 0.1);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
        animation: heroCardFloat 5s ease-in-out infinite;
    }
    .hero-float-card:hover {
        transform: scale(1.05) translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .hero-float-card strong {
        font-size: var(--text-xl);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--secondary);
        line-height: 1;
    }

    .hero-float-card span {
        font-size: var(--text-xs);
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .hero-float-card--1 {
        top: 18%;
        left: 0;
        animation-delay: 0s;
    }

    .hero-float-card--2 {
        bottom: 16%;
        right: 4%;
        animation-delay: 1.2s;
    }

    /* ─── Section typography ─── */

    .section-header {
        text-align: center;
        margin: 0 auto 56px;
    }

    .section-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        background: var(--accent-light);
        border: 1px solid rgba(29, 78, 216, 0.1);
        color: var(--secondary);
        border-radius: 999px;
        margin-bottom: 16px;
        margin-left: auto;
        margin-right: auto;
        font-size: var(--text-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .section-badge:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(29,78,216,0.1);
    }

    .section-title {
        font-size: clamp(2rem, 3vw, 3rem);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.03em;
        color: var(--primary);
        margin-bottom: 0;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-header .section-title {
        margin-bottom: 16px;
    }

    /* Единый размер заголовков секций для главной страницы. */
    .contact-content h2,
    .contacts-header h2 {
        font-size: clamp(2rem, 3vw, 3rem) !important;
        line-height: 1.15;
    }

    @media (max-width: 768px) {
        .section-title,
        .contact-content h2,
        .contacts-header h2 {
            font-size: clamp(1.85rem, 8vw, 2.45rem) !important;
        }
    }

    .section-subtitle {
        color: var(--text-muted);
        font-size: var(--text-lg);
        line-height: 1.7;
        max-width: 640px;
        margin: 0 auto;
    }

    /* ─── Unified card system ─── */

    .protection-card,
    .risk-card,
    .advantage-card,
    .stat-card,
    .process-step,
    .case-card,
    .solution-card,
    .partner-logo {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        transition:
            transform var(--transition),
            box-shadow var(--transition),
            border-color var(--transition);
    }
    .partner-logo-img {
        max-width: 120px;
        max-height: 40px;
        object-fit: contain;
    }
    .protection-card:hover,
    .risk-card:hover,
    .advantage-card:hover,
    .stat-card:hover,
    .process-step:hover,
    .case-card:hover,
    .solution-card:hover,
    .partner-logo:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        border-color: rgba(29, 78, 216, 0.12);
    }

    /* ─── Protection ─── */

    .protection {
        padding-top: 48px;
        background: var(--background);
    }

    .protection-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }

    .protection-card {
        padding: 28px 24px;
    }

    .icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        background: var(--accent-light);
        border: 1px solid rgba(29, 78, 216, 0.08);
        font-size: 20px;
        margin-bottom: 16px;
        line-height: 1;
    }

    .protection-card h3 {
        font-size: var(--text-sm);
        line-height: 1.5;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text);
    }

    /* Column header icons */
    .col-header-icon {
        flex-shrink: 0;
        width:48px;
        height:48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: transform 0.3s;
    }
    .col-header-icon:hover {
        transform: scale(1.08);
    }

    .dlp-icon {
        background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
        color: #fff;
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
    }

    .waf-icon {
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: #fff;
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
    }

    .col-header-text { flex: 1; }

    .col-title {
        font-size: clamp(1rem, 1.8vw, 1.2rem);
        font-weight: 700;
        margin: 0 0 4px 0;
        letter-spacing: -0.01em;
    }

    .dlp-title { color: #7C3AED; }
    .waf-title { color: #2563EB; }

    .col-subtitle {
        font-size: var(--text-sm);
        color: var(--text-muted);
        margin: 0;
        line-height: 1.5;
    }

    /* Protection item icons */
    .pitem-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(139, 92, 246, 0.1);
        color: #7C3AED;
    }

    .waf-pitem-icon {
        background: rgba(59, 130, 246, 0.1);
        color: #2563EB;
    }

    .pitem-content { flex: 1; }

    .pitem-content strong {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 4px;
    }

    .pitem-content p {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.6;
        margin: 0;
    }

    /* Center glow & radar rings */
    .center-glow {
        position: absolute;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 45%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .center-rings {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .center-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(148, 163, 184, 0.18);
    }

    .center-ring--1 {
        width: 160px;
        height: 160px;
    }

    .center-ring--2 {
        width: 220px;
        height: 220px;
        border-style: dashed;
        border-color: rgba(148, 163, 184, 0.14);
    }

    .center-ring--3 {
        width: 280px;
        height: 280px;
        border-color: rgba(148, 163, 184, 0.1);
    }

    .insider-text { flex: 1; }

    /* ─── Protection Section Header ─── */

    .protection .section-header {
        text-align: center;
        margin-bottom: 56px;
    }

    .protection.show .section-badge,
    .protection.show .section-title,
    .protection.show .section-subtitle {
        animation: protectionIntro 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .protection.show .section-title { animation-delay: 0.08s; }
    .protection.show .section-subtitle { animation-delay: 0.16s; }

    .protection .section-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #EFF4FF 0%, #F0F7FF 100%);
        color: var(--secondary);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-bottom: 16px;
        border: 1px solid rgba(29, 78, 216, 0.15);
        text-transform: uppercase;
    }

    .protection .section-badge::before {
        font-size: 14px;
    }

    .protection .section-title {
        font-size: var(--text-4xl);
        font-weight: 800;
        color: var(--text);
        margin-bottom: 12px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    .protection .section-title span {
        background: linear-gradient(90deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .protection .section-subtitle {
        font-size: var(--text-lg);
        color: var(--text-muted);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* ─── Protection Panel & Dual Layout ─── */

    .protection-panel {
        background: linear-gradient(180deg, #F8FAFF 0%, #F1F5F9 100%);
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 24px;
        padding: 40px 0 28px;
        box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
        width: 100%;
        height: 100%;
    }

    .protection-panel > .container {
        padding: 0;
    }

    .protection-dual-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 560px minmax(0, 1fr);
        gap: 32px;
        align-items: center;
        margin-bottom: 28px;
        position: relative;
    }

    .protection-dual-layout > * {
        min-width: 0;
    }

    .protection-column {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .dlp-column,
    .waf-column {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .protection.show .dlp-column {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .protection.show .waf-column {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

    .protection-center {
        opacity: 0;
        transform: scale(0.96) translateY(18px);
        transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 420px;
        position: relative;
    }

    .protection.show .protection-center {
        opacity: 1;
        transform: scale(1) translateY(0);
        transition-delay: 0.22s;
    }

    .center-shield {
        width: 100%;
        max-width: 560px;
        height: auto;
        position: relative;
        z-index: 2;
        animation: shieldFloat 6s ease-in-out infinite;
        filter:
            drop-shadow(0 0 40px rgba(139, 92, 246, 0.35))
            drop-shadow(0 0 70px rgba(59, 130, 246, 0.25))
            drop-shadow(0 30px 80px rgba(15, 23, 42, 0.12));
        transition:
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            filter 0.4s ease;
    }

    .protection-center:hover .center-shield {
        transform: translateY(-6px);
    }

    /* Column header */
    .column-header {
        display: flex;
        gap: 14px;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Protection list */
    .protection-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Individual protection items — card style */
    .protection-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
        background: var(--surface);
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
        position: relative;
        transition: box-shadow var(--transition), transform var(--transition);
    }

    .protection-item:hover {
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .protection.show .protection-item:hover {
        transform: translateY(-2px);
    }

    /* Connector line + dot — DLP side pointing right */
    .protection-item::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -36px;
        width: 32px;
        height: 0;
        border-top: 2px dotted rgba(139, 92, 246, 0.45);
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
    }

    .protection-item::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -42px;
        width: 8px;
        height: 8px;
        background: #8B5CF6;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
    }

    /* WAF side connectors point left */
    .waf-column .protection-item::after {
        left: -36px;
        right: auto;
        border-top-color: rgba(59, 130, 246, 0.45);
    }

    .waf-column .protection-item::before {
        left: -42px;
        right: auto;
        background: #3B82F6;
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
    }

    .benefit-item,
    .protection-item {
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        transform: translateY(14px);
    }

    .protection.show .protection-item,
    .protection.show .benefit-item {
        opacity: 1;
        transform: translateY(0);
    }

    .protection.show .protection-item:nth-child(1) { transition-delay: 0.34s; }
    .protection.show .protection-item:nth-child(2) { transition-delay: 0.42s; }
    .protection.show .protection-item:nth-child(3) { transition-delay: 0.50s; }
    .protection.show .protection-item:nth-child(4) { transition-delay: 0.58s; }

    .protection.show .benefit-item:nth-child(1) { transition-delay: 0.46s; }
    .protection.show .benefit-item:nth-child(2) { transition-delay: 0.52s; }
    .protection.show .benefit-item:nth-child(3) { transition-delay: 0.58s; }
    .protection.show .benefit-item:nth-child(4) { transition-delay: 0.64s; }

    /* ─── Insider Threats ─── */

    .protection-insider {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.05) 100%);
        border: 1px solid rgba(16, 185, 129, 0.2);
        border-radius: 16px;
        padding:18px 24px;
        gap:24px;
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .insider-header {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }

    .insider-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: #fff;
        border-radius: 50%;
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    }

    .insider-header h3,
    .insider-text h3 {
        font-size: var(--text-xl);
        font-weight: 700;
        color: #047857;
        margin: 0 0 8px 0;
        letter-spacing: -0.01em;
    }

    .insider-text p {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.6;
        margin: 0;
    }

    .insider-benefits {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 32px;
        flex-shrink: 0;
    }

    .benefit-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text);
        line-height: 1.5;
    }

    .checkmark {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        color: white;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    }

    /* ─── Responsive Protection Layout ─── */

    @media (max-width: 1200px) {
        .protection-panel {
            padding: 32px 28px 24px;
        }

        .protection-dual-layout {
            grid-template-columns: minmax(0, 1fr) 500px minmax(0, 1fr);
            gap: 24px;
        }

        .protection-item::after,
        .protection-item::before,
        .waf-column .protection-item::after,
        .waf-column .protection-item::before {
            display: none;
        }

        .protection-insider {
            flex-direction: column;
            gap: 24px;
            padding: 24px;
        }

        .insider-benefits {
            width: 100%;
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 900px) {
        .protection-panel {
            padding: 28px 20px 20px;
            border-radius: 20px;
        }

        .protection-dual-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .protection-center {
            order: -1;
            min-height: 200px;
        }

        .insider-benefits {
            grid-template-columns: 1fr;
        }
    }

    /* ─── Risks ─── */

    .risks {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(ellipse 42% 72% at 8% 80%, rgba(46, 204, 160, 0.12), transparent 62%),
            radial-gradient(ellipse 65% 70% at 60% 0%, rgba(29, 78, 216, 0.07), transparent 58%),
            linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
    }

    .risks::before {
        content: "";
        position: absolute;
        left: -72px;
        bottom: -110px;
        width: 420px;
        height: 300px;
        background:
            linear-gradient(145deg, rgba(46, 204, 160, 0.12), rgba(29, 78, 216, 0.06)),
            linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
        clip-path: polygon(12% 58%, 50% 34%, 88% 58%, 88% 78%, 50% 100%, 12% 78%);
        opacity: 0.45;
        pointer-events: none;
    }

    .risks-layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(260px, 0.78fr) minmax(0, 2.22fr);
        align-items: stretch;
        gap: 32px;
    }

    .risks-intro {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 360px;
        padding: 8px 0 120px;
        overflow: hidden;
    }

    .risks-intro .section-badge {
        position: relative;
        z-index: 2;
        align-self: flex-start;
        margin-bottom: 18px;
        background: rgba(209, 250, 229, 0.78);
        border-color: rgba(46, 204, 160, 0.22);
        color: #0F8C72;
    }

    .risks-intro .section-header {
        align-self: flex-start;
    }

    .risks-intro .section-title {
        position: relative;
        z-index: 2;
        max-width: 420px;
        margin-bottom: 18px;
        text-align: left;
        font-size: 2.75rem;
        letter-spacing: 0;
    }

    .risks-intro .section-subtitle {
        position: relative;
        z-index: 2;
        max-width: 390px;
        margin: 0;
        text-align: left;
        font-size: var(--text-base);
        line-height: 1.8;
    }

    .risk-intro-bg {
        position: absolute;
        left: 0;
        right: -28px;
        bottom: -18px;
        width: min(470px, 118%);
        height: 210px;
        max-width: none;
        object-fit: cover;
        object-position: right bottom;
        opacity: 0.5;
        pointer-events: none;
        user-select: none;
    }

    .risks-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .risks-grid > * {
        min-width: 0;
    }

    .risk-card {
        position: relative;
        min-height: 360px;
        padding: 24px 24px 28px;
        overflow: hidden;
        border-radius: var(--radius-md);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            0 18px 42px rgba(15, 23, 42, 0.08);
    }
    .risk-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(29,78,216,0.03), transparent);
        transition: left 0.6s;
        pointer-events: none;
    }
    .risk-card:hover::before { left: 100%; }

    .risk-badge-icon {
        position: absolute;
        z-index: 2;
        top: 24px;
        left: 24px;
        width: 44px;
        height: 44px;
        filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.08));
        pointer-events: none;
        user-select: none;
    }

    .risk-image {
        display: block;
        width: calc(100% + 54px);
        max-width: none;
        height: 154px;
        margin: -18px -27px 18px -3px;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
        user-select: none;
    }

    .risk-card h3 {
        position: relative;
        z-index: 2;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 14px;
        line-height: 1.2;
        color: var(--primary);
    }

    .risk-card p {
        position: relative;
        z-index: 2;
        color: var(--text-muted);
        font-size: 16px;
        line-height: 1.15;
    }

    .risk-card-stat {
        position: relative;
        z-index: 2;
        margin: 14px 0 0;
        padding: 12px 14px;
        border-radius: var(--radius-md);
        background: var(--accent-light);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .risk-card-stat:has(.stat-num--red) {
        background: rgba(239, 68, 68, 0.08);
    }

    .risk-card-stat:has(.stat-num--amber) {
        background: rgba(245, 158, 11, 0.08);
    }

    .risk-card-stat:has(.stat-num--blue) {
        background: rgba(59, 130, 246, 0.08);
    }

    .risk-card-stat .risk-stat-value {
        font-size: clamp(1.15rem, 1.5vw, 1.4rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
        white-space: nowrap;
    }

    .risk-card-stat .risk-stat-label {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.3;
        font-weight: 500;
    }

    .risk-stat-value.stat-num--red {
        color: #EF4444;
    }

    .risk-stat-value.stat-num--amber {
        color: #F59E0B;
    }

    .risk-stat-value.stat-num--blue {
        color: #3B82F6;
    }

    /* ─── Consequences list with SVG icons ─── */

    .consequences-label {
        position: relative;
        z-index: 2;
        display: block;
        margin: 14px 0 10px;
        font-size: var(--text-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #64748B;
    }

    .consequences-list {
        position: relative;
        z-index: 2;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .consequences-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
        line-height: 1.4;
        color: #475569;
    }

    .risk-li-icon {
        flex-shrink: 0;
        display: block;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .risk-icon-box {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        border: 1.5px solid;
        margin-top: 0;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }

    .risk-card:hover .risk-icon-box {
        transform: scale(1.15) rotate(-8deg);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* ─── Advantage card list items with SVG icons ─── */

    .advantage-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 18px;
    }

    .advantage-card ul li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
        line-height: 1.5;
        color: #475569;
        transition: transform 0.25s ease, color 0.25s ease;
    }

    .advantage-card:hover ul li {
        color: #1e293b;
    }

    .adv-li-icon {
        flex-shrink: 0;
        margin-top: 3px;
        width: 22px;
        height: 22px;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .adv-li-icon path,
    .adv-li-icon circle,
    .adv-li-icon rect,
    .adv-li-icon line,
    .adv-li-icon polyline {
        stroke-width: 2.5 !important;
    }

    .advantage-card:hover .adv-li-icon {
        transform: scale(1.2) rotate(10deg);
    }

    /* ─── Fade-in animation for list items ─── */

    .fade-list-item {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fade-list-item.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* ─── Solutions ─── */

    .solutions {
        background: var(--background);
    }

    .solutions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .solutions-grid > * {
        min-width: 0;
    }

    .solution-card {
        overflow: hidden;
    }

    .solution-content {
        padding: 36px;
    }

    .solution-label {
        display: inline-flex;
        align-items: center;
        background: var(--accent-light);
        border: 1px solid rgba(29, 78, 216, 0.1);
        color: var(--secondary);
        padding: 5px 12px;
        border-radius: 999px;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .solution-card h3 {
        font-size: var(--text-2xl);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
        color: var(--primary);
    }

    .solution-card p {
        color: var(--text-muted);
        font-size: var(--text-sm);
        margin-bottom: 24px;
        line-height: 1.7;
    }

    .solution-card ul {
        list-style: none;
        margin-bottom: 28px;
    }

    .solution-card ul li {
        padding-left: 24px;
        position: relative;
        margin-bottom: 10px;
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.6;
    }

    .solution-card ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--secondary);
    }

    /* ─── Stats ─── */

    .stats {
        background: var(--surface);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .stats-grid > * {
        min-width: 0;
    }

    .stat-card {
        text-align: center;
        padding: 40px 24px;
    }

    .stat-card h3 {
        font-size: clamp(2rem, 4vw, 2.75rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--secondary);
        margin-bottom: 8px;
        line-height: 1;
    }

    .stat-card p {
        color: var(--text-muted);
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
        line-height: 1.5;
    }

    /* Compound selector (higher specificity) so this legibility floor wins
       over the 0.75rem (12px) mobile override in responsive.css. */
    .stats .stat-card p {
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
    }

    /* ───────── Advantages ───────── */

    .advantages {
        position: relative;
        background: linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f7fc 100%
        );
        overflow: hidden;
        padding: 120px 0;
    }

    /* декоративный фон */

    .advantages::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at 20% 30%, rgba(59,130,246,.08) 2px, transparent 2px),
            radial-gradient(circle at 80% 70%, rgba(59,130,246,.08) 2px, transparent 2px);
        background-size: 220px 220px;
        pointer-events: none;
    }

    .advantages-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 60px;
    }

    .advantages-grid > * {
        min-width: 0;
    }

    .advantage-card {
        background: #fff;
        border: 1px solid rgba(15,23,42,.05);
        border-radius: 28px;
        padding: 34px;
        box-shadow: 0 10px 30px rgba(15,23,42,.05);
        transition: transform 0.35s cubic-bezier(0.34,1.56,.64,1), box-shadow .3s;
        position: relative;
        overflow: hidden;
    }
    .advantage-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(37,99,235,0.03), transparent);
        transition: left 0.6s;
        pointer-events: none;
    }
    .advantage-card:hover::before { left: 100%; }

    .advantage-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(37,99,235,.12);
    }

    /* синяя полоска снизу */

    .advantage-card::after {
        content: "";
        position: absolute;
        left: 34px;
        bottom: 26px;
        width: 46px;
        height: 4px;
        border-radius: 10px;
        background: #2563eb;
        transition: width 0.3s;
    }
    .advantage-card:hover::after {
        width: 60px;
    }

    .advantage-top {
        margin-bottom: 16px;
    }

    .advantage-icon {
        width: clamp(46px, 4vw, 58px);
        height: clamp(46px, 4vw, 58px);
        border-radius: 50%;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.4s, background 0.4s, color 0.4s;
    }
    .advantage-card:hover .advantage-icon {
        transform: scale(1.12) rotate(360deg);
        background: #2563eb;
    }
    .advantage-card:hover .advantage-icon i {
        color: #fff;
    }

    .advantage-icon i {
        font-size: clamp(19px, 1.7vw, 24px);
        color: #2563eb;
        transition: color 0.4s;
    }

    .advantage-card h3 {
        color: #071b45;
        font-size: 1.655rem;
        line-height: 1.3;
        margin-bottom: 35px;
        font-weight: 800;
        display: flex;
        align-items: center;
        transition: color 0.3s;
    }
    .advantage-card:hover h3 {
        color: #2563eb;
    }

    .advantage-card p {
        color: #64748b;
        font-size: 1.11rem;
        line-height: 1.1;
        margin-bottom: 24px;
    }

    .advantage-card p .hl {
        color: #1e293b;
        font-weight: 700;
    }
    .advantages-bottom {
        margin-top: 40px;
        background: #fff;
        border-radius: 24px;
        padding: 24px 32px;
        display: flex;
        align-items: center;
        gap: 20px;
        box-shadow: 0 10px 30px rgba(15,23,42,.05);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .advantages-bottom:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(15,23,42,.08);
    }

    .advantages-bottom-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #eff6ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2563eb;
    }

    .advantages-bottom p {
        margin: 0;
        font-size: 1.15rem;
        color: #1e293b;
    }

    .advantages-bottom span {
        color: #2563eb;
        font-weight: 700;
    }

    /* ─── Process ─── */

    .text-gradient {
        background: linear-gradient(135deg, var(--secondary) 0%, #3B82F6 45%, #60A5FA 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .process {
        background: var(--surface);
    }

    .process-timeline {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .process-timeline > * {
        min-width: 0;
    }

    .process-step {
        padding: 32px;
    }

    .step-number {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-sm);
        background: linear-gradient(180deg, var(--secondary) 0%, #1E3A8A 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    }

    .process-step h3 {
        font-size: var(--text-xl);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin-bottom: 10px;
        color: var(--primary);
    }

    .process-step p {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.7;
    }

    /* ─── Process showcase (index) ─── */

    .process-showcase {
        position: relative;
        overflow: hidden;
        background: #FFFFFF;
    }

    .process-showcase-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .process-showcase-mesh {
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at center, rgba(37, 99, 235, 0.18) 1px, transparent 1px);
        background-size: 28px 28px;
        opacity: 0.35;
        mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 10%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 10%, transparent 75%);
    }

    .process-showcase-glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
    }

    .process-showcase-glow--left {
        width: 420px;
        height: 420px;
        top: 10%;
        left: -8%;
        background: rgba(59, 130, 246, 0.12);
        animation: processGlowDrift 8s ease-in-out infinite alternate;
    }

    .process-showcase-glow--right {
        width: 360px;
        height: 360px;
        top: 30%;
        right: -6%;
        background: rgba(37, 99, 235, 0.1);
        animation: processGlowDrift 10s ease-in-out infinite alternate-reverse;
    }

    .process-showcase .container {
        position: relative;
        z-index: 1;
    }

    .process-flow {
        position: relative;
        margin-bottom: 48px;
    }

    .process-wave {
        position: absolute;
        top: 48px;
        left: 0;
        width: 100%;
        height: 155px;
        z-index: 0;
        pointer-events: none;
    }

    .process-wave-line {
        stroke-dasharray: 1200;
        stroke-dashoffset: 1000;
        transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .process-showcase.show .process-wave-line {
        stroke-dashoffset: 0;
    }

    .process-wave-dot {
        opacity: 0;
        transform-origin: center;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .process-showcase.show .process-wave-dot {
        opacity: 1;
        animation: processDotPulse 2.4s ease-in-out infinite;
    }

    .process-showcase.show .process-wave-dot:nth-child(4) { transition-delay: 0.3s; animation-delay: 0s; }
    .process-showcase.show .process-wave-dot:nth-child(5) { transition-delay: 0.6s; animation-delay: 0.4s; }
    .process-showcase.show .process-wave-dot:nth-child(6) { transition-delay: 0.9s; animation-delay: 0.8s; }
    .process-showcase.show .process-wave-dot:nth-child(7) { transition-delay: 1.2s; animation-delay: 1.2s; }
    .process-showcase.show .process-wave-dot:nth-child(8) { transition-delay: 1.5s; animation-delay: 1.6s; }

    .process-timeline--showcase {
        position: relative;
        z-index: 1;
        grid-template-columns: repeat(6, 1fr);
        display:flex;
        justify-content:center;
        gap:40px;
    }

    .process-showcase .process-step {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 12px 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .process-showcase .process-step:hover {
        transform: none;
        box-shadow: none;
        border-color: transparent;
    }

    .process-showcase .step-number {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 0.75rem;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
        animation: stepNumberFloat 3s ease-in-out infinite;
    }

    .process-showcase .process-step:nth-child(1) .step-number { animation-delay: 0s; }
    .process-showcase .process-step:nth-child(2) .step-number { animation-delay: 0.5s; }
    .process-showcase .process-step:nth-child(3) .step-number { animation-delay: 1s; }
    .process-showcase .process-step:nth-child(4) .step-number { animation-delay: 1.5s; }
    .process-showcase .process-step:nth-child(5) .step-number { animation-delay: 2s; }
    .process-showcase .process-step:nth-child(6) .step-number { animation-delay: 2.5s; }

    .step-icon-wrap {
        position: relative;
        width: 120px;
        height: 120px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .step-icon-glow {
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
        opacity: 0.6;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .step-icon {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 244, 255, 0.65) 100%);
        border: 1px solid rgba(37, 99, 235, 0.15);
        box-shadow:
            0 8px 32px rgba(37, 99, 235, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition:
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.4s ease,
            border-color 0.4s ease;
        animation: stepIconFloat 4s ease-in-out infinite;
    }

    .process-showcase .process-step:nth-child(1) .step-icon { animation-delay: 0s; }
    .process-showcase .process-step:nth-child(2) .step-icon { animation-delay: 0.8s; }
    .process-showcase .process-step:nth-child(3) .step-icon { animation-delay: 1.6s; }
    .process-showcase .process-step:nth-child(4) .step-icon { animation-delay: 2.4s; }
    .process-showcase .process-step:nth-child(5) .step-icon { animation-delay: 3.2s; }
    .process-showcase .process-step:nth-child(6) .step-icon { animation-delay: 4s; }

    .process-showcase .process-step:hover .step-icon {
        transform: translateY(-10px) scale(1.05);
        border-color: rgba(37, 99, 235, 0.3);
        box-shadow:
            0 16px 48px rgba(37, 99, 235, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
        animation-play-state: paused;
    }

    .process-showcase .process-step:hover .step-icon-glow {
        opacity: 1;
        transform: scale(1.15);
    }

    .process-showcase .process-step h3 {
        font-size: var(--text-lg);
        margin-bottom: 8px;
    }

    .process-showcase .process-step p {
        max-width: 220px;
        margin: 0 auto;
        line-height: 1.65;
    }

    .process-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
    }

    .process-showcase.show .process-features {
        opacity: 1;
        transform: translateY(0);
    }

    .process-feature {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 24px 20px;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--primary);
        position: relative;
        transition: background 0.3s;
    }
    .process-feature:hover {
        background: var(--accent-light);
    }

    .process-feature:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: var(--border);
    }

    .process-feature-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease, background 0.3s ease;
    }

    .process-feature:hover .process-feature-icon {
        transform: scale(1.08);
        background: rgba(37, 99, 235, 0.12);
    }

    /* ─── Partners marquee ─── */

    .partners {
        background: var(--background);
        overflow: hidden;
        padding: clamp(16px, 2.5dvh, 40px) 0 !important;
    }

    .partners-marquee {
        position: relative;
        overflow: hidden;
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }

    .partners-marquee:hover .partners-track {
        animation-play-state: paused;
    }

    .partners-track {
        display: flex;
        gap: 16px;
        width: max-content;
        animation: partnersMarquee 40s linear infinite;
    }

    .partner-logo {
        flex-shrink: 0;
        min-width: 180px;
        height: 80px;
        padding: 0 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .partner-logo:hover {
        transform: none;
        color: var(--text);
    }

    /* ─── Cases ─── */

    .cases {
        background: var(--surface);
    }

    .cases-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .cases-grid > * {
        min-width: 0;
    }

    .case-card {
        padding: 32px;
        display: flex;
        flex-direction: column;
    }

    .case-card-stat {
        margin-top: auto;
        padding-top: 20px;
        border-top: 1px solid var(--border-subtle);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .case-card-stat .stat-num {
        font-size: clamp(1.6rem, 2.5vw, 2.2rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .case-card-stat .stat-num--purple {
        background: linear-gradient(135deg, #7C3AED, #A78BFA);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .case-card-stat .stat-num--blue {
        background: linear-gradient(135deg, #2563EB, #60A5FA);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .case-card-stat .stat-num--green {
        background: linear-gradient(135deg, #059669, #34D399);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .case-card-stat .stat-label {
        font-size: var(--text-sm);
        color: var(--text-muted);
        line-height: 1.4;
        font-weight: 500;
    }

    .case-card {
        position: relative;
        overflow: hidden;
    }

    .case-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, var(--secondary), var(--accent));
        border-radius: 3px 0 0 3px;
        opacity: 0;
        transition: opacity var(--transition);
    }
    .case-card:hover::before {
        opacity: 1;
    }
    .case-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(29,78,216,0.03), transparent);
        transition: left 0.6s;
        pointer-events: none;
    }
    .case-card:hover::after { left: 100%; }

    .case-card h3 {
        font-size: var(--text-xl);
        font-weight: 800;
        letter-spacing: -0.003em;
        margin-bottom: 22px;
        color: var(--primary);
    }

    .case-card p {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.7;
    }

    /* ─── Contact (updated) ─── */

    .contact {
        background: var(--background);
    }

    .contact-wrapper {
        display: grid;
        grid-template-columns: 1fr 520px;
        gap: 10px;
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: 50px;
        box-shadow: var(--shadow-md);
    }

    .contact-wrapper > * {
        min-width: 0;
    }

    .contact-content {
        text-align: left;
        max-width: 520px;
        margin: 0;
    }
    .contact-form {
        width: 100%;
    }

    .contact-note {
        grid-column: 2;
        text-align: center;
    }
    .contact-content h2 {
        font-size: var(--text-3xl);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--primary);
        margin-bottom: 12px;
    }

    .contact-content p {
        color: var(--text-muted);
        font-size: var(--text-base);
        line-height: 1.7;
    }

    /* Поля — в столбец */
    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .contact-field-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    /* Адаптивность: на больших экранах — две колонки */
    @media (min-width: 768px) {
        .contact-field-group {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 16px;
        }
    }

    .contact-form input {
        height: 48px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0 16px;
        font-family: inherit;
        font-size: var(--text-sm);
        color: var(--text);
        background: var(--background);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
        width: 100%;
        box-sizing: border-box;
    }

    .contact-form input::placeholder {
        color: var(--text-light);
    }

    .contact-form input:focus {
        border-color: rgba(29, 78, 216, 0.4);
        background: var(--surface);
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
    }

    /* Состояние ошибки */
    .contact-form input.input-error {
        border-color: rgba(220, 38, 38, 0.5);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    }

    .contact-submit-btn {
        height: 48px;
        width: 100%;
        font-size: var(--text-sm);
        font-weight: 600;
    }

    .contact-submit-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .contact-note {
        margin-top: 0px;
        text-align: center;
        color: var(--text-light);
        font-size: var(--text-xs);
    }

    /* Compound selector (higher specificity) so this legibility floor wins
       over the 0.7rem (~11px) mobile override in responsive.css — that
       value reads as too small for a disclaimer users are meant to read. */
    .contact .contact-note {
        font-size: clamp(0.8125rem, 0.8vw, 0.875rem);
    }

    /* ─── reCAPTCHA (shared across every lead form) ─── */
    .form-captcha-group {
        margin: 4px 0 8px;
    }

    .form-captcha-group .g-recaptcha > div {
        margin: 0 auto;
    }

    .form-captcha-error {
        display: none;
        margin-top: 6px;
        color: #ef4444;
        font-size: var(--text-xs);
        font-weight: 600;
        text-align: center;
    }

    /* ─── Success Modal ─── */

    .success-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 22, 40, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        justify-content: center;
        align-items: center;
        z-index: 9999;
        animation: modalBgIn 0.25s ease;
    }

    .success-modal.visible {
        display: flex;
    }

    .success-modal-content {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        padding: 48px 40px;
        border-radius: var(--radius-lg);
        width: 440px;
        max-width: 92%;
        text-align: center;
        box-shadow: var(--shadow-lg);
        animation: modalContentIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .success-modal-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #10B981, #059669);
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28);
        animation: pulseGlow 2s ease-in-out infinite;
    }

    .success-modal-content h3 {
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 12px;
        letter-spacing: -0.02em;
    }

    .success-modal-content p {
        color: var(--text-muted);
        font-size: var(--text-sm);
        line-height: 1.7;
        margin-bottom: 28px;
    }

    /* ─── Responsive Contact ─── */

    @media (max-width: 600px) {
        .contact-field-group {
            grid-template-columns: 1fr;
        }

        .contact-wrapper {
            padding: 28px 20px;
        }
    }
    /* ─── Footer ─── */

    .footer {
        background: var(--primary);
        color: rgba(255, 255, 255, 0.85);
        padding: 48px 0 40px;
    }

    .footer-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        gap: 24px;
    }

    .footer-logo img {
        height: 36px;
        display: block;
        opacity: 0.95;
    }

    .footer-nav {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
    }

    .footer-nav a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: var(--text-sm);
        font-weight: 500;
        transition: color var(--transition), transform 0.3s;
        position: relative;
    }
    .footer-nav a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 1px;
        background: rgba(255,255,255,0.5);
        transition: width 0.3s;
    }
    .footer-nav a:hover::after {
        width: 100%;
    }

    .footer-nav a:hover {
        color: #fff;
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 24px;
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.55);
    }

    /* ─── Footer v2 (matching waf.html style) ─── */
    .footer--main {
        background: #020617 !important;
        border-top: 1px solid rgba(0, 210, 255, 0.08) !important;
        padding: 56px 0 32px !important;
    }

    .footer--main .footer-top {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
        gap: 40px;
        align-items: start;
        margin-bottom: 36px;
    }

    .footer--main .footer-brand {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .footer--main .footer-logo img {
        height: 34px;
        filter: brightness(0) invert(1);
    }

    .footer--main .footer-tagline {
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.45);
        margin: 0;
    }

    .footer--main .footer-socials {
        display: flex;
        gap: 10px;
        margin-top: 4px;
    }

    .footer--main .footer-social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .footer--main .footer-social-link:hover {
        background: rgba(0, 210, 255, 0.12);
        border-color: rgba(0, 210, 255, 0.3);
        color: #00d2ff;
        transform: translateY(-2px);
    }

    .footer--main .footer-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .footer--main .footer-col-title {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0;
    }

    .footer--main .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer--main .footer-nav a {
        color: rgba(255, 255, 255, 0.45);
        font-size: 13px;
        text-decoration: none;
        transition: color 0.25s ease, transform 0.25s ease;
        display: inline-block;
        width: fit-content;
        padding: 0;
        background: none;
    }

    .footer--main .footer-nav a::after {
        display: none;
    }

    .footer--main .footer-nav a:hover {
        color: #00d2ff;
        transform: translateX(4px);
    }

    .footer--main .footer-contact {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .footer--main .footer-contact-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.4;
    }

    .footer--main .footer-contact-item svg {
        flex-shrink: 0;
        color: rgba(0, 210, 255, 0.6);
    }

    .footer--main .footer-contact-item span {
        color: rgba(255, 255, 255, 0.55);
    }

    .footer--main .footer-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.15), transparent);
        margin-bottom: 20px;
    }

    .footer--main .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.3);
        border-top: none;
        padding-top: 0;
    }

    .footer--main .footer-bottom span {
        color: rgba(255, 255, 255, 0.3);
    }

    @media (max-width: 1024px) {
        .footer--main .footer-top {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        .footer--main .footer-brand {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 768px) {
        .footer--main .footer-top {
            grid-template-columns: 1fr;
            gap: 28px;
        }
        .footer--main .footer-bottom {
            flex-direction: column;
            text-align: center;
        }
    }

    /* ─── Scroll animations ─── */

    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fade-up.show {
        opacity: 1;
        transform: translateY(0);
    }

    .hero.fade-up {
        opacity: 1;
        transform: none;
    }

    .hero.fade-up .hero-content {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
    }

    .hero.fade-up .hero-image {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
    }

    /* ─── Stagger items ─── */

    .stagger-item {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow var(--transition),
            border-color var(--transition);
    }

    .fade-up.show .stagger-item {
        opacity: 1;
        transform: translateY(0);
    }

    .fade-up.show .stagger-item:nth-child(1) { transition-delay: 0.04s; }
    .fade-up.show .stagger-item:nth-child(2) { transition-delay: 0.08s; }
    .fade-up.show .stagger-item:nth-child(3) { transition-delay: 0.12s; }
    .fade-up.show .stagger-item:nth-child(4) { transition-delay: 0.16s; }
    .fade-up.show .stagger-item:nth-child(5) { transition-delay: 0.20s; }
    .fade-up.show .stagger-item:nth-child(6) { transition-delay: 0.24s; }
    .fade-up.show .stagger-item:nth-child(7) { transition-delay: 0.28s; }
    .fade-up.show .stagger-item:nth-child(8) { transition-delay: 0.32s; }

    .fade-up.show .protection-card.stagger-item:hover,
    .fade-up.show .risk-card.stagger-item:hover,
    .fade-up.show .advantage-card.stagger-item:hover,
    .fade-up.show .stat-card.stagger-item:hover,
    .fade-up.show .process-step.stagger-item:hover,
    .fade-up.show .case-card.stagger-item:hover,
    .fade-up.show .solution-card.stagger-item:hover {
        transform: translateY(-4px);
    }

    /* ─── Product pages ─── */

    .page-hero {
        padding: 64px 0 80px;
        min-height: auto;
    }

    .page-hero .hero-container {
        grid-template-columns: 1fr 1fr;
        max-width: var(--container);
    }

    .page-hero .hero-visual {
        max-width: 520px;
        min-height: 360px;
    }

    .page-hero .hero-visual img,
    .page-hero .hero-image > img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        max-height: clamp(280px, 38vw, 560px);
        object-fit: contain;
        object-position: center;
        animation: none;
    }

    .page-hero .hero-float-card {
        display: none;
    }

    /* ===== Protection section enhancements ===== */

    .center-shield{
        animation:shieldFloat 6s ease-in-out infinite;
        filter:
            drop-shadow(0 0 25px rgba(139,92,246,.25))
            drop-shadow(0 0 45px rgba(59,130,246,.18));
    }

    .center-ring{
        animation:ringRotate 20s linear infinite;
    }

    .center-ring--2{
        animation-duration:28s;
        animation-direction:reverse;
    }

    .center-ring--3{
        animation-duration:40s;
    }

    .protection-item::before{
        animation:pulseDot 2s infinite;
    }

    /* ========================================================================
    Protection section v2 — network + radar animation
    ======================================================================== */

    .protection-panel {
        position: relative;
        overflow: hidden;
    }

    .protection-dual-layout {
        position: relative;
        isolation: isolate;
    }

    .protection-network {
        position: absolute;
        inset: -40px -38px -22px -38px;
        width: calc(100% + 76px);
        height: calc(100% + 62px);
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transform: scale(0.985);
        transition: opacity 0.85s ease, transform 0.85s ease;
    }

    .protection.show .protection-network {
        opacity: 1;
        transform: scale(1);
    }

    .protection-network .network-path {
        fill: none;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: url(#networkGlow);
        stroke-dasharray: 1 12;
        stroke-dashoffset: 0;
        opacity: 0.95;
        animation: networkDash 12s linear infinite;
    }

    .protection-network .network-path--purple {
        stroke: url(#networkPurple);
    }

    .protection-network .network-path--blue {
        stroke: url(#networkBlue);
    }

    .protection-network .network-node {
        filter: url(#networkGlow);
        transform-origin: center;
        animation: nodePulse 2.8s ease-in-out infinite;
    }

    .protection-network .network-node--purple {
        fill: #A855F7;
    }

    .protection-network .network-node--blue {
        fill: #3B82F6;
    }

    .protection-network .network-particle {
        filter: url(#networkGlow);
        animation: particlePulse 1.8s ease-in-out infinite;
    }

    .protection-network .network-particle--purple {
        opacity: 0.95;
    }

    .protection-network .network-particle--blue {
        opacity: 0.95;
    }

    .protection-center {
        z-index: 3;
        min-height: 450px;
    }

    .center-glow {
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.14) 0%, rgba(59, 130, 246, 0.08) 42%, transparent 72%);
    }

    .center-rings {
        z-index: 1;
    }

    .center-ring {
        animation: ringRotate 18s linear infinite;
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
    }

    .center-ring--1 {
        width: 180px;
        height: 180px;
    }

    .center-ring--2 {
        width: 250px;
        height: 250px;
        border-style: dashed;
        border-color: rgba(148, 163, 184, 0.13);
        animation-direction: reverse;
        animation-duration: 28s;
    }

    .center-ring--3 {
        width: 320px;
        height: 320px;
        border-color: rgba(148, 163, 184, 0.08);
        animation-duration: 36s;
    }

    .center-shield {
        max-width: 500px;
        filter:
            drop-shadow(0 0 24px rgba(139, 92, 246, 0.30))
            drop-shadow(0 0 48px rgba(59, 130, 246, 0.20))
            drop-shadow(0 24px 56px rgba(15, 23, 42, 0.10));
        animation: shieldFloat 6s ease-in-out infinite;
    }

    .protection.show .dlp-column,
    .protection.show .waf-column {
        transition-property: opacity, transform, filter;
    }

    .dlp-column {
        z-index: 2;
    }

    .waf-column {
        z-index: 2;
    }

    .column-header {
        margin-bottom: 18px;
    }

    .protection-item {
        padding: 14px 16px;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease,
            border-color 0.35s ease,
            background 0.35s ease;
    }

    .protection-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
        border-color: rgba(29, 78, 216, 0.14);
    }

    .protection-item::after {
        display: none !important;
    }

    .protection-item::before {
        width: 10px;
        height: 10px;
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.95),
            0 0 0 1px rgba(139, 92, 246, 0.38),
            0 0 16px rgba(139, 92, 246, 0.36);
        animation: pulseDot 2.1s ease-in-out infinite;
    }

    .waf-column .protection-item::before {
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.95),
            0 0 0 1px rgba(59, 130, 246, 0.38),
            0 0 16px rgba(59, 130, 246, 0.36);
    }

    .pitem-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .pitem-content strong {
        font-size: 0.92rem;
    }

    .pitem-content p {
        font-size: 0.84rem;
    }

    .protection-insider {
        margin-top: 6px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(52, 211, 153, 0.06) 100%);
        border: 1px solid rgba(16, 185, 129, 0.20);
        border-radius: 18px;
        padding: 16px 18px;
        gap: 24px;
        min-height: 116px;
        align-items: center;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .insider-header {
        gap: 14px;
        align-items: center;
        min-width: 280px;
        max-width: 330px;
    }

    .insider-icon {
        width: 48px;
        height: 48px;
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.26);
    }

    .insider-header h3,
    .insider-text h3 {
        font-size: 1.04rem;
        margin-bottom: 6px;
    }

    .insider-text p {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    .insider-benefits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 18px;
        flex: 1;
    }

    .benefit-item {
        padding-left: 16px;
        border-left: 1px solid rgba(16, 185, 129, 0.12);
        min-height: 40px;
        align-items: flex-start;
    }

    .benefit-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .benefit-title {
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--text);
        line-height: 1.3;
    }

    .benefit-desc {
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.4;
    }

    .benefit-item:first-child {
        border-left: none;
        padding-left: 0;
    }

    .checkmark {
        width: 21px;
        height: 21px;
    }

    .protection .container {
        max-width: 1600px;
    }

    .protection-center::before {
        content: '';
        position: absolute;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                rgba(139,92,246,.12) 0%,
                rgba(59,130,246,.08) 40%,
                transparent 70%
            );
        animation: pulseGlow 4s ease-in-out infinite;
    }

    /* ─── Center caption (under shield) ─── */
    .center-caption {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(139, 92, 246, 0.18);
        border-radius: 999px;
        padding: 8px 16px;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.3;
        z-index: 4;
    }

    .center-caption svg {
        color: #8B5CF6;
        flex-shrink: 0;
    }

    .center-caption span {
        text-align: left;
    }

    .protection-center {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ================================================================
    Solutions section — three-column with shield
    ================================================================ */

    .solutions-layout {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0 0;
        align-items: center;
        position: relative;
    }

    .solutions-intro {
        grid-column: 1 / -1;
        display: none;
    }

    /* Cards */
    .sol-card {
        background: var(--surface);
        border-radius: 28px;
        padding: 44px 36px 38px;
        border: 1px solid var(--border);
        box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
        transition: box-shadow var(--transition), transform 0.35s cubic-bezier(0.34,1.56,.64,1), border-color var(--transition);
        position: relative;
        z-index: 2;
        overflow: hidden;
    }

    .sol-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #7C3AED, #9B5CFF);
        background-size: 200% 100%;
        animation: borderTravel 3s ease infinite;
    }

    .sol-card--waf::before {
        background: linear-gradient(90deg, #2563EB, #60A5FA);
        background-size: 200% 100%;
        animation: borderTravel 3s ease infinite;
    }

    .sol-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .sol-card--dlp {
        border-color: rgba(139, 92, 246, 0.14);
    }

    .sol-card--waf {
        border-color: rgba(29, 78, 216, 0.14);
    }

    .sol-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 28px;
    }

    .sol-brand {
        display: flex;
        align-items: center;
        gap: 20px;
        min-width: 0;
    }

    .sol-icon {
        width: 68px;
        height: 68px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.4s;
    }
    .sol-card:hover .sol-icon {
        transform: scale(1.08) rotate(-5deg);
    }

    .sol-icon--dlp {
        background: linear-gradient(135deg, rgba(139,92,246,0.16) 0%, rgba(167,139,250,0.08) 100%);
        color: #8B5CF6;
    }

    .sol-icon--waf {
        background: linear-gradient(135deg, rgba(29,78,216,0.12) 0%, rgba(59,130,246,0.08) 100%);
        color: var(--secondary);
    }

    .sol-brand-name {
        color: var(--primary);
        font-size: var(--text-2xl);
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
    }

    .sol-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 76px;
        padding: 8px 16px;
        border-radius: 999px;
        font-size: var(--text-lg);
        font-weight: 800;
        letter-spacing: 0.06em;
        background: rgba(139,92,246,0.12);
        color: #8B5CF6;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .sol-label--waf {
        background: rgba(29,78,216,0.1);
        color: var(--secondary);
    }

    .sol-title {
        font-size: var(--text-2xl);
        font-weight: 800;
        color: var(--primary);
        line-height: 1.2;
        margin: 0 0 18px;
        letter-spacing: 0;
    }

    .sol-desc {
        font-size: var(--text-lg);
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .sol-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 34px;
    }

    .sol-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: var(--text-base);
        color: var(--text);
        font-weight: 500;
        transition: transform 0.3s;
    }
    .sol-list li:hover {
        transform: translateX(6px);
    }

    .sol-list--dlp li svg {
        color: #8B5CF6;
        flex-shrink: 0;
    }

    .sol-list--waf li svg {
        color: var(--secondary);
        flex-shrink: 0;
    }

    .sol-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 15px 24px;
        border-radius: 14px;
        font-size: var(--text-base);
        font-weight: 700;
        text-decoration: none;
        transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    .sol-btn--dlp {
        background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(124,58,237,0.3);
    }

    .sol-btn--dlp:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(124,58,237,0.4);
    }

    .sol-btn--waf {
        background: linear-gradient(135deg, #5dbbf6, #3395dc);
        color: #fff;
        box-shadow: 0 4px 14px rgba(29,78,216,0.3);
    }

    .sol-btn--waf:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(29,78,216,0.4);
    }

    /* Center shield */
    .sol-center {
        position: relative;
        width: 280px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .sol-lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .sol-shield-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        z-index: 2;
    }

    .sol-shield-rings {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sol-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(139,92,246,0.15);
    }

    .sol-ring--1 {
        width: 160px;
        height: 160px;
        animation: ringRotate 18s linear infinite;
    }

    .sol-ring--2 {
        width: 220px;
        height: 220px;
        border-style: dashed;
        border-color: rgba(59,130,246,0.12);
        animation: ringRotate 28s linear infinite reverse;
    }

    .sol-shield-glow {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139,92,246,0.18) 0%, rgba(59,130,246,0.10) 50%, transparent 75%);
        pointer-events: none;
    }

    .sol-shield-img {
        width: 200px;
        position: relative;
        z-index: 2;
        filter:
            drop-shadow(0 0 20px rgba(139,92,246,0.35))
            drop-shadow(0 0 40px rgba(59,130,246,0.20));
        animation: shieldFloat 6s ease-in-out infinite;
    }

    .sol-shield-caption {
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(139,92,246,0.18);
        border-radius: 999px;
        padding: 6px 14px;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(15,23,42,0.08);
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.3;
        z-index: 4;
    }

    .sol-shield-caption svg {
        color: #8B5CF6;
        flex-shrink: 0;
    }

    /* Responsive */
    @media (max-width: 1100px) {
        .sol-center {
            width: 220px;
        }
    }

    @media (max-width: 900px) {
        .solutions-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .sol-card {
            padding: 34px 24px 30px;
            border-radius: 24px;
        }

        .sol-card-header {
            margin-bottom: 22px;
        }

        .sol-icon {
            width: 58px;
            height: 58px;
            border-radius: 16px;
        }

        .sol-brand {
            gap: 14px;
        }

        .sol-brand-name {
            font-size: var(--text-xl);
        }

        .sol-label {
            min-width: 66px;
            padding: 7px 13px;
            font-size: var(--text-base);
        }

        .sol-title {
            font-size: var(--text-xl);
        }

        .sol-desc {
            font-size: var(--text-base);
        }

        .sol-center {
            width: 100%;
            height: 220px;
        }

        .sol-lines {
            display: none;
        }
    }

    .protection-item::before,
    .waf-column .protection-item::before,
    .protection-network .network-node,
    .protection-network .network-particle{
        display:none !important;
    }
    .protection .container {
        max-width: 1600px;
    }

    /* ==================== CONTACT INFO SECTION ==================== */
    .contact-info {
        padding: 80px 0;
        background: var(--background);
    }

    .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .contact-info-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 36px 28px;
        text-align: center;
        transition: transform var(--transition), box-shadow var(--transition);
    }

    .contact-info-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .contact-info-card-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: var(--accent-light);
        color: var(--secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        transition: background var(--transition), color var(--transition);
    }

    .contact-info-card:hover .contact-info-card-icon {
        background: var(--secondary);
        color: #fff;
    }

    .contact-info-card h3 {
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--text);
        margin-bottom: 16px;
        line-height: 1.4;
    }

    .contact-info-link {
        display: block;
        font-size: var(--text-base);
        color: var(--secondary);
        text-decoration: none;
        font-weight: 600;
        margin-bottom: 8px;
        transition: color var(--transition);
    }

    .contact-info-link:hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .contact-info-worktime {
        font-size: var(--text-base);
        color: var(--text-muted);
        font-weight: 500;
    }

    @media (max-width: 900px) {
        .contact-info-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ================================================================
    FULLSCREEN LAYOUT SYSTEM
    Каждая секция занимает ~1 экран по высоте с правильным
    вертикальным центрированием контента.
    ================================================================ */

    /* ─── Root variables scaling ─── */
    :root {
        --section-min-height: 100dvh;
        --section-min-height-fallback: 100vh;
        --section-padding-y: clamp(40px, 6dvh, 80px);
        --container-max: min(92vw, 1800px);
        --container-max-narrow: min(92vw, 1200px);
    }

    /* ─── Section fullscreen base ─── */
    section:not(.header):not(.footer) {
        min-height: var(--section-min-height-fallback);
        min-height: var(--section-min-height);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
    }

    /* Allow sections to grow if content exceeds viewport */
    section:not(.header):not(.footer) {
        min-height: var(--section-min-height-fallback);
        min-height: var(--section-min-height);
        height: auto;
    }

    /* ─── Container widening for large screens ─── */
    .container {
        max-width: var(--container-max-narrow, 1200px);
    }

    /* Protection container is already 1600px */
    .protection .container,
    .solutions .container {
        max-width: var(--container-max, 1800px);
    }

    /* ─── Hero fullscreen ─── */
    .hero {
        min-height: calc(100vh - 72px);
        min-height: calc(100dvh - 72px);
        min-height: calc(100svh - 72px);
        padding: clamp(24px, 4dvh, 48px) 0 clamp(40px, 6dvh, 80px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero .container {
        max-width: min(92vw, 1560px);
    }

    /* ─── Protection fullscreen ─── */
    .protection {
        padding-top: clamp(24px, 3dvh, 48px);
        display: flex;
        align-items: center;
    }

    .protection-panel {
        padding: clamp(24px, 3dvh, 40px) clamp(20px, 2.5vw, 36px) clamp(20px, 2.5dvh, 28px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .protection-dual-layout {
        gap: clamp(16px, 2.5vw, 32px);
    }

    .protection .section-header {
        margin-bottom: clamp(24px, 4dvh, 56px);
    }

    .protection-center {
        min-height: clamp(280px, 30dvh, 450px);
    }

    .center-shield {
        max-width: clamp(320px, 35vw, 560px);
    }

    .center-glow {
        width: clamp(200px, 22vw, 320px);
        height: clamp(200px, 22vw, 320px);
    }

    .protection-center::before {
        width: clamp(400px, 40vw, 700px);
        height: clamp(400px, 40vw, 700px);
    }

    /* ─── Risks fullscreen ─── */
    .risks,
    section.risks {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .risks-layout {
        gap: clamp(16px, 2.5vw, 32px);
    }

    .risks-intro {
        min-height: clamp(260px, 30dvh, 360px);
        padding: 8px 0 clamp(40px, 10dvh, 120px);
    }

    .risks-intro .section-title {
        font-size: clamp(2rem, 3.5vw, 2.75rem);
    }

    .risks-grid {
        gap: clamp(14px, 1.5vw, 22px);
    }

    .risk-card {
        min-height: clamp(280px, 30dvh, 360px);
        padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(20px, 2.5dvh, 28px);
    }

    .risk-card h3 {
        font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    }

    .risk-image {
        height: clamp(110px, 12dvh, 154px);
    }

    /* ─── Solutions fullscreen ─── */
    .sol-card {
        padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px) clamp(28px, 3dvh, 38px);
    }

    .sol-icon {
        width: clamp(52px, 5vw, 68px);
        height: clamp(52px, 5vw, 68px);
    }

    .sol-brand-name {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .sol-title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .sol-desc {
        font-size: clamp(1rem, 1.2vw, 1.125rem);
    }

    .sol-center {
        width: clamp(200px, 18vw, 280px);
    }

    .sol-shield-wrap {
        width: clamp(150px, 14vw, 200px);
        height: clamp(150px, 14vw, 200px);
    }

    .sol-shield-img {
        width: clamp(150px, 14vw, 200px);
    }

    /* ─── Stats fullscreen ─── */
    .stats-grid {
        gap: clamp(14px, 1.5vw, 20px);
    }

    .stat-card {
        padding: clamp(24px, 3dvh, 40px) clamp(16px, 2vw, 24px);
    }

    .stat-card h3 {
        font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    }

    /* ─── Advantages fullscreen ─── */
    .advantages {
        padding: clamp(48px, 8dvh, 120px) 0;
    }

    .advantages-grid {
        gap: clamp(18px, 2vw, 28px);
        margin-top: clamp(28px, 4dvh, 60px);
    }

    .advantage-card {
        padding: clamp(24px, 2.5vw, 34px);
    }

    .advantage-card h3 {
        font-size: clamp(1.25rem, 2vw, 1.655rem);
        margin-bottom: clamp(16px, 3dvh, 35px);
    }

    .advantages-bottom {
        margin-top: clamp(20px, 3dvh, 40px);
        padding: clamp(18px, 2vw, 24px) clamp(20px, 2.5vw, 32px);
    }

    /* ─── Process fullscreen ─── */
    .process-timeline--showcase {
        gap: clamp(20px, 3vw, 40px);
    }

    .step-icon-wrap {
        width: clamp(80px, 8vw, 120px);
        height: clamp(80px, 8vw, 120px);
        margin-bottom: clamp(16px, 2dvh, 24px);
    }

    .process-showcase .step-number {
        width: clamp(30px, 2.5vw, 36px);
        height: clamp(30px, 2.5vw, 36px);
        font-size: clamp(0.65rem, 0.7vw, 0.75rem);
    }

    .process-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-feature {
        padding: clamp(16px, 2dvh, 24px) clamp(14px, 2vw, 20px);
        font-size: clamp(0.8rem, 1vw, 0.875rem);
    }

    /* ─── Partners fullscreen ─── */
    .partner-logo {
        min-width: clamp(140px, 12vw, 180px);
        height: clamp(60px, 6dvh, 80px);
        padding: 0 clamp(16px, 2vw, 28px);
    }

    /* ─── Cases fullscreen ─── */
    .cases-grid {
        gap: clamp(14px, 1.5vw, 20px);
    }

    .case-card {
        padding: clamp(22px, 2.5vw, 32px);
    }

    .case-card h3 {
        font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    }

    /* ─── Contact fullscreen ─── */
    .contact-wrapper {
        padding: clamp(28px, 4vw, 50px);
        grid-template-columns: 1fr minmax(300px, 520px);
        gap: clamp(8px, 2vw, 10px);
    }

    .contact-content h2 {
        font-size: clamp(1.5rem, 3vw, 2.25rem);
    }

    /* ─── Contact-info fullscreen ─── */
    .contact-info {
        padding: clamp(40px, 6dvh, 80px) 0;
    }

    .contact-info-grid {
        gap: clamp(16px, 2vw, 24px);
        margin-top: clamp(20px, 3dvh, 40px);
    }

    .contact-info-card {
        padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 28px);
    }

    /* ─── Footer ─── */
    .footer {
        padding: clamp(32px, 4dvh, 48px) 0 clamp(28px, 3dvh, 40px);
    }

    /* ================================================================
    SMOOTH SCALING FOR LARGE MONITORS
    Используем clamp() для плавного увеличения всего контента
    ================================================================ */

    /* ─── Hero scaling ─── */
    .hero h1 {
        font-size: clamp(2.4rem, 5.1vw, 3.75rem);
    }

    .hero p {
        font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
        margin-bottom: clamp(24px, 3dvh, 36px);
    }

    .hero-content {
        max-width: clamp(480px, 40vw, 580px);
    }

    .hero-container {
        gap: clamp(16px, 3vw, 40px);
    }

    /* ─── Section typography scaling ─── */
    .section-header {
        margin-bottom: clamp(24px, 4dvh, 56px);
        max-width: clamp(560px, 50vw, 720px);
    }

    .section-title {
        font-size: clamp(1.75rem, 3vw, 2.25rem);
    }

    .section-subtitle {
        font-size: clamp(1rem, 1.2vw, 1.125rem);
        max-width: clamp(480px, 45vw, 670px);
    }

    .section-badge {
        font-size: clamp(0.75rem, 0.8vw, 0.8125rem);
        padding: clamp(5px, 0.6vw, 6px) clamp(10px, 1vw, 14px);
    }

    /* ─── Protection inner scaling ─── */
    .col-title {
        font-size: clamp(1rem, 1.8vw, 1.2rem);
    }

    .col-header-icon {
        width: clamp(40px, 3.5vw, 48px);
        height: clamp(40px, 3.5vw, 48px);
    }

    .protection-item {
        padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px);
    }

    .pitem-icon {
        width: clamp(32px, 2.8vw, 40px);
        height: clamp(32px, 2.8vw, 40px);
    }

    .pitem-content strong {
        font-size: clamp(0.85rem, 0.9vw, 0.92rem);
    }

    .pitem-content p {
        font-size: clamp(0.9rem, 0.85vw, 0.95rem);
    }

    /* Compound selector (higher specificity) so this legibility floor wins
       over the ~0.78-0.81rem (~12.5-13px) mobile overrides in responsive.css. */
    .protection .pitem-content p {
        font-size: clamp(0.9rem, 0.85vw, 0.95rem);
    }

    /* ─── Insider scaling ─── */
    .protection-insider {
        padding: clamp(14px, 1.5dvh, 24px) clamp(14px, 1.5vw, 24px);
        gap: clamp(16px, 2vw, 24px);
    }

    .insider-icon {
        width: clamp(40px, 3.5vw, 56px);
        height: clamp(40px, 3.5vw, 56px);
    }

    .insider-header h3,
    .insider-text h3 {
        font-size: clamp(0.95rem, 1.1vw, 1.04rem);
    }

    .insider-text p {
        font-size: clamp(0.78rem, 0.8vw, 0.84rem);
    }

    .benefit-title {
        font-size: clamp(0.85rem, 0.9vw, 0.92rem);
    }

    .benefit-desc {
        font-size: clamp(0.72rem, 0.75vw, 0.78rem);
    }

    /* ─── Solutions inner scaling ─── */
    .sol-card-header {
        margin-bottom: clamp(18px, 2.5dvh, 28px);
    }

    .sol-list {
        gap: clamp(10px, 1.2vw, 16px);
        margin-bottom: clamp(24px, 3dvh, 34px);
    }

    .sol-list li {
        font-size: clamp(0.9rem, 1vw, 1rem);
        gap: clamp(8px, 1vw, 12px);
    }

    .sol-btn {
        padding: clamp(12px, 1.2vw, 15px) clamp(18px, 2vw, 24px);
        font-size: clamp(0.9rem, 1vw, 1rem);
    }

    /* ─── Process inner scaling ─── */
    .process-showcase .process-step h3 {
        font-size: clamp(1rem, 1.2vw, 1.125rem);
    }

    .process-showcase .process-step p {
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
        max-width: clamp(180px, 16vw, 220px);
    }

    /* Compound selector (higher specificity) so this legibility floor wins
       over the 0.8rem (12.8px) mobile override in responsive.css. */
    .process.process-showcase .process-step p {
        font-size: clamp(0.875rem, 0.85vw, 0.9375rem);
    }

    .process-wave {
        height: clamp(150px, 12dvh, 400px);
        top: clamp(24px, 4dvh, 48px);
    }

    .process-flow {
        margin-bottom: clamp(28px, 4dvh, 48px);
    }

    /* ─── Partners inner scaling ─── */
    .partner-logo-img {
        max-width: clamp(80px, 8vw, 120px);
        max-height: clamp(28px, 3dvh, 40px);
    }

    .partners-track {
        gap: clamp(12px, 1.2vw, 16px);
    }

    /* ─── Contact inner scaling ─── */
    .contact-form input {
        height: clamp(42px, 4dvh, 48px);
        font-size: clamp(0.85rem, 0.9vw, 0.875rem);
    }

    .contact-submit-btn {
        height: clamp(42px, 4dvh, 48px);
    }

    .contact-field-group {
        gap: clamp(12px, 1.5dvh, 16px);
    }

    /* ─── Section headers compact spacing ─── */
    .protection .section-header {
        margin-bottom: clamp(16px, 3dvh, 56px);
    }

    /* ─── No large gaps between sections ─── */
    section + section {
        margin-top: 0;
    }

    /* ================================================================
    MEDIA QUERIES — Large and Ultra-wide Monitors
    Плавное масштабирование для 1920+, 2560+, 3440+, 3840+
    ================================================================ */

    /* ─── 1600px+ (bridge) ───
    Most typography/spacing above already scales via clamp()/vw, but those
    clamp() ranges plateau at their ceiling well before 1600px and only
    grow again at the 1920px breakpoint below — leaving 1600-1919px screens
    frozen at the same size as a 1300px laptop. This bridges that gap with
    a conservative (~10-20%) bump that eases into the 1920px values instead
    of jumping abruptly at exactly 1920px. Skips anything already reaching
    its own cap past 1600px. */
    @media (min-width: 1600px) {
        :root {
            --container-max-narrow: min(88vw, 1350px);
        }

        .hero h1 {
            font-size: clamp(3.9rem, 3.7vw, 4.2rem);
        }

        .hero p {
            font-size: clamp(1.15rem, 1.3vw, 1.3rem);
        }

        .section-title {
            font-size: clamp(2.3rem, 2.5vw, 2.6rem);
        }

        .section-subtitle {
            font-size: clamp(1.15rem, 1.1vw, 1.2rem);
        }

        .risks-intro .section-title {
            font-size: clamp(2.8rem, 3vw, 3rem);
        }

        .stat-card h3 {
            font-size: clamp(2.85rem, 3vw, 3.25rem);
        }

        .advantage-card h3 {
            font-size: clamp(1.7rem, 1.7vw, 1.8rem);
        }

        .sol-brand-name,
        .sol-title {
            font-size: clamp(1.55rem, 1.6vw, 1.75rem);
        }

        .sol-desc {
            font-size: clamp(1.15rem, 1.1vw, 1.2rem);
        }
    }

    /* ─── 1920px+ ─── */
    @media (min-width: 1920px) {
        :root {
            --container-max-narrow: min(85vw, 1400px);
            --container-max: min(90vw, 1800px);
        }

        .hero h1 {
            font-size: clamp(2.8rem, 4vw, 4.2rem);
        }

        .hero p {
            font-size: clamp(1.15rem, 1.3vw, 1.35rem);
        }

        .section-title {
            font-size: clamp(2rem, 2.8vw, 2.75rem);
        }

        .section-subtitle {
            font-size: clamp(1.1rem, 1.15vw, 1.25rem);
        }

        .risks-intro .section-title {
            font-size: clamp(2.2rem, 2.8vw, 3rem);
        }

        .risk-card h3 {
            font-size: clamp(1.2rem, 1.3vw, 1.45rem);
        }

        .advantage-card h3 {
            font-size: clamp(1.4rem, 1.6vw, 1.8rem);
        }

        .sol-brand-name {
            font-size: clamp(1.35rem, 1.6vw, 1.75rem);
        }

        .sol-title {
            font-size: clamp(1.35rem, 1.6vw, 1.75rem);
        }

        .sol-desc {
            font-size: clamp(1.05rem, 1.1vw, 1.2rem);
        }

        .stat-card h3 {
            font-size: clamp(2rem, 3vw, 3.25rem);
        }

        .process-showcase .process-step h3 {
            font-size: clamp(1.1rem, 1.1vw, 1.25rem);
        }
    }

    /* ─── 2560px+ (QHD) ─── */
    @media (min-width: 2560px) {
        :root {
            --container-max-narrow: min(75vw, 1600px);
            --container-max: min(85vw, 2000px);
        }

        .hero h1 {
            font-size: clamp(3.1rem, 3.5vw, 4.6rem);
        }

        .hero p {
            font-size: clamp(1.25rem, 1.15vw, 1.5rem);
            max-width: clamp(500px, 35vw, 640px);
        }

        .section-title {
            font-size: clamp(2.25rem, 2.4vw, 3.25rem);
        }

        .section-subtitle {
            font-size: clamp(1.15rem, 1vw, 1.35rem);
        }

        .hero-content {
            max-width: clamp(520px, 35vw, 680px);
        }

        .risk-card h3 {
            font-size: clamp(1.3rem, 1.15vw, 1.6rem);
        }

        .risk-card p {
            font-size: clamp(0.95rem, 0.9vw, 1.1rem);
        }

        .consequences-list li {
            font-size: clamp(0.85rem, 0.8vw, 1rem);
        }

        .advantage-card h3 {
            font-size: clamp(1.5rem, 1.4vw, 2rem);
        }

        .advantage-card ul li {
            font-size: clamp(0.9rem, 0.85vw, 1.05rem);
        }

        .sol-card {
            padding: clamp(32px, 2.8vw, 52px) clamp(28px, 2.5vw, 44px) clamp(32px, 2.5dvh, 44px);
        }

        .sol-brand-name {
            font-size: clamp(1.5rem, 1.4vw, 1.85rem);
        }

        .sol-title {
            font-size: clamp(1.5rem, 1.4vw, 1.85rem);
        }

        .sol-desc {
            font-size: clamp(1.1rem, 1vw, 1.3rem);
        }

        .sol-list li {
            font-size: clamp(1rem, 0.9vw, 1.15rem);
        }

        .sol-btn {
            font-size: clamp(1rem, 0.9vw, 1.15rem);
            padding: clamp(14px, 1vw, 18px) clamp(20px, 1.6vw, 28px);
        }

        .stat-card h3 {
            font-size: clamp(2.25rem, 2.6vw, 3.75rem);
        }

        .stat-card p {
            font-size: clamp(0.9rem, 0.8vw, 1.05rem);
        }

        .protection-insider {
            padding: clamp(16px, 1.2dvh, 28px) clamp(16px, 1.2vw, 28px);
        }

        .insider-header h3,
        .insider-text h3 {
            font-size: clamp(1.05rem, 0.9vw, 1.2rem);
        }

        .benefit-title {
            font-size: clamp(0.95rem, 0.8vw, 1.05rem);
        }

        .process-showcase .process-step h3 {
            font-size: clamp(1.15rem, 1vw, 1.35rem);
        }

        .process-showcase .process-step p {
            font-size: clamp(0.85rem, 0.75vw, 0.95rem);
        }

        .contact-content h2 {
            font-size: clamp(1.75rem, 2.2vw, 2.75rem);
        }

        .contact-content p {
            font-size: clamp(1rem, 0.9vw, 1.2rem);
        }

        .case-card h3 {
            font-size: clamp(1.2rem, 1.1vw, 1.4rem);
        }

        .section-header {
            max-width: clamp(600px, 45vw, 850px);
        }
    }

    /* ─── 3440px+ (Ultra-wide) ─── */
    @media (min-width: 3440px) {
        :root {
            --container-max-narrow: min(65vw, 1800px);
            --container-max: min(80vw, 2200px);
        }

        .hero h1 {
            font-size: clamp(3.5rem, 3.1vw, 5.3rem);
        }

        .hero p {
            font-size: clamp(1.35rem, 1vw, 1.65rem);
            max-width: clamp(560px, 30vw, 720px);
        }

        .hero-content {
            max-width: clamp(580px, 30vw, 780px);
        }

        .section-title {
            font-size: clamp(2.5rem, 2vw, 3.75rem);
        }

        .section-subtitle {
            font-size: clamp(1.2rem, 0.9vw, 1.5rem);
        }

        .section-badge {
            font-size: clamp(0.8rem, 0.6vw, 0.9rem);
            padding: clamp(6px, 0.5vw, 8px) clamp(12px, 0.9vw, 18px);
        }

        .risk-card h3 {
            font-size: clamp(1.4rem, 1vw, 1.8rem);
        }

        .risk-card p {
            font-size: clamp(1rem, 0.8vw, 1.2rem);
        }

        .advantage-card h3 {
            font-size: clamp(1.6rem, 1.2vw, 2.25rem);
        }

        .sol-card {
            padding: clamp(36px, 2.4vw, 60px) clamp(32px, 2.2vw, 52px) clamp(36px, 2dvh, 50px);
        }

        .sol-brand-name {
            font-size: clamp(1.6rem, 1.2vw, 2rem);
        }

        .sol-title {
            font-size: clamp(1.6rem, 1.2vw, 2rem);
        }

        .sol-icon {
            width: clamp(58px, 1.8vw, 76px);
            height: clamp(58px, 1.8vw, 76px);
        }

        .stat-card h3 {
            font-size: clamp(2.5rem, 2.2vw, 4.25rem);
        }

        .center-shield {
            max-width: clamp(360px, 28vw, 600px);
        }

        .center-glow {
            width: clamp(240px, 18vw, 380px);
            height: clamp(240px, 18vw, 380px);
        }

        .protection-center {
            min-height: clamp(320px, 25dvh, 500px);
        }

        .protection-center::before {
            width: clamp(500px, 35vw, 800px);
            height: clamp(500px, 35vw, 800px);
        }

        .process-showcase .process-step h3 {
            font-size: clamp(1.2rem, 0.85vw, 1.45rem);
        }

        .contact-content h2 {
            font-size: clamp(2rem, 1.8vw, 3.25rem);
        }

        .case-card h3 {
            font-size: clamp(1.3rem, 0.9vw, 1.5rem);
        }
    }

    /* ─── 3840px+ (4K) ─── */
    @media (min-width: 3840px) {
        :root {
            --container-max-narrow: min(60vw, 2000px);
            --container-max: min(75vw, 2400px);
        }

        .hero h1 {
            font-size: clamp(4rem, 2.8vw, 5.9rem);
            letter-spacing: -0.04em;
        }

        .hero p {
            font-size: clamp(1.5rem, 0.9vw, 1.8rem);
            max-width: clamp(600px, 28vw, 800px);
        }

        .hero-content {
            max-width: clamp(640px, 28vw, 850px);
        }

        .hero-buttons .btn {
            min-width: clamp(220px, 6vw, 300px);
            padding: clamp(16px, 0.8vw, 22px) clamp(28px, 1.5vw, 40px);
            font-size: clamp(1rem, 0.7vw, 1.2rem);
        }

        .section-title {
            font-size: clamp(2.75rem, 1.8vw, 4.25rem);
        }

        .section-subtitle {
            font-size: clamp(1.3rem, 0.8vw, 1.6rem);
        }

        .section-header {
            max-width: clamp(650px, 40vw, 950px);
            margin-bottom: clamp(32px, 3dvh, 72px);
        }

        .risk-card h3 {
            font-size: clamp(1.5rem, 0.9vw, 2rem);
        }

        .risk-card {
            padding: clamp(22px, 1.4vw, 32px);
        }

        .advantage-card h3 {
            font-size: clamp(1.8rem, 1.1vw, 2.5rem);
        }

        .advantage-card {
            padding: clamp(28px, 1.6vw, 42px);
        }

        .sol-card {
            padding: clamp(40px, 2vw, 64px) clamp(36px, 1.8vw, 56px);
        }

        .sol-brand-name {
            font-size: clamp(1.75rem, 1vw, 2.25rem);
        }

        .sol-title {
            font-size: clamp(1.75rem, 1vw, 2.25rem);
        }

        .sol-desc {
            font-size: clamp(1.15rem, 0.8vw, 1.4rem);
        }

        .sol-list li {
            font-size: clamp(1.05rem, 0.75vw, 1.25rem);
        }

        .sol-btn {
            font-size: clamp(1.05rem, 0.75vw, 1.25rem);
            padding: clamp(16px, 0.8vw, 20px) clamp(24px, 1.4vw, 32px);
        }

        .sol-icon {
            width: clamp(64px, 1.6vw, 82px);
            height: clamp(64px, 1.6vw, 82px);
        }

        .sol-center {
            width: clamp(240px, 14vw, 320px);
        }

        .sol-shield-wrap {
            width: clamp(170px, 12vw, 230px);
            height: clamp(170px, 12vw, 230px);
        }

        .sol-shield-img {
            width: clamp(170px, 12vw, 230px);
        }

        .stat-card h3 {
            font-size: clamp(2.75rem, 2vw, 4.75rem);
        }

        .stat-card p {
            font-size: clamp(0.95rem, 0.7vw, 1.15rem);
        }

        .protection-panel {
            padding: clamp(28px, 1.8dvh, 48px) clamp(24px, 1.5vw, 44px) clamp(24px, 1.5dvh, 36px);
        }

        .center-shield {
            max-width: clamp(400px, 24vw, 640px);
        }

        .center-glow {
            width: clamp(280px, 16vw, 420px);
            height: clamp(280px, 16vw, 420px);
        }

        .protection-center::before {
            width: clamp(550px, 30vw, 900px);
            height: clamp(550px, 30vw, 900px);
        }

        .process-showcase .process-step h3 {
            font-size: clamp(1.3rem, 0.75vw, 1.55rem);
        }

        .process-showcase .process-step p {
            font-size: clamp(0.9rem, 0.65vw, 1rem);
        }

        .contact-content h2 {
            font-size: clamp(2.25rem, 1.6vw, 3.75rem);
        }

        .contact-content p {
            font-size: clamp(1.1rem, 0.7vw, 1.3rem);
        }

        .contact-wrapper {
            padding: clamp(32px, 2vw, 60px);
        }

        .case-card h3 {
            font-size: clamp(1.4rem, 0.8vw, 1.6rem);
        }

        .case-card p {
            font-size: clamp(0.95rem, 0.65vw, 1.1rem);
        }

        .partner-logo {
            min-width: clamp(160px, 8vw, 220px);
            height: clamp(70px, 4dvh, 100px);
        }

        .partner-logo-img {
            max-width: clamp(90px, 6vw, 150px);
            max-height: clamp(32px, 2.5dvh, 50px);
        }
    }

    /* ================================================================
    MOBILE/TABLET OVERRIDES — ensure existing responsive isn't broken
    ================================================================ */

    /* Restore section padding for mobile (not fullscreen) */
    @media (max-width: 768px) {
        section:not(.header):not(.footer) {
            min-height: auto;
            padding: clamp(32px, 6vw, 48px) 0;
            display: block;
        }

        .hero {
            min-height: auto;
            padding: 32px 0 48px;
            display: block;
        }

        .hero-container {
            display: flex;
            flex-direction: column;
        }

        .hero-content {
            max-width: 100%;
        }

        /* Decorative hero illustration covers the full section (inset:0) and
           collides with the heading text once the layout stacks to a single
           column on mobile/tablet — hide it here and keep the subtle
           gradient/grid backgrounds (.hero::before/::after) for texture. */
        .hero-bg {
            display: none;
        }

        .protection {
            display: block;
        }

        .protection-dual-layout {
            grid-template-columns: 1fr;
        }

        .protection-center {
            order: -1;
            min-height: 200px;
        }

        .risks-intro {
            min-height: auto;
            padding: 8px 0 40px;
        }

        .solutions-layout {
            grid-template-columns: 1fr;
        }

        .sol-center {
            width: 100%;
            height: 200px;
        }

        .advantages-grid {
            grid-template-columns: 1fr;
        }

        .process-timeline--showcase {
            flex-direction: column;
            gap: 24px;
        }

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

        .risks-grid {
            grid-template-columns: 1fr;
        }

        .risks-layout {
            grid-template-columns: 1fr;
        }

        .cases-grid {
            grid-template-columns: 1fr;
        }

        .contact-wrapper {
            grid-template-columns: 1fr;
        }

        .insider-benefits {
            grid-template-columns: 1fr;
        }

        .process-features {
            grid-template-columns: 1fr;
        }

        .process-feature:not(:last-child)::after {
            display: none;
        }
    }

    @media (max-width: 1024px) {
        section:not(.header):not(.footer) {
            min-height: auto;
            padding: clamp(36px, 5vw, 56px) 0;
            display: block;
        }

        .hero {
            min-height: auto;
            padding: 36px 0 56px;
            display: block;
        }

        .protection {
            display: block;
        }

        .protection-dual-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .protection-center {
            min-height: 240px;
        }

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

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

        .risks-layout {
            grid-template-columns: 1fr;
        }

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

        .process-timeline--showcase {
            flex-wrap: wrap;
            justify-content: center;
        }

        .contact-wrapper {
            grid-template-columns: 1fr;
        }

        .solutions-layout {
            grid-template-columns: 1fr;
        }

        .sol-center {
            width: 100%;
            height: 220px;
        }
    }

    /* Благодарственные письма */
    .letters { position: relative; overflow: hidden; padding: var(--space-3xl) 0; background: linear-gradient(135deg, #f9fbff 0%, #eef4ff 48%, #f8faff 100%); }
    .letters-header { margin-bottom: clamp(28px, 3vw, 42px); }
    .letters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 22px); }
    .letter-card { display: block; min-width: 0; padding: 0; border: 1px solid rgba(148, 163, 184, .28); border-radius: var(--radius-md); background: #fff; color: var(--text); overflow: hidden; text-align: left; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
    .letter-card:hover, .letter-card:focus-visible { transform: translateY(-8px); border-color: rgba(59, 111, 217, .48); box-shadow: var(--shadow-hover); outline: none; }
    .letter-card__preview { position: relative; display: grid; min-height: 330px; place-items: center; overflow: hidden; background: #eef2f8; isolation: isolate; }
    .letter-card__preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10, 22, 40, .12)); pointer-events: none; }
    .letter-card__preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 1; }
    .letter-card__fallback { width: 77%; aspect-ratio: .71; padding: 14% 10% 10%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #1e3a8a; background: #fff; border: 1px solid #dce3ee; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); font-family: 'Inter', sans-serif; }
    .letter-card__fallback b { font-family: Inter, sans-serif; font-size: clamp(9px, .75vw, 12px); line-height: 1.25; }.letter-card__fallback i { width: 100%; height: 1px; margin: 18% 0; background: #a9b7ca; }.letter-card__fallback em { color: #172554; font-size: clamp(13px, 1.05vw, 17px); font-style: normal; font-weight: 700; line-height: 1.35; }.letter-card__fallback small { margin-top: auto; color: #334155; font-size: clamp(9px, .72vw, 11px); }
    .letter-card__preview--airport .letter-card__fallback b { color: #1172c7; }.letter-card__preview--ctr .letter-card__fallback b { color: #6a4a78; }.letter-card__preview--kmg .letter-card__fallback b { color: #1260af; font-size: clamp(14px, 1.3vw, 21px); }.letter-card__preview--ucs .letter-card__fallback b { color: #0d9488; }
    .letter-card__footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; font-size: var(--text-sm); font-weight: 700; }.letter-card__footer > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.letter-card__open { flex: 0 0 auto; color: var(--secondary); font-size: .74rem; font-weight: 700; }.letter-card__open i { margin-right: 3px; }
    .letter-modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: clamp(14px, 3vw, 42px); background: rgba(4, 12, 28, .78); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }.letter-modal.is-open { opacity: 1; visibility: visible; }.letter-modal__dialog { display: flex; flex-direction: column; width: min(100%, 920px); max-height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-md); background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .4); transform: translateY(18px) scale(.98); transition: transform var(--transition); }.letter-modal.is-open .letter-modal__dialog { transform: none; }.letter-modal__topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 14px 10px 20px; color: #fff; background: var(--primary); }.letter-modal__topbar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 700; }.letter-modal__close { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }.letter-modal__close:hover, .letter-modal__close:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }.letter-modal__body { display: grid; min-height: 0; place-items: center; overflow: auto; padding: clamp(12px, 2vw, 22px); background: #e9edf3; }.letter-modal__body img { display: block; max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; box-shadow: 0 3px 12px rgba(15, 23, 42, .24); }.letter-modal__fallback { display: none; width: min(100%, 590px); }.letter-modal__fallback .letter-card__fallback { width: 100%; font-size: 1.2rem; }.letter-modal__body.is-fallback img { display: none; }.letter-modal__body.is-fallback .letter-modal__fallback { display: block; }body.letter-modal-open { overflow: hidden; }
    @media (max-width: 1100px) { .letters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.letter-card__preview { min-height: 370px; } } @media (max-width: 760px) { .letters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .letters { padding: 56px 0; }.letters-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }.letter-card__preview { min-height: 410px; }.letter-modal { padding: 10px; }.letter-modal__topbar { min-height: 52px; } }

    /* iBatyr в медиа */
    .media-mentions { position: relative; padding: var(--space-3xl) 0; background: linear-gradient(135deg, #f9fbff 0%, #eef4ff 48%, #f8faff 100%); }
    .media-grid { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(28px, 3vw, 42px); }

    .media-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(148, 163, 184, .18); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
    .media-card:hover, .media-card:focus-visible { transform: translateY(-6px); border-color: rgba(59, 111, 217, .35); box-shadow: var(--shadow-hover); outline: none; }

    .media-card-source { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
    .media-card-logo { display: grid; flex: 0 0 auto; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: .72rem; font-weight: 800; background: linear-gradient(135deg, var(--secondary), var(--accent)); }

    .media-card-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #0A1628, #1D4ED8); }
    .media-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .media-card-thumb i { font-size: 2rem; color: rgba(255, 255, 255, .85); }
    .media-card-thumb--teal { background: linear-gradient(135deg, #0A1628, #0F766E); }
    .media-card-thumb--indigo { background: linear-gradient(135deg, #0A1628, #4338CA); }

    .media-card--video .media-card-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 40, 0) 45%, rgba(10, 22, 40, .55) 100%); }
    .media-play { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 1.1rem; background: #FF0000; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform var(--transition); }
    .media-card--video:hover .media-play { transform: scale(1.08); }

    .media-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 18px 20px; }
    .media-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .media-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; color: var(--secondary); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--accent-light); }
    .media-badge--video { color: #B91C1C; background: rgba(239, 68, 68, .1); }
    .media-date { font-size: var(--text-xs); color: var(--text-light); }
    .media-card-body h3 { margin: 0; color: var(--text); font-size: var(--text-lg); line-height: 1.35; }
    .media-card-body p { flex: 1; margin: 0; overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
    .media-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--secondary); font-size: var(--text-sm); font-weight: 700; }
    .media-card-cta i { font-size: .75rem; transition: transform var(--transition); }
    .media-card:hover .media-card-cta i { transform: translateX(3px); }

    @media (max-width: 1100px) {
        .media-grid { grid-template-columns: 1fr 1fr; }
        .media-card--video { grid-column: 1 / -1; }
        .media-card--video .media-card-thumb { aspect-ratio: 21 / 9; }
    }
    @media (max-width: 640px) {
        .media-mentions { padding: 56px 0; }
        .media-grid { grid-template-columns: 1fr; }
        .media-card--video .media-card-thumb { aspect-ratio: 16 / 10; }
        .media-card-body p { -webkit-line-clamp: 4; line-clamp: 4; }
    }

    /* Выравнивание статистики и источники в карточках угроз */
    .risk-card { display: flex; flex-direction: column; padding-bottom: 58px; }
    .consequences-list { margin-bottom: 16px; }
    .risk-card-stat { min-height: 82px; margin-top: auto; }
    .risk-source { position: absolute; right: clamp(18px, 2vw, 24px); bottom: 20px; left: clamp(18px, 2vw, 24px); color: #64748b; font-size: .68rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: color var(--transition); }
    .risk-source:hover, .risk-source:focus-visible { color: var(--secondary); text-decoration: underline; outline: none; }

    .risk-section-divider { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; width: min(100% - 40px, 1080px); margin: -16px auto 0; color: #1d6bd8; font-size: clamp(1.15rem, 2.15vw, 2.1rem); font-weight: 800; line-height: 1.2; text-align: center; }
    .risk-section-divider::before, .risk-section-divider::after { content: ''; height: 1px; flex: 1 1 120px; background: linear-gradient(90deg, transparent, rgba(29, 78, 216, 0.16)); }.risk-section-divider::after { background: linear-gradient(90deg, rgba(29, 78, 216, 0.16), transparent); }.risk-section-divider span { background: linear-gradient(90deg, #2563eb, #1da88c); -webkit-background-clip: text; background-clip: text; color: transparent; }
    @media (max-width: 640px) { .risk-section-divider { width: min(100% - 28px, 1080px); gap: 10px; margin-top: -6px; font-size: 1rem; }.risk-section-divider::before, .risk-section-divider::after { flex-basis: 24px; } }

    /* Единая карточка контактов */
    #contact-info .contacts-grid { display: none !important; }
    .contact-unified-card { position: relative; display: grid; grid-template-columns: minmax(130px, .42fr) minmax(0, 1.7fr) minmax(150px, .48fr); gap: clamp(20px, 3vw, 46px); align-items: center; overflow: hidden; margin: 30px 0 34px; padding: clamp(28px, 3.5vw, 46px); border: 1px solid rgba(226, 232, 240, .8); border-radius: 24px; background: linear-gradient(135deg, #fff 0%, #fbfdff 55%, #f4f8ff 100%); box-shadow: 0 20px 48px rgba(37, 99, 235, .08); }
    .contact-unified-orbit { position: relative; width: 150px; height: 150px; margin: auto; border-radius: 50%; background: radial-gradient(circle, rgba(47, 116, 255, .13) 0 30%, transparent 31%); }.contact-orbit { position: absolute; border: 1px solid rgba(76, 139, 255, .18); border-radius: 50%; inset: 8px; }.contact-orbit--two { inset: -13px; border-style: dashed; }.contact-orbit--three { inset: -35px; border-color: rgba(76, 139, 255, .1); }.contact-orbit-dot { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #74a7ff; box-shadow: 0 0 12px #74a7ff; }.contact-orbit-dot--one { top: -16px; right: 40px; }.contact-orbit-dot--two { bottom: -28px; left: 18px; }
    .contact-unified-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }.contact-unified-heading-icon, .contact-unified-icon { display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #e1eaff; border-radius: 12px; color: #1764ee; background: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .08); }.contact-unified-heading-icon { width: 46px; height: 46px; color: #fff; border: 0; background: linear-gradient(135deg, #0759ee, #2783ff); }.contact-unified-heading h3 { margin: 0 0 2px; color: #102343; font-size: clamp(1.25rem, 1.65vw, 1.55rem); line-height: 1.2; }.contact-unified-heading p { margin: 0; color: #64748b; font-size: var(--text-sm); }
    .contact-unified-row { display: flex; align-items: center; gap: 20px; min-height: 78px; padding: 15px; border-radius: 16px; background: linear-gradient(90deg, #f6f9ff, #eef4ff); }.contact-unified-row + .contact-unified-row { margin-top: 14px; }.contact-unified-icon { width: 48px; height: 48px; font-size: 1.25rem; }.contact-unified-row > a, .contact-unified-email a { color: #162c50; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 750; text-decoration: none; }.contact-unified-row > a:hover, .contact-unified-email a:hover { color: #1764ee; }.contact-unified-email { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; }.contact-unified-email span { color: #64748b; font-size: var(--text-sm); }.contact-unified-separator { width: 1px; height: 48px; background: #cad8ef; }
    .contact-unified-visual { position: relative; width: min(100%, 190px); aspect-ratio: 1; justify-self: end; }.contact-unified-visual svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 14px 20px rgba(37, 99, 235, .14)); }.contact-visual-grid { position: absolute; inset: 16%; background-image: radial-gradient(rgba(66, 133, 255, .45) 1px, transparent 1px); background-size: 13px 13px; mask-image: radial-gradient(circle, #000 10%, transparent 72%); }.contact-visual-label { position: absolute; right: 4%; bottom: 8%; z-index: 2; color: #2869e7; font-size: .68rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
    @media (max-width: 900px) { .contact-unified-card { grid-template-columns: 110px minmax(0, 1fr); }.contact-unified-visual { display: none; } }.contact-unified-orbit { transform: scale(.82); } @media (max-width: 620px) { .contact-unified-card { grid-template-columns: 1fr; padding: 24px 18px; }.contact-unified-orbit { display: none; }.contact-unified-row--emails { align-items: flex-start; gap: 12px; }.contact-unified-separator { display: none; }.contact-unified-email + .contact-unified-separator + .contact-unified-email { margin-top: 40px; margin-left: -60px; }.contact-unified-row { min-height: 0; }.contact-unified-heading { align-items: flex-start; } }

    /* Более собранная композиция блока контактов */
    .contact-unified-card { grid-template-columns: 150px minmax(360px, 1fr) 138px; gap: clamp(24px, 3.2vw, 44px); min-height: 278px; margin: 38px 0 52px; padding: clamp(30px, 4vw, 48px); border-color: rgba(209, 224, 248, .9); border-radius: 26px; background: radial-gradient(circle at 0% 100%, rgba(74, 222, 190, .09), transparent 26%), radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .11), transparent 27%), #fff; box-shadow: 0 22px 52px rgba(31, 78, 164, .1); }
    .contact-unified-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0 53%, rgba(84, 151, 255, .05) 53.1%, transparent 53.3%); }
    .contact-unified-orbit { width: 142px; height: 142px; transform: none; background: radial-gradient(circle, rgba(47, 116, 255, .12) 0 34%, transparent 35%); }.contact-unified-orbit > i { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #1967f4; font-size: 2rem; filter: drop-shadow(0 8px 10px rgba(25, 103, 244, .23)); }.contact-orbit--one { inset: 7px; border-color: rgba(68, 133, 255, .27); }.contact-orbit--two { inset: -15px; }.contact-orbit--three { inset: -33px; }
    .contact-unified-content { position: relative; z-index: 1; }.contact-unified-heading { margin-bottom: 18px; }.contact-unified-heading-icon { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 12px 22px rgba(13, 91, 238, .24); }.contact-unified-heading h3 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); }.contact-unified-heading p { font-size: .85rem; }
    .contact-unified-row { min-height: 70px; padding: 11px 14px; border: 1px solid rgba(222, 232, 250, .8); border-radius: 15px; background: linear-gradient(100deg, #f8faff, #edf4ff); }.contact-unified-row + .contact-unified-row { margin-top: 12px; }.contact-unified-icon { width: 46px; height: 46px; border-radius: 12px; }.contact-unified-row > a, .contact-unified-email a { font-size: clamp(1rem, 1.4vw, 1.2rem); }.contact-unified-email span { font-size: .82rem; }
    .contact-unified-visual { align-self: center; width: 148px; justify-self: center; }.contact-unified-visual::before { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(61, 128, 255, .15); border-radius: 32px; transform: rotate(30deg); }.contact-visual-label { right: 1%; bottom: 6%; font-size: .63rem; }
    @media (max-width: 900px) { .contact-unified-card { grid-template-columns: 132px minmax(0, 1fr); }.contact-unified-orbit { transform: scale(.86); } }.contact-unified-card .contact-unified-orbit { transform: none; }
    @media (max-width: 620px) { .contact-unified-card { grid-template-columns: 1fr; min-height: 0; margin: 28px 0 40px; }.contact-unified-card::before { display: none; }.contact-unified-heading p { line-height: 1.45; }.contact-unified-row--emails { flex-wrap: wrap; }.contact-unified-email { flex-basis: calc(100% - 60px); }.contact-unified-email + .contact-unified-separator + .contact-unified-email { margin: 0 0 0 60px; } }

    /* Checkbox group styles for contact form */
    .checkbox-group {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 24px;
        padding: 16px 20px;
        background: #f8faff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    .checkbox-group--subscription {
        margin-top: 12px;
    }

    .checkbox-group input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 2px solid #cbd5e1;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: #2563EB;
    }

    .checkbox-group label {
        font-size: 0.875rem;
        color: #64748b;
        line-height: 1.5;
        cursor: pointer;
    }

    .checkbox-group a {
        color: #2563EB;
        text-decoration: none;
        font-weight: 600;
    }

    .checkbox-group a:hover {
        text-decoration: underline;
    }

    .form-captcha-group {
        margin-top: 20px;
    }

    .form-captcha-error {
        display: none;
        color: #EF4444;
        font-size: 0.8125rem;
        margin-top: 8px;
    }

    .form-captcha-error.visible {
        display: block;
    }