/* ADSLY Landing — Redesign v5 */
:root {
    --primary: #6366F1;
    --primary-hover: #5558E8;
    --primary-light: rgba(99, 102, 241, 0.08);
    --primary-glow: rgba(99, 102, 241, 0.15);
    --bg: #FFFFFF;
    --bg-alt: #F5F5F7;
    --text: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #86868B;
    --separator: #D2D2D7;
    --separator-light: #E8E8ED;
    --green: #34C759;
    --green-bg: rgba(52, 199, 89, 0.1);
    --orange: #FF9F0A;
    --orange-bg: rgba(255, 159, 10, 0.1);
    --red: #FF3B30;
    --red-bg: rgba(255, 59, 48, 0.08);
    --blue: #007AFF;
    --purple: #AF52DE;
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    --section-py: 80px;
    --r-s: 8px;
    --r-m: 12px;
    --r-l: 16px;
    --r-xl: 20px;
    --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-l: 0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Tool-First Redesign 2026 — Extended Design Tokens (Epic 1)
   Adds dark-theme, glass/aurora, fluid type, spacing, motion,
   and z-ladder. Existing tokens above remain untouched.
   ============================================================ */
:root {
    /* Dark-theme colors */
    --bg-dark: #FAFAFA;
    --bg-dark-elev: #FFFFFF;
    --bg-dark-card: #FFFFFF;
    --text-on-dark: #0A0A0A;
    --text-on-dark-muted: #6B7280;
    --border-dark: #EAEAEA;

    /* Glass / aurora */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.10);
    --aurora-1: rgba(99, 102, 241, 0.28);
    --aurora-2: rgba(59, 130, 246, 0.22);

    /* Brand glows */
    --brand-glow-cta: 0 0 60px rgba(99, 102, 241, 0.40);
    --brand-glow-card: 0 0 40px rgba(99, 102, 241, 0.25);

    /* Fluid type scale */
    --text-hero: clamp(3rem, 8vw, 6rem);
    --text-h1: clamp(2.25rem, 5vw, 3.75rem);
    --text-h2: clamp(1.75rem, 3.5vw, 2.75rem);
    --text-h3: clamp(1.25rem, 2vw, 1.5rem);
    --text-h4: 1.25rem;
    --text-body: 1.125rem;
    --text-small: 0.9375rem;
    --text-tiny: 0.8125rem;

    /* Line-heights */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Tracking */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* Extended radius */
    --r-2xl: 24px;
    --r-3xl: 32px;

    /* Spacing scale (8px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;
    --sp-32: 128px;

    /* Motion tokens */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.4s;
    --dur-slow: 0.8s;
    --dur-hero: 1.2s;

    /* Z-ladder */
    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 500;
    --z-dropdown: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-floating: 9000;
}

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

html {
    scroll-behavior: auto;
}

body {
    font-family: var(--font);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    font-kerning: normal;
}

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

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

button {
    font-family: var(--font);
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}.section-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 18px;
    hyphens: none;
}.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header .section-subtitle {
    margin: 0 auto;
}

.section-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.01em;
    margin-bottom: 14px;
}

/* ============ Scroll Progress ============ *//* ============ Header ============ */.navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(99, 102, 241, 0.1);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-text {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    transition: color 0.5s;
}

.nav-menu {
    display: flex;
    gap: 28px;
    flex: 1;
}.nav-menu a {
    font-size: 14px;
    font-weight: 450;
    background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.3s;
}

.nav-menu a:hover {
    opacity: 0.7;
}

.navbar.scrolled .nav-menu a {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: var(--text-secondary);
    transition: color 0.3s;
}

.navbar.scrolled .nav-menu a:hover {
    color: var(--primary);
    opacity: 1;
}.navbar.scrolled .btn-login {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: var(--primary);
    transition: color 0.3s;
}

.navbar.scrolled .btn-login:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.12);
    opacity: 1;
}

.btn-primary {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
    padding: 8px 20px;
    border-radius: 980px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

/* Mobile toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.3s;
}

.navbar.scrolled .mobile-menu-toggle span {
    background: var(--text);
}

.navbar.menu-open .mobile-menu-toggle span {
    background: var(--text);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============ Hero ============ */@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
}/* Gradient-text line: animated gradient fill */@keyframes gradientShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
    color: #fff;
    padding: 15px 32px;
    border-radius: 980px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
    animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35); }
    50% { box-shadow: 0 4px 32px rgba(99, 102, 241, 0.5); }
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.45);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    background: rgba(99, 102, 241, 0.05);
    color: #3a3a5c;
    padding: 15px 32px;
    border-radius: 980px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.2s;
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.btn-hero-secondary:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.22);
}/* Hero Stats *//* Cabinet Types *//* ============ Demo Sections ============ */.demo-text .section-title {
    font-size: 28px;
    margin-bottom: 16px;
}/* Demo Window (macOS frame) *//* ============ Demo: Campaign Table ============ */.demo-table tr.selected {
    background: rgba(99, 102, 241, 0.06);
}.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.active {
    background: var(--green-bg);
    color: var(--green);
}

.status-badge.paused {
    background: var(--orange-bg);
    color: var(--orange);
}

.status-badge.stopped {
    background: var(--red-bg);
    color: var(--red);
}

.cpm-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cpm-value.updated {
    animation: cpmFlash 0.6s ease;
}

@keyframes cpmFlash {
    0% {
        color: var(--text);
    }

    30% {
        color: var(--primary);
        background: var(--primary-light);
        border-radius: 4px;
    }

    100% {
        color: var(--text);
    }
}/* Demo Modal Overlay */.demo-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}.demo-modal-overlay.active .demo-modal {
    transform: scale(1);
}/* Toast */.demo-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============ Demo: Automation Rules ============ */.demo-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-radius: var(--r-m);
    border: 1px solid var(--separator-light);
    font-size: 13px;
    animation: ruleSlideIn 0.4s ease;
}

@keyframes ruleSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-rule-item .rule-text {
    color: var(--text-secondary);
}

.demo-rule-item .rule-text strong {
    color: var(--text);
    font-weight: 600;
}

.demo-rule-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 980px;
    background: var(--green-bg);
    color: var(--green);
}

/* ============ Demo: Analytics ============ *//* Chart lines animated by GSAP ScrollTrigger (see animations.js) */

/* ============ Demo: Campaign Creation ============ *//* ============ Demo: Campaign Detail ============ *//* ============ Full-width Demo (stacked layout) ============ */.demo-section-full .section-header {
    margin-bottom: 40px;
}/* ============ Steps Section ============ *//* ============ Features Section ============ */#features {
    padding: var(--section-py) 0;
}.feature-category {
    background: var(--bg-alt);
    border-radius: var(--r-l);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-m);
    background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.category-icon.icon-pink {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
}

.category-icon.icon-green {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.category-icon.icon-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
}

.category-icon.icon-orange {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.category-icon.icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.category-header h3 {
    font-size: 16px;
    font-weight: 550;
    color: var(--text);
}/* ============ Testimonials ============ *//* ============ Pricing ============ *//* Billing Toggle */.billing-toggle-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}/* AI Feature Row in Pricing */.price-countdown-value {
    font-weight: 600;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}/* ============ Pricing Managed Card ============ *//* ============ FAQ ============ */
.faq-section {
    padding: var(--section-py) 0;
    background: var(--bg-alt);
}

.faq-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: #fff;
    border-radius: var(--r-m);
    border: 1px solid var(--separator-light);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: var(--shadow-s);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    background: none;
    width: 100%;
    text-align: left;
}

.faq-question:hover {
    color: var(--primary);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
/* Allow native <details> FAQ to work on standalone pages */
details.faq-item[open] > .faq-answer {
    max-height: 500px;
    overflow: visible;
}
details.faq-item > summary.faq-question {
    cursor: pointer;
    list-style: none;
}
details.faq-item > summary.faq-question::-webkit-details-marker {
    display: none;
}

.faq-answer-inner {
    padding: 0 20px 18px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    font-weight: 400;
}

/* ============ CTA Section ============ */.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%);
    color: #fff;
    padding: 16px 36px;
    border-radius: 980px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-cta-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}/* ============ AI Features Section ============ */.ai-features-section .section-header {
    text-align: center;
    margin-bottom: 64px;
}.ai-features-section .section-title {
    color: var(--text);
}/* ============ Managed Service CTA ============ */
/* ============ Managed Service — Premium Dark Section ============ */@keyframes borderShimmer {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}/* ============ Footer ============ */
.footer {
    padding: 40px 0 24px;
    border-top: 1px solid var(--separator-light);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.2s;
    font-weight: 400;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-email {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.2s;
    font-weight: 400;
}

.footer-email:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--separator-light);
}

.footer-bottom p {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Freshness signal — AI/search engines weight "last updated" dates for ranking */
.footer-updated {
    font-size: 12px !important;
    color: var(--text-tertiary);
    opacity: 0.7;
    margin-top: 4px !important;
}

/* ============ Support Modal ============ */
/* ============ Floating Telegram Button ============ */





    50%      { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); }
}







@media (max-width: 768px) {
    
    
    
}/* ============ Section Contact CTA ============ */
.section-contact-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 0;
}

.section-contact-cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2AABEE;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.section-contact-cta a:hover {
    color: #229ED9;
    text-decoration: underline;
}

.section-contact-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============ Demo: Enhanced Elements ============ */
.demo-group-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.demo-group-tag.blue {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.demo-group-tag.purple {
    background: rgba(175, 82, 222, 0.1);
    color: #AF52DE;
}

.demo-group-tag.orange {
    background: rgba(255, 159, 10, 0.1);
    color: #FF9F0A;
}.demo-inline-edit {
    cursor: pointer;
    border-bottom: 1px dashed var(--separator);
    transition: border-color 0.2s;
}

.demo-inline-edit:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.status-badge.declined {
    background: var(--red-bg);
    color: var(--red);
}

.status-badge.review {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}.demo-progress.active {
    display: block;
    animation: ruleSlideIn 0.4s ease;
}.demo-period-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.demo-period-tab {
    padding: 5px 12px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: transparent;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.demo-period-tab:hover {
    color: var(--text);
}

.demo-period-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}/* ============ GSAP Animation System ============ */

/* SplitType text wrappers *//* ============ Reveal Animations ============ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal[data-delay="1"], .reveal-left[data-delay="1"], .reveal-right[data-delay="1"], .reveal-scale[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"], .reveal-left[data-delay="2"], .reveal-right[data-delay="2"], .reveal-scale[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"], .reveal-left[data-delay="3"], .reveal-right[data-delay="3"], .reveal-scale[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"], .reveal-left[data-delay="4"], .reveal-right[data-delay="4"], .reveal-scale[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }
.reveal[data-delay="6"] { transition-delay: 0.6s; }

/* Reduced motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============ Responsive: Tablet ============ */
@media (max-width: 1024px) {    .nav-menu {
        gap: 14px;
    }

    .nav-menu a {
        font-size: 12px;
    }    .nav-cta .btn-primary {
        font-size: 12px;
        padding: 6px 14px;
    }    .section-title {
        font-size: 30px;
    }    .demo-text .section-title {
        font-size: 28px;
    }}

/* ============ Responsive: Mobile ============ */
@media (max-width: 768px) {
    :root {
        --section-py: 56px;
    }

    .container {
        padding: 0 20px;
    }

    /* --- Navbar bar --- */    .logo {
        flex-shrink: 0;
    }

    .logo img {
        width: 28px;
        height: 28px;
    }

    .logo-text {
        font-size: 15px;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-shrink: 0;
        order: 3;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Hide desktop-only items */    /* Navbar pill when menu open — becomes positioning context */
    .navbar.menu-open {
        position: relative;
        border-radius: 20px 20px 0 0;
        background: #fff;
        border-color: rgba(99, 102, 241, 0.06);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
    }

    /* --- Mobile Menu (dropdown attached to navbar) --- */
    .nav-menu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: -1px;
        right: -1px;
        max-height: calc(100dvh - 80px);
        background: #fff;
        padding: 12px 0 20px;
        gap: 0;
        z-index: 999;
        border-radius: 0 0 24px 24px;
        border: 1px solid rgba(99, 102, 241, 0.06);
        border-top: 1px solid rgba(99, 102, 241, 0.04);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menu list items */
    .nav-menu.active li {
        list-style: none;
    }

    .nav-menu.active .mobile-only-menu-item {
        display: block;
    }

    /* Menu links — big, full-width tap targets */
    .nav-menu.active a {
        display: block;
        font-size: 20px;
        font-weight: 500;
        color: var(--text) !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: var(--text) !important;
        background-clip: unset !important;
        padding: 18px 28px;
        border-bottom: none;
        transition: background 0.15s;
        letter-spacing: -0.01em;
    }

    .nav-menu.active a:active {
        background: rgba(99, 102, 241, 0.06) !important;
    }

    /* Language switcher row in mobile menu */
    .nav-menu.active .mobile-lang-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding: 16px 28px 8px;
        border-top: 1px solid rgba(99, 102, 241, 0.06);
        margin-top: 6px;
    }

    .mobile-lang-btn {
        flex: 1;
        padding: 12px 0;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-secondary);
        background: rgba(99, 102, 241, 0.04);
        border: 1px solid transparent;
        transition: all 0.2s;
        text-align: center;
        cursor: pointer;
        font-family: var(--font);
    }

    .mobile-lang-btn:active {
        transform: scale(0.96);
        opacity: 0.8;
    }

    .mobile-lang-btn.active {
        color: var(--primary);
        background: rgba(99, 102, 241, 0.08);
        border-color: rgba(99, 102, 241, 0.15);
    }

    /* Login link in mobile menu */
    .nav-menu.active .mobile-only-menu-item a:not(.btn-primary-mobile) {
        color: var(--primary) !important;
        -webkit-text-fill-color: var(--primary) !important;
        font-size: 18px;
    }

    /* Get Started button in mobile menu */
    .nav-menu.active .mobile-only-menu-item .btn-primary-mobile {
        display: block;
        margin: 16px 24px 8px;
        padding: 16px 28px;
        font-size: 17px;
        font-weight: 500;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: linear-gradient(135deg, var(--primary) 0%, #8B5CF6 100%) !important;
        border-radius: 980px;
        text-align: center;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
    }    .mobile-nav-cta .btn-primary {
        font-size: 13px;
        padding: 7px 16px;
        white-space: nowrap;
    }

    /* --- Hero --- */    .btn-hero-primary {
        padding: 13px 24px;
        font-size: 14px;
    }

    .btn-hero-secondary {
        padding: 13px 24px;
        font-size: 14px;
    }    /* Hero stats */    /* --- Section typography --- */
    .section-title {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .section-header {
        margin-bottom: 40px;
    }    .section-badge {
        font-size: 13px;
    }

    /* --- Demo sections --- */
    .demo-text .section-title {
        font-size: 24px;
    }    /* --- Features --- */    .feature-category {
        padding: 22px;
    }

    .feature-category:hover {
        transform: none;
    }

    /* no hover on touch */
    .category-header h3 {
        font-size: 15px;
    }    /* --- Steps --- */    /* --- Pricing --- */    /* --- FAQ --- */
    .faq-question {
        padding: 16px 18px;
        font-size: 14px;
    }

    .faq-answer-inner {
        padding: 0 18px 16px;
        font-size: 13px;
    }

    /* --- CTA --- */    .btn-cta-primary {
        padding: 14px 28px;
        font-size: 15px;
    }

    /* --- AI Features --- */    /* --- Managed Service --- */    /* --- Footer --- */
    .footer {
        padding: 32px 0 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .footer-links a {
        font-size: 13px;
        padding: 8px 0;
        display: inline-block;
    }

    .footer-bottom p {
        font-size: 12px;
    }

    .section-contact-cta a {
        font-size: 14px;
    }
}

/* ============ Responsive: Small phones ============ */
@media (max-width: 480px) {    .btn-hero-primary,
.btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }    .section-title {
        font-size: 24px;
    }

    .demo-text .section-title {
        font-size: 22px;
    }    .nav-menu.active {
        padding: 10px 0 16px;
    }

    .nav-menu.active a {
        font-size: 18px;
        padding: 16px 24px;
    }

    .nav-menu.active .mobile-only-menu-item .btn-primary-mobile {
        margin: 12px 20px 6px;
        padding: 14px 24px;
        font-size: 16px;
    }

    .nav-menu.active .mobile-lang-row {
        padding: 12px 24px 4px;
    }

    .mobile-lang-btn {
        padding: 10px 0;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .mobile-nav-cta .btn-primary {
        font-size: 12px;
        padding: 6px 12px;
    }

    .logo-text {
        font-size: 14px;
    }

    .logo img {
        width: 24px;
        height: 24px;
    }
}

/* ============ Demo Interactive Hint ============ */@keyframes hintPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============ Pricing Skeleton ============ */@keyframes skeletonPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* ============ Trial Badge ============ *//* =====================================================
   ADSLY Guides - Light Theme & Detailed Styles
   ===================================================== */
:root {
    --guide-bg: #f8fafc;
    --guide-card-bg: #ffffff;
    --guide-text: #1e293b;
    --guide-muted: #64748b;
    --guide-border: #e2e8f0;
    --guide-accent: #3b82f6;
}

body.light-theme {
    background-color: var(--guide-bg);
    color: var(--guide-text);
}.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.guide-card {
    background: var(--guide-card-bg);
    border: 1px solid var(--guide-border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.guide-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--guide-accent);
}

.guide-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.guide-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    margin: 20px 20px 10px;
}

.guide-title {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 20px 10px;
    line-height: 1.3;
}

.guide-desc {
    font-size: 0.95rem;
    color: var(--guide-muted);
    padding: 0 20px 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.guide-footer {
    padding: 20px;
    border-top: 1px solid var(--guide-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.guide-read {
    font-weight: 600;
    color: var(--guide-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}

.guide-date {
    font-size: 0.85rem;
    color: var(--guide-muted);
}

/* Article Page Specifics */
.article-hero {
    padding: 60px 0;
    border-bottom: 1px solid var(--guide-border);
    margin-bottom: 60px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--guide-muted);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 30px;
    transition: color 0.2s;
}

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

.article-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.article-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.article-subtitle {
    font-size: 1.25rem;
    color: var(--guide-muted);
    max-width: 800px;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
}

.article-main-image {
    width: 100%;
    border-radius: 24px;
    margin-bottom: 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.article-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #334155;
}

.article-content h3 {
    font-size: 1.75rem;
    margin: 40px 0 20px;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-block h4 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--guide-muted);
    margin-bottom: 20px;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-links a {
    text-decoration: none;
    font-weight: 500;
    color: var(--guide-text);
    transition: color 0.2s;
}

.sidebar-links a:hover {
    color: var(--guide-accent);
}

/* CTA BOX Fix */
.article-content a.article-cta-btn {
    display: inline-block;
    padding: 16px 32px;
    background: var(--guide-accent);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    margin-top: 20px;
    transition: transform 0.2s, background 0.2s;
}

.article-content a.article-cta-btn:hover {
    transform: translateY(-2px);
    background: #2563eb;
}@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .article-sidebar {
        position: static;
        order: 2;
    }

    .article-main {
        order: 1;
    }
}

@media (max-width: 768px) {    .article-title {
        font-size: 2.25rem;
    }

    .article-hero {
        padding: 40px 0;
    }

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

/* ========================================
   Landing — New Sections
   ======================================== */

/* --- Demo CTA Strip --- */.demo-cta-strip .btn-primary.btn-sm {
    padding: 10px 24px;
    font-size: 14px;
    display: inline-flex;
}

/* --- Comparison Section (Before vs After) --- *//* --- Testimonials Section --- */


/* --- CTA Guarantee --- *//* ── Final CTA Section ── */.cta-buttons .btn-primary.btn-lg {
    padding: 16px 40px;
    font-size: 16px;
}

/* ── Steps CTA Strip ── */.steps-cta-strip .btn-primary.btn-lg {
    padding: 16px 40px;
    font-size: 16px;
}

/* ── Hero Beginner Link ── *//* ── Demo Tabs Section ── */.demo-tab.active {
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-s);
}.demo-tab-panel.active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ Platform Showcase ============ */.showcase-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.showcase-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.25s;
}

.showcase-tab:hover {
    color: var(--text);
}

.showcase-tab:hover svg {
    opacity: 0.8;
}

.showcase-tab.active {
    background: var(--bg);
    color: var(--primary);
    box-shadow: var(--shadow-s);
}

.showcase-tab.active svg {
    opacity: 1;
    stroke: var(--primary);
}

/* Browser chrome frame *//* Screenshot container with crossfade */.showcase-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

.showcase-screen.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

/* Hover glow effect on viewport *//* Responsive showcase */
@media (max-width: 768px) {    .showcase-tab {
        flex: 1;
        min-width: 30%;
        padding: 8px 12px;
        font-size: 13px;
        justify-content: center;
    }

    .showcase-tab svg {
        display: none;
    }}

@media (max-width: 480px) {
    .showcase-tab {
        min-width: 28%;
        padding: 7px 10px;
        font-size: 12px;
        min-height: 40px;
    }
}

/* ============ Hero Visual (mascot) ============ */
.hero-mascot {
    width: 100%;
    max-width: 600px;
    filter: drop-shadow(0 20px 40px rgba(99, 102, 241, 0.15));
    animation: heroFloat 4s ease-in-out infinite;
    transition: filter 0.3s ease;
}

.hero-mascot:hover {
    filter: drop-shadow(0 24px 48px rgba(99, 102, 241, 0.25));
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ============ Split Hero ============ */
/* ============ Split Hero — Full-Viewport ============ *//* Floating badge at top center */.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

/* Panels fill entire viewport *//* Content fade-in stagger on load */@keyframes heroFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Light side ---- *//* Dot grid pattern — fades toward center *//* Gradient mesh — warm purple glow *//* ---- Dark side ---- *//* Animated gradient orb */@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10px, -15px) scale(1.05); }
    66% { transform: translate(-8px, 10px) scale(0.97); }
}

/* Secondary glow — bottom accent *//* ---- Robot mascot in white circle ---- */@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ---- Eyebrow badges ---- *//* ---- Panel headings ---- *//* ---- Panel subheadings ---- *//* ---- Bullet points ---- *//* ---- CTAs ---- *//* Light side CTA — solid gradient *//* Dark side CTA — white with subtle glow *//* ---- Muted text under CTA ---- *//* ---- Below the hero ---- *//* ---- Hover: boundary + robot shift together (desktop) ---- */
@media (hover: hover) and (min-width: 769px) {
    /* Hover on light → light expands, boundary + robot shift right */    /* Hover on dark → dark expands, boundary + robot shift left */}

/* ============ Social Proof Strip ============ *//* ============ Comparison Table Visual ============ *//* Hide old comparison grid — replaced by table *//* ============ Metrics Section (replaces testimonials) ============ *//* ============ CTA White Button ============ *//* ============ CTA Section gradient update ============ *//* ============ Font-display headings ============ */
.feature-category h3 {
    font-family: var(--font-display);
}

/* ============ Font-mono stats ============ *//* ============ Responsive: new sections ============ */





/* =====================================================
   Channel Analyzer — Hero lead magnet
   ===================================================== */

/* Input block in hero-text *//* Eyebrow — small spark-icon + "Free — no account needed" *//* Button reuses btn-hero-primary styles but with compact sizing *//* Footer row — two links with clear hierarchy *//* Primary secondary link — "Start Free — 3 Days Pro →" *//* Dot separator *//* Muted tertiary link */@keyframes analyzeErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Results panel — replaces mascot in hero-visual after analysis */.result-ads        { grid-area: ads; }/* Result blocks */
.result-block {
    background: var(--bg);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-l);
    padding: 10px 12px;
    box-shadow: var(--shadow-s);
}/* Block A */.niche-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 980px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    background: var(--primary-light);
    color: var(--primary);
}
.niche-badge.niche-crypto    { background: rgba(255,159,10,.12); color: var(--orange); }
.niche-badge.niche-finance   { background: rgba(0,122,255,.10);  color: var(--blue); }
.niche-badge.niche-education { background: rgba(52,199,89,.12);  color: var(--green); }
.niche-badge.niche-tech      { background: rgba(175,82,222,.12); color: var(--purple); }
.niche-badge.niche-news      { background: rgba(255,59,48,.08);  color: var(--red); }/* Block B *//* Block C — AI ad copies *//* Block D — calculator */#budgetSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background: var(--separator);
    outline: none;
    cursor: pointer;
}

#budgetSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 1px 4px rgba(99,102,241,.4);
    cursor: pointer;
    transition: transform 0.15s ease;
}

#budgetSlider::-webkit-slider-thumb:hover { transform: scale(1.2); }
#budgetSlider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    cursor: pointer;
}.metric-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    background: var(--bg-alt);
    border-radius: var(--r-s);
}

.metric-row span {
    font-size: 10px;
    color: var(--text-tertiary);
}

.metric-row strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}/* Block E — CTA *//* ===== Testimonials Section ===== *//* Hero micro proof *//* Analyze secondary button *//* ===== Managed Service Banner ===== */

/* Mobile — analyze block */
@media (max-width: 768px) {    #analyzeInput, #analyzeBtn {
        width: 100%;
    }

    #analyzeBtn {
        justify-content: center;
    }    #budgetSlider {
        width: 100px;
    }
}



/* ============ Managed Lead Form ============ *//* ============ Split Hero — Mobile ============ */
@media (max-width: 768px) {    /* Hide badge when mobile menu is open */
    .site-header:has(.menu-open) ~ .hero .hero-split-badge-float {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }    /* Robot mascot — hidden on mobile (panels stack, no split to bridge) */    /* Disable fade-in stagger on mobile for performance */}

/* ============================================================
   Tool-First Redesign 2026 — Utility Classes & Components (Epic 1)
   Section backgrounds, aurora blobs, glass surfaces, big numbers,
   eyebrows. Purely additive — no existing rules modified.
   ============================================================ */

/* Section backgrounds */
.section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}.section--alt {
    background: var(--bg-alt);
    color: var(--text);
}
.section--aurora {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-on-dark);
    overflow: hidden;
}

/* Aurora blobs (background glows for hero) */
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: var(--z-base);
}
.aurora-blob--primary {
    background: var(--aurora-1);
    width: 800px;
    height: 800px;
    top: -200px;
    left: -200px;
}
.aurora-blob--secondary {
    background: var(--aurora-2);
    width: 700px;
    height: 700px;
    bottom: -300px;
    right: -200px;
}

/* Glass components */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-2xl);
    padding: var(--sp-6);
}
.glass-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: var(--sp-2) var(--sp-5);
    color: var(--text-on-dark);
    font-size: var(--text-small);
    font-weight: 500;
}
.glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--text-on-dark);
    font-size: 13px;
}

/* i18n FOUC guard — elements opting in via [data-i18n-pending] stay hidden
   until i18n.js adds .lang-ready to <html>. SSG pages don't need this (text is
   pre-rendered); it's for client-hydrated regions that lack a fallback. */
html:not(.lang-ready) [data-i18n-pending] { visibility: hidden; }

/* Big number (count-up stats) */
.bignum {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1;
    color: var(--primary);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}
.bignum-label {
    display: block;
    font-size: var(--text-small);
    color: var(--text-tertiary);
    max-width: 180px;
    margin-top: var(--sp-3);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.bignum.on-dark {
    color: var(--primary);
}
.bignum-label.on-dark {
    color: var(--text-on-dark-muted);
}

/* Eyebrow (uppercase small label above H1) */
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: var(--sp-4);
}
.eyebrow.on-dark {
    color: #A5B4FC;
}

/* Reduced motion: stop aurora blob animations */
@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================================================
   NEW HOMEPAGE STYLES (Epic 2 · Tool-First Redesign 2026)
   ================================================================
   Namespaced with `-v2` suffix or unique prefixes so none of the
   existing classes are affected. All tokens pulled from :root.
   Brand is indigo #6366F1 (NOT purple). Desktop-first: media queries
   at 1024 / 900 / 768 / 480. Respects prefers-reduced-motion at end.
   Section order matches the SVG macket + Epic 2 plan.
   ================================================================ */

/* Shared v2 primitives */
.section-v2 {
    padding: clamp(72px, 10vh, 128px) 0;
    position: relative;
    overflow: hidden;
}
.section-v2__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
    position: relative;
    z-index: var(--z-base);
}
.section-v2__header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto var(--sp-16);
}
.section-v2__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0 0 var(--sp-4);
}
.section-v2__title.on-dark {
    color: var(--text-on-dark);
}
.section-v2__sub {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: 0;
}
.section-v2__sub.on-dark {
    color: var(--text-on-dark-muted);
}

/* Shared v2 buttons (used across many sections; do not clash with .btn-primary) */
.btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--r-m);
    transition: transform var(--dur-fast) var(--ease-out-quart),
                box-shadow var(--dur-fast) var(--ease-out-quart),
                background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart);
    white-space: nowrap;
    line-height: 1;
}
.btn-v2--primary {
    background: var(--primary);
    color: #FFFFFF;
    padding: 18px 32px;
    font-size: 17px;
    box-shadow: var(--brand-glow-cta);
}
.btn-v2--primary:hover {
    background: var(--primary-hover);
    transform: scale(1.02);
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.55);
    color: #FFFFFF;
}
.btn-v2--primary:active {
    transform: scale(0.99);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.35);
}
.btn-v2--secondary {
    background: transparent;
    color: var(--text);
    padding: 16px 28px;
    font-size: 15px;
    border: 1px solid var(--separator-light);
}
.btn-v2--secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.btn-v2--secondary.on-dark {
    color: var(--text-on-dark);
    border-color: var(--border-dark);
    background: rgba(255, 255, 255, 0.04);
}
.btn-v2--secondary.on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--text-on-dark);
}
.btn-v2--ghost {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 14px 32px;
    font-size: 15px;
    border-radius: var(--r-m);
}
.btn-v2--ghost:hover {
    background: var(--primary-light);
}
.btn-v2--ghost.on-dark {
    color: #A5B4FC;
    border-color: rgba(165, 180, 252, 0.45);
}
.btn-v2--ghost.on-dark:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: #A5B4FC;
}
.btn-v2--block {
    display: flex;
    width: 100%;
}

/* --- 1. Hero v2 (dark, aurora, glass card + dashboard) ---------- *//* Legacy secondary link (kept for other pages) *//* Hero visual column: glass-wrapped dashboard with ticker above *//* Live ticker styling (used in hero + standalone partial) */
.live-ticker {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.live-ticker__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--text-on-dark);
    font-size: 13px;
    transition: background var(--dur-base) var(--ease-out-quart);
}
.live-ticker__label {
    color: var(--text-on-dark-muted);
    font-weight: 500;
}
.live-ticker__value {
    color: var(--text-on-dark);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.live-ticker__chip.is-updating {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

/* --- 2. Three Paths (Self-Serve / Euro Cabinet / Managed Service) ---- *//* Path card base styling (also styles the partial .card-path) */
.card-path {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: var(--r-2xl);
    padding: var(--sp-8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: transform var(--dur-base) var(--ease-out-quart),
                box-shadow var(--dur-base) var(--ease-out-quart),
                border-color var(--dur-base) var(--ease-out-quart);
    overflow: hidden;
}
.card-path:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
    border-color: #C7D2FE;
}

/* Highlighted Euro variant: conic gradient border + glow (no vertical lift — keeps cards aligned) */.card-path__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}.card-path__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A5B4FC;
    margin: 0;
}
.card-path__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: #111827;
    margin: var(--sp-1) 0 0;
    letter-spacing: -0.015em;
}
.card-path__subtitle {
    font-size: 14px;
    color: #6366F1;
    margin: 0;
    line-height: var(--leading-normal);
    font-weight: 500;
}.card-path__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex-grow: 1;
}
.card-path__bullets li {
    position: relative;
    padding-left: 28px;
    font-size: var(--text-small);
    line-height: var(--leading-normal);
    color: var(--text-on-dark-muted);
}
.card-path__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.card-path__bullets li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 8px;
    height: 5px;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}.card-path__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: auto;
}
.card-path__cta {
    width: 100%;
    padding: 13px 24px;
    border-radius: var(--r-m);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    transition: all var(--dur-fast) var(--ease-out-quart);
    border: 1.5px solid #D1D5DB;
    background: #FFFFFF;
    color: #374151;
}
.card-path__cta:hover {
    background: #F9FAFB;
    border-color: #6366F1;
    color: #6366F1;
}
/* Primary CTA on the Euro highlighted card */
.card-path--highlighted .card-path__cta {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 0 32px rgba(99, 102, 241, 0.35);
}
.card-path--highlighted .card-path__cta:hover {
    background: var(--primary-hover);
    box-shadow: 0 0 48px rgba(99, 102, 241, 0.5);
}
.card-path__cta-sub {
    text-align: center;
    font-size: 12px;
    color: rgba(196, 196, 212, 0.6);
}

/* --- 3. Showcase v2 (5-tab tool switcher with dashboard screenshots) --- */

.showcase-v2 {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding: clamp(80px, 10vh, 128px) 0;
    position: relative;
}
.showcase-v2__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.showcase-v2__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}
.showcase-v2__tabs {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-10);
}
.showcase-v2__tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-on-dark-muted);
    padding: 10px 20px;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out-quart),
                color var(--dur-fast) var(--ease-out-quart),
                border-color var(--dur-fast) var(--ease-out-quart);
}
.showcase-v2__tab:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-on-dark);
}
.showcase-v2__tab.is-active {
    background: rgba(99, 102, 241, 0.15);
    color: #A5B4FC;
    border-color: rgba(99, 102, 241, 0.3);
}
.showcase-v2__tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.showcase-v2__panel {
    max-width: 1200px;
    margin-inline: auto;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3xl);
    padding: var(--sp-6);
    margin-top: var(--sp-10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.showcase-v2__screens {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-l);
    overflow: hidden;
    background: var(--bg-dark-card);
}
.showcase-v2__screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-quart);
    pointer-events: none;
}
.showcase-v2__screen.is-active {
    opacity: 1;
    pointer-events: auto;
}
.showcase-v2__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    border-radius: var(--r-l);
}/* --- 4. Bento (Three Reasons: TON+Euro+Stars / AI / Mass edit) --- */


/* --- 5. Big numbers grid (×4 count-up stats, light section) --- */.bignums-grid__item .bignum-label {
    margin-top: 0;
}

/* --- 6. Countries grid (16 countries, 4×4) --------------------- */

.countries-grid {
    background: var(--bg-dark-elev);
    color: var(--text-on-dark);
    padding: clamp(80px, 10vh, 128px) 0;
    position: relative;
}
.countries-grid__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.countries-grid__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}
.countries-grid__wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    max-width: 1000px;
    margin-inline: auto;
}
.country-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-l);
    padding: var(--sp-6);
    text-align: center;
    cursor: default;
    transition: transform var(--dur-base) var(--ease-out-quart),
                background var(--dur-base) var(--ease-out-quart),
                box-shadow var(--dur-base) var(--ease-out-quart),
                border-color var(--dur-base) var(--ease-out-quart);
}
.country-tile:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(165, 180, 252, 0.28);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}
.country-tile__flag {
    font-size: 48px;
    line-height: 1;
}
.country-tile__name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-on-dark);
    margin: 0;
}
.countries-grid__cta-wrap {
    text-align: center;
    margin-top: var(--sp-12);
}

/* --- 7. Cases grid (3 anonymous case studies, light) ----------- */

.cases-grid {
    background: var(--bg-alt);
    padding: clamp(80px, 10vh, 128px) 0;
}
.cases-grid__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.cases-grid__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}
.cases-grid__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    max-width: 1200px;
    margin-inline: auto;
}
.case-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: var(--bg);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    box-shadow: var(--shadow-m);
    border: 1px solid var(--separator-light);
    transition: transform var(--dur-base) var(--ease-out-quart),
                box-shadow var(--dur-base) var(--ease-out-quart);
}
.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-l);
}
.case-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--orange);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    width: fit-content;
}
.case-card__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: var(--leading-snug);
}
.case-card__sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-normal);
}
.case-card__numbers {
    display: flex;
    flex-direction: row;
    gap: var(--sp-8);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.case-card__number {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
}
.case-card__number .big {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.case-card__number .label {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: var(--sp-1);
}
.case-card__spark {
    width: 100%;
    height: 60px;
    color: var(--primary);
    margin-top: var(--sp-3);
}
.case-card__spark path,
.case-card__spark polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- 8. Risk block (orange high-risk niche badges) ------------- *//* --- 9. Calc card (commission calculator, light section) ------- */

.calc-card-section {
    background: var(--bg);
    padding: clamp(80px, 10vh, 128px) 0;
}
.calc-card-section__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.calc-card {
    max-width: 720px;
    margin-inline: auto;
    background: var(--bg);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-2xl);
    padding: var(--sp-12);
    box-shadow: var(--shadow-m);
}
.calc-card__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--sp-2);
    line-height: var(--leading-snug);
}
.calc-card__subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-8);
    line-height: var(--leading-normal);
}
.calc-card__slider-row {
    margin-top: var(--sp-8);
}
.calc-card__label {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}
.calc-card__value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    margin: var(--sp-1) 0;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.calc-card__slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--bg-alt);
    border-radius: 999px;
    outline: none;
    margin-top: var(--sp-3);
    cursor: pointer;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-repeat: no-repeat;
    background-size: var(--calc-fill, 0%) 100%;
}
.calc-card__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.45);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out-quart);
}
.calc-card__slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}
.calc-card__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.45);
    cursor: pointer;
}
.calc-card__slider::-moz-range-track {
    height: 4px;
    background: var(--bg-alt);
    border-radius: 999px;
}
.calc-card__results {
    margin-top: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.calc-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: var(--text);
    padding: var(--sp-2) 0;
}
.calc-card__row-label {
    color: var(--text-secondary);
}
.calc-card__row-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.calc-card__row--total {
    border-top: 1px solid var(--separator-light);
    padding-top: var(--sp-4);
    margin-top: var(--sp-2);
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}
.calc-card__note {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
    margin: var(--sp-4) 0 0;
    max-width: 560px;
}
.calc-card__cta {
    width: 100%;
    margin-top: var(--sp-6);
}

