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

/* ============================================================
   MONSTR LABS — REDESIGN v2 "LIGHT CHAIN"
   Светлая футуристичная тема: glass + gradient borders + mesh
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root {
    /* фон и поверхности */
    --bg: #F4F7FD;
    --bg-soft: #EDF2FB;
    --surface: rgba(255, 255, 255, 0.66);
    --surface-solid: #FFFFFF;
    --ink: #0A0F1E;
    --ink-soft: #1C2437;
    --muted: #55607A;

    /* бренд */
    --orange: #FF7A1C;
    --orange-hot: #FF5E3A;
    --electric: #4C6FFF;
    --cyan: #2BD9FE;
    --violet: #8B5CF6;

    /* градиенты */
    --grad-brand: linear-gradient(120deg, #FF9E45 0%, #FF7A1C 45%, #FF5E3A 100%);
    --grad-tech: linear-gradient(120deg, #4C6FFF 0%, #2BD9FE 100%);
    --grad-border: linear-gradient(135deg, rgba(76,111,255,.55), rgba(43,217,254,.35) 40%, rgba(255,122,28,.55));
    --grad-text: linear-gradient(100deg, #0A0F1E 20%, #4C6FFF 55%, #FF7A1C 90%);

    /* тени / свечения */
    --shadow-card: 0 10px 30px -12px rgba(10, 15, 30, 0.12);
    --shadow-card-hover: 0 28px 60px -18px rgba(76, 111, 255, 0.25), 0 12px 30px -14px rgba(255, 122, 28, 0.18);
    --glow-orange: 0 0 44px rgba(255, 122, 28, 0.35);

    /* геометрия */
    --container-width: 1280px;
    --container-padding: 60px;
    --section-spacing: 110px;
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;

    /* шрифты */
    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* глобальная блюпринт-сетка на фоне */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(76, 111, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 111, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }
a, button { font-family: var(--font-body); }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 1;
}

::selection { background: rgba(255, 122, 28, .3); }

/* ---------- SCROLL REVEAL ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- 2. ШАПКА ---------- */
.header-nav {
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    z-index: 1000;
    padding: 14px 0;
    background: rgba(244, 247, 253, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(76, 111, 255, 0.12);
    transition: box-shadow .3s ease, background .3s ease;
}
.header-nav.scrolled {
    background: rgba(244, 247, 253, 0.88);
    box-shadow: 0 8px 32px -12px rgba(10, 15, 30, 0.14);
}
/* градиентный волосок снизу шапки */
.header-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(76,111,255,.5), rgba(255,122,28,.5), transparent);
    opacity: .7;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}
.logo-icon {
    width: 42px; height: 42px;
    filter: drop-shadow(0 4px 10px rgba(255,122,28,.35));
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.logo-block:hover .logo-icon { transform: rotate(-8deg) scale(1.08); }
.logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}
.nav-links li { list-style: none; }
.nav-links a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: color .25s ease, background .25s ease;
}
.nav-links a:hover {
    color: var(--ink);
    background: rgba(76, 111, 255, 0.08);
}
.nav-links a.active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(76,111,255,.25), 0 4px 14px -6px rgba(76,111,255,.35);
}

/* dropdown */
.dropdown { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: 4px; }
.dropdown-toggle::after {
    content: "▾";
    margin-left: 4px;
    font-size: 0.65em;
    transition: transform .3s ease;
}
.dropdown:hover .dropdown-toggle::after { transform: rotate(180deg); }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    padding: 10px;
    list-style: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r-md);
    border: 1px solid rgba(76, 111, 255, 0.15);
    box-shadow: 0 24px 50px -16px rgba(10, 15, 30, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: .3s cubic-bezier(.2,.65,.3,1);
    z-index: 1001;
}
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* мостик, чтобы меню не пропадало между ховером */
.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.dropdown-menu li a {
    height: auto;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
}
.dropdown-menu li a:hover {
    background: linear-gradient(120deg, rgba(76,111,255,.1), rgba(255,122,28,.1));
    color: var(--ink);
}

.nav-contact-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}
.nav-contact-wrapper > a > img {
    display: block;
    opacity: .55;
    transition: opacity .25s ease, transform .25s ease;
}
.nav-contact-wrapper > a:hover > img {
    opacity: 1;
    transform: translateY(-2px);
}
.nav-contact {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.nav-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity .3s ease;
}
.nav-contact:hover { transform: translateY(-2px); box-shadow: var(--glow-orange); }
.nav-contact:hover::after { opacity: 1; }
.nav-contact { z-index: 0; }
.nav-contact::after { z-index: -1; }

/* бургер */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px; height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
}
.menu-toggle span {
    display: block;
    width: 100%; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all .3s ease-in-out;
}
.menu-toggle.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- 3. HERO ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 90px;
}

/* нодовая сеть (canvas, рисуется в effects.js) */
#mesh-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* мягкие цветные ауры */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    animation: auraDrift 16s ease-in-out infinite alternate;
}
.hero::before {
    width: 560px; height: 560px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(76,111,255,.22), transparent 65%);
}
.hero::after {
    width: 640px; height: 640px;
    bottom: -220px; right: -160px;
    background: radial-gradient(circle, rgba(255,122,28,.20), transparent 65%);
    animation-delay: -8s;
}
@keyframes auraDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, 36px) scale(1.12); }
}

.hero-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero-content {
    text-align: center;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 60px;
}

/* логотип в "орбите" */
.hero-logo-circle {
    width: clamp(120px, 11vw, 170px);
    height: clamp(120px, 11vw, 170px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow:
        0 24px 60px -18px rgba(76, 111, 255, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    margin-bottom: 34px;
    animation: logoLevitate 6s ease-in-out infinite;
}
/* вращающееся градиентное кольцо */
.hero-logo-circle::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--electric), var(--cyan), var(--orange), var(--orange-hot), var(--electric));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: ringSpin 8s linear infinite;
}
/* орбитальная точка */
.hero-logo-circle::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle 5px at 50% 0%, var(--orange) 98%, transparent);
    filter: drop-shadow(0 0 8px var(--orange));
    animation: ringSpin 8s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes logoLevitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.hero-logo-img { width: 100%; height: 100%; object-fit: contain; }

