/* ============================================
   PROXITY Design System
   ============================================ */

/* --- Brand Font: Aa Stetica (shared with the platform app) --- */
@font-face {
    font-family: 'Aa Stetica';
    src: url('../fonts/AA-Stetica-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aa Stetica';
    src: url('../fonts/AA-Stetica-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aa Stetica';
    src: url('../fonts/AA-Stetica-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aa Stetica';
    src: url('../fonts/AA-Stetica-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Global Variables --- */
:root {
    /* Colors */
    --bg-dark: #050a14;
    --bg-dark-secondary: #0a1428;
    --text-primary: #ffffff;
    --text-secondary: #bac5d6;
    --text-muted: #9aa8bd;
    /* One Blue: single brand accent shared with the platform app (#184cd0).
       Solid fills use accent-fill + white text (6.9:1); accent-text is the
       light companion that keeps AA contrast for text/icons on dark surfaces. */
    --accent-fill: #184cd0;
    --accent-deep: #13198f;
    --accent-text: #7d9bff;
    /* Legacy aliases kept so existing rules and inline styles stay valid */
    --primary-blue: var(--accent-text);
    --primary-blue-dark: var(--accent-fill);
    --primary-gradient: var(--accent-fill);
    
    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.15);
    
    /* Layout */
    --card-radius: 24px;
    --card-radius-sm: 16px;
    --card-radius-xs: 12px;
    --container-max: 1200px;
    --header-height: 80px;
    
    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Shadows */
    --shadow-glow: 0 0 32px rgba(24, 76, 208, 0.2);
    --shadow-glow-strong: 0 0 48px rgba(24, 76, 208, 0.3);
    --shadow-button: 0 8px 20px rgba(24, 76, 208, 0.35);
    --shadow-button-hover: 0 12px 26px rgba(24, 76, 208, 0.5);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Aa Stetica', Tahoma, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Animated Mesh Gradient Background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #0f172a;
    z-index: -3;
}

/* Animated gradient orbs - soft blue tones with mouse interaction */
.gradient-orb {
    --mouse-x: 0px;
    --mouse-y: 0px;
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -2;
    opacity: 0;
    will-change: transform;
    animation: fadeInOrb 2s ease-out forwards;
}

@keyframes fadeInOrb {
    to { opacity: 1; }
}

.gradient-orb-1 {
    width: 600px;
    height: 600px;
    background: rgba(59, 130, 246, 0.35);
    top: -10%;
    left: -5%;
    animation: orbFloat1 30s ease-in-out infinite, fadeInOrb 2s ease-out forwards, orbColor1 20s ease-in-out infinite;
}

.gradient-orb-2 {
    width: 500px;
    height: 500px;
    background: rgba(6, 182, 212, 0.3);
    top: 60%;
    right: -10%;
    animation: orbFloat2 35s ease-in-out infinite, fadeInOrb 2s ease-out 0.3s forwards, orbColor2 25s ease-in-out infinite;
}

.gradient-orb-3 {
    width: 450px;
    height: 450px;
    background: rgba(30, 64, 175, 0.4);
    bottom: -5%;
    left: 30%;
    animation: orbFloat3 40s ease-in-out infinite, fadeInOrb 2s ease-out 0.6s forwards, orbColor3 30s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% {
        transform: translate(calc(0% + var(--mouse-x)), calc(0% + var(--mouse-y))) scale(1);
    }
    25% {
        transform: translate(calc(10% + var(--mouse-x)), calc(15% + var(--mouse-y))) scale(1.05);
    }
    50% {
        transform: translate(calc(5% + var(--mouse-x)), calc(25% + var(--mouse-y))) scale(0.95);
    }
    75% {
        transform: translate(calc(-5% + var(--mouse-x)), calc(10% + var(--mouse-y))) scale(1.02);
    }
}

@keyframes orbFloat2 {
    0%, 100% {
        transform: translate(calc(0% + var(--mouse-x)), calc(0% + var(--mouse-y))) scale(1);
    }
    20% {
        transform: translate(calc(-15% + var(--mouse-x)), calc(-10% + var(--mouse-y))) scale(1.03);
    }
    40% {
        transform: translate(calc(-25% + var(--mouse-x)), calc(5% + var(--mouse-y))) scale(0.97);
    }
    60% {
        transform: translate(calc(-10% + var(--mouse-x)), calc(15% + var(--mouse-y))) scale(1.05);
    }
    80% {
        transform: translate(calc(5% + var(--mouse-x)), calc(5% + var(--mouse-y))) scale(0.98);
    }
}

@keyframes orbFloat3 {
    0%, 100% {
        transform: translate(calc(0% + var(--mouse-x)), calc(0% + var(--mouse-y))) scale(1);
    }
    15% {
        transform: translate(calc(-10% + var(--mouse-x)), calc(-10% + var(--mouse-y))) scale(1.02);
    }
    35% {
        transform: translate(calc(15% + var(--mouse-x)), calc(-15% + var(--mouse-y))) scale(0.96);
    }
    55% {
        transform: translate(calc(20% + var(--mouse-x)), calc(5% + var(--mouse-y))) scale(1.04);
    }
    75% {
        transform: translate(calc(5% + var(--mouse-x)), calc(10% + var(--mouse-y))) scale(0.98);
    }
    90% {
        transform: translate(calc(-5% + var(--mouse-x)), calc(5% + var(--mouse-y))) scale(1.01);
    }
}

/* Color animation for gradient orbs */
@keyframes orbColor1 {
    0% {
        background: rgba(59, 130, 246, 0.35);
    }
    25% {
        background: rgba(6, 182, 212, 0.4);
    }
    50% {
        background: rgba(30, 64, 175, 0.35);
    }
    75% {
        background: rgba(0, 212, 255, 0.3);
    }
    100% {
        background: rgba(59, 130, 246, 0.35);
    }
}

@keyframes orbColor2 {
    0% {
        background: rgba(6, 182, 212, 0.3);
    }
    25% {
        background: rgba(30, 64, 175, 0.35);
    }
    50% {
        background: rgba(0, 212, 255, 0.3);
    }
    75% {
        background: rgba(59, 130, 246, 0.35);
    }
    100% {
        background: rgba(6, 182, 212, 0.3);
    }
}

@keyframes orbColor3 {
    0% {
        background: rgba(30, 64, 175, 0.4);
    }
    25% {
        background: rgba(0, 212, 255, 0.35);
    }
    50% {
        background: rgba(59, 130, 246, 0.4);
    }
    75% {
        background: rgba(6, 182, 212, 0.35);
    }
    100% {
        background: rgba(30, 64, 175, 0.4);
    }
}


a { 
    text-decoration: none; 
    color: inherit; 
    transition: var(--transition-fast); 
}

ul, ol { 
    list-style: none; 
}

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

/* --- Layout --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 100px 0;
    position: relative;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1.hero-title {
    line-height: 1.02;
    color: var(--text-primary);
}

h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

h2.section-title {
    text-align: center;
    margin-bottom: 60px;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

p.lead {
    font-size: 1.125rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.text-center { text-align: center; }
.text-primary-blue { color: var(--primary-blue); }
.text-muted { color: var(--text-muted); }

/* --- Components: Buttons --- */
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 32px;
    border-radius: 99px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    text-decoration: none;
    gap: 8px;
}

.button.primary {
    background: var(--accent-fill);
    color: white;
    box-shadow: var(--shadow-button);
}

.button.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.button.outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.button.outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: white;
    transform: translateY(-2px);
}

.button.white {
    background: white;
    color: var(--bg-dark);
}

.button.white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

.button.ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 12px 20px;
}

.button.ghost:hover {
    color: white;
}

/* Unified keyboard focus for interactive elements */
a:focus-visible,
.button:focus-visible,
.mobile-menu-toggle:focus-visible,
.feature-tab:focus-visible,
.scroll-top-btn:focus-visible,
.slider-dots button:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 0;
    transition: var(--transition-fast);
}