/* --- 10. Comparison v2 (Native vs ADSLY table) ----------------- */

.comparison-v2 {
    background: var(--bg);
    padding: clamp(80px, 10vh, 128px) 0;
}
.comparison-v2__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.comparison-v2__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}
.comparison-v2__table-wrap {
    max-width: 960px;
    margin-inline: auto;
    overflow-x: auto;
    border-radius: var(--r-xl);
    border: 1px solid var(--separator-light);
    background: var(--bg);
    box-shadow: var(--shadow-s);
}
.comparison-v2__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}
.comparison-v2__table th {
    background: #F4F1FA;
    color: var(--text);
    padding: 16px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--separator-light);
}
.comparison-v2__table th:first-child {
    width: 30%;
}
.comparison-v2__table td {
    padding: 16px;
    border-bottom: 1px solid var(--separator-light);
    font-size: 15px;
    color: var(--text);
    line-height: var(--leading-normal);
    vertical-align: top;
}
.comparison-v2__table tr:last-child td {
    border-bottom: none;
}
.comparison-v2__table tr:hover td {
    background: rgba(99, 102, 241, 0.03);
}
.comparison-v2__check {
    color: var(--green);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.comparison-v2__x {
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.comparison-v2__check svg,
.comparison-v2__x svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- 11. Testimonials grid (Telegram screens, rotated cards) --- *//* Asymmetric: first row of 3 (span 2 cols each), second row of 2 (span 3 cols each) *//* --- 11.5 Switch section (one login, three services, no migrations) --- */

.switch-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-elev) 100%);
    color: var(--text-on-dark);
    padding: clamp(80px, 10vh, 128px) 0;
    position: relative;
}
.switch-section__container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.switch-section__header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto var(--sp-12);
}
.switch-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: stretch;
}
.switch-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    background: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
}
.switch-tile__time {
    display: inline-block;
    padding: 4px 12px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 999px;
    align-self: flex-start;
}
.switch-tile__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text-on-dark);
    margin: var(--sp-1) 0 0;
}
.switch-tile__body {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    color: var(--text-on-dark-muted);
    margin: 0;
}
.switch-section__footnote {
    text-align: center;
    margin: var(--sp-10) auto 0;
    max-width: 640px;
    font-size: 14px;
    color: rgba(196, 196, 212, 0.65);
}
@media (max-width: 1024px) {
    .switch-section__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    .switch-tile {
        padding: var(--sp-6);
    }
}

/* --- 12. Pricing v2 (4 cards: Starter / Agency / Euro / Managed Service) --- */

.pricing-v2 {
    background: var(--bg-alt);
    padding: clamp(80px, 10vh, 128px) 0;
}
.pricing-v2__container {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.pricing-v2__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--sp-12);
}
.pricing-v2__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    align-items: stretch;
    max-width: 1280px;
    margin-inline: auto;
}
.pricing-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: var(--bg);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    transition: transform var(--dur-base) var(--ease-out-quart),
                box-shadow var(--dur-base) var(--ease-out-quart);
}
.pricing-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}
.pricing-card-v2--highlighted {
    z-index: 1;
    box-shadow: var(--brand-glow-card), var(--shadow-m);
    border-color: transparent;
}
.pricing-card-v2--highlighted::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from 180deg,
        var(--primary),
        #A5B4FC,
        #818CF8,
        var(--primary)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.pricing-card-v2--highlighted:hover {
    transform: translateY(-4px);
}
.pricing-card-v2__badge-recommended {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--orange);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.pricing-card-v2__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: var(--leading-snug);
}
.pricing-card-v2__sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-normal);
}
.pricing-card-v2__price {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums lining-nums;
}
.pricing-card-v2__price-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.4;
    font-weight: 500;
}
.pricing-card-v2__price-line2 {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 6px 0 0;
    font-weight: 400;
    line-height: 1.4;
}
/* Legacy compound price (kept for other pages, not used on home) */
.pricing-card-v2__price-compound {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}
.pricing-card-v2__price-compound .highlight {
    color: var(--primary);
}
.pricing-card-v2__features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-2) 0;
    list-style: none;
    padding: 0;
    flex-grow: 1;
}
.pricing-card-v2__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: 15px;
    color: var(--text);
    line-height: var(--leading-normal);
}
.pricing-card-v2__feature::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-color: var(--green);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.pricing-card-v2__cta {
    width: 100%;
    margin-top: auto;
}

/* --- 13. FAQ v2 (details/summary, light section) --------------- */

.faq-v2 {
    background: var(--bg);
    padding: clamp(80px, 10vh, 128px) 0;
}
.faq-v2__container {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.faq-v2__header {
    text-align: center;
    margin: 0 auto var(--sp-10);
}
.faq-v2__list {
    display: flex;
    flex-direction: column;
}
.faq-v2__item {
    border-bottom: 1px solid var(--separator-light);
    padding-block: var(--sp-6);
}
.faq-v2__item:first-child {
    border-top: 1px solid var(--separator-light);
}
.faq-v2__summary {
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    line-height: var(--leading-snug);
    padding-block: var(--sp-1);
    transition: color var(--dur-fast) var(--ease-out-quart);
}
.faq-v2__summary::-webkit-details-marker {
    display: none;
}
.faq-v2__summary:hover {
    color: var(--primary);
}
.faq-v2__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform var(--dur-base) var(--ease-out-quart),
                color var(--dur-base) var(--ease-out-quart);
}
.faq-v2__item[open] .faq-v2__chevron {
    transform: rotate(180deg);
    color: var(--primary);
}
.faq-v2__answer {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 680px;
    padding-top: var(--sp-4);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* --- 14. Final CTA (dark with centered radial glow) ------------ */

.cta-final {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding: clamp(96px, 14vh, 160px) 0;
    overflow: hidden;
    text-align: center;
}
.cta-final::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--aurora-1), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.cta-final__container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
}
.cta-final__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
    margin: 0 0 var(--sp-6);
}.cta-final__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
}
.cta-final__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: #A5B4FC;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out-quart);
}
.cta-final__cta-secondary:hover {
    color: #C7D2FE;
}

/* --- Glass Hero wrapper (partial: hero-glass-card.html) -------- */

.hero-glass {
    position: relative;
    max-width: 580px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.hero-glass__card {
    padding: var(--sp-5);
}
.hero-glass__card .glass-card__inner {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-l);
    overflow: hidden;
    background: var(--bg-dark-card);
    border: 1px solid var(--glass-border);
}
.hero-glass__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

/* ================================================================
   RESPONSIVE — desktop-first breakpoints: 1024 / 900 / 768 / 480
   ================================================================ */

@media (max-width: 1024px) {    .cases-grid__wrap,
.pricing-v2__grid {
        gap: var(--sp-5);
    }
    .pricing-v2__grid {
        grid-template-columns: repeat(2, 1fr);
    }}

@media (max-width: 1024px) {    .showcase-v2__tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: var(--sp-2);
        scrollbar-width: none;
    }
    .showcase-v2__tabs::-webkit-scrollbar {
        display: none;
    }
    .showcase-v2__tab {
        flex-shrink: 0;
    }


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

    .cases-grid__wrap {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }    .comparison-v2__table th,
    .comparison-v2__table td {
        padding: 12px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {    .btn-v2--primary {
        padding: 16px 24px;
        font-size: 16px;
        width: 100%;
    }    .section-v2,
.showcase-v2,

    .section-v2__header,
.showcase-v2__header,

    .card-path {
        padding: var(--sp-8);
    }

    .pricing-card-v2 {
        padding: var(--sp-6);
    }
    .pricing-card-v2--highlighted {
        transform: none;
    }
    .pricing-card-v2--highlighted:hover {
        transform: translateY(-4px);
    }

    .calc-card {
        padding: var(--sp-8);
    }
    .calc-card__value {
        font-size: 28px;
    }

    .countries-grid__wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .country-tile {
        padding: var(--sp-5);
    }
    .country-tile__flag {
        font-size: 40px;
    }    .case-card {
        padding: var(--sp-6);
    }
    .case-card__number .big {
        font-size: 36px;
    }
    .case-card__numbers {
        gap: var(--sp-5);
    }

    .faq-v2__summary {
        font-size: 16px;
    }
    .faq-v2__answer {
        font-size: 15px;
    }

    .cta-final {
        padding: var(--sp-20) 0;
    }
    .cta-final::before {
        width: 600px;
        height: 600px;
    }
}

@media (max-width: 480px) {    .live-ticker {
        gap: 6px;
    }
    .live-ticker__chip {
        padding: 6px 10px;
        font-size: 12px;
    }

    .card-path {
        padding: var(--sp-6);
        border-radius: var(--r-xl);
    }    .countries-grid__wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }
    .country-tile {
        padding: var(--sp-4);
    }    .comparison-v2__table th,
    .comparison-v2__table td {
        padding: 10px 8px;
        font-size: 13px;
    }
    .comparison-v2__check span,
    .comparison-v2__x span {
        display: none;
    }

    .calc-card {
        padding: var(--sp-6);
    }
    .calc-card__row {
        font-size: 14px;
    }
    .calc-card__row--total {
        font-size: 18px;
    }

    .showcase-v2__panel {
        padding: var(--sp-3);
        border-radius: var(--r-2xl);
    }

    .cta-final__title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }
}

/* ================================================================
   REDUCED MOTION — disable hover transforms and transitions
   on the new sections for prefers-reduced-motion users.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .showcase-v2 *,
    .card-path:hover,
.case-card:hover,
.country-tile:hover,
.pricing-card-v2:hover,
.pricing-card-v2--highlighted:hover,
}

/* ============================================
   EPIC 3: NEW PAGES (Platform, Cabinet, WhiteLabel, Partners)
   ============================================
   Purely additive. Uses only :root tokens (E1 + pre-existing).
   Brand indigo #6366F1 via var(--primary). No purple in brand role.
   Desktop-first. Media queries at 900px + 600px at bottom.
   ============================================ */

/* --- 1. Shared page hero (all 4 pages) -------------------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(120px, 18vh, 200px) 0 clamp(72px, 10vh, 120px);
}.page-hero--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}.page-hero__container {
    position: relative;
    z-index: var(--z-base);
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}.page-hero--dark .page-hero__eyebrow {
    color: #A5B4FC;
}
.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    max-width: 20ch;
    color: inherit;
}.page-hero__sub {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    max-width: 640px;
    margin: var(--sp-6) 0 0;
    color: var(--text-secondary);
}
.page-hero--dark .page-hero__sub {
    color: var(--text-on-dark-muted);
}
.page-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-10);
}/* --- 2. Lead form (shared component across 4 pages) ------- */

.lead-form {
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: 100%;
}
.lead-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.lead-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.lead-form__label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}
.lead-form__input,
.lead-form__select,
.lead-form__textarea {
    font-family: var(--font);
    padding: 14px 16px;
    border: 1.5px solid var(--separator);
    border-radius: var(--r-m);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    transition: border-color var(--dur-fast) var(--ease-out-quart),
                box-shadow var(--dur-fast) var(--ease-out-quart);
    width: 100%;
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
    color: var(--text-tertiary);
}
.lead-form__input:focus,
.lead-form__select:focus,
.lead-form__textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}
.lead-form__textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--leading-normal);
}
.lead-form__submit {
    /* compose with .btn-v2.btn-v2--primary; full-width via .btn-v2--block */
    margin-top: var(--sp-2);
}
.lead-form__note {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: var(--sp-2);
    text-align: center;
    line-height: var(--leading-normal);
}
.lead-form__success {
    padding: var(--sp-5);
    background: var(--green-bg);
    border-left: 3px solid var(--green);
    border-radius: var(--r-m);
    color: var(--text);
    margin-top: var(--sp-4);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
}
.lead-form__error {
    padding: var(--sp-4);
    background: var(--red-bg);
    border-left: 3px solid var(--red);
    border-radius: var(--r-m);
    color: var(--red);
    margin-top: var(--sp-3);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
}
.lead-form.is-submitting .lead-form__submit {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* Lead form on dark backgrounds (override for /cabinet dark sections) */
.lead-form--on-dark .lead-form__label {
    color: var(--text-on-dark-muted);
}
.lead-form--on-dark .lead-form__input,
.lead-form--on-dark .lead-form__select,
.lead-form--on-dark .lead-form__textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-dark);
    color: var(--text-on-dark);
}
.lead-form--on-dark .lead-form__input::placeholder,
.lead-form--on-dark .lead-form__textarea::placeholder {
    color: var(--text-on-dark-muted);
}

/* --- 3. /platform specific -------------------------------- *//* --- 4. /cabinet specific --------------------------------- */

.cabinet-reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    max-width: 1200px;
    margin-inline: auto;
}
.cabinet-reason {
    background: var(--bg);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.cabinet-reason__num {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.cabinet-reason__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text);
    margin: 0;
}
.cabinet-reason__body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-size: 15px;
}

.cabinet-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    max-width: 1280px;
    margin-inline: auto;
}
.cabinet-step {
    position: relative;
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}
.cabinet-step__num {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 800;
}
.cabinet-step__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text);
    margin: 0;
}
.cabinet-step__body {
    font-size: 15px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    max-width: 240px;
    margin: 0;
}
.cabinet-step::after {
    content: "→";
    position: absolute;
    right: -12px;
    top: 30%;
    color: var(--text-tertiary);
    font-size: 32px;
    opacity: 0.3;
    line-height: 1;
}
.cabinet-step:last-child::after {
    display: none;
}

/* --- 5. /white-label specific ----------------------------- */

.wl-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
    max-width: 960px;
    margin-inline: auto;
}
.wl-tile {
    background: var(--bg-alt);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-xl);
    padding: var(--sp-10);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.wl-tile__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--separator);
    border-radius: var(--r-m);
    color: var(--primary);
    box-shadow: var(--shadow-s);
    flex-shrink: 0;
}
.wl-tile__icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
.wl-tile__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text);
    margin: 0;
}
.wl-tile__body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-size: 15px;
}

.wl-demo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    max-width: 1200px;
    margin-inline: auto;
}
.wl-demo-card {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--separator);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    padding: var(--sp-8);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}
.wl-demo-card--v1 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--green) 100%);
}
.wl-demo-card--v2 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--blue) 100%);
}
.wl-demo-card--v3 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
}
.wl-demo-card__brand {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
}

.wl-compare {
    max-width: 900px;
    margin-inline: auto;
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    border-radius: var(--r-l);
    overflow: hidden;
    box-shadow: var(--shadow-s);
}
.wl-compare thead th {
    background: var(--bg-alt);
    padding: var(--sp-4);
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.wl-compare tbody td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--separator-light);
    color: var(--text-secondary);
    font-size: 15px;
}
.wl-compare tbody tr:last-child td {
    border-bottom: none;
}
.wl-compare td:first-child {
    font-weight: 600;
    color: var(--text);
}
.wl-compare__check {
    color: var(--green);
    font-weight: 700;
}
.wl-compare__x {
    color: var(--red);
    font-weight: 700;
}
.wl-compare__byrequest {
    color: var(--primary);
    font-weight: 600;
}

/* --- 6. /partners specific -------------------------------- */

.partners-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    max-width: 1100px;
    margin-inline: auto;
    align-items: stretch;
}
.partners-tier {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--separator);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    transition: transform var(--dur-base) var(--ease-out-quart),
                border-color var(--dur-base) var(--ease-out-quart),
                box-shadow var(--dur-base) var(--ease-out-quart);
}
.partners-tier:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-m);
}
.partners-tier--vip {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--bg) 0%, var(--primary-light) 100%);
}
.partners-tier--vip::before {
    content: "VIP";
    position: absolute;
    top: -12px;
    right: var(--sp-6);
    background: var(--primary);
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: var(--font);
}
.partners-tier__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text);
    margin: 0;
}
.partners-tier__sub {
    font-size: 14px;
    color: var(--text-tertiary);
    margin: 0;
    font-weight: 500;
}
.partners-tier__body {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    font-size: 15px;
    flex-grow: 1;
}.partners-payout-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    max-width: 1200px;
    margin-inline: auto;
}
.partners-payout-tile {
    background: var(--bg);
    border: 1px solid var(--separator-light);
    border-radius: var(--r-l);
    padding: var(--sp-7, 28px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.partners-payout-tile__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--r-m);
    flex-shrink: 0;
}
.partners-payout-tile__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.partners-payout-tile__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--text);
    margin: 0;
}
.partners-payout-tile__body {
    font-size: 14px;
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: 0;
}

/* --- 7. Responsive ---------------------------------------- */

@media (max-width: 1024px) {
    .page-hero {
        padding: clamp(96px, 14vh, 140px) 0 var(--sp-16);
    }
    .page-hero__title {
        font-size: clamp(2rem, 6vw, 3rem);
    }    .cabinet-reasons-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    .cabinet-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-8) var(--sp-4);
    }
    .cabinet-step::after {
        display: none;
    }

    .wl-tiles-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    .wl-tile {
        padding: var(--sp-8);
    }
    .wl-demo-gallery {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    .wl-demo-card {
        font-size: 20px;
        padding: var(--sp-6);
    }

    .partners-tiers {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
    .partners-payout-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }
}

@media (max-width: 768px) {
    .page-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .page-hero__ctas > * {
        width: 100%;
    }

    .lead-form__row {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
    .lead-form__input,
    .lead-form__select,
    .lead-form__textarea {
        font-size: 16px; /* prevent iOS zoom on focus */
    }

    .cabinet-steps {
        grid-template-columns: 1fr;
    }

    .partners-payout-tiles {
        grid-template-columns: 1fr;
    }

    .wl-compare thead th,
    .wl-compare tbody td {
        padding: var(--sp-3);
        font-size: 14px;
    }
}

/* Reduced motion — disable hover transforms on Epic 3 pages */
@media (prefers-reduced-motion: reduce) {
    .partners-tier:hover {
        transform: none !important;
    }
    .partners-tier {
        transition: none !important;
    }
}

/* ============================================
   HEADER V2 (tool-first navbar matching SVG macket)
   ============================================ */
@keyframes headerV2MobileIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Responsive breakpoints for header-v2 */
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 1024px) {
}

/* Override old legacy .site-header styles ONLY when header-v2 present — prevent conflict */
body.v2-scope .promo-banner { display: none; }

/* ============================================
   FIXES: bento typography + icons + testimonials + telegram-cta
   ============================================ */

/* Bento tile hierarchy — fix oversized text and missing visuals */

/* New AI stat layout (tile B) */

/* Table-mock visual (tile C) — represents the real bulk-edit dashboard */

/* Stack tile C on mobile */
@media (max-width: 1024px) {
}

/* Path-card icon box *//* Testimonials — beautiful mock cards when /img/reviews/*.png missing
   The <img> has onerror='hide' so real screenshots render when present.
   When absent, we show a synthetic Telegram-chat-style card via ::before. *//* Telegram direct-contact CTA — reusable, shown near every lead form */
.telegram-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(34,158,217,0.08) 0%, rgba(34,158,217,0.04) 100%);
    border: 1px solid rgba(34,158,217,0.22);
    border-radius: var(--r-l, 16px);
    padding: 14px 18px;
    margin-top: var(--sp-4, 16px);
    text-decoration: none;
    color: var(--text, #1D1D1F);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.telegram-cta:hover {
    background: rgba(34,158,217,0.10);
    border-color: rgba(34,158,217,0.35);
    transform: translateY(-1px);
}.telegram-cta__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #37AEE2 0%, #1E96C8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.telegram-cta__text {
    flex: 1;
    min-width: 0;
}
.telegram-cta__label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary, #6E6E73);
    margin-bottom: 2px;
}
.telegram-cta--dark .telegram-cta__label { color: rgba(255,255,255,0.6); }
.telegram-cta__handle {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #229ED9;
}
.telegram-cta--dark .telegram-cta__handle { color: #6BBCE2; }
.telegram-cta__arrow {
    color: var(--text-tertiary, #86868B);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}
.telegram-cta:hover .telegram-cta__arrow {
    transform: translateX(3px);
    color: #229ED9;
}

/* Aurora hero presentation scaffolding for subpages that need it */
.page-hero--aurora-full {
    background: var(--bg-dark, #FAFAFA);
    color: var(--text-on-dark, #fff);
    padding: clamp(120px, 15vh, 180px) 0 clamp(80px, 10vh, 120px);
    position: relative;
    overflow: hidden;
}
.page-hero--aurora-full .page-hero__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 72px);
}
.page-hero--aurora-full .page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: var(--sp-3, 12px) 0 var(--sp-6, 24px);
}
.page-hero--aurora-full .page-hero__sub {
    font-size: 1.1875rem;
    color: var(--text-on-dark-muted, #C4C4D4);
    line-height: 1.5;
    margin-bottom: var(--sp-8, 32px);
    max-width: 560px;
}
.page-hero--aurora-full .page-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.page-hero--aurora-full .eyebrow.on-dark {
    color: #A5B4FC;
    letter-spacing: 0.15em;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}
.page-hero__visual {
    position: relative;
    z-index: 2;
}
@media (max-width: 1024px) {
    .page-hero--aurora-full .page-hero__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .page-hero__visual { max-width: 560px; }
}

/* ============================================
   GLOBAL DARK-ONLY THEME (user feedback: unified dark sections)
   Every first-block fills viewport; all alternating light blocks → dark.
   ============================================ */

/* Fullscreen hero on every page (homepage + subpages) */
.page-hero--aurora-full,
.page-hero--dark {
    min-height: 100vh;
    display: flex;
    align-items: center;            /* centered inside viewport */
    padding-block: 96px 48px;       /* tight: 96px clearance for fixed header, 48px bottom */
}
.page-hero--aurora-full .page-hero__container,
.page-hero--light .page-hero__container,
.page-hero--dark .page-hero__container {
    width: 100%;
}

/* Keep H1 + visual at same top edge (user: glass card aligned with H1,
   not eyebrow). Grid items align to start; visual column gets a push-
   down equal to eyebrow (line-height + margin-bottom) so its top lines
   up with H1 top. Eyebrow lives inside the content column. */
.page-hero--aurora-full .page-hero__container {
    align-items: start;
}
.page-hero--aurora-full .page-hero__visual {
    margin-top: calc(13px * 1.2 + 1.5rem); /* eyebrow (~16px) + margin-bottom 24px ≈ 40px */
}

/* Tame oversized titles — previously clamp(3rem,8vw,6rem) wrapped 3-4
   lines and pushed CTA below fold. Tighter scale fits 1-2 lines. */.page-hero--aurora-full .page-hero__title {
    font-size: clamp(2.25rem, 5vw, 4rem);                   /* 36-64 */
    line-height: 1.05;
    margin-top: 16px;
    margin-bottom: 20px;
}
.page-hero--aurora-full .page-hero__sub {
    font-size: 1.0625rem;                                    /* 17 */
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 520px;
}

/* Mobile: centre column stack, no push-down offset on visual */
@media (max-width: 1024px) {
    .page-hero--aurora-full .page-hero__visual {
        margin-top: 24px;
    }
}

/* Convert light page-hero variants to dark so nav stays consistent */.page-hero--light .page-hero__title { color: var(--text-on-dark); }
.page-hero--light .page-hero__sub { color: var(--text-on-dark-muted); }
.page-hero--light .eyebrow { color: #A5B4FC; }

/* Global dark override for alternating light sections when header-v2 is present */
body.v2-scope .section--light,
body.v2-scope .section--alt,
body.v2-scope .bignums-grid,
body.v2-scope .comparison-v2,
body.v2-scope .pricing-v2,
body.v2-scope .cases-grid.section--alt,
body.v2-scope .calc-card-section,
body.v2-scope .faq-v2,
body.v2-scope .platform-crosssell,
body.v2-scope .cabinet-steps-section,
body.v2-scope .cabinet-reasons-section {
    background: var(--bg-dark-elev) !important;
    color: var(--text-on-dark);
}

/* Section titles & subs on dark bg */
body.v2-scope .section--light .section-v2__title,
body.v2-scope .section--alt .section-v2__title,
body.v2-scope .bignums-grid + *,
body.v2-scope .section-v2__title {
    color: var(--text-on-dark);
}
body.v2-scope .section-v2__sub,
body.v2-scope .section-v2__header p {
    color: var(--text-on-dark-muted);
}

/* Bignums grid — keep indigo numbers, switch label to dark bg */
body.v2-scope .bignums-grid { background: var(--bg-dark); }
body.v2-scope .bignums-grid .bignum-label { color: var(--text-on-dark-muted); }
body.v2-scope .bignums-grid::before,
body.v2-scope .bignums-grid::after { border-color: rgba(99,102,241,0.25); }

/* Comparison table — dark theme */
body.v2-scope .comparison-v2 { background: var(--bg-dark-elev); }
body.v2-scope .comparison-v2__table,
body.v2-scope .comparison-v2 table { color: var(--text-on-dark); }
body.v2-scope .comparison-v2 thead th {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border-color: var(--border-dark) !important;
}
body.v2-scope .comparison-v2 tbody td {
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-on-dark);
}
body.v2-scope .comparison-v2 tr:hover td { background: rgba(99,102,241,0.06); }

/* Calc card — glass on dark */
body.v2-scope .calc-card-section { background: var(--bg-dark); }
body.v2-scope .calc-card {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
body.v2-scope .calc-card h3,
body.v2-scope .calc-card__title { color: var(--text-on-dark); }
body.v2-scope .calc-card__label,
body.v2-scope .calc-card__row-label { color: var(--text-on-dark-muted); }
body.v2-scope .calc-card__row-value,
body.v2-scope .calc-card__value { color: var(--text-on-dark); }
body.v2-scope .calc-card__slider { background: rgba(255,255,255,0.08); }
body.v2-scope .calc-card__row--total { border-top-color: var(--border-dark); }
body.v2-scope .calc-card__note { color: rgba(255,255,255,0.5); }

/* Pricing cards — dark theme */
body.v2-scope .pricing-v2 { background: var(--bg-dark); }
body.v2-scope .pricing-card-v2 {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark) !important;
}
body.v2-scope .pricing-card-v2__title { color: var(--text-on-dark); }
body.v2-scope .pricing-card-v2__sub { color: var(--text-on-dark-muted); }
body.v2-scope .pricing-card-v2__feature { color: var(--text-on-dark-muted); }
body.v2-scope .pricing-card-v2__price-sub { color: var(--text-on-dark-muted); }
body.v2-scope .pricing-card-v2__price-line2 { color: rgba(196, 196, 212, 0.55); }
/* Legacy compound price — kept for other pages still using it */
body.v2-scope .pricing-card-v2__price-compound { color: var(--text-on-dark); }
body.v2-scope .pricing-card-v2__price-compound .pricing-card-v2__price-line2 { color: var(--text-on-dark-muted); }
/* Secondary CTA buttons inside pricing cards — default secondary is dark text on transparent,
   invisible on a dark card. Force visible outline style. */
body.v2-scope .pricing-card-v2__cta.btn-v2--secondary {
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-dark);
}
body.v2-scope .pricing-card-v2__cta.btn-v2--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--text-on-dark);
}

/* FAQ — dark accordion */
body.v2-scope .faq-v2 { background: var(--bg-dark); }
body.v2-scope .faq-v2__item,
body.v2-scope .faq-v2 details {
    border-bottom-color: var(--border-dark) !important;
    color: var(--text-on-dark);
}
body.v2-scope .faq-v2__summary,
body.v2-scope .faq-v2 summary { color: var(--text-on-dark); }
body.v2-scope .faq-v2__answer,
body.v2-scope .faq-v2 details > div,
body.v2-scope .faq-v2 details > p { color: var(--text-on-dark-muted); }

/* Cases cards on dark bg */
body.v2-scope .cases-grid { background: var(--bg-dark-elev); }
body.v2-scope .case-card {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
body.v2-scope .case-card__title { color: var(--text-on-dark); }
body.v2-scope .case-card__sub { color: var(--text-on-dark-muted); }
body.v2-scope .case-card__number .label { color: var(--text-on-dark-muted); }

/* Platform cross-sell banner */
body.v2-scope .platform-crosssell { background: var(--bg-dark); }
body.v2-scope .platform-crosssell__card {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .platform-crosssell__text h3 { color: var(--text-on-dark); }
body.v2-scope .platform-crosssell__text p { color: var(--text-on-dark-muted); }

/* Platform AI cards → dark */
body.v2-scope .platform-ai-card {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .platform-ai-card__title { color: var(--text-on-dark); }
body.v2-scope .platform-ai-card__body { color: var(--text-on-dark-muted); }

/* Cabinet reasons + steps */
body.v2-scope .cabinet-reason {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .cabinet-reason__title { color: var(--text-on-dark); }
body.v2-scope .cabinet-reason__body { color: var(--text-on-dark-muted); }
body.v2-scope .cabinet-step__title { color: var(--text-on-dark); }
body.v2-scope .cabinet-step__body { color: var(--text-on-dark-muted); }

/* White-label tiles + compare */
body.v2-scope .wl-tile {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .wl-tile__title { color: var(--text-on-dark); }
body.v2-scope .wl-tile__body { color: var(--text-on-dark-muted); }
body.v2-scope .wl-tile__icon {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-dark);
    box-shadow: none;
}
body.v2-scope .wl-compare { color: var(--text-on-dark); }
body.v2-scope .wl-compare thead th {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
}
body.v2-scope .wl-compare tbody td {
    border-bottom-color: var(--border-dark) !important;
    color: var(--text-on-dark-muted);
}

/* Partners tiers + payout tiles */
body.v2-scope .partners-tier {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark) !important;
}
body.v2-scope .partners-tier__title { color: var(--text-on-dark); }
body.v2-scope .partners-tier__body { color: var(--text-on-dark-muted); }
body.v2-scope .partners-tier__sub { color: var(--text-on-dark-muted); }
body.v2-scope .partners-tier__note { color: var(--text-on-dark-muted); }
body.v2-scope .partners-tier--vip {
    background: linear-gradient(135deg, var(--bg-dark-card), rgba(99,102,241,0.12)) !important;
    border-color: rgba(99,102,241,0.4) !important;
}
body.v2-scope .partners-payout-tile {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .partners-payout-tile__title { color: var(--text-on-dark); }
body.v2-scope .partners-payout-tile__body { color: var(--text-on-dark-muted); }
body.v2-scope .partners-payout-tile__icon {
    background: rgba(99,102,241,0.15);
}

/* Lead forms on dark */
body.v2-scope .lead-form__label { color: var(--text-on-dark-muted); }
body.v2-scope .lead-form__input,
body.v2-scope .lead-form__select,
body.v2-scope .lead-form__textarea {
    background: var(--bg-dark-card);
    border-color: var(--border-dark);
    color: var(--text-on-dark);
}
body.v2-scope .lead-form__input::placeholder,
body.v2-scope .lead-form__textarea::placeholder { color: var(--text-tertiary); }
body.v2-scope .lead-form__input:focus,
body.v2-scope .lead-form__select:focus,
body.v2-scope .lead-form__textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
body.v2-scope .lead-form__note { color: var(--text-on-dark-muted); }

/* Telegram CTA — dark variant when inside header-v2 body */
body.v2-scope .telegram-cta {
    background: linear-gradient(135deg, rgba(34,158,217,0.15) 0%, rgba(34,158,217,0.08) 100%);
    border-color: rgba(34,158,217,0.28);
    color: var(--text-on-dark);
}
body.v2-scope .telegram-cta__label { color: var(--text-on-dark-muted); }
body.v2-scope .telegram-cta__handle { color: #229ED9; }
body.v2-scope .telegram-cta__arrow { color: var(--text-tertiary); }

/* Section-v2 container: consistent vertical rhythm on dark */
body.v2-scope .section-v2 { background: var(--bg-dark); }
body.v2-scope section[class*="section--"] { color: var(--text-on-dark); }

/* Body background keeps consistent dark base */
body.v2-scope { background: var(--bg-dark); color: var(--text-on-dark); }

/* Overrides for managed-service-premium section — convert hero to new style *//* Inline results-bar in managed-service (the stats inline-styled box) *//* Guides / blog page dark override */
body.v2-scope main,
body.v2-scope .academy-hero,
body.v2-scope .guide-section,
body.v2-scope .category-filters,
body.v2-scope .guides-grid-section,
body.v2-scope .guides-section {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}
body.v2-scope .academy-hero h1 { color: var(--text-on-dark); }
body.v2-scope .academy-hero p,
body.v2-scope .guide-card p,
body.v2-scope .guide-card .guide-excerpt { color: var(--text-on-dark-muted); }
body.v2-scope .guide-card {
    background: var(--bg-dark-card) !important;
    border: 1px solid var(--border-dark);
    color: var(--text-on-dark);
}
body.v2-scope .guide-card h3,
body.v2-scope .guide-card__title { color: var(--text-on-dark); }
body.v2-scope .category-filter,
body.v2-scope .category-chip {
    background: var(--bg-dark-card);
    border: 1px solid var(--border-dark);
    color: var(--text-on-dark-muted);
}
body.v2-scope .category-filter.active,
body.v2-scope .category-chip.active {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: #A5B4FC;
}

/* ============================================
   FIXES 2: telegram-cta width, testimonials, comparison wrap,
   blog article dark theme, form consistency
   ============================================ */

/* Telegram CTA sits inside lead-form → must span full width like submit */
.lead-form .telegram-cta,
form .telegram-cta {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    margin-top: var(--sp-3, 12px);
}
/* When telegram-cta lives as sibling of the form (our current markup),
   match form width and center the block under the form */
.lead-form + .telegram-cta,
form + .telegram-cta {
    display: flex;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    margin-top: var(--sp-4, 16px);
    box-sizing: border-box;
}

/* Testimonial cards — Telegram DARK-theme chat mock, 4-column horizontal
   row. Card bg uses Telegram dark palette (#17212B); incoming bubbles
   darker gray, outgoing bubbles Telegram-blue. *//* 4-column horizontal grid at desktop. Collapses at smaller widths. */


/* Comparison table wrapper — eliminate white card bg on dark theme */
body.v2-scope .comparison-v2__table-wrap,
body.v2-scope .comparison-v2 .table-wrapper,
body.v2-scope .comparison-v2 .comparison-v2__table {
    background: var(--bg-dark-elev) !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: var(--r-xl) !important;
    overflow: hidden;
}
body.v2-scope .comparison-v2__table {
    background: var(--bg-dark-elev) !important;
    color: var(--text-on-dark);
}
body.v2-scope .comparison-v2 tbody tr:last-child td {
    border-bottom: none !important;
}
body.v2-scope .comparison-v2 .comparison-v2__x { color: #ef4444; }
body.v2-scope .comparison-v2 .comparison-v2__check { color: #22c55e; }
body.v2-scope .comparison-v2 td {
    background: transparent !important;
}

/* Blog article pages (/guides/<slug>.html) — dark theme overrides
   Triggered when page uses header-v2 include. */
body.v2-scope {
    /* Article body text tones on dark */
    --article-bg: var(--bg-dark);
    --article-card: var(--bg-dark-card);
    --article-text: var(--text-on-dark);
    --article-muted: var(--text-on-dark-muted);
}
body.v2-scope .article,
body.v2-scope .guide-article,
body.v2-scope .article-page,
body.v2-scope .article-hero,
body.v2-scope .article-content,
body.v2-scope .article-layout,
body.v2-scope .breadcrumbs,
body.v2-scope .related-guides,
body.v2-scope .guide-content,
body.v2-scope .guide-hero {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark);
}
body.v2-scope .article-title,
body.v2-scope .article-content h1,
body.v2-scope .article-content h2,
body.v2-scope .article-content h3,
body.v2-scope .article-content h4,
body.v2-scope .guide-content h1,
body.v2-scope .guide-content h2,
body.v2-scope .guide-content h3,
body.v2-scope .guide-content h4,
body.v2-scope .article-hero h1,
body.v2-scope .related-guides h3,
body.v2-scope .related-guides-title,
body.v2-scope .sidebar-title {
    color: var(--text-on-dark) !important;
}
body.v2-scope .article-content,
body.v2-scope .article-content p,
body.v2-scope .article-content li,
body.v2-scope .guide-content,
body.v2-scope .guide-content p,
body.v2-scope .guide-content li {
    color: rgba(255,255,255,0.82) !important;
}
body.v2-scope .article-meta,
body.v2-scope .article-category,
body.v2-scope .breadcrumbs,
body.v2-scope .article-date,
body.v2-scope .reading-time {
    color: var(--text-on-dark-muted) !important;
}
body.v2-scope .article-content blockquote,
body.v2-scope .guide-content blockquote {
    background: var(--bg-dark-card) !important;
    border-left: 3px solid var(--primary);
    color: var(--text-on-dark);
    border-radius: var(--r-m);
    padding: var(--sp-5) var(--sp-6);
}
body.v2-scope .article-content pre,
body.v2-scope .guide-content pre,
body.v2-scope .article-content code,
body.v2-scope .guide-content code {
    background: var(--bg-dark-card) !important;
    color: #A5B4FC !important;
    border: 1px solid var(--border-dark);
}
body.v2-scope .article-content table,
body.v2-scope .guide-content table {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark);
}
body.v2-scope .article-content table th {
    background: rgba(99,102,241,0.1) !important;
    color: var(--text-on-dark);
}
body.v2-scope .article-content table td {
    border-color: var(--border-dark) !important;
}
body.v2-scope .article-content a,
body.v2-scope .guide-content a {
    color: #A5B4FC !important;
    text-decoration: underline;
    text-decoration-color: rgba(165, 180, 252, 0.4);
}
body.v2-scope .article-content a:hover,
body.v2-scope .guide-content a:hover {
    color: #C7D2FE !important;
    text-decoration-color: #C7D2FE;
}
body.v2-scope .back-to-guides,
body.v2-scope .article-back,
body.v2-scope a[href="/guides"],
body.v2-scope a[href="/ru/guides"],
body.v2-scope a[href="/guides.html"],
body.v2-scope a[href="/ru/guides.html"] {
    color: var(--text-on-dark-muted);
}
body.v2-scope .related-guides,
body.v2-scope .article-sidebar {
    background: transparent !important;
    color: var(--text-on-dark);
}
body.v2-scope .related-guides a,
body.v2-scope .article-sidebar a {
    color: var(--text-on-dark) !important;
    text-decoration: none;
}
body.v2-scope .related-guides a:hover {
    color: #A5B4FC !important;
}
body.v2-scope .article-hero {
    padding-top: clamp(120px, 15vh, 160px);
}
body.v2-scope hr,
body.v2-scope .article-content hr,
body.v2-scope .guide-content hr {
    border-color: var(--border-dark) !important;
    background: var(--border-dark);
}

/* ============================================
   FIXES 3: override managed-service inline white styles
   ============================================ */

/* Section wrappers with inline light gradient / pale bg */
body.v2-scope section[style*="background: linear-gradient(135deg, #f0f0ff"],
body.v2-scope section[style*="background:#f8fafc"],
body.v2-scope section[style*="background: #f8fafc"] {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark);
}

/* Heading + paragraph text color inside those sections */
body.v2-scope section[style*="background: linear-gradient(135deg, #f0f0ff"] h2,
body.v2-scope section[style*="background:#f8fafc"] h2,
body.v2-scope section[style*="background: #f8fafc"] h2 {
    color: var(--text-on-dark) !important;
}
body.v2-scope section[style*="background: linear-gradient(135deg, #f0f0ff"] p,
body.v2-scope section[style*="background:#f8fafc"] p,
body.v2-scope section[style*="background: #f8fafc"] p {
    color: var(--text-on-dark-muted) !important;
}

/* Country flag tiles + any inline white div → dark card */
body.v2-scope div[style*="background:#fff"],
body.v2-scope div[style*="background: #fff"],
body.v2-scope div[style*="background: white"],
body.v2-scope div[style*="background:white"] {
    background: var(--bg-dark-card) !important;
    color: var(--text-on-dark) !important;
    border: 1px solid var(--border-dark);
    box-shadow: none !important;
}

/* Inline flex-box with --bg-alt background */
body.v2-scope div[style*="background:var(--bg-alt)"],
body.v2-scope div[style*="background: var(--bg-alt)"] {
    background: rgba(99, 102, 241, 0.06) !important;
    color: var(--text-on-dark) !important;
    border: 1px solid var(--border-dark);
}
body.v2-scope div[style*="background:var(--bg-alt)"] *,
body.v2-scope div[style*="background: var(--bg-alt)"] * {
    color: var(--text-on-dark) !important;
}

/* Nested inline child text that was styled with --text-secondary/--text-primary */
body.v2-scope div[style*="color:var(--text-primary)"],
body.v2-scope div[style*="color: var(--text-primary)"] {
    color: var(--text-on-dark) !important;
}
body.v2-scope div[style*="color:var(--text-secondary)"],
body.v2-scope div[style*="color: var(--text-secondary)"] {
    color: var(--text-on-dark-muted) !important;
}
body.v2-scope div[style*="color:var(--text-tertiary)"],
body.v2-scope div[style*="color: var(--text-tertiary)"] {
    color: rgba(255, 255, 255, 0.5) !important;
}
/* Pricing card borders on managed-service */
body.v2-scope div[style*="border:2px solid var(--primary)"] {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18),
                0 20px 60px rgba(99, 102, 241, 0.18) !important;
}
body.v2-scope div[style*="border:2px solid #e5e7eb"],
body.v2-scope div[style*="border:2px solid #111"],
body.v2-scope div[style*="border:2px solid #000"] {
    border-color: var(--border-dark) !important;
}
/* "ВЕДЕНИЕ РЕКЛАМЫ" pill & "EURO CABINET OPENING" pill — keep bright */
body.v2-scope div[style*="background:var(--primary)"],
body.v2-scope div[style*="background: var(--primary)"] {
    background: var(--primary) !important;
    color: #fff !important;
    border: 0;
}
body.v2-scope div[style*="background:#111"],
body.v2-scope div[style*="background: #111"] {
    background: #FFFFFF !important;
    color: #fff !important;
}

/* FAQ answer padding box on managed-service */
body.v2-scope .faq-answer[style*="color: #475569"],
body.v2-scope div[style*="color: #475569"] {
    color: var(--text-on-dark-muted) !important;
}

/* Big-number stat box with inline white children *//* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 TOKENS & ETHER SYSTEM
   Foundation for Hero v3 + Killer Features. Additive; legacy vars intact.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Typography */
  --font-sans-new: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono-new: 'JetBrains Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Ether palette */
  --r26-bg: #FAFAFA;
  --r26-ink: #0A0A0A;
  --r26-text-dim: #6B7280;
  --r26-hairline: #EAEAEA;
  --r26-border: #D2D2D7;
  --r26-electric: #3B82F6;
  --r26-iris: #6366F1;
  --r26-cyan: #22D3EE;
  --r26-amber: #F59E0B;
  --r26-primary-soft: rgba(99, 102, 241, 0.08);
  --r26-primary-border: rgba(99, 102, 241, 0.30);

  /* Motion */
  --r26-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --r26-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --r26-dur-fast: 120ms;
  --r26-dur-base: 200ms;
  --r26-dur-slow: 400ms;

  /* Shadows */
  --r26-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --r26-shadow-md: 0 1px 2px rgba(10, 10, 10, 0.04), 0 8px 24px -6px rgba(10, 10, 10, 0.06);
  --r26-shadow-lg: 0 1px 2px rgba(10, 10, 10, 0.04), 0 24px 48px -12px rgba(10, 10, 10, 0.08);
  --r26-shadow-cta: 0 1px 2px rgba(10, 10, 10, 0.08), 0 4px 12px rgba(99, 102, 241, 0.12);
}

/* Ether background utility — pure CSS, 0 JS, GPU-composited */
.r26-ether {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(640px 640px at -12% -20%, rgba(99, 102, 241, 0.32), transparent 70%),
    radial-gradient(520px 520px at 72% 8%, rgba(59, 130, 246, 0.28), transparent 70%),
    radial-gradient(380px 380px at 38% 88%, rgba(34, 211, 238, 0.22), transparent 70%),
    var(--r26-bg);
  filter: blur(0);
  will-change: transform;
  contain: layout paint style;
}
.r26-ether::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/img/grain.svg');
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .r26-ether {
    animation: r26EtherDrift 32s ease-in-out infinite alternate;
  }
  @keyframes r26EtherDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-2%, 1%, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .r26-ether { animation: none !important; }
}

/* Mono utilities */
.r26-mono-digit {
  font-family: var(--font-mono-new);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.r26-eyebrow {
  font-family: var(--font-mono-new);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r26-text-dim);
  line-height: 1;
}
.r26-eyebrow::before {
  content: "• ";
  color: var(--r26-cyan);
  margin-right: 2px;
}
@media (max-width: 768px) {
  .r26-eyebrow { font-size: 11px; }
}

/* Hairline border util */
.r26-hairline { border: 1px solid var(--r26-hairline); }

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 — HERO V3
   Section replacing legacy .hero-v2. Appended — do not edit above.
   ═══════════════════════════════════════════════════════════════════ */
.hero-v3 {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  max-height: 100vh;
  padding: 96px 64px 120px;
  background: var(--r26-bg);
}
.hero-v3__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  column-gap: 80px;
  align-items: center;
}
.hero-v3__content { min-width: 0; }
.hero-v3__title {
  font-family: var(--font-sans-new);
  font-size: clamp(40px, 6vw + 8px, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--r26-ink);
  max-width: 14ch;
  margin: 24px 0 20px;
}.hero-v3__sub {
  font-family: var(--font-sans-new);
  font-size: clamp(16px, 1.2vw + 8px, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--r26-text-dim);
  max-width: 52ch;
  margin: 0 0 40px;
}
.hero-v3__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-v3__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: var(--r26-ink);
  color: #fff;
  border-radius: 10px;
  font-family: var(--font-sans-new);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--r26-shadow-cta);
  transition: transform 200ms var(--r26-ease-spring), box-shadow 200ms ease;
}
.hero-v3__cta-primary:hover { transform: scale(1.02); }
.hero-v3__cta-primary span[aria-hidden] { font-size: 14px; line-height: 1; }
.hero-v3__cta-secondary {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--r26-hairline);
  border-radius: 10px;
  font-family: var(--font-sans-new);
  font-size: 15px;
  font-weight: 500;
  color: var(--r26-ink);
  text-decoration: none;
  background: transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.hero-v3__cta-secondary:hover {
  border-color: var(--r26-border);
  background: var(--r26-bg);
}

