/* ============================================================
RESET + BASE
============================================================ */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
:root {
 --bg: #0a0a0e;
 --bg-article: #121214;
 --surface: rgba(18, 18, 24, 0.65);
 --surface-glass: rgba(20, 20, 28, 0.55);
 --fg: #f0ede8;
 --muted: #8a8780;
 --border-glass: rgba(255, 255, 255, 0.06);
 --accent: #d4a556;
 --accent-glow: rgba(212, 165, 86, 0.35);
 --accent-dim: #a8823a;
 --gradient-stat: linear-gradient(135deg, #f59e0b, #ef4444);
 --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
 --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
 --radius: 14px;
 --radius-sm: 8px;
 --max-width: 1200px;
 --content-max: 760px;
 --section-pad: clamp(72px, 10vh, 128px);
 --header-h: 72px;
}
html {
 scroll-behavior: smooth;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body {
 font-family: var(--font-body);
 background: var(--bg);
 color: var(--fg);
 line-height: 1.55;
 overflow-x: hidden;
}
a {
 color: inherit;
 text-decoration: none;
}
img {
 max-width: 100%;
 display: block;
}
.container {
 width: 100%;
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 24px;
}

/* ============================================================
NOISE TEXTURE (global)
============================================================ */
.noise-overlay {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 9999;
 opacity: 0.035;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.6'/%3E%3C/svg%3E");
 background-repeat: repeat;
 background-size: 256px 256px;
}

/* ============================================================
HEADER (glassmorphism sticky)
============================================================ */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: var(--header-h);
 z-index: 1000;
 background: rgba(10, 10, 14, 0.6);
 backdrop-filter: blur(16px) saturate(1.2);
 -webkit-backdrop-filter: blur(16px) saturate(1.2);
 border-bottom: 1px solid var(--border-glass);
 transition: background 0.3s ease;
}
.site-header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
}
.header-logo {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 18px;
 letter-spacing: -0.02em;
 color: var(--fg);
 white-space: nowrap;
}
.header-logo .accent {
 color: var(--accent);
}
.header-nav {
 display: flex;
 align-items: center;
 gap: 28px;
 list-style: none;
}
.header-nav a {
 font-size: 14px;
 font-weight: 500;
 color: var(--muted);
 transition: color 0.2s ease;
 letter-spacing: 0.01em;
 position: relative;
}
.header-nav a:hover,
.header-nav a:focus {
 color: var(--accent);
}
.header-actions {
 display: flex;
 align-items: center;
 gap: 16px;
}
.header-phone {
 font-size: 15px;
 font-weight: 600;
 color: var(--fg);
 white-space: nowrap;
 transition: color 0.2s ease;
}
.header-phone:hover {
 color: var(--accent);
}
.header-btn {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 13px;
 padding: 10px 22px;
 border-radius: 50px;
 background: var(--accent);
 color: #0a0a0a;
 border: none;
 cursor: pointer;
 transition: all 0.25s ease;
 white-space: nowrap;
 box-shadow: 0 0 20px var(--accent-glow);
}
.header-btn:hover {
 transform: translateY(-1px) scale(1.02);
 box-shadow: 0 0 30px var(--accent-glow);
}
.mobile-menu-toggle {
 display: none;
 background: rgba(10, 10, 14, 0.5);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 8px;
 width: 44px;
 height: 44px;
 font-size: 26px;
 color: #fff;
 cursor: pointer;
 align-items: center;
 justify-content: center;
 padding: 0;
 line-height: 1;
 transition: background 0.25s ease, border-color 0.25s ease;
}
.mobile-menu-toggle:hover {
 background: rgba(10, 10, 14, 0.8);
 border-color: var(--accent);
}

/* ============================================================
BUTTONS
============================================================ */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 16px;
 letter-spacing: 0.01em;
 padding: 16px 36px;
 border-radius: 50px;
 cursor: pointer;
 transition: all 0.25s ease;
 border: none;
 white-space: nowrap;
}
.btn-primary {
 background: var(--accent);
 color: #0a0a0a;
 box-shadow: 0 0 30px var(--accent-glow), 0 4px 20px rgba(0, 0, 0, 0.4);
}
.btn-primary:hover {
 transform: translateY(-2px) scale(1.02);
 box-shadow: 0 0 50px var(--accent-glow), 0 8px 30px rgba(0, 0, 0, 0.5);
}
.btn-primary:active {
 transform: translateY(0) scale(0.98);
}
.btn-outline {
 background: transparent;
 color: var(--fg);
 border: 1.5px solid var(--border-glass);
 backdrop-filter: blur(4px);
}
.btn-outline:hover {
 border-color: var(--accent);
 color: var(--accent);
 background: rgba(212, 165, 86, 0.08);
}
.btn-glow-pulse {
 animation: pulse-glow 2.4s ease-in-out infinite;
}
@keyframes pulse-glow {
 0%,
 100% {
 box-shadow: 0 0 20px var(--accent-glow), 0 4px 20px rgba(0, 0, 0, 0.4);
 }
 50% {
 box-shadow: 0 0 45px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.5);
 }
}
.btn-lg {
 padding: 20px 48px;
 font-size: 18px;
}

/* ============================================================
SECTION HEADERS
============================================================ */
.section-label {
 display: inline-block;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 12px;
 border: 1px solid rgba(212, 165, 86, 0.2);
 padding: 4px 14px;
 border-radius: 50px;
}
.section-title {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(30px, 4vw, 52px);
 line-height: 1.12;
 letter-spacing: -0.02em;
 margin-bottom: 16px;
}
.section-sub {
 font-size: 18px;
 color: var(--muted);
 max-width: 620px;
 line-height: 1.6;
}
.section-header {
 margin-bottom: 52px;
}
.section-header.centered {
 text-align: center;
}
.section-header.centered .section-sub {
 margin: 0 auto;
}

