/**
 * CAD17 — Blueprint / КБ theme
 * Инженерная деловая эстетика: калька, сетка, сдержанный свет
 */

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

:root {
    --bp-paper: #1c3a5c;
    --bp-paper-light: #244a72;
    --bp-paper-panel: #263f60;
    --bp-paper-elevated: #2e5278;
    --bp-ink: #eef4fb;
    --bp-ink-muted: rgba(238, 244, 251, 0.72);
    --bp-ink-dim: rgba(238, 244, 251, 0.48);
    --bp-line: rgba(130, 175, 220, 0.42);
    --bp-line-bright: rgba(180, 210, 240, 0.78);
    --bp-grid: rgba(120, 165, 210, 0.06);
    --bp-grid-major: rgba(120, 165, 210, 0.11);
    --bp-accent: #358dff;
    --bp-accent-glow: rgba(53, 141, 255, 0.12);
    --bp-frame: rgba(130, 175, 220, 0.26);
    --bp-rim: rgba(255, 255, 255, 0.1);
    --bp-rim-soft: rgba(255, 255, 255, 0.05);
    --bp-shadow-tight: rgba(8, 22, 42, 0.22);
    --bp-shadow-deep: rgba(6, 16, 34, 0.38);
    --bp-lift:
        inset 0 1px 0 var(--bp-rim),
        0 1px 3px var(--bp-shadow-tight),
        0 8px 24px var(--bp-shadow-deep);
    --bp-lift-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 12px rgba(0, 25, 55, 0.18),
        0 16px 36px rgba(0, 30, 65, 0.22);
    --bp-glass: rgba(32, 62, 96, 0.78);
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
    --radius-tech: 3px;
}

/* ==================== SCOPE: global blueprint theme ==================== */
body {
    color: var(--bp-ink);
    --primary: #a8d4ff;
    --secondary: #f0f7ff;
    --gray-900: #f2f8ff;
    --gray-800: #d8e8f8;
    --gray-700: #b8cfe8;
    --gray-600: #9bb8d4;
    --gray-500: #8aa8c4;
    --gray-400: #7294b4;
    --gray-300: rgba(150, 205, 255, 0.26);
    --gray-200: rgba(150, 205, 255, 0.16);
    --gray-100: rgba(150, 205, 255, 0.1);
    --gray-50: rgba(32, 64, 98, 0.55);
    --primary-bg: rgba(0, 76, 174, 0.22);
    --primary-bg2: rgba(0, 76, 174, 0.32);
    --surface: #264868;
    --surface-raised: #2e5278;
    --surface-muted: #223a58;
    --surface-glass: #2a4f78;
    --surface-glass-strong: #2e5278;
    --border-subtle: rgba(150, 205, 255, 0.18);
    --border-glass: rgba(200, 230, 255, 0.22);
    --grid-line: var(--bp-grid);
    --shadow-sm: 0 2px 8px var(--bp-shadow-tight), inset 0 1px 0 var(--bp-rim-soft);
    --shadow: var(--bp-lift);
    --shadow-md: var(--bp-lift-hover);
    --glow-soft: 0 0 24px var(--bp-accent-glow);
    --glow-primary: 0 0 32px rgba(0, 76, 174, 0.14);
}