/* At the top the bar is transparent (just logo + menu). On scroll it detaches
   into a floating rounded plaque: the frosted-glass surface appears on
   .header-content (constrained by .container), leaving side and top gaps
   instead of a full-width bar. */
.header.scrolled {
    padding: 14px 0 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 40px;
    transition: padding var(--transition-fast), background var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.header.scrolled .header-content {
    padding: 8px 12px 8px 24px;
    background: rgba(10, 17, 34, 0.78);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-color: var(--glass-border);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.46);
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 34px;
    width: auto;
    transition: var(--transition-fast);
}

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

/* Main Navigation */
.nav-main {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 10px 14px;
    border-radius: 99px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    white-space: nowrap;
}

@media (min-width: 1100px) {
    .nav-main {
        gap: 8px;
    }
    
    .nav-link {
        padding: 10px 18px;
        font-size: 0.95rem;
    }
}

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

/* Platform pattern: active state = solid blue fill + white text */
.nav-link.active {
    color: white;
    background: var(--accent-fill);
}

.nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-actions .button {
    padding: 12px 24px;
    font-size: 0.9rem;
}

@media (min-width: 1100px) {
    .nav-actions {
        gap: 12px;
    }
    
    .nav-actions .button {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle svg {
    width: 28px;
    height: 28px;
}

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.98);
    backdrop-filter: blur(20px);
    z-index: 99;
    padding: 100px 24px 40px;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu .nav-link {
    font-size: 1.25rem;
    padding: 16px 20px;
    border-radius: 16px;
}

.mobile-menu .nav-actions {
    margin-top: auto;
    flex-direction: column;
    width: 100%;
}

.mobile-menu .nav-actions .button {
    width: 100%;
}

/* --- Hero Section --- */
.section-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(24, 76, 208, 0.18);
    border: 1px solid rgba(125, 155, 255, 0.3);
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: normal;
}

