/* ============================================================
   BEAVER HUB — product sub-page (cosmic theme)
   Shares the home page's design language: deep-space background,
   Three.js starfield (.cosmos / #stars), glassmorphism panels,
   Space Grotesk display type, orange/navy palette, pill buttons.
   Depends on css/styles.css for :root tokens, .btn, .eyebrow,
   .brand, .cosmos*, and .foot*.
   ============================================================ */

/* ---------- NAV (frosted, matches home's scrolled nav) ---------- */
.sp-nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:1.4rem;
  padding:.9rem clamp(1.1rem,4vw,3rem);
  background:rgba(4,6,15,.6);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sp-nav .brand{ margin-right:1.4rem; }
.sp-nav__back{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-light); transition:color .25s var(--ease);
}
.sp-nav__back:hover{ color:var(--orange); }
/* Quick-menu dropdown styles live in css/styles.css so the home page nav
   (which doesn't load subpage.css) can share the exact same component. */

/* ---------- COSMOS TUNING (sub-pages) ----------
   The home page uses .cosmos__enter to bridge FROM the cinematic rocket
   video into the starfield. Sub-pages have no video, so that heavy black
   wash just flattens the hero into empty space. Soften it: keep a light
   veil under the fixed nav for legibility, then let the stars + aura show. */
.cosmos__enter{
  height:44vh;
  background:linear-gradient(180deg, rgba(4,6,15,.9) 0%, rgba(4,6,15,.42) 40%, transparent 100%);
}

/* ---------- HERO ---------- */
.sp-hero{
  position:relative;
  padding:clamp(9.5rem,22vh,13rem) clamp(1.2rem,6vw,5rem) clamp(4rem,10vh,7rem);
}
/* cinematic aura — navy core + orange warmth, echoing the landing hero's
   rocket-fire glow and the .cosmos nebula. Gives the hero real depth. */
.sp-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:34%; transform:translate(-50%,-50%);
  width:min(1150px,125vw); aspect-ratio:1.15/1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,71,143,.6), transparent 58%),
    radial-gradient(circle at 64% 62%, rgba(255,93,0,.16), transparent 52%);
  filter:blur(18px);
}
.sp-hero__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; }
.sp-hero__inner--split{
  display:grid; grid-template-columns:1.12fr .88fr; align-items:center;
  gap:clamp(2.5rem,6vw,5rem);
}
.sp-hero__inner--center{ text-align:center; max-width:900px; }
.sp-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:1.1rem;
}
.sp-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 12px 2px rgba(255,93,0,.8); }
.sp-hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.8rem,6.5vw,5.2rem); line-height:1.0; letter-spacing:-.03em;
  color:var(--white); margin-bottom:1.2rem;
  text-shadow:0 2px 34px rgba(2,6,18,.5);
}
.sp-hero__title em, .sp-hero__title span{
  font-style:normal;
  background:linear-gradient(105deg,var(--blue-glow),var(--cyan) 40%,var(--orange-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-hero__sub{
  color:var(--grey-light); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65;
  max-width:54ch; margin-bottom:2rem;
}
.sp-hero__inner--center .sp-hero__sub{ margin-left:auto; margin-right:auto; }
.sp-actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
.sp-hero__inner--center .sp-actions{ justify-content:center; }

/* glass logo panel (sewdoo svg) */
.sp-logo{
  position:relative;
  display:grid; place-items:center;
  padding:clamp(2rem,5vw,3.5rem); border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);
}
/* brand glow ring behind the panel — navy → orange */
.sp-logo::before{
  content:""; position:absolute; inset:-14%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(0,71,143,.5), transparent 62%),
             radial-gradient(circle at 70% 75%, rgba(255,93,0,.22), transparent 60%);
  filter:blur(24px);
}
.sp-logo img{ max-width:320px; width:100%; filter:drop-shadow(0 10px 30px rgba(0,0,0,.4)); }

/* framed map / hero image */
.sp-frame{
  position:relative;
  margin:clamp(2rem,5vh,3rem) auto 0; max-width:920px; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),
             0 0 0 1px rgba(122,168,255,.14),
             0 30px 80px -30px rgba(0,71,143,.55);
}
.sp-frame img{ width:100%; display:block; }

/* ---------- STATS STRIP ---------- */
.sp-stats{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap;
  border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sp-stat{
  flex:1; min-width:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1.9rem 1.2rem; text-align:center;
  border-right:1px solid rgba(255,255,255,.07);
}
.sp-stat:last-child{ border-right:none; }
.sp-stat__num{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  background:linear-gradient(180deg,var(--orange-soft),var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-stat__label{ color:var(--grey-light); font-size:.82rem; margin-top:.45rem; }

/* ---------- SECTIONS ---------- */
.sp-section{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(3.5rem,9vh,6.5rem) clamp(1.2rem,5vw,4rem);
}
.sp-eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin-bottom:.85rem;
}
.sp-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.05; letter-spacing:-.028em;
  color:var(--white); margin-bottom:1.1rem;
}
.sp-body{
  color:var(--grey-light); font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.75; max-width:72ch;
}
.sp-body + .sp-body{ margin-top:1.05rem; }

/* two-column story */
.sp-story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }

/* glass content cards (features / pillars) */
.sp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:2.6rem; }
.sp-card{
  padding:1.6rem 1.7rem; border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sp-card:hover{
  transform:translateY(-4px); border-color:rgba(255,138,61,.55);
  box-shadow:0 22px 48px -18px rgba(0,0,0,.7), 0 0 0 3px rgba(255,138,61,.14);
}
.sp-card__icon{ font-size:1.7rem; margin-bottom:.85rem; display:block; }
.sp-card__name{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:#fff; margin-bottom:.45rem; }
.sp-card__desc{ color:var(--grey-light); font-size:.9rem; line-height:1.6; }

/* implementation phases */
.sp-phases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.3rem; margin-top:2.5rem; }
.sp-phase{
  padding:1.5rem 1.6rem; border-radius:16px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
}
.sp-phase__num{
  font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1; margin-bottom:.55rem;
  background:linear-gradient(180deg,var(--blue-glow),var(--orange-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sp-phase__title{ font-weight:600; color:#fff; font-size:.98rem; margin-bottom:.35rem; }
.sp-phase__desc{ color:var(--grey-light); font-size:.86rem; line-height:1.55; }

/* app-category cards (odoo suite) */
.sp-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:2.6rem; }
.sp-cat{
  border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.sp-cat:hover{ border-color:rgba(122,168,255,.5); transform:translateY(-3px); }
.sp-cat__head{
  padding:1.05rem 1.4rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:rgba(0,71,143,.28); border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff;
}
.sp-cat__head .ic{ font-size:1.2rem; }
.sp-cat__sub{ flex-basis:100%; font-family:var(--font-body); font-size:.76rem; font-weight:400; color:var(--grey-light); }
.sp-cat__apps{ padding:1rem 1.4rem 1.25rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.sp-app-tag{
  padding:.28rem .7rem; border-radius:7px; font-size:.78rem; font-weight:500;
  background:rgba(122,168,255,.12); color:var(--grey-light); border:1px solid rgba(122,168,255,.22);
}

/* positioning columns */
.sp-pos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.5rem; }
.sp-pos--4{ grid-template-columns:repeat(4,1fr); }
.sp-pos__item{
  padding:1.6rem; border-radius:16px; border-left:3px solid var(--orange);
  background:rgba(255,93,0,.06);
}
.sp-pos__item h4{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:1rem; margin-bottom:.5rem; }
.sp-pos__item p{ color:var(--grey-light); font-size:.9rem; line-height:1.6; }

/* testimonial cards (photo + quote) */
.sp-quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; margin-top:2.6rem; }
.sp-quote{
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.sp-quote:hover{ transform:translateY(-4px); border-color:rgba(122,168,255,.5); }
.sp-quote__media{
  height:158px; background-size:cover; background-position:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sp-quote__body{ padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:1.1rem; flex:1; }
.sp-quote__text{
  color:var(--white); font-size:.96rem; line-height:1.6; font-style:normal;
}
.sp-quote__text::before{
  content:"\201C"; color:var(--orange); font-family:var(--font-display);
  font-size:2.1rem; line-height:0; vertical-align:-.32em; margin-right:.08em;
}
.sp-quote__who{ margin-top:auto; display:flex; flex-direction:column; gap:.1rem; }
.sp-quote__name{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:.95rem; }
.sp-quote__role{ color:var(--grey-light); font-size:.8rem; }

/* video */
.sp-video{
  position:relative; padding-bottom:56.25%; border-radius:20px; overflow:hidden; margin-top:2.6rem;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.sp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- CTA banner ---------- */
.sp-cta{
  position:relative; overflow:hidden;
  max-width:var(--maxw);
  margin:clamp(2rem,6vh,4rem) auto clamp(3.5rem,9vh,6rem);
  border-radius:26px;
  padding:clamp(2.5rem,6vw,4.5rem);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  background:linear-gradient(135deg, var(--navy), var(--navy-deep));
  border:1px solid rgba(122,168,255,.25);
  box-shadow:0 50px 110px -45px rgba(0,0,0,.85);
}
.sp-cta::before{
  content:""; position:absolute; right:-90px; top:-90px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,93,0,.3), transparent 65%);
}
.sp-cta__title{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.1; color:#fff; max-width:40ch;
}
.sp-cta .btn{ position:relative; z-index:1; white-space:nowrap; }

/* ---------- reveal defaults (GSAP animates in) ---------- */
.reveal{ will-change:transform, opacity; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sp-hero__inner--split{ grid-template-columns:1fr; }
  .sp-logo{ order:-1; }
  .sp-story{ grid-template-columns:1fr; }
  .sp-pos{ grid-template-columns:1fr; }
  .sp-pos--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .sp-nav{ gap:.8rem; }
  .sp-nav__back{ display:none; }          /* Quick menu covers navigation on small screens */
  .sp-nav .btn--primary{ display:none; }  /* CTA would overflow the row → it lives in the Quick menu on phones */
  .sp-nav .sp-menu{ margin-left:auto; }   /* pin the Quick menu to the right edge */
  .sp-pos--4{ grid-template-columns:1fr; }
  .sp-menu__panel{ min-width:min(78vw,262px); }
}

/* ---------- mobile smoothness: drop backdrop-blur compositing ----------
   backdrop-filter forces a re-blur every scroll frame (worst on the fixed
   nav). The panels already have semi-opaque backgrounds, so on touch/small
   screens we swap the blur for a solid tint → native-smooth scrolling. */
@media (max-width:760px){
  .sp-nav{ background:rgba(6,9,20,.95); }
  .sp-nav, .sp-logo, .sp-media, .sp-card, .sp-cat, .sp-phase,
  .sp-pos__item, .sp-quote, .sp-stats{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  /* Pin the Quick-menu dropdown to the viewport's right edge. It's hidden with
     visibility (not display:none) so, left as an absolute box inside the fixed
     nav, it hung ~130px off-screen and inflated page width → 49px h-overflow.
     position:fixed anchors it to the viewport so it can never overflow. */
  .sp-nav .sp-menu__panel{
    position:fixed; top:58px; right:12px; left:auto;
    width:min(82vw,300px); max-height:min(70vh,460px); overflow-y:auto;
  }
}