/* ============================================================
AMBIENT GLOW SECTIONS
============================================================ */
.glow-bg {
 position: relative;
}
.glow-bg::before {
 content: '';
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 0;
}
.glow-bg .container,
.glow-bg .section-header,
.glow-bg .stats-grid,
.glow-bg .masonry,
.glow-bg .pricing-grid,
.glow-bg .program-grid {
 position: relative;
 z-index: 1;
}
.stats.glow-bg::before {
 background:
 radial-gradient(ellipse 60% 40% at 25% 30%, rgba(239, 68, 68, 0.08) 0%, transparent 60%),
 radial-gradient(ellipse 50% 50% at 75% 70%, rgba(212, 165, 86, 0.06) 0%, transparent 60%),
 radial-gradient(ellipse 40% 60% at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
}
.portfolio.glow-bg::before {
 background:
 radial-gradient(ellipse 70% 40% at 80% 20%, rgba(212, 165, 86, 0.07) 0%, transparent 50%),
 radial-gradient(ellipse 50% 60% at 20% 80%, rgba(239, 68, 68, 0.05) 0%, transparent 50%);
}
.pricing.glow-bg::before {
 background:
 radial-gradient(ellipse 60% 50% at 30% 40%, rgba(212, 165, 86, 0.08) 0%, transparent 60%),
 radial-gradient(ellipse 40% 50% at 70% 60%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}
.program.glow-bg::before {
 background:
 radial-gradient(ellipse 50% 60% at 70% 30%, rgba(239, 68, 68, 0.05) 0%, transparent 50%),
 radial-gradient(ellipse 60% 40% at 30% 70%, rgba(212, 165, 86, 0.06) 0%, transparent 50%);
}
.cta-block.glow-bg::before {
 background:
 radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212, 165, 86, 0.15) 0%, transparent 60%),
 radial-gradient(ellipse 40% 60% at 20% 80%, rgba(239, 68, 68, 0.06) 0%, transparent 50%);
}

/* ============================================================
BLOCK 1 — HERO
============================================================ */
.hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 position: relative;
 overflow: hidden;
 padding: calc(var(--header-h) + 40px) 0 80px;
 background: var(--bg);
}
.hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 70% 50% at 20% 60%, rgba(212, 165, 86, 0.10) 0%, transparent 70%),
 radial-gradient(ellipse 50% 60% at 80% 40%, rgba(239, 68, 68, 0.06) 0%, transparent 70%),
 radial-gradient(ellipse 40% 40% at 50% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
 pointer-events: none;
 z-index: 0;
}
.hero .container {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: center;
}
.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 13px;
 font-weight: 600;
 color: var(--accent);
 background: rgba(212, 165, 86, 0.10);
 border: 1px solid rgba(212, 165, 86, 0.18);
 padding: 6px 18px 6px 14px;
 border-radius: 50px;
 margin-bottom: 24px;
 letter-spacing: 0.02em;
 backdrop-filter: blur(4px);
}
.hero-badge span {
 font-size: 16px;
}
.hero h1 {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(38px, 5vw, 68px);
 line-height: 1.08;
 letter-spacing: -0.025em;
 margin-bottom: 20px;
}
.hero h1 .accent-word {
 color: var(--accent);
}
.hero p {
 font-size: 18px;
 color: var(--muted);
 max-width: 540px;
 line-height: 1.7;
 margin-bottom: 14px;
}
.hero .features-mini {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 20px;
 margin: 20px 0 36px;
 font-size: 14px;
 color: var(--muted);
}
.hero .features-mini span {
 display: flex;
 align-items: center;
 gap: 6px;
}
.hero .features-mini svg {
 width: 16px;
 height: 16px;
 stroke: var(--accent);
 stroke-width: 2;
 fill: none;
}
.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 align-items: center;
}
.hero-visual {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
}
.hero-visual .photo-frame {
 position: relative;
 width: 100%;
 max-width: 520px;
 aspect-ratio: 4 / 5;
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--surface-glass);
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
 border: 1px solid var(--border-glass);
}
.hero-visual .photo-frame .placeholder-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 background: linear-gradient(145deg, #1e1e28, #2a2a36);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 color: var(--muted);
}
.hero-visual .photo-frame .placeholder-img svg {
 width: 60px;
 height: 60px;
 stroke: var(--muted);
 opacity: 0.3;
}
.hero-visual .glow-ring {
 position: absolute;
 inset: -12px;
 border-radius: calc(var(--radius) + 12px);
 border: 1px solid rgba(212, 165, 86, 0.10);
 pointer-events: none;
}
.hero-visual .glow-ring::after {
 content: '';
 position: absolute;
 inset: -1px;
 border-radius: inherit;
 background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(212, 165, 86, 0.06), transparent, rgba(212, 165, 86, 0.06), transparent);
 opacity: 0.5;
}