.hero-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    box-shadow: 0 0 10px var(--primary-blue);
}

.hero-desc {
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.4;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Hero Visual (device mockups) --- */
.hero-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    width: 100%;
}

/* Full width when stacked, so the flex item can't shrink-to-fit and overflow */
.hero-layout .hero-content {
    width: 100%;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    z-index: 2;
}

/* Soft glow that lifts the devices off the dark background */
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 8% 4% 4%;
    background: radial-gradient(circle at 62% 42%, rgba(24, 76, 208, 0.35), transparent 68%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

.hero-mockup {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Пока картинка не догрузилась целиком, держим её скрытой, чтобы на медленном
   интернете не мелькала «обрезанная» построчная подгрузка PNG. JS повесит
   .is-loaded по событию load — и картинка вылетит уже полностью готовой. */
.js .hero-mockup {
    opacity: 0;
}

/* Каждая картинка появляется снизу вверх — только когда полностью догрузилась.
   Сначала ноутбук, затем телефон с небольшой задержкой. После въезда включается
   бесконечное «парение» (float стартует ровно к концу вылета). */
.js .hero-mockup-laptop.is-loaded {
    animation: heroRiseIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
               heroFloat 7s ease-in-out 0.9s infinite;
}

.js .hero-mockup-phone.is-loaded {
    animation: heroRisePhoneIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both,
               heroFloatPhone 6s ease-in-out 1.25s infinite;
}

.hero-mockup-laptop {
    width: 100%;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

.hero-mockup-phone {
    position: absolute;
    bottom: -7%;
    left: 1%;
    width: 27%;
    z-index: 3;
    filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0.5));
}

@keyframes heroRiseIn {
    from { opacity: 0; transform: translateY(56px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroRisePhoneIn {
    from { opacity: 0; transform: translateY(56px) rotate(-3deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-3deg); }
}

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

@keyframes heroFloatPhone {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-24px) rotate(-3deg); }
}

/* Desktop: text left, mockups right */
@media (min-width: 1024px) {
    .hero-layout {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .hero-layout .hero-content {
        width: auto;
        flex: 1 1 52%;
        max-width: 680px;
        margin: 0;
        text-align: left;
    }

    .hero-layout .hero-desc {
        margin-left: 0;
        margin-right: 0;
        max-width: 560px;
    }

    .hero-layout .hero-buttons {
        justify-content: flex-start;
    }

    .hero-visual {
        flex: 1 1 48%;
        max-width: 620px;
        left: 48px;
    }
}

/* Mobile & narrow: swap so mockups sit above the buttons */
@media (max-width: 1023px) {
    .hero-layout {
        gap: 0;
    }

    /* Let hero-content children join the hero-layout flex so we can reorder them */
    .hero-layout .hero-content {
        display: contents;
    }

    .hero-visual {
        order: 1;
        margin-top: 8px;
    }

    .hero-buttons {
        order: 2;
        margin-top: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Static background: freeze the orbs fully visible (their entrance
       animation would otherwise leave them at opacity 0) */
    .gradient-orb {
        animation: none;
        opacity: 1;
    }

    .hero-visual {
        animation: none;
        opacity: 1;
    }

    /* Без анимаций: не вылетаем и не парим — просто показываем картинку,
       как только она догрузилась (то же .is-loaded от JS). */
    .js .hero-mockup.is-loaded {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Neutralize scroll/hover reveals: show final state instantly, no motion */
    .fade-in-up,
    .stagger-children > *,
    .reveal-title {
        opacity: 1;
        transform: none;
        transition: none;
    }

    h2.section-title::after {
        transition: none;
        width: 64px;
    }

    /* Метро остаётся информативным (видно, где ты на маршруте), но станция
       не «дышит» масштабом и не переливается на каждый тик скролла */
    .metro-stop::before {
        transition: none;
    }

    .metro-stop.is-active::before {
        transform: none;
    }

    .card:hover .card-icon {
        transform: none;
    }
}

/* --- Cards & Grid --- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

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

/* Pagination dots for .feature-slider (styled in the slider block at EOF). */
.slider-dots {
    display: none;
}

/* The Ring Rule (platform DNA): contours are inset box-shadow rings, not
   borders — geometry never shifts when a contour appears or changes color */
.card {
    background: var(--glass-bg);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    border-radius: var(--card-radius);
    padding: 40px;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    background: var(--glass-bg-hover);
    box-shadow: inset 0 0 0 1px var(--glass-highlight), var(--shadow-glow);
}

.card-icon {
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.card:hover .card-icon {
    transform: translateY(-2px) scale(1.06);
    background: rgba(24, 76, 208, 0.35);
}

.card.highlight {
    background: linear-gradient(145deg, rgba(24, 76, 208, 0.16), rgba(5, 10, 20, 0.4));
    box-shadow: inset 0 0 0 1px rgba(125, 155, 255, 0.25);
}

.card.highlight:hover {
    box-shadow: inset 0 0 0 1px rgba(125, 155, 255, 0.4), var(--shadow-glow);
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(24, 76, 208, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    color: var(--primary-blue);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.card p {
    font-size: 0.9375rem;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Feature Cards */
.feature-card {
    text-align: center;
    padding: 32px;
}

.feature-card .card-icon {
    margin: 0 auto 24px;
}

/* --- Steps/Process --- */
.steps-list {
    counter-reset: step-counter;
}

.step-item {
    position: relative;
    padding-left: 70px;
    margin-bottom: 40px;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-item::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background: rgba(24, 76, 208, 0.22);
    border: 1px solid rgba(125, 155, 255, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 18px;
}

.step-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

.step-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Horizontal Steps */
.steps-horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: step-counter;
}

/* Plain step "points" — no card background, so the row reads lighter and
   packs more compactly (especially stacked on mobile). */
.step-h-item {
    text-align: center;
    padding: 0 12px;
    position: relative;
}

.step-h-number {
    counter-increment: step-counter;
    width: 40px;
    height: 40px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 16px;
    margin: 0 auto 20px;
}

.step-h-number::after {
    content: counter(step-counter);
}

/* Mobile: lay each step out as a compact row — number on the left,
   title + text on the right — instead of a tall centered block. */
@media (max-width: 768px) {
    .steps-horizontal {
        gap: 22px;
    }

    .step-h-item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        row-gap: 2px;
        align-items: start;
        text-align: left;
        padding: 0;
    }

    .step-h-number {
        grid-row: 1 / span 2;
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin: 0;
    }

    .step-h-item h4 {
        grid-column: 2;
        margin-bottom: 2px !important;
    }

    .step-h-item p {
        grid-column: 2;
    }
}

/* --- Vertical "metro" timeline ---
   Станции на одной ветке: номер сидит на линии, текст справа. В отличие от
   .steps-horizontal тянет длинный пошаговый сценарий, не сжимая описания.

   Геометрия ветки вынесена в переменные: те же значения читает JS
   (initMetroProgress), чтобы считать позиции станций без магических чисел. */
.timeline-metro {
    --metro-dot: 44px;
    --metro-dot-top: -2px;
    --metro-line-w: 4px;
    --metro-line-x: 20px;   /* центр кружка (22px) минус половина ветки */
    --metro-seg-top: 50px;  /* сегмент стартует под кружком */
    --metro-seg-bottom: 6px;
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    counter-reset: metro-counter;
}

.metro-stop {
    position: relative;
    padding: 0 0 32px 68px;
}

.metro-stop:last-child {
    padding-bottom: 0;
}

/* Станция: номерной кружок, отцентрованный по ветке */
.metro-stop::before {
    counter-increment: metro-counter;
    content: counter(metro-counter);
    position: absolute;
    left: 0;
    top: var(--metro-dot-top);
    width: var(--metro-dot);
    height: var(--metro-dot);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 20, 40, 0.9);
    border: 2px solid rgba(125, 155, 255, 0.35);
    box-shadow: 0 0 0 6px rgba(5, 10, 20, 0.55);
    color: var(--accent-text);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    z-index: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                box-shadow var(--transition-fast), color var(--transition-fast),
                transform var(--transition-fast);
}

/* Ветка: посегментно от станции к станции. Два слоя фона — пройденный
   участок (акцент) поверх непройденного; высоту первого гонит JS через
   --metro-seg-fill, поэтому без JS сегмент просто остаётся приглушённым. */
.metro-stop::after {
    content: '';
    position: absolute;
    left: var(--metro-line-x);
    top: var(--metro-seg-top);
    bottom: var(--metro-seg-bottom);
    width: var(--metro-line-w);
    border-radius: var(--metro-line-w);
    background-image:
        linear-gradient(180deg, var(--accent-text), var(--accent-text)),
        linear-gradient(180deg, rgba(125, 155, 255, 0.22), rgba(125, 155, 255, 0.12));
    background-size: 100% var(--metro-seg-fill, 0%), 100% 100%;
    background-repeat: no-repeat;
    background-position: top left, top left;
}

.metro-stop:last-child::after {
    display: none;
}

/* Пройденные станции: маршрут «залит» акцентом до текущей точки */
.metro-stop.is-passed::before {
    background: var(--accent-fill);
    border-color: rgba(125, 155, 255, 0.55);
    color: #ffffff;
}

/* Текущая станция — та, что стоит у центра экрана: ореол вместо простой заливки */
.metro-stop.is-active::before {
    box-shadow: 0 0 0 6px rgba(24, 76, 208, 0.22), var(--shadow-glow-strong);
    transform: scale(1.08);
}

/* Финальная станция — сделка: залита всегда, чтобы конец маршрута читался
   и до того, как до него доскроллили */
.metro-stop.is-final::before {
    background: var(--accent-fill);
    border-color: transparent;
    color: #ffffff;
}

.metro-stop:hover::before {
    border-color: rgba(125, 155, 255, 0.7);
}

.metro-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    padding-top: 10px;
}

.metro-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .timeline-metro {
        --metro-dot: 36px;
        --metro-dot-top: 0px;
        --metro-line-x: 16px;
        --metro-seg-top: 44px;
        --metro-seg-bottom: 4px;
    }

    .metro-stop {
        padding: 0 0 26px 54px;
    }

    .metro-stop::before {
        font-size: 15px;
        box-shadow: 0 0 0 4px rgba(5, 10, 20, 0.55);
    }

    .metro-stop.is-active::before {
        box-shadow: 0 0 0 4px rgba(24, 76, 208, 0.22), var(--shadow-glow);
    }

    .metro-title {
        font-size: 1.0625rem;
        padding-top: 5px;
        margin-bottom: 6px;
    }

    .metro-desc {
        font-size: 0.95rem;
    }
}

/* --- Audience Section --- */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 48px;
}

/* Mobile & narrow devices: darker canvas and dimmer orbs keep AA contrast
   for the base text tokens without overriding them */
@media (max-width: 768px) {
    body::before {
        background: #070d18;
    }

    .gradient-orb {
        filter: blur(80px) brightness(0.7);
    }
}

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

.audience-item {
    padding: 8px 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.05rem;
}

.audience-dot {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    box-shadow: 0 0 12px var(--primary-blue);
    flex-shrink: 0;
}

/* --- Two Column Layout --- */
.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.col-card {
    background: var(--glass-bg);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    border-radius: var(--card-radius);
    padding: 48px;
    display: flex;
    flex-direction: column;
}

/* Pin the card's CTA to the bottom so both buttons line up */
.col-card .button {
    margin-top: auto;
    align-self: flex-start;
}

.col-card h3 {
    margin-bottom: 24px;
    font-size: 1.5rem;
}

.col-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

/* Platform-style round list markers instead of side-stripe borders */
.col-list-item {
    position: relative;
    padding-left: 22px;
}

.col-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-text);
}

.col-list-item strong {
    color: white;
    display: block;
    margin-bottom: 4px;
}

.col-list-item p {
    margin-bottom: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* --- Split-narrative section --- */
/* Asymmetric section layout echoing the platform's sticky-sidebar scheme:
   narrative column pinned left, content rows on the right. The sticky offset
   assumes the fixed header (~80px) plus breathing room — revisit if the
   header height changes. */
.section-split {
    padding: 84px 0 110px;
}

.split-section {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px 72px;
    align-items: start;
}

.split-narrative {
    position: sticky;
    top: 140px;
}

.split-narrative h2 {
    text-align: left;
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 20px;
}

.split-narrative h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent-text);
}

.split-lede {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.5;
    max-width: 44ch;
    margin-bottom: 0;
}

.split-rows {
    display: flex;
    flex-direction: column;
}

.split-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    padding: 26px 0;
}

