/* =========================================================
   G-SALDIO V14 — BRAND SYSTEM + MOBILE POLISH
   Shared across Ecosystem, Products, and School System.
   ========================================================= */
:root{
  --gs-deep-950:#051a17;
  --gs-deep-900:#061d19;
  --gs-deep-800:#082b26;
  --gs-teal-700:#087f72;
  --gs-teal-600:#0b9787;
  --gs-teal-500:#13b39f;
  --gs-teal-400:#42d3bf;
  --gs-mint-100:#dff5f0;
  --gs-mint-050:#eff9f6;
  --gs-paper:#f6faf9;
  --gs-white:#ffffff;
  --gs-ink:#10221f;
  --gs-muted:#6d807b;
  --gs-line:#d5e3df;
  --gs-radius-sm:10px;
  --gs-radius-md:16px;
  --gs-radius-lg:24px;
  --gs-radius-xl:32px;
  --gs-shadow-soft:0 18px 48px rgba(8,62,53,.10);
  --gs-shadow-deep:0 34px 90px rgba(2,32,27,.22);
}

/* --- Shared brand precision --- */
html{scroll-padding-top:96px}
body{accent-color:var(--gs-teal-500)}
::selection{background:var(--gs-teal-500);color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{
  outline:3px solid rgba(66,211,191,.42)!important;
  outline-offset:4px;
  border-radius:10px;
}
.brand{isolation:isolate}
.brand-logo{border-radius:12px!important}
.brand>span{position:relative}
.brand>span:after{
  content:"";
  position:absolute;
  left:0;right:55%;bottom:-5px;
  height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--gs-teal-400),transparent);
  opacity:.58;
}