.hero-title {
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 26px;
    background: var(--grad-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: titleShift 7s ease-in-out infinite alternate;
}
@keyframes titleShift {
    from { background-position: 0% center; }
    to   { background-position: 100% center; }
}

.hero-subtitle {
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    color: var(--muted);
    max-width: 620px;
    margin-bottom: 42px;
}
.hero-subtitle strong {
    color: var(--ink);
    font-weight: 700;
}

.hero-buttons {
    display: flex;
    gap: 18px;
    margin-bottom: 34px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- КНОПКИ ---------- */
.btn-black {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    background: var(--grad-brand);
    background-size: 160% auto;
    box-shadow: 0 14px 34px -12px rgba(255, 94, 58, 0.55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-position .4s ease;
    overflow: hidden;
    white-space: nowrap;
}
.btn-black::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.btn-black:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -12px rgba(255, 94, 58, 0.65);
    background-position: right center;
    color: #fff;
}
.btn-black:hover::before { left: 130%; }

/* вторая кнопка в паре — "стеклянная" */
.hero-buttons .btn-black:nth-child(2),
.call-buttons .btn-call:nth-child(2) {
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px rgba(76, 111, 255, 0.4), 0 10px 26px -14px rgba(10,15,30,.2);
    backdrop-filter: blur(8px);
}
.hero-buttons .btn-black:nth-child(2):hover,
.call-buttons .btn-call:nth-child(2):hover {
    box-shadow: inset 0 0 0 1.5px var(--electric), 0 18px 40px -14px rgba(76, 111, 255, 0.45);
    color: var(--ink);
}

.hero-timer {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    max-width: 560px;
    line-height: 1.65;
    padding: 14px 22px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(76, 111, 255, 0.35);
}

/* ---------- ЗАГОЛОВКИ СЕКЦИЙ ---------- */
.diff-main-title,
.solutions-main-title,
.levelup-title,
.call-title,
.how-title {
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.08;
}
.diff-main-title,
.solutions-main-title {
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    text-align: center;
    margin-bottom: 64px;
    position: relative;
}
/* градиентное подчёркивание-нода */
.diff-main-title::after,
.solutions-main-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 4px;
    background: var(--grad-tech);
    box-shadow: 0 0 18px rgba(43, 217, 254, .6);
}

/* ---------- 4. WHAT WE SOLVE ---------- */
.section-who {
    padding: var(--section-spacing) 0;
    position: relative;
}
.who-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1060px;
    margin: 0 auto;
}

/* карточка с градиентным бордером */
.who-item {
    position: relative;
    padding: 42px 40px;
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
    overflow: hidden;
}
.who-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/* угловое свечение при ховере */
.who-item::after {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,28,.22), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.who-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}
.who-item:hover::after { opacity: 1; }

.who-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: .1em;
    padding: 7px 20px;
    border-radius: 999px;
    color: var(--electric);
    background: rgba(76, 111, 255, 0.09);
    border: 1px solid rgba(76, 111, 255, 0.3);
    margin-bottom: 24px;
}
.who-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.who-item p {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}
.who-item ul { list-style: none; }
.who-item li {
    font-size: 0.98rem;
    color: var(--ink-soft);
    margin-bottom: 9px;
    line-height: 1.5;
}

/* ---------- РАЗДЕЛИТЕЛЬ ---------- */
.section-divider-container { position: relative; z-index: 1; }
.section-divider {
    width: 100%;
    height: 1px;
    margin: 30px 0;
    position: relative;
    background: linear-gradient(90deg, transparent, rgba(76,111,255,.4) 20%, rgba(255,122,28,.4) 80%, transparent);
}
.section-divider::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 5px rgba(255,122,28,.15), 0 0 16px rgba(255,122,28,.7);
}

/* ---------- 5. THE MONSTER DIFFERENCE ---------- */
.section-difference {
    padding: var(--section-spacing) 0;
    text-align: center;
    position: relative;
}
.diff-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: center;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}
.diff-col { display: flex; flex-direction: column; gap: 110px; }
.col-left { text-align: right; }
.col-right { text-align: left; }

.diff-text-item {
    position: relative;
    padding: 26px 28px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(76, 111, 255, 0.14);
    box-shadow: var(--shadow-card);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.diff-text-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 122, 28, 0.45);
    box-shadow: var(--shadow-card-hover);
}
/* коннектор-линия к центру */
.col-left .diff-text-item::after,
.col-right .diff-text-item::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--electric), transparent);
}
.col-left .diff-text-item::after { right: -26px; transform: scaleX(-1); }
.col-right .diff-text-item::after { left: -26px; }

.diff-text-item p {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.35;
}
.diff-text-item small {
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: none;
    color: var(--muted);
    line-height: 1.55;
}

.diff-center { position: relative; }
/* светящийся подиум под монстром */
.diff-center::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,28,.28), rgba(76,111,255,.14) 55%, transparent 75%);
    filter: blur(30px);
    z-index: 0;
    animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}
.diff-center img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 30px 50px rgba(10, 15, 30, 0.25));
}

.hero-avatar, .GMhero-avatar {
    animation: floatAvatar 6s ease-in-out infinite;
    will-change: transform;
}
@keyframes floatAvatar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.diff-footer-note {
    margin-top: 64px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(76, 111, 255, 0.2);
}

/* ---------- 6. WORKFLOW ---------- */
.section-how { padding: var(--section-spacing) 0; }
.how-wrapper {
    display: flex;
    align-items: center;
    gap: 90px;
}
.how-image-box {
    flex: 1.1;
    position: relative;
    border-radius: var(--r-lg);
    padding: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(76,111,255,.1), transparent 60%),
        radial-gradient(circle at 75% 85%, rgba(255,122,28,.12), transparent 60%),
        rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
.how-image-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/* сетка внутри панели */
.how-image-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(76,111,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76,111,255,.06) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.how-image-box img {
    width: 100%;
    max-width: 460px;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 24px 40px rgba(10, 15, 30, 0.22));
}

.how-content { flex: 1; }
.how-title {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    margin-bottom: 38px;
}
.how-list {
    list-style: none;
    margin-bottom: 44px;
    position: relative;
}
/* вертикальная соединительная линия — как цепочка блоков */
.how-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg, var(--electric), var(--cyan), var(--orange));
    opacity: .4;
}
.how-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    position: relative;
}
.how-icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--electric);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(76, 111, 255, 0.28);
    box-shadow: 0 8px 20px -8px rgba(76, 111, 255, 0.35);
    position: relative;
    z-index: 1;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.how-list li:hover .how-icon {
    transform: scale(1.12) rotate(-5deg);
    color: var(--orange);
    border-color: rgba(255, 122, 28, 0.5);
    box-shadow: 0 10px 24px -8px rgba(255, 122, 28, 0.5);
}
.how-text {
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink-soft);
}
.how-text strong { color: var(--ink); font-weight: 700; }

.btn-process {
    display: inline-flex;
    align-items: center;
    padding: 18px 36px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}
