/* ════════════════════════════════════════════════════════
   onda.ad — Trading Desk · Responsive
   styles/responsive.css — tablet / mobile
   ════════════════════════════════════════════════════════ */

/* ── ≤ 1280 — Tablet landscape ────────────────────── */
@media (max-width: 1280px) {
  .topnav a { padding: 8px 10px; font-size: 11px; }
  .hero__main { gap: var(--s-6); }
  .hero__title { font-size: clamp(64px, 11vw, 152px); }
}

/* ── ≤ 1024 — Tablet ──────────────────────────────── */
@media (max-width: 1024px) {

  /* Topbar */
  .topnav { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: block; }
  .topbar__cta { padding: 0 var(--s-3); height: 36px; font-size: 11px; }
  .topbar__cta-dot { width: 5px; height: 5px; }
  .brand__sub { display: none; }

  /* Hero — split into rows */
  .hero { padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .hero__main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--s-6);
  }
  .hero__title { font-size: clamp(56px, 10vw, 128px); }

  .console { max-width: 560px; width: 100%; }

  .hero__bigboard { grid-template-columns: repeat(2, 1fr); }
  .hero__bigboard .bigboard__row:nth-child(2) { border-right: 0; }
  .hero__bigboard .bigboard__row:nth-child(1),
  .hero__bigboard .bigboard__row:nth-child(2) { border-bottom: var(--b-1); }
  .bigboard__val { font-size: clamp(40px, 7vw, 56px); }

  /* Section heads */
  .sect-head {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--s-3);
    margin-bottom: var(--s-7);
  }
  .sect-head__no, .sect-head__tag, .sect-head__title, .sect-head__lede { grid-column: 1; }
  .sect-head__no { grid-row: 1; }
  .sect-head__tag { grid-row: 2; }
  .sect-head__title { grid-row: 3; }
  .sect-head__lede { grid-row: 4; }

  /* Quote board — 4 → 2 cols */
  .quote-board { grid-template-columns: repeat(2, 1fr); }
  .quote { min-height: 240px; border-bottom: var(--b-1); }
  .quote:nth-child(2n) { border-right: 0; }
  .quote:nth-child(n+3) { border-bottom: 0; }
  .quote__num { font-size: clamp(48px, 9vw, 80px); }

  /* Symbols — 2 → 2 (compress) */
  .symbol { padding: var(--s-5); min-height: auto; }

  /* Backtests — keep grid but compress */
  .bt {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .bt__quote, .bt__chart, .bt__stats { grid-column: 1; }
  .bt__quote { grid-row: 2; }
  .bt__chart { grid-row: 3; max-width: 100%; }
  .bt__stats { grid-row: 4; }

  /* Process flow — compress */
  .flow {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--s-2);
  }
  .flow__node { padding: var(--s-4); }
  .flow__arrow {
    height: 24px;
    transform: rotate(90deg);
  }

  /* Desks — 3 → 1 col */
  .desks { grid-template-columns: 1fr; }
  .desk {
    border-right: 0;
    border-bottom: var(--b-1);
    min-height: auto;
  }
  .desk:last-child { border-bottom: 0; }
  .desk--featured { margin-top: 0; border-top: 2px solid var(--good); }
  .desk__badge { top: -38px; }

  /* FAQ */
  .qa summary { grid-template-columns: 20px 56px 1fr 28px; gap: var(--s-2); padding: var(--s-4); }
  .qa__a { padding-left: calc(20px + 56px + var(--s-4) + var(--s-2)); padding-right: var(--s-4); padding-bottom: var(--s-4); }

  /* CTA */
  .cta__title { font-size: clamp(40px, 8vw, 80px); }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7) clamp(20px, 4vw, 48px); }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

