/* ==========================================================================
   MKTAIS — responsive.css
   Breakpoints: 1280 · 1100 (nav collapses) · 1024 · 768 · 480 · 390/375
   Also: motion system (reveal, chart draw) + prefers-reduced-motion
   ========================================================================== */

/* ---------- Motion ------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

.js .hero-chart .draw-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hero-chart.is-drawn .draw-line { animation: draw 2.4s var(--ease) 0.2s forwards; }
.js .hero-chart .band-fill, .js .hero-chart .band-glow { opacity: 0; transition: opacity 1.4s var(--ease) 1.2s; }
.js .hero-chart.is-drawn .band-fill, .js .hero-chart.is-drawn .band-glow { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-chip { animation: float 7s ease-in-out infinite; }
.hero-chip--2 { animation-delay: -2.3s; }
.hero-chip--3 { animation-delay: -4.6s; }
@keyframes float { 50% { transform: translateY(-6px); } }

.hero::before { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-2%, 1.5%, 0) scale(1.03); } }

.badge--live::before { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero-chart .draw-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .hero-chart .band-fill, .js .hero-chart .band-glow { opacity: 1; }
  .hero-chip, .hero::before { animation: none; }
}

/* ---------- ≤1280 -------------------------------------------------------- */
@media (max-width: 1280px) {
  .nav__link { padding-inline: 9px; font-size: 12px; letter-spacing: 0.07em; }
  .nav__link::after { left: 9px; right: 9px; }
  .header__inner { gap: 18px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: start; }
  .footer__brand p { margin: 0; }
  .footer__brand .socials { grid-column: 2; }
}

/* ---------- ≤1100: collapse navigation into a drawer ---------------------- */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(400px, 100%); height: 100dvh; margin: 0; z-index: 110;
    display: flex; flex-direction: column; gap: 28px;
    padding: calc(var(--header-h) + 12px) 24px 32px; overflow-y: auto;
    background: #060b12; border-left: 1px solid var(--line);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform 0.4s var(--ease); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: flex; align-items: center; justify-content: space-between; padding: 17px 4px; font-size: 14px; letter-spacing: 0.12em; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent); }
  .nav__link .icon { display: block !important; width: 16px; height: 16px; color: var(--faint); }
  .nav__mobile-extra { display: grid; gap: 20px; }
  .nav__mobile-extra p { margin: 0; font-size: 13px; color: var(--muted); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 105; background: rgba(2, 4, 8, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s; }
  .brand, .header__actions { position: relative; z-index: 115; }
  .header__actions { margin-left: auto; }
  /* no backdrop-filter here: it would turn the fixed drawer into a child of the header box */
  .site-header.is-scrolled, .site-header.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 9, 15, 0.96); }
  body.nav-open .site-header { background: rgba(5, 9, 15, 0.98); border-bottom-color: var(--line); }
}
@media (min-width: 1101px) { .nav__link .icon { display: none; } .nav-backdrop { display: none; } }

/* ---------- ≤1024 -------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__content { max-width: 680px; }
  .hero__visual { max-width: 760px; width: 100%; margin: -10px auto 0; }
  .cap-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap:nth-child(4) { border-left: 0; }
  .cap:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .showcase, .showcase--even { grid-template-columns: 1fr; }
  .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-banner, .hiw, .touch, .split, .page-hero__grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .aside-sticky { position: static; }
  .article-aside .toc { display: none; }
  .shop-layout, .directory { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .filters fieldset { margin-top: 12px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .footer__newsletter { grid-template-columns: 1fr; }
}

/* ---------- ≤768 (tablet) ------------------------------------------------ */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .header__shop { display: none; }
  .icon-btn[data-popover="account"] { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head--center { align-items: center; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid .product-card:first-child { grid-column: 1 / -1; flex-direction: row; }
  .product-grid .product-card:first-child .product-card__media { width: 50%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .cap-strip { grid-template-columns: 1fr 1fr; }
  .cap:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .cap:nth-child(1), .cap:nth-child(2) { border-top: 0; }
  .cap:nth-child(even) { border-left: 1px solid var(--line); }
  .cap:last-child { grid-column: 1 / -1; border-left: 0; }
  .area__head { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { display: block; }
  .footer__brand p { margin: 16px 0 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .filters form { grid-template-columns: 1fr 1fr; }
  .screens { grid-template-columns: 1fr; }
  .screens figure:first-child { grid-column: auto; }
  .hero-chip--3 { display: none; }
  .showcase .feature-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≤480 (mobile) ------------------------------------------------ */
@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .brand__name { font-size: 17px; }
  .brand__tag { font-size: 7.5px; letter-spacing: 0.18em; }
  .brand__mark { width: 34px; height: 28px; }
  .icon-btn { width: 38px; height: 38px; }
  .hero { padding-top: calc(var(--header-h) + 36px); }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero-chip { padding: 8px 10px; }
  .hero-chip--1 { top: 4%; left: 0; }
  .hero-chip--2 { top: auto; bottom: 12%; right: 0; }
  .hero__meta { gap: 10px 16px; }
  .btn-row--stack .btn { flex: 1 1 100%; }
  .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .cap-strip { grid-template-columns: 1fr; }
  .cap:nth-child(n) { border-left: 0 !important; border-top: 1px solid var(--line); }
  .cap:first-child { border-top: 0; }
  .cap { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; }
  .cap h3 { margin: 2px 0 6px; }
  .cap p { grid-column: 2; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid .product-card:first-child { flex-direction: column; }
  .product-grid .product-card:first-child .product-card__media { width: 100%; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-grid .product-card--soon { flex-direction: row; }
  .product-grid .product-card--soon .product-card__media { width: 38%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .product-grid .product-card--soon .product-card__media .badge { display: none; }
  .product-grid .product-card--soon .product-card__desc { display: none; }
  .product-grid .product-card--soon h3 { margin-bottom: 2px; }
  .product-grid .product-card--soon .product-card__type { margin-bottom: 4px; }
  .product-grid .product-card--soon .product-card__soon { border-top: 0; padding: 4px 0 0; font-size: 11.5px; }
  .product-grid .product-card--soon .product-card__body { padding: 14px 16px; }
  .showcase { padding: 16px; }
  .showcase .feature-list { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
  .filters form { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .tabs__list { display: flex; width: 100%; }
  .tabs__tab { flex: 1; padding: 10px 8px; font-size: 11.5px; }
  .prose { font-size: 16.5px; }
  .spec-table th { width: 42%; }
  .spec-table th, .spec-table td { padding: 13px 14px; }
  .tv-list li { flex-wrap: wrap; }
  .popover { right: 12px; }
}

/* ---------- ≤390 / 375 -------------------------------------------------- */
@media (max-width: 390px) {
  :root { --gutter: 16px; }
  .brand__tag { display: none; }
  .display { font-size: 38px; }
  .product-card__actions { grid-template-columns: 1fr; }
  .hero-chip small { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

/* ---------- Print ------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .toast, .search-dialog, .nav-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { color: #000; }
}