/* ============================================================
     LOCAL FONTS
     ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/Playfair-VariableFont_opsz,wdth,wght.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
     NIKLAND — Carrier-style design system
     ============================================================ */
  :root {
    --navy: #0033A0;
    --navy-deep: #001F66;
    --navy-light: #1E4FBF;
    --sky: #B8D4FF;
    --sky-soft: #E8F0FF;
    --white: #FFFFFF;
    --bg-soft: #F5F7FA;
    --bg-card: #FAFBFC;
    --text-primary: #1A1A1A;
    --text-secondary: #5A6175;
    --text-muted: #8A92A6;
    --border: #E5E9F0;
    --border-light: #EEF1F6;
    --shadow-sm: 0 2px 8px rgba(0, 51, 160, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 51, 160, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 51, 160, 0.12);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --section-pad: 100px;
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--text-primary);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .container-narrow {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ============================================================
     BUTTONS — Carrier pill-shaped
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--navy);
    color: var(--white);
  }
  .btn-primary:hover {
    background: var(--navy-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .btn-light {
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--white);
  }
  .btn-light:hover {
    background: transparent;
    color: var(--white);
  }
  .btn-outline-white {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.6);
  }
  .btn-outline-white:hover {
    background: var(--white);
    color: var(--navy);
  }
  .btn-block { width: 100%; }
  .btn .arrow { transition: transform 0.3s ease; }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ============================================================
     HEADER
     ============================================================ */
  .topbar {
    background: var(--navy);
    color: var(--white);
    font-size: 13px;
    font-weight: 300;
  }
  .topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    height: 40px;
  }
  .topbar a { display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; transition: opacity .2s; }
  .topbar a:hover { opacity: 1; }
  .lang-switch { display: inline-flex; gap: 4px; }
 .lang-switch span {
    padding: 0 6px;
    cursor: none;
    opacity: 0.4;
}
.lang-switch a.active {
    opacity: 1;
    font-weight: 500;
}
 
  .lang-switch i { opacity: 0.4; }

  .header {
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    gap: 40px;
  }
  .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .logo-img { height: 42px; width: auto; display: block; }
  .logo-oval {
    border: 1.5px solid var(--navy);
    border-radius: 50%;
    padding: 14px 28px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--navy);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .logo-oval em {
    font-style: italic;
    font-size: 11px;
    display: block;
    text-align: center;
    margin-top: 2px;
    letter-spacing: 0.18em;
    font-weight: 400;
  }
  .nav {
    display: flex;
    gap: 36px;
    flex: 1;
    justify-content: center;
  }
  .nav a {
    color: var(--navy);
    font-size: 15px;
    font-weight: 400;
    transition: opacity .2s;
    position: relative;
  }
  .nav a::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 1.5px;
    background: var(--navy);
    transition: width .3s ease;
  }
  .nav a:hover::after { width: 100%; }
  .header .btn { padding: 12px 22px; font-size: 14px; }
  .burger { display: none; }

  /* ============================================================
     HERO SLIDER
     ============================================================ */
  .hero {
    position: relative;
    height: 88vh;
    min-height: 640px;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
  }
  .hero-slide.active {
    opacity: 1;
    pointer-events: auto;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
 .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 78px 25px 100px;
}
  .hero-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .hero-title {
    font-size: clamp(36px, 6vw, 84px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--navy-deep);
    max-width: 900px;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 12px rgba(255,255,255,0.35);
  }
  .hero-title strong {
    font-weight: 500;
    color: var(--navy);
  }
  /* First slide photo is dark — use a light neutral-grey title so it reads without an overlay */
  .hero-slide[data-bg="1"] .hero-title,
  .hero-slide[data-bg="2"] .hero-title {
    color: #EDF1F7;
    text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  }
  .hero-slide[data-bg="1"] .hero-title strong,
  .hero-slide[data-bg="2"] .hero-title strong {
    color: #FFFFFF;
  }
  .hero-cta-top {
    flex-shrink: 0;
  }
  .hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .hero-meta {
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  .hero-meta strong { font-weight: 500; }
  .hero-controls {
    position: absolute;
    z-index: 4;
    right: max(40px, calc((100% - 1200px) / 2 + 40px));
    bottom: 100px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .hero-dots {
    display: flex;
    gap: 10px;
    margin-right: 20px;
  }
  .hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all .3s;
  }
  .hero-dot.active {
    background: var(--white);
    width: 28px;
    border-radius: 4px;
  }
  .hero-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--white);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    backdrop-filter: blur(8px);
    background: rgba(0,31,102,0.15);
  }
  .hero-arrow:hover {
    background: var(--white);
    color: var(--navy);
  }
  .hero-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--navy);
    width: 0;
    z-index: 3;
    transition: width 0.1s linear;
  }

  /* SVG hero backgrounds — use inline data URIs as placeholders */
  .bg-1 { background-image: linear-gradient(180deg, rgba(0,31,102,.10), rgba(0,31,102,.10)), url("../img/hero/slide-01.webp"); background-size: cover; background-position: center; }
  .bg-2 { background-image: linear-gradient(180deg, rgba(0,31,102,.10), rgba(0,31,102,.10)), url("../img/hero/slide-02.webp"); background-size: cover; background-position: center; }
  .bg-3 { background-image: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 45%), url("../img/hero/slide-03.webp"); background-size: cover; background-position: center; }
  .bg-4 { background-image: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 45%), url("../img/hero/slide-04.webp"); background-size: cover; background-position: center; }
  .bg-5 { background-image: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 45%), url("../img/hero/slide-05.webp"); background-size: cover; background-position: center; }
  .bg-6 { background-image: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 45%), url("../img/hero/slide-06.webp"); background-size: cover; background-position: center; }
  .bg-7 { background-image: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 40%), url("../img/hero/slide-07.webp"); background-size: cover; background-position: center; }
  .hero-slide[data-bg="7"] .hero-title { color: var(--navy); }
  .bg-8 { background-image: url("../img/hero/slide-08.webp"); background-size: cover; background-position: center; }
  .hero-slide[data-bg="8"] .hero-title,
  .hero-slide[data-bg="8"] .hero-title strong { color: #cfd3d9; text-shadow: none; }
  .hero-slide[data-bg="8"] .hero-meta { color: #cfd3d9; }

  /* ============================================================
     SECTION 2 — About + CTA Form
     ============================================================ */
  .about {
    padding: var(--section-pad) 0;
    background: var(--white);
  }
  .about-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 80px;
    align-items: start;
  }
  .about-title {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 300;
    color: var(--navy);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 32px;
  }
  .about-text {
    font-size: 19px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 36px;
    font-weight: 300;
  }
  .about-text strong { color: var(--navy); font-weight: 500; }
  .services-list {
    list-style: none;
    display: grid;
    gap: 14px;
  }
  .services-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 400;
    padding: 4px 0;
  }
  .services-list svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--navy);
  }

  .cta-form {
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-sm);
  }
  .cta-form-title {
    font-size: 24px;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 28px;
    letter-spacing: -0.01em;
  }
  .form-field {
    margin-bottom: 18px;
  }
  .form-field input,
  .form-field textarea,
  .form-field select {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color .3s;
    font-weight: 400;
  }
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus {
    outline: none;
    border-bottom-color: var(--navy);
  }
  .form-field textarea {
    resize: vertical;
    min-height: 80px;
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: var(--text-muted);
    font-weight: 300;
  }
  .form-consent {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 16px;
    line-height: 1.5;
    font-weight: 300;
  }
  .form-consent a { color: var(--navy); text-decoration: underline; }
  .cta-form .btn { margin-top: 8px; }

  .cta-contacts {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
  }
  .cta-contacts div {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cta-contacts svg {
    color: var(--navy);
    flex-shrink: 0;
  }
  .cta-contacts strong { color: var(--navy); font-weight: 500; }

  /* Clickable contact links */
  a.contact-link {
    color: inherit;
    text-decoration: none;
    transition: text-decoration-color 0.2s ease;
  }
  a.contact-link:hover { text-decoration: underline; }

  /* Brand logos row */
  .brand-logos {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
  }
  .brand-logos-title {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 28px;
    text-align: center;
  }
  .brand-logos-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 56px;
  }
  .brand-logo {
    display: inline-flex;
    align-items: center;
    height: 38px;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  }
  .brand-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
  }
  .brand-logo svg { height: 100%; width: auto; display: block; }
  .brand-logo--square { height: 58px; }

  /* ============================================================
     SECTION 3 — News
     ============================================================ */
  .news {
    padding: var(--section-pad) 0;
    background: var(--bg-soft);
  }
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
    gap: 32px;
  }
  .section-title {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 300;
    color: var(--navy);
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .section-arrows {
    display: flex;
    gap: 12px;
  }
  .arrow-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--navy);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all .3s;
  }
  .arrow-btn:hover {
    background: var(--navy);
    color: var(--white);
  }

  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .news-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all .3s ease;
    cursor: pointer;
    border: 1px solid var(--border-light);
  }
  .news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .news-image {
    height: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }
  .news-img-1 { background-image: url("../img/news/news-01.webp"); background-size: cover; background-position: center; }
  .news-img-2 { background-image: url("../img/news/news-02.webp"); background-size: cover; background-position: center; }
  .news-img-3 { background-image: url("../img/news/news-03.webp"); background-size: cover; background-position: center; }
  .news-body { padding: 28px; }
  .news-meta {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 400;
  }
  .news-meta strong { color: var(--navy); font-weight: 500; }
  .news-title {
    font-size: 22px;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
  }
  .news-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 20px;
    font-weight: 300;
  }
  .news-link {
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .3s;
  }
  .news-link:hover { gap: 10px; }

  /* ============================================================
     SECTION 4 — Popular Products
     ============================================================ */
  .products {
    padding: var(--section-pad) 0;
    background: var(--white);
  }
  .products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    transition: all .3s ease;
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }
  .product-image {
    height: 200px;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .product-image svg { width: 70%; height: auto; }
  .product-image .product-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
    background: #fff;
    padding: 16px;
  }
  .product-body { padding: 28px; }
  .product-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .product-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 20px;
    min-height: 75px;
    font-weight: 300;
  }
  .product-card.dark {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
  }
  .product-card.dark .product-image {
    background: var(--navy-deep);
  }
  .product-card.dark .product-title { color: var(--white); }
  .product-card.dark .product-desc { color: var(--sky); opacity: 0.85; }
  .product-card.dark .product-link {
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 4px;
  }
  .product-link {
    color: var(--navy);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .3s;
  }
  .product-link:hover { gap: 10px; }

  /* ============================================================
     SECTION 5 — SEO mid block
     ============================================================ */
  .seo-mid {
    padding: var(--section-pad) 0;
    background: var(--bg-soft);
  }
  .seo-mid h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    color: var(--navy);
    margin-bottom: 32px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .seo-mid p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 22px;
    font-weight: 300;
  }
  .seo-mid p strong { color: var(--navy); font-weight: 500; }

  /* ============================================================
     SECTION 6 — Projects
     ============================================================ */
  .projects {
    padding: var(--section-pad) 0;
    background: var(--white);
  }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 56px;
  }
  .project-card { text-decoration: none; color: inherit;
    cursor: pointer;
    transition: transform .3s;
  }
  .project-card:hover { transform: translateY(-4px); }
  .project-image {
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
  }
  .project-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,31,102,0.4));
  }
  .proj-1 { background-image: url("../img/projects/kazahmys.webp"); background-size: cover; background-position: center; }
  .proj-2 { background-image: url("../img/projects/britanskiy-kvartal.webp"); background-size: cover; background-position: center; }
  .proj-3 { background-image: url("../img/projects/expo-2017.webp"); background-size: cover; background-position: center; }
  .project-title {
    font-size: 24px;
    font-weight: 400;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .project-meta {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 400;
  }
  .project-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 300;
  }
  .projects-cta {
    text-align: center;
  }

  /* ============================================================
     SECTION 7 — Services on dark navy
     ============================================================ */
  .services-dark {
    padding: var(--section-pad) 0;
    background: var(--navy);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .services-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(184,212,255,0.06), transparent 40%);
    pointer-events: none;
  }
  .services-dark .container { position: relative; }
  .services-dark-title {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 300;
    color: var(--white);
    margin-bottom: 64px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 800px;
  }
  .services-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .service-dark-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    padding: 40px;
    transition: all .3s;
    backdrop-filter: blur(8px);
  }
  .service-dark-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
  }
  .service-icon {
    width: 64px; height: 64px;
    color: var(--white);
    margin-bottom: 28px;
  }
  .service-icon svg { width: 100%; height: 100%; }
  .service-dark-title {
    font-size: 22px;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 16px;
    letter-spacing: -0.005em;
  }
  .service-dark-desc {
    font-size: 15px;
    color: var(--sky);
    line-height: 1.6;
    opacity: 0.85;
    font-weight: 300;
  }

  /* ============================================================
     SECTION 8 — Conditioner Types
     ============================================================ */
  .types {
    padding: var(--section-pad) 0;
    background: var(--white);
  }
  .types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
  }
  .type-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: all .3s;
  }
  .type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }
  .type-image {
    aspect-ratio: 16/10;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .type-image svg { width: 60%; height: auto; }
  .type-body { padding: 28px; }
  .type-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .type-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 65px;
    font-weight: 300;
  }

  /* ============================================================
     SECTION 9 — Long SEO block
     ============================================================ */
  .seo-long {
    padding: var(--section-pad) 0 60px;
    background: var(--white);
  }
  .seo-long h2 {
    font-size: 32px;
    font-weight: 300;
    color: var(--navy);
    margin: 56px 0 24px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    padding-top: 56px;
    border-top: 1px solid var(--border-light);
  }
  .seo-long h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .seo-long p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 18px;
    font-weight: 300;
  }
  .seo-long p strong { color: var(--navy); font-weight: 500; }

  /* ============================================================
     SECTION 10 — FAQ
     ============================================================ */
  .faq {
    padding: var(--section-pad) 0;
    background: var(--bg-soft);
  }
  .faq-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    color: var(--navy);
    text-align: center;
    margin-bottom: 56px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .faq-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color .3s;
  }
  .faq-item.open { border-color: var(--navy); }
  .faq-question {
    width: 100%;
    text-align: left;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 17px;
    font-weight: 400;
    color: var(--navy);
    background: transparent;
  }
  .faq-toggle {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s, background .3s;
  }
  .faq-item.open .faq-toggle {
    transform: rotate(45deg);
    background: var(--navy);
    color: var(--white);
  }
  .faq-toggle svg { width: 14px; height: 14px; }
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }
  .faq-answer-inner {
    padding: 0 28px 24px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
    font-weight: 300;
  }
  .faq-item.open .faq-answer { max-height: 600px; }

  /* ============================================================
     SECTION 11 — Final form
     ============================================================ */
  .final-cta {
    padding: var(--section-pad) 0;
    background: var(--navy);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 70% 50%, rgba(184,212,255,0.08), transparent 50%),
      linear-gradient(135deg, transparent 60%, rgba(0,31,102,0.6));
  }
  .final-cta .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .final-cta-title {
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 300;
    color: var(--white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .final-cta-subtitle {
    font-size: 19px;
    color: var(--sky);
    line-height: 1.6;
    margin-bottom: 48px;
    font-weight: 300;
    opacity: 0.9;
  }
  .final-contacts {
    display: grid;
    gap: 18px;
  }
  .final-contacts div {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    font-size: 16px;
    font-weight: 400;
  }
  .final-contacts svg {
    color: var(--sky);
    flex-shrink: 0;
  }
  .final-form {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    color: var(--text-primary);
  }
  .final-form .form-field input,
  .final-form .form-field select,
  .final-form .form-field textarea {
    border-bottom-color: var(--border);
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .required { color: var(--navy); }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer {
    background: var(--navy-deep);
    color: var(--white);
    padding: 80px 0 0;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 64px;
  }
  .footer-col h4 {
    font-size: 17px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 24px;
    letter-spacing: 0.01em;
  }
  .footer-col ul {
    list-style: none;
    display: grid;
    gap: 12px;
  }
  .footer-col a {
    color: var(--sky);
    font-size: 14px;
    opacity: 0.75;
    transition: opacity .2s;
    font-weight: 300;
  }
  .footer-col a:hover { opacity: 1; }
  .footer-contacts {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
  }
  .footer-contacts div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--sky);
    opacity: 0.85;
    font-size: 14px;
    font-weight: 300;
  }
  .footer-contacts svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--sky);
  }
  .footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
  }
  .footer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(184,212,255,0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    transition: all .3s;
    opacity: 1;
  }
  .footer-social a:hover {
    background: var(--sky);
    color: var(--navy-deep);
    border-color: var(--sky);
  }
  .footer-policy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
  }
  .footer-bottom {
    border-top: 1px solid rgba(184,212,255,0.15);
    padding: 32px 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--sky);
    opacity: 0.7;
    font-weight: 300;
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1024px) {
    :root { --section-pad: 72px; }
    .about-grid { grid-template-columns: 1fr; gap: 56px; }
    .news-grid, .products-grid, .projects-grid, .services-dark-grid, .types-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .final-cta .container { grid-template-columns: 1fr; gap: 48px; }
    .nav { display: none; }
    .burger { display: flex; }
  }

  @media (max-width: 640px) {
    :root { --section-pad: 56px; }
    .container, .container-narrow { padding: 0 20px; }
    .hero { height: min(720px, 86svh); min-height: 560px; }
    .hero-content { padding: 34px 0 92px; justify-content: flex-end; gap: 22px; }
    .hero-top { flex-direction: column; gap: 22px; max-width: 92%; }
    .hero-cta-top { align-self: flex-start; }
    .hero-title { font-size: clamp(34px, 11vw, 48px); line-height: .98; letter-spacing: -0.04em; max-width: 94%; }
    .hero-meta { display: inline-flex; width: fit-content; max-width: 100%; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(12px); color: var(--navy); box-shadow: var(--shadow-sm); }
    .hero-bottom { margin-top: 0; }
    .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.78) 65%, rgba(255,255,255,.92)); }
    .news-grid, .products-grid, .projects-grid, .services-dark-grid, .types-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .topbar-inner { gap: 16px; }
    .header-inner { height: 68px; gap: 16px; }
    .logo-oval { font-size: 17px; padding: 10px 18px; }
    .header .btn { padding: 10px 16px; font-size: 13px; }
    .cta-form, .final-form { padding: 28px 24px; }
    .service-dark-card { padding: 28px; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .hero-controls { right: 20px; bottom: 60px; }
  }

  /* ============================================================
     ANIMATIONS
     ============================================================ */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-slide.active .hero-title,
  .hero-slide.active .hero-cta-top,
  .hero-slide.active .hero-bottom {
    animation: fadeInUp 0.8s ease both;
  }
  .hero-slide.active .hero-cta-top { animation-delay: 0.15s; }
  .hero-slide.active .hero-bottom { animation-delay: 0.3s; }

  /* Subtle SVG product illustrations style */
  .icon-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   CITY SWITCHER / MODAL
   ============================================================ */