/* ============================================================
BLOCK 2 — STATS (glass cards)
============================================================ */
.stats {
 padding: var(--section-pad) 0;
}
.stats-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
}
.stat-card {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 padding: 36px 28px 32px;
 text-align: center;
 transition: transform 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.stat-card:hover {
 transform: translateY(-4px);
 border-color: rgba(212, 165, 86, 0.2);
 backdrop-filter: blur(12px);
}
.stat-number {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(44px, 5vw, 68px);
 line-height: 1;
 background: var(--gradient-stat);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -0.03em;
 margin-bottom: 8px;
}
.stat-number .suffix {
 font-size: 0.5em;
 font-weight: 700;
 -webkit-text-fill-color: var(--muted);
 color: var(--muted);
}
.stat-label {
 font-size: 15px;
 color: var(--muted);
 line-height: 1.5;
 max-width: 200px;
 margin: 0 auto;
}
.stat-label strong {
 color: var(--fg);
 font-weight: 600;
}

/* ============================================================
BLOCK 3 — PORTFOLIO
============================================================ */
.portfolio {
 padding: var(--section-pad) 0;
}
.masonry {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.masonry-item {
 position: relative;
 border-radius: var(--radius-sm);
 overflow: hidden;
 background: var(--surface-glass);
 aspect-ratio: 1;
 cursor: pointer;
 transition: transform 0.4s ease, box-shadow 0.4s ease;
 border: 1px solid var(--border-glass);
}
.masonry-item:hover {
 transform: scale(1.03);
 z-index: 2;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
 border-color: rgba(212, 165, 86, 0.15);
}
.masonry-item .thumb {
 width: 100%;
 height: 100%;
 object-fit: cover;
 background: linear-gradient(135deg, #1a1a24, #2a2a38);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 font-size: 12px;
}
.masonry-item .play-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.15);
 opacity: 1;
 transition: opacity 0.3s ease;
}
.masonry-item .play-overlay .play-icon {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: var(--accent);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 30px rgba(212, 165, 86, 0.4);
 transition: transform 0.3s ease;
}
.masonry-item:hover .play-overlay .play-icon {
 transform: scale(1.1);
}
.masonry-item .play-overlay .play-icon svg {
 width: 22px;
 height: 22px;
 fill: #0a0a0a;
 margin-left: 2px;
}
.masonry-item:nth-child(1) {
 grid-column: span 2;
 grid-row: span 2;
 aspect-ratio: auto;
}
.masonry-item:nth-child(4) {
 grid-column: span 2;
 aspect-ratio: 2/1;
}
.masonry-item:nth-child(7) {
 grid-column: span 2;
 aspect-ratio: 2/1;
}
.portfolio-actions {
 margin-top: 40px;
 text-align: center;
}

/* ============================================================
BLOCK 4 — PRICING (glass cards)
============================================================ */
.pricing {
 padding: var(--section-pad) 0;
}
.pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}
.pricing-card {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 padding: 40px 32px 36px;
 display: flex;
 flex-direction: column;
 transition: transform 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.pricing-card:hover {
 transform: translateY(-6px);
 border-color: rgba(212, 165, 86, 0.2);
 backdrop-filter: blur(12px);
}
.pricing-card .tier-name {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 20px;
 letter-spacing: -0.01em;
 margin-bottom: 4px;
}
.pricing-card .tier-price {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(36px, 4vw, 48px);
 background: var(--gradient-stat);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 margin: 12px 0 16px;
}
.pricing-card .tier-price small {
 font-size: 0.4em;
 font-weight: 600;
 -webkit-text-fill-color: var(--muted);
 color: var(--muted);
}
.pricing-card .tier-features {
 list-style: none;
 padding: 0;
 margin: 0 0 28px;
 flex: 1;
}
.pricing-card .tier-features li {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 8px 0;
 font-size: 14px;
 color: var(--muted);
 line-height: 1.5;
 border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pricing-card .tier-features li:last-child {
 border-bottom: none;
}
.pricing-card .tier-features li .check {
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 margin-top: 2px;
 border-radius: 50%;
 background: rgba(212, 165, 86, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent);
 font-size: 11px;
 font-weight: 700;
}
.pricing-card .btn {
 width: 100%;
}

/* ============================================================
BLOCK 5 — PROGRAM
============================================================ */
.program {
 padding: var(--section-pad) 0;
}
.program-grid {
 display: grid;
 gap: 60px;
}
.program-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: center;
}
.program-row.reverse {
 direction: rtl;
}
.program-row.reverse>* {
 direction: ltr;
}
.program-text h3 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(22px, 2.4vw, 30px);
 letter-spacing: -0.02em;
 margin-bottom: 12px;
}
.program-text h3 .accent {
 color: var(--accent);
}
.program-text p {
 font-size: 16px;
 color: var(--muted);
 line-height: 1.7;
 max-width: 480px;
}
.program-visual {
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--surface-glass);
 aspect-ratio: 4 / 3;
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
 border: 1px solid var(--border-glass);
}
.program-visual .placeholder-img {
 width: 100%;
 height: 100%;
 background: linear-gradient(145deg, #1a1a24, #2a2a36);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 font-size: 13px;
}
.program-visual .placeholder-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

/* ============================================================
BLOCK 6 — CTA
============================================================ */
.cta-block {
 padding: var(--section-pad) 0;
 background: linear-gradient(135deg, #1a1408 0%, #0f0e0a 100%);
 border-top: 1px solid rgba(212, 165, 86, 0.10);
 border-bottom: 1px solid rgba(212, 165, 86, 0.10);
 position: relative;
}
.cta-block .container {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 48px;
 align-items: center;
}
.cta-block .section-title {
 margin-bottom: 12px;
}
.cta-block .section-sub {
 color: var(--muted);
 font-size: 17px;
 max-width: 480px;
}
.cta-phone {
 display: block;
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(28px, 3vw, 42px);
 letter-spacing: -0.02em;
 color: var(--fg);
 margin: 16px 0 12px;
 transition: color 0.2s ease;
}
.cta-phone:hover {
 color: var(--accent);
}
.cta-socials {
 display: flex;
 gap: 12px;
 margin-bottom: 24px;
}
.cta-socials a {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1.5px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.25s ease;
 color: var(--muted);
 backdrop-filter: blur(4px);
}
.cta-socials a:hover {
 border-color: var(--accent);
 color: var(--accent);
 background: rgba(212, 165, 86, 0.06);
}
.cta-socials a svg {
 width: 20px;
 height: 20px;
 fill: currentColor;
 stroke: none;
}
.cta-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
}
.cta-right {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 padding-left: 24px;
 border-left: 2px solid rgba(212, 165, 86, 0.15);
}

/* ============================================================
ARTICLE PAGE (blog / page type)
============================================================ */
.container-narrow {
 width: 100%;
 max-width: var(--content-max);
 margin: 0 auto;
 padding: 0 20px;
}

.article-hero,
.article-body,
.article-cta {
 background: var(--bg-article);
}

/* -- Hero heading -- */
.article-hero {
 padding-top: calc(var(--header-h) + 48px);
 padding-bottom: 40px;
 position: relative;
}
.article-hero .container-narrow {
 position: relative;
 z-index: 2;
}

.breadcrumbs {
 font-size: 13px;
 color: var(--muted);
 margin-bottom: 24px;
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}
.breadcrumbs a {
 color: var(--muted);
 transition: color 0.2s ease;
}
.breadcrumbs a:hover {
 color: var(--accent);
}
.breadcrumbs .sep {
 color: var(--border-glass);
 margin: 0 4px;
}

.article-hero h1 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(32px, 4.4vw, 52px);
 line-height: 1.12;
 letter-spacing: -0.02em;
 margin-bottom: 16px;
}

