/* iCore Phase 2.1 — Mobile 3D Preservation + Edge-Safe Layout
   Purpose: preserve every meaningful 3D/canvas experience on phones/tablets,
   while adapting scale, spacing and interaction instead of hiding visuals. */

:root{--icore-mobile-gutter:clamp(18px,5vw,26px)}

/* Edge safety: prevent editorial copy/cards from touching device edges. */
@media(max-width:1024px){
  .wrap,
  .nav,
  .hero .wrap,
  .phero .wrap,
  .lab-hero .wrap,
  .section>.wrap,
  .footer>.wrap,
  .trust>.wrap,
  .story>.wrap,
  .motion>.wrap,
  .reach>.wrap,
  .explore>.wrap,
  .band-dark>.wrap,
  .procsim>.wrap,
  .stats-sec>.wrap{
    padding-left:max(var(--icore-mobile-gutter),env(safe-area-inset-left))!important;
    padding-right:max(var(--icore-mobile-gutter),env(safe-area-inset-right))!important;
  }
  .sec-head,.story-head,.hero-copy,.stage-copy,.map-info,.xp-panel,.tsc-body,.stat-card,.model,.ai-card,.case,.ccard,.featured-case,.prod-copy,.cap-card,.tool-card{
    min-width:0;
  }
  h1,h2,h3,h4,p,li,.hero-sub,.sec-head p,.stage p,.xp-desc{
    overflow-wrap:anywhere;
  }
}

/* Never hide decorative/meaningful 3D tool-page orbs on mobile: reposition them. */
@media(max-width:960px){
  .ts-orb{
    display:block!important;
    top:54px;
    right:-72px;
    width:210px;
    height:210px;
    opacity:.24;
    filter:saturate(.9);
  }
}
@media(max-width:560px){
  .ts-orb{top:66px;right:-88px;width:190px;height:190px;opacity:.19}
}

/* Hero 3D core: retain visual prominence on mobile instead of flattening/removing it. */
@media(max-width:900px){
  .hero .core-stage,.hero-dark .core-stage{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:min(86vw,390px)!important;
    max-width:min(86vw,390px)!important;
    min-height:270px;
    margin:18px auto 2px!important;
    transform:perspective(900px) rotateX(2deg)!important;
    transform-style:preserve-3d;
  }
  .core-stage canvas,.core-stage svg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}
@media(max-width:560px){
  .hero .core-stage,.hero-dark .core-stage{
    width:min(92vw,340px)!important;
    max-width:min(92vw,340px)!important;
    min-height:240px;
    margin-top:16px!important;
  }
}
@media(max-width:380px){
  .hero .core-stage,.hero-dark .core-stage{
    width:min(94vw,310px)!important;
    max-width:min(94vw,310px)!important;
    min-height:220px;
  }
}

/* Per-page 3D hero orb: keep on phones, place behind copy with safe opacity. */
@media(max-width:820px){
  .hero-orb{
    display:block!important;
    visibility:visible!important;
    opacity:.32!important;
    width:min(92vw,430px)!important;
    height:min(92vw,430px)!important;
    right:-38%!important;
    top:48%!important;
  }
  .phero.dark .hero-orb,.lab-hero .hero-orb{opacity:.34!important}
}
@media(max-width:520px){
  .hero-orb{right:-48%!important;opacity:.25!important}
}

/* All actual 3D canvases stay visible. Adapt aspect ratio and density instead. */
@media(max-width:820px){
  .viz3d,
  .stage-vis[data-stage3d],
  .featured-case .fc-vis .viz3d,
  .ccard .cc-vis .viz3d{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .viz3d{
    aspect-ratio:16/11;
    min-height:210px;
    touch-action:pan-y;
    cursor:default;
  }
  .viz3d canvas,
  .stage-vis[data-stage3d] canvas,
  .xp-viz canvas,
  .globe-canvas,
  .cloud-canvas,
  .orb-canvas,
  .netbg{
    display:block!important;
    visibility:visible!important;
    opacity:1;
  }
  .stage-vis[data-stage3d]{min-height:220px;aspect-ratio:16/11}
  .stats-grid .viz3d,.tsc .viz3d{min-height:220px}
  .v3d-tag{font-size:9.5px!important;left:10px!important;bottom:8px!important;max-width:calc(100% - 20px)}
}
@media(max-width:520px){
  .viz3d,.stats-grid .viz3d,.tsc .viz3d{min-height:200px;aspect-ratio:4/3}
  .stage-vis[data-stage3d]{min-height:205px;aspect-ratio:4/3}
}

/* Transformation story: visual first on mobile, never omitted. */
@media(max-width:820px){
  .stage,
  .stage:nth-child(even){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    opacity:1;
  }
  .stage-vis{display:grid!important;order:-1!important;width:100%;max-width:100%}
  .stage-copy{order:0!important;padding-inline:2px}
}

/* Explore iCore canvas remains a real visual on mobile. */
@media(max-width:820px){
  .xp-stage{grid-template-columns:1fr!important;gap:18px}
  .xp-viz{
    display:block!important;
    order:0!important;
    min-height:300px;
    aspect-ratio:1/1;
  }
  .xp-panel{order:1!important}
  .xp-viz canvas{width:100%!important;height:100%!important;min-height:300px}
}
@media(max-width:520px){
  .xp-viz,.xp-viz canvas{min-height:270px}
}

/* Globe / reach visual is retained and centered on small screens. */
@media(max-width:820px){
  .globe-wrap{display:block!important;width:min(88vw,430px);max-width:430px;margin:6px auto 0}
  .reach-grid{gap:22px!important}
}

/* Network backgrounds remain present but lighter on mobile for legibility/performance. */
@media(max-width:720px){
  .netbg{display:block!important;opacity:.42!important}
  .has-net>.wrap{position:relative;z-index:2}
}

/* Keep depth feeling on touch devices without hover-only tilt. */
@media(max-width:900px){
  .icore-depth-card{
    transform:perspective(900px) translateZ(0)!important;
    box-shadow:0 14px 34px -20px rgba(8,20,54,.30)!important;
  }
  .icore-depth-card::before{display:block!important;opacity:.35!important}
  .tsc,.stat-card,.ccard,.featured-case,.prod-screen,.stage-vis{
    box-shadow:0 18px 42px -26px rgba(8,20,54,.42);
  }
}

/* Small-screen section spacing: enough breathing room without oversized empty gaps. */
@media(max-width:720px){
  .section{padding-top:64px!important;padding-bottom:64px!important}
  .sec-head{margin-bottom:26px}
  .sec-head.center{padding-inline:2px}
  .story-head{padding-inline:2px}
}

/* Preserve horizontal touch interaction for 3D while allowing normal vertical scrolling. */
.viz3d canvas,.stage-vis[data-stage3d] canvas,.core-stage canvas,.xp-viz canvas{touch-action:pan-y}