.btn-process::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-tech);
    opacity: 0;
    z-index: -1;
    transition: opacity .35s ease;
}
.btn-process:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -14px rgba(76, 111, 255, 0.6);
    color: #fff;
}
.btn-process:hover::after { opacity: 1; }

/* ---------- 7. SOLUTIONS ---------- */
.section-solutions { padding: var(--section-spacing) 0; }
.solutions-wrapper {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.solutions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    flex: 2;
}

.sol-card {
    position: relative;
    padding: 40px 38px;
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
    cursor: pointer;
}
.sol-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}

.sol-card--light {
    background: var(--surface);
    backdrop-filter: blur(12px);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
.sol-card--light::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.sol-card--dark {
    background:
        radial-gradient(circle at 85% 10%, rgba(76,111,255,.28), transparent 55%),
        radial-gradient(circle at 10% 95%, rgba(255,122,28,.2), transparent 50%),
        #0C1222;
    color: #EAF0FF;
    box-shadow: 0 18px 44px -16px rgba(10, 15, 30, 0.5);
}
/* сетка на тёмных карточках */
.sol-card--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(122,150,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,150,255,.08) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}
.sol-card--dark p { color: rgba(234, 240, 255, 0.78); }

.sol-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.sol-card p {
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 450;
    color: var(--muted);
    position: relative;
    z-index: 1;
}
.sol-link {
    margin-top: 28px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: block;
    position: relative;
    z-index: 1;
    color: var(--orange);
    transition: letter-spacing .3s ease;
}
.sol-card:hover .sol-link { letter-spacing: .12em; }
.sol-card--dark .sol-link { color: var(--cyan); }

.solutions-art {
    flex: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 50% 20%, rgba(76,111,255,.25), transparent 60%),
        #0C1222;
    box-shadow: 0 18px 44px -16px rgba(10, 15, 30, 0.5);
}
.solutions-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(122,150,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,150,255,.07) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}
.solutions-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: luminosity;
    opacity: .95;
    transition: mix-blend-mode .3s ease, transform .6s ease;
}
.solutions-art:hover img {
    mix-blend-mode: normal;
    transform: scale(1.04);
}

/* ---------- 8. LEVEL UP ---------- */
.section-levelup { padding: var(--section-spacing) 0 80px; }
.levelup-header { max-width: 880px; margin-bottom: 56px; }
.levelup-title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin-bottom: 32px;
    background: var(--grad-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.levelup-desc p {
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.levelup-highlight {
    font-weight: 800 !important;
    margin-top: 20px;
    color: var(--ink) !important;
}

.levelup-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}
.step-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 44px 46px;
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
}
.step-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--shadow-card-hover);
}
.step-card--light {
    background: var(--surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
}
.step-card--light::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.step-card--dark {
    background:
        radial-gradient(circle at 90% 0%, rgba(76,111,255,.3), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(255,122,28,.22), transparent 50%),
        #0C1222;
    color: #EAF0FF;
    box-shadow: 0 18px 44px -16px rgba(10, 15, 30, 0.5);
}
.step-num {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 5vw, 4.6rem);
    font-weight: 700;
    margin-right: 36px;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(255, 122, 28, 0.35));
}
.step-card--dark .step-num {
    background: var(--grad-tech);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 6px 18px rgba(43, 217, 254, 0.4));
}
.step-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}
.step-text small {
    display: block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: none;
    color: var(--muted);
    line-height: 1.5;
}
.step-card--dark .step-text small { color: rgba(234, 240, 255, 0.7); }

/* ---------- 9. WHY THE FIRST CALL ---------- */
.section-call { padding: 80px 0 var(--section-spacing); }
.call-title {
    font-size: clamp(1.9rem, 3.4vw, 3.2rem);
    margin-bottom: 60px;
}
.call-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 60px;
    margin-bottom: 70px;
}
.call-column p {
    position: relative;
    font-size: 1.05rem;
    font-weight: 450;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 22px;
    padding: 22px 26px 22px 44px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(76, 111, 255, 0.13);
    transition: border-color .3s ease, transform .3s ease;
}
.call-column p:hover {
    border-color: rgba(255, 122, 28, 0.4);
    transform: translateX(4px);
}
.call-column p::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 30px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 28, 0.15), 0 0 10px rgba(255, 122, 28, 0.6);
}
.call-column strong { color: var(--ink); font-weight: 700; }

.call-buttons { display: flex; gap: 24px; }
.btn-call {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 26px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-brand);
    background-size: 160% auto;
    box-shadow: 0 16px 38px -14px rgba(255, 94, 58, 0.55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-position .4s ease;
}
.btn-call:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -14px rgba(255, 94, 58, 0.65);
    background-position: right center;
    color: #fff;
}