.article-lead {
 font-size: 20px;
 color: var(--muted);
 line-height: 1.6;
 margin-bottom: 16px;
 font-weight: 400;
}

.article-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 16px 24px;
 font-size: 14px;
 color: var(--muted);
 margin-bottom: 32px;
 align-items: center;
}
.article-meta .tag {
 display: inline-block;
 background: rgba(212, 165, 86, 0.12);
 padding: 4px 14px;
 border-radius: 50px;
 font-size: 12px;
 font-weight: 600;
 color: var(--accent);
 letter-spacing: 0.05em;
 text-transform: uppercase;
}

.article-hero .featured-image {
 width: 100%;
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 aspect-ratio: 16/9;
 box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
 margin-top: 8px;
}
.article-hero .featured-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.article-hero .featured-image .placeholder-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 background: linear-gradient(145deg, #1e1e28, #2a2a36);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 font-size: 14px;
}

/* -- Article body text -- */
.article-body {
 padding: 48px 0 60px;
}
.article-body .container-narrow {
 max-width: var(--content-max);
}
.article-body .body-text {
 font-size: 18px;
 line-height: 1.65;
 color: #e0e0e0;
}
.article-body .body-text p {
 margin-bottom: 20px;
}
.article-body .body-text h2 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(26px, 3.2vw, 36px);
 margin: 48px 0 16px;
 background: var(--gradient-stat);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -0.02em;
}
.article-body .body-text h3 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(20px, 2.4vw, 26px);
 margin: 36px 0 12px;
 color: var(--accent);
}
.article-body .body-text blockquote {
 margin: 32px 0;
 padding: 20px 24px 20px 28px;
 border-left: 4px solid var(--accent);
 background: rgba(212, 165, 86, 0.04);
 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 font-style: italic;
 font-size: 19px;
 color: var(--fg);
 line-height: 1.6;
}
.article-body .body-text blockquote cite {
 display: block;
 margin-top: 8px;
 font-size: 14px;
 font-style: normal;
 color: var(--muted);
}
.article-body .body-text .inline-image {
 margin: 36px 0;
 border-radius: var(--radius-sm);
 overflow: hidden;
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
}
.article-body .body-text .inline-image img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
 display: block;
}
.article-body .body-text .inline-image .placeholder-img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
 background: linear-gradient(135deg, #1a1a24, #2a2a38);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 font-size: 13px;
}
.article-body .body-text .inline-image .caption {
 padding: 10px 16px;
 font-size: 13px;
 color: var(--muted);
 border-top: 1px solid var(--border-glass);
 background: rgba(0, 0, 0, 0.15);
}
.article-body .body-text ul,
.article-body .body-text ol {
 margin: 16px 0 20px;
 padding-left: 24px;
 color: #d0d0d0;
}
.article-body .body-text li {
 margin-bottom: 8px;
}

/* -- Article CTA -- */
.article-cta {
 padding: 40px 0 80px;
}
.article-cta .container-narrow {
 max-width: var(--content-max);
}
.article-cta .cta-card {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 padding: 40px 36px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 165, 86, 0.06);
 transition: border-color 0.3s ease;
 text-align: center;
}
.article-cta .cta-card:hover {
 border-color: rgba(212, 165, 86, 0.2);
}
.article-cta .cta-card h2 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(26px, 3vw, 36px);
 margin-bottom: 12px;
 letter-spacing: -0.02em;
}
.article-cta .cta-card p {
 color: var(--muted);
 font-size: 17px;
 margin-bottom: 28px;
 max-width: 520px;
 margin-left: auto;
 margin-right: auto;
}
.article-cta .cta-card .cta-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 justify-content: center;
}

/* ============================================================
FOOTER
============================================================ */
.site-footer {
 background: #050508;
 border-top: 1px solid var(--border-glass);
 padding: 48px 0 24px;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1.5fr;
 gap: 40px;
 margin-bottom: 32px;
}
.footer-col .footer-logo {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: 18px;
 letter-spacing: -0.02em;
 margin-bottom: 8px;
}
.footer-col .footer-logo .accent {
 color: var(--accent);
}
.footer-col .footer-desc {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.6;
 max-width: 280px;
}
.footer-col h4 {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--fg);
 margin-bottom: 16px;
}
.footer-col .footer-contact {
 font-size: 15px;
 color: var(--fg);
 display: block;
 margin-bottom: 6px;
 transition: color 0.2s ease;
}
.footer-col .footer-contact:hover {
 color: var(--accent);
}
.footer-col .footer-email {
 font-size: 14px;
 color: var(--muted);
 display: block;
 transition: color 0.2s ease;
}
.footer-col .footer-email:hover {
 color: var(--accent);
}
.footer-socials {
 display: flex;
 gap: 14px;
 margin-top: 12px;
}
.footer-socials a {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 1px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 transition: all 0.25s ease;
 background: rgba(255, 255, 255, 0.02);
}
.footer-socials a:hover {
 transform: translateY(-2px);
}
.footer-socials a[aria-label="VK"]:hover {
 color: #4a76a8;
 border-color: #4a76a8;
 background: rgba(74, 118, 168, 0.1);
}
.footer-socials a[aria-label="WhatsApp"]:hover {
 color: #25D366;
 border-color: #25D366;
 background: rgba(37, 211, 102, 0.1);
}
.footer-socials a[aria-label="Telegram"]:hover {
 color: #0088cc;
 border-color: #0088cc;
 background: rgba(0, 136, 204, 0.1);
}
.footer-socials a svg {
 width: 18px;
 height: 18px;
 fill: currentColor;
 stroke: none;
}
.footer-social-label {
 font-size: 13px;
 color: var(--muted);
 margin-top: 16px;
 display: block;
}
.footer-bottom {
 border-top: 1px solid var(--border-glass);
 padding-top: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px;
 font-size: 12px;
 color: var(--muted);
}
.footer-bottom a {
 color: var(--muted);
 transition: color 0.2s ease;
}
.footer-bottom a:hover {
 color: var(--accent);
}