/* Shared status language */
.mega-status,.catalog-status,.school-status-pill,.products-next-pill,.flagship-status,
.school-status-row strong,.products-hero-meta small{
  letter-spacing:.11em;
}
.mega-status,.catalog-status{
  border:1px solid rgba(19,179,159,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Shared button language */
.button{
  border-radius:15px!important;
  letter-spacing:-.01em;
}
.button:active{transform:translateY(0) scale(.985)!important}
.button-primary,.school-primary-button,.products-primary-cta{
  background:linear-gradient(135deg,#16b09c,#087f72)!important;
  box-shadow:0 16px 36px rgba(11,151,134,.22)!important;
}

/* Shared surface rules */
.school-product,.future-product,.catalog-product,.flagship-product,.future-directory-card,
.school-module,.school-principle-grid article,.products-standard-list article{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* =========================================================
   MOBILE NAV — app-like sheet instead of basic dropdown
   ========================================================= */
.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:214;
  background:rgba(2,24,20,.48);
  backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.mobile-nav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
body.mobile-nav-open{overflow:hidden}

@media(max-width:1050px){
  .site-header{z-index:230!important}
  .nav-shell{gap:14px!important}
  .nav-actions{margin-left:auto!important;gap:9px!important}
  .menu-button{
    position:relative;z-index:232;
    width:44px!important;height:44px!important;
    display:flex!important;align-items:center;justify-content:center;
    padding:0 12px!important;gap:0!important;
    border-radius:14px!important;
    border:1px solid rgba(190,216,210,.62)!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 8px 24px rgba(5,50,43,.10);
    backdrop-filter:blur(14px);
    transition:.22s ease;
  }
  .site-header:not(.scrolled) .menu-button{
    background:rgba(255,255,255,.075)!important;
    border-color:rgba(159,222,212,.15)!important;
    box-shadow:none;
  }
  .menu-button span{
    position:absolute!important;
    left:12px!important;
    width:18px!important;height:1.5px!important;
    background:#14322d!important;
    border-radius:99px;
    transition:transform .24s ease,top .24s ease,opacity .2s ease;
  }
  .site-header:not(.scrolled) .menu-button span{background:#fff!important}
  .menu-button span:first-child{top:17px}
  .menu-button span:last-child{top:25px}
  .menu-button[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
  .menu-button[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

  .mobile-menu{
    --mobile-menu-top:82px;
    position:fixed!important;
    z-index:231!important;
    top:var(--mobile-menu-top)!important;
    left:12px!important;right:12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
    max-height:calc(100dvh - var(--mobile-menu-top) - 12px)!important;
    padding:13px!important;
    overflow:auto!important;
    border:1px solid rgba(124,190,179,.24)!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 90% 4%,rgba(57,211,190,.12),transparent 26%),
      linear-gradient(150deg,#061f1b,#083a32)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.30)!important;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-9px) scale(.985);
    transform-origin:top right;
    transition:opacity .22s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility .22s ease;
  }
  .mobile-menu.open{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;
  }
  .mobile-menu-head{
    padding:10px 10px 14px;
    border-bottom:1px solid rgba(190,230,223,.10);
    margin-bottom:4px;
  }
  .mobile-menu-head span{
    display:block;color:#67b8ac;font-size:7px;font-weight:900;letter-spacing:.15em;
  }
  .mobile-menu-head strong{
    display:block;margin-top:4px;color:#f3fffc;
    font:800 18px var(--manrope);letter-spacing:-.035em;
  }
  .mobile-menu a{
    position:relative;
    min-height:52px;
    display:flex!important;align-items:center!important;
    padding:0 43px 0 13px!important;
    border-radius:13px;
    color:#d8ebe7!important;
    font-size:13px!important;font-weight:800!important;
    transition:.18s ease;
  }
  .mobile-menu a:hover,.mobile-menu a:focus-visible{
    background:rgba(255,255,255,.065)!important;color:#fff!important;
  }
  .mobile-menu a:before{
    content:counter(gs-mobile,decimal-leading-zero);
    counter-increment:gs-mobile;
    width:27px;margin-right:8px;
    color:#568c84;font-size:7px;font-weight:900;letter-spacing:.08em;
  }
  .mobile-menu{counter-reset:gs-mobile}
  .mobile-menu a:after{
    content:"↗";position:absolute;right:14px;
    color:#5fb6aa;font-size:12px;
  }
  .mobile-menu a[href^="#"]:after{content:"↓"}
  .mobile-menu a[href^="mailto:"]:after{content:"→"}
  .mobile-menu a:first-of-type{
    background:linear-gradient(90deg,rgba(40,204,182,.14),rgba(40,204,182,.035));
    color:#fff!important;
  }
  .mobile-menu a:first-of-type:before{color:#58d2c1}
  .mobile-menu-foot{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:5px;padding:12px 10px 4px;
    border-top:1px solid rgba(190,230,223,.10);
    color:#668f88;font-size:7px;font-weight:800;
  }
  .mobile-menu-foot strong{color:#9cc7bf;font-weight:800}
}

/* =========================================================
   GLOBAL RESPONSIVE QA
   ========================================================= */
@media(max-width:700px){
  html{scroll-padding-top:76px}
  .shell{width:calc(100% - 24px)!important}
  .site-header.scrolled{left:7px!important;right:7px!important;width:auto!important}
  .site-header.scrolled .nav-shell{height:58px!important}
  .nav-shell{height:68px!important}
  .brand{font-size:18px!important;gap:8px!important}
  .brand-logo{width:34px!important;height:34px!important}
  .mobile-menu{left:7px!important;right:7px!important;border-radius:19px!important}

  /* Homepage */
  .hero{padding-top:112px!important}
  .hero-copy{padding-top:14px!important}
  .hero h1{font-size:clamp(45px,14vw,58px)!important;line-height:.98!important}
  .hero-lead{font-size:14px!important;line-height:1.68!important}
  .hero-actions .button{width:100%!important}
  .system-universe{min-height:455px!important;transform:scale(.97);transform-origin:center top}

  /* Products */
  .products-universe-hero{padding-top:112px!important}
  .products-hero-copy h1{font-size:clamp(45px,13.5vw,55px)!important}
  .products-hero-copy>p{font-size:14px!important}
  .products-hero-actions .button{width:100%!important}
  .product-directory-head h2,.architecture-copy h2,.products-standard-head h2{font-size:44px!important}

  /* School */
  .school-signature-hero{padding-top:112px!important}
  .school-signature-copy h1{font-size:clamp(45px,13.5vw,55px)!important}
  .school-signature-lead{font-size:14px!important}
  .school-signature-actions .button{width:100%!important}
  .school-section-intro h2,.school-experience-head h2,.school-principles-head h2{font-size:44px!important}
}

@media(max-width:430px){
  .shell{width:calc(100% - 20px)!important}
  .brand>span{font-size:17px}
  .hero h1,.products-hero-copy h1,.school-signature-copy h1{font-size:46px!important}
  .system-universe{min-height:430px!important}
  .orbit-node{max-width:145px}
  .products-universe-visual{transform:scale(.94);transform-origin:center top}
  .school-logo-panel{padding:9px 10px!important}
  .school-app-window{border-radius:18px!important}
}

/* =========================================================
   BRAND DETAILS — subtle and consistent
   ========================================================= */
.site-header.scrolled{
  box-shadow:0 15px 45px rgba(7,52,44,.10)!important;
}
.footer-bottom,.school-footer-bottom,.products-footer-bottom{
  letter-spacing:.02em;
}
footer a:hover,.school-footer a:hover,.products-footer a:hover{color:#63d6c6!important}

/* standardized tiny dot used throughout the brand */
.gs-brand-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gs-teal-500);box-shadow:0 0 0 5px rgba(19,179,159,.08);
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-nav-backdrop,.menu-button span{transition:none!important}
}