/* [removed] .hero-v3__preview/rows/ticker/avatar/status/dot dashboard widget —
   homepage now uses .hero-v4 (single-column with embedded path cards).
   .hero-v3 base styles are kept for /platform.html and /cabinet.html. */

/* Mobile — hero-v3 base (still used by platform/cabinet pages) */
@media (max-width: 1024px) {
  .hero-v3 {
    min-height: 640px;
    max-height: none;
    padding: 56px 24px 48px;
  }
  .hero-v3__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
  }
  .hero-v3__title { margin: 20px 0 16px; line-height: 1.05; letter-spacing: -0.03em; }
  .hero-v3__sub { margin: 0 0 28px; }
  .hero-v3__ctas {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .hero-v3__cta-primary,
  .hero-v3__cta-secondary {
    width: 100%;
    height: 52px;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO V4 — single centered column, absorbed path chooser
   Homepage only. Light theme, Linear/Vercel minimal.
   ═══════════════════════════════════════════════════════════════════ */
/* Head block */
/* Paths grid */
/* Card — whole anchor is clickable */
@media (hover: hover) {
}
/* CTA — embedded in card, full-width, primary solid */
@media (hover: hover) {
}

/* Managed line — entire block is one anchor, muted inline link */
@media (hover: hover) {
}
/* Trust bar — horizontal separated by dots */
/* Hero entry stagger — motion-safe */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroV4Entry {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Desktop — cap min-height on tall viewports to avoid dead space */
@media (min-width: 769px) {
}

/* Tablet */
@media (max-width: 1024px) {
}

/* Narrow tablet — stack trust bar 2×2 earlier to avoid 3+1 awkward wrap */
@media (max-width: 768px) and (min-width: 769px) {
}

/* Mobile — iPhone SE 375px
   Short viewports (≤720px tall) can't hold the whole hero when stacked,
   so relax min-height to auto and let content flow naturally. */
@media (max-width: 768px) {
  /* Need-cabinet card first on mobile (higher TAM/LTV audience) */
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 — KILLER FEATURES (kf-v3)
   4-card bento: 1 wide (F8) + 3 standard (F5/F4/F2)
   ═══════════════════════════════════════════════════════════════════ */
/* Wide card visual */
/* Hover — desktop only */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
}

/* Mobile */
@media (max-width: 768px) {
}


/* === REDESIGN-2026: PLATFORM PAGE (Commit #6) ===
   Namespace: .platform-hero, .platform-cta, .feature-deep*
   Does not collide with .hero-v3 (homepage) or .kf-v3 (killer features).
   ================================================================ */

/* -- Platform Hero -- */
.platform-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 64px;
  background: #fff;
}
.platform-hero__inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.platform-hero .r26-eyebrow {
  justify-content: center;
  margin-bottom: 24px;
  display: inline-block;
}
.platform-hero h1 {
  font-family: var(--font-sans-new);
  font-size: clamp(40px, 5vw + 16px, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--r26-ink);
  margin: 0 0 20px;
}
.platform-hero__sub {
  font-family: var(--font-sans-new);
  font-size: 20px;
  line-height: 1.5;
  color: var(--r26-text-dim);
  max-width: 640px;
  margin: 0 auto 36px;
}
.platform-hero__ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}@media (max-width: 768px) {
  .platform-hero { padding: 56px 24px; }
  .platform-hero__sub { font-size: 17px; margin-bottom: 28px; }
}

/* -- Feature Deep Sections -- */
.feature-deep {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 64px;
  display: block;
  position: relative;
}
.feature-deep__content > * + * { margin-top: 16px; }
.feature-deep__eyebrow {
  font-family: var(--font-mono-new);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r26-iris);
  line-height: 1;
  display: inline-block;
  margin-bottom: 8px;
}
.feature-deep h2 {
  font-family: var(--font-sans-new);
  font-size: clamp(32px, 3vw + 12px, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--r26-ink);
  margin: 0 0 8px;
}
.feature-deep__lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--r26-text-dim);
  max-width: 56ch;
  margin: 0;
}
.feature-deep__stat {
  font-family: var(--font-mono-new);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r26-iris);
  margin: 16px 0;
  padding: 8px 16px;
  background: var(--r26-primary-soft);
  border-radius: 6px;
  display: inline-block;
}.feature-deep__visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--r26-bg);
  border: 1px solid var(--r26-hairline);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--r26-shadow-md);
}
.feature-deep__visual img,
.feature-deep__visual svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.feature-deep__faq { margin-top: 24px; }
.feature-deep__faq details {
  border: 1px solid var(--r26-hairline);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff;
}
.feature-deep__faq details[open] { border-color: var(--r26-primary-border); }
.feature-deep__faq summary {
  font-family: var(--font-sans-new);
  font-weight: 500;
  cursor: pointer;
  color: var(--r26-ink);
  font-size: 15px;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.feature-deep__faq summary::-webkit-details-marker { display: none; }
.feature-deep__faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono-new);
  font-size: 18px;
  color: var(--r26-text-dim);
  transition: transform var(--r26-dur-base) var(--r26-ease-out-expo);
}
.feature-deep__faq details[open] summary::after { content: "−"; }
.feature-deep__faq details > p {
  color: var(--r26-text-dim);
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
}
.feature-deep__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--r26-iris);
  font-family: var(--font-sans-new);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--r26-primary-border);
  padding-bottom: 2px;
  transition: border-color var(--r26-dur-base) var(--r26-ease-out-expo);
}
.feature-deep__cta:hover { border-color: var(--r26-iris); }

/* Desktop: alternate visual left/right per section */
@media (min-width: 1025px) {
  .feature-deep:nth-child(even) .feature-deep__visual { order: -1; }
}

/* Featured section (F8 — Invitation Links) */
.feature-deep--featured {
  background: var(--r26-bg);
  border-radius: 24px;
  padding: 96px;
  border: 1px solid var(--r26-hairline);
  margin-top: 48px;
  margin-bottom: 48px;
}
.feature-deep--featured .feature-deep__eyebrow { color: var(--r26-cyan); }
.feature-deep--featured .feature-deep__stat {
  background: rgba(34, 211, 238, 0.1);
  color: #0891B2;
}

/* Mobile layout */
@media (max-width: 1024px) {
  .feature-deep {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 32px;
  }
  .feature-deep--featured { padding: 48px 24px; border-radius: 16px; }
  .feature-deep h2 { font-size: 28px; }
  .feature-deep__lead { font-size: 16px; }}

/* -- Platform final CTA -- */
.platform-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 64px;
  text-align: center;
  background: var(--r26-ink);
  color: #fff;
  margin-top: 96px;
}
.platform-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.platform-cta .r26-eyebrow {
  color: var(--r26-cyan);
  margin-bottom: 24px;
}
.platform-cta h2 {
  font-family: var(--font-sans-new);
  font-size: clamp(36px, 4vw + 12px, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 20px;
  color: #fff;
}
.platform-cta__sub {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto 36px;
  max-width: 560px;
}
.platform-cta__ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.platform-cta__btn--primary,
.platform-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-family: var(--font-sans-new);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--r26-dur-base) var(--r26-ease-out-expo);
}
.platform-cta__btn--primary {
  background: #fff;
  color: var(--r26-ink);
}
.platform-cta__btn--primary:hover {
  transform: translateY(-1px);
  background: var(--r26-bg);
}
.platform-cta__btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.platform-cta__btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
  .platform-cta { padding: 72px 24px; margin-top: 48px; }
  .platform-cta__sub { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 — XREF STRIP (cross-reference pill nav on secondary pages)
   Appended. Namespaced as .xref-* to avoid collision with other agents.
   ═══════════════════════════════════════════════════════════════════ */
.xref-strip { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.xref-strip__inner { text-align: center; }
.xref-strip__title { font-family: var(--font-sans-new); font-size: clamp(24px, 2vw + 12px, 32px); font-weight: 600; letter-spacing: -0.025em; margin: 12px 0 24px; }
.xref-strip__pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xref-strip__pills a { display: inline-flex; padding: 8px 16px; border: 1px solid var(--r26-hairline); border-radius: 999px; font-family: var(--font-sans-new); font-size: 13px; font-weight: 500; color: var(--r26-ink); text-decoration: none; transition: border-color 200ms, background 200ms; }
.xref-strip__pills a:hover { border-color: var(--r26-primary-border); background: var(--r26-primary-soft); color: var(--r26-iris); }

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 — PLATFORM HERO + FEATURE-DEEP (RU platform mirror fallback)
   Minimal styling since Agent B owns the EN. These fallbacks keep
   ru/platform.html legible if CSS gets regenerated before EN lands.
   ═══════════════════════════════════════════════════════════════════ */
.platform-hero { position: relative; padding: 96px 24px 64px; max-width: 1200px; margin: 0 auto; text-align: center; }
.platform-hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.platform-hero__title { font-family: var(--font-sans-new); font-size: clamp(32px, 3.5vw + 10px, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--r26-ink); margin: 16px 0 20px; }
.platform-hero__sub { font-family: var(--font-sans-new); font-size: clamp(16px, 1vw + 8px, 20px); color: var(--r26-text-dim); max-width: 56ch; margin: 0 auto 32px; line-height: 1.5; }
.platform-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.feature-deep { padding: 64px 24px; border-top: 1px solid var(--r26-hairline); }
.feature-deep__inner { max-width: 860px; margin: 0 auto; }
.feature-deep__title { font-family: var(--font-sans-new); font-size: clamp(28px, 2.5vw + 10px, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--r26-ink); margin: 12px 0 16px; }
.feature-deep__lead { font-family: var(--font-sans-new); font-size: clamp(16px, 0.7vw + 10px, 18px); color: var(--r26-text-dim); line-height: 1.55; max-width: 56ch; margin: 0 0 16px; }
.feature-deep__stat { font-family: var(--font-mono-new); font-size: 12px; letter-spacing: 0.04em; color: var(--r26-iris); margin: 0 0 24px; }.feature-deep__faq { border-top: 1px solid var(--r26-hairline); padding: 12px 0; }
.feature-deep__faq summary { font-family: var(--font-sans-new); font-size: 15px; font-weight: 500; color: var(--r26-ink); cursor: pointer; list-style: none; }
.feature-deep__faq summary::-webkit-details-marker { display: none; }
.feature-deep__faq p { font-family: var(--font-sans-new); font-size: 14px; color: var(--r26-text-dim); margin: 8px 0 0; line-height: 1.55; }
.feature-deep--featured { background: var(--r26-primary-soft); }
.feature-deep--featured .feature-deep__title { color: var(--r26-iris); }

/* === REDESIGN-2026 COMMIT #6 — FINAL OVERRIDES (EN platform) ===
   Agent B appends AFTER the RU-fallback block to re-assert EN grid layout,
   hero sizing, visual placement, and featured section styling for /platform.html.
   ================================================================ */
.platform-hero { padding: 96px 64px; max-width: none; }
.platform-hero__inner { max-width: 960px; }
.platform-hero h1 { font-family: var(--font-sans-new); font-size: clamp(40px, 5vw + 16px, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 20px; color: var(--r26-ink); }
.platform-hero__sub { font-size: 20px; max-width: 640px; margin: 0 auto 36px; }
@media (max-width: 768px) {
  .platform-hero { padding: 56px 24px; }
  .platform-hero__sub { font-size: 17px; margin-bottom: 28px; }
}

.feature-deep {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 64px;
  display: block;
  border-top: none;
  position: relative;
}
.feature-deep__content > * + * { margin-top: 16px; }
.feature-deep__eyebrow {
  font-family: var(--font-mono-new);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--r26-iris);
  line-height: 1;
  display: inline-block;
  margin-bottom: 8px;
}
.feature-deep h2 {
  font-family: var(--font-sans-new);
  font-size: clamp(32px, 3vw + 12px, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--r26-ink);
  margin: 0 0 8px;
}
.feature-deep__lead { font-size: 18px; line-height: 1.5; color: var(--r26-text-dim); max-width: 56ch; margin: 0; }
.feature-deep__stat {
  font-family: var(--font-mono-new);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r26-iris);
  margin: 16px 0;
  padding: 8px 16px;
  background: var(--r26-primary-soft);
  border-radius: 6px;
  display: inline-block;
}.feature-deep__visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--r26-bg);
  border: 1px solid var(--r26-hairline);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--r26-shadow-md);
}
.feature-deep__visual img, .feature-deep__visual svg { max-width: 100%; max-height: 100%; display: block; }
.feature-deep__faq { margin-top: 24px; border-top: none; padding: 0; }
.feature-deep__faq details {
  border: 1px solid var(--r26-hairline);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff;
}
.feature-deep__faq details[open] { border-color: var(--r26-primary-border); }
.feature-deep__faq summary { position: relative; padding-right: 24px; }
.feature-deep__faq summary::after { content: "+"; position: absolute; right: 0; top: 0; font-family: var(--font-mono-new); font-size: 18px; color: var(--r26-text-dim); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.feature-deep__faq details[open] summary::after { content: "−"; }
.feature-deep__faq details > p { color: var(--r26-text-dim); margin-top: 12px; font-size: 15px; line-height: 1.6; }
.feature-deep__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--r26-iris);
  font-family: var(--font-sans-new);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--r26-primary-border);
  padding-bottom: 2px;
  transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-deep__cta:hover { border-color: var(--r26-iris); }
@media (min-width: 1025px) {
  .feature-deep:nth-child(even) .feature-deep__visual { order: -1; }
}
.feature-deep--featured {
  background: var(--r26-bg);
  border-radius: 24px;
  padding: 96px;
  border: 1px solid var(--r26-hairline);
  margin-top: 48px;
  margin-bottom: 48px;
}
.feature-deep--featured .feature-deep__eyebrow { color: var(--r26-cyan); }
.feature-deep--featured .feature-deep__stat { background: rgba(34, 211, 238, 0.1); color: #0891B2; }
@media (max-width: 1024px) {
  .feature-deep { grid-template-columns: 1fr; padding: 48px 24px; gap: 32px; }
  .feature-deep--featured { padding: 48px 24px; border-radius: 16px; }
  .feature-deep h2 { font-size: 28px; }
  .feature-deep__lead { font-size: 16px; }}

/* ═══════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN-2026 CLEAN OVERRIDE (replaces Wave 2-6)
   — Soft ink #1F1F1F (not harsh #0A0A0A)
   — Body stays light via CSS vars (already set --bg-dark: #FAFAFA at :root)
   — Header light
   — Hero v3 100vh + 3 CTAs
   — NO forced section/card backgrounds — let original design breathe
   — NO global !important text colors
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --r26-ink-soft: #1F1F1F;   /* softer than pure black */
    --text: #1F1F1F;            /* redefine base text token */
    --text-primary: #1F1F1F;
    --text-on-dark: #1F1F1F;    /* on-dark used for text on now-light sections */
    --r26-ink: #1F1F1F;
}

/* Ensure body/html light (override stale body.v2-scope dark base) */
html, body, body.v2-scope {
    background: #fff;
    color: #1F1F1F;
}

/* ── Header: light theme ── */
/* Language switcher — light theme (header is white, original rules
   assumed dark bg and rendered white-on-white) */
/* ── Hero v3: 100vh + 3 CTAs ── */
.hero-v3 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 112px 64px 80px;
}
@media (max-width: 768px) {
    .hero-v3 {
        min-height: calc(100vh - 72px);
        padding: 96px 24px 48px;
    }
}
.hero-v3__ctas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    max-width: 680px;
}
@media (max-width: 768px) { .hero-v3__ctas { grid-template-columns: 1fr; } }
.hero-v3__cta-primary,
.hero-v3__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 20px;
    font-family: var(--font-sans-new, var(--font, inherit));
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms;
    white-space: nowrap;
}
.hero-v3__cta-primary {
    background: #1F1F1F;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(99,102,241,0.12);
}
.hero-v3__cta-primary:hover { background: #2A2A2A; transform: scale(1.02); }
.hero-v3__cta-secondary {
    background: #6366F1;
    color: #fff;
}
.hero-v3__cta-secondary:hover { background: #5558E8; }/* Hero-v3 title/sub: soft ink */
.hero-v3__title { color: #1F1F1F; }
.hero-v3__sub { color: #6B7280; }/* ── Primary CTAs globally (prevent broken white-on-light) ── */
.btn-v2--primary, .btn-v2.btn-v2--primary, .lead-form__submit, .calc-card__cta {
    background: #1F1F1F;
    color: #fff;
    border: 0;
}
.btn-v2--primary:hover { background: #2A2A2A; }

/* ── Form fields: visible placeholder ── */
.lead-form input,
.lead-form textarea,
.lead-form select {
    background: #fff;
    color: #1F1F1F;
    border: 1px solid #D2D2D7;
}
.lead-form input::placeholder, .lead-form textarea::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

/* ── Country tiles ── */
.country-tile {
    background: #fff;
    border: 1px solid #EAEAEA;
    color: #1F1F1F;
}
.country-tile__name { color: #1F1F1F; }

/* ── Managed premium hero — soft flow (no hard edges) ── *//* ── Remove hard stripes between sections: smooth gradient linking ── */
section + section { border-top: 0; }

/* ── Soft ink for all headings (global, not scoped) ── */
h1, h2, h3, h4, h5, h6 { color: #1F1F1F; }

/* ── Telegram CTA button — Telegram brand blue ── *//* ── Kill hard borders between cards: softer shadows ── */
.card-path,
.case-card,
.feature-deep,
.pricing-card-v2,
.calc-card {
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -8px rgba(0,0,0,0.04);
    border: 1px solid rgba(234, 234, 234, 0.6);
}

/* ── Smooth page-level gradient background to prevent "stripe" edges ── */
body.v2-scope {
    background: linear-gradient(180deg, #fff 0%, #FAFAFA 50%, #fff 100%);
    background-attachment: fixed;
}

/* ── Ghost button — visible border ── */
.btn-v2--ghost, .btn-v2.btn-v2--ghost, .btn-v2--ghost.on-dark {
    background: #fff;
    color: #1F1F1F;
    border: 1px solid #D2D2D7;
}
.btn-v2--ghost:hover { background: #FAFAFA; border-color: rgba(99,102,241,0.30); color: #6366F1; }

/* ── on-dark class — just ensure text is readable ── */
.on-dark { color: #1F1F1F; }
.section-v2__sub.on-dark, p.on-dark { color: #6B7280; }

/* ═══════════════════════════════════════════════════════════════════
   AUDIT WAVE 7: Fix white-on-white titles + invisible form text + dark heroes
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Managed-premium title — was linear-gradient white. Force soft ink. *//* 2. Page-hero--dark / aurora — force light theme */
.page-hero,
.page-hero--dark,
.page-hero--aurora-full {
    background: linear-gradient(180deg, #fff 0%, #FAFAFA 100%) !important;
    color: #1F1F1F !important;
}
.page-hero--dark .page-hero__eyebrow {
    color: #6366F1 !important;
}
.page-hero__title,
.page-hero--dark .page-hero__title {
    color: #1F1F1F !important;
}
.page-hero__sub,
.page-hero--dark .page-hero__sub {
    color: #6B7280 !important;
}/* 3. Page hero titles with aurora backgrounds — remove dark overlays */
.page-hero--aurora-full::before,
.page-hero--aurora-full::after {
    display: none !important;
}

/* 4. Managed-form section — all labels visible *//* Managed cost block — "СТОИМОСТЬ" label + "Фиксированная ежемесячная плата" *//* "+10% от рекламного бюджета" highlighted block *//* 5. Form inputs — visible borders + placeholder */
.lead-form input,
.lead-form textarea,
.lead-form select {
    background: #ffffff !important;
    color: #1F1F1F !important;
    border: 1px solid #D2D2D7 !important;
    font-size: 15px;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}
.lead-form input:focus,
.lead-form textarea:focus {
    border-color: #6366F1 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* 6. "Получите персональный план" title + subtitle in form */
.lead-form h2,
.lead-form h3 {
    color: #1F1F1F !important;
}/* 7. Steps section "Как это работает" — step titles + descriptions */

/* Hide the connector line drawn via ::after — doesn't align with padded
   cards and leaves a stray dash between tiles *//* ============================================
   20. Managed pricing card — simplified layout
       Inline "+10%" pill next to price, compact Telegram link
       (instead of full-width button), consolidated trust footer.
   ============================================ *//* ============================================
   21. Managed → Cabinet cross-link card
   ============================================ *//* ============================================
   22. Global scale tighten (user feedback: «как будто 200% zoom»)
       Reduces the oversized vertical padding on sections down by ~35%.
       Was: clamp(80px,10vh,128px)   → 160–256px stack between sections
       Now: clamp(48px,7vh,88px)     → 96–176px stack between sections
       Hero padding tightened as well. Only affects sections using the
       standard patterns — custom/inline ones are untouched.
   ============================================ */
.section-v2 { padding: clamp(48px, 7vh, 88px) 0 !important; }
.page-hero--aurora-full,
.page-hero--dark {
    padding-block: clamp(80px, 11vh, 128px) clamp(32px, 5vh, 56px) !important;
}
.cases-grid { padding: clamp(48px, 7vh, 88px) 0 !important; }
.comparison-v2,
.pricing-v2,
.faq-v2,
.calc-card-section {
    padding: clamp(48px, 7vh, 88px) 0 !important;
}
/* Section vertical rhythm: trim mega-headers margin */
.section-v2__header { margin-bottom: clamp(24px, 4vh, 48px) !important; }
/* H2 size: was clamp() going up to 48-56px, feels huge on laptops */
.section-v2__title { font-size: clamp(22px, 2.2vw + 8px, 34px) !important; }
/* Container horizontal padding on tight mobile */
@media (max-width: 480px) {
    .section-v2__container { padding-inline: 16px !important; }
}

/* 8. Hero split dark (white-label, partners) — light conversion *//* 9. Glass card on cabinet hero — keep light */
.hero-glass__card,
.glass-card__inner,
.hero-euro-card {
    background: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    color: #1F1F1F !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -12px rgba(0,0,0,0.08);
}
.hero-glass__card *,
.glass-card__inner *,
.hero-euro-card * {
    color: inherit;
}
.hero-euro-card h3,
.hero-glass__card h3 {
    color: #1F1F1F !important;
}

/* 10. Guides hero — title visible *//* 11. Partners hero — title visible */
.page-hero h1 {
    color: #1F1F1F !important;
    -webkit-text-fill-color: #1F1F1F !important;
}

/* 12. Calc-card on cabinet — ensure light */
.calc-card {
    background: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    color: #1F1F1F !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 24px 48px -12px rgba(0,0,0,0.06);
}
.calc-card * { color: inherit; }
.calc-card h3,
.calc-card__title { color: #1F1F1F !important; }
.calc-card__label,
.calc-card__row-label,
.calc-card__note,
.calc-card__subtitle { color: #6B7280 !important; }
.calc-card__row-value,
.calc-card__value { color: #1F1F1F !important; }
.calc-card__slider {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* 13. Global: any inline white text override *//* 14. Managed-feature-text — "Любая ниша. Любой риск." etc *//* 15. Telegram button — keep blue gradient *//* 16. "Не понравилось? Вернём деньги" guarantee text *//* 17. "TELEGRAM ADS ПОД КЛЮЧ" badge — fix gradient fill *//* ============================================
   18. Hero Euro card — structured light glass card
       (cabinet.html hero: pills + 4x2 country grid + commission bar)
   ============================================ */
.hero-euro-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    max-width: 460px;
    margin-left: auto;
    border-radius: 20px !important;
}
.hero-euro-card__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-euro-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    padding: 6px 12px;
    color: #4338CA !important;
    font-size: 12px;
    font-weight: 500;
}
.hero-euro-card__pill--active {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.30);
    background: rgba(16, 185, 129, 0.10);
}
.hero-euro-card__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
    flex-shrink: 0;
}
.hero-euro-card__pill-flag {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}
.hero-euro-card__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 0 4px;
}
.hero-euro-card__country {
    background: #F5F5F7;
    border: 1px solid #EAEAEA;
    border-radius: 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #1F1F1F;
    letter-spacing: 0.03em;
}
.hero-euro-card__country-flag {
    display: block;
    width: 28px;
    height: 20px;
    border-radius: 3px;
}
.hero-euro-card__commission {
    border-top: 1px solid #EAEAEA;
    padding-top: 16px;
    margin-top: 8px;
}
.hero-euro-card__commission-label {
    font-size: 12px;
    color: #6B7280 !important;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.hero-euro-card__commission-bar {
    height: 8px;
    background: rgba(99, 102, 241, 0.10);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.hero-euro-card__commission-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 20%;
    background: linear-gradient(90deg, #6366F1, #8B5CF6);
    border-radius: 4px;
}
.hero-euro-card__commission-value {
    font-size: 14px;
    font-weight: 700;
    color: #6366F1 !important;
    display: block;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .hero-euro-card__grid { grid-template-columns: repeat(3, 1fr); }
    .hero-euro-card { max-width: 100%; margin: 0; }
}

/* ============================================
   19. Cross-platform country flags
       Windows doesn't render 🇷🇺-style regional-indicator emoji as flags,
       so we use flagcdn.com SVG backgrounds via [data-flag="<iso>"].
       Works in every OS/browser.
   ============================================ */
[data-flag] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.04);
}
[data-flag="ae"] { background-image: url('https://flagcdn.com/ae.svg'); }
[data-flag="ar"] { background-image: url('https://flagcdn.com/ar.svg'); }
[data-flag="br"] { background-image: url('https://flagcdn.com/br.svg'); }
[data-flag="by"] { background-image: url('https://flagcdn.com/by.svg'); }
[data-flag="cl"] { background-image: url('https://flagcdn.com/cl.svg'); }
[data-flag="co"] { background-image: url('https://flagcdn.com/co.svg'); }
[data-flag="eu"] { background-image: url('https://flagcdn.com/eu.svg'); }
[data-flag="id"] { background-image: url('https://flagcdn.com/id.svg'); }
[data-flag="in"] { background-image: url('https://flagcdn.com/in.svg'); }
[data-flag="kz"] { background-image: url('https://flagcdn.com/kz.svg'); }
[data-flag="mx"] { background-image: url('https://flagcdn.com/mx.svg'); }
[data-flag="pe"] { background-image: url('https://flagcdn.com/pe.svg'); }
[data-flag="qa"] { background-image: url('https://flagcdn.com/qa.svg'); }
[data-flag="ru"] { background-image: url('https://flagcdn.com/ru.svg'); }
[data-flag="sa"] { background-image: url('https://flagcdn.com/sa.svg'); }
[data-flag="tr"] { background-image: url('https://flagcdn.com/tr.svg'); }
[data-flag="uz"] { background-image: url('https://flagcdn.com/uz.svg'); }

/* Country-tile flag — image-based, no emoji reliance */
.country-tile__flag {
    display: block;
    width: 56px;
    height: 40px;
    margin: 0 auto var(--sp-3, 12px);
    border-radius: 4px;
    font-size: 0;  /* suppress any stray emoji text */
    line-height: 0;
}

/* ============================================================
   SHORT-HEIGHT VIEWPORT HERO FIT
   Keep hero content fully visible (no scroll) on laptops with
   limited vertical space (13"-14" panels, MacBook landscape,
   older 1366x768 screens). `min-height:100vh` above is preserved
   — we only tighten paddings/typography inside that box.
   ============================================================ */

/* 13-14" laptops (~750-800px tall after OS chrome) — moderate tighten */
@media (max-height: 750px) and (min-width: 768px) {
    .page-hero--aurora-full,
.page-hero--dark,
.hero-v3,
.platform-hero {
        padding-block: clamp(40px, 6vh, 72px) clamp(24px, 4vh, 48px) !important;
    }
    .page-hero__title,
.hero-v3__title,
.platform-hero__title {
        font-size: clamp(1.875rem, 3.4vw, 3rem) !important;
        line-height: 1.1 !important;
    }
    .page-hero__sub,
.hero-v3__sub,
.platform-hero__sub {
        margin-bottom: 20px !important;
    }
    .page-hero__ctas,
.platform-hero__ctas {
        margin-top: 20px !important;
    }
    /* Visual cards never force overflow */
    .hero-euro-card,
.page-hero__visual {
        max-height: 70vh;
        overflow: hidden;
    }
}

/* Short height (<=600px) — e.g. 13" MacBook landscape with chrome,
   older netbooks, split-screen laptops. Aggressive tighten. */
@media (max-height: 600px) {
    .page-hero--aurora-full,
.page-hero--dark,
.hero-v3,
.platform-hero {
        padding-block: 48px 24px !important;
    }
    .page-hero__title,
.hero-v3__title,
.platform-hero__title {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
    }
    .page-hero__sub,
.hero-v3__sub,
.platform-hero__sub {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }
    .page-hero__ctas,
.platform-hero__ctas {
        gap: 8px !important;
        margin-top: 16px !important;
    }    /* Shrink hero visual card so everything fits */
    .hero-euro-card {
        padding: 14px !important;
        gap: 8px !important;
    }
    .hero-euro-card__commission,
    .hero-euro-card__grid {
        padding: 10px !important;
        gap: 8px !important;
    }
    .page-hero__visual,
.hero-euro-card,
.platform-hero__inner::after {
        display: none !important; /* too little room — hide decorative visual */
    }
    /* On very short screens, allow hero to be as tall as viewport
       but NOT taller (prevents scroll). 100vh preserved, not overridden. */
    .page-hero--aurora-full,
.page-hero--dark,
.hero-v3,
.platform-hero {
        min-height: 100vh; /* reaffirm — do not remove */
    }
}

/* ============================================================
   REDESIGN-2026 — PLATFORM PAGE FIX (v25)
   Fixes broken /platform.html + /ru/platform.html:
   - Hero took only half screen → now fills viewport & properly centered
   - Feature sections stacked flush → now carded, spaced, breathable
   - "Собрать пачкой" / "Включить AutoCPM" CTAs flush to content → now 24-32px top margin
   - RU page used `.feature-deep__text` (no visual) collapsing to tiny strip
     → .pf-* rules make single-column layout render full-width
   Namespace: .pf-* (platform-fix) — does not collide with existing
   .platform-hero / .feature-deep rules; this is an additive override.
   ============================================================ */

/* --- 1. Platform hero: proper full-viewport, centered, composed --- */
.platform-hero {
    position: relative;
    min-height: calc(100vh - 72px);      /* fill viewport below header */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 64px) clamp(56px, 8vh, 96px);
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.06), transparent 60%), #fff;
    overflow: hidden;
}
.platform-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.platform-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.platform-hero__title,
.platform-hero h1 {
    font-family: var(--font-sans-new);
    font-size: clamp(34px, 4.2vw + 8px, 60px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--r26-ink);
    margin: 14px 0 18px;
}
.platform-hero__sub {
    font-family: var(--font-sans-new);
    font-size: clamp(15px, 0.8vw + 10px, 19px);
    line-height: 1.55;
    color: var(--r26-text-dim);
    max-width: 56ch;
    margin: 0 auto 28px;
}
.platform-hero__ctas {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* Short screens: tighten hero so it fits in 100vh on 13" laptops */
@media (max-height: 820px) and (min-width: 768px) {
    .platform-hero {
        padding-block: clamp(72px, 10vh, 100px) clamp(40px, 5vh, 64px);
    }
    .platform-hero__title,
    .platform-hero h1 {
        font-size: clamp(30px, 3.2vw + 8px, 46px);
        margin: 10px 0 14px;
    }
    .platform-hero__sub { margin-bottom: 20px; font-size: clamp(14px, 0.6vw + 10px, 17px); }
}
@media (max-height: 680px) {
    .platform-hero { min-height: auto; padding-block: 90px 48px; }
    .platform-hero__title,
    .platform-hero h1 { font-size: clamp(26px, 3vw + 8px, 38px); }
}

/* --- 2. Platform page scroll indicator (subtle) below hero --- */
.platform-hero__inner::after {
    content: "";
    display: block;
    width: 1px;
    height: 32px;
    margin: 32px auto 0;
    background: linear-gradient(to bottom, var(--r26-text-dim), transparent);
    opacity: 0.5;
}

/* --- 3. Feature sections: cards with proper breathing room --- */
/* Container around all feature blocks — acts as vertical flow */
.feature-deep {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vh, 88px) clamp(20px, 4vw, 48px) !important;
    border-top: none !important;
    position: relative;
}

/* Section separators instead of borders */
.feature-deep + .feature-deep::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 48px);
    right: clamp(20px, 4vw, 48px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--r26-hairline) 20%, var(--r26-hairline) 80%, transparent);
}

/* The inner content wrapper (RU uses __text, EN uses __content) — both styled as card */
.feature-deep__text,
.feature-deep__content {
    background: #fff;
    border: 1px solid var(--r26-hairline);
    border-radius: 20px;
    padding: clamp(24px, 3.2vw, 40px);
    box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04), 0 8px 24px -8px rgba(15, 15, 20, 0.06);
    max-width: 860px;
    margin: 0 auto;
    transition: box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-deep__text:hover,
.feature-deep__content:hover {
    box-shadow: 0 2px 4px rgba(15, 15, 20, 0.05), 0 16px 40px -12px rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}

/* Feature inner wrapper (RU) — reset grid constraints so it's a clean column */
.feature-deep__inner {
    max-width: 860px;
    margin: 0 auto;
    display: block;
}

/* Titles & text inside feature cards */
.feature-deep h2,
.feature-deep__title {
    font-family: var(--font-sans-new);
    font-size: clamp(22px, 1.8vw + 8px, 34px) !important;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--r26-ink);
    margin: 10px 0 14px !important;
}
.feature-deep__lead {
    font-family: var(--font-sans-new);
    font-size: clamp(15px, 0.6vw + 11px, 17px) !important;
    line-height: 1.55;
    color: var(--r26-text-dim);
    max-width: 60ch;
    margin: 0 0 14px !important;
}
.feature-deep__stat {
    font-family: var(--font-mono-new);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r26-iris);
    margin: 4px 0 20px !important;
    padding: 6px 12px;
    background: var(--r26-primary-soft);
    border-radius: 999px;
    display: inline-block;
}

/* Steps list — gentle card, not flush lines *//* Compare table — reduce density *//* FAQ accordion — inline, not bulky */
.feature-deep__faq {
    margin: 16px 0 4px !important;
    border-top: none !important;
    padding: 0 !important;
}
.feature-deep__faq details {
    border: 1px solid var(--r26-hairline);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 200ms, background 200ms;
}
.feature-deep__faq details[open] {
    border-color: var(--r26-primary-border);
    background: var(--r26-primary-soft);
}
.feature-deep__faq summary {
    font-family: var(--font-sans-new);
    font-size: 14px;
    font-weight: 500;
    color: var(--r26-ink);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 24px;
}
.feature-deep__faq summary::-webkit-details-marker { display: none; }
.feature-deep__faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -2px;
    font-family: var(--font-mono-new);
    font-size: 18px;
    color: var(--r26-text-dim);
    line-height: 1;
}
.feature-deep__faq details[open] summary::after { content: "−"; color: var(--r26-iris); }
.feature-deep__faq details > p {
    font-family: var(--font-sans-new);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--r26-text-dim);
    margin: 10px 0 0 !important;
}

/* CTA inside feature card — always spaced above */
.feature-deep .hero-v3__cta-primary,
.feature-deep .hero-v3__cta-secondary,
.feature-deep .feature-deep__cta,
.feature-deep__text .hero-v3__cta-primary,
.feature-deep__content .hero-v3__cta-primary {
    margin-top: 24px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    font-family: var(--font-sans-new);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms;
}
.feature-deep .hero-v3__cta-primary,
.feature-deep__text .hero-v3__cta-primary,
.feature-deep__content .hero-v3__cta-primary {
    background: var(--r26-ink);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(99, 102, 241, 0.15);
}
.feature-deep .hero-v3__cta-primary:hover,
.feature-deep__text .hero-v3__cta-primary:hover,
.feature-deep__content .hero-v3__cta-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(99, 102, 241, 0.22);
}

