/* =============================================================
   Империя окон — design system base
   Palette: Dark Luxury (default) + Light Mineral (data-theme="light")
   Typography: Geist Sans + Geist Mono
   Built for: Bootstrap 5.3 + Three.js + anime.js v4 + Lenis
   ============================================================= */

:root {
    /* === Dark Luxury (default) === */
    --bg-deep:        oklch(13% 0.012 250);
    --bg-surface:     oklch(18% 0.014 250);
    --bg-elevated:    oklch(22% 0.014 250);
    --text-primary:   oklch(96% 0.005 90);
    --text-secondary: oklch(82% 0.008 80);
    --text-muted:     oklch(62% 0.012 80);
    --text-dim:       oklch(48% 0.012 80);

    --accent:         oklch(72% 0.13 80);     /* латунь/бронза */
    --accent-hover:   oklch(78% 0.14 80);
    --accent-soft:    oklch(72% 0.13 80 / 0.15);

    --glass-bg:       oklch(20% 0.012 250 / 0.6);
    --glass-border:   oklch(50% 0.01 80 / 0.15);
    --rule:           oklch(30% 0.01 250 / 0.4);
    --rule-strong:    oklch(45% 0.012 80 / 0.5);

    /* Themeable surfaces — overridden per data-theme */
    --header-bg-top:   oklch(13% 0.012 250 / 0.5);   /* верхний градиент над hero */
    --header-bg-solid: oklch(13% 0.012 250 / 0.85);  /* фон шапки при скролле */

    --success:        oklch(72% 0.16 145);
    --warn:           oklch(78% 0.14 60);
    --danger:         oklch(68% 0.20 25);

    /* === Spacing === */
    --space-xs:  0.25rem;
    --space-s:   0.5rem;
    --space-m:   1rem;
    --space-l:   1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;

    /* === Section padding === */
    --section-py: clamp(4rem, 3rem + 5vw, 9rem);

    /* === Type scale (clamp for fluidity) === */
    --t-mega:    clamp(3rem, 1.5rem + 7vw, 8.5rem);
    --t-hero:    clamp(2.5rem, 1.5rem + 5vw, 6rem);
    --t-h1:      clamp(2rem, 1.4rem + 3vw, 4rem);
    --t-h2:      clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
    --t-h3:      clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --t-body:    1.0625rem;
    --t-small:   0.875rem;
    --t-xs:      0.75rem;

    /* === Radius === */
    --radius-s:  8px;
    --radius-m:  14px;
    --radius-l:  22px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    /* === Shadow === */
    --shadow-s:  0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-m:  0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-l:  0 18px 80px rgba(0, 0, 0, 0.5);
    --shadow-brass: 0 12px 40px oklch(72% 0.13 80 / 0.25);

    /* === Motion === */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 200ms;
    --dur-norm: 400ms;
    --dur-slow: 700ms;

    /* === Container === */
    --container-max: 1440px;
    --content-max:   1240px;
    --narrow-max:    800px;

    color-scheme: dark;
}

[data-theme="light"] {
    --bg-deep:        oklch(98% 0.003 90);
    --bg-surface:     oklch(95% 0.005 90);
    --bg-elevated:    oklch(100% 0 0);
    --text-primary:   oklch(18% 0 0);
    --text-secondary: oklch(28% 0.005 60);
    --text-muted:     oklch(45% 0.008 60);
    --text-dim:       oklch(60% 0.008 60);

    /* Premium graphite-indigo вместо красной терракоты — спокойнее, дороже */
    --accent:         oklch(32% 0.05 250);
    --accent-hover:   oklch(40% 0.07 250);
    --accent-soft:    oklch(32% 0.05 250 / 0.08);

    --glass-bg:       oklch(98% 0.003 90 / 0.85);
    --glass-border:   oklch(80% 0.005 60 / 0.5);
    --rule:           oklch(86% 0.005 60);
    --rule-strong:    oklch(72% 0.008 60);

    --header-bg-top:   oklch(98% 0.003 90 / 0.5);
    --header-bg-solid: oklch(98% 0.003 90 / 0.92);

    --shadow-s:  0 2px 12px oklch(20% 0 0 / 0.08);
    --shadow-m:  0 8px 40px oklch(20% 0 0 / 0.10);
    --shadow-l:  0 18px 80px oklch(20% 0 0 / 0.15);

    color-scheme: light;
}

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

