/* Responsive layer for the Liquidbots marketing page.
   Desktop rendering is untouched; every rule sits behind a max-width query.
   Structural overrides key off the inline grid declarations React serialises. */

/* ---------- Tablet / small laptop ---------- */
@media (max-width:1080px){
  :root{--page-gutter:32px;--fs-display-l:52px;--fs-display-xl:64px;--fs-h1:34px;}
  #root .lb-split-430,
  #root .lb-split-320,
  #root .lb-split-340,
  #root .lb-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #root .lb-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ---------- Phone ---------- */
@media (max-width:720px){
  :root{
    --page-gutter:20px;
    --fs-display-xl:44px;--fs-display-l:38px;--fs-display-m:32px;
    --fs-h1:28px;--fs-h2:24px;--fs-h3:20px;
    --space-12:44px;--space-10:32px;--space-9:24px;
  }
  html{-webkit-text-size-adjust:100%;}
  #root .lb-split-430,
  #root .lb-split-320,
  #root .lb-split-340,
  #root .lb-split-240,
  #root .lb-cols-4,
  #root .lb-cols-3,
  #root .lb-cols-auto,
  #root .lb-cols-2{grid-template-columns:minmax(0,1fr)!important;}
  /* section rhythm */
  #root section{padding-top:56px!important;padding-bottom:56px!important;}
  #root section.lb-section-80{padding-top:40px!important;padding-bottom:56px!important;}
  /* hero: art below copy, never wider than the screen */
  #root section:first-of-type>div:last-child{max-width:100%;overflow:hidden;}
  /* stacked CTAs, full-width, 48px touch targets */
  #root a[href="#docs"],#root button{min-height:48px;}
  #root div.lb-cta-row{flex-direction:column;align-items:stretch;}
  #root div.lb-cta-row>*{width:100%;justify-content:center;}
  /* horizontal diagrams must never force the page wide */
  #root svg{max-width:100%;}
  #root section>div{min-width:0;}
}

/* ---------- Global responsive hygiene ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* overflow-x:clip, NOT hidden. `hidden` turns html/body into a scrollport, which
   makes the sticky header's containing block the body and stops it sticking.
   `clip` prevents sideways scroll without creating a scroll container. */
html,body{max-width:100%;overflow-x:clip;}
/* iOS Safari renders SVG at intrinsic size unless the box is constrained */
#root svg,#root img{max-width:100%;}
#root section,#root footer{scroll-margin-top:calc(var(--nav-height) + 12px);}
@media (max-width:900px){
  a,button{-webkit-tap-highlight-color:rgba(31,228,204,.18);}
  #root footer a{display:inline-flex;align-items:center;min-height:36px;}
}

/* ---------- Hero: stacks below the side-by-side band ----------
   The hero grid is `minmax(max-content,1fr) minmax(0,1.1fr)`, so it is NOT
   caught by the generic minmax(430px) collapse above — it needs its own rule,
   at 1080px rather than 900px. Below that the ring stage and its orbit chips
   have no room to sit beside the headline without the chips colliding. */
@media (max-width:1080px){
  #root [data-hero],
  #root section.lb-hero-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* ---------- Hero ring stage: square, centred, sized to the phone ----------
   HeroStage sizes itself in JS (k = column width / 700) and its own floor keeps
   the ring square from collapsing on desktop. On a stacked phone layout that
   floor is too high — the square stays wider than the viewport and the orbit
   chips, which are polar-positioned inside it, get pushed half off-screen.
   Pinning both the wrapper and the chip layer to the same square here makes the
   geometry viewport-relative and keeps every ring circular (the ring divs are
   percentages of this box, so it has to stay square). */
@media (max-width:1080px){
  #root [data-hero]>div:last-child{
    width:min(88vw,420px)!important;height:min(88vw,420px)!important;
    /* the generic hero rule above clamps this column with max-width:100% and
       overflow:hidden — both have to go here, or width alone gets clamped (the
       square turns elliptical and the rings with it) and the chips that sit
       just outside the square get cut off. The few px of spill land in the
       section gutter, not off-screen. */
    max-width:none!important;overflow:visible!important;
    margin-left:auto!important;margin-right:auto!important;}
  #root [data-hero]>div:last-child>div.lb-centered{
    width:100%!important;height:100%!important;}
}