/* ---------- 10. МОДАЛКА ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 30, 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
}
.modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);
    padding: 44px 40px;
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 460px;
    text-align: center;
    box-shadow: 0 40px 90px -20px rgba(10, 15, 30, 0.5);
    animation: modalPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.modal-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.modal-content > p { color: var(--muted); font-size: 0.95rem; }
.modal-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 111, 255, 0.08);
    border: 1px solid rgba(76, 111, 255, 0.2);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
    transition: transform .3s ease, background .3s ease;
}
.modal-close:hover { transform: rotate(90deg); background: rgba(255, 122, 28, 0.15); }

.callback-form {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1.5px solid rgba(76, 111, 255, 0.2);
    background: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--ink);
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--electric);
    box-shadow: 0 0 0 4px rgba(76, 111, 255, 0.14);
}
.form-group textarea { height: 110px; resize: none; }
.callback-form .btn-black { border: none; cursor: pointer; width: 100%; }
.form-note {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 18px;
}

/* ---------- ФОКУС ДЛЯ КЛАВИАТУРЫ ---------- */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--electric);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- FOOTER (общий) ---------- */
.footer {
    position: relative;
    background:
        radial-gradient(circle at 80% 0%, rgba(76,111,255,.18), transparent 55%),
        #090D18;
    color: #EAF0FF;
    padding: 56px var(--container-padding) 24px;
    z-index: 1;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--electric), var(--orange), transparent);
}
.footer__container {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.footer__logo { width: 10%; min-width: 60px; }
.footer__nav { display: flex; gap: 25px; flex-wrap: wrap; }
.footer__nav a {
    color: #EAF0FF;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity .2s, color .2s;
}
.footer__nav a:hover { opacity: 1; color: var(--cyan); }
.footer__socials { display: flex; gap: 15px; }
.footer__socials img {
    width: 22px; height: 22px;
    filter: invert(1);
    opacity: .7;
    transition: opacity .2s, transform .2s;
}
.footer__socials a:hover img { opacity: 1; transform: translateY(-3px); }
.footer__bottom {
    margin-top: 34px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    opacity: 0.5;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (min-width: 1400px) {
    :root { --container-padding: 100px; }
}
@media (min-width: 1801px) {
    :root { --container-width: 1440px; --container-padding: 130px; }
}
@media (max-width: 1200px) {
    :root { --container-padding: 44px; --section-spacing: 90px; }
    .how-wrapper { gap: 56px; }
}
@media (max-width: 1024px) {
    .diff-grid { grid-template-columns: 1fr; gap: 36px; }
    .diff-center { order: -1; }
    .diff-col { gap: 24px; text-align: center; }
    .col-left, .col-right { text-align: center; }
    .col-left .diff-text-item::after,
    .col-right .diff-text-item::after { display: none; }

    .solutions-wrapper { flex-direction: column; }
    .solutions-art { height: 380px; order: -1; }
}
@media (max-width: 900px) {
    :root { --container-padding: 24px; --section-spacing: 72px; }

    .menu-toggle { display: flex; }
    .dropdown-menu { display: none; }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(244, 247, 253, 0.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(76, 111, 255, 0.15);
        flex-direction: column;
        align-items: center;
        padding: 36px 0;
        gap: 18px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px);
        transition: all .3s ease;
        box-shadow: 0 24px 40px -16px rgba(10, 15, 30, 0.2);
    }
    .nav-links.active { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links a { font-size: 1.05rem; }

    .hero { min-height: auto; padding: 120px 0 40px; display: block; }
    .hero-content { max-width: 100%; padding-top: 20px; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn-black { width: 100%; }

    .who-grid { grid-template-columns: 1fr; gap: 22px; }

    .how-wrapper { flex-direction: column; gap: 44px; }
    .how-image-box { order: -1; padding: 28px; width: 100%; }
    .how-title { text-align: center; }
    .how-content { display: flex; flex-direction: column; align-items: center; }
    .how-list { width: 100%; }

    .levelup-steps { grid-template-columns: 1fr; }
    .step-card { padding: 32px 28px; }
    .step-num { margin-right: 24px; }

    .call-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 48px; }
    .call-buttons { flex-direction: column; }

    .solutions-grid { grid-template-columns: 1fr; }
    .solutions-art { height: 300px; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 2.2rem; }
    .hero-timer { font-size: 0.72rem; padding: 12px 16px; }
    .who-item { padding: 32px 26px; }
    .sol-card { padding: 32px 26px; min-height: auto; }
    .step-text { font-size: 1rem; }
    .modal-content { padding: 36px 24px; }
}

/* ---------- ФИКС: иконки в шапке не наезжают ---------- */
.nav-contact-wrapper { flex-shrink: 0; }
.nav-contact-wrapper > a:not(.nav-contact) { display: flex; align-items: center; }
.nav-links { flex-wrap: nowrap; min-width: 0; }
@media (min-width: 901px) and (max-width: 1400px) {
    .nav-links a { padding: 0 9px; font-size: 0.74rem; }
    .nav-contact-wrapper > a:not(.nav-contact) { display: none; }
    .nav-contact { padding: 10px 16px; font-size: 0.74rem; }
    .logo-text { font-size: 0.7rem; }
}

/* ============================================================
   ЧАСТЬ 2. ВНУТРЕННИЕ СТРАНИЦЫ
   services / cases / pricing / approach / solution /
   startup / busines / model / brend  (RU + EN)
   ============================================================ */

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ---------- */
.lang-switcher {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 6px;
    margin-left: 8px;
}
.lang-link {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
    border: 1px solid rgba(76, 111, 255, 0.25);
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.lang-link:hover,
.lang-link.active {
    color: var(--electric);
    background: rgba(76, 111, 255, 0.1);
    border-color: rgba(76, 111, 255, 0.45);
}
.lang-sep { color: var(--muted); opacity: .4; }

/* ---------- ОБЩИЙ HERO ВНУТРЕННИХ СТРАНИЦ ---------- */
.services-hero,
.cases-hero,
.approach-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 100px;
    display: flex;
    align-items: center;
    background: transparent;
}
/* цветные ауры, как на главной */
.services-hero::before,
.cases-hero::before,
.approach-hero::before {
    content: "";
    position: absolute;
    width: 620px; height: 620px;
    top: -200px; right: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,111,255,.18), transparent 65%);
    filter: blur(90px);
    z-index: 0;
    animation: auraDrift 18s ease-in-out infinite alternate;
}
.services-hero::after,
.cases-hero::after,
.approach-hero::after {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    bottom: -220px; left: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,28,.16), transparent 65%);
    filter: blur(90px);
    z-index: 0;
    animation: auraDrift 18s ease-in-out infinite alternate-reverse;
}
.services-hero > .container,
.cases-hero > .container,
.approach-hero > .container { position: relative; z-index: 2; }

/* фоновое видео — приглушаем, чтобы тема осталась светлой */
.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.16;
    mix-blend-mode: luminosity;
    filter: saturate(1.1) contrast(1.05);
}

.hero-flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}
.hero-text-block { flex: 1; max-width: 800px; }
.hero-content-wrapper { max-width: 700px; }

.hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}
/* свечение под иллюстрацией */
.hero-image::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,28,.22), rgba(76,111,255,.12) 55%, transparent 75%);
    filter: blur(40px);
    z-index: 0;
    animation: pulseGlow 6s ease-in-out infinite;
}
.hero-image img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    height: auto;
    width: clamp(380px, 34vw, 640px);
    object-fit: contain;
    filter: drop-shadow(0 28px 48px rgba(10, 15, 30, 0.22));
    animation: floatAvatar 7s ease-in-out infinite;
}

/* заголовок внутренней страницы — компактнее главной */
.services-hero .hero-title,
.approach-hero .hero-title {
    font-size: clamp(1.9rem, 3.4vw, 3.2rem);
    text-align: left;
    margin-bottom: 28px;
    line-height: 1.1;
}
.services-hero .hero-subtitle,
.approach-hero .hero-subtitle {
    text-align: left;
    max-width: 660px;
    margin-bottom: 18px;
    color: var(--muted);
}
.services-hero .hero-subtitle strong,
.approach-hero .hero-subtitle strong { color: var(--ink); }
.services-hero .hero-buttons,
.approach-hero .hero-buttons {
    justify-content: flex-start;
    margin-top: 28px;
    margin-bottom: 0;
}