html {
    scroll-behavior: auto; /* handled by Lenis */
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
}

body {
    font-family: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-deep);
    min-height: 100vh;
    overflow-x: hidden;
    font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
    text-rendering: optimizeLegibility;
    transition: background var(--dur-norm) var(--ease-out-quart),
                color var(--dur-norm) var(--ease-out-quart);
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Geist', 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.mono, code, kbd, .num {
    font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent); color: var(--bg-deep); }

/* =============================================================
   Layout primitives
   ============================================================= */
.container-wide {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}
.container-content {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}
.container-narrow {
    width: 100%;
    max-width: var(--narrow-max);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 2rem);
}
section { padding-block: var(--section-py); }

/* =============================================================
   Typography helpers
   ============================================================= */
.t-mega { font-size: var(--t-mega); line-height: 0.92; letter-spacing: -0.04em; font-weight: 600; }
.t-hero { font-size: var(--t-hero); line-height: 1.0;  letter-spacing: -0.035em; font-weight: 600; }
.t-h1   { font-size: var(--t-h1);   line-height: 1.05; letter-spacing: -0.03em;  font-weight: 600; }
.t-h2   { font-size: var(--t-h2);   line-height: 1.1;  letter-spacing: -0.025em; font-weight: 600; }
.t-h3   { font-size: var(--t-h3);   line-height: 1.2;  letter-spacing: -0.02em;  font-weight: 600; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    font-family: 'Geist Mono', monospace;
    font-size: var(--t-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
}

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }
.lead  { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.55; color: var(--text-secondary); }

/* =============================================================
   Buttons
   ============================================================= */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    padding: 0.95rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    transition: all var(--dur-fast) var(--ease-out-quart);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.btn-cta.primary {
    background: var(--accent);
    color: var(--bg-deep);
    box-shadow: var(--shadow-brass);
}
.btn-cta.primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 18px 50px oklch(72% 0.13 80 / 0.35);
}
.btn-cta.ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--rule-strong);
}
.btn-cta.ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.btn-cta.link {
    padding: 0.5rem 0;
    color: var(--text-primary);
    border-radius: 0;
    border-bottom: 1px solid var(--rule-strong);
}
.btn-cta.link:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   Cards & surfaces
   ============================================================= */
.surface {
    background: var(--bg-surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-l);
}
.surface.elevated { background: var(--bg-elevated); box-shadow: var(--shadow-m); }
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
}

/* =============================================================
   Badges
   ============================================================= */
.badge-brass {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: 'Geist Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =============================================================
   Rules / dividers
   ============================================================= */
.rule        { border: 0; border-top: 1px solid var(--rule); margin-block: var(--space-2xl); }
.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); margin-block: var(--space-2xl); }

/* =============================================================
   Cursor follower / glow
   ============================================================= */
.cursor-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.cursor-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
                                oklch(72% 0.13 80 / 0.12),
                                transparent 40%);
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--dur-fast);
}
.cursor-glow > * { position: relative; z-index: 1; }

/* =============================================================
   Number counters
   ============================================================= */
.stat-num {
    font-family: 'Geist Mono', monospace;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: var(--t-small);
    color: var(--text-muted);
    margin-top: var(--space-s);
}

/* =============================================================
   Reveal animations (IntersectionObserver-driven)
   ============================================================= */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
    will-change: transform, opacity;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.9s var(--ease-out-expo);
}
.reveal-line.is-visible > span { transform: translateY(0); }

/* Stagger delays */
.delay-1 { transition-delay: 80ms; }
.delay-2 { transition-delay: 160ms; }
.delay-3 { transition-delay: 240ms; }
.delay-4 { transition-delay: 320ms; }
.delay-5 { transition-delay: 400ms; }
.delay-6 { transition-delay: 480ms; }

/* =============================================================
   Forms
   ============================================================= */
.field {
    display: block;
    width: 100%;
    padding: 0.95rem 1.1rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-m);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-surface);
}
.field::placeholder { color: var(--text-dim); }

/* =============================================================
   Floating contact buttons (WhatsApp / Telegram / phone)
   ============================================================= */