/* ---------- Hero on phones: centred copy, hues moved over the ring graphic ---------- */
@media (max-width:1080px){
  /* The 6.4vw cap on the H1 exists only to stop the nowrap headline escaping its
     column in the side-by-side band. Once the hero stacks, the headline owns the
     full width and should use the type token again. */
  #root [data-hero-copy] h1{font-size:var(--fs-display-l)!important;}
  #root [data-hero-copy]{text-align:center;}
  #root [data-hero-copy] p{margin-left:auto!important;margin-right:auto!important;}
  #root [data-hero-copy]>div:last-child{justify-content:center;}
  #root [data-hero-copy] div.lb-cta-row{justify-content:center;}
  #root [data-hero-bloom]{
    background-image:
      radial-gradient(ellipse 52% 20% at 26% 78%,rgba(31,228,204,.34) 0%,rgba(31,228,204,.12) 44%,rgba(31,228,204,0) 80%),
      radial-gradient(ellipse 56% 22% at 78% 88%,rgba(91,124,255,.40) 0%,rgba(91,124,255,.15) 44%,rgba(91,124,255,0) 80%),
      radial-gradient(ellipse 60% 24% at 62% 68%,rgba(130,92,235,.38) 0%,rgba(88,54,205,.20) 42%,rgba(5,5,7,0) 82%),
      var(--pattern-grid)!important;
    background-size:auto,auto,auto,var(--pattern-grid-size)!important;
    background-attachment:scroll!important;
    background-position:center,center,center,0 0!important;
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 22%,#000 46%,#000 88%,transparent 100%)!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 22%,#000 46%,#000 88%,transparent 100%)!important;
  }
}

/* ---------- Closing CTA: one centred ring set on small screens ---------- */
@media (max-width:900px){
  #root [data-cta-cluster="0"],#root [data-cta-cluster="1"]{display:none;}
  #root [data-cta-cluster="2"] [data-cta-ring]{left:50%!important;top:50%!important;}
  #root [data-cta-cluster="2"] [data-cta-ring]:nth-child(1){width:62vw!important;height:62vw!important;border-color:rgba(31,228,204,.16)!important;}
  #root [data-cta-cluster="2"] [data-cta-ring]:nth-child(2){width:96vw!important;height:96vw!important;border-color:rgba(31,228,204,.10)!important;}
  #root [data-cta-cluster="2"] [data-cta-ring]:nth-child(3){width:132vw!important;height:132vw!important;border-color:rgba(31,228,204,.055)!important;}
  /* three separated hues: cyan top-left, violet right, blue bottom-left */
  #root div:has(>[data-cta-cluster])>span:not([data-cta-cluster]){width:70vw!important;height:52vw!important;}
  #root div:has(>[data-cta-cluster])>span:not([data-cta-cluster]):nth-child(1){left:14%!important;top:16%!important;}
  #root div:has(>[data-cta-cluster])>span:not([data-cta-cluster]):nth-child(2){left:30%!important;top:88%!important;}
  #root div:has(>[data-cta-cluster])>span:not([data-cta-cluster]):nth-child(3){display:none;}
  #root div:has(>[data-cta-cluster])>span:not([data-cta-cluster]):nth-child(4){left:90%!important;top:44%!important;}
}

/* ---------- MCP flow: three nodes only fit side by side on wide screens ---------- */
@media (max-width:900px){
  #root [data-mcp-flow]{flex-direction:column!important;gap:10px!important;}
  #root [data-mcp-flow]>div:not([data-mcp-arrow]){flex:0 0 auto!important;}
  #root [data-mcp-arrow]{padding:0!important;}
  #root [data-mcp-arrow] svg{width:10px!important;height:22px!important;transform:rotate(90deg);}
}

/* ---------- Roadmap: the spline only reads as a road in 4 columns ---------- */
@media (max-width:1080px){
  #root [data-road-spline]{display:none;}
  #root [data-road-grid]{margin-top:0!important;gap:14px!important;}
  #root [data-road-card]{padding:18px 18px 18px 62px!important;text-align:left!important;}
  #root [data-road-badge]{top:18px!important;left:18px!important;transform:none!important;}
  #root [data-road-halo]{top:18px!important;left:18px!important;margin-top:0!important;margin-left:0!important;}
}

/* ---------- Footer ---------- */
@media (max-width:1080px){
  #root footer>div{grid-template-columns:minmax(0,1fr)!important;gap:40px!important;}
  #root [data-footer-nav]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px!important;}
}
@media (max-width:420px){
  #root [data-footer-nav]{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Mobile nav drawer ---------- */
.lb-nav-toggle{display:none;}
@media (max-width:860px){
  #root header>nav{
    position:fixed;top:var(--nav-height);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0!important;
    padding:8px var(--page-gutter) 20px;
    background:rgba(5,5,7,.96);-webkit-backdrop-filter:var(--blur-nav);backdrop-filter:var(--blur-nav);
    border-bottom:1px solid var(--border-subtle);
    display:none!important;pointer-events:none;
    transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
  }
  #root header>nav>a{display:flex!important;align-items:center;min-height:48px;}
  #root header>nav>span{display:none!important;}
  body.lb-nav-open #root header>nav{transform:none;opacity:1;pointer-events:auto;}
  .lb-nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 10px;margin-right:-10px;
    background:none;border:0;cursor:pointer;
  }
  .lb-nav-toggle i{display:block;height:1.5px;background:var(--text-secondary);border-radius:1px;
    transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);}
  body.lb-nav-open .lb-nav-toggle i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  body.lb-nav-open .lb-nav-toggle i:nth-child(2){opacity:0;}
  body.lb-nav-open .lb-nav-toggle i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

/* ---------- Page-level resets ---------- */
html,body{margin:0;background:var(--void-black)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}