/* ============================================================
MODAL OVERLAY
============================================================ */
.modal-overlay {
 position: fixed;
 inset: 0;
 z-index: 10000;
 background: rgba(0, 0, 0, 0.75);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 display: none;
 align-items: center;
 justify-content: center;
 padding: 24px;
}
.modal-overlay.active {
 display: flex;
}
.modal-box {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 padding: 40px 36px;
 max-width: 480px;
 width: 100%;
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
 position: relative;
 animation: modal-in 0.25s ease;
}
@keyframes modal-in {
 from {
 opacity: 0;
 transform: scale(0.96) translateY(12px);
 }
 to {
 opacity: 1;
 transform: scale(1) translateY(0);
 }
}
.modal-close {
 position: absolute;
 top: 16px;
 right: 16px;
 z-index: 5;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.04);
 border: none;
 color: var(--muted);
 font-size: 20px;
 cursor: pointer;
 display: grid;
 place-items: center;
 transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover {
 background: rgba(255, 255, 255, 0.08);
 color: var(--fg);
}
.modal-box h3 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 24px;
 margin-bottom: 8px;
}
.modal-box p {
 font-size: 15px;
 color: var(--muted);
 margin-bottom: 24px;
}
.modal-form {
 display: flex;
 flex-direction: column;
 gap: 14px;
}
.modal-form input {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius-sm);
 padding: 14px 18px;
 font-size: 15px;
 font-family: var(--font-body);
 color: var(--fg);
 outline: none;
 transition: border-color 0.2s ease;
}
.modal-form input:focus {
 border-color: var(--accent);
}
.modal-form input::placeholder {
 color: var(--muted);
}
.modal-form .btn {
 width: 100%;
 margin-top: 4px;
}

/* Lightbox */
.lightbox-overlay {
 position: fixed;
 inset: 0;
 z-index: 10001;
 background: rgba(0, 0, 0, 0.85);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 display: none;
 align-items: center;
 justify-content: center;
}
.lightbox-overlay.active {
 display: flex;
}
.lightbox-content {
 max-width: 90vw;
 max-height: 85vh;
 border-radius: var(--radius-sm);
 overflow: hidden;
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 position: relative;
 animation: modal-in 0.25s ease;
}
.lightbox-content .lightbox-placeholder {
 min-width: 280px;
 min-height: 200px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 60px 40px;
 font-size: 16px;
 color: var(--muted);
 background: linear-gradient(135deg, #1a1a24, #2a2a38);
}
.lightbox-nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 100%;
 display: flex;
 justify-content: space-between;
 padding: 0 12px;
 pointer-events: none;
}
.lightbox-nav button {
 pointer-events: auto;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1px solid var(--border-glass);
 background: rgba(0, 0, 0, 0.5);
 backdrop-filter: blur(4px);
 color: var(--fg);
 font-size: 20px;
 cursor: pointer;
 transition: background 0.2s ease;
 display: grid;
 place-items: center;
}
.lightbox-nav button:hover {
 background: rgba(255, 255, 255, 0.1);
}
.lightbox-close {
 position: absolute;
 top: 12px;
 right: 12px;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 border: none;
 background: rgba(0, 0, 0, 0.4);
 backdrop-filter: blur(4px);
 color: var(--fg);
 font-size: 20px;
 cursor: pointer;
 display: grid;
 place-items: center;
 transition: background 0.2s ease;
 z-index: 2;
}
.lightbox-close:hover {
 background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
 .header-nav {
 gap: 16px;
 }
 .header-phone {
 font-size: 13px;
 }
 .header-btn {
 font-size: 12px;
 padding: 8px 16px;
 }
 .hero .container {
 grid-template-columns: 1fr;
 gap: 40px;
 text-align: center;
 }
 .hero p {
 margin-left: auto;
 margin-right: auto;
 }
 .hero .features-mini {
 justify-content: center;
 }
 .hero-actions {
 justify-content: center;
 }
 .hero-visual .photo-frame {
 max-width: 400px;
 margin: 0 auto;
 }
 .stats-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .masonry {
 grid-template-columns: repeat(2, 1fr);
 }
 .masonry-item:nth-child(1) {
 grid-column: span 2;
 grid-row: span 1;
 aspect-ratio: 2/1;
 }
 .masonry-item:nth-child(4) {
 grid-column: span 2;
 }
 .masonry-item:nth-child(7) {
 grid-column: span 2;
 }
 .pricing-grid {
 grid-template-columns: 1fr;
 max-width: 480px;
 margin: 0 auto;
 }
 .program-row {
 grid-template-columns: 1fr;
 gap: 32px;
 text-align: center;
 }
 .program-row.reverse {
 direction: ltr;
 }
 .program-text p {
 margin: 0 auto;
 }
 .program-visual {
 max-width: 480px;
 margin: 0 auto;
 }
 .cta-block .container {
 grid-template-columns: 1fr;
 text-align: center;
 }
 .cta-right {
 border-left: none;
 padding-left: 0;
 align-items: center;
 }
 .cta-actions {
 justify-content: center;
 }
 .cta-socials {
 justify-content: center;
 }
 .cta-block .section-sub {
 margin: 0 auto;
 }
 .footer-grid {
 grid-template-columns: 1fr 1fr;
 }
 .footer-col:first-child {
 grid-column: span 2;
 }
}
@media (max-width: 768px) {
 .header-nav {
 display: none;
 }
 .site-header .container {
 justify-content: space-between;
 }
 .mobile-menu-toggle {
 display: flex;
 }
 .mobile-menu-open .header-nav {
 display: flex;
 flex-direction: column;
 position: absolute;
 top: var(--header-h);
 left: 0;
 right: 0;
 background: rgba(10, 10, 14, 0.95);
 backdrop-filter: blur(16px);
 padding: 20px 24px;
 gap: 20px;
 border-bottom: 1px solid var(--border-glass);
 }
 .hero h1 {
 font-size: clamp(28px, 10vw, 42px);
 }
 .hero {
 padding: calc(var(--header-h) + 24px) 0 60px;
 min-height: auto;
 }
 .hero-visual .photo-frame {
 max-width: 300px;
 }
 .stats-grid {
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 }
 .stat-card {
 padding: 24px 16px 20px;
 }
 .stat-number {
 font-size: 36px;
 }
 .masonry {
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 }
 .masonry-item:nth-child(1) {
 grid-column: span 2;
 }
 .masonry-item:nth-child(4) {
 grid-column: span 2;
 }
 .masonry-item:nth-child(7) {
 grid-column: span 2;
 }
 .pricing-card {
 padding: 28px 20px 24px;
 }
 .btn-lg {
 padding: 16px 32px;
 font-size: 16px;
 }
 .cta-phone {
 font-size: 24px;
 }
 .section-title {
 font-size: clamp(24px, 8vw, 34px);
 }
 .section-sub {
 font-size: 16px;
 }
 .footer-grid {
 grid-template-columns: 1fr;
 }
 .footer-col:first-child {
 grid-column: span 1;
 }
 .footer-bottom {
 flex-direction: column;
 text-align: center;
 }
 .header-phone,
 .header-btn {
 display: none;
 }
}