.floating-contacts {
    position: fixed;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.floating-contacts a {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    color: var(--text-primary);
    box-shadow: var(--shadow-m);
    transition: transform var(--dur-fast), background var(--dur-fast);
}
.floating-contacts a:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--accent);
    color: var(--bg-deep);
    border-color: var(--accent);
}
.floating-contacts a.whatsapp { background: #25d366; color: white; border-color: #25d366; }
.floating-contacts a.telegram { background: #2aabee; color: white; border-color: #2aabee; }

/* =============================================================
   Header (sticky, transparent → opaque on scroll)
   ============================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.875rem 0;
    transition: padding var(--dur-norm) var(--ease-out-quart),
                background var(--dur-norm) var(--ease-out-quart),
                backdrop-filter var(--dur-norm);
}
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--header-bg-top), transparent);
    pointer-events: none;
    z-index: -1;
}
.site-header.scrolled {
    padding: 0.5rem 0;
    background: var(--header-bg-solid);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--rule);
}
.site-header.scrolled::before { display: none; }
[data-theme="light"] .site-header.scrolled {
    background: oklch(98% 0.003 90 / 0.85);
}

.site-header .hdr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.0625rem;
    color: inherit;
    transition: opacity var(--dur-fast);
}
.brand:hover { opacity: 0.85; }

.brand-mark {
    width: 40px;
    height: 40px;
    background: var(--accent);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--bg-deep);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.04em;
    box-shadow: 0 4px 16px oklch(72% 0.13 80 / 0.18);
    transition: transform var(--dur-fast) var(--ease-out-quart),
                box-shadow var(--dur-fast);
}
.brand:hover .brand-mark {
    transform: rotate(-4deg) scale(1.04);
    box-shadow: 0 8px 22px oklch(72% 0.13 80 / 0.32);
}

.brand-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: transform var(--dur-fast) var(--ease-out-quart);
}
.brand:hover .brand-logo { transform: scale(1.03); }

.site-header.scrolled .brand-mark,
.site-header.scrolled .brand-logo { height: 36px; }
.site-header.scrolled .brand-mark { width: 36px; font-size: 1.125rem; }
.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    font-size: 0.9375rem;
}
.site-nav a {
    color: var(--text-secondary);
    transition: color var(--dur-fast);
    position: relative;
    font-weight: 450;
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a.is-active { color: var(--text-primary); }

/* Hero теперь light-aware (фон = var(--bg-deep)), поэтому header использует
   обычные переменные темы без принудительного override. */
.site-nav a.is-active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent);
}
.site-header .hdr-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.site-header .hdr-cta .btn-cta { padding: 0.7rem 1.25rem; font-size: 0.875rem; }
.hdr-theme,
.hdr-phone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--rule-strong);
    transition: all 0.2s var(--ease-out-quart);
    flex-shrink: 0;
}
.hdr-theme:hover,
.hdr-phone:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.hdr-phone i { font-size: 1.05rem; }

.header-phone { color: var(--text-secondary); font-size: 0.875rem; }

.mobile-toggle { display: none; }
@media (max-width: 991.98px) {
    .site-nav { display: none; }
    .mobile-toggle {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--rule-strong);
        border-radius: 50%;
        color: var(--text-primary);
    }
}

/* Mobile menu drawer */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg-deep);
    padding: 6rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-norm) var(--ease-out-quart);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-menu nav a {
    font-size: 1.5rem;
    color: var(--text-primary);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
    letter-spacing: -0.01em;
}
.mobile-menu nav a.is-active { color: var(--accent); }
.mobile-menu-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
    border-top: 1px solid var(--rule);
    padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 1vw, 2.5rem);
    background: var(--bg-deep);
    color: var(--text-secondary);
}
.site-footer h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    margin-bottom: 1rem;
    font-family: 'Geist Mono', monospace;
    font-weight: 500;
}
.site-footer a {
    display: inline-block;
    color: var(--text-secondary);
    transition: color var(--dur-fast);
    padding: 4px 0;
}
.site-footer a:hover { color: var(--text-primary); }
.site-footer .copyright {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-top: clamp(1.5rem, 1rem + 1vw, 2rem);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
    font-size: var(--t-small);
    color: var(--text-muted);
}

/* Footer grid layout */
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 991.98px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand .brand { margin-bottom: 1rem; }
.footer-tag { max-width: 320px; font-size: var(--t-small); }
.footer-socials {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.footer-socials a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    display: grid;
    place-items: center;
    transition: all var(--dur-fast);
}
.footer-socials a:hover { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); }
.footer-addr { line-height: 1.6; margin-top: 0.5rem; }

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .reveal-line > span { transform: none; }
}

/* =============================================================
   Utilities (small)
   ============================================================= */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }