@media (min-width: 1440px) {
  :root {
    --max-width-site: 1380px;
  }

  .hero-split-grid {
    gap: 72px;
  }
}

@media (max-width: 1200px) and (min-width: 993px) {
  .hero h1 {
    font-size: clamp(2.4rem, 3.8vw, 3.6rem);
  }

  .bento-grid {
    gap: 16px;
  }

  .highlight-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bento-card.bento-wide,
  .bento-card.bento-full {
    grid-column: span 1;
  }

  .showcase,
  .showcase.flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }

  .device-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .codec-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .codec-col:not(:last-child)::after {
    display: none;
  }

  .highlight-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 72px;
  }

  .hero {
    padding-top: calc(var(--header-height, 64px) + 24px);
    padding-bottom: 40px;
    min-height: auto;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }

  .hero-actions .btn,
  .hero-actions .btn-google-play,
  .hero-actions .store-button {
    width: 100%;
    justify-content: center;
  }

  .store-badges-wrap {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }

  .store-badges-wrap .store-button {
    width: 100%;
    justify-content: center;
  }

  .hero-proof-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 28px;
    width: 100%;
  }

  .hero-proof-divider {
    display: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .guide-tabs-nav {
    border-radius: var(--radius-lg);
    gap: 6px;
  }

  .guide-tab-btn {
    width: 100%;
    justify-content: center;
  }

  .highlight-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: clamp(1.95rem, 8vw, 2.6rem);
    letter-spacing: -0.03em;
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  .device-grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }

  .code-box {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .code-box .btn-copy {
    width: 100%;
    justify-content: center;
  }

  .faq-trigger {
    padding: 16px 18px;
    font-size: 0.96rem;
  }

  .faq-content-inner {
    padding: 0 18px 18px;
  }

  .dl-specs {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .announcement-bar {
    padding: 8px 42px 8px 12px;
  }

  .announcement-text {
    font-size: 0.76rem;
  }

  .wabtn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
  }

  .back-to-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    right: calc(env(safe-area-inset-right, 0px) + 16px);
  }
}

@media (max-width: 375px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero h1 {
    font-size: 1.85rem;
  }

  .hero-proof-row {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 100%;
  }

  .hero-proof-item {
    justify-content: center;
  }

  .bento-card {
    padding: 16px;
  }

  .device-card {
    padding: 20px 16px;
  }

  .stat-card {
    padding: 18px 14px;
  }

  .stat-num {
    font-size: 1.8rem;
  }

  .tech-pills {
    gap: 4px;
  }

  .tech-pill {
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  .compare-footnote {
    font-size: 0.76rem;
    padding: 12px 14px;
  }

  .footer-bottom {
    font-size: 0.80rem;
  }
}

@media (max-width: 320px) {
  body {
    font-size: 14px;
  }

  .hero h1 {
    font-size: 1.65rem;
  }

  .btn {
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  .store-button {
    padding: 6px 12px;
    min-width: 0;
  }

  .store-button-title {
    font-size: 0.92rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) and (pointer: coarse), (display-mode: tv) {
  a:focus-visible,
  button:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 4px !important;
    transform: scale(1.03) !important;
    box-shadow: 0 0 25px var(--primary-glow-strong) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .device-tv-frame,
  .btn-primary::after,
  .store-button::after,
  .btn-google-play::after,
  .floating-chip,
  .hero-slide-card {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}