/* Cases-hero (заголовок по центру колонки) */
.cases-hero { display: block; }
.cases-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 30px;
    background: var(--grad-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: titleShift 8s ease-in-out infinite alternate;
}
.cases-content-wrapper { max-width: 720px; }
.cases-subtitle {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 30px;
}
.cases-desc { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-bottom: 26px; }
.cases-note {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 30px;
}
.cases-hero .hero-buttons { margin-top: 30px; margin-bottom: 0; }
/* на cases/index заголовок в services-hero без flex-обёртки */
.services-hero > .container > .hero-title { text-align: left; }

/* ---------- ЕДИНАЯ КАРТОЧКА (светлая по умолчанию) ---------- */
/* используется для: .service-card, .tier-card, .stage-item, .format-col */
.service-card,
.tier-card,
.stage-item,
.format-col {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 34px;
    border-radius: var(--r-lg);
    color: var(--ink);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
}
/* градиентная рамка */
.service-card::before,
.tier-card::before,
.stage-item::before,
.format-col::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
/* угловое свечение при наведении */
.service-card::after,
.tier-card::after,
.stage-item::after,
.format-col::after {
    content: "";
    position: absolute;
    top: -70px; right: -70px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,28,.20), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.service-card:hover,
.tier-card:hover,
.stage-item:hover,
.format-col:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
}
.service-card:hover::after,
.tier-card:hover::after,
.stage-item:hover::after,
.format-col:hover::after { opacity: 1; }

.service-card > *,
.tier-card > *,
.stage-item > *,
.format-col > * { position: relative; z-index: 1; }

/* ---------- УСЛУГИ / КЕЙСЫ (сетка карточек) ---------- */
.services-grid-container { padding: 70px 0 100px; }
.services-main-intro {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.7rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.35;
    margin-bottom: 64px;
    max-width: 1000px;
}
.services-grid-8 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.service-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 18px;
    line-height: 1.15;
    color: var(--ink);
}
.service-card .desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 24px;
}
.service-card .subtitle,
.service-card .result-label {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: .08em;
    color: var(--orange);
    margin-bottom: 8px;
}
.service-card .result-label { margin-top: 18px; }
.service-card .features {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.7;
}
.service-card .result-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.btn-card {
    align-self: flex-start;
    margin-top: 24px;
    padding: 12px 26px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    background: var(--grad-brand);
    transition: transform .3s ease, box-shadow .3s ease;
}
.btn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px rgba(255, 94, 58, .6);
    color: #fff;
}

/* ---------- ФОРМАТЫ РАБОТЫ (3 плашки) ---------- */
.section-formats { padding: var(--section-spacing) 0; text-align: center; }
.formats-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 48px;
}
.formats-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.format-card {
    flex: 1;
    max-width: 380px;
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.3vw, 1.25rem);
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    border-radius: var(--r-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.65,.3,1), box-shadow .35s ease;
}
.format-card--light {
    background: var(--surface);
    backdrop-filter: blur(12px);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
.format-card--light::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.format-card--dark {
    background:
        radial-gradient(circle at 80% 10%, rgba(76,111,255,.3), transparent 55%),
        #0C1222;
    color: #EAF0FF;
    box-shadow: 0 16px 38px -16px rgba(10, 15, 30, 0.5);
}
.format-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}
.formats-note {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 36px;
}
.btn-zoom-large {
    display: inline-block;
    padding: 20px 56px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-brand);
    background-size: 160% auto;
    box-shadow: 0 16px 38px -14px rgba(255, 94, 58, .55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-position .4s ease;
}
.btn-zoom-large:hover {
    transform: translateY(-4px);
    background-position: right center;
    box-shadow: 0 24px 48px -14px rgba(255, 94, 58, .65);
    color: #fff;
}

/* ---------- ДЕТАЛЬНЫЕ ФОРМАТЫ (pricing) ---------- */
.section-formats-detailed { padding: var(--section-spacing) 0; }
.formats-detailed-header { text-align: center; margin-bottom: 64px; }
.formats-detailed-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.formats-detailed-title::after {
    content: "";
    display: block;
    width: 80px; height: 4px;
    margin: 20px auto 0;
    border-radius: 4px;
    background: var(--grad-tech);
    box-shadow: 0 0 18px rgba(43, 217, 254, .6);
}
.formats-detailed-subtitle {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 860px;
    margin: 0 auto;
}
.formats-detailed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 70px;
    align-items: stretch;
}
.format-col h3 {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.15;
    color: var(--ink);
}
.format-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 26px;
}
.format-subhead {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--electric);
    margin-bottom: 16px;
}
.format-list { list-style: none; padding: 0; margin-bottom: 10px; }
.format-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.format-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255,122,28,.8);
}
.format-note {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted);
    margin-top: auto;
    padding-top: 18px;
}
.formats-bottom-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* ---------- ТАРИФЫ ---------- */
.section-tiers { padding: 80px 0 var(--section-spacing); }
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.tier-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
    margin-bottom: 14px;
    color: var(--orange);
}
.tier-subtitle {
    font-size: 0.92rem;
    color: var(--muted);
    margin-bottom: 28px;
    min-height: 40px;
    line-height: 1.55;
}
.tier-price-block {
    margin-bottom: 30px;
    padding: 20px 22px;
    border-radius: var(--r-md);
    background:
        radial-gradient(circle at 85% 10%, rgba(76,111,255,.34), transparent 60%),
        #0C1222;
    box-shadow: 0 12px 28px -14px rgba(10, 15, 30, .5);
}
.tier-price-block .tier-label { color: var(--cyan); }
.tier-price-block .tier-price-value { color: #fff; }
.tier-price-block .tier-price-note { color: rgba(234, 240, 255, 0.62); }
.tier-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--electric);
    margin-bottom: 8px;
}
.tier-price-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.tier-price-note {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: 4px;
}
.tier-section-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 12px;
    margin-top: 6px;
}
.tier-desc-text { font-size: 0.95rem; margin-bottom: 15px; color: rgba(234,240,255,.8); }
.tier-list { list-style: none; padding: 0; margin-bottom: 26px; }
.tier-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 9px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tier-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--electric);
    box-shadow: 0 0 0 3px rgba(76, 111, 255, .14);
}
.btn-tier {
    margin-top: auto;
    display: block;
    text-align: center;
    padding: 16px 20px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: var(--grad-brand);
    background-size: 160% auto;
    transition: transform .3s ease, box-shadow .3s ease, background-position .4s ease;
}
.btn-tier:hover {
    transform: translateY(-3px);
    background-position: right center;
    box-shadow: 0 16px 34px -12px rgba(255, 94, 58, .6);
    color: #fff;
}