body .ambient-bg {
    background: linear-gradient(180deg, #1a3352 0%, #1f3f62 50%, #23486e 100%);
}

body .ambient-bg::before {
    background-image:
        linear-gradient(var(--bp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
        linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
    mask-image: radial-gradient(ellipse 110% 80% at 50% 10%, black 20%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 10%, black 20%, transparent 92%);
    opacity: 0.85;
}

body .ambient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 18%, rgba(6, 16, 34, 0.2) 100%);
}

body .ambient-bg__orb {
    display: none;
}

/* ==================== HEADER ==================== */
body .header {
    background: var(--bp-glass);
    border-bottom: 1px solid var(--bp-frame);
    box-shadow:
        inset 0 1px 0 var(--bp-rim),
        0 4px 28px var(--bp-shadow-tight),
        0 1px 0 rgba(150, 205, 255, 0.06);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

body .header::after {
    background: linear-gradient(90deg, transparent, var(--bp-line-bright), transparent);
    opacity: 0.55;
    height: 1px;
}

body .header.scrolled {
    background: rgba(36, 68, 104, 0.94);
    box-shadow:
        inset 0 1px 0 var(--bp-rim),
        0 6px 24px var(--bp-shadow-deep);
}

body .logo-icon {
    background: linear-gradient(180deg, #1a5cb0 0%, #004cae 100%);
    border: 1px solid rgba(150, 190, 230, 0.28);
    border-radius: var(--radius-tech);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 40, 90, 0.25);
}

body .logo-name {
    color: var(--bp-ink);
    letter-spacing: 0.02em;
    text-shadow: none;
}

body .logo-tag {
    color: var(--bp-ink-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body .nav-link {
    color: var(--bp-ink-muted);
    font-size: 13px;
    letter-spacing: 0.02em;
    border-radius: var(--radius-tech);
}

body .nav-link:hover,
body .nav-link.active {
    color: var(--bp-ink);
    background: rgba(110, 196, 255, 0.08);
}

body .nav-link.active::after {
    width: 100%;
    height: 1px;
    bottom: 0;
    border-radius: 0;
    background: var(--bp-line-bright);
}

body .btn--primary {
    border-radius: var(--radius-tech);
    background: linear-gradient(180deg, #0058c4 0%, #004cae 100%);
    border: 1px solid rgba(0, 68, 157, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 40, 90, 0.28);
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
}

body .btn--primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 40, 90, 0.32);
    transform: translateY(-1px);
}

body .btn--outline {
    border: 1px solid rgba(150, 190, 230, 0.42);
    color: var(--bp-ink);
    background: rgba(36, 68, 104, 0.55);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .btn--outline:hover {
    border-color: rgba(150, 190, 230, 0.4);
    background: rgba(0, 76, 174, 0.16);
    color: var(--bp-ink);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

/* ==================== HERO ==================== */
body .hero {
    padding: calc(var(--header-height) + 56px) 0 88px;
}

body .hero::before {
    display: none;
}

body .hero::after {
    display: none;
}

body .hero__badge,
body .hero__title,
body .hero__desc,
body .hero__actions,
body .hero__stats,
body .hero__visual {
    animation: revealUp 0.7s ease both;
}

body .hero__title { animation-delay: 0.1s; }
body .hero__desc { animation-delay: 0.2s; }
body .hero__actions { animation-delay: 0.3s; }
body .hero__stats { animation-delay: 0.4s; }
body .hero__visual { animation-delay: 0.35s; }

body .hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    color: var(--bp-ink-muted);
    background: rgba(30, 58, 90, 0.75);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
    -webkit-font-smoothing: antialiased;
}

body .hero__badge i {
    color: var(--bp-line-bright);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

body .hero__title {
    color: var(--bp-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}

body .hero__title span {
    color: var(--bp-accent);
    position: relative;
}

body .hero__title span::after {
    display: none;
}

body .hero__desc {
    color: var(--bp-ink-muted);
    max-width: 540px;
    line-height: 1.75;
}

body .hero__stats {
    background: linear-gradient(165deg, #2e5278 0%, #264868 100%);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 20px 28px;
    gap: 28px;
}

body .hero__stat-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--bp-ink);
}

body .hero__stat-label {
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--bp-ink-dim);
}

/* ==================== BLUEPRINT DRAWING PANEL (hero visual) ==================== */
body .hero__visual {
    perspective: none;
}

.bp-frame {
    --bp-cycle: 11s;
    position: relative;
    background:
        linear-gradient(var(--bp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px),
        linear-gradient(180deg, rgba(38, 70, 108, 0.97) 0%, rgba(28, 56, 88, 0.99) 100%);
    background-size: 12px 12px, 12px 12px, 100% 100%;
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    padding: 28px 24px 24px;
    min-height: 360px;
    box-shadow: var(--bp-lift);
    transform: none;
    animation: none;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.bp-frame::before,
.bp-frame::after,
.bp-frame__corner-tl,
.bp-frame__corner-br {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--bp-line-bright);
    border-style: solid;
    pointer-events: none;
}

.bp-frame::before {
    top: 10px;
    left: 10px;
    border-width: 2px 0 0 2px;
}

.bp-frame::after {
    bottom: 10px;
    right: 10px;
    border-width: 0 2px 2px 0;
}

.bp-frame__corner-tl {
    top: 10px;
    right: 10px;
    border-width: 2px 2px 0 0;
}

.bp-frame__corner-br {
    bottom: 10px;
    left: 10px;
    border-width: 0 0 2px 2px;
}

@keyframes bpFrameFloat {
    0%, 100% { transform: none; }
}

body .hero__visual:hover .bp-frame {
    transform: none;
    border-color: rgba(150, 190, 230, 0.38);
    box-shadow: var(--bp-lift-hover);
}

.bp-stage {
    position: relative;
    min-height: 200px;
    margin-bottom: 14px;
    overflow: hidden;
}

.bp-upload-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed var(--bp-frame);
    background: rgba(28, 58, 92, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: bpUploadCycle var(--bp-cycle) linear infinite;
    pointer-events: none;
}

.bp-upload-flash i {
    font-size: 28px;
    color: var(--bp-ink-muted);
    animation: none;
}

.bp-upload-flash p {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--bp-ink-dim);
    text-transform: none;
}

@keyframes bpUploadCycle {
    0%, 8% { opacity: 1; visibility: visible; }
    13%, 87% { opacity: 0; visibility: hidden; }
    92%, 100% { opacity: 1; visibility: visible; }
}

@keyframes bpCrosshair {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

.bp-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(53, 141, 255, 0.55), transparent);
    box-shadow: none;
    opacity: 0;
    animation: bpScanCycle var(--bp-cycle) linear infinite;
    pointer-events: none;
}

@keyframes bpScanCycle {
    0%, 10% { top: 8%; opacity: 0; }
    12% { opacity: 1; }
    24% { top: 88%; opacity: 0; }
    48%, 51% { top: 8%; opacity: 0; }
    53% { opacity: 1; }
    65% { top: 88%; opacity: 0; }
    100% { top: 8%; opacity: 0; }
}

.bp-drawing {
    width: 100%;
    height: auto;
    display: block;
    margin: 8px 0 16px;
}

.bp-drawing line,
.bp-drawing path,
.bp-drawing circle,
.bp-drawing rect {
    vector-effect: non-scaling-stroke;
}

.bp-drawing .bp-stroke {
    fill: none;
    stroke: var(--bp-line-bright);
    stroke-width: 1.5;
}

.bp-drawing .bp-stroke-dim {
    fill: none;
    stroke: var(--bp-line);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.bp-drawing .bp-fill {
    fill: rgba(110, 196, 255, 0.06);
    stroke: var(--bp-line-bright);
    stroke-width: 1.2;
}

.bp-part {
    opacity: 0;
    transform-origin: center bottom;
    transform: scaleY(0.15);
    animation: bpPart1 var(--bp-cycle) linear infinite;
}

.bp-part--1 { animation-name: bpPart1; }
.bp-part--2 { animation-name: bpPart2; }
.bp-part--3 { animation-name: bpPart3; }
.bp-part--4 { animation-name: bpPart4; }
.bp-part--5 { animation-name: bpPart5; }

@keyframes bpPart1 {
    0%, 14% { opacity: 0; transform: scaleY(0.15); }
    17%, 78% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.15); }
}

@keyframes bpPart2 {
    0%, 16% { opacity: 0; transform: scaleY(0.15); }
    19%, 78% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.15); }
}

@keyframes bpPart3 {
    0%, 18% { opacity: 0; transform: scaleY(0.15); }
    21%, 78% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.15); }
}

@keyframes bpPart4 {
    0%, 20% { opacity: 0; transform: scaleY(0.15); }
    23%, 78% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.15); }
}

@keyframes bpPart5 {
    0%, 22% { opacity: 0; transform: scaleY(0.15); }
    25%, 78% { opacity: 1; transform: scaleY(1); }
    88%, 100% { opacity: 0; transform: scaleY(0.15); }
}

.bp-draw {
    stroke-dasharray: var(--bp-d, 100);
    stroke-dashoffset: var(--bp-d, 100);
    animation: bpLineCycle var(--bp-cycle) linear infinite;
}

@keyframes bpLineCycle {
    0%, 28% { stroke-dashoffset: var(--bp-d, 100); }
    34%, 76% { stroke-dashoffset: 0; }
    88%, 100% { stroke-dashoffset: var(--bp-d, 100); }
}

.bp-fade {
    opacity: 0;
    animation: bpFadeCycle var(--bp-cycle) linear infinite;
}

.bp-dim--v.bp-fade { animation-name: bpFadeCycleLate; }

.bp-title-block.bp-fade { animation-name: bpFadeCycleTitle; }

@keyframes bpFadeCycle {
    0%, 46% { opacity: 0; }
    52%, 76% { opacity: 1; }
    88%, 100% { opacity: 0; }
}

@keyframes bpFadeCycleLate {
    0%, 48% { opacity: 0; }
    54%, 76% { opacity: 1; }
    88%, 100% { opacity: 0; }
}

@keyframes bpFadeCycleTitle {
    0%, 50% { opacity: 0; transform: translateY(6px); }
    56%, 76% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(6px); }
}

.bp-title-block.bp-fade {
    animation: bpFadeCycleTitle var(--bp-cycle) linear infinite;
}

.bp-progress {
    height: 6px;
    background: rgba(110, 196, 255, 0.1);
    border: 1px solid var(--bp-frame);
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 12px;
}

.bp-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #2a6fc4, #358dff);
    box-shadow: none;
    animation: bpProgressCycle var(--bp-cycle) linear infinite;
}

@keyframes bpProgressCycle {
    0% { width: 0%; }
    10% { width: 18%; }
    45% { width: 100%; }
    78% { width: 100%; }
    90% { width: 0%; }
    100% { width: 0%; }
}

.bp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 26px;
}

.bp-tag {
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--bp-ink-muted);
    background: rgba(30, 58, 90, 0.65);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    opacity: 0;
    transform: translateY(4px);
    animation: bpTag1 var(--bp-cycle) linear infinite;
}

.bp-tag:nth-child(1) { animation-name: bpTag1; }
.bp-tag:nth-child(2) { animation-name: bpTag2; }
.bp-tag:nth-child(3) { animation-name: bpTag3; }
.bp-tag:nth-child(4) { animation-name: bpTag4; }

