/* SMART+ visual theme v7 — harmonized vibe: Matrix green, calm typography, no founder frame */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg: #05060a;
    --bg2: #030407;
    --panel: rgba(255, 255, 255, 0.028);
    --panel2: rgba(255, 255, 255, 0.045);
    --text: #e8edf5;
    --strong: #ffffff;
    --muted: #8f9aab;
    --line: rgba(255, 255, 255, 0.075);
    --line2: rgba(255, 255, 255, 0.12);

    --matrix: #00ff41;
    --matrix-soft: rgba(0, 255, 65, 0.10);
    --matrix-border: rgba(0, 255, 65, 0.28);
    --matrix-glow: rgba(0, 255, 65, 0.18);

    --cyan: #22d3ee;
    --cyan-soft: rgba(34, 211, 238, 0.10);
    --cyan-border: rgba(34, 211, 238, 0.26);

    --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --r: 16px;
    --rs: 12px;
    --sh: 0 18px 50px rgba(0, 0, 0, 0.45);
    --shs: 0 10px 28px rgba(0, 0, 0, 0.28);
    --cw: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sans);
    color: var(--text);
    line-height: 1.58;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, #030407 0%, var(--bg) 45%, #030407 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: -50% -50%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.58;
    will-change: background-position, opacity;
    background-image:
        radial-gradient(1.1px 1.1px at 18px 26px, rgba(255,255,255,.88), transparent),
        radial-gradient(1px 1px at 64px 92px, rgba(255,255,255,.62), transparent),
        radial-gradient(1.15px 1.15px at 110px 40px, rgba(255,255,255,.78), transparent),
        radial-gradient(1px 1px at 150px 130px, rgba(255,255,255,.52), transparent),
        radial-gradient(1.05px 1.05px at 36px 160px, rgba(255,255,255,.68), transparent),
        radial-gradient(1px 1px at 92px 178px, rgba(255,255,255,.48), transparent),
        radial-gradient(1.1px 1.1px at 176px 70px, rgba(255,255,255,.64), transparent),
        radial-gradient(1px 1px at 130px 14px, rgba(255,255,255,.50), transparent),
        radial-gradient(1.05px 1.05px at 8px 110px, rgba(255,255,255,.58), transparent),
        radial-gradient(1px 1px at 198px 150px, rgba(255,255,255,.42), transparent),
        radial-gradient(1.15px 1.15px at 70px 60px, rgba(0,255,65,.38), transparent),
        radial-gradient(1px 1px at 160px 104px, rgba(34,211,238,.30), transparent),
        radial-gradient(1.05px 1.05px at 44px 198px, rgba(255,255,255,.52), transparent),
        radial-gradient(1px 1px at 120px 196px, rgba(255,255,255,.40), transparent);
    background-repeat: repeat;
    background-size: 220px 220px;
    animation: starDrift1 170s linear infinite, twinkle1 8s ease-in-out infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: -50% -50%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    will-change: background-position, opacity;
    background-image:
        radial-gradient(1.45px 1.45px at 40px 60px, rgba(255,255,255,.86), transparent),
        radial-gradient(1.3px 1.3px at 150px 120px, rgba(255,255,255,.66), transparent),
        radial-gradient(1.5px 1.5px at 240px 40px, rgba(255,255,255,.78), transparent),
        radial-gradient(1.2px 1.2px at 90px 220px, rgba(255,255,255,.56), transparent),
        radial-gradient(1.35px 1.35px at 280px 180px, rgba(255,255,255,.68), transparent),
        radial-gradient(1.2px 1.2px at 200px 260px, rgba(255,255,255,.52), transparent),
        radial-gradient(1.4px 1.4px at 30px 280px, rgba(255,255,255,.62), transparent),
        radial-gradient(1.25px 1.25px at 320px 90px, rgba(255,255,255,.54), transparent),
        radial-gradient(1.45px 1.45px at 120px 300px, rgba(0,255,65,.34), transparent),
        radial-gradient(1.25px 1.25px at 260px 320px, rgba(34,211,238,.26), transparent);
    background-repeat: repeat;
    background-size: 360px 360px;
    animation: starDrift2 125s linear infinite, twinkle2 10s ease-in-out infinite;
}

@keyframes starDrift1 {
    from { background-position: 0 0; }
    to { background-position: 0 -220px; }
}