/* ---------- ЭТАПЫ / ТАЙМЛАЙН ---------- */
.approach-stages { padding: var(--section-spacing) 0; }
.approach-timeline { padding: var(--section-spacing) 0; }
.work-formats { padding: 40px 0 var(--section-spacing); }

.stages-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.stages-grid1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.stages-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }

.stage-item { height: 100%; }
.stage-number {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--electric);
}
.stage-intro {
    font-size: 0.95rem;
    margin-bottom: 28px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.6;
}
.stage-sub-block { margin-bottom: 24px; }
.stage-sub-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--ink);
    line-height: 1.25;
}
.stage-result { margin-top: auto; padding-top: 18px; }
.stage-result p { font-weight: 500; line-height: 1.55; color: var(--ink-soft); }

.stage-feeling {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(76, 111, 255, 0.16);
}
.stage-feeling p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 12px;
}
.stage-feeling p:last-child { margin-bottom: 0; }
.stage-feeling strong { color: var(--ink); }
.feeling-label {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink-soft) !important;
}
/* стрелка-вывод внутри карточки подсвечивается */
.stage-feeling .feeling-label:last-child { color: var(--electric) !important; font-weight: 600; }
.feeling-text {
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-soft);
}

.timeline-header { text-align: center; margin-bottom: 56px; }
.timeline-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}
.timeline-subtitle { font-size: 1.1rem; font-weight: 500; color: var(--muted); }

/* тёмные секции, заданные инлайн-стилем в HTML (background:#000) */
section[style*="background: #000"],
section[style*="background:#000"] {
    background:
        radial-gradient(circle at 20% 0%, rgba(76,111,255,.22), transparent 55%),
        radial-gradient(circle at 85% 100%, rgba(255,122,28,.16), transparent 55%),
        #070B14 !important;
    border-radius: 0;
}
section[style*="background: #000"] .stage-item,
section[style*="background:#000"] .stage-item {
    background:
        radial-gradient(circle at 88% 6%, rgba(76,111,255,.22), transparent 55%),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(122, 150, 255, 0.16);
}

/* ---------- APPROACH: ТЕКСТОВЫЕ БЛОКИ ---------- */
.approach-problem { padding: var(--section-spacing) 0; }
.approach-system { padding: var(--section-spacing) 0; }

.approach-subtitle-large {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 34px;
}
.approach-title-secondary {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.6rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 26px;
}
.approach-subheading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--ink);
}
.approach-intro {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 22px;
}
.approach-intro strong { color: var(--ink); font-weight: 700; }
.approach-content p {
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 22px;
    font-weight: 450;
    color: var(--ink-soft);
}
.approach-list { list-style: none; margin-bottom: 32px; }
.approach-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.6;
    color: var(--ink-soft);
}
.approach-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 10px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(255,122,28,.14);
}
.approach-list li strong { color: var(--ink); font-weight: 700; }
.approach-footer-text { color: var(--muted); max-width: 90%; }
.approach-conclusion {
    margin-top: 40px;
    padding: 26px 30px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed rgba(76, 111, 255, 0.35);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.approach-columns { display: flex; gap: 70px; margin-top: 56px; }
.approach-col { flex: 1; }
.approach-col-title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 24px;
}
.approach-col-intro {
    font-size: 1.02rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--ink-soft);
}
.approach-footer-wide {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 600;
    margin-top: 70px;
    line-height: 1.4;
    max-width: 1000px;
}

/* ---------- УЧАСТИЕ / КВАЛИФИКАЦИЯ (светлые плашки) ---------- */
.approach-participation { padding: var(--section-spacing) 0; }
.participation-header,
.universal-header { text-align: center; margin-bottom: 56px; }
.participation-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 16px;
}
.participation-subtitle { font-size: 1.1rem; font-weight: 500; color: var(--muted); }

.participation-cards-grid,
.qualification-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-top: 56px;
}
.participation-card,
.qualification-card {
    position: relative;
    padding: 44px 40px;
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
}
.participation-card::before,
.qualification-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.participation-card:hover,
.qualification-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-card-hover);
}
/* верхняя акцентная полоса */
.participation-card.card-yes::after,
.qualification-card.card-yes::after,
.participation-card.card-no::after,
.qualification-card.card-no::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.participation-card.card-yes::after,
.qualification-card.card-yes::after { background: var(--grad-brand); }
.participation-card.card-no::after,
.qualification-card.card-no::after { background: var(--grad-tech); }

.comparison-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: 600;
    margin-bottom: 26px;
    line-height: 1.25;
}
.role-highlight {
    margin-top: 34px;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.35;
    font-weight: 600;
}
.participation-comparison {
    display: flex;
    justify-content: center;
    gap: 110px;
    margin: 70px 0;
}
.comparison-col { width: 360px; }
.filter-section {
    margin-top: 80px;
    padding-top: 70px;
    border-top: 1px solid rgba(76, 111, 255, 0.14);
}

/* ---------- УНИВЕРСАЛЬНЫЕ ФИЧИ / МЕТРИКИ ---------- */
.section-universal-features { padding: var(--section-spacing) 0; text-align: center; }
.universal-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 18px;
    line-height: 1.2;
}
.universal-subtitle {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 880px;
    margin: 0 auto 50px;
    line-height: 1.65;
}
.universal-subtitle p { font-size: inherit; color: inherit; line-height: inherit; }

/* строка метрик превращается в набор чипов */
.features-line {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 56px;
    max-width: 1000px;
}
.features-line > span:not(.feature-divider) {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(76, 111, 255, 0.22);
    box-shadow: 0 6px 18px -10px rgba(10, 15, 30, .3);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, color .3s ease;
}
.features-line > span:not(.feature-divider):hover {
    transform: translateY(-3px);
    border-color: rgba(255, 122, 28, 0.5);
    color: var(--ink);
}
.feature-divider { display: none; }

.qualification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}
.qual-col {
    position: relative;
    padding: 40px 38px;
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    transition: transform .4s cubic-bezier(.2,.65,.3,1), box-shadow .4s ease;
}
.qual-col::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.qual-col:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.qual-col h3 {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 600;
    margin-bottom: 22px;
    line-height: 1.25;
}
/* первая колонка — «подходим», вторая — «не подходим» */
.qualification-grid .qual-col:first-child h3 { color: var(--orange); }
.qualification-grid .qual-col:last-child h3 { color: var(--electric); }