.split-row:first-child {
    padding-top: 6px;
}

/* Hairline divider between rows, drawn as a ring-style inset shadow */
.split-row + .split-row {
    box-shadow: inset 0 1px 0 var(--glass-border);
}

.split-row .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 0;
}

.split-row-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.split-row p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .split-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .split-narrative {
        position: static;
    }
}

@media (max-width: 768px) {
    .section-split {
        padding: 56px 0 64px;
    }
}

/* --- Feature Tabs (vertical) --- */
.feature-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px 48px;
    align-items: start;
}

.feature-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-tab {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 2px solid var(--glass-border);
    padding: 16px 20px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 0 var(--card-radius-sm) var(--card-radius-sm) 0;
    transition: var(--transition-fast);
}

.feature-tab:hover {
    background: var(--glass-bg);
    color: var(--text-primary);
}

.feature-tab.is-active {
    background: var(--glass-bg);
    border-left-color: var(--primary-blue);
    color: white;
}

.feature-tab-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 0.02em;
    padding-top: 2px;
    flex-shrink: 0;
}

.feature-tab-title {
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.3;
}

.feature-tabs-panels {
    position: relative;
    align-self: stretch;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    padding: 32px 36px;
    min-height: 100%;
    display: flex;
    align-items: center;
}

.feature-tab-panel {
    display: none;
    animation: fadeTabIn 0.4s ease;
}