/* ── ≤ 768 — Tablet portrait / mobile ─────────────── */
@media (max-width: 768px) {

  body {
    font-size: 14.5px;
    padding-bottom: 80px;  /* sticky-cta clearance */
  }

  /* Sticky CTA visible */
  .sticky-cta { display: flex; }

  /* Topbar — hide CTA (lives in sticky bar) */
  .topbar__cta { display: none; }
  .brand__name { font-size: 18px; }
  .brand__cross { width: 18px; height: 18px; font-size: 14px; }

  /* Ticker — keep but smaller */
  .ticker { font-size: 11px; height: 32px; }
  .ticker__brand { padding: 0 var(--s-3); gap: 6px; }
  .ticker__brand-text { font-size: 11px; }
  .ticker__clock { padding: 0 var(--s-3); }
  :root { --ticker-h: 32px; }

  section { padding-left: var(--s-4); padding-right: var(--s-4); }

  /* Tighten section vertical padding */
  .metrics, .service, .case, .process, .price, .faq {
    padding-top: clamp(40px, 7vw, 64px);
    padding-bottom: clamp(40px, 7vw, 64px);
  }
  .hero { padding-top: var(--s-5); padding-bottom: var(--s-6); }

  .sect-head { margin-bottom: var(--s-5); padding-top: var(--s-2); }
  .sect-head__title { font-size: clamp(36px, 9vw, 56px); }

  /* Hero */
  .hero__masthead { padding-bottom: var(--s-4); gap: 6px; }
  .masthead__left, .masthead__right { gap: 4px; }
  .tag { font-size: 9.5px; padding: 3px 6px; }
  .hero__main { padding-top: var(--s-5); padding-bottom: var(--s-5); gap: var(--s-5); }
  .hero__title-block { gap: var(--s-4); }
  .hero__supertitle { font-size: 11px; }
  .hero__title {
    font-size: clamp(48px, 13vw, 88px);
    line-height: 0.92;
    letter-spacing: -0.02em;
  }
  .hero__lede { font-size: 14.5px; padding-left: var(--s-3); }
  .hero__cta { flex-direction: column; gap: var(--s-2); }
  .hero__cta .ctabtn {
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
  }
  .ctabtn__sub { display: none; }

  /* Console panel */
  .console__head { padding: 10px 14px; }
  .console__title { font-size: 10px; }
  .console__id { font-size: 10px; }
  .console__body { padding: var(--s-3) var(--s-4); gap: 8px; }
  .console__row { padding-bottom: 6px; }
  .console__key { font-size: 11px; }
  .console__val { font-size: 12.5px; }
  .console__val .big-num { font-size: 20px; }
  .console__foot { padding: 10px 14px; font-size: 11px; }

  /* Bigboard */
  .hero__bigboard { grid-template-columns: 1fr 1fr; }
  .bigboard__row { padding: var(--s-4); }
  .bigboard__lab { font-size: 9.5px; }
  .bigboard__val { font-size: clamp(32px, 9vw, 48px); }

  /* Quote board — 1 col native list */
  .quote-board { grid-template-columns: 1fr; }
  .quote {
    min-height: auto;
    padding: var(--s-4);
    border-right: 0 !important;
    border-bottom: var(--b-1);
    gap: var(--s-2);
  }
  .quote:last-child { border-bottom: 0; }
  .quote__num { font-size: clamp(48px, 14vw, 72px); }
  .quote__desc { font-size: 12.5px; }

  /* Symbols — 2 → 1 */
  .symbols { grid-template-columns: 1fr; }
  .symbol {
    padding: var(--s-4);
    border-right: 0 !important;
    border-bottom: var(--b-1) !important;
    min-height: auto;
    gap: var(--s-3);
  }
  .symbol:last-child { border-bottom: 0 !important; }
  .symbol__title { font-size: 22px; }
  .symbol__title-en { font-size: 11px; letter-spacing: 0.16em; }
  .symbol__desc { font-size: 13px; }
  .symbol__stats dt { font-size: 9.5px; }
  .symbol__stats dd { font-size: 12px; }

  /* Backtests */
  .bt { padding: var(--s-4); gap: var(--s-3); }
  .bt__head { font-size: 10.5px; gap: var(--s-2); padding-bottom: var(--s-2); }
  .bt__period { margin-left: 0; flex-basis: 100%; }
  .bt__quote { font-size: 14px; padding-left: var(--s-3); }
  .bt__svg { height: 64px; }
  .bt__legend { font-size: 9.5px; flex-wrap: wrap; gap: 6px; }
  .bt__stats dd { font-size: 22px; }
  .bt__stats { gap: var(--s-3); }

  /* Flow */
  .flow__node { padding: var(--s-4); }
  .flow__label { font-size: 18px; }
  .flow__desc { font-size: 12.5px; }

  /* Desks */
  .desk { padding: var(--s-4); gap: var(--s-3); }
  .desk__title { font-size: 22px; }
  .desk__price { padding: var(--s-3) 0; }
  .desk__price-num { font-size: clamp(40px, 14vw, 64px); }
  .desk__list li { font-size: 12.5px; }
  .desk__cta { font-size: 11px; padding: var(--s-3) 0; }
  .desk__badge { top: -28px; padding: 4px 8px; font-size: 9.5px; }

  /* FAQ */
  .qa summary { grid-template-columns: 16px 48px 1fr 24px; gap: var(--s-2); padding: var(--s-3); }
  .qa__no { font-size: 10px; }
  .qa__text { font-size: 14.5px; }
  .qa__plus { font-size: 18px; }
  .qa__a {
    padding-left: calc(16px + 48px + var(--s-3) + var(--s-2));
    padding-right: var(--s-3);
    padding-bottom: var(--s-4);
  }
  .qa__a p { font-size: 13.5px; }

  /* CTA */
  .cta__title { font-size: clamp(36px, 10vw, 64px); }
  .cta__inner { padding: var(--s-9) var(--s-4); gap: var(--s-4); }
  .cta__lede { font-size: 13.5px; }
  .cta__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-2); }
  .cta__actions .ctabtn { justify-content: center; padding: 16px 18px; font-size: 12px; }
  .cta__assurance { gap: var(--s-3); flex-direction: column; align-items: flex-start; padding-top: var(--s-4); margin-top: var(--s-4); }
  .cta__assurance li { font-size: 9.5px; }

  /* Footer */
  .footer__inner { padding: var(--s-7) var(--s-4) var(--s-4); gap: var(--s-6); }
  .footer__brand .brand__name { font-size: 24px; }
  .footer__tag { font-size: 13px; }
  .footer__cols { gap: var(--s-5); }
  .footer__col h4 { font-size: 10px; }
  .footer__col a, .footer__col span { font-size: 12.5px; line-height: 1.9; }
  .footer__sysrow { gap: var(--s-3); font-size: 9.5px; }

  /* Touch target safety ≥ 44 */
  .footer__col a { min-height: 36px; display: flex; align-items: center; }
}