@keyframes bpTag1 {
    0%, 49% { opacity: 0; transform: translateY(4px); }
    53%, 76% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes bpTag2 {
    0%, 51% { opacity: 0; transform: translateY(4px); }
    55%, 76% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes bpTag3 {
    0%, 53% { opacity: 0; transform: translateY(4px); }
    57%, 76% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(4px); }
}

@keyframes bpTag4 {
    0%, 55% { opacity: 0; transform: translateY(4px); }
    59%, 76% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(4px); }
}

.bp-dim {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bp-ink-dim);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bp-dim--h {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.bp-dim--v {
    right: 18px;
    top: 42%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.bp-title-block {
    position: absolute;
    bottom: 14px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--bp-ink-dim);
    border: 1px solid var(--bp-frame);
    padding: 8px 10px;
    background: rgba(6, 18, 36, 0.85);
    max-width: 160px;
}

.bp-title-block strong {
    display: block;
    color: var(--bp-ink);
    font-size: 10px;
    margin-bottom: 2px;
}

.bp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bp-ink-muted);
    letter-spacing: 0.02em;
    text-transform: none;
    margin-top: 4px;
}

.bp-status__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bp-line-bright);
    box-shadow: none;
    flex-shrink: 0;
    animation: none;
}

.bp-status__text {
    position: relative;
    display: inline-block;
    min-width: 15em;
    height: 1.3em;
}

.bp-status__msg {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
}

.bp-status__msg:nth-child(1) { animation: bpMsg1 var(--bp-cycle) linear infinite; }
.bp-status__msg:nth-child(2) { animation: bpMsg2 var(--bp-cycle) linear infinite; }
.bp-status__msg:nth-child(3) { animation: bpMsg3 var(--bp-cycle) linear infinite; }
.bp-status__msg:nth-child(4) { animation: bpMsg4 var(--bp-cycle) linear infinite; }

@keyframes bpMsg1 {
    0%, 7% { opacity: 1; }
    10%, 100% { opacity: 0; }
}

@keyframes bpMsg2 {
    0%, 12% { opacity: 0; }
    15%, 42% { opacity: 1; }
    45%, 100% { opacity: 0; }
}

@keyframes bpMsg3 {
    0%, 44% { opacity: 0; }
    47%, 74% { opacity: 1; }
    77%, 100% { opacity: 0; }
}

@keyframes bpMsg4 {
    0%, 74% { opacity: 0; }
    77%, 86% { opacity: 1; }
    89%, 100% { opacity: 0; }
}

@keyframes bpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

body .hero__mockup {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bp-frame,
    .bp-upload-flash,
    .bp-scan,
    .bp-part,
    .bp-draw,
    .bp-fade,
    .bp-progress__bar,
    .bp-tag,
    .bp-status__msg,
    body .hero::after,
    body .hero__badge,
    body .hero__title,
    body .hero__desc,
    body .hero__actions,
    body .hero__stats,
    body .hero__visual {
        animation: none !important;
    }

    .bp-upload-flash { display: none; }
    .bp-part,
    .bp-draw,
    .bp-fade,
    .bp-tag {
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }

    .bp-progress__bar { width: 100%; }
    .bp-status__msg { position: static; opacity: 0; }
    .bp-status__msg:first-child { opacity: 1; }
}

/* ==================== SECTIONS & CARDS ==================== */
body .section {
    border-top: 1px solid rgba(110, 196, 255, 0.06);
}

body .section--gray,
body .section--approach {
    background: #223a58;
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .section__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--bp-accent);
    background: rgba(0, 76, 174, 0.22);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body .section__title {
    color: var(--bp-ink);
}

body .section__subtitle {
    color: var(--bp-ink-muted);
}

body .card:not(.bp-frame)::after {
    display: none;
}

body .card.case-card::before,
body .card.format-card::before,
body .card.feature-card::before,
body .card.audience-card::before,
body .card.pricing-card::before,
body .card.home-promo__card::before {
    display: none;
}

body .card {
    background: linear-gradient(168deg, #2e5278 0%, #264868 100%);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
}

body .card::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bp-rim), transparent);
    pointer-events: none;
    opacity: 0.45;
}

body .card::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--bp-line);
    border-left: 1px solid var(--bp-line);
    pointer-events: none;
    opacity: 0.4;
}

body .card:hover {
    border-color: rgba(150, 190, 230, 0.38);
    transform: translateY(-2px);
    box-shadow: var(--bp-lift-hover);
}

body .card h3,
body .approach-card__title,
body .feature-card h3 {
    color: var(--bp-ink);
}

body .card p,
body .approach-card__text {
    color: var(--bp-ink-muted);
}

body .approach-card__step {
    font-family: var(--font-mono);
    color: var(--bp-accent);
    opacity: 0.7;
}

body .approach-card__icon {
    border-radius: var(--radius-tech);
    border: 1px solid var(--bp-frame);
    box-shadow:
        inset 0 1px 0 var(--bp-rim-soft),
        0 4px 16px var(--bp-shadow-tight);
}

/* ==================== KB17 STRIP ==================== */
body .kb17-footer-strip {
    background: rgba(0, 76, 174, 0.12);
    border-top: 1px solid var(--bp-frame);
    border-bottom: 1px solid var(--bp-frame);
}

body .kb17-footer-strip__inner {
    color: var(--bp-ink-muted);
}

body .kb17-footer-strip__brand {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--bp-ink);
}

/* ==================== CTA & PRICING ==================== */
body .cta-section {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(160, 215, 255, 0.15) 0%, transparent 55%),
        linear-gradient(135deg, rgba(0, 76, 174, 0.32) 0%, rgba(28, 58, 92, 0.85) 100%);
    border-top: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .pricing-card--featured {
    border-color: var(--bp-line-bright);
    box-shadow: var(--bp-lift-hover);
}

body .pricing-card {
    border-radius: var(--radius-tech);
    border-color: var(--bp-frame);
    box-shadow: var(--bp-lift);
}

body .cta-section h2,
body .cta-section p {
    color: var(--bp-ink);
}