.city-switch{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--navy);background:var(--white);font-size:14px;font-weight:400;transition:all .25s ease;white-space:nowrap;
}
.city-switch:hover{border-color:var(--navy);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.city-switch svg{flex-shrink:0}
.city-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.city-modal.open{display:flex}
.city-modal__overlay{position:absolute;inset:0;background:rgba(0,31,102,.48);backdrop-filter:blur(8px)}
.city-modal__dialog{position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--white);border-radius:24px;padding:36px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.8)}
.city-modal__close{position:absolute;right:22px;top:18px;width:38px;height:38px;border-radius:50%;font-size:28px;line-height:1;color:var(--navy);background:var(--sky-soft);transition:.25s}
.city-modal__close:hover{background:var(--navy);color:#fff}
.city-modal__head{padding-right:48px;margin-bottom:22px}
.city-modal__kicker{display:inline-block;margin-bottom:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.city-modal__head h2{font-size:34px;line-height:1.15;font-weight:300;color:var(--navy);margin-bottom:10px}
.city-modal__head p{color:var(--text-secondary);font-size:15px;line-height:1.55}
.city-modal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.city-option {
    position: relative;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-soft);
    padding: 10px 18px;
    min-height: 50px;
    transition: .25s;
    color: var(--text-primary);
}
.city-option span{display:block;font-weight:500;color:var(--navy);margin-bottom:4px}.city-option small{color:var(--text-muted)}
.city-option:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.city-option.active{background:var(--navy);border-color:var(--navy);color:#fff}.city-option.active span,.city-option.active small{color:#fff}.city-option.active:after{content:'✓';position:absolute;right:16px;top:14px;font-weight:600}
.city-option--all{width:100%;background:#fff;border-color:var(--navy)}
body.city-modal-lock{overflow:hidden}
.header-actions{display:flex;align-items:center;gap:12px}
@media (max-width:1024px){.city-modal__grid{grid-template-columns:repeat(2,1fr)}.city-switch span{max-width:130px;overflow:hidden;text-overflow:ellipsis}.header-inner{gap:14px}}
@media (max-width:640px){.city-modal{padding:14px}.city-modal__dialog{padding:28px 20px;border-radius:20px}.city-modal__grid{grid-template-columns:1fr}.city-modal__head h2{font-size:28px}.city-switch{padding:9px 12px}.header .btn{display:none}}


/* ============================================================
   Performance image rendering
   ============================================================ */
.hero-bg{
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.bg-1::after,.bg-2::after{background:linear-gradient(180deg, rgba(0,31,102,.10), rgba(0,31,102,.10));}
.bg-3::after,.bg-4::after,.bg-6::after{background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 45%);}
.bg-5::after{background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.05) 45%);}
.bg-7::after{background:linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 40%);}
.news-image img,.project-image img,.product-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-image,.project-image,.product-image{
  background:none;
}

