/* ==========================================================================
   TimeVault — responsive layer
   Breakpoints: 1440 / 1180 / 1024 / 900 / 768 / 600 / 430 / 360
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --container: 1320px; }
  .hero__device { --w: 330px; }
}

@media (max-width: 1280px) {
  .float-card--notify { right: -2%; }
  .float-card--timeline { right: -4%; }
  .footer__top { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.7fr)); }
  .footer__contact { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--line-dark); }
}

@media (max-width: 1180px) {
  .nav__link { padding: 0 10px; }
  .tile--lock { grid-column: span 12; grid-row: auto; min-height: 0; }
  .tile--payout, .tile--ledger { grid-column: span 6; }
  .benefit { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr); }
  .benefit__arrow { display: none; }
}

/* Tablet landscape & below: collapse nav */
@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .header__actions .btn { display: none; }

  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
  .hero__title { margin-inline: auto; }
  .hero__ctas, .hero__trust, .hero__stores { justify-content: center; }
  .hero__visual { min-height: 620px; margin-top: 8px; }
  .float-card--lock { left: 6%; }
  .float-card--notify { right: 4%; }
  .float-card--timeline { right: 4%; }

  .problem__top { grid-template-columns: 1fr; }
  .problem__title { max-width: 14em; }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__visual { order: 2; min-height: 600px; }

  .how__grid { grid-template-columns: 1fr; }
  /* Compact vault stays pinned (CSS sticky) while the steps scroll past */
  .how__sticky { top: calc(var(--header-h) + 6px); z-index: 3; display: flex; justify-content: center; padding: 10px 0 26px; margin-inline: calc(var(--gutter) * -1); background: linear-gradient(180deg, var(--ink-950) 78%, rgba(11,10,9,0)); box-shadow: 0 calc(-1 * (var(--header-h) + 6px)) 0 var(--ink-950); }
  .how__sticky .vault { width: 200px; }
  .vault__state { bottom: -14px; padding: 6px 12px; font-size: 0.6875rem; }
  .step { min-height: 0; padding-bottom: 56px; }

  .showcase__grid { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .tab { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 8px; gap: 8px; }
  .tab__ico { grid-row: auto; }
  .tab__title { font-size: 0.875rem; }
  .tab[aria-selected="true"] .tab__desc { display: none; }
  .showcase__real { grid-template-columns: 1fr; }

  .why__head, .investors__head { grid-template-columns: 1fr; }
  .why__ring { display: none; }

  .inv-card--market, .inv-card--model { grid-column: span 12; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: relative; top: 0; }

  .legal-layout { grid-template-columns: 1fr; }
  .toc { position: relative; top: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 20px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line-light); }
  .toc p { grid-column: 1 / -1; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btns { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; max-width: 520px; }
  .problem__grid { grid-template-columns: 1fr; gap: 0; }
  .problem__item { padding: 28px 0 32px; }
  .tile--payout, .tile--ledger, .tile--security, .tile--rewards { grid-column: span 12; }
  .inv-card--growth, .inv-card--cta { grid-column: span 12; }
  .venn { grid-template-columns: 1fr; }
  .venn svg { max-width: 380px; margin-inline: auto; }
  .roadmap__track { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .roadmap__fill { transform-origin: top; transform: scaleY(var(--rm, 0.375)); }
  .roadmap__list { grid-template-columns: 1fr; gap: 28px; }
  .phase { grid-template-columns: 44px 1fr; gap: 6px 18px; }
  .phase__node { grid-row: span 4; }
  .phase h4 { margin-top: 0; }
  .split { grid-template-columns: 1fr; }
  .modal__panel { grid-template-columns: 1fr; }
  .modal__visual { display: none; }
}

@media (max-width: 1024px) {
  .about-story, .feature-row { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-row__visual { order: 0; }
  .feature-row__visual { min-height: 360px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .principles { grid-template-columns: 1fr; }
  .video-card { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .facts li, .facts li + li { padding: 20px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--line-dark); }
  .info-card { grid-template-columns: 1fr; }
  .info-card .tile__ico { grid-row: auto; }
}

/* Tablet portrait */
@media (max-width: 768px) {
  :root { --header-h: 68px; }
  .site-header.is-scrolled { --header-h: 62px; }
  .hero__visual { min-height: 560px; }
  .hero__device { --w: 262px; }
  .float-card { padding: 10px 12px 10px 10px; gap: 10px; }
  .float-card__ico { width: 34px; height: 34px; border-radius: 10px; }
  .float-card--lock { left: 0; top: 48%; }
  .float-card--notify { right: 0; top: 10%; max-width: 200px; }
  .float-card--timeline { right: 0; bottom: 6%; width: 230px; }

  .how__sticky .vault { width: 132px; }
  .steps { padding-left: 58px; }
  .step__dot { left: -58px; width: 40px; height: 40px; }
  .steps__track { left: 19px; }

  .tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; width: auto; min-width: 128px; scroll-snap-align: start; }

  .benefit { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; }
  .benefit p { grid-column: 2; }
  .why__quote { grid-template-columns: 1fr; }

  .footer__contact { grid-template-columns: 1fr; justify-content: start; }
  .how__foot { padding: 24px; }
  .form__row { grid-template-columns: 1fr; }
}

/* Large phones */
@media (max-width: 600px) {
  .hero__ctas { width: 100%; flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .hero__trust { flex-direction: column; align-items: center; gap: 8px; }
  .hero__visual { min-height: 520px; margin-inline: calc(var(--gutter) * -1); }
  .hero__device { --w: 238px; }
  .hero__dial { width: 150%; }
  .float-card b { font-size: 0.78rem; }
  .float-card span { font-size: 0.6875rem; }
  .float-card--notify { max-width: 176px; right: 8px; top: 8%; }
  .float-card--lock { left: 8px; top: 46%; }
  .float-card--timeline { right: 8px; width: 210px; padding: 12px 14px; }

  .intro__visual { min-height: 540px; }
  .intro__device { --w: 240px; }
  .pillar { grid-template-columns: 40px 1fr; gap: 6px 12px; }

  .lock-visual { grid-template-columns: 1fr; }
  .lock-visual__dial { width: 180px; }
  .lock-visual__shot { width: min(100%, 240px); }
  .flow-node { font-size: 0.6875rem; }
  .flow-node__ico { width: 40px; height: 40px; }
  .also { padding: 18px; }

  .inline-form { flex-direction: column; border-radius: 22px; padding: 8px; }
  .inline-form .input { min-height: 50px; text-align: center; }
  .inline-form .btn { width: 100%; }

  .showcase__shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .showcase__shots figcaption { display: none; }

  .radio-cards { grid-template-columns: 1fr; }
  .modal { padding: 0; place-items: end center; }
  .modal__panel { width: 100%; max-height: 94dvh; border-radius: 26px 26px 0 0; }
  .modal__body { padding: 56px 22px 28px; }
  .modal--video { place-items: center; padding: 12px; }
  .modal--video .modal__panel { border-radius: 16px; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; }
  .cta-band .btns .btn { width: 100%; }
}

/* Standard phones (375–430) */
@media (max-width: 430px) {
  .stores { width: 100%; }
  .store-badge { flex: 1 1 150px; justify-content: center; }
  .hero__visual { min-height: 500px; }
  .hero__device { --w: 226px; }
  .float-card--notify { display: none; }
  .tile { padding: 22px; }
  .acc-panel__inner { padding-right: 0; }
  .how__foot .btns, .how__foot .btns .btn { width: 100%; }
}

/* Small phones (320–360) */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand { font-size: 1.05rem; }
  .brand img { width: 30px; }
  .hero__device { --w: 212px; }
  .float-card--lock { top: 44%; }
  .float-card--timeline { width: 190px; }
  .tab { min-width: 112px; }
  .footer__top { grid-template-columns: 1fr; }
  .btn--lg { padding: 0 22px; }
}

/* Hover-capable pointers only */
@media (hover: none) {
  .tile:hover { transform: none; }
  .benefit:hover h3 { transform: none; color: inherit; }
}