/* ==================== FOOTER ==================== */
body .footer {
    background: linear-gradient(180deg, #183050 0%, #122640 100%);
    border-top: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .footer::before {
    background:
        linear-gradient(var(--bp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0;
}

/* ==================== FORMS & WIZARD (new-order, login) ==================== */
body .wizard-step,
body .auth-card,
body .order-card {
    background: linear-gradient(168deg, var(--bp-paper-elevated) 0%, var(--bp-paper-panel) 100%);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
}

body .input,
body textarea,
body select {
    background: rgba(36, 72, 112, 0.55);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    color: var(--bp-ink);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft), inset 0 2px 6px rgba(4, 14, 32, 0.12);
}

body .input:focus,
body textarea:focus,
body select:focus {
    border-color: var(--bp-line);
    box-shadow: 0 0 0 2px var(--bp-accent-glow);
}

body .input::placeholder,
body textarea::placeholder {
    color: var(--bp-ink-dim);
}

body label,
body .form-label {
    color: var(--bp-ink-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ==================== DEEPSEEK / WIZARD CHAT ==================== */
body .wizard {
    background: linear-gradient(168deg, var(--bp-paper-elevated) 0%, var(--bp-paper-panel) 100%);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift-hover);
}

body .wizard__header {
    background: linear-gradient(90deg, rgba(0, 76, 174, 0.28) 0%, rgba(36, 72, 112, 0.5) 100%);
    border-bottom: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .wizard__messages {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160, 215, 255, 0.06) 0%, transparent 60%),
        rgba(28, 58, 92, 0.45);
}

body .wizard__msg--ai .wizard__msg-bubble {
    background: linear-gradient(165deg, rgba(48, 88, 132, 0.95) 0%, rgba(32, 68, 108, 0.98) 100%);
    border: 1px solid var(--bp-frame);
    color: var(--bp-ink);
    box-shadow:
        inset 0 1px 0 var(--bp-rim-soft),
        0 4px 16px var(--bp-shadow-tight);
}

body .wizard__msg--user .wizard__msg-bubble {
    background: linear-gradient(180deg, #2a7ae0 0%, #004cae 55%, #003d8a 100%);
    border: 1px solid rgba(180, 220, 255, 0.35);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 76, 174, 0.35);
}

body .wizard__input-area {
    background: rgba(32, 64, 98, 0.75);
    border-top: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .wizard__title { color: var(--bp-ink); }
body .wizard__status { color: var(--bp-ink-muted); }
body .wizard__messages::-webkit-scrollbar-thumb { background: var(--bp-frame); }
body .wizard__msg--user .wizard__msg-avatar {
    background: rgba(160, 215, 255, 0.18);
    color: var(--bp-accent);
    border: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}
body .wizard__typing span { background: var(--bp-accent); }
body .wizard__suggestion {
    background: rgba(36, 72, 112, 0.65);
    border-color: var(--bp-frame);
    color: var(--bp-ink-muted);
    border-radius: var(--radius-tech);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}
body .wizard__suggestion:hover {
    border-color: rgba(180, 220, 255, 0.45);
    color: var(--bp-accent);
    background: rgba(0, 76, 174, 0.25);
}
body .wizard__upload-bar { border-top-color: var(--bp-frame); }
body .wizard__upload-toggle { color: var(--bp-ink-muted); }
body .wizard__upload-toggle:hover {
    background: rgba(160, 215, 255, 0.1);
    color: var(--bp-accent);
}
body .wizard__summary-card {
    background: var(--bp-paper-elevated);
    border: 1px solid var(--bp-frame);
    color: var(--bp-ink);
    box-shadow: var(--bp-lift);
}
body .wizard__summary-title { color: var(--bp-ink); }
body .wizard__summary-sub { color: var(--bp-ink-muted); }
body .wizard__result-chip {
    background: rgba(36, 72, 112, 0.6);
    border-color: var(--bp-frame);
    color: var(--bp-ink-muted);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}
body .wizard__result-chip.checked {
    background: rgba(0, 76, 174, 0.28);
    border-color: var(--bp-line);
    color: var(--bp-accent);
}

body .order-chat__messages {
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(160, 215, 255, 0.07) 0%, transparent 55%),
        rgba(28, 58, 92, 0.5);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    padding: 12px;
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .order-chat__bubble--ai {
    background: linear-gradient(165deg, rgba(48, 88, 132, 0.95) 0%, rgba(32, 68, 108, 0.98) 100%);
    border: 1px solid var(--bp-frame);
    color: var(--bp-ink);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft), 0 3px 12px var(--bp-shadow-tight);
}

body .order-chat__bubble--other {
    background: linear-gradient(165deg, rgba(40, 76, 118, 0.9) 0%, rgba(32, 64, 98, 0.95) 100%);
    border: 1px solid var(--bp-frame);
    color: var(--bp-ink);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

body .order-chat__bubble--me {
    background: linear-gradient(180deg, #2a7ae0 0%, #004cae 55%, #003d8a 100%);
    border: 1px solid rgba(180, 220, 255, 0.35);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 12px rgba(0, 76, 174, 0.3);
}

body .order-chat__bubble--ai .order-chat__who {
    color: var(--bp-accent);
}

body .order-chat__bubble--typing {
    color: var(--bp-accent);
}

body .order-chat__time {
    color: var(--bp-ink-dim);
}

body .ai-mode-indicator {
    background: linear-gradient(90deg, rgba(0, 76, 174, 0.28) 0%, rgba(36, 72, 112, 0.4) 100%);
    border-color: var(--bp-frame);
    color: var(--bp-accent);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
    body .hero__stats {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px;
    }

    .bp-frame {
        min-height: 280px;
        padding: 20px 16px 28px;
    }

    .bp-title-block {
        font-size: 8px;
        max-width: 130px;
    }
}

/* ==================== UNIFIED: CABINET, ACCOUNT, APP PAGES ==================== */

.cabinet-page {
    background: transparent;
}

.cabinet__sidebar {
    background: var(--bp-paper-panel);
    border-right-color: var(--bp-frame);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cabinet__brand,
.cabinet__user,
.cabinet__footer {
    border-color: var(--bp-frame);
}

.cabinet__brand-title,
.cabinet__title,
.cabinet-kpi__value {
    color: var(--bp-ink);
}

.cabinet__brand-sub,
.cabinet__subtitle,
.cabinet-kpi__label {
    color: var(--bp-ink-muted);
}

.cabinet__user-name {
    color: var(--bp-ink);
}

.cabinet__user-role {
    color: var(--bp-ink-dim);
}

.cabinet__nav-section {
    color: var(--bp-ink-dim);
    text-transform: none;
    letter-spacing: 0.03em;
}

.cabinet-nav__item {
    border-radius: var(--radius-tech);
    color: var(--bp-ink-muted);
}

.cabinet-nav__item:hover {
    background: rgba(110, 196, 255, 0.08);
    color: var(--bp-ink);
}

.cabinet-nav__item.active {
    background: rgba(0, 76, 174, 0.22);
    color: var(--bp-accent);
}

.cabinet-nav__badge {
    background: rgba(110, 196, 255, 0.12);
    color: var(--bp-ink-muted);
}

.cabinet-kpi,
.cabinet-chart-card,
.cabinet-subtabs,
.cabinet-quick__card,
.admin-inwork-engineer,
.admin-inwork-timer,
.admin-inwork-comm__link,
.cabinet-bar-value {
    border-color: var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
}

.cabinet-kpi:hover,
.cabinet-quick__card:hover {
    border-color: rgba(150, 190, 230, 0.38);
    box-shadow: var(--bp-lift-hover);
}

.cabinet-chart-card__title,
.cabinet-quick__title {
    color: var(--bp-ink);
}

.cabinet-subtab {
    border-radius: var(--radius-tech);
    color: var(--bp-ink-muted);
}

.cabinet-subtab:hover {
    background: rgba(110, 196, 255, 0.08);
    color: var(--bp-ink);
}

.cabinet-subtab.active {
    background: linear-gradient(180deg, #0058c4 0%, #004cae 100%);
    color: #fff;
}

.admin-wizard-chat {
    border-color: var(--bp-frame);
    background: rgba(28, 58, 92, 0.45);
    border-radius: var(--radius-tech);
}

.admin-wizard-chat__toggle {
    color: var(--bp-ink);
}

.admin-wizard-chat__msg--user {
    background: var(--bp-paper-elevated);
    border-color: var(--bp-frame);
    color: var(--bp-ink);
}

.admin-wizard-chat__msg--ai {
    background: rgba(0, 76, 174, 0.18);
    border-color: var(--bp-frame);
}

.admin-wizard-chat__text {
    color: var(--bp-ink-muted);
}

/* Login */
.login-page {
    background: transparent;
}

.login-page::before {
    display: none;
}

.login-card {
    background: var(--bp-paper-elevated);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift);
}

.login-title {
    color: var(--bp-ink);
}

.login-subtitle,
.login-switch {
    color: var(--bp-ink-muted);
}

.login-switch a {
    color: var(--bp-accent);
}

/* Page shells — dashboard, заказ, about */
.page__header {
    background: linear-gradient(180deg, rgba(36, 68, 104, 0.45) 0%, transparent 100%);
    border-bottom-color: var(--bp-frame);
}

.page__header::before {
    opacity: 0.35;
}

.page__title,
.empty-state__title {
    color: var(--bp-ink);
}

.page__subtitle,
.empty-state__text {
    color: var(--bp-ink-muted);
}

.empty-state__icon {
    color: var(--bp-frame);
}

/* Tables & lists */
.admin-table th {
    background: rgba(28, 58, 92, 0.65);
    color: var(--bp-ink-muted);
    border-color: var(--bp-frame);
}

.admin-table td {
    border-color: var(--bp-frame);
    color: var(--bp-ink);
}

.admin-table tbody tr:hover {
    background: rgba(110, 196, 255, 0.06);
}

.result-item,
.file-item {
    background: var(--bp-paper-panel);
    border-color: var(--bp-frame);
    border-radius: var(--radius-tech);
}

.result-item:hover,
.file-item:hover {
    border-color: rgba(150, 190, 230, 0.38);
    background: var(--bp-paper-elevated);
}

/* Modals & toasts */
.modal {
    background: var(--bp-paper-elevated);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: var(--bp-lift-hover);
    color: var(--bp-ink);
}

.modal__title {
    color: var(--bp-ink);
}

.modal__close:hover {
    background: rgba(110, 196, 255, 0.1);
    color: var(--bp-ink);
}

.toast {
    background: var(--bp-paper-elevated);
    border-color: var(--bp-frame);
    color: var(--bp-ink);
    box-shadow: var(--bp-lift);
}

/* Marketing landings & case cards */
.about-hero {
    background: transparent;
    color: var(--bp-ink);
    border-bottom: 1px solid var(--bp-frame);
}

.about-hero::before,
.about-hero::after {
    display: none;
}

.about-hero__title {
    color: var(--bp-ink);
}

.about-hero__desc {
    color: var(--bp-ink-muted);
}

.marketing-cta {
    background: #264868;
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--bp-lift);
}

.marketing-cta__title {
    color: var(--bp-ink);
}

.marketing-cta__text {
    color: var(--bp-ink-muted);
}

.case-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
}

.case-card__icon--primary {
    color: #9ec8ff;
    background: rgba(53, 141, 255, 0.2);
    border-color: rgba(130, 175, 220, 0.4);
}

.case-card__icon--success {
    color: #86efac;
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.35);
}

.case-card__icon--warning {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.35);
}

.case-card__meta {
    color: var(--bp-ink-muted);
}

.case-card__row,
.case-card__time {
    color: var(--bp-ink-muted);
}

.case-card__industry {
    color: rgba(238, 244, 251, 0.88);
    font-weight: 500;
}

.case-card__row > span:not(.case-card__label) {
    color: var(--bp-ink);
}

.case-card__label {
    color: var(--bp-ink-muted);
    text-transform: none;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.case-card__price {
    color: #9ec8ff;
}

.case-card__footer {
    border-top-color: var(--bp-frame);
}

.case-card__landing {
    color: var(--bp-accent);
}

.pricing-card__price {
    color: var(--bp-ink);
}

.pricing-card__price span,
.pricing-card__period,
.pricing-card__desc {
    color: var(--bp-ink-muted);
}

.home-promo__icon,
.blog-card__more,
.blog-back {
    color: #9ec8ff;
}

/* Format comparison cards (home) */
.section--formats {
    background: #223a58;
}

.format-card__title {
    color: var(--bp-ink);
}

.format-card__desc,
.format-card__intro p {
    color: var(--bp-ink-muted);
}

.format-card__metric {
    background: rgba(18, 38, 62, 0.85);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
}

.format-card__metric--pro {
    background: rgba(18, 38, 62, 0.85);
    border-color: var(--bp-frame);
}

.format-card__metric-value,
.format-card--pro .format-card__metric-value {
    color: var(--bp-ink);
    font-size: 32px;
}

.format-card__metric-label {
    color: var(--bp-ink-muted);
}

.format-card__features li {
    color: var(--bp-ink-muted);
}

.format-card__features li i {
    color: #86efac;
}

.format-card__icon--fast {
    background: rgba(16, 185, 129, 0.16);
    color: #86efac;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-tech);
    box-shadow: none;
}

.format-card__icon--pro {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bp-ink);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
    box-shadow: none;
}

.format-card--fast {
    border-color: var(--bp-frame);
}

.format-card--fast:hover {
    border-color: rgba(150, 190, 230, 0.38);
}

.format-card--pro {
    border: 1px solid rgba(150, 190, 230, 0.38);
    box-shadow: var(--bp-lift);
}

.format-card--pro:hover {
    border-color: rgba(180, 210, 240, 0.45);
    box-shadow: var(--bp-lift-hover);
}

.formats-comparison__divider span {
    background: #2e5278;
    border: 1px solid var(--bp-frame);
    color: var(--bp-ink-muted);
    box-shadow: var(--bp-lift);
}

.card a:not(.btn):not(.case-card__landing) {
    color: var(--bp-accent);
}

body .badge--neutral {
    background: rgba(255, 255, 255, 0.14);
    color: var(--bp-ink);
    border: 1px solid rgba(200, 220, 240, 0.38);
    font-weight: 600;
}

body .badge--gray {
    background: rgba(255, 255, 255, 0.1);
    color: var(--bp-ink);
    border: 1px solid rgba(180, 210, 240, 0.28);
}

.case-card__badges .badge--gray {
    color: var(--bp-ink);
    background: rgba(255, 255, 255, 0.08);
}

body .badge--success {
    background: rgba(16, 185, 129, 0.18);
    color: #86efac;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

body .badge--warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.28);
}

body .badge--danger {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.landing-hero__title,
.landing-hero__card h3,
.landing-faq__item summary,
.marketing-cta__title,
.case-card__title,
.blog-card__title {
    color: var(--bp-ink);
}

.landing-hero__desc,
.landing-hero__list li,
.landing-faq__item p,
.marketing-cta__text,
.case-card__task,
.blog-card__desc {
    color: var(--bp-ink-muted);
}

.landing-related__link:hover {
    border-color: rgba(150, 190, 230, 0.38);
    box-shadow: var(--bp-lift);
}

/* Pro-max / shared form overrides */
.input:focus,
.textarea:focus,
.select:focus {
    background: rgba(36, 72, 112, 0.95);
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 2px var(--bp-accent-glow);
}

.upload-zone {
    background: rgba(28, 58, 92, 0.45);
    border-color: var(--bp-frame);
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--bp-accent);
    box-shadow: var(--bp-lift);
}

.checkbox-group {
    border-color: var(--bp-frame);
    background: rgba(28, 58, 92, 0.35);
}

.checkbox-group:hover {
    background: rgba(36, 68, 104, 0.5);
    border-color: var(--bp-frame);
}

.checkbox-group.checked {
    border-color: var(--bp-accent);
    background: rgba(0, 76, 174, 0.2);
}

/* Cabinet mobile */
body.cabinet-mode .mobile-tabbar {
    background: var(--bp-paper-panel);
    border-top-color: var(--bp-frame);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.cabinet-mode .mobile-tabbar__item {
    color: var(--bp-ink-dim);
}

body.cabinet-mode .mobile-tabbar__item.active {
    color: var(--bp-accent);
}

/* Scrollbar */
body::-webkit-scrollbar-track {
    background: var(--bp-paper);
}

body::-webkit-scrollbar-thumb {
    background: var(--bp-frame);
    border-color: var(--bp-paper);
}

body ::selection {
    background: rgba(53, 141, 255, 0.25);
    color: var(--bp-ink);
}

.approach-grid__arrow,
.formats-comparison__divider span {
    background: var(--bp-paper-elevated);
    border-color: var(--bp-frame);
    color: var(--bp-ink-muted);
}

.tab.active {
    background: var(--bp-paper-elevated);
    color: var(--bp-accent);
    border-color: var(--bp-frame);
    box-shadow: var(--bp-lift);
}

.order-card__name,
.order-card__price {
    color: var(--bp-ink);
}

.order-card__meta,
.order-card__date {
    color: var(--bp-ink-dim);
}

.eng-detail__section,
.eng-analysis-preview,
.order-detail-section {
    background: var(--bp-paper-panel);
    border-color: var(--bp-frame);
}

.order-detail-header,
.order-form__section {
    border-color: var(--bp-frame);
}

/* Order detail — читаемость на тёмном фоне */
body .order-detail-header__info h1 {
    color: var(--bp-ink);
}

body .order-detail-header__info p {
    color: var(--bp-ink-muted);
}

body .order-detail-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--bp-ink);
    letter-spacing: -0.02em;
}

body .order-detail-price__note {
    font-size: 13px;
    color: var(--bp-ink-muted);
}

body .order-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-ink-muted);
    margin-bottom: 10px;
}

body .order-task {
    padding: 16px;
    margin-bottom: 20px;
    background: rgba(53, 141, 255, 0.1);
    border: 1px solid var(--bp-frame);
    border-radius: var(--radius-tech);
}

body .order-task__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-ink);
    margin-bottom: 6px;
}

body .order-task__label i {
    color: #c8e4ff;
    margin-right: 6px;
}

body .order-task__body {
    font-size: 14px;
    color: var(--bp-ink-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}

body .status-step__line {
    background: var(--bp-frame);
}

body .status-step.done .status-step__line {
    background: rgba(16, 185, 129, 0.55);
}

body .status-step__dot {
    background: rgba(150, 190, 230, 0.12);
    color: var(--bp-ink-dim);
    border: 1px solid var(--bp-frame);
}

body .status-step.done .status-step__dot {
    background: rgba(16, 185, 129, 0.18);
    color: #86efac;
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

body .status-step.active .status-step__dot {
    background: rgba(53, 141, 255, 0.22);
    color: #d8ecff;
    border: 1px solid rgba(150, 190, 230, 0.38);
    box-shadow: 0 0 0 4px rgba(53, 141, 255, 0.1);
}

body .status-step__label {
    color: var(--bp-ink-dim);
}

body .status-step.done .status-step__label,
body .status-step.active .status-step__label {
    color: var(--bp-ink);
}

body .status-step__time {
    color: var(--bp-ink-dim);
}

body .status-step.done .status-step__time,
body .status-step.active .status-step__time {
    color: var(--bp-ink-muted);
}

body .result-item__name {
    color: var(--bp-ink);
}

body .result-item__desc {
    color: var(--bp-ink-dim);
}

body .result-item__icon {
    background: rgba(150, 190, 230, 0.14);
    color: #c0dcf8;
    border: 1px solid var(--bp-frame);
}

body .badge--primary {
    background: rgba(53, 141, 255, 0.22);
    color: var(--bp-ink);
    border: 1px solid rgba(150, 190, 230, 0.35);
}

body .badge--primary i {
    color: #c8e4ff;
}

/* ==================== HOME PAGE — DEPTH & PARALLAX ==================== */
body.is-home .ambient-bg__orb {
    display: block;
    opacity: 0.28;
    filter: blur(90px);
    animation: ambientFloat 22s ease-in-out infinite;
}

body.is-home .ambient-bg__orb--1 {
    background: radial-gradient(circle, rgba(53, 141, 255, 0.22) 0%, transparent 70%);
}

body.is-home .ambient-bg__orb--2 {
    background: radial-gradient(circle, rgba(0, 76, 174, 0.14) 0%, transparent 70%);
}

body.is-home .ambient-bg__orb--3 {
    background: radial-gradient(circle, rgba(140, 190, 240, 0.12) 0%, transparent 70%);
}

.home-page {
    position: relative;
}

.home-page .hero {
    position: relative;
    overflow: hidden;
}

.home-page .hero::before {
    content: '';
    position: absolute;
    top: 8%;
    right: 0;
    width: min(58vw, 520px);
    height: 70%;
    background: radial-gradient(ellipse 80% 70% at 60% 40%, rgba(53, 141, 255, 0.1) 0%, transparent 72%);
    pointer-events: none;
    z-index: 0;
}

.home-page .hero .container {
    position: relative;
    z-index: 1;
}

.home-page .hero__visual {
    will-change: transform;
    transition: transform 0.12s linear;
}

.home-page .kb17-footer-strip {
    position: relative;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0, 76, 174, 0.14) 50%, transparent 100%),
        rgba(24, 48, 76, 0.65);
    border-top: 1px solid var(--bp-frame);
    border-bottom: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

.home-page .home-section {
    position: relative;
    overflow: hidden;
    border-top: none;
}

.home-page .home-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(150, 190, 230, 0.28) 50%, transparent 95%);
    pointer-events: none;
    z-index: 2;
}