.feature-tab-panel.is-active {
    display: block;
}

.feature-tab-panel p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

@keyframes fadeTabIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .feature-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* Panels are moved under their own title by JS, so the shared stage is empty. */
    .feature-tabs-panels {
        display: none;
    }
    .feature-tabs-nav .feature-tab-panel {
        border-left: 2px solid var(--primary-blue);
        border-radius: 0 0 var(--card-radius-sm) var(--card-radius-sm);
        margin: -4px 0 8px;
        padding: 4px 20px 18px 36px;
        background: var(--glass-bg);
    }
    .feature-tabs-nav .feature-tab.is-active {
        border-radius: 0 var(--card-radius-sm) 0 0;
    }
}

/* --- FAQ Section --- */
.faq-controls {
    max-width: 800px;
    margin: 0 auto 10px;
    display: flex;
    justify-content: flex-end;
}

.faq-expand-all {
    background: none;
    border: none;
    color: var(--accent-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--transition-fast);
}

.faq-expand-all:hover {
    color: white;
    background: var(--glass-bg-hover);
}

.faq-group {
    max-width: 800px;
    margin: 0 auto 36px;
}

.faq-group:last-child {
    margin-bottom: 0;
}

.faq-group-title {
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

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

.faq-item {
    background: var(--glass-bg);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    border-radius: var(--card-radius-sm);
    padding: 0;
    overflow: hidden;
    transition: var(--transition-fast);
}

.faq-item:hover,
.faq-item.open {
    box-shadow: inset 0 0 0 1px var(--glass-highlight);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: white;
    font-family: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.faq-question::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    transition: var(--transition-fast);
}

.faq-question[aria-expanded="true"]::after {
    content: "-";
    background: rgba(24, 76, 208, 0.3);
    border-color: var(--glass-highlight);
}

.faq-question:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: -4px;
}

