/* =================================================
   RESET & BASE
   ================================================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    background: black;
    color: #ffffff;
    overflow-x: hidden; /* iOS fix */
  }
  
  /* =================================================
     VIDEO BACKGROUND (iOS SAFE)
     ================================================= */
  .video-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  
  .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
    pointer-events: none;
  }
  
  /* =================================================
     HEADER
     ================================================= */
  header {
    position: fixed;
    top: env(safe-area-inset-top, 16px);
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
  }
  
  .logo {
    height: 90px;
    flex-shrink: 0;
  }
  
  .top-right {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
  }
  
  .lang {
    opacity: 0.4;
    text-decoration: none;
    color: #ffffff;
  }
  
  .lang.active {
    opacity: 1;
    color: #d4af37;
  }
  
  /* =================================================
     MAIN
     ================================================= */
  main {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-left: 8%;
  }
  
  .content {
    max-width: 520px;
  }
  
  h1 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 26px;
    font-weight: 500;
  }
  
  p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 34px;
    opacity: 0.9;
  }
  
  /* =================================================
     SEO HERO TYPOGRAPHY  ✅ ДОБАВЛЕНО
     ================================================= */
     .hero-title {
      font-size: 36px;
      font-weight: 500;
      line-height: 1.15;
      margin-bottom: 26px;
    }
    
    .hero-subtitle {
      font-size: 15px;
      line-height: 1.7;
      opacity: 0.9;
    }
    
    
    .hero-top {
      display: block;
      font-size: 36px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    
    .hero-bottom {
      display: block;
      font-size: 16px;
      opacity: 0.7;
    }
    
  
  /* =================================================
     CTA
     ================================================= */
  .cta {
    display: inline-block;
    padding: 14px 20px;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: #000;
    background: linear-gradient(
      135deg,
      #f5e7a1 0%,
      #d4af37 45%,
      #b8962e 100%
    );
    border-radius: 40px;
    text-decoration: none;
    box-shadow:
      0 8px 24px rgba(212,175,55,.35),
      inset 0 1px 0 rgba(255,255,255,.4);
  }
  
  .header-cta {
    padding: 10px 16px;
    font-size: 11px;
  }
  
  /* =================================================
     FOOTER
     ================================================= */
  footer {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 16px);
    width: 100%;
    text-align: center;
    font-size: 15px;
  }
  
  .contacts {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .contacts img {
    width: 40px;
    height: 40px;
    filter:
      invert(72%)
      sepia(85%)
      saturate(420%)
      hue-rotate(6deg)
      brightness(95%)
      contrast(95%);
  }
  
  /* =================================================
     RESPONSIVE CONTENT
     ================================================= */
  @media (max-width: 768px) {
    main {
      justify-content: center;
      padding-left: 0;
      text-align: center;
    }
  
    .content {
      padding: 0 18px;
    }
  
    h1 {
      font-size: 30px;
    }
  
    p {
      font-size: 14px;
    }
  }
  
  /* 📱 HERO TYPOGRAPHY MOBILE */
  @media (max-width: 420px) {
    .hero-title {
      font-size: 24px;
    }
  
    .hero-subtitle {
      font-size: 14px;
    }
  }
  
  
  @media (max-width: 420px) {
    main {
      align-items: flex-start;
      padding-top: 30vh;
    }
  
    h1 {
      font-size: 24px;
    }
  
    .logo {
      height: 76px;
    }
  }
  
  /* =================================================
     POSITION CONTROLS (TUNE HERE ONLY)
     ================================================= */
  
  /* 🖥 DESKTOP */
  @media (min-width: 1025px) {
  
    .logo {
      position: relative;
      top: 0px;
      left: 0px;
    }
  
    .copyright {
      position: relative;
      top: -8px;
      left: 0px;
    }
  }
  
  /* 📲 TABLET + PHONE */
  @media (max-width: 1024px) {
  
    .logo {
      position: relative;
      top: 6px;
      left: 0px;
    }
  
    .copyright {
      position: relative;
      top: -1px;
      left: 0px;
    }
  }
  
  /* 📱 SMALL PHONES */
  @media (max-width: 420px) {
  
    .logo {
      top: 10px;
    }
  
    .copyright {
      top: 17px;
    }
  }
  
  /* ===============================
     iPHONE WITH SAFE AREA (NOTCH)
     =============================== */
  @supports (padding: env(safe-area-inset-bottom)) {
    footer {
      bottom: calc(env(safe-area-inset-bottom) + 40px);
    }
  }