@keyframes starDrift2 {
    from { background-position: 0 0; }
    to { background-position: 0 360px; }
}

@keyframes twinkle1 {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 0.42; }
}

@keyframes twinkle2 {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 0.28; }
}

::selection {
    background: rgba(0, 255, 65, 0.22);
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg2);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,255,65,.42), rgba(34,211,238,.34));
    border-radius: 999px;
    border: 2px solid var(--bg2);
}

a {
    color: var(--cyan);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--matrix);
}

h1, h2, h3, h4 {
    font-family: var(--sans);
    color: var(--strong);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 12px;
    font-weight: 800;
}

h1 {
    font-size: clamp(34px, 4.8vw, 56px);
    font-weight: 800;
}

h2 {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
}

h3 {
    font-size: clamp(18px, 2.1vw, 24px);
    font-weight: 750;
}

p {
    margin: 0 0 12px;
}

.container {
    width: min(var(--cw), calc(100% - 32px));
    margin: 0 auto;
}

.grad {
    color: #67e8f9;
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.16);
}

.term {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--matrix);
    background: rgba(0, 255, 65, 0.07);
    border: 1px solid rgba(0, 255, 65, 0.25);
    border-radius: 8px;
    padding: 0.08em 0.34em;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.45), 0 0 18px rgba(0, 255, 65, 0.18);
    box-shadow: inset 0 0 18px rgba(0, 255, 65, 0.05);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: var(--matrix-soft);
    color: #dcffe6;
    border: 1px solid var(--matrix-border);
    border-radius: 999px;
    z-index: 300;
    font-weight: 700;
}

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    background: rgba(3, 4, 7, 0.82);
    border-bottom: 1px solid var(--line);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 10px 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--strong);
    font-size: 19px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--matrix-soft);
    border: 1px solid var(--matrix-border);
    color: var(--matrix);
    font-family: var(--mono);
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 0 18px rgba(0, 255, 65, 0.10);
}

.nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.nav a {
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
}

.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--strong);
}

.btn,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    background: var(--panel2);
    color: var(--strong);
    font-family: var(--sans);
    font-weight: 650;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    border-color: var(--matrix-border);
    background: rgba(0, 255, 65, 0.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
    color: var(--strong);
}

.btn-accent,
button.btn-accent {
    background: var(--matrix-soft);
    border-color: var(--matrix-border);
    color: #dcffe6;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.22);
    box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.04), 0 10px 28px rgba(0, 0, 0, 0.24);
}

.btn-accent:hover,
button.btn-accent:hover {
    background: rgba(0, 255, 65, 0.16);
    border-color: rgba(0, 255, 65, 0.55);
    color: #ffffff;
}

.header .btn-accent {
    min-height: 38px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
}

.btn-tel {
    font-family: var(--mono);
    font-size: 14px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 65, 0.24);
    background: rgba(0, 255, 65, 0.06);
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

.pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--matrix);
    box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.55);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.48); }
    70% { box-shadow: 0 0 0 9px rgba(0, 255, 65, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); }
}

.hero {
    padding: clamp(58px, 8vw, 96px) 0 clamp(34px, 5vw, 58px);
    position: relative;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
}

.hero-inner.has-media {
    grid-template-columns: 1.08fr 0.92fr;
}

.hero h1 {
    max-width: 760px;
}

.hero .lead,
.hero .text {
    max-width: 700px;
    color: var(--muted);
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.62;
}

.hero .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero .badge-row {
    margin-bottom: 18px;
}

.hero-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    isolation: isolate;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    filter: saturate(0.96) contrast(1.04) brightness(0.98);
    will-change: transform;
}

.hero-media:hover img {
    transform: scale(1.055);
}

.hero-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.hero-placeholder .brand-mark {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border-radius: 18px;
}

.marquee {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.018);
    padding: 12px 0;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    gap: 24px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    animation: marquee 34s linear infinite;
    will-change: transform;
}

.marquee-track span {
    color: var(--matrix);
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 14px;
    margin: 28px 0 0;
}

.stat {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: var(--shs);
}

.stat-num {
    display: block;
    font-family: var(--mono);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 700;
    color: var(--strong);
    line-height: 1;
}

.stat-num .suffix {
    color: var(--matrix);
}

