/* =============================================================
   AULTER — responsive.css
   V3 DNA §5.2 — 7 tiers: 320 · 375 · 576 · 768 · 992 · 1280 · 1400
   Tier 0 (≤320px) mandatory · Footer 4-col CSS Grid at all widths
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   TIER 0 — ≤ 320px  (V3 §5.2 — mandatory, never omit)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 320px) {

  .content-width {
    padding-left:  12px;
    padding-right: 12px;
  }

  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }

  .hero            { padding-top: 16px; padding-bottom: 28px; }
  .hero__row       { flex-direction: column; gap: 16px; }
  .hero__visual    { order: -1; width: 100%; }
  .hero__content   { flex: none; max-width: 100%; width: 100%; }
  .preview-frame img { max-height: 160px; }

  .hero__headline    { font-size: 21px; }
  .hero__subheading  { font-size: 13px; }
  .hero__description { font-size: 13px; }

  .hero__cta-group {
    flex-direction: column;
    align-items:    stretch;
  }

  .hero__cta-group .btn {
    width:           100%;
    justify-content: center;
  }

  .btn-lg { padding: 12px 20px; font-size: 14px; }

  .card { padding: 16px; }

  .section-padding    { padding-top: 32px; padding-bottom: 32px; }
  .section-padding-lg { padding-top: 48px; padding-bottom: 48px; }

  /* Footer — V3 §7.7: 4 cols always; shrink font at 320 */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   12px;
  }

  .footer__links a    { font-size: 12px; }
  .footer__heading    { font-size: 11px; }
  .footer__tagline    { font-size: 12px; }

  .footer__bottom {
    flex-direction: column;
    text-align:     center;
  }

  .why-stat { padding: 12px; }
  .why-stat__number { font-size: 24px; }

  .tech-badge { font-size: 11px; padding: 5px 10px; }

  .pill-item { font-size: 12px; padding: 6px 12px; }
}


/* ─────────────────────────────────────────────────────────────
   TIER 1 — 321px – 374px
   ───────────────────────────────────────────────────────────── */

@media (min-width: 321px) and (max-width: 374px) {

  .content-width {
    padding-left:  14px;
    padding-right: 14px;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }

  .hero            { padding-top: 20px; padding-bottom: 32px; }
  .hero__row       { flex-direction: column; gap: 20px; }
  .hero__visual    { order: -1; width: 100%; }
  .hero__content   { flex: none; max-width: 100%; width: 100%; }
  .preview-frame img { max-height: 180px; }

  .hero__headline { font-size: 23px; }
  .hero__subheading  { font-size: 13px; }
  .hero__description { font-size: 13px; }

  .hero__cta-group {
    flex-direction: column;
    align-items:    stretch;
  }

  .hero__cta-group .btn {
    width:           100%;
    justify-content: center;
  }

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

  .footer__links a { font-size: 12px; }
  .footer__heading { font-size: 11px; }
}


/* ─────────────────────────────────────────────────────────────
   TIER 2 — 375px – 575px  (standard mobile)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 375px) and (max-width: 575px) {

  .content-width {
    padding-left:  16px;
    padding-right: 16px;
  }

  h1 { font-size: 26px; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }

  .section-padding    { padding-top: 40px; padding-bottom: 40px; }
  .section-padding-lg { padding-top: 56px; padding-bottom: 56px; }

  .navbar__links,
  .navbar__controls .btn { display: none; }
  .navbar__hamburger     { display: flex; }

  /* Hero — stack: visual ABOVE copy on mobile — V3 §5.2 + §7.2 */
  .hero {
    padding-top:    24px;   /* navbar is sticky 60px, content starts immediately below */
    padding-bottom: 40px;
  }

  .hero__row {
    flex-direction: column;
    gap:            24px;
  }

  .hero__visual {
    order:      -1;          /* visual above copy */
    width:      100%;
  }

  /* Cap preview image height on mobile so it doesn't dominate */
  .preview-frame img {
    max-height: 220px;
  }

  .hero__content {
    flex:      none;
    max-width: 100%;
    width:     100%;
  }

  .hero__headline    { font-size: 25px; }
  .hero__subheading  { font-size: 14px; }
  .hero__description { font-size: 14px; }

  .hero__cta-group {
    flex-direction: column;
    align-items:    stretch;
  }

  .hero__cta-group .btn {
    width:           100%;
    justify-content: center;
  }

  /* Cards */
  .card       { padding: 18px; }
  .card:hover { transform: none; }

  /* Vision cards */
  .vision-card       { padding: 18px; }
  .vision-card:hover { transform: none; }

  /* Status grid */
  .status-grid { grid-template-columns: 1fr; }

  /* Why stat */
  .why-stat-row { grid-template-columns: 1fr 1fr; }

  /* CTA form */
  .cta-form-card { padding: 20px; }

  /* Ecosystem — stack */
  .ecosystem-row {
    flex-direction: column;
    gap:            32px;
  }
  .ecosystem-row__text,
  .ecosystem-row__pills { flex: none; }

  /* Footer — V3 §7.7: 4 cols always */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   16px;
  }

  .footer__links a { font-size: 12px; }
  .footer__heading { font-size: 11px; }
  .footer__tagline { font-size: 13px; display: none; } /* hide tagline at smallest to keep grid tight */

  .footer__bottom {
    flex-direction: column;
    text-align:     center;
  }
}


