/* =========================================================
   GAIA · Responsive overrides (shared across all site pages)
   Applied ON TOP of each page's existing CSS.
   Breakpoints: 1024 (tablet) · 768 (phone landscape) · 480 (phone)
   ========================================================= */

/* Small nice-to-haves that apply everywhere */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
a,button{-webkit-tap-highlight-color:transparent}

/* --------- Global fluid padding variable --------- */
:root{
  --pad-x: clamp(20px, 5vw, 48px);
}

/* ============ TABLET & BELOW ( ≤ 1024px ) ============ */
@media (max-width: 1024px){

  /* NAV — index.html (topbar) */
  .topbar-strip{padding:0 var(--pad-x) !important;height:60px}
  .tb-brand .tagline{display:none !important}
  .tb-brand{padding-right:0;margin-right:0;border-right:0}

  /* fold the main links into a slide-down panel */
  .tb-links{
    position:fixed;top:60px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--ink-2);border-bottom:1px solid var(--line);
    height:auto;max-height:0;overflow:hidden;transition:max-height .3s ease;
    z-index:55;gap:0;flex:none;
  }
  .topbar.nav-open .tb-links{max-height:520px}
  .tb-item{
    width:100%;height:auto;padding:16px 24px !important;
    justify-content:flex-start;border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .tb-item .chev{display:none}
  .tb-actions{margin-left:auto;padding-left:0;border-left:0;gap:14px}

  /* hamburger toggle (injected by JS) */
  .tb-burger{
    display:inline-flex;flex-direction:column;justify-content:center;
    gap:5px;width:36px;height:36px;padding:8px;margin-left:12px;
    background:transparent;border:1px solid var(--line-2);cursor:pointer;
  }
  .tb-burger span{display:block;width:100%;height:1.5px;background:#fff;transition:transform .25s,opacity .2s}
  .topbar.nav-open .tb-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .topbar.nav-open .tb-burger span:nth-child(2){opacity:0}
  .topbar.nav-open .tb-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* nav — about/contact/products (nav.top .links pattern) */
  nav.top{padding:14px var(--pad-x) !important}
  nav.top .links{display:none}

  /* Mega menus fill screen on tablet */
  .mega-inner{grid-template-columns:1fr !important;gap:24px;padding:24px var(--pad-x) !important}
  .mega-grid{grid-template-columns:1fr !important}

  /* HERO (index) */
  section.hero{grid-template-columns:1fr !important;padding:96px var(--pad-x) 60px !important;min-height:auto;gap:32px}
  .hero-G{position:relative !important;right:auto !important;top:auto !important;bottom:auto !important;width:100% !important;height:46vh;order:2}
  .hero-G .glyph{font-size:min(42vh,440px) !important}
  .hero-l{order:1;max-width:100%}
  .hero-l .meta{grid-template-columns:repeat(3,1fr);gap:20px}
  .hero-hint{display:none}

  /* CLIENTS row */
  .clients-row{grid-template-columns:repeat(4,1fr) !important}
  section.clients{padding:56px var(--pad-x) 40px !important}

  /* Generic section block */
  section.blk{padding:80px var(--pad-x) !important}
  .sec-head{grid-template-columns:1fr !important;gap:12px;margin-bottom:48px}
  .sec-head .num{font-size:44px}
  .sec-head .en{text-align:left !important;max-width:none !important}

  /* PAIN */
  .pain-2col{grid-template-columns:1fr !important}
  .pain-col{padding:48px var(--pad-x) !important}
  .pain-col.wrong{border-right:0 !important;border-bottom:1px solid var(--line)}
  .pain-cards{grid-template-columns:1fr !important}

  /* OS / Ontology (index "os" section — inline grid) */
  section.os .reveal[style*="grid-template-columns:1.1fr 1fr"]{
    grid-template-columns:1fr !important;gap:32px !important;
  }
  section.os .reveal[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:1fr !important;
  }

  /* DIFF table — collapse to stacked cards */
  .diff-table{grid-template-columns:1fr !important;font-size:14px}
  .diff-table .row{display:block !important;border-bottom:1px solid var(--line)}
  .diff-table .row:last-child{border-bottom:0}
  .diff-table .row.head{display:none !important}
  .diff-table .cell{border-right:0 !important;border-bottom:1px solid var(--line-2) !important;padding:14px var(--pad-x) !important}
  .diff-table .row .cell:last-child{border-bottom:0 !important}
  .diff-table .label-cell{background:var(--ink-2);color:var(--violet-300) !important}
  .diff-table .theirs::before{content:"多数 AI 工具 · ";color:var(--fog);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;margin-right:6px}
  .diff-table .ours::before{content:"GAIA · ";color:var(--violet-300);font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;margin-right:6px}
  .diff-anchors{grid-template-columns:1fr !important}

  /* PROCESS */
  .ps-grid{grid-template-columns:1fr !important;gap:40px}
  .ps-line{display:none}
  .ps-step .dot{margin-bottom:16px}

  /* SYSTEMS tabs */
  .sys-tabs{grid-template-columns:1fr !important}
  .sys-tab{border-right:0 !important;border-bottom:1px solid var(--line)}
  .sys-panels{padding:40px var(--pad-x) !important}
  .sys-panel{grid-template-columns:1fr !important;gap:28px !important}
  .sys-panel .caps{grid-template-columns:1fr !important}
  .sys-panel .big-stat .big{font-size:64px !important}

  /* GAIA X */
  .gx-grid{grid-template-columns:1fr !important;gap:32px !important}
  .gx-r{grid-template-columns:1fr !important}

  /* SCOREBOARD */
  .sc-grid{grid-template-columns:1fr !important}

  /* CTA */
  section.cta{padding:100px var(--pad-x) 120px !important}
  .cta-inner{grid-template-columns:1fr !important;gap:40px !important}
  .cta-bg-G{font-size:min(70vh,600px) !important;right:-20% !important;bottom:-30% !important}

  /* FOOTER */
  footer{padding:56px var(--pad-x) 32px !important}
  .ft-inner{grid-template-columns:1fr 1fr !important;gap:32px !important}
  .ft-bot{max-width:100% !important;flex-direction:column;gap:12px;text-align:center;padding:24px var(--pad-x) 0 !important}

  /* products.html hero */
  .hero{padding:120px var(--pad-x) 60px !important}
  .arch{padding:0 var(--pad-x) !important;margin-bottom:60px}
  .arch-stack{padding:24px !important}
  .band,.found-inner{padding:0 !important;max-width:100% !important}
  .found-band{padding:80px var(--pad-x) !important}
  .found-wrap{grid-template-columns:1fr !important;padding:32px !important;gap:32px !important}
  .band-head,.found-head{grid-template-columns:1fr !important;gap:12px}
  .band-head .num,.found-head .num{font-size:48px}
  .band-head .en,.found-head .en{text-align:left !important;max-width:none !important}
  .band{padding:80px var(--pad-x) !important}

  /* about.html */
  .hero{grid-template-columns:1fr !important;gap:32px !important}
  section.blk{padding:80px var(--pad-x) !important}

  /* contact.html */
  .stage{grid-template-columns:1fr !important;gap:40px !important;padding:110px var(--pad-x) 60px !important;min-height:auto !important}
  .stage::after{font-size:min(70vw,500px) !important;right:-15% !important;bottom:-10% !important}
}

/* ============ PHONE ( ≤ 768px ) ============ */
@media (max-width: 768px){
  /* tighten headers a notch */
  .hero-l h1,
  .cta-l h2{font-size:clamp(42px, 10vw, 64px) !important;line-height:1.05 !important}
  .hero-l .english{font-size:20px !important}
  .hero-l .sub{font-size:16px !important}

  /* CLIENTS — 2 per row */
  .clients-row{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}

  /* HERO meta — stack 2x2 */
  .hero-l .meta{grid-template-columns:repeat(2,1fr) !important;gap:16px !important;padding-top:20px;margin-top:24px}
  .hero-l .cta-row{flex-direction:column;align-items:stretch}
  .hero-l .cta-row .btn{justify-content:center;width:100%}

  /* SEC HEAD */
  .sec-head h2{font-size:clamp(30px, 7vw, 44px) !important;line-height:1.15 !important}
  .gx-l h3{font-size:clamp(36px, 8vw, 52px) !important}
  .gx-l .lede{font-size:20px !important}

  /* pain col text */
  .pain-col h3{font-size:22px !important}
  .pain-col li{font-size:16px !important}

  /* stat bigs */
  .sys-panel .big-stat .big{font-size:48px !important}
  .sc-m .big{font-size:44px !important}
  .sys-panel .big-stat{padding:24px !important}

  /* FOOTER — stack */
  .ft-inner{grid-template-columns:1fr !important;gap:32px !important;padding-bottom:32px !important}

  /* contact cards — reduce padding */
  .cards{gap:10px !important}

  /* products capsule stat desc */
  .pcap.stat{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  .pcap.stat .desc{text-align:left !important;max-width:none !important}

  /* about hero */
  .hero h1{font-size:clamp(44px,10vw,72px) !important}

  /* contact h1 */
  h1{font-size:clamp(48px, 11vw, 80px) !important}
  .lede{font-size:20px !important}

  /* section.cta lede */
  .cta-l .lede{font-size:20px !important}

  /* buttons — full width */
  .tail .btn{padding:14px 22px !important;font-size:14px !important}

  /* nav cta — shrink "联系我们" to icon if very tight */
  .tb-cta{font-size:13px}
  .tb-lang{font-size:10px}
}

/* ============ SMALL PHONE ( ≤ 480px ) ============ */
@media (max-width: 480px){
  :root{--pad-x: 18px}

  .topbar-strip{height:56px}
  .mega{top:56px}
  .tb-links{top:56px}

  .hero-G .glyph{font-size:min(36vh,320px) !important}
  .hero-kicker{font-size:10px !important;padding:6px 12px !important}

  /* hide lang toggle to save room */
  .tb-lang{display:none !important}

  /* CLIENTS single column */
  .clients-row{grid-template-columns:1fr 1fr !important}
  .client-slot{aspect-ratio:3/1 !important;font-size:13px !important}

  /* tighter section titles */
  section.blk{padding:64px var(--pad-x) !important}
  .sec-head{margin-bottom:36px !important}
  .sec-head .num{font-size:36px !important}
  .sec-head .kicker{font-size:10px !important;letter-spacing:.22em !important}

  /* PS-steps no top margin on dot */
  .ps-step .dot{display:none}

  /* SYS brand smaller */
  .sys-tab{padding:20px 22px !important}
  .sys-tab .brand{font-size:22px !important}

  /* score big */
  .sc-m .big{font-size:36px !important}
  .sc-m{padding:18px 20px !important}
  .sc-hd{padding:16px 20px !important}

  /* cta steps */
  .cta-step{grid-template-columns:1fr !important;gap:6px !important;padding:18px 22px !important}

  /* pain cards padding */
  .pc{padding:24px 22px !important}
  .pc h4{font-size:18px !important}
  .pc .big-line{font-size:15px !important}
}

/* Prevent accidental H1 overflow on ALL screens */
h1,h2,h3{overflow-wrap:break-word;word-break:normal}