/* Visual column (EN only) — integrate with card */
.feature-deep__visual {
    border-radius: 20px;
    border: 1px solid var(--r26-hairline);
    box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04), 0 8px 24px -8px rgba(15, 15, 20, 0.06);
    background: var(--r26-bg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* EN grid layout (both __content and __visual present) */
@media (min-width: 1025px) {
    .feature-deep:has(.feature-deep__visual) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(32px, 4vw, 56px);
        align-items: center;
    }
    .feature-deep:has(.feature-deep__visual) .feature-deep__content,
    .feature-deep:has(.feature-deep__visual) .feature-deep__text { max-width: none; }
    .feature-deep:nth-of-type(even):has(.feature-deep__visual) .feature-deep__visual { order: -1; }
}

/* Featured section (F8 — Invitation Links) — cyan accent */
.feature-deep--featured .feature-deep__text,
.feature-deep--featured .feature-deep__content {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.04), transparent 40%), #fff;
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04), 0 12px 32px -8px rgba(34, 211, 238, 0.2);
}
.feature-deep--featured .r26-eyebrow,
.feature-deep--featured .feature-deep__eyebrow {
    color: var(--r26-cyan, #22D3EE) !important;
}
.feature-deep--featured .feature-deep__stat {
    background: rgba(34, 211, 238, 0.1);
    color: #0891B2;
}

/* Eyebrow inside cards — tighten */
.feature-deep .r26-eyebrow,
.feature-deep .feature-deep__eyebrow {
    display: inline-block;
    font-family: var(--font-mono-new);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--r26-iris);
    margin: 0 0 8px;
    font-weight: 500;
}

/* Mobile: collapse grid cleanly */
@media (max-width: 1024px) {
    .feature-deep {
        grid-template-columns: 1fr !important;
        padding: clamp(32px, 6vh, 56px) 16px !important;
        gap: 24px !important;
    }
    .feature-deep__text,
    .feature-deep__content {
        padding: 22px 20px;
        border-radius: 16px;
    }
    .feature-deep h2,
    .feature-deep__title { font-size: clamp(22px, 5vw, 28px) !important; }}

/* Final CTA section — dark variant on explicit `.section--dark` only.
   Default `.cta-final` stays on the light bg (FAFAFA) with dark ink. */
