/* ============================================
       ОКНА ТАВР — РЕДИЗАЙН 2026
       Современный премиальный стиль
       ============================================ */

   :root {
       --bg: #faf8f5;
       --surface: #ffffff;
       --surface-alt: #f2ede6;
       --ink: #16130f;
       --ink-soft: #2e2a24;
       --ink-muted: #6b6560;
       --accent: #c8874b;
       --accent-dark: #a06a34;
       --accent-light: #e8d5bf;
       --border: #e8e2d9;
       --dark-section: #16130f;
       --gold: #e0b878;
       --success: #2e7d32;
       --error: #c62828;
       --radius: 2px;
       --shadow-sm: 0 2px 8px rgba(22, 19, 15, 0.04);
       --shadow-md: 0 12px 32px -8px rgba(22, 19, 15, 0.12);
       --shadow-lg: 0 24px 48px -12px rgba(22, 19, 15, 0.18);
       --font-display: 'Space Grotesk', sans-serif;
       --font-body: 'Inter', sans-serif;
       --container: 1280px;
   }

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

   html {
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%;
   }

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

   img {
       max-width: 100%;
       height: auto;
       display: block;
   }

   a {
       color: inherit;
       text-decoration: none;
   }

   button {
       font: inherit;
       cursor: pointer;
   }

   ::-webkit-scrollbar {
       width: 8px;
   }

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

   ::-webkit-scrollbar-thumb {
       background: var(--accent);
   }

   .container {
       max-width: var(--container);
       margin: 0 auto;
       padding: 0 24px;
       width: 100%;
   }

   section {
       padding: 88px 0;
       position: relative;
   }

   @media (max-width: 768px) {
       section {
           padding: 56px 0;
       }
   }

   /* ===== Typography ===== */
   .eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       color: var(--accent);
       margin-bottom: 20px;
   }

   .eyebrow::before {
       content: '';
       width: 24px;
       height: 2px;
       background: var(--accent);
   }

   .section-title {
       font-family: var(--font-display);
       font-size: clamp(1.8rem, 4vw, 3rem);
       font-weight: 700;
       line-height: 1.15;
       letter-spacing: -0.02em;
       margin-bottom: 20px;
       color: var(--ink);
   }

   .section-title em {
       font-style: normal;
       color: var(--accent);
   }

   .section-sub {
       font-size: 1.05rem;
       color: var(--ink-muted);
       max-width: 620px;
       line-height: 1.7;
   }

   .section-head {
       margin-bottom: 48px;
   }

   @media (max-width: 768px) {
       .section-head {
           margin-bottom: 32px;
       }
   }

   /* ===== Buttons ===== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 16px 32px;
       font-family: var(--font-body);
       font-weight: 600;
       font-size: 0.9rem;
       letter-spacing: 0.02em;
       border: 2px solid transparent;
       border-radius: var(--radius);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       cursor: pointer;
       white-space: nowrap;
   }

   .btn-primary {
       background: var(--accent);
       color: #fff;
       border-color: var(--accent);
   }

   .btn-primary:hover {
       background: var(--accent-dark);
       border-color: var(--accent-dark);
       transform: translateY(-2px);
       box-shadow: 0 12px 24px -8px rgba(200, 135, 75, 0.5);
   }

   .btn-outline {
       background: transparent;
       color: var(--ink);
       border-color: var(--ink);
   }

   .btn-outline:hover {
       background: var(--ink);
       color: #fff;
       transform: translateY(-2px);
   }

   .btn-ghost {
       background: rgba(255, 255, 255, 0.1);
       color: #fff;
       border-color: rgba(255, 255, 255, 0.3);
       backdrop-filter: blur(8px);
   }

   .btn-ghost:hover {
       background: rgba(255, 255, 255, 0.2);
       border-color: #fff;
   }

   .btn-sm {
       padding: 10px 20px;
       font-size: 0.82rem;
   }

   /* ===== Icons ===== */
   .icon {
       display: inline-block;
       width: 1em;
       height: 1em;
       vertical-align: -0.125em;
       fill: currentColor;
       flex-shrink: 0;
   }

   /* ============================================
       HEADER
       ============================================ */
   .site-header {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 1000;
       background: rgba(250, 248, 245, 0.85);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       border-bottom: 1px solid var(--border);
       transition: all 0.3s ease;
   }

   .site-header.scrolled {
       background: rgba(250, 248, 245, 0.95);
       box-shadow: var(--shadow-sm);
   }

   .header-inner {
       display: flex;
       align-items: center;
       gap: 24px;
       padding: 14px 24px;
       max-width: 1440px;
       margin: 0 auto;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-shrink: 0;
   }

   .brand-logo {
       width: 44px;
       height: 44px;
       flex-shrink: 0;
   }

   .brand-name {
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1.25rem;
       line-height: 1.1;
       letter-spacing: -0.01em;
   }

   .brand-name span {
       color: var(--accent);
   }

   .brand-tagline {
       font-size: 0.68rem;
       color: var(--ink-muted);
       letter-spacing: 0.08em;
       text-transform: uppercase;
       margin-top: 2px;
   }

   .header-nav {
       display: flex;
       align-items: center;
       gap: 4px;
       margin-left: auto;
   }

   .header-nav a {
       padding: 10px 14px;
       font-size: 0.88rem;
       font-weight: 500;
       color: var(--ink-soft);
       transition: color 0.2s;
       border-radius: var(--radius);
   }

   .header-nav a:hover {
       color: var(--accent);
   }

   .header-cta {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-shrink: 0;
   }

   .header-phone {
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       line-height: 1.2;
   }

   .header-phone a {
       font-weight: 700;
       font-size: 0.98rem;
       color: var(--ink);
       transition: color 0.2s;
   }

   .header-phone a:hover {
       color: var(--accent);
   }

   .header-phone small {
       font-size: 0.7rem;
       color: var(--ink-muted);
   }

   .icon-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       border: 1px solid var(--border);
       background: var(--surface);
       border-radius: var(--radius);
       color: var(--ink-soft);
       transition: all 0.2s;
   }

   .icon-btn:hover {
       border-color: var(--accent);
       color: var(--accent);
   }

   .icon-btn.tg:hover {
       color: #26A5E4;
       border-color: #26A5E4;
   }

   .icon-btn.max:hover {
       color: #5B4A9E;
       border-color: #5B4A9E;
   }

   .burger {
       display: none;
       width: 44px;
       height: 44px;
       align-items: center;
       justify-content: center;
       background: var(--ink);
       color: #fff;
       border: none;
       border-radius: var(--radius);
       cursor: pointer;
   }

   /* Mobile menu */
   .mobile-nav {
       display: none;
       position: fixed;
       top: 73px;
       left: 0;
       right: 0;
       background: var(--surface);
       border-bottom: 1px solid var(--border);
       padding: 20px 24px;
       flex-direction: column;
       gap: 4px;
       box-shadow: var(--shadow-md);
       z-index: 999;
   }

   .mobile-nav.active {
       display: flex;
   }

   .mobile-nav a {
       padding: 14px 16px;
       font-weight: 500;
       color: var(--ink-soft);
       border-bottom: 1px solid var(--border);
   }

   .mobile-nav a:last-child {
       border-bottom: none;
   }

   @media (max-width: 1100px) {
       .header-nav {
           display: none;
       }

       .burger {
           display: inline-flex;
       }
   }

   @media (max-width: 720px) {
       .header-inner {
           padding: 10px 16px;
           gap: 12px;
       }

       .header-phone small {
           display: none;
       }

       .header-phone a {
           font-size: 0.85rem;
       }

       .brand-logo {
           width: 36px;
           height: 36px;
       }

       .brand-name {
           font-size: 1.05rem;
       }

       .brand-tagline {
           display: none;
       }

       .header-cta .icon-btn {
           width: 36px;
           height: 36px;
       }
   }

   @media (max-width: 520px) {
       .header-phone {
           display: none;
       }

       .header-cta .btn {
           display: none;
       }
   }

   /* ============================================
       HERO
       ============================================ */
   .hero {
       position: relative;
       margin-top: 73px;
       padding: 80px 0 100px;
       background: var(--dark-section);
       color: #fff;
       overflow: hidden;
   }

   @media (max-width: 720px) {
       .hero {
           margin-top: 60px;
           padding: 48px 0 64px;
       }
   }

   .hero::before {
       content: '';
       position: absolute;
       top: -40%;
       right: -20%;
       width: 80%;
       height: 160%;
       background: radial-gradient(circle, rgba(200, 135, 75, 0.18) 0%, transparent 60%);
       pointer-events: none;
   }

   .hero::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, rgba(200, 135, 75, 0.4), transparent);
   }

   .hero-grid {
       display: grid;
       grid-template-columns: 1.1fr 1fr;
       gap: 60px;
       align-items: center;
       position: relative;
       z-index: 1;
   }

   @media (max-width: 980px) {
       .hero-grid {
           grid-template-columns: 1fr;
           gap: 40px;
       }
   }

   .hero-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 8px 16px;
       background: rgba(200, 135, 75, 0.15);
       border: 1px solid rgba(200, 135, 75, 0.3);
       border-radius: 100px;
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--gold);
       margin-bottom: 28px;
   }

   .hero-eyebrow .dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--gold);
       animation: pulseDot 2s infinite;
   }

   @keyframes pulseDot {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.3;
       }
   }

   .hero-title {
       font-family: var(--font-display);
       font-size: clamp(2.2rem, 5.5vw, 4.2rem);
       font-weight: 700;
       line-height: 1.05;
       letter-spacing: -0.03em;
       margin-bottom: 24px;
   }

   .hero-title .accent {
       color: var(--gold);
       position: relative;
       white-space: nowrap;
   }

   .hero-desc {
       font-size: 1.15rem;
       color: rgba(255, 255, 255, 0.7);
       max-width: 520px;
       margin-bottom: 36px;
       line-height: 1.65;
   }

   .hero-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 16px;
       margin-bottom: 48px;
   }

   .hero-stats {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 32px;
       padding-top: 36px;
       border-top: 1px solid rgba(255, 255, 255, 0.12);
       max-width: 560px;
   }

   .hero-stat-value {
       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 700;
       color: var(--gold);
       line-height: 1;
       margin-bottom: 6px;
   }

   .hero-stat-label {
       font-size: 0.8rem;
       color: rgba(255, 255, 255, 0.55);
       line-height: 1.4;
   }

   .hero-visual {
       position: relative;
   }

   .hero-image-wrap {
       position: relative;
       border-radius: 4px;
       overflow: hidden;
       box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
   }

   .hero-image-wrap img {
       width: 100%;
       height: auto;
       display: block;
   }

   .hero-badge {
       position: absolute;
       bottom: 24px;
       left: 24px;
       background: rgba(22, 19, 15, 0.9);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(200, 135, 75, 0.4);
       padding: 16px 20px;
       display: flex;
       align-items: center;
       gap: 14px;
       border-radius: 4px;
   }

   .hero-badge-icon {
       width: 40px;
       height: 40px;
       background: var(--accent);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       flex-shrink: 0;
   }

   .hero-badge-text {
       font-size: 0.82rem;
       line-height: 1.3;
   }

   .hero-badge-text strong {
       display: block;
       color: #fff;
       font-size: 0.9rem;
   }

   .hero-badge-text span {
       color: rgba(255, 255, 255, 0.6);
   }

   @media (max-width: 720px) {
       .hero-stats {
           gap: 16px;
       }

       .hero-stat-value {
           font-size: 1.5rem;
       }

       .hero-stat-label {
           font-size: 0.7rem;
       }

       .hero-badge {
           bottom: 12px;
           left: 12px;
           padding: 12px 14px;
       }

       .hero-badge-icon {
           width: 32px;
           height: 32px;
       }
   }

   /* ============================================
       PARTNERS STRIP
       ============================================ */
   .partners {
       padding: 36px 0;
       background: var(--surface);
       border-bottom: 1px solid var(--border);
   }

   .partners-inner {
       display: flex;
       align-items: center;
       gap: 48px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .partners-label {
       font-size: 0.75rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: var(--ink-muted);
       font-weight: 600;
   }

   .partners-list {
       display: flex;
       align-items: center;
       gap: 40px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .partner-item {
       font-family: var(--font-display);
       font-size: 1.15rem;
       font-weight: 700;
       color: var(--ink-soft);
       opacity: 0.5;
       transition: opacity 0.2s;
       letter-spacing: -0.01em;
   }

   .partner-item:hover {
       opacity: 1;
       color: var(--accent);
   }

   @media (max-width: 640px) {
       .partners-list {
           gap: 24px;
       }

       .partner-item {
           font-size: 0.95rem;
       }

       .partners-label {
           display: none;
       }
   }

   /* ============================================
       HOW WE WORK
       ============================================ */
   .steps-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px;
   }

   @media (max-width: 900px) {
       .steps-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 520px) {
       .steps-grid {
           grid-template-columns: 1fr;
       }
   }

   .step-card {
       position: relative;
       padding: 32px 28px;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       transition: all 0.3s;
   }

   .step-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-md);
       border-color: var(--accent-light);
   }

   .step-num {
       font-family: var(--font-display);
       font-size: 3rem;
       font-weight: 700;
       color: var(--accent-light);
       line-height: 1;
       margin-bottom: 16px;
       transition: color 0.3s;
   }

   .step-card:hover .step-num {
       color: var(--accent);
   }

   .step-title {
       font-family: var(--font-display);
       font-size: 1.2rem;
       font-weight: 600;
       margin-bottom: 10px;
   }

   .step-desc {
       font-size: 0.9rem;
       color: var(--ink-muted);
       line-height: 1.6;
   }

   /* ============================================
       CALCULATOR
       ============================================ */
   .calc-section {
       background: var(--surface-alt);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
   }

   .calc-card {
       max-width: 900px;
       margin: 0 auto;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow-md);
   }

   .calc-tabs {
       display: flex;
       border-bottom: 1px solid var(--border);
       background: var(--surface);
   }

   .calc-tab {
       flex: 1;
       padding: 20px 24px;
       background: transparent;
       border: none;
       font-family: var(--font-display);
       font-weight: 600;
       font-size: 1.05rem;
       color: var(--ink-muted);
       cursor: pointer;
       position: relative;
       transition: all 0.2s;
   }

   .calc-tab.active {
       color: var(--accent);
       background: rgba(200, 135, 75, 0.06);
   }

   .calc-tab.active::after {
       content: '';
       position: absolute;
       bottom: -1px;
       left: 0;
       right: 0;
       height: 2px;
       background: var(--accent);
   }

   .calc-tab:hover:not(.active) {
       color: var(--ink);
   }

   .calc-body {
       padding: 36px;
   }

   @media (max-width: 640px) {
       .calc-body {
           padding: 24px 20px;
       }
   }

   .calc-pane {
       display: none;
   }

   .calc-pane.active {
       display: block;
       animation: fadeUp 0.3s ease;
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(8px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .calc-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-bottom: 24px;
   }

   @media (max-width: 640px) {
       .calc-grid {
           grid-template-columns: 1fr;
           gap: 16px;
       }
   }

   .field label {
       display: block;
       font-size: 0.82rem;
       font-weight: 600;
       color: var(--ink-soft);
       margin-bottom: 8px;
       letter-spacing: 0.02em;
   }

   .field input,
   .field select,
   .field textarea {
       width: 100%;
       padding: 14px 16px;
       border: 1px solid var(--border);
       background: var(--bg);
       font-family: var(--font-body);
       font-size: 0.95rem;
       color: var(--ink);
       border-radius: var(--radius);
       transition: all 0.2s;
   }

   .field input:focus,
   .field select:focus,
   .field textarea:focus {
       outline: none;
       border-color: var(--accent);
       background: var(--surface);
       box-shadow: 0 0 0 3px rgba(200, 135, 75, 0.12);
   }

   .calc-total {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 16px;
       padding: 24px;
       background: var(--dark-section);
       color: #fff;
       border-radius: var(--radius);
       margin-top: 8px;
   }

   .calc-total-label {
       font-size: 0.9rem;
       color: rgba(255, 255, 255, 0.6);
   }

   .calc-total-value {
       font-family: var(--font-display);
       font-size: 2.2rem;
       font-weight: 700;
       color: var(--gold);
       line-height: 1;
   }

   .calc-total-note {
       font-size: 0.75rem;
       color: rgba(255, 255, 255, 0.45);
       margin-top: 4px;
   }

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

   .calc-included span {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 12px;
       background: rgba(200, 135, 75, 0.1);
       color: var(--accent-dark);
       font-size: 0.78rem;
       font-weight: 500;
       border-radius: 100px;
   }

   /* ============================================
       SERVICES
       ============================================ */
   .services-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }

   @media (max-width: 980px) {
       .services-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 620px) {
       .services-grid {
           grid-template-columns: 1fr;
       }
   }

   .service-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       transition: all 0.3s;
       display: flex;
       flex-direction: column;
   }

   .service-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-md);
       border-color: var(--accent-light);
   }

   .service-media {
       position: relative;
       aspect-ratio: 4/3;
       background: var(--surface-alt);
       overflow: hidden;
   }

   .service-slider {
       display: flex;
       height: 100%;
       transition: transform 0.35s ease;
   }

   .service-slider img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       flex-shrink: 0;
       cursor: pointer;
   }

   .service-nav {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 36px;
       height: 36px;
       background: rgba(255, 255, 255, 0.9);
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       color: var(--ink);
       z-index: 2;
       transition: all 0.2s;
       border-radius: 50%;
   }

   .service-nav:hover {
       background: var(--accent);
       color: #fff;
   }

   .service-nav.prev {
       left: 12px;
   }

   .service-nav.next {
       right: 12px;
   }

   .service-dots {
       position: absolute;
       bottom: 12px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 6px;
       z-index: 2;
   }

   .service-dot {
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.6);
       border: none;
       padding: 0;
       cursor: pointer;
       transition: all 0.2s;
   }

   .service-dot.active {
       background: #fff;
       width: 18px;
       border-radius: 3px;
   }

   .service-body {
       padding: 24px;
       display: flex;
       flex-direction: column;
       flex: 1;
   }

   .service-icon {
       width: 44px;
       height: 44px;
       background: var(--surface-alt);
       color: var(--accent);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 16px;
       font-size: 1.4rem;
       border-radius: var(--radius);
   }

   .service-title {
       font-family: var(--font-display);
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: 8px;
   }

   .service-desc {
       font-size: 0.9rem;
       color: var(--ink-muted);
       line-height: 1.55;
       margin-bottom: 20px;
       flex: 1;
   }

   .service-price {
       display: flex;
       align-items: baseline;
       gap: 6px;
       padding-top: 16px;
       border-top: 1px solid var(--border);
   }

   .service-price-from {
       font-size: 0.75rem;
       color: var(--ink-muted);
   }

   .service-price-value {
       font-family: var(--font-display);
       font-size: 1.3rem;
       font-weight: 700;
       color: var(--accent);
   }

   /* ============================================
       PRODUCT SPOTLIGHT
       ============================================ */
   .spotlight {
       background: var(--surface-alt);
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
   }

   .spotlight-card {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow-md);
   }

   @media (max-width: 820px) {
       .spotlight-card {
           grid-template-columns: 1fr;
       }
   }

   .spotlight-media {
       position: relative;
       min-height: 380px;
       background: var(--surface-alt);
   }

   .spotlight-media img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       inset: 0;
   }

   .spotlight-tag {
       position: absolute;
       top: 20px;
       left: 20px;
       padding: 8px 14px;
       background: var(--accent);
       color: #fff;
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       z-index: 2;
   }

   .spotlight-body {
       padding: 48px;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   @media (max-width: 820px) {
       .spotlight-body {
           padding: 32px 24px;
       }
   }

   .spotlight-title {
       font-family: var(--font-display);
       font-size: 1.9rem;
       font-weight: 700;
       line-height: 1.15;
       margin-bottom: 12px;
   }

   .spotlight-title span {
       color: var(--accent);
   }

   .spotlight-desc {
       color: var(--ink-muted);
       margin-bottom: 24px;
       line-height: 1.6;
   }

   .spotlight-features {
       list-style: none;
       margin-bottom: 28px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .spotlight-features li {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.92rem;
   }

   .spotlight-features .icon {
       color: var(--accent);
       font-size: 1.1em;
   }

   .spotlight-price {
       display: flex;
       align-items: baseline;
       gap: 10px;
       margin-bottom: 24px;
       padding-top: 20px;
       border-top: 1px solid var(--border);
   }

   .spotlight-price-value {
       font-family: var(--font-display);
       font-size: 2.2rem;
       font-weight: 700;
       color: var(--accent);
       line-height: 1;
   }

   .spotlight-price-note {
       font-size: 0.8rem;
       color: var(--ink-muted);
   }

   .spotlight-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
   }

   /* ============================================
       PROJECTS
       ============================================ */
   .projects-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }

   @media (max-width: 900px) {
       .projects-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 560px) {
       .projects-grid {
           grid-template-columns: 1fr;
       }
   }

   .project-card {
       position: relative;
       border-radius: var(--radius);
       overflow: hidden;
       background: var(--ink);
       cursor: pointer;
       aspect-ratio: 4/3;
   }

   .project-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .project-card:hover img {
       transform: scale(1.06);
   }

   .project-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(22, 19, 15, 0.92) 0%, rgba(22, 19, 15, 0.3) 50%, transparent 100%);
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: 24px;
       color: #fff;
   }

   .project-type {
       font-size: 0.7rem;
       font-weight: 600;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--gold);
       margin-bottom: 6px;
   }

   .project-name {
       font-family: var(--font-display);
       font-size: 1.15rem;
       font-weight: 600;
       margin-bottom: 4px;
   }

   .project-meta {
       display: flex;
       gap: 16px;
       font-size: 0.8rem;
       color: rgba(255, 255, 255, 0.65);
   }

   .project-meta strong {
       color: #fff;
       font-weight: 600;
   }

   /* ============================================
       REVIEWS
       ============================================ */
   .reviews-section {
       background: var(--surface);
   }

   .reviews-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
   }

   @media (max-width: 900px) {
       .reviews-grid {
           grid-template-columns: 1fr;
       }
   }

   .review-card {
       background: var(--bg);
       border: 1px solid var(--border);
       padding: 28px;
       border-radius: var(--radius);
       display: flex;
       flex-direction: column;
       transition: all 0.3s;
   }

   .review-card:hover {
       box-shadow: var(--shadow-sm);
       border-color: var(--accent-light);
   }

   .review-head {
       display: flex;
       align-items: center;
       gap: 14px;
       margin-bottom: 18px;
   }

   .review-avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--accent-light);
       color: var(--accent-dark);
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-display);
       font-weight: 700;
       font-size: 1.1rem;
       flex-shrink: 0;
   }

   .review-author {
       font-weight: 600;
       font-size: 0.95rem;
   }

   .review-stars {
       color: var(--gold);
       font-size: 0.9rem;
       letter-spacing: 2px;
   }

   .review-text {
       color: var(--ink-soft);
       font-size: 0.92rem;
       line-height: 1.7;
       flex: 1;
       margin-bottom: 16px;
   }

   .review-date {
       font-size: 0.78rem;
       color: var(--ink-muted);
       padding-top: 16px;
       border-top: 1px solid var(--border);
   }

   /* ============================================
       CERTIFICATES
       ============================================ */
   .certs-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
   }

   @media (max-width: 800px) {
       .certs-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 420px) {
       .certs-grid {
           grid-template-columns: 1fr;
       }
   }

   .cert-card {
       background: var(--surface);
       border: 1px solid var(--border);
       padding: 24px;
       border-radius: var(--radius);
       cursor: pointer;
       transition: all 0.3s;
       text-align: center;
   }

   .cert-card:hover {
       box-shadow: var(--shadow-sm);
       border-color: var(--accent);
       transform: translateY(-2px);
   }

   .cert-icon {
       width: 56px;
       height: 56px;
       background: var(--surface-alt);
       color: var(--accent);
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 16px;
       font-size: 1.6rem;
       border-radius: var(--radius);
   }

   .cert-title {
       font-family: var(--font-display);
       font-size: 1rem;
       font-weight: 600;
       margin-bottom: 4px;
   }

   .cert-desc {
       font-size: 0.82rem;
       color: var(--ink-muted);
   }

   /* ============================================
       FAQ
       ============================================ */
   .faq-section {
       background: var(--surface-alt);
   }

   .faq-list {
       max-width: 820px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .faq-item {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       transition: all 0.2s;
   }

   .faq-item[open] {
       border-color: var(--accent-light);
       box-shadow: var(--shadow-sm);
   }

   .faq-question {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       padding: 20px 24px;
       cursor: pointer;
       list-style: none;
       font-weight: 600;
       font-size: 1rem;
       color: var(--ink);
   }

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

   .faq-question::after {
       content: '+';
       font-size: 1.5rem;
       font-weight: 300;
       color: var(--accent);
       transition: transform 0.2s;
       flex-shrink: 0;
       line-height: 1;
   }

   .faq-item[open] .faq-question::after {
       transform: rotate(45deg);
   }

   .faq-answer {
       padding: 0 24px 20px;
       color: var(--ink-muted);
       font-size: 0.92rem;
       line-height: 1.7;
   }

   /* ============================================
       CONTACTS
       ============================================ */
   .contact-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 0;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow-md);
   }

   @media (max-width: 820px) {
       .contact-grid {
           grid-template-columns: 1fr;
       }
   }

   .contact-form-wrap {
       padding: 48px;
   }

   @media (max-width: 820px) {
       .contact-form-wrap {
           padding: 32px 24px;
       }
   }

   .contact-form {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }

   .privacy-label {
       display: flex;
       align-items: flex-start;
       gap: 8px;
       font-size: 0.78rem;
       color: var(--ink-muted);
       line-height: 1.5;
       cursor: pointer;
   }

   .privacy-label input {
       margin-top: 2px;
       flex-shrink: 0;
       accent-color: var(--accent);
       width: 16px;
       height: 16px;
   }

   .privacy-label a {
       color: var(--accent);
       text-decoration: underline;
   }

   .contact-info-panel {
       background: var(--dark-section);
       color: #fff;
       padding: 48px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 24px;
   }

   @media (max-width: 820px) {
       .contact-info-panel {
           padding: 32px 24px;
       }
   }

   .contact-info-title {
       font-family: var(--font-display);
       font-size: 1.4rem;
       font-weight: 600;
       margin-bottom: 8px;
   }

   .contact-info-desc {
       font-size: 0.9rem;
       color: rgba(255, 255, 255, 0.6);
       line-height: 1.6;
   }

   .contact-item {
       display: flex;
       align-items: flex-start;
       gap: 14px;
       padding-top: 20px;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .contact-item:first-of-type {
       border-top: none;
       padding-top: 0;
   }

   .contact-item-icon {
       width: 40px;
       height: 40px;
       background: rgba(200, 135, 75, 0.15);
       color: var(--gold);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       border-radius: var(--radius);
   }

   .contact-item-body {
       flex: 1;
       min-width: 0;
   }

   .contact-item-label {
       font-size: 0.72rem;
       color: rgba(255, 255, 255, 0.5);
       text-transform: uppercase;
       letter-spacing: 0.08em;
       margin-bottom: 4px;
   }

   .contact-item-value {
       font-weight: 500;
       font-size: 0.95rem;
       color: #fff;
       word-break: break-word;
   }

   .contact-item-value a {
       color: #fff;
   }

   .contact-item-value a:hover {
       color: var(--gold);
   }

   /* ============================================
       FOOTER
       ============================================ */
   .site-footer {
       background: var(--dark-section);
       color: rgba(255, 255, 255, 0.6);
       padding: 64px 0 32px;
       font-size: 0.88rem;
   }

   .footer-grid {
       display: grid;
       grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
       gap: 40px;
       margin-bottom: 48px;
   }

   @media (max-width: 900px) {
       .footer-grid {
           grid-template-columns: 1fr 1fr;
           gap: 32px;
       }
   }

   @media (max-width: 560px) {
       .footer-grid {
           grid-template-columns: 1fr;
       }
   }

   .footer-brand {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 16px;
       color: #fff;
   }

   .footer-brand .brand-logo {
       width: 40px;
       height: 40px;
   }

   .footer-brand .brand-name {
       color: #fff;
       font-size: 1.15rem;
   }

   .footer-brand .brand-name span {
       color: var(--gold);
   }

   .footer-text {
       line-height: 1.7;
       max-width: 300px;
   }

   .footer-heading {
       color: #fff;
       font-family: var(--font-display);
       font-weight: 600;
       font-size: 1rem;
       margin-bottom: 16px;
   }

   .footer-list {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .footer-list a {
       color: rgba(255, 255, 255, 0.6);
       transition: color 0.2s;
       font-size: 0.88rem;
   }

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

   .footer-contacts {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .footer-contacts a {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: rgba(255, 255, 255, 0.75);
       transition: color 0.2s;
   }

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

   .footer-contacts .icon {
       color: var(--accent);
       font-size: 1.1em;
   }

   .footer-legal {
       padding-top: 32px;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       display: flex;
       flex-direction: column;
       gap: 8px;
       font-size: 0.78rem;
       line-height: 1.6;
   }

   .footer-legal strong {
       color: rgba(255, 255, 255, 0.8);
   }

   .footer-legal-links {
       display: flex;
       flex-wrap: wrap;
       gap: 16px;
       margin-top: 8px;
   }

   .footer-legal-links a {
       color: rgba(255, 255, 255, 0.55);
       text-decoration: underline;
       transition: color 0.2s;
   }

   .footer-legal-links a:hover {
       color: var(--gold);
   }

   /* ============================================
       FLOATING STICKER
       ============================================ */
   .sticker {
       position: fixed;
       bottom: 24px;
       left: 24px;
       z-index: 900;
       display: flex;
       align-items: center;
       gap: 12px;
       background: var(--accent);
       color: #fff;
       padding: 14px 22px;
       border-radius: 100px;
       box-shadow: 0 12px 32px -8px rgba(200, 135, 75, 0.6);
       font-weight: 600;
       font-size: 0.88rem;
       transition: all 0.3s;
       animation: pulseBadge 2.5s infinite;
   }

   .sticker:hover {
       background: var(--accent-dark);
       transform: translateY(-2px) scale(1.02);
       animation: none;
   }

   @keyframes pulseBadge {

       0%,
       100% {
           box-shadow: 0 12px 32px -8px rgba(200, 135, 75, 0.6), 0 0 0 0 rgba(200, 135, 75, 0.4);
       }

       50% {
           box-shadow: 0 12px 32px -8px rgba(200, 135, 75, 0.6), 0 0 0 12px rgba(200, 135, 75, 0);
       }
   }

   @media (max-width: 640px) {
       .sticker {
           bottom: 16px;
           left: 16px;
           padding: 12px 18px;
           font-size: 0.8rem;
       }
   }

   /* ============================================
       MODAL GALLERY
       ============================================ */
   .modal {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 2000;
       background: rgba(10, 8, 6, 0.96);
       align-items: center;
       justify-content: center;
       backdrop-filter: blur(8px);
   }

   .modal.open {
       display: flex;
   }

   .modal img {
       max-width: 92%;
       max-height: 86vh;
       object-fit: contain;
       border-radius: var(--radius);
   }

   .modal-close {
       position: absolute;
       top: 20px;
       right: 24px;
       width: 48px;
       height: 48px;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       color: #fff;
       font-size: 1.6rem;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       border-radius: 50%;
       transition: all 0.2s;
   }

   .modal-close:hover {
       background: rgba(255, 255, 255, 0.2);
   }

   .modal-nav {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 56px;
       height: 56px;
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       color: #fff;
       font-size: 1.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       border-radius: 50%;
       transition: all 0.2s;
   }

   .modal-nav:hover {
       background: var(--accent);
       border-color: var(--accent);
   }

   .modal-nav.prev {
       left: 24px;
   }

   .modal-nav.next {
       right: 24px;
   }

   .modal-counter {
       position: absolute;
       bottom: 24px;
       left: 50%;
       transform: translateX(-50%);
       color: #fff;
       background: rgba(0, 0, 0, 0.6);
       padding: 8px 18px;
       border-radius: 100px;
       font-size: 0.85rem;
   }

   @media (max-width: 640px) {
       .modal-nav {
           width: 44px;
           height: 44px;
       }

       .modal-nav.prev {
           left: 12px;
       }

       .modal-nav.next {
           right: 12px;
       }
   }

   /* ============================================
       POPUP FORM
       ============================================ */
   .popup {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 2500;
       background: rgba(10, 8, 6, 0.6);
       backdrop-filter: blur(6px);
       align-items: center;
       justify-content: center;
       padding: 20px;
   }

   .popup.open {
       display: flex;
   }

   .popup-box {
       background: var(--surface);
       padding: 40px;
       max-width: 440px;
       width: 100%;
       border-radius: var(--radius);
       position: relative;
       box-shadow: var(--shadow-lg);
       animation: popIn 0.3s ease;
   }

   @keyframes popIn {
       from {
           opacity: 0;
           transform: scale(0.96);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   @media (max-width: 520px) {
       .popup-box {
           padding: 28px 22px;
       }
   }

   .popup-close {
       position: absolute;
       top: 16px;
       right: 16px;
       width: 36px;
       height: 36px;
       background: var(--surface-alt);
       border: none;
       color: var(--ink-soft);
       font-size: 1.3rem;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       border-radius: 50%;
       transition: all 0.2s;
   }

   .popup-close:hover {
       background: var(--accent);
       color: #fff;
   }

   .popup-title {
       font-family: var(--font-display);
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 8px;
   }

   .popup-desc {
       font-size: 0.9rem;
       color: var(--ink-muted);
       margin-bottom: 24px;
       line-height: 1.55;
   }

   .popup .field {
       margin-bottom: 14px;
   }

   /* Notification */
   .toast {
       position: fixed;
       top: 90px;
       right: 24px;
       z-index: 3000;
       padding: 16px 24px;
       border-radius: var(--radius);
       font-weight: 500;
       font-size: 0.9rem;
       color: #fff;
       box-shadow: var(--shadow-lg);
       display: flex;
       align-items: center;
       gap: 10px;
       animation: slideIn 0.3s ease;
       max-width: 360px;
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateX(40px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   .toast.success {
       background: var(--success);
   }

   .toast.error {
       background: var(--error);
   }

   /* Fade-up animations */
   .reveal {
       opacity: 0;
       transform: translateY(24px);
       transition: opacity 0.6s ease, transform 0.6s ease;
   }

   .reveal.visible {
       opacity: 1;
       transform: translateY(0);
   }

   /* Utility */
   .text-center {
       text-align: center;
   }

   .mt-auto {
       margin-top: auto;
   }

   /* ===== Компактная форма замера для мобильных ===== */
   @media (max-width: 600px) {

       /* Само окно */
       .popup-box {
           padding: 20px 15px !important;
           /* Уменьшаем отступы */
           width: 94% !important;
           /* Чуть шире, чтобы лучше использовать экран */
           max-height: 92vh;
           /* Ограничиваем высоту 92% от экрана */
           overflow-y: auto;
           /* Добавляем скролл, если не влезет */
       }

       /* Заголовок и описание */
       .popup-title {
           font-size: 1.2rem !important;
           margin-bottom: 4px !important;
           padding-right: 25px;
           /* Чтобы не наезжал на крестик */
       }

       .popup-desc {
           display: none !important;
           /* Полностью скрываем описание, чтобы сэкономить место */
       }

       /* Поля ввода */
       .popup .field {
           margin-bottom: 10px !important;
           /* Уменьшаем отступ между полями */
       }

       .popup .field label {
           font-size: 0.75rem !important;
           margin-bottom: 4px !important;
       }

       .popup .field input,
       .popup .field textarea {
           padding: 10px 12px !important;
           /* Делаем поля тоньше */
           font-size: 0.9rem !important;
       }

       .popup .field textarea {
           min-height: 50px !important;
           /* Текстовое поле делаем минимальной высоты */
           rows: 2;
       }

       /* Чекбокс согласия */
       .privacy-label {
           margin-bottom: 12px !important;
           font-size: 0.7rem !important;
       }

       /* Кнопка отправки */
       .popup .btn {
           padding: 12px 20px !important;
           /* Чуть тоньше кнопка */
           font-size: 0.85rem !important;
           margin-top: 0 !important;
       }

       /* Кнопка закрытия (крестик) */
       .popup-close {
           top: 10px !important;
           right: 10px !important;
           width: 30px !important;
           height: 30px !important;
           font-size: 1.1rem !important;
       }
   }

   /* Специфичные стили для страницы блога */
   .article-hero {
       padding: 120px 0 40px;
       background: var(--dark-section);
       color: #fff;
   }

   .article-container {
       max-width: 800px;
       margin: 0 auto;
       padding: 0 24px;
   }

   .article-meta {
       display: flex;
       gap: 16px;
       color: var(--gold);
       font-size: 0.9rem;
       margin-bottom: 20px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }

   .article-hero h1 {
       font-family: var(--font-display);
       font-size: clamp(2rem, 4vw, 3rem);
       line-height: 1.2;
       margin-bottom: 24px;
   }

   .article-content {
       padding: 60px 15px;
       font-size: 1.1rem;
       line-height: 1.8;
       color: var(--ink-soft);
   }

   .article-content h2 {
       font-family: var(--font-display);
       font-size: 1.8rem;
       color: var(--ink);
       margin: 40px 0 16px;
   }

   .article-content h3 {
       font-family: var(--font-display);
       font-size: 1.4rem;
       color: var(--ink);
       margin: 30px 0 12px;
   }

   .article-content p {
       margin-bottom: 20px;
   }

   .article-content ul,
   .article-content ol {
       margin-bottom: 20px;
       padding-left: 20px;
   }

   .article-content li {
       margin-bottom: 10px;
   }

   .article-content img {
       width: 100%;
       height: auto;
       border-radius: var(--radius);
       margin: 30px 0;
       box-shadow: var(--shadow-sm);
   }

   .article-content blockquote {
       border-left: 4px solid var(--accent);
       padding-left: 20px;
       margin: 30px 0;
       font-style: italic;
       color: var(--ink-muted);
   }

   /* Кнопка назад */
   .back-link {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: var(--accent);
       text-decoration: none;
       margin-bottom: 24px;
       font-weight: 500;
   }

   .back-link:hover {
       color: var(--accent-dark);
   }
   /* ===== Адаптивные таблицы для блога ===== */
.table-responsive {
  width: 100%;
  overflow-x: auto; /* Включает горизонтальную прокрутку */
  -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
  margin: 30px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px; /* Заставляет таблицу не сжиматься слишком сильно */
}

.table-responsive th,
.table-responsive td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table-responsive th {
  background-color: var(--surface-alt);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

/* Для мобильных делаем шрифт и отступы меньше */
@media (max-width: 600px) {
  .table-responsive table {
    min-width: 450px;
  }
  .table-responsive th,
  .table-responsive td {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
}
    .article-alert {
            background-color: var(--surface-alt);
            padding: 20px;
            border-left: 4px solid var(--accent);
            margin: 30px 0;
            border-radius: var(--radius);
        }

        .article-alert h4 {
            font-family: var(--font-display);
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--ink);
        }

        .article-cta-box {
            background-color: var(--dark-section);
            color: #fff;
            padding: 32px;
            margin-top: 48px;
            border-radius: var(--radius);
            text-align: center;
        }

        .article-cta-box h3 {
            color: #fff;
            margin-top: 0;
            margin-bottom: 12px;
        }

        .article-cta-box p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            font-size: 1rem;
        }

        .btn-light {
            display: inline-block;
            background-color: var(--accent);
            color: #fff;
            padding: 14px 28px;
            text-decoration: none;
            font-weight: 600;
            border-radius: var(--radius);
            transition: background-color 0.3s;
        }

        .btn-light:hover {
            background-color: var(--accent-dark);
        }