.bg-1,.bg-2,.bg-3,.bg-4,.bg-5,.bg-6,.bg-7,.bg-8,.news-img-1,.news-img-2,.news-img-3,.proj-1,.proj-2,.proj-3{background-image:none!important;}


/* ============================================================
   HERO SLIDER FIXES / PageSpeed + Mobile
   ============================================================ */
.hero{
  isolation:isolate;
  height:clamp(640px, 88svh, 920px);
  min-height:640px;
  max-height:920px;
}
.hero-slide{overflow:hidden;contain:layout paint;}
.hero-bg{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  overflow:hidden;
  background:none!important;
  z-index:0;
}
.hero-bg img,.hero-img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  aspect-ratio:16/9;
  transform:translateZ(0);
}
.hero-img--lazy{background:var(--bg-soft);}
.hero-content{z-index:2;}
.hero-controls{z-index:4;}
.hero-progress{z-index:5;}

@media (max-width: 1024px){
  .hero{height:760px;min-height:620px;max-height:820px;}
  .hero-bg img,.hero-img{object-position:center center;}
}
@media (max-width: 640px){
  .hero{height:calc(100svh - 24px);min-height:560px;max-height:720px;border-radius:0 0 28px 28px;}
  .hero-bg img,.hero-img{object-position:center top;}
  .hero-controls{left:20px;right:20px;bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .hero-dots{gap:7px;flex:1;max-width:none;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.68);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);}
  .hero-dot{width:100%;height:4px;border-radius:999px;background:rgba(0,31,102,.22);}
  .hero-dot.active{background:var(--navy);}
  .hero-arrow{width:42px;height:42px;flex:0 0 42px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);}
  .hero-progress{height:3px;bottom:0;background:var(--navy);opacity:.75;}
  .hero-slide[data-bg="1"] .hero-title,
  .hero-slide[data-bg="2"] .hero-title,
  .hero-slide[data-bg="7"] .hero-title,
  .hero-slide[data-bg="8"] .hero-title,
  .hero-slide[data-bg="1"] .hero-title strong,
  .hero-slide[data-bg="2"] .hero-title strong,
  .hero-slide[data-bg="8"] .hero-title strong{color:var(--navy);text-shadow:none;}
}
@media (max-width: 380px){
  .hero{min-height:530px;}
  .hero-content{padding-top:28px;padding-bottom:86px;}
  .hero-title{font-size:34px;}
  .hero-cta-top{padding:12px 16px;font-size:13px;}
}