/* ─────────────────────────────────────────────────────────────
   TIER 3 — 576px – 767px  (large mobile / small tablet)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 576px) and (max-width: 767px) {

  .navbar__links     { display: none; }
  .navbar__hamburger { display: flex; }

  .hero__row {
    flex-direction: column;
    gap:            40px;
  }

  .hero__visual {
    order:  -1;
    width:  100%;
  }

  .preview-frame img { max-height: 280px; }

  .hero__content {
    flex:      none;
    max-width: 100%;
  }

  .hero__cta-group {
    flex-direction: row;
    flex-wrap:      wrap;
  }

  .section-padding    { padding-top: 48px; padding-bottom: 48px; }
  .section-padding-lg { padding-top: 64px; padding-bottom: 64px; }

  /* Why stat — 2 col */
  .why-stat-row { grid-template-columns: 1fr 1fr; }

  /* Status grid — 2 col */
  .status-grid { grid-template-columns: repeat(2, 1fr); }

  /* Ecosystem — stack */
  .ecosystem-row {
    flex-direction: column;
    gap:            40px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   20px;
  }

  .footer__links a { font-size: 13px; }
}


/* ─────────────────────────────────────────────────────────────
   TIER 4 — 768px – 991px  (tablet portrait)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 991px) {

  .navbar__links     { display: none; }
  .navbar__hamburger { display: flex; }

  /* Hero — side by side at 768 */
  .hero__row {
    flex-direction: row;
    align-items:    center;
    gap:            32px;
  }

  .hero__visual  { order: 0; flex: 1; }
  .hero__content { flex: 0 0 50%; max-width: 50%; }

  .section-padding    { padding-top: 56px; padding-bottom: 56px; }
  .section-padding-lg { padding-top: 72px; padding-bottom: 72px; }

  /* Status — 2 col */
  .status-grid { grid-template-columns: repeat(2, 1fr); }

  /* Why stat — 2 col */
  .why-stat-row { grid-template-columns: repeat(2, 1fr); }

  /* Ecosystem — stack */
  .ecosystem-row {
    flex-direction: column;
    gap:            48px;
  }

  /* Footer — 4 col with tighter spacing */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   24px;
  }
}


/* ─────────────────────────────────────────────────────────────
   TIER 5 — 992px – 1279px  (desktop)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 992px) {

  .navbar__links     { display: flex; }
  .navbar__hamburger { display: none; }
  .navbar__mobile-menu { display: none !important; }

  /* Hero — full two-col */
  .hero__row {
    flex-direction: row;
    align-items:    center;
    gap:            var(--space-xl);
  }

  .hero__visual  { order: 0; flex: 1; }
  .hero__content { flex: 0 0 48%; max-width: 48%; }

  /* Status — 2 col */
  .status-grid { grid-template-columns: repeat(2, 1fr); }

  /* Vision — 2 col */
  .vision-grid { grid-template-columns: repeat(2, 1fr); }

  /* Why stat — 4 col */
  .why-stat-row { grid-template-columns: repeat(4, 1fr); }

  /* Ecosystem — side by side */
  .ecosystem-row {
    flex-direction: row;
    align-items:    flex-start;
    gap:            var(--space-2xl);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   32px;
  }

  .footer__tagline { display: block; }
}


/* ─────────────────────────────────────────────────────────────
   TIER 6 — 1280px – 1399px
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1280px) and (max-width: 1399px) {

  .content-width { max-width: 1200px; }
}


/* ─────────────────────────────────────────────────────────────
   TIER 7 — ≥ 1400px  (wide)
   ───────────────────────────────────────────────────────────── */

@media (min-width: 1400px) {

  .content-width {
    max-width:     1320px;
    padding-left:  var(--space-lg);
    padding-right: var(--space-lg);
  }
}


/* ─────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────── */

@media print {

  .navbar,
  .cta-section,
  .footer,
  .theme-toggle,
  .navbar__hamburger { display: none !important; }

  body { background: #ffffff; color: #000000; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}