section.cta-final {
    background: var(--r26-ink) !important;
    color: #fff !important;
    padding: clamp(56px, 10vh, 96px) 20px;
    text-align: center;
}
section.cta-final .cta-final__container {
    max-width: 720px;
    margin: 0 auto;
}
section.cta-final .cta-final__title {
    font-family: var(--font-sans-new);
    font-size: clamp(26px, 3vw + 10px, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: #fff !important;
    margin: 0 0 28px;
}
section.cta-final .cta-final__sub {
    color: rgba(255, 255, 255, 0.78) !important;
}
section.cta-final .cta-final__cta-wrap {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
section.cta-final .btn-v2--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    background: #fff !important;
    color: var(--r26-ink) !important;
    font-family: var(--font-sans-new);
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms;
}
section.cta-final .btn-v2--primary:hover {
    background: var(--r26-bg) !important;
    transform: scale(1.03);
}
section.cta-final .cta-final__cta-secondary {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none;
    padding: 0 12px;
    line-height: 52px;
    font-size: 15px;
}
section.cta-final .cta-final__cta-secondary:hover {
    color: #fff !important;
}


/* ==========================================================================
   23. GLOBAL SCALE TIGHTEN v2 — "Linear/Vercel/Stripe feel"
   --------------------------------------------------------------------------
   v1 (section 22) wasn't aggressive enough — user reported "бабушкин телефон
   с 200% зумом". This block takes another ~25-35% off paddings, font sizes,
   gaps, and radii. Overrides section 22 where appropriate.
   ========================================================================== */

/* --- Section padding: reduce to Linear-like compactness -------------------- */
.section-v2,
.faq-v2,
.comparison-v2,
.pricing-v2,
.cases-grid,
.calc-card-section,
.feature-deep,
.niche-catalog {
    padding: clamp(40px, 5vh, 64px) 0 !important;
}
/* Niche catalog follows hero (80px bottom) — trim its own top to avoid 136px
   stacked gap */
.niche-catalog {
    padding-top: clamp(24px, 4vh, 40px) !important;
}

/* --- Section header: tighter margin + smaller title ----------------------- */
.section-v2__header {
    margin-bottom: clamp(16px, 3vh, 32px) !important;
}

.section-v2__title {
    font-size: clamp(20px, 2vw + 4px, 28px) !important;
    line-height: 1.15 !important;
}

.section-v2__sub {
    font-size: clamp(14px, 1vw + 6px, 16px) !important;
    line-height: 1.5 !important;
}

/* --- Hero titles: cap at 3rem desktop, tighter line-height ---------------- */
.page-hero__title,
.hero-v3__title,
.platform-hero__title {
    font-size: clamp(1.75rem, 3.5vw + 6px, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
}

.page-hero__sub,
.hero-v3__sub,
.platform-hero__sub {
    font-size: clamp(15px, 1.2vw + 6px, 17px) !important;
    line-height: 1.45 !important;
}

/* --- Hero content: narrower max-width for focus --------------------------- */
.page-hero__content {
    max-width: 640px;
}

/* --- Eyebrow: smaller and less tracked ----------------------------------- */
.eyebrow,
.r26-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.3 !important;
}

/* --- Card padding + radii: tighter, Stripe-style -------------------------- */

/* --- Grid gaps: tighter between cards ------------------------------------ */

/* --- Body text base on marketing pages: 15px not 17px --------------------- */
.section-v2 p,
.section-v2 li,
.faq-v2__answer {
    font-size: clamp(14px, 0.6vw + 12px, 15px) !important;
    line-height: 1.55 !important;
}

/* --- Buttons: slightly tighter vertical padding --------------------------- */
.section-v2 .btn,
.page-hero .btn,
.hero-v3 .btn,
.platform-hero .btn {
    padding: clamp(10px, 1vw + 6px, 14px) clamp(16px, 1.5vw + 8px, 22px) !important;
    font-size: clamp(14px, 0.5vw + 12px, 15px) !important;
}

/* --- Card/tile inner titles: cap size ------------------------------------ */


/* --- Mobile: one more notch tighter on phones ----------------------------- */
@media (max-width: 768px) {
    .section-v2,
.faq-v2,
.comparison-v2,
.pricing-v2,
.cases-grid,
.calc-card-section {
        padding: 32px 0 !important;
    }
    .section-v2__header {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   24. Niche catalog block (home hero → kf-v3 bridge)
   White / Grey / Black niches per product-overview §4. Light theme, hairline
   border, subtle color-coded dots + tags. Responsive: 3 columns desktop,
   single stack mobile.
   ========================================================================== */

.niche-catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 24px;
    position: relative;
}

.niche-catalog__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 32px;
}

.niche-catalog__title {
    font-family: var(--font-display, 'Outfit', -apple-system, system-ui, sans-serif);
    font-size: clamp(28px, 3vw + 12px, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 12px 0 12px;
    color: #0b0d10;
    font-weight: 600;
}.niche-catalog__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.niche-card {
    background: #fff;
    border: 1px solid rgba(10, 12, 18, 0.08);
    border-radius: 16px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    min-height: 0;
}

.niche-card:hover {
    border-color: rgba(10, 12, 18, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(10, 12, 18, 0.12);
}

.niche-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.niche-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.niche-card__label {
    font-family: var(--font-display, 'Outfit', -apple-system, system-ui, sans-serif);
    font-size: 20px;
    line-height: 1.1;
    margin: 0;
    color: #0b0d10;
    font-weight: 600;
}/* color variants */
.niche-card--white .niche-card__dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.niche-card--white .niche-card__tag {
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
}

.niche-card--grey .niche-card__dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}
.niche-card--grey .niche-card__tag {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.niche-card--black .niche-card__dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}
.niche-card--black .niche-card__tag {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}/* Tablet: 2 + 1 grid */
@media (max-width: 1024px) {
    .niche-catalog__row {
        grid-template-columns: 1fr 1fr;
    }
    .niche-card--black {
        grid-column: 1 / -1;
    }
}

/* Mobile: single column stack */
@media (max-width: 768px) {
    .niche-catalog {
        padding: 40px 16px 16px;
    }
    .niche-catalog__row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .niche-card--black {
        grid-column: auto;
    }
    .niche-card {
        padding: 18px 16px 16px;
    }
    .niche-card__label {
        font-size: 18px;
    }}

/* ============================================
   25. managed-service-premium → unify with hero globals
       This was the only non-standard hero class left out of the 100vh +
       short-screen rules. Adding it to the same selectors so its scale
       responds to @media (max-height:600px/750px) just like .page-hero--*.
   ============================================ */


/* ================================================================
   26. UX polish — niche + platform mocks
   Adds mock-visual signatures to .niche-card (3 variants) and
   inline SVG/CSS mini-UIs to 8 .feature-deep sections on platform.
   Target aesthetic: Linear / Vercel / Stripe — light theme, subtle.
   ================================================================ */

/* ---- Niche card: items chip-cloud ------------------------------- */
.niche-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.niche-card__chips li,
.niche-card__chips span {
    font-size: 12px;
    line-height: 1.2;
    color: #2a2f38;
    background: #F7F8FA;
    border: 1px solid rgba(10, 12, 18, 0.07);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
    letter-spacing: -0.005em;
}
.niche-card--white .niche-card__chips li,
.niche-card--white .niche-card__chips span { background: rgba(34, 197, 94, 0.05); }
.niche-card--grey .niche-card__chips li,
.niche-card--grey .niche-card__chips span { background: rgba(245, 158, 11, 0.06); }
.niche-card--black .niche-card__chips li,
.niche-card--black .niche-card__chips span { background: rgba(239, 68, 68, 0.05); }

/* ---- Niche card: signature slot --------------------------------- *//* White: moderation badge with checkmark ring *//* Grey: mini workflow chips *//* Black: prominent stat chip */@media (max-width: 768px) {
    .niche-card__chips li,
    .niche-card__chips span { font-size: 11.5px; padding: 3px 7px; }}

/* ---- Platform feature mocks ------------------------------------- */
.feature-deep__mock {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: var(--font, 'DM Sans', system-ui, sans-serif);
    color: #1F1F1F;
    position: relative;
}
.feature-deep__mock-title {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B7280;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.feature-deep__mock-title::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* override platform.html .feature-deep__visual when it contains a mock */
.feature-deep__visual:has(.feature-deep__mock) {
    aspect-ratio: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px;
    overflow: visible;
}

/* RU platform: visual column appears on >=901px via existing :has() rule */
@media (max-width: 1024px) {
    .feature-deep__visual { margin-top: 24px; }
}

/* Mock: Invitation Links ---------------------------- */.mock-invite__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    margin-bottom: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12px;
}
.mock-invite__row:last-child { margin-bottom: 0; }
.mock-invite__row code { color: #1F1F1F; font-weight: 500; }
.mock-invite__row span { color: #6366F1; font-weight: 600; font-size: 11px; }

/* Mock: AutoCPM ------------------------------------- */
.mock-cpm__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.mock-cpm__label { font-size: 12px; color: #6B7280; font-weight: 500; }
.mock-cpm__value {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 14px;
    color: #1F1F1F;
    font-weight: 600;
}
.mock-cpm__value b { color: #22c55e; }
.mock-cpm__bar {
    height: 8px;
    border-radius: 999px;
    background: #EAEAEA;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.mock-cpm__fill {
    position: absolute;
    inset: 0 30% 0 0;
    background: linear-gradient(90deg, #6366F1, #22c55e);
    border-radius: 999px;
}
.mock-cpm__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    font-size: 11px;
    font-weight: 600;
}

/* Mock: AI Recreate flow ---------------------------- */
.mock-flow {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
}
.mock-flow__node {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #EAEAEA;
    font-size: 11px;
    font-weight: 500;
    color: #1F1F1F;
    line-height: 1.3;
    min-width: 0;
}
.mock-flow__node-icon { font-size: 18px; display: block; margin-bottom: 3px; }
.mock-flow__node--rejected { border-color: rgba(239, 68, 68, 0.3); color: #b91c1c; background: rgba(239, 68, 68, 0.04); }
.mock-flow__node--ai { border-color: rgba(99, 102, 241, 0.3); color: #4338ca; background: rgba(99, 102, 241, 0.04); }
.mock-flow__node--ok { border-color: rgba(34, 197, 94, 0.3); color: #15803d; background: rgba(34, 197, 94, 0.05); }
.mock-flow__arrow { color: #9aa0ab; font-size: 14px; flex: 0 0 auto; padding: 0 2px; }

/* Mock: AI Generate variants ------------------------ */
.mock-gen__card {
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
}
.mock-gen__line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #EAEAEA, #F7F8FA);
    margin-bottom: 5px;
}
.mock-gen__line:last-child { margin-bottom: 0; width: 70%; }
.mock-gen__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    background: #6366F1;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.5);
}
.mock-gen__btn::before { content: "✨"; font-size: 12px; }

/* Mock: Check Visibility ---------------------------- */
.mock-vis__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}
.mock-vis__row:last-child { margin-bottom: 0; }
.mock-vis__channel {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    color: #1F1F1F;
    font-weight: 500;
}
.mock-vis__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
}
.mock-vis__status::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
}
.mock-vis__status--ok { color: #15803d; }
.mock-vis__status--ok::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.mock-vis__status--off { color: #b91c1c; }
.mock-vis__status--off::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

/* Mock: Rules Engine -------------------------------- */
.mock-rule {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 8px;
}
.mock-rule:last-child { margin-bottom: 0; }
.mock-rule__kw { color: #A78BFA; font-weight: 600; }
.mock-rule__val { color: #22c55e; }
.mock-rule__arrow { color: #64748B; }

/* Mock: Bulk Create combinatorics ------------------- */
.mock-bulk {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    gap: 4px;
    font-size: 10px;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    margin-bottom: 12px;
}
.mock-bulk__head {
    color: #6B7280;
    font-weight: 500;
    padding: 4px 2px;
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mock-bulk__cell {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mock-bulk__cell::after {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #6366F1;
    opacity: 0.6;
}
.mock-bulk__sum {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12px;
    color: #1F1F1F;
    text-align: center;
    padding-top: 8px;
    border-top: 1px dashed #EAEAEA;
    font-weight: 600;
}
.mock-bulk__sum b { color: #6366F1; }

/* Mock: Action History timeline --------------------- */
.mock-timeline { position: relative; padding-left: 20px; }
.mock-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #EAEAEA;
}
.mock-timeline__item {
    position: relative;
    padding: 6px 0 10px;
    font-size: 12px;
    color: #1F1F1F;
}
.mock-timeline__item:last-child { padding-bottom: 0; }
.mock-timeline__item::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 10px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #6366F1;
}
.mock-timeline__time {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px;
    color: #6B7280;
    margin-bottom: 2px;
}
.mock-timeline__text { line-height: 1.35; }
.mock-timeline__text b { color: #4338ca; font-weight: 600; }

/* RU platform.html — make visual column appear beside text inside __inner */
@media (min-width: 1025px) {
    .feature-deep__inner:has(.feature-deep__visual) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(32px, 4vw, 56px);
        align-items: center;
        max-width: 1200px;
    }
    .feature-deep__inner:has(.feature-deep__visual) .feature-deep__text { max-width: none; }
    .feature-deep:nth-of-type(even) .feature-deep__inner:has(.feature-deep__visual) .feature-deep__visual { order: -1; }
}
@media (max-width: 1024px) {
    .feature-deep__inner:has(.feature-deep__visual) .feature-deep__visual { margin-top: 24px; }
}



/* ==========================================================================
   27. SITEWIDE TIGHTEN v3 — сurgical overrides for blocks still feeling
   "бабушкин телефон с 200% zoom" after v2.
   --------------------------------------------------------------------------
   Scope: .kf-v3 (killer features), .r26-hairline, .faq-v2 accordion, plus
   bento/bignums cleanup. All !important to beat component-level desktop
   rules (32–64px paddings, 18–20px fonts). Linear/Vercel/Stripe feel.
   ========================================================================== */

/* --- Hairline separator / spacer ----------------------------------------- */
/* .r26-hairline is typically a 1px border; ensure it never turns into fat
   padding. When used as a spacer element (empty div), cap its visual size. */
.r26-hairline {
    border-width: 1px !important;
}
hr.r26-hairline,
div.r26-hairline:empty {
    height: 1px !important;
    margin: clamp(24px, 4vh, 48px) 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--r26-hairline) !important;
    background: transparent !important;
}

/* --- FAQ v2 accordion — tighter cards, smaller text --------------------- */
.faq-v2 {
    padding: clamp(40px, 5vh, 64px) 0 !important;
}
.faq-v2__container {
    max-width: 760px !important;
}
.faq-v2__header {
    margin: 0 auto clamp(16px, 3vh, 28px) !important;
}
.faq-v2__list {
    gap: clamp(8px, 1.5vw, 12px) !important;
    margin-top: clamp(16px, 3vh, 28px) !important;
}
.faq-v2__item {
    padding: clamp(14px, 2vw, 22px) !important;
    border-radius: 12px !important;
}
.faq-v2__summary {
    font-size: clamp(15px, 1vw + 8px, 17px) !important;
    line-height: 1.4 !important;
    padding-block: 2px !important;
}
.faq-v2__answer {
    font-size: clamp(14px, 0.8vw + 8px, 15px) !important;
    line-height: 1.55 !important;
    padding-top: 10px !important;
}
.faq-v2__chevron {
    width: 18px !important;
    height: 18px !important;
}

/* --- Bento tiles: one notch tighter than v2 ------------------------------ */

/* --- Big numbers: cap at 48px (was 52px via clamp 3.25rem) --------------- */
.bignum,
.bignums-grid__item .bignum {
    font-size: clamp(1.75rem, 2.5vw + 6px, 3rem) !important;
    line-height: 1 !important;
}
.bignum-label {
    font-size: 12px !important;
    margin-top: 6px !important;
}/* --- Catch-all: sections with giant padding-block not caught by v2 ------- */
.countries-grid,
.platform-hero,
.platform-cta {
    padding-block: clamp(40px, 5vh, 64px) !important;
}

/* --- Mobile: one more notch tighter -------------------------------------- */
@media (max-width: 768px) {
    .faq-v2 { padding: 32px 0 !important; }
    .faq-v2__item { padding: 14px !important; }
    .faq-v2__summary { font-size: 15px !important; }
    .faq-v2__answer { font-size: 14px !important; }
    .bignum { font-size: 1.75rem !important; }
}


/* ==========================================================================
   28. MULTI-ACCOUNTING BLOCK — homepage bento tile + platform feature-deep
   ========================================================================== */

/* ---- Homepage bento tile (dark theme, inside .bento__grid) -------------- */

/* Cabinet switcher mock (used in both bento tile and platform feature-deep) */
.mock-cabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}
.mock-cabs__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background var(--dur-base) var(--ease-out-quart);
}
.mock-cabs__row--active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25) inset;
}
.mock-cabs__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
}
.mock-cabs__row:nth-child(2) .mock-cabs__avatar { background: linear-gradient(135deg, #10B981, #06B6D4); }
.mock-cabs__row:nth-child(3) .mock-cabs__avatar { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.mock-cabs__row:nth-child(4) .mock-cabs__avatar { background: linear-gradient(135deg, #EC4899, #8B5CF6); }
.mock-cabs__label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-on-dark, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mock-cabs__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.mock-cabs__dot--off { background: #64748B; box-shadow: none; }
.mock-cabs__badge {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #10B981;
    font-weight: 600;
}
.mock-cabs__summary {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.mock-cabs__summary-item { display: flex; flex-direction: column; gap: 2px; }
.mock-cabs__summary-label {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-on-dark-muted, rgba(255,255,255,0.6));
}
.mock-cabs__summary-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-on-dark, #fff);
}

/* ---- Platform feature-deep mock (light theme) --------------------------- */
.feature-deep__mock .mock-cabs {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    max-width: 100%;
}
.feature-deep__mock .mock-cabs__row {
    background: #F8FAFC;
    border-color: rgba(15, 23, 42, 0.06);
}
.feature-deep__mock .mock-cabs__row--active {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2) inset;
}
.feature-deep__mock .mock-cabs__label { color: #0F172A; }
.feature-deep__mock .mock-cabs__summary {
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.18);
}
.feature-deep__mock .mock-cabs__summary-label { color: #64748B; }
.feature-deep__mock .mock-cabs__summary-value { color: #0F172A; }

/* ---- Mobile: stack tile content + mock, shrink gap --------------------- */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
    .mock-cabs { padding: 12px; }
    .mock-cabs__row { padding: 8px 10px; }
    .mock-cabs__avatar { width: 24px; height: 24px; font-size: 10px; }
    .mock-cabs__label { font-size: 12px; }
    .mock-cabs__summary-value { font-size: 16px; }
}


/* ============================================================================
   27. managed-service redesign v26 (from scratch)
   Homepage (.hero-v3 + .niche-catalog) is the design reference.
   Hero fits in 100vh on 1440x900 (~828px usable height).
   ========================================================================== */

/* Hide legacy managed-service-premium styles on new layout *//* ---- HERO ---- *//* Hero mock card — stylized Telegram chat */@media (prefers-reduced-motion: no-preference) {    @keyframes msDotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
}

/* ---- SLIM STATS STRIP ---- */

/* ---- WHAT YOU GET — 3×2 compact grid ---- */


/* ---- PRICING SECTION ---- */

/* ---- WE WORK WITH ---- *//* ---- HOW IT WORKS ---- */


/* ---- FAQ — inherit section-v2 global padding ---- *//* ---- Hero entry animation (motion-safe) ---- */
@media (prefers-reduced-motion: no-preference) {    @keyframes msHeroIn { to { opacity: 1; transform: translateY(0); } }
}

/* ==========================================================================
   29. FEATURE-DEEP grid fix + card-chrome removal (USER FIX)
   ------------------------------------------------------------------------
   Problem: existing `.feature-deep { display: grid; grid-template-columns:
   1fr 1fr; }` at line ~12108 applied to OUTER `.feature-deep`, but real
   content sits inside `.feature-deep__inner` (.r26-ether is absolute).
   So inner got ONE half-width column + empty right column; text + visual
   stacked instead of sitting side-by-side. Fix: move grid to __inner, drop
   outer grid, drop inner `display: block`.
   Also: `.feature-deep__text` had card-chrome (white bg, border, shadow)
   making every section look like a floating island. Strip it — let the
   section itself hold the visual rhythm.
   ========================================================================== */
.feature-deep {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(40px, 5vh, 64px) clamp(20px, 4vw, 48px) !important;
}
.feature-deep__inner {
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
}
@media (min-width: 1025px) {
    .feature-deep__inner:has(.feature-deep__visual) {
        display: grid !important;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: clamp(32px, 4vw, 64px);
        align-items: start;
    }
    /* Keep text always left, visual always right — no alternating to avoid
       ping-pong feel */
    .feature-deep__inner:has(.feature-deep__visual) .feature-deep__text {
        order: 1;
    }
    .feature-deep__inner:has(.feature-deep__visual) .feature-deep__visual {
        order: 2;
    }
}
/* Kill nth-of-type flip (was order:-1 on even sections) that moved mocks
   around unpredictably */
.feature-deep:nth-of-type(even):has(.feature-deep__visual) .feature-deep__visual,
.feature-deep:nth-of-type(even) .feature-deep__inner .feature-deep__visual {
    order: 2 !important;
}

/* Strip floating-card chrome from text block — cleaner reading rhythm */
.feature-deep__text,
.feature-deep__content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
}
.feature-deep__text:hover,
.feature-deep__content:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Visual column becomes the hero element: sticky on desktop so it stays in
   view while user scans the long text (steps + compare + FAQ) */
@media (min-width: 1025px) {
    .feature-deep__visual {
        position: sticky;
        top: 96px;
        aspect-ratio: auto;
        padding: 0 !important;
    }
}
/* Visual mock card styling — keep distinct chrome ONLY on the mock, not on
   the surrounding column wrapper */
.feature-deep__mock {
    background: #fff;
    border: 1px solid var(--r26-hairline, #EAEAEA);
    border-radius: 16px;
    padding: clamp(16px, 2vw, 22px);
    box-shadow: 0 1px 2px rgba(15, 15, 20, 0.04), 0 16px 40px -16px rgba(15, 15, 20, 0.10);
}

/* Featured section (multi-cabinets / invitation-links) — use a subtle bg
   band instead of a gradient card */
.feature-deep--featured {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04), transparent 70%) !important;
}
.feature-deep--featured .feature-deep__text {
    background: transparent !important;
    border: 0 !important;
}

/* ==========================================================================
   30. PLATFORM HERO split — content left / live preview right
   Uses .platform-hero__preview markup (live panel mock) on /platform.html.
   ========================================================================== */
.platform-hero--split {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: clamp(80px, 10vh, 120px) clamp(20px, 4vw, 48px) clamp(32px, 5vh, 56px) !important;
    position: relative;
    overflow: hidden;
    background: var(--r26-bg, #FAFAFA);
    text-align: left !important;
    max-width: none !important;
}
.platform-hero__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    max-width: 1280px !important;
    width: 100%;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
}
.platform-hero__content { text-align: left; }
.platform-hero__content .r26-eyebrow {
    display: inline-block;
    margin: 0 0 16px;
    color: var(--r26-iris, #6366F1);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}
.platform-hero--split .platform-hero__title {
    font-family: var(--font-display, var(--font-sans-new));
    font-size: clamp(2rem, 3vw + 10px, 3.5rem) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05 !important;
    color: var(--r26-ink, #1F1F1F);
    margin: 0 0 16px !important;
    max-width: none !important;
    text-align: left !important;
}
.platform-hero--split .platform-hero__sub {
    font-size: clamp(15px, 0.6vw + 11px, 17px) !important;
    color: var(--r26-text-dim, #6B7280);
    line-height: 1.55;
    margin: 0 0 24px !important;
    max-width: 560px !important;
    text-align: left !important;
}
.platform-hero--split .platform-hero__ctas {
    justify-content: flex-start !important;
    margin: 0 0 28px;
}
.platform-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--r26-hairline, #EAEAEA);
    max-width: 520px;
}
.platform-hero__stats > div { display: block; }
.platform-hero__stats dt {
    font-family: var(--font-display, var(--font-sans-new));
    font-size: clamp(18px, 1.2vw + 8px, 24px);
    font-weight: 700;
    color: var(--r26-ink, #1F1F1F);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.platform-hero__stats dd {
    margin: 0;
    font-size: 12px;
    color: var(--r26-text-dim, #6B7280);
    line-height: 1.4;
}

/* Preview card — software dashboard mock */
.platform-hero__preview {
    background: #fff;
    border: 1px solid var(--r26-hairline, #EAEAEA);
    border-radius: 20px;
    padding: 20px;
    box-shadow:
        0 1px 2px rgba(15, 15, 20, 0.04),
        0 24px 64px -20px rgba(99, 102, 241, 0.18),
        0 12px 32px -12px rgba(15, 15, 20, 0.10);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
    justify-self: end;
    width: 100%;
}
.platform-hero__preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--r26-hairline, #EAEAEA);
}
.platform-hero__preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}
.platform-hero__preview-title {
    font-family: var(--font-sans-new);
    font-size: 13px;
    font-weight: 600;
    color: var(--r26-ink, #1F1F1F);
    flex: 1;
}
.platform-hero__preview-tag {
    font-family: var(--font-mono-new);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}
.platform-hero__preview-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.platform-hero__preview-tabs span {
    font-family: var(--font-sans-new);
    font-size: 12px;
    font-weight: 500;
    color: var(--r26-text-dim, #6B7280);
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--r26-bg, #FAFAFA);
    border: 1px solid var(--r26-hairline, #EAEAEA);
}
.platform-hero__preview-tabs span.is-active {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.28);
    color: var(--r26-iris, #6366F1);
}
.platform-hero__preview-chip {
    margin-left: auto;
    font-size: 11px !important;
    background: #1F1F1F !important;
    color: #fff !important;
    border-color: #1F1F1F !important;
}
.platform-hero__preview-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.platform-hero__preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--r26-bg, #FAFAFA);
    border: 1px solid transparent;
    transition: background 200ms, border-color 200ms;
}
.platform-hero__preview-row--active {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.2);
}
.platform-hero__preview-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.platform-hero__preview-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.platform-hero__preview-meta > span:first-child {
    font-family: var(--font-sans-new);
    font-size: 13px;
    font-weight: 500;
    color: var(--r26-ink, #1F1F1F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.platform-hero__preview-meta > span:last-child {
    font-family: var(--font-mono-new);
    font-size: 11px;
    color: var(--r26-text-dim, #6B7280);
}
.platform-hero__preview-row > .r26-mono-digit:last-child {
    font-family: var(--font-mono-new);
    font-size: 13px;
    font-weight: 600;
    color: var(--r26-ink, #1F1F1F);
    flex-shrink: 0;
}
.platform-hero__preview-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--r26-hairline, #EAEAEA);
}
.platform-hero__preview-foot-label {
    font-family: var(--font-mono-new);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r26-text-dim, #6B7280);
}
.platform-hero__preview-foot-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--r26-ink, #1F1F1F);
    letter-spacing: -0.02em;
}
.platform-hero__preview-foot-spark {
    margin-left: auto;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: -1px;
    color: var(--r26-iris, #6366F1);
    line-height: 1;
}

@media (max-width: 1024px) {
    .platform-hero__inner--split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .platform-hero__preview {
        justify-self: stretch;
        max-width: none;
    }
    .platform-hero__stats {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
    }
}
@media (max-width: 480px) {
    .platform-hero__stats { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   31. HARD LAYOUT FIX — hero always 100vh, feature-deep full-width 2-col
   ------------------------------------------------------------------------
   User says the hero must ALWAYS fill the viewport and the feature sections
   are "кривые, узкие, друг на друге". Root cause: layered max-width chains
   (outer .feature-deep 1120px + .feature-deep__text 860px + .feature-deep
   __inner 860px) squeezed the text column to ~350px + left the visual
   column misaligned. This block re-asserts: (a) hero min-height 100vh,
   (b) feature-deep as a normal section using full width up to 1280px with
   a clean 1fr:1fr grid inside .feature-deep__inner.
   ========================================================================== */

/* Hero: always full viewport — header is absolute on top, don't subtract */
.platform-hero,
.platform-hero--split {
    min-height: 100vh !important;
}
.hero-v3 {
    min-height: 100vh !important;
}

/* feature-deep: reset the card-container chain */
.feature-deep {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vh, 96px) clamp(20px, 4vw, 64px) !important;
}

.feature-deep__inner,
.feature-deep__inner:has(.feature-deep__visual) {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}

@media (min-width: 1025px) {
    .feature-deep__inner:has(.feature-deep__visual) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(40px, 5vw, 80px);
    }
}

/* Keep text always left, visual always right — no more alternating */
.feature-deep__inner .feature-deep__text,
.feature-deep__inner .feature-deep__content { order: 1 !important; }
.feature-deep__inner .feature-deep__visual { order: 2 !important; }
.feature-deep:nth-of-type(even) .feature-deep__inner .feature-deep__visual,
.feature-deep:nth-child(even) .feature-deep__visual {
    order: 2 !important;
}

/* Text column: no chrome, no max-width limits */
.feature-deep__text,
.feature-deep__content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}
.feature-deep__text:hover,
.feature-deep__content:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Title inside feature-deep — wider, doesn't overflow narrow column */
.feature-deep h2,
.feature-deep__title {
    font-size: clamp(24px, 2vw + 10px, 36px) !important;
    line-height: 1.12 !important;
    max-width: 520px !important;
    margin: 8px 0 14px !important;
}
.feature-deep__lead {
    max-width: 520px !important;
    font-size: clamp(15px, 0.6vw + 11px, 17px) !important;
}
.feature-deep__faq {
    max-width: 520px !important;
}

/* Visual column: mock becomes the focal element, sticky on desktop */
.feature-deep__visual {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    align-self: start !important;
}
@media (min-width: 1025px) {
    .feature-deep__visual {
        position: sticky;
        top: 96px;
    }
}

/* Mock card keeps the chrome — this is the only "card" on feature-deep */
.feature-deep__mock {
    background: #fff !important;
    border: 1px solid var(--r26-hairline, #EAEAEA) !important;
    border-radius: 16px !important;
    padding: clamp(18px, 2vw, 24px) !important;
    box-shadow:
        0 1px 2px rgba(15, 15, 20, 0.04),
        0 24px 48px -20px rgba(99, 102, 241, 0.16),
        0 12px 32px -14px rgba(15, 15, 20, 0.10) !important;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}

/* Featured section: subtle indigo band as section bg, no card chrome */
.feature-deep--featured {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04), transparent 70%) !important;
}
.feature-deep--featured .feature-deep__text,
.feature-deep--featured .feature-deep__content {
    background: transparent !important;
    border: 0 !important;
}

@media (max-width: 1024px) {
    .feature-deep__mock { max-width: none; }
    .feature-deep h2,
.feature-deep__title,
.feature-deep__lead,
.feature-deep__faq {
        max-width: none !important;
    }
}

/* ==========================================================================
   32. FEATURES BENTO — proper layout for platform feature sections
   ------------------------------------------------------------------------
   User: "Все блоки идут один за другим, без отступов, как будто допустили
   ошибку в ширине." Fix: wrap all .feature-deep sections in .features-bento
   container → 2-col grid with real gaps, each section becomes a card with
   chrome. Featured sections (multi-cabinets, invitation-links) span both
   columns.
   ========================================================================== */
.features-bento {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(40px, 5vh, 72px) clamp(16px, 3vw, 48px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Each feature-deep becomes a compact card inside the bento */
.features-bento .feature-deep {
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(24px, 3vw, 40px) !important;
    background: #fff !important;
    border: 1px solid var(--r26-hairline, #EAEAEA) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(15, 15, 20, 0.03), 0 8px 24px -12px rgba(15, 15, 20, 0.06) !important;
    display: block !important;
    position: relative;
    transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.features-bento .feature-deep:hover {
    box-shadow: 0 2px 4px rgba(15, 15, 20, 0.05), 0 16px 40px -14px rgba(99, 102, 241, 0.14) !important;
    transform: translateY(-2px);
}

/* Featured sections span both columns (they have rich mocks to show) */
.features-bento .feature-deep--featured {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.04), #fff 60%) !important;
    border-color: rgba(99, 102, 241, 0.22) !important;
}

/* Compact cards: text on top, mock below — inner grid collapses to 1 col */
.features-bento .feature-deep:not(.feature-deep--featured) .feature-deep__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(16px, 2vw, 24px) !important;
    grid-template-columns: none !important;
    max-width: none !important;
    width: 100% !important;
}

/* Featured cards: keep 2-column inner layout (text left + mock right) */
@media (min-width: 1025px) {
    .features-bento .feature-deep--featured .feature-deep__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(32px, 4vw, 64px) !important;
        align-items: start;
        max-width: none !important;
        width: 100% !important;
    }
}

/* Reset text column constraints inside bento cards */
.features-bento .feature-deep__text,
.features-bento .feature-deep__content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    transform: none !important;
}

/* Mock becomes the visual — compact card */
.features-bento .feature-deep__visual {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    display: block;
    margin: 0 !important;
}
.features-bento .feature-deep__mock {
    background: var(--r26-bg, #FAFAFA) !important;
    border: 1px solid var(--r26-hairline, #EAEAEA) !important;
    border-radius: 14px !important;
    padding: clamp(14px, 1.5vw, 18px) !important;
    box-shadow: none !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Typography inside compact cards — tighter scale */
.features-bento .feature-deep .r26-eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--r26-iris, #6366F1);
}
.features-bento .feature-deep h2,
.features-bento .feature-deep .feature-deep__title {
    font-size: clamp(20px, 1.4vw + 8px, 26px) !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
    max-width: none !important;
}
.features-bento .feature-deep .feature-deep__lead {
    font-size: clamp(14px, 0.4vw + 11px, 15px) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: none !important;
    color: var(--r26-text-dim, #6B7280) !important;
}

/* Featured cards get bigger typography (they're the hero features) */
.features-bento .feature-deep--featured h2,
.features-bento .feature-deep--featured .feature-deep__title {
    font-size: clamp(26px, 2vw + 10px, 36px) !important;
    max-width: 520px !important;
}
.features-bento .feature-deep--featured .feature-deep__lead {
    font-size: clamp(15px, 0.6vw + 11px, 17px) !important;
    max-width: 520px !important;
}

/* CTA inside bento card — compact */
.features-bento .feature-deep .hero-v3__cta-primary,
.features-bento .feature-deep .feature-deep__cta {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 500;
    text-decoration: none;
    background: var(--r26-ink, #1F1F1F) !important;
    color: #fff !important;
    transition: transform 200ms, background 200ms;
}
.features-bento .feature-deep .hero-v3__cta-primary:hover {
    transform: translateY(-1px);
    background: #2A2A2A !important;
}

/* Remove the section separator ::before hairlines inside bento — cards
   already have borders */
.features-bento .feature-deep::before,
.features-bento .feature-deep + .feature-deep::before {
    display: none !important;
}

/* Kill the sticky visual inside bento cards — compact cards don't need it */
@media (min-width: 1025px) {
    .features-bento .feature-deep__visual {
        position: static !important;
        top: auto !important;
    }
}

/* Mobile: single column */
@media (max-width: 1024px) {
    .features-bento {
        grid-template-columns: 1fr;
    }
    .features-bento .feature-deep--featured {
        grid-column: 1;
    }
}


/* ============================================================
   PLATFORM TOP BANNER — "Already have a cabinet?"
   Single-row muted-accent prompt above hero.
   ============================================================ */
body.v2-scope .platform-topbanner {
  width: 100%;
  background: linear-gradient(90deg, rgba(99,102,241,0.08), rgba(34,197,94,0.06));
  border-bottom: 1px solid rgba(99,102,241,0.18);
}
body.v2-scope .platform-topbanner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
}
body.v2-scope .platform-topbanner__text {
  color: var(--text-primary, #0f172a);
  font-weight: 500;
}
body.v2-scope .platform-topbanner__cta {
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}
body.v2-scope .platform-topbanner__cta:hover {
  color: #3730a3;
  text-decoration: underline;
}
@media (max-width: 480px) {
  body.v2-scope .platform-topbanner__inner {
    padding: 10px 16px;
    font-size: 13px;
    gap: 8px;
  }
}

/* Platform hero — free-panel note under subtitle */
body.v2-scope .platform-hero__freenote {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  font-style: normal;
  line-height: 1.45;
}


/* ============================================================================
   A/B VARIANT CONVENTION (REDESIGN-2026)
   ----------------------------------------------------------------------------
   Default = variant A (no scope).
   Override variants under body[data-variant="b" | "c" | "d"].
   Per-page scope via body[data-page="<slug>"][data-variant="..."].
   Do NOT define new top-level legacy classes — extend .hero-v*, .r26-*.
   ============================================================================ */

/* ============================================================================
   r26-* BUILDING BLOCKS — used by REDESIGN-2026 marketing pages.
   See A/B convention header above for variant scoping.
   ============================================================================ */

/* ---- Stats strip — 4-col compact (replaces .ms-stats) ---- */
.r26-stats { padding: clamp(40px, 6vh, 64px) 24px; background: #fff; border-top: 1px solid var(--r26-hairline); border-bottom: 1px solid var(--r26-hairline); }
.r26-stats__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.r26-stats__item { display: flex; flex-direction: column; gap: 6px; }
.r26-stats__num { font-family: var(--font-sans-new); font-size: clamp(28px, 2.4vw + 8px, 40px); font-weight: 600; color: var(--r26-ink); letter-spacing: -0.02em; line-height: 1; }
.r26-stats__label { font-size: 13px; color: var(--r26-text-dim); }
@media (max-width: 768px) { .r26-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

/* ---- Section + headers ---- */
.r26-section { padding: clamp(64px, 10vh, 120px) 24px; }
.r26-section--alt { background: var(--r26-bg); }
.r26-section__inner { max-width: 1200px; margin: 0 auto; }
.r26-section__head { max-width: 720px; margin: 0 0 48px; }
.r26-title { font-family: var(--font-sans-new); font-size: clamp(28px, 3vw + 8px, 44px); font-weight: 600; color: var(--r26-ink); letter-spacing: -0.025em; line-height: 1.1; margin: 12px 0 16px; }
.r26-tldr { font-size: 16px; line-height: 1.55; color: var(--r26-text-dim); margin: 0; max-width: 64ch; }

/* ---- Features grid — 3×2 (replaces .ms-benefits) ---- */
.r26-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.r26-feature { padding: 28px; border: 1px solid var(--r26-hairline); border-radius: 16px; background: #fff; transition: border-color var(--r26-dur-base) ease, transform var(--r26-dur-base) ease; }
.r26-feature:hover { border-color: var(--r26-border); transform: translateY(-2px); }
.r26-feature__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--r26-primary-soft); color: var(--r26-iris); }
.r26-feature__icon svg { width: 20px; height: 20px; }
.r26-feature__title { font-family: var(--font-sans-new); font-size: 17px; font-weight: 600; color: var(--r26-ink); margin: 0 0 6px; }
.r26-feature__desc { font-size: 14px; line-height: 1.55; color: var(--r26-text-dim); margin: 0; }
@media (max-width: 1024px) { .r26-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .r26-features__grid { grid-template-columns: 1fr; } }

/* ---- Pricing 2-col with lead form (replaces .ms-pricing + .managed-pricing-*) ---- */
.r26-pricing__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.r26-pricing__left { min-width: 0; }
.r26-pricing__sub { font-size: 14px; color: var(--r26-text-dim); margin: 0 0 16px; }
.r26-pricing__list { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.r26-pricing__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--r26-text-dim); line-height: 1.55; }
.r26-pricing__list li strong { color: var(--r26-ink); font-weight: 600; }
.r26-pricing__list svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; color: #34C759; }
.r26-pricing__card { padding: 32px; border: 1px solid var(--r26-hairline); border-radius: 20px; background: #fff; box-shadow: var(--r26-shadow-lg); }
.r26-pricing__amount { font-family: var(--font-sans-new); font-size: clamp(40px, 4vw + 8px, 56px); font-weight: 600; color: var(--r26-ink); letter-spacing: -0.025em; line-height: 1; }
.r26-pricing__from { font-size: 16px; color: var(--r26-text-dim); margin-right: 8px; font-weight: 400; }
.r26-pricing__period { font-size: 18px; color: var(--r26-text-dim); margin-left: 4px; font-weight: 400; }
.r26-pricing__chip { display: inline-block; margin: 12px 0 0; padding: 6px 12px; background: var(--r26-primary-soft); border-radius: 999px; font-size: 13px; color: var(--r26-iris); }
.r26-pricing__divider { margin: 24px 0; height: 1px; background: var(--r26-hairline); border: 0; }
@media (max-width: 1024px) { .r26-pricing__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Lead form (in .r26-pricing__card) ---- */
.r26-form { display: flex; flex-direction: column; gap: 12px; }
.r26-form__title { font-family: var(--font-sans-new); font-size: 14px; font-weight: 600; color: var(--r26-ink); margin: 0 0 4px; text-align: center; }
.r26-form__field { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--r26-hairline); border-radius: 10px; font: inherit; font-size: 14px; color: var(--r26-ink); background: #fff; transition: border-color var(--r26-dur-fast) ease; }
.r26-form__field:focus { outline: none; border-color: var(--r26-ink); }
.r26-form__submit { width: 100%; height: 48px; border: 0; border-radius: 10px; background: var(--r26-ink); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform var(--r26-dur-fast) ease, box-shadow var(--r26-dur-base) ease; box-shadow: var(--r26-shadow-cta); }
.r26-form__submit:hover { transform: scale(1.01); }
.r26-form__status { font-size: 13px; padding: 10px 14px; border-radius: 8px; }
.r26-form__status--ok { background: rgba(52, 199, 89, 0.10); color: #1a7f33; }
.r26-form__status--err { background: rgba(255, 59, 48, 0.10); color: #b9251c; }

/* ---- Pill badge chips (replaces .ms-who) ---- */
.r26-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.r26-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--r26-hairline); border-radius: 999px; background: #fff; font-size: 14px; color: var(--r26-ink); }
.r26-badge svg { width: 16px; height: 16px; color: var(--r26-iris); flex-shrink: 0; }

/* ---- Numbered steps (replaces .ms-steps) ---- */
.r26-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; padding: 0; list-style: none; }
.r26-step { padding: 24px; border: 1px solid var(--r26-hairline); border-radius: 16px; background: #fff; position: relative; counter-increment: step; }
.r26-step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-sans-new); font-size: 13px; font-weight: 500; color: var(--r26-text-dim); margin-bottom: 12px; letter-spacing: 0.06em; }
.r26-step__title { font-family: var(--font-sans-new); font-size: 16px; font-weight: 600; color: var(--r26-ink); margin: 0 0 6px; }
.r26-step__desc { font-size: 14px; line-height: 1.55; color: var(--r26-text-dim); margin: 0; }
@media (max-width: 1024px) { .r26-steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .r26-steps__grid { grid-template-columns: 1fr; } }

/* ---- Hero v3 chat-mock side panel (used by /managed-service.html) ---- */
.hero-v3__chat { width: 100%; max-width: 420px; padding: 20px; border: 1px solid var(--r26-hairline); border-radius: 20px; background: #fff; box-shadow: var(--r26-shadow-lg); justify-self: end; }
.hero-v3__chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--r26-hairline); }
.hero-v3__chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--r26-iris); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans-new); font-weight: 600; font-size: 14px; }
.hero-v3__chat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-v3__chat-name { font-size: 14px; font-weight: 600; color: var(--r26-ink); }
.hero-v3__chat-status { font-size: 12px; color: var(--r26-text-dim); display: inline-flex; align-items: center; gap: 6px; }
.hero-v3__chat-dot { width: 6px; height: 6px; border-radius: 50%; background: #34C759; display: inline-block; }
.hero-v3__chat-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
.hero-v3__msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.hero-v3__msg--in { background: var(--r26-bg); color: var(--r26-ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.hero-v3__msg--out { background: var(--r26-iris); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.hero-v3__chat-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--r26-hairline); }
.hero-v3__chat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--r26-bg); font-size: 12px; color: var(--r26-text-dim); font-family: var(--font-sans-new); }
.hero-v3__chat-pill--live { background: rgba(52, 199, 89, 0.12); color: #1a7f33; }

/* ---- Hero v3 trust line (✓ items) ---- */
.hero-v3__trust { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 0; margin: 24px 0 0; list-style: none; font-size: 13px; color: var(--r26-text-dim); }
.hero-v3__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-v3__trust li::before { content: "✓"; color: #34C759; font-weight: 600; }

/* ---- Mobile: hero-v3 stacks chat under content ---- */
@media (max-width: 1024px) {
  .hero-v3__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-v3__chat { justify-self: stretch; max-width: 100%; }
}

/* ============================================================================
   POLISH — managed-service hero (page-scoped) + chat card atmosphere.
   Bencium principles: bold commitment, intentional shadows, atmospheric
   gradient mesh, tasteful entrance motion. Uses --r26-* tokens only.
   ============================================================================ */

/* Refined chat card: layered shadow (close + far), tighter border, subtle entrance. */
.hero-v3__chat {
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 12px 24px -8px rgba(99, 102, 241, 0.10),
    0 32px 64px -16px rgba(10, 10, 10, 0.10);
  animation: r26-chat-rise 600ms var(--r26-ease-out-expo) both;
}
@keyframes r26-chat-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Live-pill dot: gentle pulse — breathing indicator, not a flash. */
.hero-v3__chat-pill--live .hero-v3__chat-dot {
  animation: r26-pulse 2400ms var(--r26-ease-out-expo) infinite;
}
@keyframes r26-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
}

/* Status-dot in the head (online indicator) — same pulse for coherence. */
.hero-v3__chat-status .hero-v3__chat-dot {
  animation: r26-pulse 2400ms var(--r26-ease-out-expo) infinite;
}

/* Outgoing message (manager reply): brand gradient instead of flat indigo —
   reads as a real product, not a placeholder. */
.hero-v3__msg--out {
  background: linear-gradient(135deg, var(--r26-iris) 0%, #7C7FF2 100%);
  box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.30);
}

/* Page-scoped: managed-service hero gets a soft gradient mesh background.
   Does NOT affect /platform or /cabinet (they share .hero-v3 base). */
body[data-page="managed-service"] .hero-v3 {
  background:
    radial-gradient(ellipse 60% 40% at 85% 30%, rgba(99, 102, 241, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 80%, rgba(34, 211, 238, 0.05), transparent 65%),
    var(--r26-bg);
}

/* Respect motion preferences — disable entrance + pulse when user opts out. */
@media (prefers-reduced-motion: reduce) {
  .hero-v3__chat,
  .hero-v3__chat-pill--live .hero-v3__chat-dot,
  .hero-v3__chat-status .hero-v3__chat-dot {
    animation: none;
  }
}

/* ============================================================
   Tool-First Redesign 2026 v6 — Hero v6, hv6-nav, why-unified
   Migrated from main/public/new_design/design-main-index-hero-v5.html
   ============================================================ */
    /* Kill prior heroes cleanly */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

    :root {
      --hv6-ink:    #0A0A0A;
      --hv6-ink-2:  #1D1D1F;
      --hv6-text:   #4B5563;
      --hv6-dim:    #86868B;
      --hv6-hair:   rgba(10,10,10,.08);
      --hv6-bg:     #F5F5F7;
      --hv6-bg-2:   #FFFFFF;
      --hv6-iris:   #6366F1;
      --hv6-blue:   #3B82F6;
      --hv6-cyan:   #0891B2;
      --hv6-violet: #8B5CF6;
      --hv6-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
      --hv6-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
      --hv6-ease: cubic-bezier(.22,1,.36,1);
    }

    /* Stage: full viewport, never scrolls past */
    /* ============================================================
       UNIFIED PAGE BACKGROUND v2 — rich, premium, painterly.
       One continuous coloured atmosphere that stretches the full
       page height. Each zone has its own distinct mood, but all
       sections are transparent so the canvas flows without seams.
       Inspired by Linear / Stripe / Framer landing pages.
       ============================================================ */
    html, body {
      /* Subtle vertical wash – cool lavender→warm pearl→cool steel.
         Never flat white; gives the page a premium base tone even
         before orbs paint on top. */
      background:
        linear-gradient(180deg,
          #F5F3FF  0%,    /* soft lavender — hero top */
          #EEF2FF 14%,    /* indigo haze */
          #FDF4FF 30%,    /* rose haze — niches */
          #FFF7ED 46%,    /* warm cream — features */
          #ECFEFF 62%,    /* cool mint — cases */
          #F5F3FF 78%,    /* lavender return — pricing */
          #EEF2FF 100%    /* indigo haze — footer */
        );
      background-attachment: fixed;
    }
    body {
      position: relative;
    }
    /* Layer 1 — deep colour pools positioned at fixed page heights.
       Absolute (not fixed) so they live at specific scroll depths,
       creating distinct moods as the user scrolls. */
    body > .site-aurora {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
      overflow: hidden;
    }
    .site-aurora__pool {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px) saturate(1.25);
      mix-blend-mode: multiply;
    }
    /* HERO ZONE (0–100vh) — iris + violet + sky */
    .site-aurora__pool--a1 {
      width: 75vw; height: 75vw;
      left: -18vw; top: -22vw;
      background: radial-gradient(circle, #6366F1 0%, rgba(99,102,241,0) 62%);
      opacity: 0.78;
    }
    .site-aurora__pool--a2 {
      width: 60vw; height: 60vw;
      right: -12vw; top: -2vh;
      background: radial-gradient(circle, #A855F7 0%, rgba(168,85,247,0) 62%);
      opacity: 0.70;
    }
    .site-aurora__pool--a3 {
      width: 52vw; height: 52vw;
      left: 30vw; top: 42vh;
      background: radial-gradient(circle, #38BDF8 0%, rgba(56,189,248,0) 62%);
      opacity: 0.55;
    }
    /* MID ZONE (100–250vh) — magenta + rose + teal */
    .site-aurora__pool--b1 {
      width: 62vw; height: 62vw;
      left: -12vw; top: 108vh;
      background: radial-gradient(circle, #D946EF 0%, rgba(217,70,239,0) 62%);
      opacity: 0.55;
    }
    .site-aurora__pool--b2 {
      width: 58vw; height: 58vw;
      right: -12vw; top: 148vh;
      background: radial-gradient(circle, #FB7185 0%, rgba(251,113,133,0) 62%);
      opacity: 0.50;
    }
    .site-aurora__pool--b3 {
      width: 54vw; height: 54vw;
      left: 22vw; top: 200vh;
      background: radial-gradient(circle, #14B8A6 0%, rgba(20,184,166,0) 62%);
      opacity: 0.48;
    }
    /* DEEPER ZONE (250–400vh) — amber + coral + emerald */
    .site-aurora__pool--c1 {
      width: 64vw; height: 64vw;
      left: -10vw; top: 275vh;
      background: radial-gradient(circle, #F59E0B 0%, rgba(245,158,11,0) 62%);
      opacity: 0.45;
    }
    .site-aurora__pool--c2 {
      width: 58vw; height: 58vw;
      right: -10vw; top: 318vh;
      background: radial-gradient(circle, #F97316 0%, rgba(249,115,22,0) 62%);
      opacity: 0.40;
    }
    .site-aurora__pool--c3 {
      width: 52vw; height: 52vw;
      left: 28vw; top: 370vh;
      background: radial-gradient(circle, #22C55E 0%, rgba(34,197,94,0) 62%);
      opacity: 0.40;
    }
    /* DEEP ZONE (400vh+) — sapphire + iris + violet for closing */
    .site-aurora__pool--d1 {
      width: 68vw; height: 68vw;
      left: -12vw; top: 440vh;
      background: radial-gradient(circle, #3B82F6 0%, rgba(59,130,246,0) 62%);
      opacity: 0.65;
    }
    .site-aurora__pool--d2 {
      width: 58vw; height: 58vw;
      right: -10vw; top: 490vh;
      background: radial-gradient(circle, #6366F1 0%, rgba(99,102,241,0) 62%);
      opacity: 0.62;
    }
    .site-aurora__pool--d3 {
      width: 54vw; height: 54vw;
      left: 28vw; top: 540vh;
      background: radial-gradient(circle, #8B5CF6 0%, rgba(139,92,246,0) 62%);
      opacity: 0.58;
    }

    /* Layer 1b — highlight veil, fixed.  Adds a bright spot that
       travels with the viewport, mimicking studio lighting and
       preventing the aurora from ever feeling "dim". */
    body > .site-aurora::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 60vw 40vh at 50% -10%, rgba(255,255,255,0.55), transparent 70%),
        radial-gradient(ellipse 40vw 50vh at 90% 50%, rgba(255,255,255,0.25), transparent 70%),
        radial-gradient(ellipse 50vw 40vh at 10% 110%, rgba(255,255,255,0.35), transparent 70%);
      mix-blend-mode: screen;
      opacity: 0.9;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
      opacity: 0.28;
      mix-blend-mode: overlay;
    }

    /* Slow drift animation for richness */
    @keyframes site-drift-1 {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(6vw, 4vh) scale(1.12); }
    }
    @keyframes site-drift-2 {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(-6vw, 5vh) scale(1.08); }
    }
    @keyframes site-drift-3 {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(4vw, -4vh) scale(1.15); }
    }
    /* Aurora animations disabled 2026 — 12 blurred animated mix-blend layers caused
       severe scroll jank. Pools render statically; visual richness comes from layering. */

    /* Hero — fully transparent, no own background, no overflow clip */
    .hero-v6 {
      position: relative;
      height: 100dvh;
      min-height: 0;
      max-height: 1000px;
      width: 100%;
      background: transparent;
      color: var(--hv6-ink);
      font-family: var(--hv6-font);
      overflow: visible;
      isolation: isolate;
      display: grid;
      grid-template-rows: auto 1fr;
      padding: clamp(16px, 2vw, 28px) clamp(20px, 4vw, 64px) clamp(24px, 3vw, 48px);
    }

    /* Hero local orbs — disabled, unified site-aurora handles all colour */
    .hero-v6__aurora,
    .hero-v6__orb { display: none !important; }
    .hero-v6__grain { display: none !important; }

    /* Aurora — soft layered gradient orbs, very Apple.
       Reduced opacity since body::before already provides the base wash. */
    .hero-v6__aurora {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none; overflow: hidden;
    }
    .hero-v6__orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.35;
      will-change: transform;
    }
    .hero-v6__orb--1 {
      width: 60vw; height: 60vw;
      left: -10vw; top: -20vw;
      background: radial-gradient(circle at 30% 30%, var(--hv6-iris) 0%, transparent 60%);
      animation: hv6-float-1 22s var(--hv6-ease) infinite alternate;
      opacity: 0.30;
    }
    .hero-v6__orb--2 {
      width: 55vw; height: 55vw;
      right: -10vw; top: 10vw;
      background: radial-gradient(circle at 60% 40%, var(--hv6-blue) 0%, transparent 60%);
      animation: hv6-float-2 26s var(--hv6-ease) infinite alternate;
      opacity: 0.25;
    }
    .hero-v6__orb--3 {
      width: 50vw; height: 50vw;
      left: 30vw; bottom: -20vw;
      background: radial-gradient(circle at 50% 50%, var(--hv6-cyan) 0%, transparent 60%);
      animation: hv6-float-3 30s var(--hv6-ease) infinite alternate;
      opacity: 0.20;
    }
    @keyframes hv6-float-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, 4vw) scale(1.15); } }
    @keyframes hv6-float-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-6vw, 6vw) scale(1.1); } }
    @keyframes hv6-float-3 { from { transform: translate(0,0) scale(1); } to { transform: translate(-4vw, -8vw) scale(1.2); } }

    /* Subtle grain over the aurora */
    .hero-v6__grain {
      position: absolute; inset: 0; z-index: 1;
      pointer-events: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
      opacity: 0.4;
      mix-blend-mode: overlay;
    }

    /* Top status bar */
    .hero-v6__top {
      position: relative; z-index: 5;
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--hv6-mono);
      font-size: 11px; letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hv6-dim);
    }
    .hero-v6__top-left, .hero-v6__top-right {
      display: inline-flex; align-items: center; gap: 14px;
    }
    .hero-v6__pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 12px;
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 999px;
      color: var(--hv6-ink-2);
      font-weight: 500;
    }
    .hero-v6__dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #22C55E;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: hv6-pulse 2s ease-in-out infinite;
    }
    @keyframes hv6-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
      50%     { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    }

    /* Main stage */
    .hero-v6__stage {
      position: relative; z-index: 4;
      display: flex; flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: clamp(20px, 2.4vw, 36px);
      padding: clamp(16px, 3vw, 40px) 0;
    }

    .hero-v6__eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--hv6-mono);
      font-size: 11.5px; letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hv6-iris);
      font-weight: 500;
      opacity: 0; transform: translateY(8px);
      animation: hv6-fade-up 700ms var(--hv6-ease) 100ms forwards;
    }
    .hero-v6__eyebrow::before {
      content: ""; width: 24px; height: 1px; background: currentColor;
    }

    /* Headline — dialed back, technical */
    .hero-v6__title {
      font-family: var(--hv6-font);
      font-weight: 600;
      font-size: clamp(32px, 3.4vw + 12px, 60px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: var(--hv6-ink);
      max-width: 22ch;
      margin: 0;
    }
    .hero-v6__title .hv6-line {
      display: block;
      opacity: 0; transform: translateY(14px);
      animation: hv6-fade-up 900ms var(--hv6-ease) forwards;
    }
    .hero-v6__title .hv6-line:nth-child(1) { animation-delay: 200ms; }
    .hero-v6__title .hv6-line:nth-child(2) { animation-delay: 320ms; }
    .hero-v6__grad {
      background: linear-gradient(98deg, var(--hv6-iris) 0%, var(--hv6-blue) 45%, var(--hv6-cyan) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      font-weight: 500;
      font-style: italic;
      letter-spacing: -0.04em;
    }
    /* Euro accent — warm gold, sets "Ad Euro Cabinets." apart from the blue panel/Telegram half */
    .hero-v6__grad--euro {
      background: linear-gradient(98deg, #F59E0B 0%, #EAB308 40%, #F97316 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      font-style: italic;
      font-weight: 500;
      letter-spacing: -0.04em;
    }

    /* Feature chip-list under the headline — replaces the old single subline */
    .hero-v6__features {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 12px;
      max-width: 880px;
      opacity: 0; transform: translateY(8px);
      animation: hv6-fade-up 700ms var(--hv6-ease) 460ms forwards;
    }
    .hv6-feat {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px 8px 12px;
      border-radius: 999px;
      font-family: var(--hv6-font);
      font-size: clamp(13px, 0.4vw + 11px, 15px);
      font-weight: 500;
      line-height: 1;
      color: var(--hv6-text);
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(10, 10, 10, 0.08);
      backdrop-filter: blur(10px) saturate(1.2);
      -webkit-backdrop-filter: blur(10px) saturate(1.2);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 14px -8px rgba(60, 40, 120, 0.12);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .hv6-feat:hover {
      transform: translateY(-1px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px -8px rgba(60, 40, 120, 0.20);
    }
    .hv6-feat__dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--hv6-iris), var(--hv6-blue));
      flex-shrink: 0;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
    }
    /* Euro-tinted chips for the Euro-cabinet half */
    .hv6-feat--euro {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(255, 255, 255, 0.55) 100%);
      border-color: rgba(245, 158, 11, 0.25);
      color: #92400E;
    }
    .hv6-feat--euro .hv6-feat__dot {
      background: linear-gradient(135deg, #F59E0B, #F97316);
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
    }
    /* "All in one dashboard" — solid filled, the closer */
    .hv6-feat--all {
      background: linear-gradient(135deg, var(--hv6-iris) 0%, var(--hv6-blue) 100%);
      border-color: transparent;
      color: #fff;
      font-weight: 600;
      box-shadow: 0 6px 20px -8px rgba(99, 102, 241, 0.55);
    }
    .hv6-feat--all .hv6-feat__dot {
      background: #fff;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    }
    .hv6-feat--all:hover {
      box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.65);
    }

    .hero-v6__sub {
      font-size: clamp(15px, 0.5vw + 11px, 17px);
      line-height: 1.55;
      color: var(--hv6-text);
      font-weight: 400;
      max-width: 60ch;
      margin: 0;
      opacity: 0; transform: translateY(8px);
      animation: hv6-fade-up 700ms var(--hv6-ease) 460ms forwards;
    }

    /* CTA cards — the visual anchor, like original block buttons */
    .hero-v6__ctas {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 920px;
      opacity: 0; transform: translateY(10px);
      animation: hv6-fade-up 800ms var(--hv6-ease) 600ms forwards;
    }
    .hero-v6__btn {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto 1fr auto;
      column-gap: 20px; row-gap: 14px;
      align-items: start;
      padding: 28px 30px 26px;
      min-height: 200px;
      font-family: var(--hv6-font);
      border-radius: 24px;
      text-decoration: none;
      text-align: left;
      transition: transform 260ms var(--hv6-ease), box-shadow 320ms var(--hv6-ease), background 280ms ease;
      cursor: pointer;
      will-change: transform;
      overflow: hidden;
    }
    .hero-v6__btn-kicker {
      grid-column: 1 / 2;
      font-family: var(--hv6-mono);
      font-size: 12.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      opacity: 0.95;
      line-height: 1;
    }
    .hero-v6__btn-arrow {
      grid-column: 2 / 3; grid-row: 1 / 2;
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px;
      border-radius: 50%;
      transition: transform 280ms var(--hv6-ease), background 240ms ease;
    }
    .hero-v6__btn-arrow svg { width: 18px; height: 18px; }
    .hero-v6__btn:hover .hero-v6__btn-arrow { transform: translate(4px,-2px); }
    .hero-v6__btn-title {
      grid-column: 1 / -1; grid-row: 2 / 3;
      font-size: clamp(26px, 1.4vw + 14px, 34px);
      font-weight: 700;
      letter-spacing: -0.022em;
      line-height: 1.15;
      align-self: center;
      max-width: 22ch;
    }
    .hero-v6__btn-meta {
      grid-column: 1 / -1; grid-row: 3 / 4;
      font-family: var(--hv6-mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.85;
      line-height: 1.45;
      font-weight: 500;
    }

    /* Primary — gradient gloss block */
    .hero-v6__btn--primary {
      background: linear-gradient(135deg, var(--hv6-iris) 0%, var(--hv6-blue) 50%, var(--hv6-cyan) 100%);
      color: #fff;
      box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 -1px 0 rgba(0,0,0,.15) inset,
        0 18px 40px -14px rgba(99,102,241,.6),
        0 6px 18px -8px rgba(59,130,246,.45);
    }
    .hero-v6__btn--primary::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 50%);
      pointer-events: none;
    }
    .hero-v6__btn--primary::after {
      content: "";
      position: absolute; top: 0; left: -60%;
      width: 50%; height: 100%;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
      transform: skewX(-18deg);
      transition: left 800ms var(--hv6-ease);
      pointer-events: none;
    }
    .hero-v6__btn--primary > * { position: relative; z-index: 1; }
    .hero-v6__btn--primary .hero-v6__btn-arrow {
      background: rgba(255,255,255,.18);
      color: #fff;
      backdrop-filter: blur(6px);
    }
    .hero-v6__btn--primary:hover {
      transform: translateY(-3px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.45) inset,
        0 -1px 0 rgba(0,0,0,.18) inset,
        0 24px 50px -14px rgba(99,102,241,.75),
        0 8px 22px -8px rgba(59,130,246,.55);
    }
    .hero-v6__btn--primary:hover::after { left: 130%; }
    .hero-v6__btn--primary:hover .hero-v6__btn-arrow { background: rgba(255,255,255,.28); }

    /* Secondary — liquid glass block */
    .hero-v6__btn--ghost {
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      color: var(--hv6-ink);
      border: 1px solid rgba(255,255,255,.95);
      box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 16px 40px -12px rgba(0,0,0,.22);
    }
    .hero-v6__btn--ghost .hero-v6__btn-arrow {
      background: var(--hv6-ink);
      color: #fff;
    }
    .hero-v6__btn--ghost .hero-v6__btn-kicker { color: var(--hv6-iris); opacity: 1; }
    .hero-v6__btn--ghost:hover {
      background: rgba(255,255,255,1);
      transform: translateY(-3px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 22px 46px -12px rgba(0,0,0,.26);
    }
    .hero-v6__btn--ghost:hover .hero-v6__btn-arrow { background: var(--hv6-iris); }

    /* Tertiary — managed service link */
    .hero-v6__tertiary {
      font-size: 13.5px;
      color: var(--hv6-dim);
      text-decoration: none;
      opacity: 0; transform: translateY(8px);
      animation: hv6-fade-up 700ms var(--hv6-ease) 760ms forwards;
    }
    .hero-v6__tertiary u {
      color: var(--hv6-ink-2);
      font-weight: 500;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      transition: color 200ms ease;
    }
    .hero-v6__tertiary:hover u { color: var(--hv6-iris); }

    /* Bottom strip — sparse metrics */
    .hero-v6__bottom {
      position: relative; z-index: 4;
      display: flex; justify-content: space-between; align-items: center;
      gap: clamp(16px, 3vw, 48px);
      flex-wrap: wrap;
      padding-top: clamp(14px, 1.4vw, 22px);
      border-top: 1px solid var(--hv6-hair);
      opacity: 0;
      animation: hv6-fade-up 700ms var(--hv6-ease) 900ms forwards;
    }
    .hero-v6__metrics {
      display: flex; gap: clamp(20px, 4vw, 56px);
      flex-wrap: wrap;
    }
    .hero-v6__metric {
      display: flex; flex-direction: column; gap: 2px;
    }
    .hero-v6__metric-num {
      font-size: clamp(20px, 1.4vw + 12px, 28px);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--hv6-ink);
      line-height: 1;
    }
    .hero-v6__metric-num span {
      font-size: 0.6em; font-weight: 500; color: var(--hv6-dim);
      letter-spacing: 0;
    }
    .hero-v6__metric-cap {
      font-family: var(--hv6-mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--hv6-dim);
    }
    .hero-v6__scroll {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--hv6-mono);
      font-size: 10.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--hv6-dim);
    }
    .hero-v6__scroll-line {
      width: 28px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--hv6-dim));
      animation: hv6-scroll-line 2.4s var(--hv6-ease) infinite;
    }
    @keyframes hv6-scroll-line {
      0% { transform: translateX(-100%); opacity: 0; }
      40%,60% { transform: translateX(0); opacity: 1; }
      100% { transform: translateX(100%); opacity: 0; }
    }

    @keyframes hv6-fade-up {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Tweak variants — palette swaps */
    .hero-v6[data-hv6-palette="iris"] {} /* default */
    .hero-v6[data-hv6-palette="violet"] { --hv6-iris: #8B5CF6; --hv6-blue: #6366F1; --hv6-cyan: #3B82F6; }
    .hero-v6[data-hv6-palette="aqua"]   { --hv6-iris: #06B6D4; --hv6-blue: #3B82F6; --hv6-cyan: #14B8A6; }
    .hero-v6[data-hv6-palette="mono"]   { --hv6-iris: #1D1D1F; --hv6-blue: #3F3F46; --hv6-cyan: #71717A; }

    .hero-v6[data-hv6-bg="dark"] {
      --hv6-bg: #0A0A0F;
      --hv6-bg-2: #14141A;
      --hv6-ink: #F5F5F7;
      --hv6-ink-2: #FFFFFF;
      --hv6-text: #C7C7CC;
      --hv6-dim: #8E8E93;
      --hv6-hair: rgba(255,255,255,.1);
    }
    .hero-v6[data-hv6-bg="dark"] .hero-v6__pill,
    .hero-v6[data-hv6-bg="dark"] .hero-v6__btn--ghost {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.15);
      color: var(--hv6-ink);
    }
    .hero-v6[data-hv6-bg="dark"] .hero-v6__btn--ghost:hover {
      background: rgba(255,255,255,.14);
    }
    .hero-v6[data-hv6-bg="dark"] .hero-v6__grain { mix-blend-mode: soft-light; opacity: 0.6; }

    .hero-v6[data-hv6-orbs="off"] .hero-v6__orb { display: none; }

    /* Responsive */
    @media (max-width: 1024px) {
      .hero-v6 { padding: 14px 20px 16px; max-height: none; }
      .hero-v6__top-right .hero-v6__pill { display: none; }
      .hero-v6__title { font-size: clamp(28px, 7vw, 44px); }
      .hero-v6__ctas { grid-template-columns: 1fr; gap: 12px; max-width: 520px; }
      .hero-v6__btn { min-height: 158px; padding: 22px 22px 20px; row-gap: 10px; }
      .hero-v6__btn-title { font-size: 22px; }
      .hero-v6__btn-kicker { font-size: 11.5px; }
      .hero-v6__btn-meta { font-size: 11px; }
      .hero-v6__metrics { gap: 20px; }
      .hero-v6__scroll { display: none; }
    }
    /* Short viewports — keep everything inside one screen */
    @media (max-height: 720px) {
      .hero-v6 { padding: 14px clamp(20px,4vw,64px) 14px; }
      .hero-v6__title { font-size: clamp(28px, 2.6vw + 14px, 44px); }
      .hero-v6__sub { font-size: 15px; }
      .hero-v6__stage { gap: clamp(12px, 1.4vw, 20px); padding: 6px 0; }
      .hero-v6__btn { min-height: 184px; padding: 24px 26px 22px; row-gap: 12px; }
      .hero-v6__btn-title { font-size: 28px; }
      .hero-v6__btn-kicker { font-size: 12px; }
      .hero-v6__btn-meta { font-size: 11.5px; }
      .hero-v6__metric-num { font-size: clamp(18px, 1.1vw + 11px, 24px); }
    }
    @media (max-height: 600px) {
      .hero-v6 { padding: 10px clamp(16px,4vw,48px) 10px; }
      .hero-v6__title { font-size: clamp(24px, 2.4vw + 12px, 36px); line-height: 1.05; }
      .hero-v6__sub { font-size: 14px; max-width: 56ch; }
      .hero-v6__stage { gap: 10px; padding: 4px 0; }
      .hero-v6__btn { min-height: 168px; padding: 20px 22px 18px; row-gap: 10px; }
      .hero-v6__btn-title { font-size: 24px; }
      .hero-v6__btn-kicker { font-size: 11.5px; }
      .hero-v6__btn-meta { font-size: 11px; }
      .hero-v6__btn-arrow { width: 40px; height: 40px; }
      .hero-v6__btn-arrow svg { width: 16px; height: 16px; }
      .hero-v6__top { font-size: 10px; }
      .hero-v6__pill { padding: 4px 9px; }
      .hero-v6__eyebrow { font-size: 10.5px; }
      .hero-v6__metric-cap { font-size: 9.5px; }
      .hero-v6__bottom { padding-top: 8px; }
      .hero-v6__tertiary { font-size: 12.5px; }
    }
    @media (max-height: 520px) {
      .hero-v6__top { display: none; }
      .hero-v6__eyebrow { display: none; }
      .hero-v6__title { font-size: clamp(22px, 4vw, 32px); }
      .hero-v6__sub { display: none; }
      .hero-v6__features { gap: 6px 8px; max-width: 100%; }
      .hv6-feat { font-size: 12px; padding: 6px 10px 6px 9px; }
      .hero-v6__tertiary { display: none; }
      .hero-v6__btn { min-height: 132px; }
      .hero-v6__btn-title { font-size: 21px; }
      .hero-v6__stage { gap: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-v6 *, .hero-v6 *::before, .hero-v6 *::after { animation: none !important; transition: none !important; }
      .hero-v6__title .hv6-line, .hero-v6__sub, .hero-v6__ctas, .hero-v6__eyebrow, .hero-v6__bottom, .hero-v6__tertiary { opacity: 1; transform: none; }
    }

    /* =========================================================
       Floating glassmorphism nav — Apple liquid-glass
       ========================================================= */
    .hv6-nav {
      position: relative; z-index: 10;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: clamp(16px, 2.4vw, 32px);
      margin: clamp(16px, 2vw, 28px) auto 0;
      padding: 10px 14px 10px 18px;
      border-radius: 999px;
      background: rgba(255,255,255,.62);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,.75);
      box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 10px 30px -12px rgba(31,31,31,.18),
        0 2px 6px -2px rgba(31,31,31,.08);
      font-family: var(--hv6-font);
      max-width: 1240px;
      width: 100%;
      justify-self: center;
      opacity: 0;
      transform: translateY(-8px);
      animation: hv6-fade-down 700ms var(--hv6-ease) 200ms forwards;
    }
    /* When nav is inside hero-v6 (EN homepage), hero-v6's own padding provides the top gap */
    .hero-v6 > .hv6-nav { margin-top: 0;
    }
    @keyframes hv6-fade-down {
      to { opacity: 1; transform: translateY(0); }
    }
    .hv6-nav__logo {
      display: inline-flex; align-items: center; gap: 10px;
      text-decoration: none;
      padding: 4px 8px 4px 4px;
      color: var(--hv6-ink);
    }
    .hv6-nav__logo-mark { display: inline-flex; }
    .hv6-nav__logo-text {
      font-size: 16px; font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--hv6-ink);
    }
    .hv6-nav__logo-tld { font-weight: 500; color: var(--hv6-iris); }

    .hv6-nav__list {
      display: flex; align-items: center;
      gap: clamp(6px, 1vw, 18px);
      list-style: none;
      margin: 0; padding: 0;
      justify-content: center;
    }
    .hv6-nav__link {
      position: relative;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(31,31,31,.72);
      text-decoration: none;
      border-radius: 999px;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      transition: color 180ms ease, background 180ms ease;
      white-space: nowrap;
    }
    .hv6-nav__link:hover,
    .hv6-nav__link:focus-visible {
      color: var(--hv6-ink);
      background: rgba(31,31,31,.05);
      outline: none;
    }

    /* Dropdown */
    .hv6-nav__dropdown { position: relative; }
    .hv6-nav__dd-toggle svg { transition: transform 240ms var(--hv6-ease); }
    .hv6-nav__dropdown.is-open .hv6-nav__dd-toggle svg { transform: rotate(180deg); }
    .hv6-nav__dd-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(-4px);
      min-width: 240px;
      padding: 8px;
      border-radius: 18px;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(32px) saturate(180%);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255,255,255,.85);
      box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 20px 44px -12px rgba(31,31,31,.22),
        0 6px 14px -6px rgba(31,31,31,.1);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms var(--hv6-ease), transform 200ms var(--hv6-ease);
      display: flex; flex-direction: column; gap: 2px;
      z-index: 20;
    }
    .hv6-nav__dropdown.is-open .hv6-nav__dd-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .hv6-nav__dd-menu a {
      display: flex; flex-direction: column; gap: 2px;
      padding: 10px 14px;
      border-radius: 12px;
      text-decoration: none;
      transition: background 160ms ease;
    }
    .hv6-nav__dd-menu a:hover,
    .hv6-nav__dd-menu a:focus-visible {
      background: rgba(99,102,241,.08);
      outline: none;
    }
    .hv6-nav__dd-title {
      font-size: 14px; font-weight: 600; color: var(--hv6-ink); letter-spacing: -0.01em;
    }
    .hv6-nav__dd-meta {
      font-family: var(--hv6-mono);
      font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--hv6-dim);
    }

    /* Right cluster: lang + CTA */
    .hv6-nav__right {
      display: inline-flex; align-items: center; gap: 10px;
    }
    /* Language dropdown */
    .hv6-nav__lang {
      position: relative;
      font-family: inherit;
    }
    .hv6-nav__lang-trigger {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 10px 7px 10px;
      background: rgba(31,31,31,.05);
      border: 1px solid rgba(31,31,31,.06);
      border-radius: 999px;
      cursor: pointer;
      color: var(--hv6-ink);
      font-family: inherit;
      transition: background 160ms ease, border-color 160ms ease;
    }
    .hv6-nav__lang-trigger:hover { background: rgba(31,31,31,.08); }
    .hv6-nav__lang-flag {
      display: inline-flex;
      color: var(--hv6-dim);
    }
    .hv6-nav__lang-current {
      font-family: var(--hv6-mono);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--hv6-ink);
    }
    .hv6-nav__lang-caret {
      color: var(--hv6-dim);
      transition: transform 240ms var(--hv6-ease);
    }
    .hv6-nav__lang.is-open .hv6-nav__lang-caret { transform: rotate(180deg); }
    .hv6-nav__lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 180px;
      padding: 6px;
      margin: 0;
      list-style: none;
      border-radius: 16px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(32px) saturate(180%);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255,255,255,.85);
      box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 18px 40px -12px rgba(31,31,31,.22),
        0 4px 10px -4px rgba(31,31,31,.1);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 200ms var(--hv6-ease), transform 200ms var(--hv6-ease);
      z-index: 30;
    }
    .hv6-nav__lang.is-open .hv6-nav__lang-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .hv6-nav__lang-menu li {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 160ms ease;
    }
    .hv6-nav__lang-menu li:hover,
    .hv6-nav__lang-menu li:focus-visible {
      background: rgba(99,102,241,.08);
      outline: none;
    }
    .hv6-nav__lang-code {
      font-family: var(--hv6-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--hv6-iris);
      padding: 2px 6px;
      background: rgba(99,102,241,.1);
      border-radius: 5px;
    }
    .hv6-nav__lang-name {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--hv6-ink);
    }
    .hv6-nav__lang-check {
      color: var(--hv6-iris);
      opacity: 0;
      transition: opacity 160ms ease;
    }
    .hv6-nav__lang-menu li[aria-selected="true"] .hv6-nav__lang-check { opacity: 1; }
    .hv6-nav__cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #fff;
      background: var(--hv6-ink);
      border-radius: 999px;
      text-decoration: none;
      transition: transform 200ms var(--hv6-ease), box-shadow 220ms var(--hv6-ease), background 200ms ease;
      box-shadow: 0 4px 14px -4px rgba(31,31,31,.35);
    }
    .hv6-nav__cta:hover {
      transform: translateY(-1px);
      background: #2a2a2a;
      box-shadow: 0 8px 22px -4px rgba(31,31,31,.45);
    }
    .hv6-nav__cta svg { transition: transform 200ms var(--hv6-ease); }
    .hv6-nav__cta:hover svg { transform: translate(2px,-1px); }

    /* Mobile */
    @media (max-width: 1024px) {
      .hv6-nav__list { display: none; }
      .hv6-nav { grid-template-columns: auto 1fr auto; }
    }
    @media (max-width: 1024px) {
      /* Show hamburger; keep CTA ("Try the panel") always visible */
      .hv6-nav__lang { display: none; }
      .hv6-nav__right > a:not(.hv6-nav__cta) { display: none; }
      .hv6-nav__cta { padding: 8px 16px; font-size: 13px; }
    }
    @media (max-width: 768px) {
      .hv6-nav__logo-text { display: none; }
      .hv6-nav__cta { padding: 8px 13px; font-size: 12.5px; }
    }
    /* Short viewports compact */
    @media (max-height: 600px) {
      .hv6-nav { padding: 8px 12px 8px 14px; }
      .hv6-nav__link { padding: 6px 12px; font-size: 13.5px; }
      .hv6-nav__cta { padding: 8px 14px; font-size: 13px; }
    }

    /* ============================================================
       HAMBURGER BUTTON + MOBILE DRAWER — global (all pages)
       ============================================================ */
    .hv6-nav__burger {
      display: none;
      position: relative;
      width: 44px; height: 44px;
      border: 1px solid rgba(10,10,10,.10);
      background: rgba(255,255,255,.6);
      border-radius: 12px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      transition: background 160ms ease, border-color 160ms ease;
    }
    .hv6-nav__burger:hover { background: rgba(255,255,255,.9); }
    .hv6-nav__burger-bar {
      display: block;
      width: 18px; height: 1.8px;
      background: #1F1F1F;
      border-radius: 2px;
      transition: transform 220ms cubic-bezier(.4,0,.2,1), opacity 160ms ease;
    }
    .hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
    .hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(2) { opacity: 0; }
    .hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

    .hv6-nav__drawer {
      display: none;
      position: fixed; inset: 0;
      z-index: 1000;
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      padding: 80px 24px 32px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 220ms ease, transform 220ms ease;
    }
    .hv6-nav.is-mobile-open .hv6-nav__drawer { display: block; opacity: 1; transform: translateY(0); }
    body.hv6-mobile-locked { overflow: hidden; }

    .hv6-nav__drawer-list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 4px;
    }
    .hv6-nav__drawer-list a,
    .hv6-nav__drawer-list button {
      display: flex; align-items: center;
      width: 100%;
      padding: 13px 16px;
      font-size: 17px; font-weight: 500;
      color: #0A0A0A;
      text-decoration: none;
      border-radius: 10px;
      background: transparent;
      border: none; cursor: pointer;
      transition: background 120ms ease;
      text-align: left;
    }
    .hv6-nav__drawer-list a:hover,
    .hv6-nav__drawer-list a:active,
    .hv6-nav__drawer-list button:hover { background: rgba(10,10,10,.05); }
    .hv6-nav__drawer-sublabel {
      font-size: 11px; font-weight: 700; color: #9ca3af;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 6px 16px 2px;
    }
    .hv6-nav__drawer-sub { list-style: none; margin: 0; padding: 0; }
    .hv6-nav__drawer-sub a {
      display: flex; flex-direction: column; gap: 2px;
      padding: 10px 16px; font-size: 15px;
      color: #1f2937; text-decoration: none;
      border-radius: 8px; transition: background 120ms;
    }
    .hv6-nav__drawer-sub a:hover { background: rgba(10,10,10,.05); }
    .hv6-nav__drawer-sub a small { font-size: 12px; color: #6b7280; font-weight: 400; }
    .hv6-nav__drawer-divider {
      height: 1px; background: rgba(10,10,10,.08);
      margin: 16px 0;
    }
    .hv6-nav__drawer-langs {
      display: flex; gap: 8px;
    }
    .hv6-nav__drawer-langs a {
      flex: 1; padding: 12px 16px;
      font-size: 14px; font-weight: 500;
      color: #0A0A0A; text-align: center;
      background: rgba(0,0,0,.04);
      border-radius: 10px; text-decoration: none;
      transition: background 140ms ease;
    }
    .hv6-nav__drawer-langs a.is-active {
      background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%);
      color: #fff;
    }
    .hv6-nav__drawer-cta {
      display: flex !important;
      align-items: center; justify-content: center;
      margin: 16px 4px 0;
      min-height: 52px;
      padding: 16px 22px !important;
      font-size: 15px !important; font-weight: 600;
      color: #fff !important;
      background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%) !important;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 8px 24px -8px rgba(99,102,241,.55);
    }

    @media (max-width: 1024px) {
      .hv6-nav__burger { display: inline-flex; }
    }

    /* ============================================================
       SCROLL POSITION INDICATOR — floating left-edge glass bar
       ============================================================ */
    .scroll-indicator {
      position: fixed;
      left: 24px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 14px;
      pointer-events: none; /* container ignored — only track is clickable */
      user-select: none;
    }

    /* Vertical track — thin glass pill */
    .scroll-indicator__track {
      position: relative;
      width: 6px;
      height: 100px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        inset 0 0 0 0.5px rgba(0, 0, 0, 0.06),
        0 6px 20px rgba(15, 18, 28, 0.08),
        0 1px 2px rgba(15, 18, 28, 0.04);
      cursor: pointer;
      pointer-events: auto;
      overflow: visible;
      transition: width 0.2s ease, box-shadow 0.3s ease;
    }
    .scroll-indicator__track:hover {
      width: 8px;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        0 8px 24px rgba(15, 18, 28, 0.12),
        0 0 0 4px rgba(94, 92, 230, 0.08);
    }

    /* Subtle gradient hint inside the track */
    .scroll-indicator__track::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: linear-gradient(180deg,
        rgba(94, 92, 230, 0.08) 0%,
        rgba(0, 122, 255, 0.04) 50%,
        rgba(50, 173, 230, 0.06) 100%);
      pointer-events: none;
    }

    /* The glass thumb — represents viewport position */
    .scroll-indicator__thumb {
      position: absolute;
      left: -3px;
      width: 12px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(180deg, #5E5CE6 0%, #007AFF 50%, #32ADE6 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(94, 92, 230, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.4);
      transition: height 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s ease, transform 0.15s ease;
      will-change: top, height;
    }
    .scroll-indicator__track:hover .scroll-indicator__thumb {
      width: 14px;
      left: -3px;
      height: 32px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 18px rgba(94, 92, 230, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 24px rgba(0, 122, 255, 0.3);
    }

    /* Section label — appears next to the track */
    .scroll-indicator__label {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        0 6px 18px rgba(15, 18, 28, 0.08),
        0 1px 2px rgba(15, 18, 28, 0.04);
      pointer-events: none;
      opacity: 0.95;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .scroll-indicator__label-name {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #0A0A0A;
      line-height: 1.2;
      white-space: nowrap;
    }
    .scroll-indicator__label-pct {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: rgba(10, 10, 10, 0.45);
      line-height: 1.2;
    }

    /* Dot markers along the track for each section */
    .scroll-indicator__marker {
      position: absolute;
      left: 50%;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(10, 10, 10, 0.18);
      transform: translate(-50%, -50%);
      transition: background 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }
    .scroll-indicator__marker.is-passed {
      background: rgba(94, 92, 230, 0.6);
    }
    .scroll-indicator__marker.is-active {
      background: #5E5CE6;
      transform: translate(-50%, -50%) scale(1.6);
      box-shadow: 0 0 8px rgba(94, 92, 230, 0.6);
    }

    /* Hide on small screens to avoid clutter */
    @media (max-width: 1024px) {
      .scroll-indicator { display: none; }
    }

    /* ============================================================
       AURORA-FRIENDLY OVERRIDES (2026-04-25)
       Make all top-level section backgrounds transparent or softly
       tinted so the unified site-aurora shows through continuously.
       Inner cards keep solid/glass fills for legibility.
       ============================================================ */
    /* Keep the pastel base wash on html/body – aurora pools
       lighten/colour on top of it.  Override body's inline
       background-color that WordPress stamps on. */
    body[style] { background-color: transparent !important; }

    /* Section wrappers → transparent */
    .hero,
    .steps-section,
    .features-section,
    .pricing-section,
    .ai-features-section,
    .testimonials-section,
    .faq-section,
    .footer,
    .showcase-section,
    .section--light,
    .section--alt,
    .bignums-grid,
    .cases-grid,
    .calc-card-section,
    .comparison-v2,
    .pricing-v2,
    .faq-v2,
    .metrics-section,
    .demo-section,
    .demo-section:nth-child(even),
    .demo-section-full,
    .demo-section-full:nth-child(even) {
      background: transparent !important;
    }

    /* CTA section keeps a gentle brand tint but lets aurora bleed */
    .cta-section {
      background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.10) 0%,
        rgba(168, 85, 247, 0.10) 50%,
        rgba(236, 72, 153, 0.08) 100%) !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    /* Make sure real content stacks above the aurora layers */
    .navbar, .hero, main, section, footer, .footer, .cta-section {
      position: relative;
      z-index: 1;
    }

    /* Premium glass cards — float beautifully over the aurora */
    .testimonial-card,
    .faq-item,
    .pricing-card,
    .feature-category,
    .ai-feature-card,
    .metric-card,
    .result-block,
    .cabinet-reason,
    .wl-tile,
    .partners-tier,
    .partners-payout-tile,
    .demo-window,
    .demo-modal,
    .platform-ai-card {
      background: rgba(255, 255, 255, 0.72) !important;
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      border: 1px solid rgba(255, 255, 255, 0.85);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px -14px rgba(60, 40, 120, 0.18),
        0 3px 8px -2px rgba(60, 40, 120, 0.08);
    }
    .pricing-card.featured {
      background: rgba(255, 255, 255, 0.90) !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 24px 60px -18px rgba(99, 102, 241, 0.30),
        0 6px 16px -4px rgba(99, 102, 241, 0.18) !important;
    }

    /* Navbar already glass — nudge it warmer & more opaque now
       that the canvas under it is vivid. */
    .navbar {
      background: rgba(255, 255, 255, 0.72) !important;
      backdrop-filter: blur(24px) saturate(1.3);
      -webkit-backdrop-filter: blur(24px) saturate(1.3);
    }
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.86) !important;
    }

    /* Demo / table containers stay readable */
    .demo-rule-builder,
    .demo-metric-card,
    .demo-detail-stat,
    .demo-progress,
    .pricing-skeleton {
      background: rgba(255, 255, 255, 0.55) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Bump aurora on high-pixel screens (they hide noise) */
    @media (min-resolution: 1.5dppx) {
      .site-aurora__pool { filter: blur(110px) saturate(1.3); }
    }

    /* ============================================================
       WHY ADSLY — unified killer-features block (2026-04-25)
       ============================================================ */
    .why-unified__bg { display: none; }
    .why-unified__orb { display: none; }
    .why-unified {
      position: relative;
      padding: clamp(80px, 14vh, 160px) 24px clamp(80px, 12vh, 140px);
      isolation: isolate;
      background: transparent;
    }
    .why-unified__container {
      position: relative; z-index: 1;
      max-width: 1320px; margin: 0 auto;
    }
    .why-unified__head {
      max-width: 880px; margin: 0 auto clamp(60px, 8vh, 96px);
      text-align: center;
    }
    .why-unified__eyebrow {
      display: inline-block;
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
      font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
      color: #6366F1; margin-bottom: 28px;
      padding: 6px 14px; border-radius: 980px;
      background: rgba(99, 102, 241, 0.08);
      border: 1px solid rgba(99, 102, 241, 0.18);
    }
    .why-unified__title {
      font-family: 'Outfit', 'DM Sans', sans-serif;
      font-size: clamp(2.5rem, 6.5vw, 5.25rem);
      font-weight: 300; line-height: 1.02;
      letter-spacing: -0.04em;
      color: #0A0A0A;
      margin: 0 0 24px;
    }
    .why-unified__title em {
      font-style: italic; font-weight: 400;
      background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .why-unified__sub {
      font-size: clamp(1rem, 1.4vw, 1.1875rem);
      line-height: 1.55; color: rgba(10, 10, 10, 0.6);
      max-width: 600px; margin: 0 auto;
    }

    /* GRID — bento layout: hero tile spans 2x2, others fill in */
    .why-unified__grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 18px;
    }
    .wu-tile {
      position: relative;
      grid-column: span 2;
      padding: clamp(28px, 3vw, 40px);
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(24px) saturate(1.3);
      -webkit-backdrop-filter: blur(24px) saturate(1.3);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 20px 50px -20px rgba(60, 40, 120, 0.18),
        0 4px 12px -4px rgba(60, 40, 120, 0.08);
      display: flex; flex-direction: column;
      transition: transform .4s cubic-bezier(.22,1,.36,1),
                  box-shadow .4s cubic-bezier(.22,1,.36,1);
      overflow: hidden;
    }
    .wu-tile:hover {
      transform: translateY(-4px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 30px 70px -22px rgba(99, 102, 241, 0.28),
        0 6px 18px -4px rgba(99, 102, 241, 0.12);
    }
    /* Hero tile takes the full 6-col width on row 1 */
    .wu-tile--hero {
      grid-column: span 6;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: clamp(32px, 4vw, 56px);
      align-items: center;
      padding: clamp(28px, 3vw, 44px);
      background: linear-gradient(135deg,
        rgba(255,255,255,0.78) 0%,
        rgba(245,243,255,0.72) 100%);
    }
    .wu-tile--hero > .wu-tile__meta,
    .wu-tile--hero > .wu-tile__title,
    .wu-tile--hero > .wu-tile__body,
    .wu-tile--hero > .wu-tile__bullets,
    .wu-tile--hero > .wu-tile__cta { grid-column: 1; }
    .wu-tile--hero .wu-tile__title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); margin-bottom: 12px; }
    .wu-tile--hero .wu-tile__body { margin-bottom: 14px; }
    .wu-tile--hero .wu-tile__bullets { margin-bottom: 16px; }
    .wu-tile--hero .wu-tile__visual { grid-row: 1 / -1; grid-column: 2; align-self: center; display: flex; align-items: center; justify-content: center; }

    /* Row 2 — multi (4 cols) + currencies (2 cols) */
    .wu-tile--multi { grid-column: span 4; }
    .wu-tile--currencies { grid-column: span 2; background: linear-gradient(150deg, rgba(99,102,241,0.10) 0%, rgba(255,255,255,0.55) 100%); }

    /* Row 3 — autoCPM, recreate, generate (2/2/2) */
    /* Row 4 — mass edit full width */
    .wu-tile--mass { grid-column: span 6; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 3vw, 48px); align-items: center; }
    .wu-tile--mass .wu-rows { grid-column: 2; }
    .wu-tile--ai { background: linear-gradient(150deg, rgba(217,70,239,0.08) 0%, rgba(255,255,255,0.55) 100%); }

    /* TILE INTERNALS */
    .wu-tile__meta {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 22px;
    }
    .wu-tile__num {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 13px; font-weight: 500; letter-spacing: 0.05em;
      color: rgba(10,10,10,0.32);
    }
    .wu-tile__tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
      color: #6366F1;
      padding: 4px 10px; border-radius: 6px;
      background: rgba(99,102,241,0.10);
    }
    .wu-tile__title {
      font-family: 'Outfit', 'DM Sans', sans-serif;
      font-size: clamp(1.25rem, 1.8vw, 1.625rem);
      font-weight: 400; line-height: 1.12;
      letter-spacing: -0.02em;
      color: #0A0A0A;
      margin: 0 0 14px;
    }
    .wu-tile__body {
      font-size: 15px; line-height: 1.55;
      color: rgba(10,10,10,0.62);
      margin: 0 0 18px;
    }
    .wu-tile__bullets {
      list-style: none; padding: 0; margin: 0 0 22px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .wu-tile__bullets li {
      position: relative; padding-left: 22px;
      font-size: 14px; line-height: 1.5;
      color: rgba(10,10,10,0.72);
    }
    .wu-tile__bullets li::before {
      content: '';
      position: absolute; left: 0; top: 8px;
      width: 12px; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, #6366F1, #A855F7);
    }
    .wu-tile__cta {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: auto;
      font-size: 14px; font-weight: 500;
      color: #6366F1;
      transition: gap .25s ease, color .25s ease;
    }
    .wu-tile__cta:hover { gap: 10px; color: #4F46E5; }

    /* STATS */
    .wu-stat {
      margin: 4px 0 18px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .wu-stat__num {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(2rem, 3vw, 2.75rem);
      font-weight: 300; letter-spacing: -0.03em;
      line-height: 1;
      background: linear-gradient(135deg, #0A0A0A, #6366F1);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .wu-stat__sub {
      font-size: 13px; color: rgba(10,10,10,0.5);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.02em;
    }
    .wu-stat--inline { flex-direction: row; align-items: baseline; gap: 12px; margin: 0 0 18px; }

    /* CHIPS */
    .wu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
    .wu-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
      padding: 7px 12px; border-radius: 8px;
      border: 1px solid rgba(10,10,10,0.08);
      background: rgba(255,255,255,0.7);
    }
    .wu-chip--ton { color: #0098EA; border-color: rgba(0,152,234,0.25); background: rgba(0,152,234,0.06); }
    .wu-chip--eur { color: #6366F1; border-color: rgba(99,102,241,0.25); background: rgba(99,102,241,0.06); }
    .wu-chip--star { color: #F59E0B; border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.07); }

    /* MOCK — invitation links */
    .wu-mock {
      width: 100%; max-width: 380px;
      padding: 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,243,255,0.85));
      border: 1px solid rgba(99,102,241,0.18);
      box-shadow: 0 14px 40px -16px rgba(99,102,241,0.30);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 12px;
    }
    .wu-mock__head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(10,10,10,0.06); color: rgba(10,10,10,0.55); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
    .wu-mock__dot { width: 6px; height: 6px; border-radius: 50%; background: #34C759; box-shadow: 0 0 8px rgba(52,199,89,0.5); }
    .wu-mock__row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; color: rgba(10,10,10,0.78); }
    .wu-mock__row + .wu-mock__row { border-top: 1px solid rgba(10,10,10,0.04); }
    .wu-mock__id { color: #6366F1; font-weight: 600; font-size: 11px; }
    .wu-mock__row--ghost { opacity: 0.4; }

    /* MOCK — cabs */
    .wu-cabs {
      margin-top: auto;
      display: flex; flex-direction: column; gap: 6px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(10,10,10,0.05);
    }
    .wu-cabs__row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 10px;
      font-size: 13px; color: rgba(10,10,10,0.78);
      transition: background .25s;
    }
    .wu-cabs__row--active {
      background: rgba(99,102,241,0.10);
      color: #4F46E5; font-weight: 500;
    }
    .wu-cabs__row--off { opacity: 0.45; }
    .wu-cabs__avatar {
      width: 26px; height: 26px; border-radius: 7px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
      background: linear-gradient(135deg, #6366F1, #A855F7);
      color: #fff;
    }
    .wu-cabs__label { flex: 1; }
    .wu-cabs__badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 3px 7px; border-radius: 5px;
      background: rgba(52,199,89,0.15); color: #16A34A;
    }

    /* MOCK — mass edit table */
    .wu-rows {
      display: flex; flex-direction: column; gap: 4px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(10,10,10,0.05);
    }
    .wu-rows__row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: 8px;
      transition: background .2s;
    }
    .wu-rows__row.is-sel { background: rgba(99,102,241,0.08); }
    .wu-rows__row--head { opacity: 0.5; }
    .wu-rows__check {
      width: 14px; height: 14px; border-radius: 4px;
      border: 1.5px solid rgba(10,10,10,0.18);
      flex-shrink: 0;
    }
    .wu-rows__check.is-checked {
      background: #6366F1; border-color: #6366F1;
      position: relative;
    }
    .wu-rows__check.is-checked::after {
      content: ''; position: absolute; left: 3px; top: 5px;
      width: 6px; height: 3px;
      border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
      transform: rotate(-45deg);
    }
    .wu-rows__col {
      flex: 1; height: 8px; border-radius: 4px;
      background: rgba(10,10,10,0.08);
    }
    .wu-rows__row.is-sel .wu-rows__col { background: rgba(99,102,241,0.20); }

    /* RESPONSIVE */
    @media (max-width: 1280px) {
      .why-unified__grid { grid-template-columns: repeat(4, 1fr); }
      .wu-tile { grid-column: span 2; }
      .wu-tile--hero { grid-column: span 4; grid-template-columns: 1fr; }
      .wu-tile--hero .wu-tile__visual { grid-row: auto; grid-column: 1; }
      .wu-tile--multi { grid-column: span 4; }
      .wu-tile--currencies { grid-column: span 2; }
      .wu-tile--mass { grid-column: span 4; grid-template-columns: 1fr; }
      .wu-tile--mass .wu-rows { grid-column: 1; }
    }
    @media (max-width: 768px) {
      .why-unified { padding: 64px 16px; }
      .why-unified__grid { grid-template-columns: 1fr; gap: 14px; }
      .wu-tile, .wu-tile--hero, .wu-tile--multi, .wu-tile--currencies, .wu-tile--mass { grid-column: 1 / -1; }
      .wu-tile { padding: 24px; border-radius: 22px; }
      .wu-tile__title { font-size: 1.25rem; }
      .why-unified__head { margin-bottom: 48px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wu-tile { transition: none; }
      .wu-tile:hover { transform: none; }
    }

/* ============================================================
   hv6-redesign overrides + adsly-foot — site-wide design system
   Migrated from new_design/design-main-index-hero-v5.html L20716-22183
   ============================================================ */
      .adsly-foot {
        background: #fff;
        color: #1F1F1F;
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 64px) clamp(28px, 4vw, 44px);
        border-top: 1px solid rgba(10,10,10,.06);
      }
      .adsly-foot__inner {
        max-width: 1240px;
        margin: 0 auto;
      }
      .adsly-foot__top {
        display: grid;
        grid-template-columns: minmax(180px, 220px) repeat(4, 1fr);
        gap: clamp(24px, 3vw, 56px);
        align-items: start;
      }
      .adsly-foot__brand {
        display: inline-flex; align-items: center; gap: 10px;
        text-decoration: none;
        color: #1F1F1F;
      }
      .adsly-foot__brand-mark {
        width: 28px; height: 28px;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .adsly-foot__brand-text {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #1F1F1F;
      }
      .adsly-foot__col-title {
        font-size: 14px;
        font-weight: 700;
        color: #1F1F1F;
        margin: 0 0 16px 0;
        letter-spacing: -0.01em;
      }
      .adsly-foot__list {
        list-style: none;
        margin: 0; padding: 0;
        display: flex; flex-direction: column;
        gap: 10px;
      }
      .adsly-foot__list a {
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: #4B5563;
        text-decoration: none;
        transition: color 160ms ease;
      }
      .adsly-foot__list a:hover { color: #1F1F1F; }

      .adsly-foot__rule {
        height: 1px;
        background: rgba(10,10,10,.08);
        margin: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
      }

      .adsly-foot__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
      }
      .adsly-foot__contact-label {
        font-size: 14px;
        font-weight: 600;
        color: #1F1F1F;
      }
      .adsly-foot__contact-mail {
        font-size: 13.5px;
        color: #4B5563;
        text-decoration: none;
        transition: color 160ms ease;
      }
      .adsly-foot__contact-mail:hover { color: #1F1F1F; }
      .adsly-foot__copy {
        font-size: 12.5px;
        color: #86868B;
        font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        letter-spacing: 0.04em;
        margin-top: 6px;
      }
      .adsly-foot__updated {
        font-size: 11.5px;
        color: #A1A1AA;
        font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        letter-spacing: 0.06em;
        margin-top: 4px;
        text-transform: uppercase;
      }

      @media (max-width: 1024px) {
        .adsly-foot__top {
          grid-template-columns: 1fr 1fr;
          gap: 36px 28px;
        }
        .adsly-foot__brand {
          grid-column: 1 / -1;
          margin-bottom: 4px;
        }
      }
      @media (max-width: 480px) {
        .adsly-foot__top { grid-template-columns: 1fr; gap: 32px; }
      }

      /* =========================================================================
         HV6 REDESIGN LAYER — restyles all sections below the hero in the
         hero's Apple/aurora aesthetic. Scoped to .hv6-redesign root which
         wraps the whole post-hero area. Reuses --hv6-* variables from hero.
         ========================================================================= */

      .hv6-redesign {
        --rs-bg:        transparent;
        --rs-bg-card:   rgba(255,255,255,.65);
        --rs-bg-card-2: rgba(255,255,255,.85);
        --rs-ink:       #0A0A0A;
        --rs-ink-2:     #1D1D1F;
        --rs-text:      #4B5563;
        --rs-dim:       #86868B;
        --rs-hair:      rgba(10,10,10,.08);
        --rs-iris:      #6366F1;
        --rs-blue:      #3B82F6;
        --rs-cyan:      #0891B2;
        --rs-violet:    #8B5CF6;
        --rs-green:     #22C55E;
        --rs-amber:     #F59E0B;
        --rs-rose:      #F43F5E;
        --rs-font:      'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
        --rs-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        --rs-ease:      cubic-bezier(.22,1,.36,1);
        background: var(--rs-bg);
        color: var(--rs-ink);
        font-family: var(--rs-font);
        position: relative;
        isolation: isolate;
      }

      /* No local aurora — body::before provides unified site-wide wash.
         Wrapper stays transparent so background flows continuously. */
      .hv6-redesign > * { position: relative; z-index: 1; }

      /* Override existing section paint so our aurora shows through */
      .hv6-redesign section,
      .hv6-redesign .niche-catalog,
      .hv6-redesign .showcase-v2,
      .hv6-redesign .countries-grid,
      .hv6-redesign .cases-grid,
      .hv6-redesign .calc-card-section,
      .hv6-redesign .comparison-v2,
      .hv6-redesign .cta-final,
      .hv6-redesign .xref-strip,
      .hv6-redesign .pricing-v2 {
        background: transparent !important;
        color: var(--rs-ink-2) !important;
      }

      /* ---------- DS PRIMITIVES (used across redesign sections) ---------- */

      .hv6-redesign .rs-eyebrow,
      .hv6-redesign .r26-eyebrow {
        font-family: var(--rs-mono);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--rs-iris);
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .hv6-redesign .rs-eyebrow::before,
      .hv6-redesign .r26-eyebrow::before {
        content: "";
        display: inline-block;
        width: 24px; height: 1px;
        background: linear-gradient(90deg, transparent, var(--rs-iris));
      }
      .hv6-redesign .rs-section-head,
      .hv6-redesign .niche-catalog__head,
      .hv6-redesign .showcase-v2__header,
      .hv6-redesign .countries-grid__header,
      .hv6-redesign .cases-grid__header,
      .hv6-redesign .comparison-v2__header,
      .hv6-redesign .pricing-v2__header {
        text-align: center;
        max-width: 880px;
        margin: 0 auto clamp(48px, 5vw, 80px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(14px, 1.4vw, 22px);
      }
      .hv6-redesign .rs-section-title,
      .hv6-redesign .niche-catalog__title,
      .hv6-redesign .showcase-v2__header h2,
      .hv6-redesign .countries-grid__title,
      .hv6-redesign .cases-grid__title,
      .hv6-redesign .comparison-v2__title,
      .hv6-redesign .calc-card__title,
      .hv6-redesign .pricing-v2__title {
        font-family: var(--rs-font);
        font-weight: 600;
        font-size: clamp(34px, 3.2vw + 12px, 56px);
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--rs-ink);
        margin: 0;
        max-width: 22ch;
      }
      .hv6-redesign .rs-section-sub,
      .hv6-redesign .showcase-v2__header p,
      .hv6-redesign .countries-grid__sub,
      .hv6-redesign .cases-grid__sub,
      .hv6-redesign .comparison-v2__sub,
      .hv6-redesign .pricing-v2__sub {
        font-size: clamp(15px, 0.5vw + 11px, 17px);
        line-height: 1.55;
        color: var(--rs-text);
        max-width: 60ch;
        margin: 0;
        font-weight: 400;
      }
      .hv6-redesign .rs-grad-text {
        background: linear-gradient(98deg, var(--rs-iris) 0%, var(--rs-blue) 45%, var(--rs-cyan) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      /* Section spacing */
      .hv6-redesign section,
      .hv6-redesign .niche-catalog,
      .hv6-redesign .showcase-v2,
      .hv6-redesign .countries-grid,
      .hv6-redesign .cases-grid,
      .hv6-redesign .calc-card-section,
      .hv6-redesign .comparison-v2,
      .hv6-redesign .pricing-v2 {
        padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 64px);
      }
      .hv6-redesign section > .niche-catalog__head,
      .hv6-redesign .niche-catalog__head { padding: 0 0 clamp(36px, 4vw, 60px); }
      .hv6-redesign .niche-catalog__row,
      .hv6-redesign .showcase-v2__container,
      .hv6-redesign .countries-grid__container,
      .hv6-redesign .cases-grid__container,
      .hv6-redesign .calc-card-section__container,
      .hv6-redesign .comparison-v2__container,
      .hv6-redesign .pricing-v2__container {
        max-width: 1240px;
        margin: 0 auto;
      }

      /* Glass card primitive — used for all card surfaces */
      .hv6-redesign .rs-glass {
        background: var(--rs-bg-card);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 22px;
        box-shadow:
          0 1px 0 rgba(255,255,255,.7) inset,
          0 14px 40px -16px rgba(31,31,31,.18),
          0 4px 12px -6px rgba(31,31,31,.06);
      }

      /* ---------- SECTION 2 · NICHES ---------- */
      .hv6-redesign .niche-catalog__row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(16px, 1.6vw, 22px);
      }
      .hv6-redesign .niche-card {
        position: relative;
        padding: clamp(24px, 2vw, 32px);
        background: var(--rs-bg-card);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 22px;
        box-shadow:
          0 1px 0 rgba(255,255,255,.7) inset,
          0 14px 40px -16px rgba(31,31,31,.16);
        overflow: hidden;
        isolation: isolate;
      }
      .hv6-redesign .niche-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0.6;
        background: radial-gradient(80% 60% at 80% 10%, var(--niche-glow,#6366F1) 0%, transparent 60%);
        filter: blur(40px);
      }
      .hv6-redesign .niche-card--white { --niche-glow: rgba(34,197,94,.35);  --niche-dot: #22C55E; }
      .hv6-redesign .niche-card--grey  { --niche-glow: rgba(245,158,11,.35); --niche-dot: #F59E0B; }
      .hv6-redesign .niche-card--black { --niche-glow: rgba(99,102,241,.35); --niche-dot: #6366F1; }
      .hv6-redesign .niche-card__header {
        display: flex; align-items: center; gap: 12px;
        margin-bottom: 22px;
      }
      .hv6-redesign .niche-card__dot {
        width: 10px; height: 10px;
        border-radius: 50%;
        background: var(--niche-dot);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--niche-dot) 18%, transparent);
      }
      .hv6-redesign .niche-card__label {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.018em;
        color: var(--rs-ink);
        margin: 0;
      }
      .hv6-redesign .niche-card__chips {
        list-style: none;
        margin: 0; padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .hv6-redesign .niche-card__chips li {
        display: inline-flex;
        padding: 7px 12px;
        font-family: var(--rs-mono);
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--rs-ink-2);
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(10,10,10,.06);
        border-radius: 999px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      @media (max-width: 1024px) {
        .hv6-redesign .niche-catalog__row { grid-template-columns: 1fr; }
      }

      /* ---------- SECTION 4 · TOOL SHOWCASE (showcase-v2) ---------- */
      .hv6-redesign .showcase-v2__header h2 { color: var(--rs-ink) !important; }
      .hv6-redesign .showcase-v2__header p { color: var(--rs-text) !important; }
      .hv6-redesign .showcase-v2__tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 760px;
        margin: 0 auto clamp(24px, 2.4vw, 36px);
        padding: 6px;
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(10,10,10,.06);
        border-radius: 999px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      .hv6-redesign .showcase-v2__tab {
        padding: 10px 18px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 999px !important;
        font-family: var(--rs-mono) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--rs-text) !important;
        cursor: pointer;
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .showcase-v2__tab:hover { color: var(--rs-ink) !important; background: rgba(10,10,10,.04) !important; }
      .hv6-redesign .showcase-v2__tab.is-active {
        background: var(--rs-ink) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px -4px rgba(10,10,10,.3);
      }
      .hv6-redesign .showcase-v2__panel {
        position: relative;
        max-width: 1140px;
        margin: 0 auto;
        background: var(--rs-bg-card);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 28px;
        padding: clamp(16px, 1.4vw, 22px);
        box-shadow:
          0 1px 0 rgba(255,255,255,.7) inset,
          0 24px 60px -20px rgba(31,31,31,.22);
        overflow: hidden;
      }
      .hv6-redesign .showcase-v2__panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: .5;
        background: radial-gradient(60% 60% at 50% 0%, rgba(99,102,241,.18), transparent 60%);
        pointer-events: none;
      }
      .hv6-redesign .showcase-v2__screens { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; }
      .hv6-redesign .showcase-v2__screen img {
        width: 100%;
        display: block;
        border-radius: 18px;
      }

      /* ---------- SECTION 5 · BENTO (3 reasons) ---------- */
      .hv6-redesign .mock-cabs {
        display: flex; flex-direction: column; gap: 8px;
        background: rgba(255,255,255,.7);
        border: 1px solid rgba(10,10,10,.08);
        border-radius: 14px;
        padding: 12px;
        backdrop-filter: blur(10px);
      }
      .hv6-redesign .mock-cabs__row {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        background: transparent;
      }
      .hv6-redesign .mock-cabs__row--active {
        background: rgba(99,102,241,.08);
        border: 1px solid rgba(99,102,241,.18);
      }
      .hv6-redesign .mock-cabs__avatar {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--rs-iris), var(--rs-cyan));
        color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--rs-mono);
        font-size: 10.5px;
        font-weight: 700;
      }
      .hv6-redesign .mock-cabs__label { flex: 1; font-size: 13px; color: var(--rs-ink); font-weight: 500; }
      .hv6-redesign .mock-cabs__badge {
        font-family: var(--rs-mono);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rs-green);
        background: rgba(34,197,94,.1);
        border: 1px solid rgba(34,197,94,.24);
        padding: 3px 8px;
        border-radius: 999px;
      }
      .hv6-redesign .mock-cabs__dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--rs-green);
        box-shadow: 0 0 0 3px rgba(34,197,94,.18);
      }
      .hv6-redesign .mock-cabs__dot--off { background: var(--rs-dim); box-shadow: none; }
      @media (max-width: 1024px) {
      }
      @media (max-width: 768px) {
      }

      /* ---------- SECTION 6 · COUNTRIES ---------- */
      .hv6-redesign .countries-grid__header h2 { color: var(--rs-ink) !important; }
      .hv6-redesign .countries-grid__header p { color: var(--rs-text) !important; }
      .hv6-redesign .countries-grid__wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(10px, 1vw, 14px);
        max-width: 1080px;
        margin: 0 auto;
      }
      .hv6-redesign .country-tile {
        position: relative;
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px !important;
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255,255,255,.7) !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -10px rgba(31,31,31,.14);
        transition: all 240ms var(--rs-ease);
        overflow: hidden;
        isolation: isolate;
      }
      .hv6-redesign .country-tile::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        background: radial-gradient(80% 100% at 0% 50%, rgba(99,102,241,.22), transparent 60%);
        transition: opacity 280ms var(--rs-ease);
      }
      .hv6-redesign .country-tile:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.9) !important;
        border-color: rgba(99,102,241,.3) !important;
        box-shadow:
          0 1px 0 rgba(255,255,255,.7) inset,
          0 16px 32px -12px rgba(99,102,241,.28),
          0 6px 14px -6px rgba(31,31,31,.14);
      }
      .hv6-redesign .country-tile:hover::before { opacity: 1; }
      .hv6-redesign .country-tile:hover .country-tile__flag {
        transform: scale(1.08);
        box-shadow:
          0 1px 0 rgba(255,255,255,.4) inset,
          0 8px 18px -6px rgba(10,10,10,.32);
      }
      /* Real SVG flag (from flagcdn) — small, refined frame, soft chip
         shape (not perfect rectangle, not a circle), with an inner
         hairline + soft drop shadow + subtle gloss for the wow effect.  */
      .hv6-redesign .country-tile__flag {
        position: relative;
        flex-shrink: 0;
        width: 32px !important;
        height: 22px !important;
        border-radius: 5px !important;
        overflow: hidden;
        background-color: rgba(0,0,0,.04);
        background-size: cover;
        background-position: center;
        box-shadow:
          0 0 0 1px rgba(10,10,10,.08),
          0 1px 0 rgba(255,255,255,.4) inset,
          0 4px 10px -4px rgba(10,10,10,.22);
        transition: transform 280ms var(--rs-ease), box-shadow 280ms var(--rs-ease);
        font-size: 0;
      }
      .hv6-redesign .country-tile__flag::before { content: none !important; }
      /* Glossy highlight across the flag */
      .hv6-redesign .country-tile__flag::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          165deg,
          rgba(255,255,255,.32) 0%,
          rgba(255,255,255,.08) 28%,
          rgba(255,255,255,0) 50%,
          rgba(0,0,0,.08) 100%
        );
        pointer-events: none;
      }
      .hv6-redesign .country-tile__name { font-size: 14px; font-weight: 500; color: var(--rs-ink) !important; letter-spacing: -0.005em; }
      .hv6-redesign .countries-grid__cta-wrap { margin-top: 48px; text-align: center; }
      .hv6-redesign .countries-grid__cta-wrap .btn-v2 {
        display: inline-flex !important;
        padding: 14px 26px !important;
        background: var(--rs-ink) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 999px !important;
        font-family: var(--rs-font) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .countries-grid__cta-wrap .btn-v2:hover { background: #1F1F1F !important; transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(10,10,10,.3); }
      @media (max-width: 1024px) { .hv6-redesign .countries-grid__wrap { grid-template-columns: repeat(3, 1fr); } }
      @media (max-width: 768px) { .hv6-redesign .countries-grid__wrap { grid-template-columns: repeat(2, 1fr); } }

      /* ---------- SECTION 7 · CASES ---------- */
      .hv6-redesign .cases-grid__wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(16px, 1.6vw, 22px);
      }
      .hv6-redesign .case-card {
        position: relative;
        padding: clamp(28px, 2.2vw, 36px);
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78) !important;
        border-radius: 22px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 40px -16px rgba(31,31,31,.16) !important;
        overflow: hidden;
        isolation: isolate;
      }
      .hv6-redesign .case-card::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        opacity: 0.5;
        background: radial-gradient(60% 50% at 100% 0%, rgba(34,211,238,.28), transparent 60%);
        filter: blur(28px);
      }
      .hv6-redesign .case-card__badge {
        display: inline-flex;
        font-family: var(--rs-mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--rs-iris);
        padding: 5px 10px;
        background: rgba(99,102,241,.1);
        border: 1px solid rgba(99,102,241,.22);
        border-radius: 999px;
      }
      .hv6-redesign .case-card__title {
        font-size: 22px !important;
        font-weight: 600 !important;
        letter-spacing: -0.022em !important;
        color: var(--rs-ink) !important;
        line-height: 1.2 !important;
        margin: 14px 0 4px !important;
      }
      .hv6-redesign .case-card__sub { font-size: 14px !important; color: var(--rs-text) !important; margin: 0 !important; }
      .hv6-redesign .case-card__numbers { display: flex; gap: 28px; margin: 20px 0 14px; }
      .hv6-redesign .case-card__number { display: flex; flex-direction: column; gap: 2px; }
      .hv6-redesign .case-card__number .big {
        font-size: clamp(26px, 2vw + 6px, 36px);
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--rs-ink);
        line-height: 1;
      }
      .hv6-redesign .case-card__number .label {
        font-family: var(--rs-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rs-dim);
      }
      .hv6-redesign .case-card__spark {
        width: 100%;
        height: 50px;
        margin-top: 4px;
        overflow: visible;
      }
      .hv6-redesign .case-card__spark polyline {
        fill: none;
        stroke: url(#spark-gradient-rs);
        stroke: var(--rs-iris);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      @media (max-width: 1024px) { .hv6-redesign .cases-grid__wrap { grid-template-columns: 1fr; } }

      /* ---------- SECTION 9 · CALCULATOR ---------- */
      .hv6-redesign .calc-card {
        position: relative;
        max-width: 720px;
        margin: 0 auto;
        padding: clamp(36px, 3vw, 56px) !important;
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78) !important;
        border-radius: 28px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 60px -20px rgba(31,31,31,.22) !important;
        overflow: hidden;
        isolation: isolate;
      }
      .hv6-redesign .calc-card::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        opacity: 0.5;
        background:
          radial-gradient(50% 40% at 0% 0%, rgba(99,102,241,.3), transparent 60%),
          radial-gradient(50% 40% at 100% 100%, rgba(34,211,238,.24), transparent 60%);
        filter: blur(34px);
      }
      .hv6-redesign .calc-card__title {
        text-align: center;
        max-width: 18ch;
        margin: 0 auto 12px !important;
        font-size: clamp(28px, 2vw + 12px, 40px) !important;
      }
      .hv6-redesign .calc-card__subtitle {
        text-align: center;
        font-size: 15px !important;
        color: var(--rs-text) !important;
        max-width: 52ch;
        margin: 0 auto 32px !important;
        line-height: 1.55;
      }
      .hv6-redesign .calc-card__slider-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
      .hv6-redesign .calc-card__label {
        font-family: var(--rs-mono);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--rs-text) !important;
      }
      .hv6-redesign .calc-card__value {
        font-size: clamp(36px, 3vw + 8px, 56px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.04em !important;
        background: linear-gradient(98deg, var(--rs-iris), var(--rs-cyan));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        line-height: 1;
      }
      .hv6-redesign .calc-card__slider {
        appearance: none; -webkit-appearance: none;
        width: 100%; height: 6px;
        background: rgba(10,10,10,.08);
        border-radius: 999px;
        outline: none;
      }
      .hv6-redesign .calc-card__slider::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 22px; height: 22px;
        background: linear-gradient(135deg, var(--rs-iris), var(--rs-cyan));
        border: 3px solid #fff;
        border-radius: 50%;
        box-shadow: 0 4px 12px -2px rgba(99,102,241,.5);
        cursor: pointer;
      }
      .hv6-redesign .calc-card__slider::-moz-range-thumb {
        width: 22px; height: 22px;
        background: linear-gradient(135deg, var(--rs-iris), var(--rs-cyan));
        border: 3px solid #fff;
        border-radius: 50%;
        box-shadow: 0 4px 12px -2px rgba(99,102,241,.5);
        cursor: pointer;
      }
      .hv6-redesign .calc-card__results {
        background: rgba(255,255,255,.6);
        border: 1px solid rgba(10,10,10,.06);
        border-radius: 16px;
        padding: 18px 22px;
        margin-bottom: 18px;
      }
      .hv6-redesign .calc-card__row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(10,10,10,.06);
      }
      .hv6-redesign .calc-card__row:last-child { border-bottom: none; }
      .hv6-redesign .calc-card__row-label { font-size: 14px; color: var(--rs-text) !important; }
      .hv6-redesign .calc-card__row-value { font-family: var(--rs-mono); font-size: 15px; font-weight: 600; color: var(--rs-ink) !important; }
      .hv6-redesign .calc-card__row--total .calc-card__row-label { color: var(--rs-ink) !important; font-weight: 600; }
      .hv6-redesign .calc-card__row--total .calc-card__row-value { font-size: 18px; color: var(--rs-iris) !important; }
      .hv6-redesign .calc-card__note {
        font-size: 12.5px;
        color: var(--rs-dim) !important;
        text-align: center;
        margin: 12px 0 22px !important;
        line-height: 1.5;
      }
      .hv6-redesign .calc-card__cta {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 16px 28px !important;
        background: var(--rs-ink) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 999px !important;
        font-family: var(--rs-font) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .calc-card__cta:hover { background: #1F1F1F !important; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(10,10,10,.32); }

      /* ---------- SECTION 10 · COMPARISON TABLE ---------- */
      .hv6-redesign .comparison-v2__table-wrap {
        background: var(--rs-bg-card);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 22px;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 40px -16px rgba(31,31,31,.16);
        overflow: hidden;
      }
      .hv6-redesign .comparison-v2__table {
        width: 100%;
        border-collapse: collapse;
      }
      .hv6-redesign .comparison-v2__table thead th {
        padding: 18px 22px !important;
        text-align: left;
        font-family: var(--rs-mono) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        color: var(--rs-text) !important;
        background: rgba(10,10,10,.025) !important;
        border-bottom: 1px solid rgba(10,10,10,.08) !important;
      }
      .hv6-redesign .comparison-v2__table thead th:last-child {
        background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,211,238,.05)) !important;
        color: var(--rs-iris) !important;
      }
      .hv6-redesign .comparison-v2__table tbody td {
        padding: 16px 22px !important;
        font-size: 14.5px !important;
        color: var(--rs-ink-2) !important;
        border-bottom: 1px solid rgba(10,10,10,.06) !important;
        background: transparent !important;
        vertical-align: middle;
      }
      .hv6-redesign .comparison-v2__table tbody tr:last-child td { border-bottom: none !important; }
      .hv6-redesign .comparison-v2__table tbody td:first-child { font-weight: 500; color: var(--rs-ink) !important; }
      .hv6-redesign .comparison-v2__table tbody td:last-child {
        background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(34,211,238,.02)) !important;
      }
      .hv6-redesign .comparison-v2__x { display: inline-flex; align-items: center; gap: 8px; color: var(--rs-rose); }
      .hv6-redesign .comparison-v2__x svg { width: 16px; height: 16px; flex-shrink: 0; }
      .hv6-redesign .comparison-v2__x span { color: var(--rs-text) !important; font-weight: 400; }
      .hv6-redesign .comparison-v2__check { display: inline-flex; align-items: center; gap: 8px; color: var(--rs-green); }
      .hv6-redesign .comparison-v2__check svg { width: 16px; height: 16px; flex-shrink: 0; }
      .hv6-redesign .comparison-v2__check span { color: var(--rs-ink) !important; font-weight: 500; }

      /* ---------- SECTION 12 · PRICING ---------- */
      .hv6-redesign .pricing-v2__header h2 { color: var(--rs-ink) !important; }
      .hv6-redesign .pricing-v2__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(14px, 1.4vw, 20px);
      }
      .hv6-redesign .pricing-card-v2 {
        position: relative;
        padding: clamp(24px, 2vw, 32px) !important;
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78) !important;
        border-radius: 22px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 40px -16px rgba(31,31,31,.16) !important;
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        isolation: isolate;
        transition: transform 280ms var(--rs-ease);
      }
      .hv6-redesign .pricing-card-v2:hover { transform: translateY(-4px); }
      .hv6-redesign .pricing-card-v2--highlighted {
        background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(255,255,255,.85)) !important;
        border: 1px solid rgba(99,102,241,.3) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -16px rgba(99,102,241,.28) !important;
      }
      .hv6-redesign .pricing-card-v2--highlighted::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        opacity: 0.6;
        background: radial-gradient(60% 50% at 100% 0%, rgba(99,102,241,.32), transparent 60%);
        filter: blur(28px);
      }
      .hv6-redesign .pricing-card-v2__badge-recommended {
        position: absolute;
        top: -12px; left: 50%; right: auto;
        transform: translateX(-50%);
        z-index: 2;
        font-family: var(--rs-mono);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fff;
        background: linear-gradient(135deg, var(--rs-iris), var(--rs-cyan));
        padding: 5px 10px;
        border-radius: 999px;
        box-shadow: 0 4px 14px -4px rgba(99,102,241,.5);
      }
      .hv6-redesign .pricing-card-v2__title {
        font-size: 19px !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em !important;
        color: var(--rs-ink) !important;
        margin: 0 !important;
      }
      .hv6-redesign .pricing-card-v2__sub {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: var(--rs-text) !important;
        margin: 0 !important;
      }
      .hv6-redesign .pricing-card-v2__price {
        font-size: clamp(28px, 2vw + 6px, 36px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.03em !important;
        color: var(--rs-ink) !important;
        line-height: 1.05;
        margin: 4px 0 8px;
      }
      .hv6-redesign .pricing-card-v2__price-compound { font-size: 14px; line-height: 1.5; color: var(--rs-ink) !important; margin: 4px 0 8px; }
      .hv6-redesign .pricing-card-v2__price-line2 { font-size: 12.5px; color: var(--rs-dim) !important; margin-top: 4px; }
      .hv6-redesign .pricing-card-v2__features {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 10px;
      }
      .hv6-redesign .pricing-card-v2__feature {
        position: relative;
        padding-left: 22px;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--rs-ink-2) !important;
      }
      .hv6-redesign .pricing-card-v2__feature::before {
        content: ""; position: absolute; left: 0; top: 5px;
        width: 13px; height: 7px;
        border-left: 1.7px solid var(--rs-iris);
        border-bottom: 1.7px solid var(--rs-iris);
        transform: rotate(-45deg);
      }
      .hv6-redesign .pricing-card-v2__cta {
        margin-top: auto !important;
        display: inline-flex !important;
        justify-content: center;
        padding: 12px 22px !important;
        background: rgba(255,255,255,.7) !important;
        color: var(--rs-ink) !important;
        border: 1px solid rgba(10,10,10,.12) !important;
        border-radius: 999px !important;
        font-family: var(--rs-font) !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .pricing-card-v2__cta:hover { background: #fff !important; border-color: rgba(10,10,10,.2) !important; transform: translateY(-1px); }
      .hv6-redesign .pricing-card-v2--highlighted .pricing-card-v2__cta {
        background: var(--rs-ink) !important;
        color: #fff !important;
        border: none !important;
      }
      .hv6-redesign .pricing-card-v2--highlighted .pricing-card-v2__cta:hover { background: #1F1F1F !important; box-shadow: 0 12px 28px -8px rgba(10,10,10,.32); }
      .hv6-redesign .whiteLabelLink {
        font-family: var(--rs-mono) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--rs-iris) !important;
        padding: 10px 18px;
        border-radius: 999px;
        background: rgba(99,102,241,.08);
        border: 1px solid rgba(99,102,241,.2);
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .whiteLabelLink:hover { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.36); }
      @media (max-width: 1024px) { .hv6-redesign .pricing-v2__grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 768px) { .hv6-redesign .pricing-v2__grid { grid-template-columns: 1fr; } }

      /* ---------- SECTION 13 · FAQ ---------- */
      .hv6-redesign .faq-v2 { padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 64px) !important; background: transparent !important; }
      .hv6-redesign .faq-v2__container { max-width: 880px; margin: 0 auto; }
      .hv6-redesign .faq-v2__header { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); }
      .hv6-redesign .faq-v2__header h2 {
        font-size: clamp(34px, 3.2vw + 12px, 56px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.03em !important;
        color: var(--rs-ink) !important;
        line-height: 1.05 !important;
      }
      .hv6-redesign .faq-v2__list { display: flex; flex-direction: column; gap: 10px; }
      .hv6-redesign .faq-v2__item {
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255,255,255,.78) !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -12px rgba(31,31,31,.12);
        overflow: hidden;
      }
      .hv6-redesign .faq-v2__summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        color: var(--rs-ink) !important;
        transition: color 200ms var(--rs-ease);
      }
      .hv6-redesign .faq-v2__summary::-webkit-details-marker { display: none; }
      .hv6-redesign .faq-v2__summary:hover { color: var(--rs-iris) !important; }
      .hv6-redesign .faq-v2__chevron {
        width: 18px; height: 18px;
        flex-shrink: 0;
        color: var(--rs-text);
        transition: transform 240ms var(--rs-ease);
      }
      .hv6-redesign .faq-v2__item[open] .faq-v2__chevron { transform: rotate(180deg); color: var(--rs-iris); }
      .hv6-redesign .faq-v2__answer {
        padding: 0 22px 20px !important;
        font-size: 14.5px !important;
        line-height: 1.6 !important;
        color: var(--rs-text) !important;
        margin: 0 !important;
      }

      /* ---------- SECTION 14 · FINAL CTA (dark accent block) ---------- */
      .hv6-redesign .cta-final {
        padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 64px) !important;
        background: transparent !important;
      }
      .hv6-redesign .cta-final__container {
        position: relative;
        max-width: 1080px;
        margin: 0 auto;
        padding: clamp(60px, 7vw, 100px) clamp(24px, 4vw, 64px);
        background: linear-gradient(135deg, #0A0A0A 0%, #1F1F1F 100%) !important;
        border-radius: 32px;
        text-align: center;
        overflow: hidden;
        isolation: isolate;
        box-shadow: 0 28px 80px -24px rgba(10,10,10,.5);
      }
      .hv6-redesign .cta-final__container::before {
        content: ""; position: absolute; inset: 0; z-index: 0;
        background:
          radial-gradient(50% 50% at 0% 0%, rgba(99,102,241,.5), transparent 60%),
          radial-gradient(60% 60% at 100% 100%, rgba(34,211,238,.4), transparent 60%),
          radial-gradient(50% 50% at 100% 0%, rgba(139,92,246,.34), transparent 60%);
        filter: blur(20px);
        opacity: .85;
      }
      .hv6-redesign .cta-final__container > * { position: relative; z-index: 1; }
      .hv6-redesign .cta-final__title {
        font-size: clamp(34px, 3.2vw + 12px, 56px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.035em !important;
        color: #fff !important;
        line-height: 1.05 !important;
        max-width: 22ch;
        margin: 0 auto 20px !important;
        background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.78) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .hv6-redesign .cta-final__sub,
      .hv6-redesign .cta-final p {
        font-size: 17px !important;
        line-height: 1.55 !important;
        color: rgba(255,255,255,.7) !important;
        max-width: 50ch;
        margin: 0 auto 36px !important;
      }
      .hv6-redesign .cta-final__buttons {
        display: flex; gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .hv6-redesign .cta-final__cta-primary,
      .hv6-redesign .cta-final .btn-v2--primary {
        display: inline-flex !important;
        align-items: center;
        padding: 16px 30px !important;
        background: #fff !important;
        color: #0A0A0A !important;
        border: none !important;
        border-radius: 999px !important;
        font-family: var(--rs-font) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
        text-decoration: none !important;
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .cta-final__cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(255,255,255,.3); }
      .hv6-redesign .cta-final__cta-secondary,
      .hv6-redesign .cta-final .btn-v2--ghost {
        display: inline-flex !important;
        align-items: center;
        padding: 16px 30px !important;
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 999px !important;
        font-family: var(--rs-font) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .cta-final__cta-secondary:hover { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.32) !important; transform: translateY(-2px); }

      /* ---------- XREF STRIP ---------- */
      .hv6-redesign .xref-strip {
        max-width: 1080px;
        margin: 0 auto;
        padding: clamp(60px, 6vw, 96px) clamp(20px, 4vw, 64px) !important;
        border-top: 1px solid rgba(10,10,10,.06) !important;
      }
      .hv6-redesign .xref-strip__title {
        font-family: var(--rs-font) !important;
        font-size: clamp(24px, 1.8vw + 12px, 32px) !important;
        font-weight: 600 !important;
        letter-spacing: -0.022em !important;
        color: var(--rs-ink) !important;
        margin: 16px 0 28px !important;
      }
      .hv6-redesign .xref-strip__pills {
        display: flex; flex-wrap: wrap; gap: 8px;
        justify-content: center;
      }
      .hv6-redesign .xref-strip__pills a {
        display: inline-flex !important;
        padding: 9px 16px !important;
        background: rgba(255,255,255,.7) !important;
        border: 1px solid rgba(10,10,10,.08) !important;
        border-radius: 999px !important;
        font-family: var(--rs-mono) !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em;
        color: var(--rs-ink-2) !important;
        text-decoration: none !important;
        backdrop-filter: blur(12px);
        transition: all 200ms var(--rs-ease);
      }
      .hv6-redesign .xref-strip__pills a:hover {
        background: rgba(99,102,241,.08) !important;
        border-color: rgba(99,102,241,.3) !important;
        color: var(--rs-iris) !important;
        transform: translateY(-1px);
      }

      /* ── section-v2 / old-page compat inside hv6-redesign ── */
      .hv6-redesign .section-v2__title,
      .hv6-redesign .section-v2__sub,
      .hv6-redesign .tldr,
      .hv6-redesign .section-v2__header h2,
      .hv6-redesign .section-v2__header p { color: var(--rs-ink) !important; }
      .hv6-redesign .section-v2--alt,
      .hv6-redesign .section-v2--light,
      .hv6-redesign .section-v2--light-alt { background: transparent !important; }
      .hv6-redesign .cabinet-reason__title,
      .hv6-redesign .cabinet-reason__body,
      .hv6-redesign .cabinet-step__title,
      .hv6-redesign .cabinet-step__body,
      .hv6-redesign .wl-tile__title,
      .hv6-redesign .wl-tile__body,
      .hv6-redesign .partners-tier__title,
      .hv6-redesign .partners-tier__sub,
      .hv6-redesign .partners-tier__body { color: var(--rs-ink) !important; }
      .hv6-redesign .cabinet-reason,
      .hv6-redesign .cabinet-step,
      .hv6-redesign .wl-tile,
      .hv6-redesign .partners-tier {
        background: var(--rs-bg-card) !important;
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,.7) !important;
        border-radius: 18px !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -10px rgba(31,31,31,.14) !important;
      }
      .hv6-redesign .cabinet-reason__num { color: var(--rs-iris) !important; }
      .hv6-redesign .cabinet-step__num { color: var(--rs-iris) !important; }
      .hv6-redesign .wl-tile__icon svg { stroke: var(--rs-iris) !important; }
      .hv6-redesign .partners-tier--vip { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(255,255,255,.75)) !important; border-color: rgba(99,102,241,.25) !important; }


/* === Floating Telegram (modern Apple-style 2026) === */
.floating-telegram {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    background: rgba(20, 20, 22, 0.78);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    color: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 8px 24px -8px rgba(0, 0, 0, 0.45),
      0 2px 6px -2px rgba(0, 0, 0, 0.30);
    transition: transform 320ms cubic-bezier(.22,1,.36,1),
                box-shadow 320ms cubic-bezier(.22,1,.36,1),
                background 200ms ease;
}
.floating-telegram::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34C759;
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.22);
    animation: ft-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ft-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); }
}
.floating-telegram:hover {
    background: rgba(20, 20, 22, 0.92);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 14px 32px -8px rgba(0, 0, 0, 0.55),
      0 4px 10px -2px rgba(0, 0, 0, 0.30);
}
.floating-telegram:active { transform: translateY(0); }
.floating-telegram svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.92;
    margin-left: 2px;
}
.floating-telegram-text,
.floating-telegram__label {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.96);
}
@media (max-width: 768px) {
  .floating-telegram { bottom: 16px; right: 16px; padding: 10px 14px 10px 12px; font-size: 12.5px; }
  .floating-telegram svg { width: 14px; height: 14px; }
}
/* Hide on very small screens (iPhone SE) */
@media (max-width: 480px) {
  .floating-telegram { display: none; }
}
/* Respect motion preferences — disable pulse */
@media (prefers-reduced-motion: reduce) {
  .floating-telegram::before { animation: none; }
  .floating-telegram { transition: none; }
}