.stat-label {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.section {
    padding: clamp(46px, 7vw, 78px) 0;
    position: relative;
}

.section.alt {
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section h2 {
    text-align: center;
    margin-bottom: 12px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.section .sub {
    text-align: center;
    color: var(--muted);
    font-size: 16px;
    max-width: 760px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.overline {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 255, 65, 0.72);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.overline.center {
    justify-content: center;
}

.overline::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--matrix);
    display: inline-block;
    opacity: 0.7;
}

.code-block {
    background: #04070a;
    border: 1px solid rgba(0, 255, 65, 0.20);
    border-radius: var(--r);
    padding: 18px;
    overflow: auto;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    color: #b9fbc0;
    box-shadow: inset 0 0 34px rgba(0, 255, 65, 0.04), 0 0 24px rgba(0, 255, 65, 0.05);
    position: relative;
}

.code-block::after {
    content: "</>";
    position: absolute;
    top: 10px;
    right: 12px;
    color: rgba(0, 255, 65, 0.42);
    font-size: 11px;
}

.code-block .kw { color: var(--matrix); }
.code-block .fn { color: var(--cyan); }
.code-block .str { color: #4ade80; }
.code-block .cm { color: #64748b; }
.code-block .num { color: #22d3ee; }
.code-block .punc { color: #94a3b8; }

.grid {
    display: grid;
    gap: 16px;
}

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

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

.gauto,
.family-grid,
.codex-grid,
.principles,
.facts-grid,
.cases-preview,
.cases-grid,
.services-grid,
.quest-grid,
.contact-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

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

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

.card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.014));
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shs);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 65, 0.22);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 255, 65, 0.04);
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    color: var(--muted);
}

.dossier-id {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.dossier-id span:last-child {
    color: rgba(0, 255, 65, 0.76);
}

.role-title {
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 750;
    color: var(--strong);
    margin-bottom: 6px;
}

.role-person {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 12px;
}

.role-quote {
    border-left: 2px solid var(--matrix);
    padding-left: 12px;
    color: #cbd5e1;
    font-style: italic;
    margin: 12px 0 0;
    font-size: 14px;
}

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--matrix-soft);
    border: 1px solid var(--matrix-border);
    color: var(--matrix);
    font-size: 18px;
    margin-bottom: 12px;
    box-shadow: 0 0 18px rgba(0, 255, 65, 0.08);
}

.principle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.principle-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line2);
    background: rgba(255, 255, 255, 0.025);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
}

.principle-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.principle h3 {
    font-size: 17px;
    margin-bottom: 5px;
}

.principle p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.chip {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 5px 10px;
}

.chip.blue {
    color: #a5f3fc;
    background: var(--cyan-soft);
    border-color: var(--cyan-border);
}

.chip.amber {
    color: #b7ffcb;
    background: var(--matrix-soft);
    border-color: var(--matrix-border);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.step {
    background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.step:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.28);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: rgba(255, 255, 255, 0.025);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--strong);
    margin-bottom: 12px;
}

.step h3 {
    font-size: 18px;
    margin-bottom: 7px;
}

.step p {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
}

.review {
    background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012));
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 20px;
}

.review .stars {
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-size: 13px;
}

.review p {
    color: var(--text);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
}

.review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 12px;
    color: var(--matrix);
    background: var(--matrix-soft);
    border: 1px solid var(--matrix-border);
    box-shadow: 0 0 16px rgba(0, 255, 65, 0.08);
}

.review-name {
    font-weight: 700;
    color: var(--strong);
    font-size: 14px;
}

.review-role {
    font-size: 12px;
    color: var(--muted);
}

.faq {
    display: grid;
    gap: 10px;
}

.faq details {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--rs);
    padding: 16px 18px;
}

.faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--strong);
    font-size: 15px;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    float: right;
    color: var(--matrix);
    font-family: var(--mono);
}

.faq details[open] summary::after {
    content: "–";
}

.faq p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.final-cta {
    position: relative;
    overflow: hidden;
    margin-top: 28px;
    padding: clamp(24px, 4vw, 42px);
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,255,65,.08), transparent 38%),
        radial-gradient(circle at 80% 80%, rgba(34,211,238,.06), transparent 38%),
        rgba(255,255,255,.025);
    border: 1px solid rgba(0, 255, 65, 0.22);
    box-shadow: var(--sh);
    text-align: center;
}

.final-cta::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(34, 211, 238, 0.10);
    border-radius: 16px;
    pointer-events: none;
}