.faq-answer {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0;
    padding: 0 32px 28px;
    line-height: 1.5;
}

.faq-answer[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .faq-question {
        gap: 16px;
        padding: 24px;
    }

    .faq-answer {
        padding: 0 24px 24px;
    }
}

/* --- CTA Section --- */
.section-cta {
    text-align: center;
    background: linear-gradient(180deg, rgba(19, 25, 143, 0.28) 0%, rgba(24, 76, 208, 0.18) 50%, rgba(24, 76, 208, 0.06) 100%);
    border-top: 1px solid rgba(125, 155, 255, 0.2);
    position: relative;
}

.section-cta h2 {
    margin-bottom: 20px;
}

.section-cta p {
    max-width: 600px;
    margin: 0 auto 32px;
}

.section-cta .hero-buttons {
    justify-content: center;
}

/* --- Error Page (404) --- */
.section-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 0 120px;
    text-align: center;
}

.error-content {
    max-width: 620px;
    margin: 0 auto;
}

/* Oversized numeral is decoration, not a heading: the accessible title is
   .error-title, so the code itself stays out of the heading order */
.error-code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--accent-text);
    margin-bottom: 16px;
}

.error-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 16px;
}

.error-desc {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-bottom: 40px;
}

/* --- Footer --- */
footer {
    padding: 60px 0 40px;
    border-top: 1px solid var(--glass-border);
}

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

