/* =========================================================
   Sotirov & Co. Tech — Home Page Styles
   ========================================================= */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body.home-white {
  background: linear-gradient(180deg, #0a1747 0%, #0b1d54 45%, #0a1747 100%);
  color: #e6edf5;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Header ─────────────────────────────────────── */
header {
  transition: none;
}
header.scrolled {
  background: transparent !important;
  box-shadow: none;
}

/* ── Word rows ───────────────────────────────────── */
#word-sections {
  padding: 24px 0 12px 0;
  background: transparent;
  overflow: hidden;
}
#word-sections ul {
  list-style: none;
  white-space: nowrap;
  padding: 12px 0;
  display: flex;
  gap: 54px;
  will-change: transform;
}
#word-sections li {
  display: inline-block;
  cursor: default;
  transition: color 0.22s, transform 0.28s cubic-bezier(.4,0,.2,1);
}

/* ── About section overrides ─────────────────────── */
.about-text-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.about-text-centered .about-list {
  align-items: center;
  padding-left: 0;
}
.about-text-centered .about-list li {
  text-align: left;
}

/* ── Hero video ──────────────────────────────────── */
#hero-video-container {
  user-select: none;
}

/* ── CTA button base (complement inline styles) ── */
.hero-cta-btn,
.about-cta {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* ── Footer ──────────────────────────────────────── */
.why-footer {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* ── Menu overlay ────────────────────────────────── */
#menu-overlay {
  transition: none;
}
#menu-left, #menu-right {
  will-change: transform;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .about-content {
    max-width: 96vw !important;
    padding: 8vw 4vw !important;
  }
  .about-title {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
  header {
    padding: 16px 20px !important;
  }
  #logo-box img {
    height: 72px !important;
  }
  .menu-big {
    font-size: 1.5rem !important;
  }
  #menu-left {
    width: 100vw !important;
  }
  #menu-right {
    display: none !important;
  }
  .why-footer {
    padding: 40px 20px 24px;
  }
}

@media (max-width: 540px) {
  .hero-cta-btn,
  .about-cta {
    padding: 14px 28px !important;
    font-size: 1rem !important;
  }
  header {
    padding: 10px 14px !important;
  }
  #logo-box img {
    height: 52px !important;
  }
}

@media (max-width: 440px) {
  #logo-box img {
    height: 26px !important;
  }
}

@media (max-width: 768px) {
  .menu-no-mobile { display: none !important; }
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  background: #eaf6fb;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00bfff 0%, #0094d6 100%);
  border-radius: 8px;
}

/* ── Selection ───────────────────────────────────── */
::selection {
  background: #00bfff33;
  color: #1a2a44;
}