.final-cta h2 {
    margin-bottom: 10px;
}

.final-cta p {
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto 18px;
    font-size: 15px;
}

.final-cta .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
}

.final-cta .actions {
    justify-content: center;
}

.form {
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.014));
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    backdrop-filter: blur(8px);
}

.field {
    margin-bottom: 12px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: var(--strong);
    font-weight: 650;
    font-size: 14px;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 13px;
    border-radius: var(--rs);
    border: 1px solid var(--line2);
    background: rgba(255, 255, 255, 0.035);
    color: var(--strong);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: rgba(0, 255, 65, 0.45);
    box-shadow: 0 0 0 4px rgba(0, 255, 65, 0.10);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.consent {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

.consent a {
    color: var(--muted);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.filters a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 7px 12px;
    text-decoration: none;
}

.filters a:hover {
    color: var(--strong);
    border-color: var(--matrix-border);
}

.filters a.active {
    color: #dcffe6;
    background: var(--matrix-soft);
    border-color: var(--matrix-border);
    font-weight: 700;
}

.case-block {
    margin-top: 14px;
}

.case-block h3 {
    font-size: 15px;
    margin-bottom: 7px;
    color: var(--strong);
}

.case-block p,
.case-block li {
    color: var(--muted);
    line-height: 1.5;
    font-size: 13px;
}

.case-block ul {
    margin: 0;
    padding-left: 17px;
}

.metric-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.metric-list li {
    font-family: var(--mono);
    font-size: 11px;
    color: #b7ffcb;
    background: rgba(0, 255, 65, 0.05);
    border: 1px solid rgba(0, 255, 65, 0.18);
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.45;
}

.case-evidence {
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--rs);
    background: rgba(0, 255, 65, 0.055);
    border: 1px solid rgba(0, 255, 65, 0.18);
    color: #bbf7d0;
    font-size: 12px;
}

.case-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.list li {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--rs);
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
}

.mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mini-actions .btn {
    width: auto;
}

.footer {
    padding: 30px 0;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.footer a {
    color: var(--text);
}

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

.footer .fbrand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
    color: var(--strong);
    font-weight: 800;
    font-size: 17px;
}

.cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(3, 4, 7, 0.96);
    border-top: 1px solid rgba(0, 255, 65, 0.22);
    backdrop-filter: blur(14px);
    padding: 14px 0;
    transform: translateY(120%);
    transition: transform 0.35s ease;
}

.cookie.show {
    transform: translateY(0);
}

.cookie .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cookie p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    max-width: 780px;
}

.cookie .cbtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.back-link {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--matrix);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.88;
}

.center {
    text-align: center;
}

.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mb0 { margin-bottom: 0; }
.muted { color: var(--muted); }

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

.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.in-view {
    opacity: 1;
    transform: none;
}

.hero h1 {
    animation: fadeUp 0.55s ease both;
}

@media (max-width: 980px) {
    .g2,
    .g3,
    .contact-grid,
    .cases-grid {
        grid-template-columns: 1fr;
    }

    .hero-inner.has-media {
        grid-template-columns: 1fr;
    }

    .hero-media {
        max-width: 560px;
        margin: 0 auto;
    }

    .header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .container {
        width: calc(100% - 24px);
    }

    .brand {
        font-size: 18px;
    }

    .nav {
        gap: 12px;
    }

    .nav a {
        font-size: 13px;
    }

    .btn,
    button,
    input[type="submit"] {
        width: 100%;
    }

    .hero .actions,
    .final-cta .actions,
    .mini-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mini-actions .btn {
        width: 100%;
    }

    .cookie .container {
        flex-direction: column;
        align-items: stretch;
    }

    .term {
        white-space: normal;
    }

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body::before,
    body::after {
        animation: none !important;
    }

    .hero-media img {
        transform: none !important;
    }
}


/* SMART+ Level 2A — service dossier + hero family CTA */
.hero-family-cta { margin-top: 18px; }
.hero-family-cta .btn { font-weight: 650; }
.ext-arrow { font-family: var(--mono); opacity: .7; margin-left: 2px; }

.container.narrow { max-width: 880px; }