.home-page .home-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, var(--section-parallax, 0px), 0);
    transition: transform 0.15s linear;
}

.home-page .section--approach {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 75% 55% at 72% 28%, rgba(53, 141, 255, 0.13) 0%, transparent 62%),
        linear-gradient(180deg, #1a3352 0%, #223a58 38%, #243f62 100%);
}

.home-page .section--approach > .container {
    position: relative;
    z-index: 1;
}

.approach-section__backdrop,
.steps-section__backdrop,
.formats-section__backdrop,
.about-approach__backdrop,
.about-calc__backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.approach-section__glow,
.steps-section__glow,
.formats-section__glow,
.about-approach__glow,
.about-calc__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    pointer-events: none;
}

.approach-section__glow--right {
    width: min(60vw, 560px);
    height: 300px;
    top: 8%;
    right: -6%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(53, 141, 255, 0.15) 0%, transparent 70%);
}

.approach-section__glow--left {
    width: 360px;
    height: 240px;
    bottom: 6%;
    left: -4%;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 76, 174, 0.11) 0%, transparent 68%);
}

.approach-section__mesh,
.steps-section__mesh,
.formats-section__mesh,
.about-approach__mesh,
.about-calc__mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(150, 195, 235, 0.55);
    opacity: 0.1;
}

.approach-section__corner {
    position: absolute;
    width: 44px;
    height: 44px;
    border-color: rgba(150, 190, 230, 0.2);
    border-style: solid;
    border-width: 0;
}

.approach-section__corner--tl {
    top: 28px;
    left: 28px;
    border-top-width: 1px;
    border-left-width: 1px;
}