/* ── ≤ 480 — Mobile ───────────────────────────────── */
@media (max-width: 480px) {
  section { padding-left: var(--s-3); padding-right: var(--s-3); }

  .ticker__brand-text { display: none; }

  .hero__title { font-size: clamp(40px, 13vw, 64px); }
  .hero__masthead { font-size: 9px; }
  .tag { font-size: 9px; padding: 2px 5px; }

  .hero__bigboard { grid-template-columns: 1fr; }
  .hero__bigboard .bigboard__row {
    border-right: 0 !important;
    border-bottom: var(--b-1);
  }
  .hero__bigboard .bigboard__row:last-child { border-bottom: 0; }

  .sect-head__title { font-size: clamp(28px, 9vw, 44px); }

  .quote__num { font-size: 56px; }
  .symbol__title { font-size: 20px; }
  .bt__quote { font-size: 13.5px; }
  .desk__title { font-size: 20px; }
  .desk__price-num { font-size: 48px; }
  .qa__text { font-size: 13.5px; }
  .cta__title { font-size: clamp(30px, 11vw, 52px); }

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

/* ── ≤ 360 — Smallest ─────────────────────────────── */
@media (max-width: 380px) {
  .hero__title { font-size: 38px; line-height: 0.92; }
  .sect-head__title { font-size: 28px; }
  .symbol__title { font-size: 18px; }
  .desk__title { font-size: 18px; }
  .desk__price-num { font-size: 40px; }
  .quote__num { font-size: 48px; }
  .cta__title { font-size: 30px; }
  .sticky-cta__plan-text { font-size: 12px; }
  .sticky-cta__main { font-size: 11.5px; letter-spacing: 0.12em; }
}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; transform: translateX(0); }
  .reveal { opacity: 1; transform: none; }
  .dot--live, .dot--bad, .cursor, .ctabtn__dot, .topbar__cta-dot, .sticky-cta__dot { animation: none; }
}

/* ── Print ────────────────────────────────────────── */
@media print {
  .ticker, .topbar, .cta, .footer, .sticky-cta { display: none; }
  body { background: #fff; color: #000; padding-top: 0; }
}