/* Article responsive */
@media (max-width: 600px) {
 .article-hero h1 {
 font-size: clamp(24px, 8vw, 34px);
 }
 .article-lead {
 font-size: 17px;
 }
 .article-body .body-text {
 font-size: 16px;
 }
 .article-body .body-text blockquote {
 font-size: 17px;
 padding: 16px 16px 16px 20px;
 }
 .article-cta .cta-card {
 padding: 28px 20px;
 }
 .btn-lg {
 padding: 16px 28px;
 font-size: 16px;
 }
 .breadcrumbs {
 font-size: 12px;
 }
}

/* ============================================================
REVEAL ANIMATIONS
============================================================ */
.reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}
.reveal-delay-1 {
 transition-delay: 0.1s;
}
.reveal-delay-2 {
 transition-delay: 0.2s;
}
.reveal-delay-3 {
 transition-delay: 0.3s;
}
.reveal-delay-4 {
 transition-delay: 0.4s;
}

/* ============================================================
RESPONSIVE VIDEO IFRAME
============================================================ */
#videoPlayerInner {
    box-sizing: content-box;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
}
#videoPlayerInner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* ============================================================
GEO PAGE — Hero (Где мы работаем)
============================================================ */
.geo-hero {
 padding: calc(var(--header-h) + 48px) 0 80px;
 position: relative;
 overflow: hidden;
 min-height: 70vh;
 display: flex;
 align-items: center;
}
.geo-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse 70% 40% at 30% 50%, rgba(212, 165, 86, 0.06) 0%, transparent 60%),
 radial-gradient(ellipse 50% 50% at 70% 60%, rgba(239, 68, 68, 0.04) 0%, transparent 50%);
 pointer-events: none;
 z-index: 0;
}
.geo-map-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 opacity: 0.08;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cpath fill='none' stroke='%23d4a556' stroke-width='1.2' opacity='0.5' d='M100 340 L120 280 L150 250 L200 220 L250 200 L300 180 L340 160 L380 140 L420 120 L450 110 L470 130 L440 160 L400 180 L360 200 L330 220 L300 250 L270 280 L240 300 L200 320 L160 340 L130 350 L100 340Z'/%3E%3Ccircle cx='150' cy='230' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='220' cy='200' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='280' cy='180' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='340' cy='160' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='400' cy='140' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='180' cy='260' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='250' cy='240' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='320' cy='210' r='2' fill='%23d4a556' opacity='0.7'/%3E%3Ccircle cx='400' cy='180' r='2' fill='%23d4a556' opacity='0.7'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center 40%;
 background-size: 80% auto;
}
.geo-map-dots {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
}
.geo-map-dots .dot {
 position: absolute;
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 12px var(--accent-glow), 0 0 30px var(--accent-glow);
 opacity: 0.5;
 animation: dot-pulse 3s ease-in-out infinite;
}
.geo-map-dots .dot:nth-child(2) {
 animation-delay: 0.8s;
 width: 8px;
 height: 8px;
}
.geo-map-dots .dot:nth-child(3) {
 animation-delay: 1.6s;
}
.geo-map-dots .dot:nth-child(4) {
 animation-delay: 0.4s;
 width: 5px;
 height: 5px;
}
.geo-map-dots .dot:nth-child(5) {
 animation-delay: 2.2s;
 width: 7px;
 height: 7px;
}
@keyframes dot-pulse {
 0%,
 100% {
 opacity: 0.3;
 transform: scale(1);
 }
 50% {
 opacity: 0.9;
 transform: scale(1.8);
 }
}
.geo-hero .container {
 position: relative;
 z-index: 2;
 text-align: center;
}
.geo-hero h1 {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(34px, 5vw, 60px);
 line-height: 1.1;
 letter-spacing: -0.025em;
 margin-bottom: 20px;
 max-width: 860px;
 margin-left: auto;
 margin-right: auto;
}
.geo-hero h1 .accent-word {
 color: var(--accent);
}
.geo-hero p {
 font-size: 19px;
 color: var(--muted);
 max-width: 680px;
 margin: 0 auto 24px;
 line-height: 1.7;
}
.geo-hero .geo-badge {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-size: 15px;
 font-weight: 600;
 color: var(--accent);
 background: rgba(212, 165, 86, 0.10);
 border: 1px solid rgba(212, 165, 86, 0.18);
 padding: 10px 24px;
 border-radius: 50px;
 letter-spacing: 0.01em;
 backdrop-filter: blur(4px);
}

/* ============================================================
GEO PAGE — Fridge Magnets
============================================================ */
.fridge {
 padding: var(--section-pad) 0 calc(var(--section-pad) + 32px);
 background: #0d0d10;
 position: relative;
}