.approach-section__corner--br {
    bottom: 28px;
    right: 28px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

body .home-page .approach-card {
    background: linear-gradient(168deg, rgba(46, 82, 120, 0.94) 0%, rgba(38, 72, 104, 0.9) 100%);
    border-color: rgba(150, 190, 230, 0.22);
}

body .home-page .approach-card:hover {
    border-color: rgba(150, 190, 230, 0.38);
}

body .home-page .approach-card__icon--blue {
    background: linear-gradient(145deg, rgba(53, 141, 255, 0.24) 0%, rgba(0, 76, 174, 0.38) 100%);
    color: #a8d0ff;
    border: 1px solid rgba(150, 190, 230, 0.32);
    box-shadow: inset 0 1px 0 rgba(200, 225, 250, 0.15), 0 6px 18px rgba(0, 76, 174, 0.18);
}

body .home-page .approach-card__icon--green {
    background: linear-gradient(145deg, rgba(52, 168, 120, 0.22) 0%, rgba(32, 120, 88, 0.36) 100%);
    color: #8ee4c0;
    border: 1px solid rgba(120, 200, 165, 0.28);
    box-shadow: inset 0 1px 0 rgba(200, 240, 220, 0.12), 0 6px 18px rgba(32, 120, 88, 0.16);
}

body .home-page .approach-card__icon--orange {
    background: linear-gradient(145deg, rgba(220, 160, 60, 0.2) 0%, rgba(180, 120, 40, 0.34) 100%);
    color: #f0d080;
    border: 1px solid rgba(220, 180, 100, 0.28);
    box-shadow: inset 0 1px 0 rgba(250, 230, 180, 0.12), 0 6px 18px rgba(180, 120, 40, 0.14);
}

.home-page .section--approach::after {
    width: 420px;
    height: 280px;
    top: -60px;
    right: -8%;
    background: rgba(53, 141, 255, 0.11);
}

/* ── Post-approach: чертёжная сцена ── */
.home-body {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 90% 45% at 50% 0%, rgba(53, 141, 255, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #243f62 0%, #1c3454 12%, #1a3352 55%, #182e4a 100%);
}

.home-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(53, 141, 255, 0.4) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.home-body__scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.home-body__grid {
    position: absolute;
    inset: -2%;
    background-image:
        linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
        linear-gradient(var(--bp-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
    opacity: 0.85;
}

.home-body__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
    transition: transform 0.15s linear;
}

.home-body__glow--1 {
    width: min(72vw, 680px);
    height: 380px;
    top: 4%;
    left: 10%;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(53, 141, 255, 0.16) 0%, transparent 72%);
}

.home-body__glow--2 {
    width: min(55vw, 520px);
    height: 340px;
    top: 38%;
    right: -6%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0, 76, 174, 0.13) 0%, transparent 70%);
}

.home-body__glow--3 {
    width: min(60vw, 560px);
    height: 300px;
    bottom: 8%;
    left: 20%;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(100, 160, 220, 0.1) 0%, transparent 68%);
}

.home-body__band {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(150, 190, 230, 0.22) 20%, rgba(53, 141, 255, 0.35) 50%, rgba(150, 190, 230, 0.22) 80%, transparent 100%);
    opacity: 0.7;
}

.home-body__band--1 { top: 22%; }
.home-body__band--2 { top: 58%; }

.home-body__schematic {
    position: absolute;
    right: -4%;
    top: 14%;
    width: min(52vw, 580px);
    height: auto;
    color: rgba(150, 195, 235, 0.55);
    opacity: 0.09;
    will-change: transform;
    transition: transform 0.15s linear;
}

.home-body__corner {
    position: absolute;
    width: 48px;
    height: 48px;
    border-color: rgba(150, 190, 230, 0.2);
    border-style: solid;
    border-width: 0;
}

.home-body__corner--tl {
    top: 32px;
    left: 32px;
    border-top-width: 1px;
    border-left-width: 1px;
}

.home-body__corner--br {
    bottom: 48px;
    right: 32px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

.home-body > .home-section {
    position: relative;
    z-index: 1;
}

.home-body .section--steps {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 85% 55% at 50% 38%, rgba(53, 141, 255, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(42, 78, 112, 0.76) 0%, rgba(34, 65, 98, 0.58) 48%, rgba(38, 72, 104, 0.7) 100%);
}

.steps-section__glow--center {
    width: min(75vw, 700px);
    height: 260px;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(53, 141, 255, 0.14) 0%, transparent 72%);
}

.home-body .section--steps > .container {
    position: relative;
    z-index: 1;
}

.home-body .section--steps.section--gray::after {
    width: 500px;
    height: 280px;
    top: 30%;
    left: 50%;
    bottom: auto;
    transform: translate3d(-50%, var(--section-parallax, 0px), 0);
    background: rgba(100, 160, 220, 0.09);
}

body .home-body .step-card {
    background: linear-gradient(168deg, rgba(46, 82, 120, 0.94) 0%, rgba(38, 72, 104, 0.9) 100%);
    border-color: rgba(150, 190, 230, 0.22);
}

body .home-body .step-card:hover {
    border-color: rgba(150, 190, 230, 0.36);
}

body .home-body .step-card__num {
    background: linear-gradient(145deg, rgba(53, 141, 255, 0.3) 0%, rgba(0, 76, 174, 0.5) 100%);
    color: #d8ecff;
    border: 1px solid rgba(150, 190, 230, 0.35);
    border-radius: var(--radius-tech);
    box-shadow:
        inset 0 1px 0 rgba(200, 225, 250, 0.18),
        0 6px 18px rgba(0, 76, 174, 0.2);
}

body .home-body .card:hover .step-card__num {
    color: #eef6ff;
    border-color: rgba(150, 190, 230, 0.48);
}

.home-body .section--formats {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 50% at 28% 45%, rgba(53, 141, 255, 0.1) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 72% 45%, rgba(0, 76, 174, 0.1) 0%, transparent 58%),
        linear-gradient(180deg, rgba(36, 64, 96, 0.62) 0%, rgba(40, 74, 108, 0.72) 42%, rgba(34, 58, 88, 0.58) 100%);
}

.formats-section__glow--left {
    width: 380px;
    height: 260px;
    top: 30%;
    left: 6%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(53, 141, 255, 0.12) 0%, transparent 70%);
}

.formats-section__glow--right {
    width: 380px;
    height: 260px;
    top: 30%;
    right: 6%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0, 76, 174, 0.11) 0%, transparent 70%);
}

.home-body .section--formats > .container {
    position: relative;
    z-index: 1;
}

body .home-body .format-card {
    background: linear-gradient(168deg, rgba(46, 82, 120, 0.94) 0%, rgba(38, 72, 104, 0.9) 100%);
    border-color: rgba(150, 190, 230, 0.24);
}

body .home-body .format-card:hover {
    border-color: rgba(150, 190, 230, 0.38);
}

.home-body .section--audience {
    background:
        radial-gradient(ellipse 80% 60% at 50% 42%, rgba(53, 141, 255, 0.14) 0%, transparent 62%),
        linear-gradient(180deg, rgba(44, 82, 118, 0.78) 0%, rgba(36, 68, 100, 0.62) 48%, rgba(40, 74, 108, 0.74) 100%);
}

.audience-section__backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.audience-section__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    pointer-events: none;
}

.audience-section__glow--center {
    width: min(70vw, 640px);
    height: 280px;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(53, 141, 255, 0.18) 0%, transparent 72%);
}

.audience-section__glow--left {
    width: 320px;
    height: 240px;
    bottom: 10%;
    left: -4%;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 76, 174, 0.12) 0%, transparent 70%);
}

.audience-section__mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: rgba(150, 195, 235, 0.55);
    opacity: 0.11;
}

.home-body .section--audience > .container {
    position: relative;
    z-index: 1;
}

body .audience-card__icon {
    background: linear-gradient(145deg, rgba(53, 141, 255, 0.24) 0%, rgba(0, 76, 174, 0.38) 100%);
    color: #a8d0ff;
    border: 1px solid rgba(150, 190, 230, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(200, 225, 250, 0.15),
        0 6px 18px rgba(0, 76, 174, 0.18);
}

body .card:hover .audience-card__icon {
    color: #c8e4ff;
    border-color: rgba(150, 190, 230, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(200, 225, 250, 0.22),
        0 8px 22px rgba(53, 141, 255, 0.22);
}

body .home-body .audience-card {
    background: linear-gradient(168deg, rgba(46, 82, 120, 0.94) 0%, rgba(38, 72, 104, 0.9) 100%);
    border-color: rgba(150, 190, 230, 0.22);
}

body .home-body .audience-card:hover {
    border-color: rgba(150, 190, 230, 0.38);
    background: linear-gradient(168deg, rgba(52, 90, 128, 0.96) 0%, rgba(42, 78, 112, 0.92) 100%);
}

.home-body .section--gray {
    background:
        linear-gradient(180deg, rgba(38, 72, 104, 0.72) 0%, rgba(30, 58, 90, 0.55) 45%, rgba(34, 58, 88, 0.65) 100%);
}

.home-body .section--gray:not(.section--audience):not(.section--steps)::after {
    width: 420px;
    height: 280px;
    bottom: -70px;
    left: -5%;
    background: rgba(0, 76, 174, 0.11);
}

.home-body .section--audience.section--gray::after {
    width: 480px;
    height: 300px;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate3d(-50%, calc(-50% + var(--section-parallax, 0px)), 0);
    background: rgba(100, 160, 220, 0.1);
}

.home-body .section--formats::after {
    width: 520px;
    height: 320px;
    top: 18%;
    left: 50%;
    transform: translate3d(-50%, var(--section-parallax, 0px), 0);
    background: rgba(100, 160, 220, 0.09);
}

.home-body .section.home-section:not(.section--gray):not(.section--formats):not(.cta-section) {
    background:
        linear-gradient(180deg, rgba(28, 52, 84, 0.58) 0%, rgba(26, 51, 82, 0.48) 50%, rgba(30, 58, 90, 0.55) 100%);
}

.home-body .section.home-section:not(.section--gray):not(.section--formats):not(.cta-section)::after {
    width: 380px;
    height: 250px;
    top: 8%;
    right: 4%;
    background: rgba(53, 141, 255, 0.09);
}

.home-body .kb17-banner.home-section {
    background:
        linear-gradient(135deg, rgba(26, 51, 82, 0.82) 0%, rgba(36, 74, 114, 0.75) 45%, rgba(30, 63, 102, 0.8) 100%);
    border-top: 1px solid var(--bp-frame);
    border-bottom: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

.home-body .kb17-banner.home-section::after {
    width: 460px;
    height: 290px;
    bottom: -90px;
    right: 8%;
    background: rgba(0, 76, 174, 0.13);
}

.home-body .cta-section.home-section {
    background:
        linear-gradient(135deg, rgba(0, 76, 174, 0.38) 0%, rgba(30, 63, 102, 0.78) 45%, rgba(26, 51, 82, 0.85) 100%);
    border-top: 1px solid var(--bp-frame);
    box-shadow: inset 0 1px 0 var(--bp-rim-soft);
}

.home-body .cta-section.home-section::after {
    width: 540px;
    height: 330px;
    top: -100px;
    left: 18%;
    background: rgba(53, 141, 255, 0.12);
}

@media (max-width: 768px) {
    .home-body__schematic {
        width: 85vw;
        right: -18%;
        opacity: 0.06;
    }

    .home-body__corner {
        display: none;
    }

    .home-body__band {
        opacity: 0.45;
    }

    .approach-section__corner {
        display: none;
    }

    .steps-section__mesh,
    .formats-section__mesh,
    .approach-section__mesh {
        opacity: 0.07;
    }
}

/* ── About page: Подход + Что считаем ── */
.about-page .section--about-approach,
.about-page .section--about-calc {
    position: relative;
    overflow: hidden;
}

.about-page .section--about-approach {
    background:
        radial-gradient(ellipse 80% 55% at 50% 35%, rgba(53, 141, 255, 0.12) 0%, transparent 62%),
        linear-gradient(180deg, #223a58 0%, #1e3858 50%, #223a58 100%);
}

.about-page .section--about-calc {
    background:
        radial-gradient(ellipse 55% 50% at 22% 45%, rgba(53, 141, 255, 0.1) 0%, transparent 58%),
        radial-gradient(ellipse 55% 50% at 78% 45%, rgba(0, 76, 174, 0.09) 0%, transparent 58%),
        linear-gradient(180deg, #1c3454 0%, #223a58 50%, #1e3858 100%);
}

.about-page .section--about-approach > .container,
.about-page .section--about-calc > .container {
    position: relative;
    z-index: 1;
}

.about-approach__glow {
    width: min(65vw, 580px);
    height: 280px;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(53, 141, 255, 0.14) 0%, transparent 72%);
}

.about-calc__glow--left {
    width: 360px;
    height: 260px;
    top: 28%;
    left: 4%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(53, 141, 255, 0.11) 0%, transparent 70%);
}

.about-calc__glow--right {
    width: 360px;
    height: 260px;
    top: 28%;
    right: 4%;
    background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0, 76, 174, 0.1) 0%, transparent 70%);
}

.about-page .section--about-approach .card,
.about-page .section--about-calc .card {
    background: linear-gradient(168deg, rgba(46, 82, 120, 0.94) 0%, rgba(38, 72, 104, 0.9) 100%);
    border-color: rgba(150, 190, 230, 0.22);
}

.about-page .section--about-approach .card h3,
.about-page .section--about-calc .card h3 {
    color: var(--bp-ink) !important;
}

.about-page .section--about-approach .card p,
.about-page .section--about-calc .card p {
    color: var(--bp-ink-muted) !important;
}

@media (max-width: 768px) {
    .about-approach__mesh,
    .about-calc__mesh {
        opacity: 0.07;
    }
}

.home-page .kb17-banner__title,
.home-page .kb17-banner__text {
    color: var(--bp-ink);
}

.home-page .kb17-banner__text {
    color: var(--bp-ink-muted);
}

.home-page .home-section > .container,
.home-page .home-section > .kb17-banner__inner {
    position: relative;
    z-index: 1;
}

.home-page .section__header {
    margin-bottom: 48px;
}

@media (prefers-reduced-motion: reduce) {
    body.is-home .ambient-bg__orb {
        animation: none;
    }

    .home-page .hero__visual,
    .home-page .home-section::after,
    .home-body__glow,
    .home-body__schematic {
        transform: none !important;
        transition: none !important;
    }
}