.dossier-lede { border-color: rgba(0,255,65,.18); }
.dossier-lede p { color: var(--text); font-size: 16px; line-height: 1.62; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { position: relative; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--matrix-soft); border: 1px solid var(--matrix-border); }
.check-list li::before { border-radius: 50%; }
.sign-list li::before { background: var(--cyan-soft); border-color: var(--cyan-border); }
.deliver-list li::before { background: rgba(0,255,65,.16); }
.risk-list li::before { background: rgba(255,255,255,.04); border-color: var(--line2); }

.meta-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.meta-card h3 { font-size: 18px; }
.meta-card p, .meta-card li { font-size: 13.5px; }
.risk-card { border-color: rgba(255,255,255,.12); }
.risk-card .dossier-id span:last-child { color: var(--muted); }

.package-card .chip.amber { font-size: 11px; }

.related-cases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.related-case-card h3 { font-size: 17px; }
.related-case-card .muted { font-size: 12.5px; }
.related-metric { font-family: var(--mono); font-size: 11.5px; color: #b7ffcb; background: rgba(0,255,65,.05); border: 1px solid rgba(0,255,65,.18); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }

@media (max-width: 640px) {
  .hero-family-cta .btn { width: 100%; }
  .dossier-lede p { font-size: 15px; }
}

/* SMART+ noir hero v2 — Мафиозный Пятигорск: город cover-фон + пара aspect-ratio */
.hero-noir{position:relative;width:100%;min-height:clamp(560px,92vh,900px);display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#04050a}
.noir-stage{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 42%;background-repeat:no-repeat;background-color:#04050a;will-change:transform;transform:scale(1.04)}
.noir-couple-wrap{position:absolute;right:3%;bottom:0;height:90%;width:auto;z-index:2;display:flex;align-items:flex-end;will-change:transform;pointer-events:none}
.noir-couple{height:100%;width:auto;max-width:40vw;object-fit:contain;display:block;filter:saturate(.92) contrast(1.06) brightness(1.02) drop-shadow(0 16px 34px rgba(0,0,0,.55))}
.hero-noir.is-incomplete .noir-couple{opacity:.5}

.noir-rain{position:absolute;inset:-10% -10%;pointer-events:none;z-index:3;opacity:.5;mix-blend-mode:screen;
  background-image:repeating-linear-gradient(102deg, rgba(190,225,255,0) 0 2px, rgba(190,225,255,.16) 2px 3px, rgba(190,225,255,0) 3px 26px)}
.noir-rain--far{opacity:.26;animation:noirRain 0.95s linear infinite}
.noir-rain--near{background-image:repeating-linear-gradient(101deg, rgba(210,235,255,0) 0 1px, rgba(210,235,255,.22) 1px 2px, rgba(210,235,255,0) 2px 18px);opacity:.38;animation:noirRain 0.64s linear infinite}
@keyframes noirRain{from{background-position:0 0}to{background-position:-120px 760px}}

.noir-lightning{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;z-index:4;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(120% 80% at 50% -10%, rgba(220,235,255,.9), rgba(180,210,255,.25) 38%, transparent 70%)}
.noir-lightning--a{animation:noirFlash 13s ease-out infinite}
.noir-lightning--b{animation:noirFlash 17s ease-out infinite;animation-delay:6.5s;background:radial-gradient(120% 80% at 30% -10%, rgba(210,230,255,.8), transparent 64%)}
@keyframes noirFlash{0%,92%,100%{opacity:0}93%{opacity:.15}94%{opacity:.04}95%{opacity:.12}97%{opacity:0}}

.noir-dim{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,4,8,.94) 0%, rgba(3,4,8,.74) 30%, rgba(3,4,8,.30) 56%, rgba(3,4,8,.10) 72%, rgba(3,4,8,.34) 100%),
    linear-gradient(180deg, rgba(3,4,8,.5) 0%, transparent 26%, transparent 66%, rgba(3,4,8,.6) 100%)}

.noir-content{position:relative;z-index:6;max-width:720px;padding:clamp(40px,7vw,90px) 0}
.noir-title{font-size:clamp(34px,5vw,58px);line-height:1.05;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.noir-lead{max-width:600px;color:#cdd6e3;font-size:clamp(15px,1.55vw,18px);text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero-noir .overline{color:rgba(0,255,65,.82)}
.hero-noir .overline::before{background:var(--matrix)}
.hero-noir .actions{margin-top:22px}
.hero-noir .status-badge{background:rgba(3,4,8,.55);backdrop-filter:blur(6px)}

.noir-placeholder{margin-top:22px;max-width:640px;padding:16px 18px;border:1px solid rgba(0,255,65,.28);border-radius:14px;background:rgba(3,4,8,.62);backdrop-filter:blur(8px)}
.noir-ph-title{font-weight:750;color:#fff;margin-bottom:8px}
.noir-ph-list{margin:0 0 8px;padding-left:18px;color:#cdd6e3;font-size:13.5px;line-height:1.6}
.noir-ph-list code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px}
.noir-ph-hint{margin:0;color:#9aa3b2;font-size:12.5px}
.noir-ph-hint code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px}

@media (max-width:980px){
  .noir-couple-wrap{right:1%;height:84%}
  .noir-couple{max-width:46vw}
  .noir-content{max-width:100%}
}
@media (max-width:640px){
  .hero-noir{min-height:clamp(520px,86vh,760px)}
  .noir-stage{background-position:60% 42%}
  .noir-couple-wrap{right:0;height:72%}
  .noir-couple{max-width:72vw;opacity:.95}
  .noir-dim{background:linear-gradient(180deg, rgba(3,4,8,.92) 0%, rgba(3,4,8,.6) 42%, rgba(3,4,8,.18) 60%, rgba(3,4,8,.55) 100%)}
  .noir-content{padding:34px 0}
  .noir-title{font-size:clamp(30px,8vw,44px)}
  .noir-rain--near{opacity:.3}
}
@media (prefers-reduced-motion:reduce){
  .noir-rain,.noir-lightning{animation:none!important;opacity:.16}
  .noir-lightning{display:none}
  .noir-stage{transform:none!important}
  .noir-couple-wrap{transform:none!important}
}
/* SMART+ noir tune v3 - couple ground + family CTA highlight (late cascade over noir v2) */
.noir-couple-wrap{right:8%;bottom:-7%}
@media (max-width:980px){.noir-couple-wrap{right:6%;bottom:-4%}}
@media (max-width:640px){.noir-couple-wrap{right:4%;bottom:-2%}}

.hero-family-cta{margin-top:22px}
.hero-family-cta .btn{
  position:relative;
  min-height:48px;
  padding:13px 24px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  color:#eafff0;
  background:linear-gradient(180deg,rgba(0,255,65,.10),rgba(0,255,65,.04));
  border:1px solid rgba(0,255,65,.42);
  box-shadow:0 0 0 1px rgba(0,255,65,.06),0 10px 30px rgba(0,0,0,.35),0 0 22px rgba(0,255,65,.12);
}
.hero-family-cta .btn:hover{
  background:linear-gradient(180deg,rgba(0,255,65,.18),rgba(0,255,65,.08));
  border-color:rgba(0,255,65,.62);
  box-shadow:0 0 0 1px rgba(0,255,65,.10),0 14px 36px rgba(0,0,0,.40),0 0 30px rgba(0,255,65,.22);
  color:#ffffff;
  transform:translateY(-1px);
}
.hero-family-cta .ext-arrow{opacity:1;font-size:1.05em;margin-left:4px}
/* SMART+ logo tune v4 - larger S inside brand-mark frame (late cascade) */
.brand-mark{
  font-size:19px;
  line-height:1;
  letter-spacing:-.03em;
  padding:0;
}
/* если глиф "S+" упрётся в стенки рамки на каком-то экране - чуть расширить контейнер: */
/* .brand-mark{width:38px;height:38px;} */
/* SMART+ noir hero copy tune v5 */
.noir-title .noir-quote-line{display:block;font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.noir-title .noir-signature{display:block;margin-top:14px;font-family:var(--mono);font-size:clamp(12px,1.2vw,14px);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,255,65,.82);text-shadow:0 0 14px rgba(0,255,65,.18)}
.noir-lead{max-width:620px;color:#cdd6e3;font-size:clamp(15px,1.55vw,18px);line-height:1.62;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero-noir .actions .btn-accent{min-height:50px;padding:14px 26px;font-size:15px;letter-spacing:.01em}
@media (max-width:640px){.noir-title .noir-quote-line{font-size:clamp(28px,7.5vw,42px)}.noir-title .noir-signature{margin-top:10px;font-size:11px;letter-spacing:.06em}.hero-noir .actions .btn-accent{width:100%}}
/* SMART+ Level 2B - cases carousel + relation tags */
.container--wide{max-width:1280px}

.cases-carousel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.cases-carousel .case-card-v2{display:flex;flex-direction:column;height:100%}

.case-card-v2{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.case-card-v2:hover{transform:translateY(-3px);border-color:rgba(0,255,65,.28);box-shadow:0 18px 45px rgba(0,0,0,.4)}

.case-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.case-title{font-size:20px;margin-bottom:4px;color:#fff}
.case-subtitle{font-family:var(--mono);font-size:12px;color:rgba(0,255,65,.82);letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
.case-client{font-size:12.5px;margin-bottom:12px}
.case-summary{font-size:14px;line-height:1.55;color:#cdd6e3;margin-bottom:14px}

.relation-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
.relation-author{color:#a5f3fc;background:var(--cyan-soft);border-color:var(--cyan-border)}
.relation-client{color:#b7ffcb;background:var(--matrix-soft);border-color:var(--matrix-border)}

.case-focus,.case-competencies{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.case-focus-label,.case-competencies-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.case-focus-text{font-size:13.5px;color:#cdd6e3;margin:0;line-height:1.55}

.case-evidence-block{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.case-evidence-block summary{cursor:pointer;font-weight:700;color:#fff;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.case-evidence-block summary::-webkit-details-marker{display:none}
.case-evidence-block summary::after{content:"+";color:var(--matrix);font-family:var(--mono);font-size:16px}
.case-evidence-block[open] summary::after{content:"–"}
.case-evidence-list{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.55}
.case-evidence-list li{margin-bottom:4px}

.case-actions{margin-top:16px}
.case-actions .btn{width:100%;justify-content:center}

@media (max-width:980px){
    .cases-carousel{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
    .cases-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:4px 2px 14px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;scrollbar-width:thin}
    .cases-carousel .case-card-v2{flex:0 0 82%;min-width:280px;max-width:340px;scroll-snap-align:start}
    .cases-carousel::-webkit-scrollbar{height:6px}
    .cases-carousel::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
    .cases-carousel::-webkit-scrollbar-thumb{background:rgba(0,255,65,.28);border-radius:999px}
}
/* SMART+ burger nav v1 */
.nav-toggle{display:none;position:relative;z-index:130;width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle-box{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-toggle-line{display:block;width:20px;height:2px;border-radius:2px;background:var(--matrix);transition:transform .25s ease,opacity .25s ease}
.header.nav-open .nav-toggle-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header.nav-open .nav-toggle-line:nth-child(2){opacity:0}
.header.nav-open .nav-toggle-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-locked{overflow:hidden}
.nav-cta{margin-left:6px}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .header .container{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;min-height:64px}
  .nav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(320px,86vw);flex-direction:column;align-items:stretch;gap:4px;padding:86px 22px 28px;background:rgba(3,4,7,.97);backdrop-filter:blur(16px);border-left:1px solid var(--line2);transform:translateX(102%);transition:transform .3s ease;z-index:120;overflow-y:auto}
  .header.nav-open .nav{transform:none}
  .nav a{padding:12px 14px;border-radius:12px;font-size:16px;color:var(--text)}
  .nav a:hover,.nav a[aria-current="page"]{background:rgba(0,255,65,.08);color:#fff}
  .nav-cta{margin:14px 0 0;justify-content:center}
}
/* SMART+ S1 - Созвездие семейного бизнеса */
.hero-constellation{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#02030a;isolation:isolate}
.const-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;animation:constBgIn 2s ease-out forwards}
.const-bg--fallback{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 30% 40%, #0a0f1f 0%, #02030a 70%)}
.const-dim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,3,10,.4) 0%, transparent 30%, transparent 60%, rgba(2,3,10,.85) 100%),
    linear-gradient(0deg, rgba(2,3,10,.7) 0%, transparent 40%)}
.const-content{position:relative;z-index:2;text-align:center;padding:40px 20px;max-width:900px}
.const-overline{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,236,227,.6);margin-bottom:32px;opacity:0;animation:constFade 1s ease-out 0.3s forwards}

.const-brand{width:min(82vw, 640px);margin:0 auto 24px;aspect-ratio:3/1}
.const-brand svg{width:100%;height:100%;display:block}
.const-star{fill:#fff;opacity:0;animation:constStarIn 0.8s ease-out forwards, constTwinkle 3s ease-in-out infinite}
.const-star--dim{fill:rgba(255,255,255,.45);r:0.9}

.const-subtitle{font-family:var(--display, 'Playfair Display', Georgia, serif);font-size:clamp(14px,1.6vw,18px);letter-spacing:.42em;color:#D4AF37;margin:20px 0 8px;opacity:0;animation:constFade 1s ease-out 5.2s forwards}
.const-services{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(240,236,227,.55);margin-bottom:36px;opacity:0;animation:constFade 1s ease-out 5.6s forwards}

.const-enter{position:relative;display:inline-flex;align-items:center;justify-content:center;width:280px;height:56px;margin:8px 0 14px;text-decoration:none;color:#F0ECE3;font-family:var(--display, 'Playfair Display', Georgia, serif);font-size:15px;letter-spacing:.22em;opacity:0;animation:constFade 0.6s ease-out 6.6s forwards;transition:color .25s ease}
.const-enter-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.const-btn-star{fill:#D4AF37;opacity:0;animation:constBtnStarIn 0.5s ease-out forwards}
.const-enter-label{position:relative;z-index:1}
.const-enter:hover{color:#D4AF37}
.const-enter:hover .const-btn-star{filter:drop-shadow(0 0 4px rgba(212,175,55,.6))}
.const-enter:focus-visible{outline:2px solid #D4AF37;outline-offset:6px;border-radius:4px}

.const-acquaintance{display:inline-block;color:rgba(240,236,227,.55);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-decoration:none;padding:8px 14px;border-bottom:1px solid rgba(212,175,55,.25);transition:color .2s, border-color .2s;opacity:0;animation:constFade 0.6s ease-out 7.2s forwards}
.const-acquaintance:hover{color:#D4AF37;border-color:rgba(212,175,55,.6)}

/* Секция «Слова основателей» */
.founders-words{background:#05060a;border-top:1px solid rgba(212,175,55,.12);padding-top:80px;padding-bottom:80px}
.founders-quote{font-family:var(--display, 'Playfair Display', Georgia, serif);font-size:clamp(28px,4.2vw,48px);line-height:1.15;text-align:center;max-width:820px;margin:24px auto 28px;color:#F0ECE3;font-weight:400;letter-spacing:-.01em}
.founders-quote .term{color:#D4AF37;font-style:italic}
.founders-lead{max-width:680px;margin:0 auto 24px;text-align:center;color:rgba(240,236,227,.75);font-size:clamp(15px,1.5vw,17px);line-height:1.65}
.founders-sign{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#D4AF37;text-align:center;margin-bottom:28px}
.founders-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Keyframes */
@keyframes constBgIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes constStarIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes constBtnStarIn{from{opacity:0}to{opacity:1}}
@keyframes constFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes constTwinkle{0%,100%{opacity:1}50%{opacity:.55}}

/* Финальное состояние: сценарий завершён или повторный визит */
.hero-constellation.is-complete .const-bg,
.hero-constellation.is-complete .const-overline,
.hero-constellation.is-complete .const-star,
.hero-constellation.is-complete .const-btn-star,
.hero-constellation.is-complete .const-subtitle,
.hero-constellation.is-complete .const-services,
.hero-constellation.is-complete .const-enter,
.hero-constellation.is-complete .const-acquaintance{animation:none;opacity:1;transform:none}

/* prefers-reduced-motion: финальное состояние сразу */
@media (prefers-reduced-motion: reduce){
  .const-bg,.const-overline,.const-star,.const-btn-star,.const-subtitle,.const-services,.const-enter,.const-acquaintance{animation:none!important;opacity:1!important;transform:none!important}
}

/* JS-off fallback: показываем всё сразу */
html.no-js .const-bg,
html.no-js .const-overline,
html.no-js .const-star,
html.no-js .const-btn-star,
html.no-js .const-subtitle,
html.no-js .const-services,
html.no-js .const-enter,
html.no-js .const-acquaintance{animation:none;opacity:1;transform:none}

@media (max-width: 640px){
  .hero-constellation{min-height:90vh}
  .const-brand{width:92vw}
  .const-subtitle{letter-spacing:.28em}
  .const-enter{width:100%;max-width:320px}
  .founders-quote{font-size:clamp(24px,7vw,34px)}
  .founders-actions{flex-direction:column;align-items:stretch}
  .founders-actions .btn{width:100%}
}