/* ================================================================
   GLOBAL MOBILE BREATHING ROOM  (≤640px)
   Uses `body` prefix (specificity 0,1,1) to beat compact-overrides
   inline-style !important rules which all have specificity 0,1,0.
   This way a single styles.css edit fixes all pages at once.
   ================================================================ */
@media (max-width: 768px) {

  /* ── Hero-v6 stage: 10px → 16px gap between eyebrow/title/chips/ctas ── */
  body .hero-v6__stage {
    gap: 16px !important;
    padding: 16px 0 !important;
  }

  /* ── Hero-v6 title: ensure readable size on small phones ── */
  body .hero-v6__title {
    font-size: clamp(26px, 7vw + 2px, 38px) !important;
  }

  /* ── Hero-v6 CTA buttons: remove forced min-height, let content breathe ── */
  body .hero-v6__btn {
    min-height: 0 !important;
    padding: 16px 18px 14px !important;
    row-gap: 10px !important;
  }
  body .hero-v6__btn-title { font-size: 19px !important; }
  body .hero-v6__btn-kicker { font-size: 11px !important; }
  body .hero-v6__btn-meta { font-size: 11px !important; }

  /* ── Hero-v6 feature chips: reduce font to keep single row ── */
  body .hv6-feat {
    font-size: 12.5px !important;
    padding: 7px 11px 7px 10px !important;
  }

  /* ── wu-tile--hero: more gap between inner elements ── */
  body .wu-tile--hero {
    gap: clamp(10px, 2vw, 16px) !important;
  }

  /* ── Sections: 32px → 48px block padding, gives visible breathing room ── */
  body .faq-v2,
  body .niche-catalog,
  body .why-unified,
  body .showcase-v2,
  body .countries-grid,
  body .cases-grid,
  body .calc-card-section,
  body .comparison-v2,
  body .pricing-v2,
  body .cta-final,
  body .xref-strip,
  body .r26-stats {
    padding-block: 48px !important;
  }
  body .faq-v2 { padding-block: 40px !important; }

  /* ── Section heads: more gap + margin-bottom ── */
  body .rs-section-head,
  body .niche-catalog__head,
  body .showcase-v2__header,
  body .countries-grid__header,
  body .cases-grid__header,
  body .comparison-v2__header,
  body .pricing-v2__header,
  body .why-unified__head {
    margin-bottom: 28px !important;
    gap: 12px !important;
  }

  /* ── Section titles: readable at mobile size ── */
  body .rs-section-title,
  body .niche-catalog__title,
  body .countries-grid__title,
  body .cases-grid__title,
  body .comparison-v2__title,
  body .pricing-v2__title,
  body .calc-card__title,
  body .why-unified__title,
  body .showcase-v2__header h2 {
    font-size: clamp(24px, 6vw + 2px, 32px) !important;
  }

  /* ── Inline padding for section containers ── */
  body .hv6-redesign .niche-catalog__row,
  body .hv6-redesign .showcase-v2__container,
  body .hv6-redesign .countries-grid__container,
  body .hv6-redesign .cases-grid__container,
  body .hv6-redesign .comparison-v2__container,
  body .hv6-redesign .pricing-v2__container {
    padding-inline: 0 !important;
  }

  /* ── Hero-v3 (platform, partners pages): title and sub spacing ── */
  body .hero-v3 {
    padding-top: 96px !important;
    padding-bottom: 40px !important;
  }
  body .hero-v3__title {
    margin: 20px 0 14px !important;
  }
  body .hero-v3__sub {
    margin-bottom: 24px !important;
  }
}