/* ============================================================
   MOBILE HERO REWORK — readable premium slider
   ============================================================ */
@media (max-width: 640px){
  .hero{
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0 0 26px 26px;
    background: var(--navy);
  }

  .hero-slide{
    min-height: 620px;
  }

  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(0,31,102,.10) 0%, rgba(0,31,102,.25) 32%, rgba(0,20,64,.82) 76%, rgba(0,20,64,.94) 100%) !important;
  }

  .hero-bg img,
  .hero-img{
    object-position: center top;
    filter: saturate(.96) contrast(.98);
  }

  .hero-content{
    min-height: 620px;
    padding: 0 20px 104px;
    justify-content: flex-end;
    gap: 16px;
  }

  .hero-top{
    width: 100%;
    max-width: none;
    gap: 18px;
    padding: 22px 18px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero-title,
  .hero-slide[data-bg] .hero-title,
  .hero-slide[data-bg] .hero-title strong{
    max-width: 100%;
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.38) !important;
  }

  .hero-title{
    font-size: clamp(30px, 9.2vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0;
  }

  .hero-cta-top{
    align-self: flex-start;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
    background: #fff;
    color: var(--navy);
    border-color: #fff;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
  }

  .hero-bottom{
    width: 100%;
    margin: 0;
    justify-content: flex-start;
  }

  .hero-meta{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    width: auto;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(0,31,102,.54);
    color: rgba(255,255,255,.92);
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .08em;
    text-shadow: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .hero-controls{
    left: 20px;
    right: 20px;
    bottom: 28px;
    gap: 10px;
    padding: 0;
  }

  .hero-dots{
    min-width: 0;
    height: 44px;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,31,102,.58);
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero-dot{
    height: 4px;
    width: 100%;
    min-width: 10px;
    background: rgba(255,255,255,.32);
  }

  .hero-dot.active{
    width: 100%;
    background: #fff;
  }

  .hero-arrow{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-color: rgba(255,255,255,.22);
    background: rgba(0,31,102,.58);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
  }

  .hero-progress{
    background: #fff;
    opacity: .86;
  }
}

@media (max-width: 420px){
  .hero-slide,
  .hero-content{
    min-height: 590px;
  }
  .hero-content{
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 98px;
  }
  .hero-top{
    padding: 20px 16px 16px;
    border-radius: 22px;
  }
  .hero-title{
    font-size: clamp(28px, 9vw, 36px);
  }
}

@media (max-width: 360px){
  .hero-slide,
  .hero-content{
    min-height: 560px;
  }
  .hero-title{
    font-size: 28px;
  }
  .hero-meta{
    font-size: 9px;
  }
}

/* ============================================================
   FINAL MOBILE HERO FIX — images visible + safe spacing
   ============================================================ */
@media (max-width: 768px){
  .hero{
    position:relative;
    height:min(720px, 100svh) !important;
    min-height:620px !important;
    max-height:720px !important;
    overflow:hidden !important;
    border-radius:0 0 26px 26px;
    background:#001f66;
  }

  .hero::after{
    display:none !important;
    content:none !important;
  }

  .hero-slide{
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
  }

  .hero-bg,
  .hero-bg img,
  .hero-img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .hero-bg img,
  .hero-img{
    object-fit:cover !important;
    object-position:center top !important;
  }

  .hero-bg::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    background:
      linear-gradient(180deg, rgba(0,31,102,.08) 0%, rgba(0,31,102,.18) 34%, rgba(0,18,58,.78) 72%, rgba(0,18,58,.94) 100%) !important;
    pointer-events:none;
  }

  .hero-content{
    position:relative !important;
    z-index:3 !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    gap:14px !important;
    padding:0 22px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  .hero-top{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:22px 20px 20px !important;
    gap:17px !important;
    border-radius:24px !important;
    border:1px solid rgba(255,255,255,.18) !important;
   
    box-shadow:0 18px 46px rgba(0,0,0,.30) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }

  .hero-title,
  .hero-slide[data-bg] .hero-title,
  .hero-slide[data-bg] .hero-title strong{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    color:#fff !important;
    text-shadow:0 3px 18px rgba(0,0,0,.45) !important;
  }

  .hero-title{
    font-size:clamp(31px, 8.8vw, 44px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
  }

  .hero-cta-top{
    align-self:flex-start !important;
    min-height:44px !important;
    padding:12px 18px !important;
    font-size:14px !important;
    line-height:1 !important;
    border-color:#fff !important;
    background:#fff !important;
    color:#001f66 !important;
    box-shadow:0 12px 30px rgba(0,0,0,.20) !important;
  }

  .hero-bottom{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    justify-content:flex-start !important;
  }

  .hero-meta{
    max-width:100% !important;
    width:auto !important;
    padding:9px 13px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(0,31,102,.62) !important;
    color:rgba(255,255,255,.94) !important;
    font-size:10px !important;
    line-height:1.35 !important;
    letter-spacing:.08em !important;
    text-shadow:none !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  .hero-controls{
    left:22px !important;
    right:22px !important;
    bottom:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    z-index:5 !important;
  }

  .hero-dots{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:44px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:rgba(0,31,102,.62) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }

  .hero-dot{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:8px !important;
    height:4px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.34) !important;
  }

  .hero-dot.active{
    background:#fff !important;
  }

  .hero-arrow{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    border:1px solid rgba(255,255,255,.20) !important;
    background:rgba(0,31,102,.62) !important;
    color:#fff !important;
    box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }
}

@media (max-width: 560px){
  .hero{
    height:640px !important;
    min-height:640px !important;
    max-height:640px !important;
  }
  .hero-content{
    padding-left:18px !important;
    padding-right:18px !important;
    padding-bottom:100px !important;
  }
  .hero-top{
    padding:20px 18px 18px !important;
    border-radius:22px !important;
  }
  .hero-title{
    font-size:clamp(30px, 9.6vw, 40px) !important;
  }
  .hero-controls{
    left:18px !important;
    right:18px !important;
    bottom:26px !important;
  }
}

@media (max-width: 420px){
  .hero{
    height:610px !important;
    min-height:610px !important;
    max-height:610px !important;
  }
  .hero-content{
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:94px !important;
  }
  .hero-top{
    padding:18px 16px 16px !important;
    gap:15px !important;
  }
  .hero-title{
    font-size:clamp(28px, 9.4vw, 36px) !important;
    line-height:1.07 !important;
  }
  .hero-cta-top{
    min-height:42px !important;
    padding:11px 16px !important;
    font-size:13px !important;
  }
  .hero-meta{
    font-size:9px !important;
    padding:8px 11px !important;
  }
  .hero-controls{
    left:16px !important;
    right:16px !important;
    bottom:24px !important;
  }
  .hero-dots,
  .hero-arrow{
    height:42px !important;
  }
  .hero-arrow{
    width:42px !important;
    flex-basis:42px !important;
  }
}

@media (max-width: 360px){
  .hero{
    height:580px !important;
    min-height:580px !important;
    max-height:580px !important;
  }
  .hero-content{
    padding-left:14px !important;
    padding-right:14px !important;
    padding-bottom:88px !important;
  }
  .hero-top{
    padding:16px 14px 14px !important;
    border-radius:20px !important;
  }
  .hero-title{
    font-size:27px !important;
  }
  .hero-controls{
    left:14px !important;
    right:14px !important;
    bottom:22px !important;
  }
}