.footer-logo {
    display: inline-block;
}

.footer-logo .logo-img {
    height: 26px;
    width: auto;
    opacity: 0.7;
    transition: var(--transition-fast);
}

.footer-logo:hover .logo-img {
    opacity: 1;
}

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

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: white;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contacts a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.footer-contacts a:hover {
    color: white;
}

@media (max-width: 768px) {
    .footer-contacts {
        align-items: center;
    }
}

.footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Animations --- */
/* Refined easing: slight overshoot for a polished, "settling" reveal */
:root {
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveals are a light opacity+rise accent only: no blur, short durations,
   so content never greets a fast scroller with an empty section */
.fade-in-up {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s var(--ease-reveal), transform 0.45s var(--ease-reveal);
    will-change: opacity, transform;
}

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

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }

/* Stagger animations for children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-reveal), transform 0.4s var(--ease-reveal);
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.03s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.06s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.09s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.18s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.21s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(9) { transition-delay: 0.27s; }
.stagger-children.visible > *:nth-child(10) { transition-delay: 0.30s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- Heading reveal (auto-applied to section headings via JS) --- */
.reveal-title {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease-reveal), transform 0.5s var(--ease-reveal);
}

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

/* Animated gradient underline that "draws in" under centered section titles.
   Works whether the title reveals via .fade-in-up (hand-marked) or .reveal-title (auto). */
h2.section-title {
    position: relative;
    padding-bottom: 18px;
}

h2.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: var(--accent-text);
    transition: width 0.9s var(--ease-reveal) 0.25s;
}

h2.section-title.visible::after,
h2.section-title:not(.fade-in-up):not(.reveal-title)::after {
    width: 64px;
}

/* --- Problem/Solution Blocks --- */
.problem-block {
    background: linear-gradient(135deg, rgba(24, 76, 208, 0.1), rgba(5, 10, 20, 0.3));
    border: 1px solid rgba(125, 155, 255, 0.2);
    border-radius: var(--card-radius);
    padding: 48px;
    margin-bottom: 40px;
}

.problem-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
    padding-left: 24px;
}