.fridge::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image: repeating-linear-gradient(90deg,
 transparent 0px,
 rgba(255, 255, 255, 0.012) 1px,
 transparent 2px,
 transparent 4px);
 background-size: 4px 100%;
 pointer-events: none;
 z-index: 0;
 overflow: hidden;
}
.fridge .container {
 position: relative;
 z-index: 1;
}
.fridge .section-header {
 text-align: center;
 margin-bottom: 48px;
}
.fridge .section-header h2 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(30px, 4vw, 48px);
 letter-spacing: -0.02em;
 margin-bottom: 12px;
}
.fridge .section-header p {
 font-size: 17px;
 color: var(--muted);
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}
.magnet-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}
.magnet-item {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: #fff0f0;
    cursor: default;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
    text-align: center;
    padding: 16px;
    will-change: transform;
}
.magnet-item .icon {
 font-size: 40px;
 margin-bottom: 8px;
 display: block;
}
.magnet-item .city-name {
 font-size: 16px;
 font-weight: 600;
 line-height: 1.2;
}
.magnet-item:hover {
 transform: rotate(0deg) scale(1.05) !important;
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
 .magnet-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
 }
}
@media (max-width: 768px) {
 .magnet-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 16px;
 }
 .magnet-item .icon {
 font-size: 32px;
 }
 .magnet-item .city-name {
 font-size: 15px;
 }
}
@media (max-width: 480px) {
 .magnet-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
 }
 .magnet-item {
 padding: 10px;
 }
 .magnet-item .magnet-icon-img,
 .magnet-item .magnet-fallback {
 width: 70px;
 height: 70px;
 font-size: 24px;
 }
 .magnet-item .city-name {
 font-size: 14px;
 }
}

/* ============================================================
GEO PAGE — Logistics
============================================================ */
.logistics {
 padding: var(--section-pad) 0;
 background: var(--bg);
}
.logistics .section-header {
 margin-bottom: 48px;
 text-align: center;
}
.logistics .section-header h2 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(30px, 4vw, 48px);
 letter-spacing: -0.02em;
 margin-bottom: 12px;
}
.logistics .section-header p {
 max-width: 580px;
 margin: 0 auto;
 color: var(--muted);
}
.logistics-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}
.log-card {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 padding: 36px 28px 32px;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 transition: transform 0.3s ease, border-color 0.3s ease;
}
.log-card:hover {
 transform: translateY(-6px);
 border-color: rgba(212, 165, 86, 0.2);
}
.log-card .icon-box {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: rgba(212, 165, 86, 0.08);
 border: 1px solid rgba(212, 165, 86, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 26px;
 margin-bottom: 20px;
}
.log-card h3 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 20px;
 margin-bottom: 10px;
 letter-spacing: -0.01em;
}
.log-card p {
 font-size: 15px;
 color: var(--muted);
 line-height: 1.6;
}
.log-card p strong {
 color: var(--fg);
}
@media (max-width: 1024px) {
 .logistics-grid {
 grid-template-columns: 1fr 1fr;
 }
}
@media (max-width: 768px) {
 .logistics-grid {
 grid-template-columns: 1fr;
 }
}

/* ============================================================
GEO PAGE — CTA
============================================================ */
.geo-cta {
 padding: 60px 0 80px;
 background: linear-gradient(135deg, #1a1408 0%, #0f0e0a 100%);
 border-top: 1px solid rgba(212, 165, 86, 0.08);
 border-bottom: 1px solid rgba(212, 165, 86, 0.08);
 position: relative;
}
.geo-cta::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(212, 165, 86, 0.05) 0%, transparent 70%);
 pointer-events: none;
}
.geo-cta .container {
 position: relative;
 z-index: 2;
 text-align: center;
}
.geo-cta h2 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(28px, 3.6vw, 44px);
 letter-spacing: -0.02em;
 margin-bottom: 12px;
}
.geo-cta p {
 font-size: 17px;
 color: var(--muted);
 max-width: 550px;
 margin: 0 auto 28px;
}
.geo-cta .cta-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: center;
 align-items: center;
}
.geo-cta .cta-phone-large {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(24px, 2.8vw, 34px);
 color: var(--accent);
 transition: color 0.2s ease;
 margin-left: 8px;
}
.geo-cta .cta-phone-large:hover {
 color: var(--fg);
}

/* Geo page — magnet images */
.magnet-item .magnet-icon-img {
    width: 260px;
    height: 260px;
    border-radius: 6px;
    object-fit: cover;
    margin-bottom: 10px;
    display: block;
}
.magnet-item .magnet-fallback {
 width: 260px;
 height: 260px;
 border-radius: 6px;
 background: linear-gradient(145deg, #e0dcd4, #d0ccc4);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 48px;
 font-weight: 800;
 color: #666;
 margin-bottom: 10px;
}
@media (max-width: 768px) {
 .magnet-item .magnet-icon-img,
 .magnet-item .magnet-fallback {
 width: 80px;
 height: 80px;
 font-size: 28px;
 }
}


/* ============================================================
GALLERY PAGE — Portfolio Hero
============================================================ */
.portfolio-hero {
 padding: calc(var(--header-h) + 60px) 0 60px;
 text-align: center;
 position: relative;
 overflow: hidden;
}
.portfolio-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212, 165, 86, 0.06) 0%, transparent 60%);
 pointer-events: none;
}
.portfolio-hero .container {
 position: relative;
 z-index: 1;
}
.portfolio-hero h1 {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(38px, 5vw, 64px);
 letter-spacing: -0.025em;
 margin-bottom: 20px;
}
.portfolio-hero p {
 font-size: 19px;
 color: var(--muted);
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.7;
}

/* ============================================================
GALLERY PAGE — Portfolio Sections (weddings, anniversaries, corporate)
============================================================ */
.portfolio-section {
 padding: var(--section-pad) 0;
}
.portfolio-section:nth-child(even) {
 background: var(--bg);
}
.portfolio-section:nth-child(odd) {
 background: #0d0d12;
}
.portfolio-section .section-header {
 text-align: center;
 margin-bottom: 48px;
}
.portfolio-section .section-header h2 {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(30px, 4vw, 48px);
 letter-spacing: -0.02em;
 margin-bottom: 16px;
}
.portfolio-section .section-header p {
 font-size: 17px;
 color: var(--muted);
 max-width: 680px;
 margin: 0 auto;
 line-height: 1.7;
}