.qual-list { list-style: none; padding: 0; }
.qual-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.6;
    color: var(--ink-soft);
}
.qual-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 10px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--electric);
    box-shadow: 0 0 0 3px rgba(76,111,255,.14);
}
.qualification-card .qual-list li::before { background: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,28,.14); }
.qualification-card.card-no .qual-list li::before { background: var(--electric); box-shadow: 0 0 0 3px rgba(76,111,255,.14); }

.qualification,
.qualification-section { padding: 80px 0; }

/* ---------- КАК МЫ СЧИТАЕМ / ФИНАЛЬНЫЙ CTA ---------- */
.section-how-we-work { padding: 60px 0; text-align: center; }
.how-work-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.how-work-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 820px;
    margin: 0 auto;
}

.section-final-cta { padding: 70px 0 var(--section-spacing); text-align: center; }
.final-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.25;
}
.final-cta-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 46px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

/* ---------- FOOTER CTA ---------- */
.section-footer-cta { text-align: center; padding: var(--section-spacing) 0; }
.footer-cta-text { max-width: 900px; margin: 0 auto 46px; }
.footer-cta-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 12px;
}
.footer-cta-text p {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--muted);
}
.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}
.btn-footer-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 22px 46px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--grad-brand);
    background-size: 160% auto;
    min-width: 340px;
    box-shadow: 0 16px 38px -14px rgba(255, 94, 58, .55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-position .4s ease;
}
.btn-footer-black:hover {
    transform: translateY(-4px);
    background-position: right center;
    box-shadow: 0 24px 48px -14px rgba(255, 94, 58, .65);
    color: #fff;
}

/* ---------- ЛИЧНЫЙ БРЕНД (pricing) ---------- */
.section-personal-brand { padding: 80px 0 var(--section-spacing); text-align: center; }
.personal-brand-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.personal-brand-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--muted);
    margin-bottom: 50px;
}
.personal-brand-packages {
    display: flex;
    justify-content: center;
    gap: 70px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.pb-package-name {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.btn-personal {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    background: var(--grad-brand);
    transition: transform .3s ease, box-shadow .3s ease;
}
.btn-personal:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(255, 94, 58, .6);
    color: #fff;
}

.pricing-divider {
    height: 1px;
    width: 100%;
    margin: 40px 0;
    background: linear-gradient(90deg, transparent, rgba(76,111,255,.4), rgba(255,122,28,.4), transparent);
}

/* ============================================================
   ТЁМНЫЙ АКЦЕНТ
   Тёмная карточка — исключение, а не правило. Применяется:
   1) в сетке услуг/кейсов — шахматкой (2-я и 3-я в каждой четвёрке),
      так же, как блок Solutions на главной;
   2) внутри секций с чёрным фоном, заданным инлайном в HTML;
   3) вручную — добавь классу карточки class="... card-dark".
   ============================================================ */
.services-grid-8 .service-card:nth-child(4n+2),
.services-grid-8 .service-card:nth-child(4n+3),
section[style*="background: #000"] .stage-item,
section[style*="background:#000"] .stage-item,
.card-dark {
    color: #EAF0FF;
    background:
        radial-gradient(circle at 88% 6%, rgba(76,111,255,.26), transparent 55%),
        radial-gradient(circle at 6% 96%, rgba(255,122,28,.18), transparent 52%),
        #0C1222;
    box-shadow: 0 18px 44px -18px rgba(10, 15, 30, 0.45);
}
/* внутренняя сетка вместо градиентной рамки */
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark)::before {
    padding: 0;
    background-image:
        linear-gradient(rgba(122,150,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,150,255,.07) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask: none;
    mask: none;
    z-index: 0;
}
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark):hover {
    box-shadow: 0 34px 64px -20px rgba(76, 111, 255, 0.4);
}

/* текст внутри тёмной карточки */
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) :is(h2, h3, h4, strong) { color: #fff; }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) :is(p, li, .desc, .features, .result-text, .format-desc, .format-note, .stage-intro, .feeling-text) {
    color: rgba(234, 240, 255, 0.8);
}
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) .feeling-label { color: rgba(234, 240, 255, 0.8) !important; }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) .stage-feeling .feeling-label:last-child { color: var(--cyan) !important; }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) :is(.subtitle, .result-label, .tier-section-title) { color: var(--orange); }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) :is(.stage-number, .format-subhead) { color: var(--cyan); }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) .stage-feeling { border-top-color: rgba(122, 150, 255, 0.2); }
:is(.services-grid-8 .service-card:nth-child(4n+2),
    .services-grid-8 .service-card:nth-child(4n+3),
    section[style*="background: #000"] .stage-item,
    section[style*="background:#000"] .stage-item,
    .card-dark) :is(.approach-list, .qual-list, .tier-list, .format-list) li::before {
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255, 122, 28, .7);
}

/* ============================================================
   АДАПТИВ ВНУТРЕННИХ СТРАНИЦ
   ============================================================ */
@media (max-width: 1200px) {
    .stages-grid1 { grid-template-columns: repeat(2, 1fr); }
    .formats-detailed-grid { grid-template-columns: 1fr; }
    .approach-columns { gap: 46px; }
    .participation-comparison { gap: 60px; }
}
@media (max-width: 1024px) {
    .services-hero,
    .cases-hero,
    .approach-hero { padding: 140px 0 70px; }

    .hero-flex-layout { flex-direction: column; gap: 40px; }
    .hero-text-block { max-width: 100%; }
    .hero-image { order: -1; justify-content: center; width: 100%; }
    .hero-image img { width: min(420px, 82vw); }
    .approach-hero .hero-image { order: 2; margin-top: 30px; }

    .services-grid-8 { grid-template-columns: 1fr 1fr; }
    .tiers-grid { grid-template-columns: 1fr; }
    .stages-grid,
    .stages-grid1,
    .stages-grid2 { grid-template-columns: 1fr; }
    .approach-columns { flex-direction: column; gap: 40px; }
    .participation-comparison { flex-direction: column; align-items: center; gap: 40px; text-align: center; }
    .comparison-col { width: 100%; max-width: 480px; }
    .participation-cards-grid,
    .qualification-cards-grid,
    .qualification-grid { grid-template-columns: 1fr; }
    .formats-grid { flex-direction: column; align-items: center; }
    .format-card { width: 100%; max-width: 100%; min-height: 92px; }
}
@media (max-width: 900px) {
    .lang-switcher { margin-left: 0; }
    .services-grid-8 { grid-template-columns: 1fr; }
    .service-card,
    .tier-card,
    .stage-item,
    .format-col { padding: 32px 26px; }
    .participation-card,
    .qualification-card,
    .qual-col { padding: 34px 28px; }
    .btn-footer-black { min-width: 100%; }
    .footer-cta-buttons,
    .cta-buttons-group,
    .formats-bottom-actions { flex-direction: column; align-items: stretch; }
    .footer-cta-buttons .btn-black,
    .cta-buttons-group .btn-black { width: 100%; }
    .services-hero .hero-buttons,
    .approach-hero .hero-buttons,
    .cases-hero .hero-buttons { flex-direction: column; width: 100%; }
    .services-hero .hero-buttons .btn-black,
    .approach-hero .hero-buttons .btn-black,
    .cases-hero .hero-buttons .btn-black { width: 100%; }
}
@media (max-width: 480px) {
    .services-hero,
    .cases-hero,
    .approach-hero { padding: 120px 0 56px; }
    .features-line > span:not(.feature-divider) { padding: 10px 18px; font-size: 0.76rem; }
}