/* ============================================================
   Step 1.2: Russian text adaptations — [lang="ru"] overrides
   Russian words are ~30% longer than English on average.
   These rules prevent overflow and improve readability.
   ============================================================ */

/* Buttons: allow wrapping, wider min-width */
[lang="ru"] .btn-primary,
[lang="ru"] .btn-v2--primary,
[lang="ru"] .btn-v2--ghost,
[lang="ru"] .hero-v3__cta-primary,
[lang="ru"] .hv6-nav__drawer-cta {
    flex-wrap: wrap;
    min-width: 180px;
    justify-content: center;
    text-align: center;
}

/* Hero CTA cards: keep left-aligned grid layout for all languages */
[lang="ru"] .hero-v6__btn {
    text-align: left;
    justify-content: start;
}

/* Headings: max-width in ch units with 15% buffer */
[lang="ru"] .hero-v6__title {
    max-width: 22ch;
}
[lang="ru"] .section-v2__title {
    max-width: 35ch;
}
[lang="ru"] .feature-deep__title {
    max-width: 30ch;
}
[lang="ru"] .page-hero__title {
    max-width: 28ch;
}
[lang="ru"] .cta-final__title {
    max-width: 25ch;
}
[lang="ru"] .platform-hero__title {
    max-width: 28ch;
}