/* ============================================================
GALLERY PAGE — Media Grid & Cards
============================================================ */
.media-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}
.media-card {
 position: relative;
 border-radius: var(--radius-sm);
 overflow: hidden;
 aspect-ratio: 16 / 9;
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 cursor: pointer;
 transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
 display: flex;
 align-items: center;
 justify-content: center;
}
.media-card:hover {
 transform: translateY(-4px) scale(1.01);
 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
 border-color: rgba(212, 165, 86, 0.15);
}
.media-card .card-bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 background: linear-gradient(135deg, #1a1a26, #2a2a3a);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted);
 font-size: 13px;
 z-index: 1;
}
.media-card .play-overlay {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.2);
 opacity: 0;
 transition: opacity 0.3s ease;
}
.media-card:hover .play-overlay {
 opacity: 1;
}
.media-card .play-overlay .play-icon {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: var(--accent);
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 30px var(--accent-glow);
 transition: transform 0.3s ease;
}
.media-card:hover .play-overlay .play-icon {
 transform: scale(1.1);
}
.media-card .play-overlay .play-icon svg {
 width: 22px;
 height: 22px;
 fill: #0a0a0a;
 margin-left: 2px;
}

/* VK card */
.media-card.vk-card {
 background: rgba(74, 118, 168, 0.08);
 border-color: rgba(74, 118, 168, 0.15);
 cursor: pointer;
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 position: relative;
 overflow: hidden;
}
.media-card.vk-card::before {
 content: '';
 position: absolute;
 inset: -20px;
 background: radial-gradient(ellipse at 30% 40%, rgba(74, 118, 168, 0.15) 0%, transparent 60%);
 pointer-events: none;
 z-index: 0;
 transition: opacity 0.4s ease;
}
.media-card.vk-card .vk-content {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 padding: 20px;
 text-align: center;
}
.media-card.vk-card .vk-content .vk-icon {
 width: 40px;
 height: 40px;
}
.media-card.vk-card .vk-content .vk-icon svg {
 width: 40px;
 height: 40px;
 fill: var(--vk-blue);
}
.media-card.vk-card .vk-content .vk-text {
 font-size: 14px;
 color: var(--muted);
 line-height: 1.5;
 max-width: 200px;
 font-weight: 500;
}
.media-card.vk-card:hover {
 border-color: rgba(74, 118, 168, 0.3);
 box-shadow: 0 8px 32px rgba(74, 118, 168, 0.15);
 transform: translateY(-4px) scale(1.01);
}
.media-card.vk-card:hover .vk-text {
 color: var(--fg);
}

/* Media grid responsive */
@media (max-width: 1024px) {
 .media-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 14px;
 }
}
@media (max-width: 600px) {
 .media-grid {
 grid-template-columns: 1fr;
 gap: 12px;
 }
 .media-card .play-overlay {
 opacity: 1;
 background: rgba(0, 0, 0, 0.1);
 }
 .media-card .play-overlay .play-icon {
 width: 48px;
 height: 48px;
 }
}


/* ============================================================
FAQ PAGE — Hero
============================================================ */
.faq-hero {
 padding: calc(var(--header-h) + 60px) 0 40px;
 text-align: center;
 position: relative;
}
.faq-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212, 165, 86, 0.06) 0%, transparent 60%);
 pointer-events: none;
}
.faq-hero .container {
 position: relative;
 z-index: 1;
}
.faq-hero h1 {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(36px, 5vw, 56px);
 letter-spacing: -0.025em;
 margin-bottom: 16px;
}
.faq-hero p {
 font-size: 18px;
 color: var(--muted);
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.7;
}

/* ============================================================
FAQ PAGE — Accordion
============================================================ */
.faq-section {
 padding: 40px 0 var(--section-pad);
 background: var(--bg);
}
.faq-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.faq-item {
 background: var(--surface-glass);
 border: 1px solid var(--border-glass);
 border-radius: var(--radius);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 overflow: hidden;
 transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.active {
 border-color: rgba(212, 165, 86, 0.2);
 box-shadow: 0 4px 24px rgba(212, 165, 86, 0.06);
}
.faq-question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 24px;
 cursor: pointer;
 gap: 16px;
 user-select: none;
 transition: background 0.2s ease;
}
.faq-question:hover {
 background: rgba(255, 255, 255, 0.02);
}
.faq-question .q-text {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 16px;
 line-height: 1.4;
 color: var(--fg);
 flex: 1;
}
.faq-question .q-icon {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 border: 1.5px solid var(--border-glass);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 font-weight: 300;
 color: var(--accent);
 transition: transform 0.35s ease, background 0.2s ease, border-color 0.2s ease;
}
.faq-item.active .q-icon {
 transform: rotate(45deg);
 background: rgba(212, 165, 86, 0.08);
 border-color: var(--accent);
}
.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}
.faq-item.active .faq-answer {
 max-height: 400px;
}
.faq-answer .a-inner {
 padding: 0 24px 20px;
 font-size: 15px;
 color: var(--muted);
 line-height: 1.7;
}
.faq-answer .a-inner p {
 margin-bottom: 12px;
}
.faq-answer .a-inner p:last-child {
 margin-bottom: 0;
}
.faq-answer .a-inner strong {
 color: var(--fg);
 font-weight: 600;
}

/* FAQ responsive */
@media (max-width: 600px) {
 .faq-question {
 padding: 16px 16px;
 }
 .faq-question .q-text {
 font-size: 14px;
 }
 .faq-answer .a-inner {
 padding: 0 16px 16px;
 font-size: 14px;
 }
 .faq-hero h1 {
 font-size: clamp(26px, 8vw, 36px);
 }
 .faq-hero p {
 font-size: 16px;
 }
}