/* ════════════════════════════════════════════════════════════════
   ZUREON — PRODUCTION Responsive CSS (v8 definitive)
   Base .card now fixed in styles.css: align-items:flex-start,
   justify-content:flex-start, text-align:left
   Section paddings unified via --gap-section token
   This file: clean overrides only, no !important wars
   ════════════════════════════════════════════════════════════════ */

/* ─── Global overflow protection ─── */
html, body { overflow-x: hidden; max-width: 100vw; }
* { box-sizing: border-box; }
img, video, iframe, canvas, picture { max-width: 100%; }
#cinematicWebgl { max-width: 100vw !important; }

/* ─── Focus styles ─── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid #00D4FF;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Mobile menu ─── */
.mobile-menu-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: radial-gradient(ellipse at top, rgba(0,30,60,0.97), rgba(1,3,8,0.99));
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: all; }
.mobile-menu-nav {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px;
}
.mobile-menu-nav a {
  display: block; padding: 16px 48px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); text-transform: uppercase; text-decoration: none;
  border-radius: 14px; opacity: 0; transform: translateY(8px);
  animation: mmFadeIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
  transition: color 0.2s, background 0.2s;
}
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(1) { animation-delay: 0.06s; }
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(2) { animation-delay: 0.12s; }
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(3) { animation-delay: 0.18s; }
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(4) { animation-delay: 0.24s; }
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(5) { animation-delay: 0.30s; }
.mobile-menu-overlay.active .mobile-menu-nav a:nth-child(6) { animation-delay: 0.36s; }
.mobile-menu-nav a:hover { color: #00D4FF; background: rgba(0,212,255,0.06); }
@keyframes mmFadeIn { to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════════════════════
   TABLET — 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* HEADER */
  .header { height: 68px; }
  .header .container { padding: 0 24px; }
  .header .header-nav { display: none; }
  .header .header-right .btn-secondary,
  .header .header-right #founderDashBtn { display: none; }
  .header .mobile-menu-toggle { display: flex; }
  .header .header-right { gap: 12px; }
  .mobile-menu-overlay { display: flex; }

  /* TOKEN: section spacing */
  section { --gap-section: 72px; }

  /* SECTION HEADS */
  .section-head { text-align: center; margin-bottom: 40px; }
  .section-tag { font-size: 10.5px; padding: 6px 14px; letter-spacing: 0.18em; margin-bottom: 16px; }
  .section-title { font-size: 32px !important; line-height: 1.15; letter-spacing: -0.015em; }
  .section-subtitle { font-size: 16px; line-height: 1.6; max-width: 540px; margin: 14px auto 0; }

  /* HERO */
  .hero { padding-top: 96px; padding-bottom: 56px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 48px; text-align: center; max-width: 640px; margin: 0 auto; }
  .hero-left { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-left > * { max-width: 560px; }
  .hero-left > div:last-child { justify-content: center !important; flex-wrap: wrap; }
  .hero-title { font-size: clamp(64px, 9vw, 86px) !important; line-height: 0.94; letter-spacing: -0.02em; }
  .hero-subtitle { font-size: 18px; }
  .hero-body { font-size: 15px !important; line-height: 1.65; opacity: 0.85; margin-bottom: 24px !important; }
  .price-panel { display: inline-block !important; padding: 16px 22px !important; border-radius: 18px; margin: 4px auto 24px; }
  .hero-price { font-size: 20px !important; }
  .hero-right { justify-content: center; }
  .hero-phone { height: min(54vh, 480px); }
  .cinematic-device-stage { min-height: 440px; }
  .phone-glow { width: 360px; height: 360px; }

  /* FOUNDER PANEL */
  .founder-panel { padding: 40px 32px !important; border-radius: 24px; background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(0,212,255,0.01)) !important; border: 1px solid rgba(0,212,255,0.12) !important; }
  .typo-block { display: flex !important; flex-direction: row !important; gap: 0 !important; align-items: center; justify-content: center; }
  .typo-item { flex: 1; text-align: center; padding: 0 16px; position: relative; }
  .typo-item:first-child::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 60%; transform: translateY(-50%); background: linear-gradient(to bottom, transparent, rgba(0,212,255,0.25), transparent); }
  .typo-value { font-size: clamp(38px, 6vw, 52px) !important; line-height: 1 !important; margin: 0 0 10px !important; letter-spacing: -0.02em !important; font-weight: 500 !important; }
  .typo-label { font-size: 12px !important; max-width: 180px; margin: 0 auto !important; color: rgba(255,255,255,0.55) !important; line-height: 1.45 !important; }

  /* UNIFIED CARD SYSTEM — 2 col tablet */
  .grid-features, .demo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .span-2, .span-3 { grid-column: span 1 !important; }
  .row-span-2 { grid-row: span 1 !important; }
  .card, .demo-card {
    padding: 28px 24px !important;
    border-radius: 18px !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .card .icon-box, .demo-card .icon-box {
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important; margin: 0 0 18px !important;
  }
  .card .icon-box svg, .demo-card .icon-box svg { width: 28px !important; height: 28px !important; }
  .card-title, .demo-card strong { font-size: 17px !important; line-height: 1.3 !important; margin: 0 0 8px !important; font-weight: 600 !important; display: block !important; }
  .card-text, .demo-card p { font-size: 14px !important; line-height: 1.6 !important; color: rgba(255,255,255,0.6) !important; margin: 0 !important; }

  /* Master Web3 card — prevent overflow */
  .hub-content div[style*="min-width"] { min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; }

  /* ROADMAP */
  .roadmap-grid {
    gap: 14px; padding: 40px 16px 56px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .roadmap-grid::-webkit-scrollbar { display: none; }
  .horizontal-rt-item { min-width: 160px; scroll-snap-align: center; }
  .rt-card { padding: 18px 14px; border-radius: 16px; text-align: left; }
  .rt-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
  .rt-date { font-size: 11.5px; margin: 5px 0 10px; color: #00D4FF; opacity: 0.9; letter-spacing: 0.04em; }
  .rt-desc { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.6); }
  .horizontal-rt-item.current .rt-card { border-color: rgba(0,212,255,0.35); background: linear-gradient(135deg, rgba(0,212,255,0.07), rgba(0,212,255,0.02)); }
  .horizontal-rt-item.current .dot-center { box-shadow: 0 0 12px rgba(0,212,255,0.6); }

  /* HUB SHOWCASE */
  .hub-layout { grid-template-columns: 1fr !important; gap: 48px; max-width: 640px; margin: 0 auto; }
  .hub-copy { text-align: center; }
  .hub-pill-row { justify-content: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
  .hub-pill-row span { font-size: 11px; padding: 6px 13px; }
  .hub-device { order: 1; display: flex; justify-content: center; margin-top: 24px; }
  .hub-demo-device-wrapper { width: 360px !important; max-width: 100% !important; }
  .hub-flow-card { padding: 18px 20px !important; border-radius: 16px; text-align: left; }
  .hub-flow-card strong { font-size: 15px !important; font-weight: 600; }
  .hub-flow-card p { font-size: 13.5px !important; line-height: 1.55; opacity: 0.65; margin-top: 4px; }

  /* SPECS GRIDS */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important;
  }

  /* CONTACT */
  #contact .card { text-align: center !important; align-items: center !important; padding: 40px 32px !important; border-radius: 24px; max-width: 560px; margin: 0 auto; }
  .founder-input { padding: 13px 16px !important; font-size: 14px; border-radius: 12px; }
  .custom-select-trigger { padding: 13px 16px !important; font-size: 14px; border-radius: 12px; }
  .custom-select-option { padding: 12px 16px; font-size: 14px; }

  /* FOOTER */
  footer .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE — 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .container { padding: 0 20px !important; }
  section { --gap-section: 56px; }

  .header { height: 60px; }
  .header .container { padding: 0 18px; }
  .header-logo { font-size: 16.5px; }
  .header-right .btn-primary { padding: 10px 16px !important; font-size: 11.5px !important; min-height: 44px !important; }

  .hero { padding-top: 80px !important; padding-bottom: 44px !important; }
  .hero-grid { gap: 36px; max-width: 480px; }
  .hero-title { font-size: clamp(48px, 12vw, 68px) !important; }
  .hero-subtitle { font-size: 16px; }
  .hero-body { font-size: 14px !important; margin-bottom: 20px !important; }
  .price-panel { padding: 14px 18px !important; }
  .hero-price { font-size: 18px !important; }
  .hero-phone { height: min(48vh, 400px); }
  .phone-glow { width: 280px; height: 280px; }
  .hero-left > div:last-child { flex-direction: column !important; align-items: stretch !important; gap: 10px; max-width: 300px; margin: 0 auto; }
  .hero-left .btn { width: 100% !important; justify-content: center; padding: 13px 24px !important; font-size: 13.5px !important; }

  .section-title { font-size: 26px !important; }
  .section-subtitle { font-size: 15px; }
  .section-tag { font-size: 10px; padding: 5px 12px; }

  .founder-panel { padding: 32px 22px !important; border-radius: 20px; }
  .typo-item { padding: 0 10px; }
  .typo-value { font-size: clamp(30px, 9vw, 44px) !important; margin-bottom: 8px !important; }
  .typo-label { font-size: 11px !important; max-width: 140px; }

  .grid-features, .demo-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .card, .demo-card {
    padding: 28px 24px !important;
    border-radius: 16px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .card .icon-box, .demo-card .icon-box {
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    margin: 0 auto 18px !important;
    align-self: center !important;
  }
  .card .icon-box svg, .demo-card .icon-box svg { width: 28px !important; height: 28px !important; }
  .card-title, .demo-card strong { font-size: 16px !important; margin: 0 0 8px !important; text-align: center !important; width: 100% !important; }
  .card-text, .demo-card p { font-size: 13.5px !important; text-align: center !important; width: 100% !important; }

  .roadmap-grid { gap: 12px; padding: 32px 14px 44px; }
  .horizontal-rt-item { min-width: 146px; }
  .dot-center { width: 14px !important; height: 14px !important; }
  .horizontal-rt-item.current .dot-center { width: 20px !important; height: 20px !important; }
  .rt-card { padding: 15px 13px; border-radius: 14px; }
  .rt-name { font-size: 13px; }
  .rt-date { font-size: 11px; margin: 4px 0 8px; }
  .rt-desc { font-size: 11.5px; }

  .hub-flow-card { padding: 16px 18px !important; border-radius: 14px; }
  .hub-flow-card strong { font-size: 14.5px !important; }
  .hub-flow-card p { font-size: 13px !important; }
  .hub-pill-row span { font-size: 10.5px; padding: 6px 11px; }
  .hub-demo-device-wrapper {
    width: 360px !important; max-width: 100% !important;
    transform: scale(0.84) !important;
    transform-origin: top center !important;
    margin: 0 auto -48px !important;
  }

  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  #contact .card { padding: 32px 24px !important; border-radius: 20px; }
  .founder-input { padding: 12px 14px !important; font-size: 13.5px; }
  .custom-select-trigger { padding: 12px 14px !important; font-size: 13.5px; }
  .referral-notice { font-size: 11px; }

  footer .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════
   PHONE — 480px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .container { padding: 0 18px !important; }
  section { --gap-section: 48px; }

  .header { height: 56px; }
  .header .container { padding: 0 16px; }
  .header-logo { font-size: 15.5px; }
  .header-right .btn-primary { padding: 8.5px 13px !important; font-size: 10.5px !important; min-height: 44px !important; }

  .hero { padding-top: 72px !important; padding-bottom: 32px !important; }
  .hero-grid { gap: 28px; }
  .hero-title { font-size: clamp(42px, 13vw, 56px) !important; }
  .hero-subtitle { font-size: 14.5px; }
  .hero-body { font-size: 13.5px !important; margin-bottom: 18px !important; }
  .price-panel { padding: 12px 16px !important; }
  .hero-price { font-size: 16px !important; }
  .hero-phone { height: min(40vh, 320px); }
  .phone-glow { width: 240px; height: 240px; }

  .section-title { font-size: 22px !important; }
  .section-subtitle { font-size: 14px; }
  .section-tag { font-size: 9.5px; padding: 5px 11px; }

  .founder-panel { padding: 28px 18px !important; border-radius: 18px; }
  .typo-item { padding: 0 8px; }
  .typo-value { font-size: clamp(24px, 9vw, 34px) !important; margin-bottom: 7px !important; }
  .typo-label { font-size: 10px !important; max-width: 110px; }

  .card, .demo-card {
    padding: 24px 20px !important;
    border-radius: 14px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .card .icon-box, .demo-card .icon-box {
    width: 44px !important; height: 44px !important;
    border-radius: 11px !important;
    margin: 0 auto 16px !important;
    align-self: center !important;
  }
  .card .icon-box svg, .demo-card .icon-box svg { width: 26px !important; height: 26px !important; }
  .card-title, .demo-card strong { font-size: 15px !important; margin: 0 0 6px !important; text-align: center !important; width: 100% !important; }
  .card-text, .demo-card p { font-size: 13px !important; text-align: center !important; width: 100% !important; }

  .roadmap-grid { padding: 28px 14px 36px; gap: 10px; }
  .horizontal-rt-item { min-width: 132px; }
  .dot-center { width: 12px !important; height: 12px !important; }
  .horizontal-rt-item.current .dot-center { width: 18px !important; height: 18px !important; }
  .rt-card { padding: 13px 11px; border-radius: 12px; }
  .rt-name { font-size: 12.5px; }
  .rt-date { font-size: 10.5px; margin: 3px 0 6px; }
  .rt-desc { font-size: 11px; }

  .hub-flow-card { padding: 14px 16px !important; border-radius: 12px; }
  .hub-flow-card strong { font-size: 13.5px !important; }
  .hub-flow-card p { font-size: 12px !important; }
  .hub-pill-row span { font-size: 10px; padding: 5px 10px; }
  .hub-demo-device-wrapper {
    width: 360px !important; max-width: 100% !important;
    transform: scale(0.70) !important;
    transform-origin: top center !important;
    margin: 0 auto -80px !important;
  }

  div[style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; gap: 8px !important; }

  #contact .card { padding: 28px 20px !important; border-radius: 18px; }
  .founder-input { padding: 11px 13px !important; font-size: 13px; }
  .custom-select-trigger { padding: 11px 13px !important; font-size: 13px; }
  .btn-primary[type="submit"] { width: 100% !important; padding: 14px !important; font-size: 13.5px !important; border-radius: 12px; }
  .mobile-menu-nav a { padding: 12px 32px; font-size: 18px; }
}


/* ═══════════════════════════════════════════════════════════════
   EXTRA-SMALL — 375px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .container { padding: 0 16px !important; }
  section { --gap-section: 40px; }
  .header-logo { font-size: 14.5px; }
  .header-right .btn-primary { padding: 7.5px 11px !important; font-size: 10px !important; min-height: 44px !important; }
  .hero-title { font-size: clamp(36px, 13vw, 48px) !important; }
  .hero-subtitle { font-size: 13.5px; }
  .hero-body { font-size: 13px !important; }
  .section-title { font-size: 19px !important; }
  .section-subtitle { font-size: 13px; }
  .founder-panel { padding: 24px 14px !important; }
  .typo-item { padding: 0 5px; }
  .typo-value { font-size: clamp(20px, 9vw, 28px) !important; }
  .typo-label { font-size: 9px !important; max-width: 95px; }
  .card, .demo-card { padding: 20px 16px !important; text-align: center !important; align-items: center !important; }
  .card .icon-box, .demo-card .icon-box { margin: 0 auto 14px !important; }
  .card-title, .demo-card strong { font-size: 14px !important; text-align: center !important; }
  .card-text, .demo-card p { font-size: 12.5px !important; text-align: center !important; }
  .hub-demo-device-wrapper { transform: scale(0.62) !important; transform-origin: top center !important; margin: 0 auto -110px !important; }
  .horizontal-rt-item { min-width: 138px; }
  .rt-name { font-size: 11.5px; }
  .rt-desc { font-size: 10.5px; }
}

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


/* ════════════════════════════════════════════════════════════════
   RELEASE HOTFIXES — from user screenshots
   ════════════════════════════════════════════════════════════════ */

/* ── FIX 1: "Master Web3 as you use it" h3 overflow on mobile ── */
@media (max-width: 768px) {
  .learn-panel h3[data-i18n="learn_card_title"] {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  /* Also fix the learn-panel card container overflow */
  .learn-panel .card {
    padding: 24px 20px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .learn-panel > .container > div {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .learn-panel > .container > div > div {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .learn-panel h3[data-i18n="learn_card_title"] {
    font-size: clamp(18px, 6vw, 22px) !important;
  }
}

/* ── FIX 2: Roadmap dots — prevent slipping above line ── */
@media (max-width: 1024px) {
  .roadmap-wrapper {
    position: relative;
    padding: 0;
  }
  .roadmap-line {
    top: 56px !important;
  }
  .roadmap-grid {
    padding-top: 44px !important;
  }
  .dot-wrapper {
    height: 28px !important;
    margin-bottom: 18px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  .roadmap-line { top: 50px !important; }
  .roadmap-grid { padding-top: 38px !important; }
  .dot-wrapper { height: 24px !important; margin-bottom: 14px !important; }
}

@media (max-width: 480px) {
  .roadmap-line { top: 46px !important; }
  .roadmap-grid { padding-top: 34px !important; }
  .dot-wrapper { height: 22px !important; margin-bottom: 12px !important; }
}

/* ── FIX 3: Spec-card icon-box scale for mobile ── */
@media (max-width: 768px) {
  .spec-card { padding: 18px 16px !important; gap: 14px !important; border-radius: 14px !important; }
  .spec-card .icon-box {
    width: 40px !important; height: 40px !important;
    border-radius: 10px !important;
  }
  .spec-card .icon-box svg { width: 20px !important; height: 20px !important; }
  .spec-title { font-size: 14px !important; margin-bottom: 3px !important; }
  .spec-text { font-size: 12.5px !important; }
}

@media (max-width: 480px) {
  .spec-card { padding: 14px 14px !important; gap: 12px !important; border-radius: 12px !important; }
  .spec-card .icon-box {
    width: 36px !important; height: 36px !important;
    border-radius: 9px !important;
  }
  .spec-card .icon-box svg { width: 18px !important; height: 18px !important; }
}

/* ── FIX 4: AI section title — center on mobile ── */
@media (max-width: 1024px) {
  .ai-section-head {
    text-align: center !important;
  }
  .ai-section-head .section-title,
  .ai-section-head .section-subtitle {
    text-align: center !important;
  }
  /* AI section layout stack */
  #ai > .container > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }
  #ai > .container > div > div[style*="flex: 1 1 50%"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* ── All section heads centered on mobile (universal rule) ── */
@media (max-width: 768px) {
  .section-head { text-align: center !important; }
  .section-head .section-title,
  .section-head .section-subtitle,
  .section-head .section-tag { text-align: center !important; }
}

/* ── Hub-flow cards — prevent overflow on mobile ── */
@media (max-width: 768px) {
  .hub-copy { width: 100%; max-width: 100%; }
  .hub-flow { width: 100%; }
  .hub-flow-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
}


/* ═══════════════════════════════════════════════════════════════
   FINAL FIXES — 5 user issues
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Hub demo button — pull up to phone ── */
/* Device: width=360, aspect=393/852, native height≈780px
   margin = -(height × (1 - scale)) + 16px breathing room  */
@media (max-width: 768px) {
  .hub-demo-device-wrapper {
    transform: scale(0.84) !important;
    transform-origin: top center !important;
    margin: 0 auto -108px !important; /* 780×(1-0.84)=125px, leave 17px gap */
  }
  .hub-demo-link {
    display: block !important;
    text-align: center !important;
    margin-top: 16px !important;
  }
}
@media (max-width: 480px) {
  .hub-demo-device-wrapper {
    transform: scale(0.70) !important;
    transform-origin: top center !important;
    margin: 0 auto -218px !important; /* 780×(1-0.70)=234px, leave 16px gap */
  }
}
@media (max-width: 375px) {
  .hub-demo-device-wrapper {
    transform: scale(0.62) !important;
    transform-origin: top center !important;
    margin: 0 auto -280px !important; /* 780×(1-0.62)=296px, leave 16px gap */
  }
}

/* ── FIX 2: Roadmap dots — perfectly on line ──
   Formula: line.top = grid.padding-top + dot-wrapper.height/2
   768px: 32 (grid pt from main block) + 24/2 = 44px
   480px: 28 (grid pt from main block) + 22/2 = 39px          */
@media (max-width: 768px) {
  .roadmap-line { top: 44px !important; height: 7px !important; }
  .roadmap-grid { padding-top: 32px !important; }
  .dot-wrapper {
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
  }
}
@media (max-width: 480px) {
  .roadmap-line { top: 39px !important; }
  .roadmap-grid { padding-top: 28px !important; }
  .dot-wrapper { height: 22px !important; margin-bottom: 14px !important; }
}

/* ── FIX 3: Comparison cards — center content on mobile ── */
@media (max-width: 768px) {
  .comp-col {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  .comp-title { text-align: center !important; }
  .comp-list { align-items: center !important; }
  .comp-item {
    justify-content: center !important;
    text-align: left !important;
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ── FIX 4: Footer clean mobile layout ── */
@media (max-width: 768px) {
  footer { padding: 40px 0 !important; }
  footer .container > div {
    gap: 24px !important;
  }
  footer .container > div > div:last-child {
    font-size: 12px !important;
  }
}

/* ── FIX 5: Burger menu — already in styles.css ── */


/* ══════════════════════════════════════════════════════
   TARGETED FIXES — card height + hub-flow overflow
   ══════════════════════════════════════════════════════ */

/* FIX 1: Cards too tall on mobile — remove auto-rows stretch */
@media (max-width: 768px) {
  .grid-features,
  .demo-grid {
    grid-auto-rows: auto !important;  /* override 1fr from tablet block */
  }
  /* Cards size to content only, no min-height */
  .card,
  .demo-card {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* FIX 2: Hub-flow cards — prevent overflow via proper flex containment */
@media (max-width: 768px) {
  .hub-flow {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .hub-flow-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;        /* key: allow flex children to shrink */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .hub-flow-body {
    min-width: 0 !important;        /* key: allows text to wrap, not expand */
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }
  .hub-flow-body strong,
  .hub-flow-body p {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Ensure container doesn't bleed */
  .hub-layout {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hub-copy {
    overflow: hidden !important;
    width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TARGETED FIXES — 7 issues from screenshots
   ═══════════════════════════════════════════════════════════════ */

/* ── 1,6: #web3 portal cards — equal heights, inline grid fix ── */
@media (max-width: 1024px) {
  /* Target inline grid in #web3 */
  #web3 .container > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    max-width: 100% !important;
  }
  /* Cards stretch to match row partner */
  #web3 .card {
    align-self: stretch !important;
    text-align: center !important;
    align-items: center !important;
    padding: 28px 20px !important;
    width: 100% !important;
  }
  #web3 .card div[style*="border-radius: 50%"] {
    margin: 0 auto 20px !important;
  }
  #web3 .card h4 { text-align: center !important; font-size: 15px !important; }
  #web3 .card p  { text-align: center !important; font-size: 13px !important; }
}

/* ── 3,7: AI section cards — equal width (align-self: stretch) ── */
@media (max-width: 1024px) {
  /* The flex column container */
  #ai div[style*="flex-direction: column"] {
    width: 100% !important;
  }
  /* Every AI card — full width */
  #ai .card {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  /* Override text centering for these horizontal cards — keep left */
  #ai .card[style*="flex-direction: row"] {
    text-align: left !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  /* Compact AI card on tablet */
  #ai .card { padding: 16px 20px !important; }
}

@media (max-width: 768px) {
  /* AI section: stack phone and text vertically */
  #ai .container > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 28px !important;
  }
  #ai .container > div > div[style*="flex: 1 1 45%"],
  #ai .container > div > div[style*="flex: 1 1 50%"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Phone image compact on mobile */
  #ai div[style*="flex: 1 1 45%"] img { width: 80% !important; max-width: 280px !important; }
  /* AI card text compact */
  #ai .card .card-text,
  #ai .card p[style*="font-size"] { font-size: 13.5px !important; }
}

/* ── 2: Hub-flow cards overflow — robust fix ── */
@media (max-width: 768px) {
  /* Cascade of overflow containment */
  #zureon-hub { overflow: hidden !important; }
  #zureon-hub .container { overflow: hidden !important; }
  .hub-showcase { overflow: hidden !important; }
  .hub-layout { overflow: hidden !important; }
  .hub-copy { overflow: hidden !important; }
  .hub-flow { overflow: hidden !important; }
}

/* ── 4: Founder Dashboard pill — smaller on mobile ── */
@media (max-width: 600px) {
  .dash-nav-pill {
    font-size: 10px !important;
    padding: 5px 9px !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
  }
}

/* ── 5: Last lone card in 2-col grid — span full width (tablet) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* If last card is the only one in its row (odd position in 2-col) */
  .grid-features .card:last-child:nth-child(odd),
  .grid-features .demo-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PRECISE FIXES — hub overflow + grid-mix last card
   ══════════════════════════════════════════════════════════════ */

/* ── Hub-flow cards — padding on hub-flow directly ── */
@media (max-width: 768px) {
  .hub-layout {
    overflow: hidden !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .hub-copy,
  .hub-flow {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .hub-flow-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* ── FIX 2: grid-mix last lone card → full width (tablet) ── */
@media (max-width: 1024px) {
  /* grid-mix: cover last-child that's alone in its row (odd position) */
  .grid-mix .card:last-child:nth-child(odd),
  .grid-mix .card:last-child:nth-child(3n+1),
  /* inline-style grids too */
  div[style*="grid-template-columns: repeat"] .card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   DEFINITIVE HUB-FLOW MARGIN FIX
   Root: <div class="container hub-layout"> is ONE element.
   Previous rules on .hub-layout / .hub-showcase .container
   all competed. Single authoritative rule wins.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Reset hub container horizontal padding — hub-copy handles it */
  .hub-showcase .container.hub-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. hub-copy carries the 20px side margins for ALL inner content */
  .hub-copy {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* 3. flow and cards fill hub-copy content area (375 - 40 = 335px) */
  .hub-flow {
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .hub-flow-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .hub-flow-body {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
}