/*
 * TK Web Studio responsive homepage adjustments.
 * This file must never introduce a second visual theme. Desktop and mobile share
 * the same navy / blue / cyan brand system defined by home.css.
 */

.home-b-starter,
.home-b-audit,
.home-b-trust,
.home-b-pricing,
.home-b-about,
.home-b-swipe-hint {
  display: none !important;
}

@media (max-width: 1100px) {
  html body.home-page .home-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    width: min(760px, calc(100% - 40px)) !important;
    padding-block: 54px 62px !important;
  }

  html body.home-page .home-hero__copy,
  html body.home-page .home-preview {
    width: 100% !important;
    max-width: 720px !important;
    justify-self: start !important;
  }

  html body.home-page .home-hero h1 {
    max-width: 680px !important;
    font-size: clamp(44px, 7vw, 60px) !important;
  }

  html body.home-page .home-heading,
  html body.home-page .home-real-client__head {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

@media (max-width: 900px) {
  html body.home-page .header {
    background: rgba(5,9,20,.97) !important;
    border-bottom-color: rgba(65,216,255,.14) !important;
  }

  html body.home-page .menuBtn {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(65,216,255,.24) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.055) !important;
    color: #f5f9ff !important;
  }

  html body.home-page .nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1800 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    max-height: calc(100dvh - 86px) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(65,216,255,.18) !important;
    border-radius: 14px !important;
    background: #081729 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.42) !important;
  }

  html body.home-page .nav.open {
    display: flex !important;
  }

  html body.home-page .nav > a,
  html body.home-page .tk-nav-services__link {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: flex-start !important;
    padding: 12px 13px !important;
    border-radius: 9px !important;
    color: #c8d4e2 !important;
    background: transparent !important;
    font-size: 14px !important;
  }

  html body.home-page .nav > a:hover,
  html body.home-page .nav > a:focus-visible,
  html body.home-page .tk-nav-services__link:hover,
  html body.home-page .tk-nav-services__link:focus-visible {
    color: #fff !important;
    background: rgba(65,216,255,.07) !important;
  }

  html body.home-page .nav .nav-cta {
    margin: 4px 0 0 !important;
    justify-content: center !important;
    color: #04111f !important;
    background: var(--home-cyan) !important;
  }

  html body.home-page .tk-nav-services {
    display: grid !important;
    grid-template-columns: 1fr 44px !important;
    gap: 4px !important;
  }

  html body.home-page .tk-nav-services__toggle {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 46px !important;
    border: 1px solid rgba(65,216,255,.18) !important;
    border-radius: 9px !important;
    color: #c8d4e2 !important;
    background: rgba(255,255,255,.035) !important;
  }

  html body.home-page .tk-nav-submenu {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
    border-color: rgba(65,216,255,.14) !important;
    background: #061329 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 700px) {
  html body.home-page {
    padding-bottom: 76px !important;
  }

  html body.home-page .home-shell,
  html body.home-page .container {
    width: min(100% - 24px, 1160px) !important;
  }

  html body.home-page .home-hero__grid {
    width: min(100% - 24px, 680px) !important;
    gap: 24px !important;
    padding-block: 38px 46px !important;
  }

  html body.home-page .home-hero h1 {
    max-width: 100% !important;
    margin: 14px 0 17px !important;
    font-size: clamp(36px, 10.5vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  html body.home-page .home-hero h1 span {
    display: inline !important;
  }

  html body.home-page .home-hero__lead {
    max-width: 100% !important;
    font-size: 15.5px !important;
    line-height: 1.58 !important;
  }

  html body.home-page .home-hero__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  html body.home-page .home-btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  html body.home-page .home-hero__facts {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 22px !important;
  }

  html body.home-page .home-hero__price {
    width: fit-content !important;
  }

  html body.home-page .home-section {
    padding-block: 54px !important;
  }

  html body.home-page .home-heading h2,
  html body.home-page .home-real-client__head h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
  }

  html body.home-page .home-demo-grid,
  html body.home-page .home-services,
  html body.home-page .home-process,
  html body.home-page .home-proof__grid {
    grid-template-columns: 1fr !important;
  }

  html body.home-page .contact-fab {
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  html body.home-page .aiPanel {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(72svh, 620px) !important;
  }
}

@media (max-width: 430px) {
  html body.home-page .home-hero h1 {
    font-size: clamp(34px, 10.5vw, 40px) !important;
  }
}