.problem-list li {
    padding-left: 28px;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.problem-list li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.25rem;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .steps-horizontal {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* Collapse to burger only on phones; tablets keep the full menu.
   Matches the floating "go to platform" button breakpoint (768px). */
@media (max-width: 768px) {
    .nav-main,
    .header .nav-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: flex;
    }
}

@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    /* Hero: keep the full-screen height so the next block stays below the
       fold, and center the content vertically. Extra top padding offsets the
       fixed header so the optical center sits in the middle of the screen. */
    .section-hero {
        min-height: 100vh;
        min-height: 100svh;
        align-items: center;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .section-hero-lower {
        padding-top: 100px;
    }

    .hero-badge {
        margin-bottom: 20px;
    }

    .hero-desc {
        margin-bottom: 32px;
    }

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

    .steps-horizontal {
        grid-template-columns: 1fr;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .button {
        width: 100%;
    }
    
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .card {
        padding: 28px;
    }
    
    .col-card {
        padding: 32px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    h1 {
        font-size: 1.875rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 8px 14px;
    }
    
    .hero-desc {
        font-size: 1.05rem;
    }
}

/* --- Utility Classes --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.w-100 { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Floating actions (narrow/mobile only) --- */
.floating-actions {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
}

/* The "go to platform" button is a mobile-only convenience; on desktop
   keep just the scroll-to-top arrow */
@media (min-width: 769px) {
    .floating-actions .floating-platform {
        display: none;
    }
}

/* On mobile the floating pill and the in-card CTA are both blue and visually
   merge while scrolling. Sit the floating buttons on a dark glass panel so the
   pill is always clearly detached from the content behind it. */
@media (max-width: 768px) {
    .floating-actions {
        padding: 7px;
        border-radius: 999px;
        background: rgba(9, 13, 30, 0.72);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
}

.floating-actions.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hide floating buttons while the mobile menu is open (menu has its own CTAs) */
.mobile-menu.open ~ .floating-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.floating-actions .floating-platform {
    padding: 12px 20px;
    font-size: 0.9375rem;
    white-space: nowrap;
    box-shadow: var(--shadow-button);
}

.scroll-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    border: none;
    background: var(--bg-dark-secondary);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: var(--transition-fast);
}

.scroll-top-btn:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
}

.scroll-top-btn svg {
    width: 22px;
    height: 22px;
}

/* ============================================
   Horizontal auto-scroll slider
   Placed at EOF so it overrides base grid layouts
   (.grid-3 / .two-col) regardless of source order.
   ============================================ */

/* Pagination dot styling (container visibility is toggled per breakpoint). */
.slider-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: var(--glass-highlight);
    cursor: pointer;
    transition: width var(--transition-fast), background var(--transition-fast);
}

/* Invisible hit area: the dot stays 8px visually, the touch target grows to
   24x44px. Horizontal inset must not exceed half the dot pitch (24px with the
   16px gap below), otherwise adjacent hit boxes overlap and clicks misdirect
   to the neighboring dot. */
.slider-dots button::after {
    content: "";
    position: absolute;
    inset: -18px -8px;
}

.slider-dots button.is-active {
    width: 22px;
    background: var(--primary-gradient);
}

/* Tablets (769–1024px): 3-card rows and 2-col rows become sliders so their
   plates stop being squeezed into 3 narrow columns (grid-3) or stretched
   full-width (two-col). Other rows keep their normal tablet layout. */
@media (min-width: 769px) and (max-width: 1024px) {
    .feature-slider.grid-3,
    .feature-slider.two-col {
        display: flex;
        position: relative;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: 0 20px;
        padding: 4px 4px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feature-slider.grid-3::-webkit-scrollbar,
    .feature-slider.two-col::-webkit-scrollbar {
        display: none;
    }

    .feature-slider.grid-3 > *,
    .feature-slider.two-col > * {
        scroll-snap-align: center;
    }

    /* 3-card rows: ~2 cards in view; 2-col rows: ~1.4 wide cards in view. */
    .feature-slider.grid-3 > * {
        flex: 0 0 46%;
    }

    .feature-slider.two-col > * {
        flex: 0 0 68%;
    }

    .feature-slider.grid-3 + .slider-dots,
    .feature-slider.two-col + .slider-dots {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
    }
}

/* Phones / narrow (≤768px): every tagged row is a full slider, ~1 card wide. */
@media (max-width: 768px) {
    .feature-slider {
        display: flex;
        position: relative;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: 0 20px;
        padding: 4px 4px 12px;
        margin-inline: -4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feature-slider::-webkit-scrollbar {
        display: none;
    }

    .feature-slider > * {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }

    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
    }
}