/* тёмная карточка внутри тёмной секции — добавляем тонкий контур */
section[style*="background: #000"] .stage-item,
section[style*="background:#000"] .stage-item {
    box-shadow: inset 0 0 0 1px rgba(122, 150, 255, 0.18), 0 18px 44px -18px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   ПУНКТ МЕНЮ «ПИАР» / PR + подпункты-документы
   ============================================================ */

/* строка подпункта: название слева, метка PDF справа */
.dropdown-menu li a.menu-doc {
    justify-content: space-between;
    gap: 14px;
    white-space: nowrap;
}
.menu-doc-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--electric);
    background: rgba(76, 111, 255, 0.1);
    border: 1px solid rgba(76, 111, 255, 0.28);
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.dropdown-menu li a.menu-doc:hover .menu-doc-tag {
    color: var(--orange);
    background: rgba(255, 122, 28, 0.12);
    border-color: rgba(255, 122, 28, 0.4);
}

/* ---------- ВЫПАДАЮЩИЕ МЕНЮ НА МОБИЛЬНОМ ----------
   Раньше подпункты просто скрывались и были недоступны с телефона.
   Теперь они раскрыты прямо в стопке меню. */
@media (max-width: 900px) {
    .nav-links .nav-item.dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        width: 100%;
    }
    .dropdown-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        width: 100%;
        margin-top: 6px;
        padding: 6px 0 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    .dropdown-menu::before { content: none; }
    .dropdown-menu li { width: auto; }
    .dropdown-menu li a {
        height: auto;
        padding: 9px 16px;
        font-size: 0.92rem;
        color: var(--muted);
    }
    .dropdown-menu li a.menu-doc { justify-content: center; gap: 10px; }
    .dropdown-toggle::after { display: none; }
}

/* ============================================================
   МОБИЛЬНАЯ ШАПКА: контакты уезжают внутрь бургера
   Блок .nav-contact-wrapper переносится в меню скриптом
   (см. effects.js). Пока он в шапке — на мобильном скрыт.
   ============================================================ */
@media (max-width: 900px) {
    .header-container > .nav-contact-wrapper { display: none; }

    .nav-links .nav-contact-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin-top: 10px;
        padding: 24px 24px 0;
        border-top: 1px solid rgba(76, 111, 255, 0.14);
    }
    .nav-links .nav-contact {
        order: -1;
        flex-basis: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 28px;
        font-size: 0.82rem;
    }
    .nav-links .nav-contact-wrapper > a:not(.nav-contact) img { width: 26px; height: 26px; opacity: .7; }
}

/* ============================================================
   БЛОК ПРЕЗЕНТАЦИЙ НА ГЛАВНОЙ
   Две кнопки-переключателя, дек разворачивается прямо здесь
   ============================================================ */
.section-decks { padding: var(--section-spacing) 0; }

.decks-head { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.decks-kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 16px;
}
.decks-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 18px;
}
.decks-title::after {
    content: "";
    display: block;
    width: 90px; height: 4px;
    margin: 20px auto 0;
    border-radius: 4px;
    background: var(--grad-tech);
    box-shadow: 0 0 18px rgba(43, 217, 254, .6);
}
.decks-sub { font-size: 1.05rem; line-height: 1.6; color: var(--muted); }

/* ---------- кнопки ---------- */
.decks-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
}
.deck-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 30px;
    border: none;
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2,.65,.3,1), box-shadow .35s ease;
}
.deck-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.deck-tab > * { position: relative; z-index: 1; }
.deck-tab:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }

.deck-tab-name {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.15;
}
.deck-tab-note {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .3s ease;
}
.deck-tab:hover .deck-tab-note { color: var(--orange); }

/* активная кнопка — тёмная */
.deck-tab.is-active {
    color: #EAF0FF;
    background:
        radial-gradient(circle at 88% 6%, rgba(76,111,255,.3), transparent 55%),
        radial-gradient(circle at 6% 96%, rgba(255,122,28,.2), transparent 52%),
        #0C1222;
    box-shadow: 0 22px 48px -18px rgba(76, 111, 255, 0.45);
}
.deck-tab.is-active::before {
    padding: 0;
    background-image:
        linear-gradient(rgba(122,150,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,150,255,.08) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask: none;
    mask: none;
}
.deck-tab.is-active .deck-tab-name { color: #fff; }
.deck-tab.is-active .deck-tab-note { color: var(--cyan); }

/* ---------- область с презентацией ---------- */
.deck-viewer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.2,.65,.3,1), opacity .45s ease, margin-top .5s ease;
}
.deck-viewer.is-open {
    max-height: 1400px;
    opacity: 1;
    margin-top: 32px;
}

.deck-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1280 / 790;   /* слайд 16:9 + панель управления дека */
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0A0E1A;
    box-shadow: 0 34px 80px -28px rgba(10, 15, 30, 0.6);
}
.deck-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}
.deck-slot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.deck-slot.is-on { opacity: 1; visibility: visible; z-index: 2; }
.deck-slot iframe { width: 100%; height: 100%; border: 0; display: block; }

/* индикатор загрузки дека */
.deck-frame::before {
    content: "Загружаем презентацию…";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: .06em;
    color: rgba(234, 240, 255, 0.55);
    z-index: 1;
}

.deck-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.deck-hint { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.deck-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.deck-link {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--electric);
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(76, 111, 255, 0.28);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.deck-link:hover {
    color: var(--orange);
    border-color: rgba(255, 122, 28, 0.45);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .decks-tabs { grid-template-columns: 1fr; gap: 16px; }
    .deck-tab { padding: 22px 24px; }
    .deck-viewer.is-open { max-height: 1000px; }
    .deck-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .deck-actions { justify-content: center; }
}
@media (max-width: 640px) {
    .deck-frame { aspect-ratio: 3 / 4; }
}