/* FAQ: break long words */
[lang="ru"] .faq-v2__summary,
[lang="ru"] .faq-v2__answer {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Navigation: tighter spacing for longer Russian labels */
[lang="ru"] .hv6-nav__link {
    font-size: 13px;
    letter-spacing: -0.01em;
}

/* Feature chips: smaller font to prevent 2-line wrap */
[lang="ru"] .hv6-feat {
    font-size: 12px;
    padding: 6px 10px 6px 8px;
}

/* Hero CTA cards: more compact for longer Russian text */
[lang="ru"] .hero-v6__btn-kicker {
    font-size: 10.5px;
}
[lang="ru"] .hero-v6__btn-meta {
    font-size: 10.5px;
}

/* Pricing card features: allow wrapping */
[lang="ru"] .pricing-card-v2__features li {
    font-size: 13px;
    line-height: 1.5;
}

/* Comparison table: smaller font for dense Russian text */
[lang="ru"] .comparison-v2 td {
    font-size: 13px;
}

/* Niche catalog chips: prevent overflow */
[lang="ru"] .niche-card__chips li {
    font-size: 11px;
    padding: 3px 8px;
}

/* Mobile: remove max-width constraints so text flows freely */
@media (max-width: 768px) {
    [lang="ru"] .hero-v6__title,
    [lang="ru"] .section-v2__title,
    [lang="ru"] .feature-deep__title,
    [lang="ru"] .page-hero__title,
    [lang="ru"] .cta-final__title,
    [lang="ru"] .platform-hero__title {
        max-width: 100%;
    }
    [lang="ru"] .hv6-feat {
        font-size: 11px;
        padding: 5px 8px 5px 7px;
    }
}

/* ============================================================
   Article / Guide page polish — typography, tables, lists, layout
   Applies to /guides/*.html articles using .article-page wrapper
   ============================================================ */
.article-page {
    background: #FFFFFF;
    color: #0A0A0A;
}
.article-page .container {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
.article-hero {
    padding: 48px 0 40px;
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 48px;
}
.article-hero .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #6B7280;
}
.article-hero .article-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #EEF2FF;
    color: #4F46E5;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.article-hero .article-date {
    color: #6B7280;
    font-size: 0.9rem;
}
.article-hero .article-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0A0A0A;
    margin: 0 0 16px;
}
.article-hero .article-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #4B5563;
    max-width: 820px;
    margin: 0;
}
.article-hero .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 24px;
    transition: color .2s;
}
.article-hero .back-link:hover { color: #4F46E5; }

.article-page .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    padding-bottom: 80px;
}
.article-page .article-main { min-width: 0; }

.article-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #1F2937;
}
.article-content > *:first-child { margin-top: 0; }
.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0A0A0A;
    margin: 48px 0 16px;
}
.article-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0A0A0A;
    margin: 28px 0 8px;
}
/* FAQ rhythm: tighten Q→A and A→Q gaps */
.article-content p + h3 { margin-top: 20px; }
.article-content h3 + p { margin-top: 0; }
.article-content h2 + h3 { margin-top: 16px; }
.article-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0A0A0A;
    margin: 24px 0 8px;
}
.article-content p {
    margin: 0 0 1.2em;
}
.article-content strong { color: #0A0A0A; font-weight: 700; }
.article-content a {
    color: #4F46E5;
    text-decoration: underline;
    text-decoration-color: rgba(79, 70, 229, .35);
    text-underline-offset: 3px;
    transition: color .2s, text-decoration-color .2s;
}
.article-content a:hover {
    color: #3730A3;
    text-decoration-color: #3730A3;
}
.article-content ul,
.article-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}
.article-content li {
    margin-bottom: 0.5em;
}
.article-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    background: #F8FAFC;
    border-left: 4px solid #4F46E5;
    border-radius: 0 8px 8px 0;
    color: #1F2937;
    font-style: italic;
}
.article-content code {
    background: #F1F5F9;
    color: #4F46E5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.article-content pre {
    background: #0F172A;
    color: #E2E8F0;
    padding: 16px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 0.9em;
}
.article-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}
.article-content hr {
    border: 0;
    border-top: 1px solid #E5E7EB;
    margin: 40px 0;
}

/* Tables */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}
.article-content thead { background: #F8FAFC; }
.article-content table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: #0A0A0A;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #E5E7EB;
}
.article-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    color: #1F2937;
    vertical-align: top;
}
.article-content table tbody tr:last-child td { border-bottom: 0; }
.article-content table tbody tr:hover { background: #FAFBFC; }

/* Inline custom blocks used by some articles */
.article-content .key-stat {
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    border-left: 4px solid #0284C7;
    padding: 14px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
    line-height: 1.5;
}
.article-content .key-stat strong { color: #0284C7; font-size: 1.05em; }
.article-content .dataset-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}
.article-content .dataset-box h3 { margin: 0 0 12px; color: #0F172A; font-size: 1.15rem; }
.article-content .dataset-box > p:last-child { margin-bottom: 0; color: #475569; font-size: 0.92rem; }
.article-content .dataset-box table {
    margin: 8px 0 12px;
    border: 0;
    border-radius: 8px;
    background: #FFFFFF;
    line-height: 1.5;
}
.article-content .dataset-box table th,
.article-content .dataset-box table td {
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.article-content .dataset-box table th {
    background: #EEF2FF;
    color: #1E293B;
    font-size: 0.78rem;
}

/* Tip-box (inline-styled in HTML, but ensure prose rhythm around it) */
.article-content .tip-box {
    margin: 28px 0;
    line-height: 1.6;
}
.article-content .tip-box a { font-weight: 600; }

/* Key-stat tighter line-height */
.article-content .key-stat { line-height: 1.55; }

/* Sidebar */
.article-page .article-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    height: fit-content;
}
.article-page .sidebar-block {
    background: #F8FAFC;
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 20px;
}
.article-page .sidebar-block h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    margin: 0 0 14px;
}
.article-page .sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.article-page .sidebar-links a {
    color: #1F2937;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.article-page .sidebar-links a:hover {
    color: #4F46E5;
    border-bottom-color: rgba(79, 70, 229, .25);
}

/* Override v2-scope dark article rules for guides — we keep guides light */
body.v2-scope .article-page,
body.v2-scope .article-hero,
body.v2-scope .article-content,
body.v2-scope .article-layout {
    background: #FFFFFF !important;
    color: #1F2937 !important;
}
body.v2-scope .article-title,
body.v2-scope .article-content h1,
body.v2-scope .article-content h2,
body.v2-scope .article-content h3,
body.v2-scope .article-content h4 {
    color: #0A0A0A !important;
}
body.v2-scope .article-content,
body.v2-scope .article-content p,
body.v2-scope .article-content li {
    color: #1F2937 !important;
}
body.v2-scope .article-content a,
body.v2-scope .guide-content a {
    color: #4F46E5 !important;
    text-decoration-color: rgba(79, 70, 229, .35) !important;
}
body.v2-scope .article-content a:hover,
body.v2-scope .guide-content a:hover {
    color: #3730A3 !important;
}
body.v2-scope .article-content table,
body.v2-scope .guide-content table {
    background: #FFFFFF !important;
    border-color: #E5E7EB !important;
}
body.v2-scope .article-content table th {
    background: #F8FAFC !important;
    color: #0A0A0A !important;
}
body.v2-scope .article-content table td {
    border-color: #F1F5F9 !important;
    color: #1F2937 !important;
}
body.v2-scope .article-page .article-sidebar a,
body.v2-scope .article-page .sidebar-links a {
    color: #1F2937 !important;
}
body.v2-scope .article-page .article-sidebar a:hover,
body.v2-scope .article-page .sidebar-links a:hover {
    color: #4F46E5 !important;
}

@media (max-width: 1024px) {
    .article-page .article-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .article-page .article-sidebar {
        position: static;
        order: 2;
    }
}
@media (max-width: 768px) {
    .article-hero { padding: 32px 0 28px; margin-bottom: 32px; }
    .article-hero .article-title { font-size: 1.85rem; }
    .article-hero .article-subtitle { font-size: 1rem; }
    .article-content { font-size: 1rem; line-height: 1.7; }
    .article-content h2 { font-size: 1.45rem; margin: 36px 0 12px; }
    .article-content h3 { font-size: 1.2rem; margin: 24px 0 10px; }
    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .article-page .container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Step 5.1: CSS-only wow effects
   Shimmer sweep on CTA buttons, animated gradient borders,
   ripple on click. All CSS-only, no JS required.
   ============================================================ */

/* ── Shimmer sweep on primary CTA buttons ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-v6__btn--primary,
  .btn-v2--primary,
  section.cta-final .btn-v2--primary {
    overflow: hidden;
    position: relative;
  }
  .hero-v6__btn--primary::after,
  .btn-v2--primary::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 70%
    );
    transition: left 600ms ease;
    pointer-events: none;
  }
  .hero-v6__btn--primary:hover::after,
  .btn-v2--primary:hover::after {
    left: 130%;
  }
}

/* ── Animated gradient border on featured/recommended cards ── */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media (prefers-reduced-motion: no-preference) {
  .pricing-card-v2--highlighted,
  .feature-deep--featured {
    border: 1.5px solid transparent !important;
    background-clip: padding-box !important;
    position: relative;
  }
  .pricing-card-v2--highlighted::before,
  .feature-deep--featured::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--gradient-angle),
      rgba(99, 102, 241, 0.5),
      rgba(34, 211, 238, 0.3),
      rgba(99, 102, 241, 0.1),
      rgba(139, 92, 246, 0.3),
      rgba(99, 102, 241, 0.5)
    );
    z-index: -1;
    animation: gradient-rotate 4s linear infinite;
  }
  @keyframes gradient-rotate {
    to { --gradient-angle: 360deg; }
  }
}

/* ── Ripple effect on click (CSS scale + opacity) ── */
.btn-v2--primary,
.btn-primary,
.hero-v6__btn--primary {
  position: relative;
  overflow: hidden;
}
.btn-v2--primary:active::rpl,
.btn-primary:active::rpl,
.hero-v6__btn--primary:active::rpl {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255,255,255,0.3) 0%, transparent 60%);
  animation: ripple-fade 300ms ease-out forwards;
  pointer-events: none;
}
@keyframes ripple-fade {
  from { opacity: 1; transform: scale(0.8); }
  to   { opacity: 0; transform: scale(1.2); }
}

/* ============================================================
   Step 3.2: Touch device overrides
   Neutralize hover transforms/effects on touch devices.
   Uses @media (hover: none) to target devices without hover.
   ============================================================ */
@media (hover: none) {
  /* Cards: no hover lift */
  .feature-category:hover,
  .guide-card:hover,
  .case-card:hover,
  .country-tile:hover,
  .pricing-card-v2:hover,
  .cabinet-reason:hover,
  .wl-tile:hover,
  .partners-tier:hover,
  .wu-tile:hover,
  .niche-card:hover,
  .features-bento .feature-deep:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Buttons: no hover translate */
  .btn-primary:hover,
  .btn-v2--primary:hover,
  .btn-v2--ghost:hover,
  .btn-hero-primary:hover,
  .btn-hero-secondary:hover,
  .hero-v6__btn--primary:hover,
  .hero-v6__btn--ghost:hover,
  .floating-telegram:hover {
    transform: none !important;
  }

  /* FAQ: no hover background change */
  .faq-item:hover,
  .faq-v2__summary:hover {
    background: inherit !important;
  }

  /* Active state for touch feedback (150ms) */
  .btn-primary:active,
  .btn-v2--primary:active,
  .hero-v6__btn--primary:active {
    transform: scale(0.97);
    transition-duration: 150ms;
  }
}

/* ==========================================================================
   CONSOLIDATED INLINE STYLES — moved from <head> to styles.css
   Order preserved: keyboard-nav → compact-overrides → mobile-breathing-room
   → faq-item-fix → spacing-standard → responsive-audit
   ========================================================================== */

/* --- Keyboard navigation --- */
body.keyboard-nav *:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Compact overrides (aggressive density v2) --- */
/* === Aggressive compact density v2 — 2026-04-25 === */
/* Section padding cut hard */
.faq-v2,
.niche-catalog,
.why-unified,
.showcase-v2,
.countries-grid,
.cases-grid,
.calc-card-section,
.comparison-v2,
.pricing-v2,
.cta-final,
.xref-strip,
.r26-stats {
  padding-block: clamp(32px, 4.5vh, 56px) !important;
}

/* FAQ: kill ALL padding/list-style on summary; tight rows */
.faq-v2 { padding-block: clamp(28px, 4vh, 48px) !important; }
.faq-v2__header { margin-bottom: clamp(20px, 2.5vh, 36px) !important; }

/* Section heads dramatically tighter */
.rs-section-head,
.niche-catalog__head,
.showcase-v2__header,
.countries-grid__header,
.cases-grid__header,
.comparison-v2__header,
.pricing-v2__header,
.why-unified__head {
  margin-bottom: clamp(18px, 2.5vw, 36px) !important;
  gap: clamp(8px, 1vw, 14px) !important;
}

/* Section titles smaller */
.rs-section-title,
.niche-catalog__title,
.countries-grid__title,
.cases-grid__title,
.comparison-v2__title,
.pricing-v2__title,
.calc-card__title,
.why-unified__title,
.showcase-v2__header h2 {
  font-size: clamp(22px, 2.2vw + 6px, 36px) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* TILE HEIGHT FIX — wu-tile used to be ~400-600px tall — cut to ~120-180px */
.wu-tile,
.hv6-redesign .wu-tile,
.niche-card,
.case-card,
.pricing-card-v2,
.comparison-v2__row {
  padding: clamp(14px, 1.5vw, 22px) !important;
  min-height: 0 !important;
}

/* wu-tile--hero was the WORST offender — was 600px+ tall */
.wu-tile--hero,
.hv6-redesign .wu-tile--hero {
  padding: clamp(18px, 2vw, 28px) !important;
  min-height: 0 !important;
  gap: clamp(8px, 1vw, 14px) !important;
}
.wu-tile--hero .wu-tile__title { font-size: clamp(18px, 1.6vw + 4px, 24px) !important; line-height: 1.15 !important; margin-bottom: 6px !important; }
.wu-tile--hero .wu-tile__body { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 8px !important; }
.wu-tile--hero .wu-tile__visual { display: none !important; } /* kill huge mock visual that doubled height */
.wu-tile--hero .wu-tile__bullets { gap: 4px !important; margin-bottom: 8px !important; }
.wu-tile--hero .wu-tile__bullets li { font-size: 13px !important; }
.wu-tile--hero .wu-tile__cta { padding: 8px 14px !important; font-size: 13px !important; }

/* Generic wu-tile content */
.wu-tile__title { font-size: clamp(15px, 1.2vw + 3px, 18px) !important; line-height: 1.2 !important; margin-bottom: 4px !important; }
.wu-tile__body { font-size: 13px !important; line-height: 1.45 !important; }
.wu-tile__num { font-size: 14px !important; }
.wu-tile__meta { margin-bottom: 8px !important; }

/* Hero compact */
.hero-v6__stage { gap: clamp(10px, 1.2vw, 18px) !important; padding: clamp(12px, 2vw, 24px) 0 !important; }
.hero-v6__title { font-size: clamp(26px, 2.6vw + 6px, 44px) !important; line-height: 1.05 !important; }
.hero-v6__eyebrow { margin-bottom: 0 !important; font-size: 10.5px !important; }

/* Hero CTAs compact */
.hero-v6__btn { min-height: 100px !important; padding: 14px 18px 12px !important; }
.hero-v6__btn-title { font-size: 18px !important; }
.hero-v6__btn-kicker { font-size: 11px !important; }
.hero-v6__btn-meta { font-size: 11px !important; }

/* Comparison rows denser */
.comparison-v2__row { padding-block: 8px !important; }
.comparison-v2__row td { padding-block: 6px !important; font-size: 13.5px !important; }

/* Niche-card compact */
.niche-card__chips li { font-size: 12px !important; padding: 4px 8px !important; }
.niche-card__label { font-size: 16px !important; }

/* Country tile compact */
.country-tile { padding: var(--sp-3, 12px) !important; }
.country-tile__name { font-size: 12.5px !important; }

/* Stats strip compact */
.r26-stats__inner { gap: 16px !important; }
.r26-stats__num { font-size: 22px !important; }
.r26-stats__label { font-size: 12px !important; }

/* --- Mobile breathing room --- */
/* Mobile breathing room — overrides compact-overrides density on phones.
   Placed AFTER compact-overrides so same-specificity !important rules win
   due to cascade source order. Only active at ≤640px. */
@media (max-width: 768px) {
  /* Hero-v6: stage gap 10px → 16px */
  .hero-v6__stage { gap: 16px !important; padding: 16px 0 !important; }
  /* Hero-v6: title — more readable */
  .hero-v6__title { font-size: clamp(26px, 7vw + 2px, 38px) !important; }
  /* Hero-v6: CTA cards — remove forced min-height, let content breathe */
  .hero-v6__btn { min-height: 0 !important; padding: 16px 18px 14px !important; row-gap: 10px !important; }
  .hero-v6__btn-title { font-size: 19px !important; }
  /* Hero-v6: feature chips — smaller to prevent 2-row wrap */
  .hv6-feat { font-size: 12.5px !important; padding: 7px 11px 7px 10px !important; }
  /* wu-tile--hero: more gap */
  .wu-tile--hero { gap: 12px !important; }
  /* Sections: 32px → 48px block padding */
  .faq-v2,
  .niche-catalog,
  .why-unified,
  .showcase-v2,
  .countries-grid,
  .cases-grid,
  .calc-card-section,
  .comparison-v2,
  .pricing-v2,
  .cta-final,
  .xref-strip,
  .r26-stats { padding-block: 48px !important; }
  .faq-v2 { padding-block: 40px !important; }
  /* Section heads: more breathing room */
  .rs-section-head,
  .niche-catalog__head,
  .showcase-v2__header,
  .countries-grid__header,
  .cases-grid__header,
  .comparison-v2__header,
  .pricing-v2__header,
  .why-unified__head { margin-bottom: 28px !important; gap: 12px !important; }
  /* Section titles: more impact at mobile size */
  .rs-section-title,
  .niche-catalog__title,
  .countries-grid__title,
  .cases-grid__title,
  .comparison-v2__title,
  .pricing-v2__title,
  .calc-card__title,
  .why-unified__title,
  .showcase-v2__header h2 { font-size: clamp(24px, 6vw + 2px, 32px) !important; }
  /* Hero-v3 (platform, partners): title/sub margins */
  .hero-v3 { padding-top: 96px !important; padding-bottom: 40px !important; }
  .hero-v3__title { margin: 20px 0 14px !important; }
  .hero-v3__sub { margin-bottom: 24px !important; }
}

/* --- FAQ item fix --- */
/* FAQ: white cards with visible gap between items */
.faq-v2__list { gap: 8px !important; display: flex !important; flex-direction: column !important; }
.faq-v2__item {
  padding: 14px 18px !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
.faq-v2__summary {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.faq-v2__answer {
  font-size: 13px !important;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
  line-height: 1.55 !important;
}
.faq-v2__chevron { width: 16px !important; height: 16px !important; }

/* --- Spacing standard (unified section headers) --- */
/* === Unified section-header spacing — applied across all 12 pages === */
/* Goal: every section uses IDENTICAL: header-bottom-gap, eyebrow→title gap, title→sub gap, content→cta gap */

/* All section heads: same bottom gap to content + same internal gap */
.rs-section-head,
.niche-catalog__head,
.why-unified__head,
.showcase-v2__header,
.countries-grid__header,
.cases-grid__header,
.comparison-v2__header,
.pricing-v2__header,
.faq-v2__header,
.calc-card-section__container > .rs-section-head,
.cta-final__container > header,
.xref-strip__inner > header,
.r26-stats__header {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto clamp(32px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
}

/* Eyebrow → first item: tight, no margin (gap handles it) */
.rs-eyebrow,
.r26-eyebrow,
.niche-catalog__eyebrow,
.why-unified__eyebrow,
.showcase-v2__eyebrow,
.countries-grid__eyebrow,
.cases-grid__eyebrow,
.comparison-v2__eyebrow,
.pricing-v2__eyebrow,
.faq-v2__eyebrow,
.cta-final__eyebrow,
.xref-strip__eyebrow {
  margin: 0 !important;
}

/* Section titles: unified size + zero margin (gap handles spacing) */
.rs-section-title,
.niche-catalog__title,
.why-unified__title,
.showcase-v2__header h2,
.countries-grid__title,
.cases-grid__title,
.comparison-v2__title,
.pricing-v2__title,
.calc-card__title,
.faq-v2__title,
.cta-final__title,
.xref-strip__title {
  font-size: clamp(24px, 2vw + 8px, 36px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto !important;
  font-weight: 600 !important;
  max-width: 22ch !important;
}

/* Section subtitles/leads: unified */
.rs-section-sub,
.niche-catalog__sub,
.why-unified__sub,
.showcase-v2__header p,
.countries-grid__sub,
.cases-grid__sub,
.comparison-v2__sub,
.pricing-v2__sub,
.faq-v2__sub,
.cta-final__sub,
.xref-strip__sub,
.tldr {
  font-size: clamp(14px, 0.5vw + 11px, 16px) !important;
  line-height: 1.5 !important;
  color: var(--rs-text, #4B5563) !important;
  max-width: 60ch !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Content (grid/cards) → CTA wrapper below: uniform top gap */
.countries-grid__cta-wrap,
.cases-grid__cta-wrap,
.pricing-v2__cta-wrap,
.calc-card__cta-wrap,
.cta-final__cta-wrap,
.niche-catalog__cta-wrap,
.section-v2__cta-wrap,
.why-unified__cta-wrap {
  margin-top: clamp(28px, 3.5vw, 48px) !important;
  text-align: center !important;
}

/* Section vertical padding: same on all sections */
.faq-v2,
.niche-catalog,
.why-unified,
.showcase-v2,
.countries-grid,
.cases-grid,
.calc-card-section,
.comparison-v2,
.pricing-v2,
.cta-final,
.xref-strip,
.r26-stats {
  padding-block: clamp(48px, 6vw, 96px) !important;
  padding-inline: clamp(20px, 4vw, 64px) !important;
}

/* Section inner containers: uniform max-width + center */
.niche-catalog__row,
.showcase-v2__container,
.countries-grid__container,
.cases-grid__container,
.calc-card-section__container,
.comparison-v2__container,
.pricing-v2__container,
.faq-v2__container,
.cta-final__container,
.xref-strip__inner,
.why-unified__container,
.r26-stats__inner {
  max-width: 1240px !important;
  margin-inline: auto !important;
  width: 100% !important;
}

/* --- Responsive audit (comprehensive mobile/tablet overrides) --- */
/* =========================================================================
   RESPONSIVE AUDIT — comprehensive mobile/tablet overrides
   Last block in <head>. Targets nav, hero, sections, cards, comparison,
   pricing, forms, footer. Mobile breakpoints: 1280, 1024, 880, 768, 640, 414.
   Touch target minimum: 44x44px. Replaceable as a unit (id="responsive-audit").
   ========================================================================= */

/* Hamburger button (hidden ≥881px, shown <881px) */
.hv6-nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(10, 10, 10, 0.10);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, border-color 160ms ease;
}
.hv6-nav__burger:hover { background: rgba(255, 255, 255, 0.9); }
.hv6-nav__burger-bar {
  display: block;
  width: 18px;
  height: 1.8px;
  background: #1F1F1F;
  border-radius: 2px;
  transition: transform 220ms cubic-bezier(.4,.0,.2,1), opacity 160ms ease;
}
.hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(1) {
  transform: translateY(6.8px) rotate(45deg);
}
.hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.hv6-nav.is-mobile-open .hv6-nav__burger-bar:nth-child(3) {
  transform: translateY(-6.8px) rotate(-45deg);
}

/* Mobile drawer (off-screen by default, slides in when open) */
.hv6-nav__drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 80px 24px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.hv6-nav.is-mobile-open .hv6-nav__drawer {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
body.hv6-mobile-locked { overflow: hidden; }

.hv6-nav__drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 480px;
  margin-inline: auto;
}
.hv6-nav__drawer-list a,
.hv6-nav__drawer-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #1F1F1F;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hv6-nav__drawer-list a:hover,
.hv6-nav__drawer-list a:active,
.hv6-nav__drawer-list button:hover {
  background: rgba(99, 102, 241, 0.08);
}
.hv6-nav__drawer-sublabel {
  padding: 14px 18px 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #86868B;
  font-weight: 600;
}
.hv6-nav__drawer-sub {
  list-style: none;
  margin: 0 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid rgba(99, 102, 241, 0.15);
}
.hv6-nav__drawer-sub a {
  flex-direction: column;
  align-items: flex-start;
  font-size: 15px;
  color: #4B5563;
  min-height: 44px;
  padding-left: 18px;
}
.hv6-nav__drawer-sub a small {
  display: block;
  font-size: 12.5px;
  color: #86868B;
  font-weight: 400;
  margin-top: 2px;
}
.hv6-nav__drawer-divider {
  height: 1px;
  background: rgba(10, 10, 10, 0.08);
  margin: 16px 4px;
}
.hv6-nav__drawer-langs {
  display: flex;
  gap: 8px;
  padding: 4px 18px 12px;
}
.hv6-nav__drawer-langs a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1F1F1F;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  text-decoration: none;
  transition: background 140ms ease;
}
.hv6-nav__drawer-langs a.is-active {
  background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%);
  color: #fff;
}
.hv6-nav__drawer-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 16px 4px 0;
  min-height: 52px;
  padding: 16px 22px !important;
  font-size: 15px !important;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, #6366F1 0%, #3B82F6 100%) !important;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.55);
}

/* ------------------------ 1280px (laptop) ------------------------ */
@media (max-width: 1280px) {
  .hero-v6__title { font-size: clamp(30px, 3vw + 12px, 52px) !important; }
  .niche-catalog__row { gap: 16px !important; }
}

/* ------------------------ 1024px (tablet landscape) ------------------------ */
@media (max-width: 1024px) {
  .hv6-nav__list { gap: 14px !important; }
  .hv6-nav__link { font-size: 14px !important; padding: 8px 10px !important; }
  .hv6-nav__cta { padding: 8px 14px !important; font-size: 13.5px !important; }

  /* Cards: tighter grids on tablet */
  .why-unified__grid,
  .why-unified__row { grid-template-columns: repeat(2, 1fr) !important; }
  .pricing-v2__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cases-grid__wrap { grid-template-columns: repeat(2, 1fr) !important; }
  .countries-grid__wrap { grid-template-columns: repeat(3, 1fr) !important; }

  /* Section padding tightens */
  .faq-v2, .niche-catalog, .why-unified, .showcase-v2, .countries-grid,
  .cases-grid, .calc-card-section, .comparison-v2, .pricing-v2,
  .cta-final, .xref-strip, .r26-stats {
    padding-block: clamp(40px, 5vw, 72px) !important;
    padding-inline: clamp(20px, 3vw, 40px) !important;
  }
}

/* ------------------------ 880px (tablet portrait — hide scroll-indicator, prep nav) ------------------------ */
@media (max-width: 1024px) {
  /* Hide desktop scroll-indicator on tablet/phone */
  .scroll-indicator { display: none !important; }

  /* Show hamburger; hide nav list. Keep CTA visible — "Try the panel" stays in nav */
  .hv6-nav__burger { display: inline-flex !important; }
  .hv6-nav__list { display: none !important; }
  .hv6-nav__lang { display: none !important; }
  .hv6-nav__right > a:not(.hv6-nav__cta) { display: none !important; }
  .hv6-nav__cta { padding: 8px 16px !important; font-size: 13px !important; }

  /* Nav stays compact */
  .hv6-nav {
    padding: 10px 14px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .niche-catalog__row { grid-template-columns: 1fr !important; }
  .countries-grid__wrap { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ------------------------ 768px (small tablet) ------------------------ */
@media (max-width: 768px) {
  /* Hero — scale down + stack CTAs */
  .hero-v6__title {
    font-size: clamp(28px, 6vw + 6px, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    max-width: 18ch !important;
  }
  .hero-v6__sub { font-size: 15px !important; line-height: 1.5 !important; }
  .hero-v6__ctas { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hero-v6__btn {
    min-height: 0 !important;
    padding: 22px 22px 20px !important;
    border-radius: 18px !important;
  }
  .hero-v6__btn-meta { font-size: 13px !important; line-height: 1.4 !important; }
  .hero-v6__btn-kicker { font-size: 11.5px !important; }
  .hero-v6__btn-title { font-size: 17px !important; }

  /* Aurora — полностью скрыть на мобильных для производительности */
  .hero-v6__orb,
  .site-aurora__pool { display: none !important; }
  .site-aurora { display: none !important; }

  /* Section grids → single column */
  .why-unified__grid,
  .why-unified__row,
  .pricing-v2__grid,
  .cases-grid__wrap,
  .why-unified__features { grid-template-columns: 1fr !important; }

  /* Cards spacing */
  .pricing-v2__card,
  .wu-tile,
  .cases-grid__card { padding: 22px !important; }

  /* Showcase tabs — horizontal scroll */
  .showcase-v2__tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .showcase-v2__tabs::-webkit-scrollbar { display: none !important; }
  .showcase-v2__tab { flex-shrink: 0 !important; }

  /* Forms — full width, larger touch targets */
  .lead-form__row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .lead-form__input,
  .lead-form__select,
  .lead-form__textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 12px 14px !important;
  }
  .lead-form__textarea { min-height: 110px !important; }
  .lead-form__submit {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
  }

  /* Generic any-form button safety */
  button, .btn, [role="button"] { min-height: 44px; }
}

/* ------------------------ 640px (phone landscape / small tablet portrait) ------------------------ */
@media (max-width: 768px) {
  /* Section padding — phone-friendly */
  .faq-v2, .niche-catalog, .why-unified, .showcase-v2, .countries-grid,
  .cases-grid, .calc-card-section, .comparison-v2, .pricing-v2,
  .cta-final, .xref-strip, .r26-stats {
    padding-block: 36px !important;
    padding-inline: 16px !important;
  }

  /* Section heads — tighter on phone */
  .rs-section-head,
  .niche-catalog__head,
  .why-unified__head,
  .showcase-v2__header,
  .countries-grid__header,
  .cases-grid__header,
  .comparison-v2__header,
  .pricing-v2__header,
  .faq-v2__header,
  .cta-final__container > header,
  .xref-strip__inner > header,
  .r26-stats__header {
    margin-bottom: 24px !important;
    gap: 10px !important;
  }
  .rs-section-title,
  .niche-catalog__title,
  .why-unified__title,
  .showcase-v2__header h2,
  .countries-grid__title,
  .cases-grid__title,
  .comparison-v2__title,
  .pricing-v2__title,
  .calc-card__title,
  .faq-v2__title,
  .cta-final__title,
  .xref-strip__title {
    font-size: clamp(22px, 5.5vw, 28px) !important;
  }

  /* Countries grid — 2 cols on phone */
  .countries-grid__wrap { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Comparison table — convert to stacked cards */
  .comparison-v2__table-wrap {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
  }
  .comparison-v2__table { border: 0 !important; }
  .comparison-v2__table thead { display: none !important; }
  .comparison-v2__table tbody,
  .comparison-v2__table tr,
  .comparison-v2__table td { display: block !important; width: 100% !important; }
  .comparison-v2__table tr {
    padding: 14px 16px !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.7) !important;
  }
  .comparison-v2__table tr:hover td { background: transparent !important; }
  .comparison-v2__table td {
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }
  .comparison-v2__table td:first-child {
    font-weight: 600 !important;
    font-size: 15.5px !important;
    color: #1F1F1F !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
  }
  .comparison-v2__table td:nth-child(2)::before {
    content: "Native: ";
    color: #ef4444;
    font-weight: 600;
    margin-right: 4px;
  }
  .comparison-v2__table td:nth-child(3)::before {
    content: "ADSLY: ";
    color: #10b981;
    font-weight: 600;
    margin-right: 4px;
  }

  /* FAQ — keep chevron from overlapping long questions */
  .faq-v2__q-summary,
  .faq-v2 summary {
    padding-right: 36px !important;
    line-height: 1.4 !important;
  }

  /* Footer — single column */
  .adsly-foot__top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .adsly-foot__brand { margin-bottom: 4px !important; }

  /* Pricing cards — full-width, stacked */
  .pricing-v2__card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  /* Tighten section pills/eyebrows */
  .rs-eyebrow,
  .niche-catalog__eyebrow,
  .why-unified__eyebrow,
  .showcase-v2__eyebrow,
  .countries-grid__eyebrow,
  .cases-grid__eyebrow,
  .comparison-v2__eyebrow,
  .pricing-v2__eyebrow,
  .faq-v2__eyebrow,
  .cta-final__eyebrow,
  .xref-strip__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.10em !important;
  }

  /* CTA-final — single column, tight */
  .cta-final__buttons,
  .cta-final__cta-wrap {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .cta-final__buttons > a,
  .cta-final__cta-wrap > a { width: 100% !important; }

  /* Hero feature chips — 2-line, smaller */
  .hero-v6__features { gap: 6px 8px !important; }
  .hv6-feat { padding: 6px 10px !important; font-size: 12.5px !important; }
}

/* ------------------------ 414px (iPhone Plus / SE+) ------------------------ */
@media (max-width: 480px) {
  /* Hero very tight */
  .hero-v6__title { font-size: 26px !important; line-height: 1.1 !important; }
  .hero-v6__btn { padding: 18px 18px 16px !important; }
  .hero-v6__btn-title { font-size: 16px !important; }
  .hero-v6__btn-meta { font-size: 12.5px !important; }

  /* Sections: even tighter */
  .faq-v2, .niche-catalog, .why-unified, .showcase-v2, .countries-grid,
  .cases-grid, .calc-card-section, .comparison-v2, .pricing-v2,
  .cta-final, .xref-strip, .r26-stats {
    padding-block: 32px !important;
    padding-inline: 14px !important;
  }

  /* Countries — 2 cols still, smaller cells */
  .countries-grid__wrap { gap: 8px !important; }

  /* Drawer items a touch tighter */
  .hv6-nav__drawer { padding: 76px 18px 28px !important; }
  .hv6-nav__drawer-list a,
  .hv6-nav__drawer-list button { font-size: 16px !important; padding: 12px 14px !important; }

  /* Footer text scaling */
  .adsly-foot__list a { font-size: 13.5px !important; }
}

/* iOS native select dropdown — do not over-style on small viewports */
@media (max-width: 768px) {
  select.lead-form__select {
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    background-image: none !important;
  }
}

/* ============================================================
   FAQ v3 — Compact Grid
   Two-column grid, minimal cards, fits on one screen.
   Overrides ALL previous FAQ styles (placed last in cascade).
   ============================================================ */

/* --- Section --- */
.faq-v2,
.hv6-redesign .faq-v2 {
  padding: 48px 24px !important;
  background: transparent !important;
}
.faq-v2__container {
  max-width: 960px !important;
  margin: 0 auto !important;
}
.faq-v2__header {
  text-align: center !important;
  margin-bottom: 28px !important;
}
.faq-v2__header h2,
.faq-v2__header .section-v2__title {
  font-size: clamp(22px, 1.6vw + 12px, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--hv6-text, #1a1a2e) !important;
}

/* --- Two-column grid --- */
.faq-v2__list,
.hv6-redesign .faq-v2__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  flex-direction: initial !important;
}

/* --- Card items --- */
.faq-v2__item,
.hv6-redesign .faq-v2__item {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.faq-v2__item:hover,
.hv6-redesign .faq-v2__item:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.faq-v2__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
}

/* --- Summary (question) --- */
.faq-v2__summary,
.hv6-redesign .faq-v2__summary {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--hv6-text, #1a1a2e) !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  letter-spacing: -0.01em !important;
}
.faq-v2__summary:hover,
.hv6-redesign .faq-v2__summary:hover {
  color: var(--hv6-iris, #6366f1) !important;
}

/* --- Answer --- */
.faq-v2__answer,
.hv6-redesign .faq-v2__answer {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(26, 26, 46, 0.65) !important;
  padding: 6px 0 0 !important;
  margin: 0 !important;
}

/* --- Chevron --- */
.faq-v2__chevron,
.hv6-redesign .faq-v2__chevron {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
  color: rgba(26, 26, 46, 0.3) !important;
  margin-top: 2px !important;
}
.faq-v2__item[open] .faq-v2__chevron,
.hv6-redesign .faq-v2__item[open] .faq-v2__chevron {
  transform: rotate(180deg) !important;
  color: var(--hv6-iris, #6366f1) !important;
}

/* --- Dark section context (body.v2-scope) --- */
body.v2-scope .faq-v2__item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.v2-scope .faq-v2__summary,
body.v2-scope .faq-v2 summary {
  color: var(--text-on-dark, #e2e8f0) !important;
}
body.v2-scope .faq-v2__answer,
body.v2-scope .faq-v2 details > p {
  color: rgba(226, 232, 240, 0.7) !important;
}

/* --- Russian text --- */
[lang="ru"] .faq-v2__summary {
  font-size: 13px !important;
}
[lang="ru"] .faq-v2__answer {
  font-size: 12px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* --- Tablet (768–1023) --- */
@media (max-width: 1023px) {
  .faq-v2,
  .hv6-redesign .faq-v2 {
    padding: 40px 20px !important;
  }
  .faq-v2__list,
  .hv6-redesign .faq-v2__list {
    gap: 5px !important;
  }
  .faq-v2__item,
  .hv6-redesign .faq-v2__item {
    padding: 10px 12px !important;
  }
  .faq-v2__summary,
  .hv6-redesign .faq-v2__summary {
    font-size: 13px !important;
  }
  .faq-v2__answer,
  .hv6-redesign .faq-v2__answer {
    font-size: 12px !important;
  }
}

/* --- Mobile (<768) --- */
@media (max-width: 767px) {
  .faq-v2,
  .hv6-redesign .faq-v2 {
    padding: 32px 16px !important;
  }
  .faq-v2__list,
  .hv6-redesign .faq-v2__list {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  .faq-v2__header {
    margin-bottom: 20px !important;
  }
  .faq-v2__header h2,
  .faq-v2__header .section-v2__title {
    font-size: 20px !important;
  }
}

/* --- Small mobile (<480) --- */
@media (max-width: 479px) {
  .faq-v2,
  .hv6-redesign .faq-v2 {
    padding: 24px 12px !important;
  }
  .faq-v2__item,
  .hv6-redesign .faq-v2__item {
    padding: 9px 11px !important;
    border-radius: 10px !important;
  }
  .faq-v2__summary,
  .hv6-redesign .faq-v2__summary {
    font-size: 12.5px !important;
  }
  .faq-v2__answer,
  .hv6-redesign .faq-v2__answer {
    font-size: 11.5px !important;
  }
  .faq-v2__chevron,
  .hv6-redesign .faq-v2__chevron {
    width: 14px !important;
    height: 14px !important;
  }
}