/* ============================================================
   BEAVER HUB — hero / space theme
   Palette: blue (primary) · orange #FF5D00 (brand) · grey · white
   ============================================================ */
:root{
  --blue:        #3b82f6;
  --blue-deep:   #1d4ed8;
  --blue-glow:   #4aa8ff;
  --cyan:        #7dd3fc;
  --orange:      #ff5d00;   /* exact beaver orange */
  --orange-soft: #ff8a3d;

  /* brand palette — navy is the MAIN color for product/content sections */
  --navy:        #00478f;   /* MAIN */
  --navy-deep:   #063061;
  --near-black:  #2a231f;
  --lt-blue:     #d8e1e7;   /* light grey-blue (body text on dark) */
  --med-grey:    #7b7d87;
  --dark-slate:  #45585f;
  --teal-grey:   #506d72;

  --ink:         #04060f;   /* deep space */
  --ink-2:       #0a1020;
  --grey:        #8a93a6;
  --grey-light:  #b8c0d0;
  --white:       #f4f7ff;

  /* dark → blue → white melt (used for the seamless scroll background) */
  --melt-1:      #04060f;   /* deep space — matches hero exit */
  --melt-2:      #0a1020;
  --melt-3:      #0c1b3d;
  --melt-4:      #16336e;   /* seam color shared by .why bottom / .next top */
  --melt-5:      #2c5cae;
  --melt-6:      #7aa7e8;
  --melt-7:      #cfe0fb;
  --melt-8:      #eef4ff;   /* airy blue-white */
  --ink-text:    #0c1733;   /* dark text for light sections */
  --slate:       #46557a;   /* muted body text on light */

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--white);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-light);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px 2px rgba(255,93,0,.8);
}

.btn{
  --pad:.85em 1.5em;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad);
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  letter-spacing:.01em; border-radius:999px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn--primary{
  background:linear-gradient(180deg,var(--orange-soft),var(--orange));
  color:#fff; box-shadow:0 10px 30px -8px rgba(255,93,0,.6);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(255,93,0,.75); }
.btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.18);
  color:var(--white);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(122,168,255,.6); background:rgba(122,168,255,.1); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem clamp(1.1rem,4vw,3rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(4,6,15,.6);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-top:.8rem; padding-bottom:.8rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; position:relative; z-index:2; }
.brand__logo{ width:34px; height:34px; filter:drop-shadow(0 2px 10px rgba(255,93,0,.45)); }
.brand__name{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; }
.nav__links{ display:flex; align-items:center; gap:1.9rem; }
/* the quick-menu trigger is a <button> — strip its box padding on desktop so it
   sits on the same baseline as the plain text links beside it */
.nav__links .sp-menu__trigger{ padding:0; line-height:1; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:var(--grey-light);
  position:relative; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--orange); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }

/* ============================================================
   QUICK MENU — dropdown with grouped sub-topics
   Shared by the home nav (.nav__links) and sub-page nav (.sp-nav).
   ============================================================ */
.sp-menu{ position:relative; }
.sp-nav .sp-menu{ margin-right:auto; }   /* sub-page nav: push back-link + CTA to the right */
.sp-menu__item{ position:relative; }
.sp-menu__trigger{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-body); font-size:.92rem; font-weight:500;
  color:var(--grey-light); background:none; border:0; cursor:pointer;
  padding:.5rem .3rem; transition:color .25s var(--ease);
}
.sp-menu__trigger:hover{ color:#fff; }
.sp-menu__caret{ font-size:.7rem; transition:transform .28s var(--ease); }
.sp-menu__item.is-open .sp-menu__caret{ transform:rotate(180deg); }
.sp-menu__panel{
  position:absolute; top:calc(100% + .55rem); left:0; z-index:60;
  padding:.7rem; display:flex; gap:.25rem;
  max-height:min(74vh,560px); overflow-y:auto;
  background:rgba(8,12,26,.95);
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav .sp-menu__panel{ left:auto; right:0; }   /* home nav sits on the right — anchor panel to the right edge */
.sp-menu__item.is-open .sp-menu__panel{ opacity:1; visibility:visible; transform:none; }
.sp-menu__col{ display:flex; flex-direction:column; min-width:212px; }
.sp-menu__col + .sp-menu__col{ margin-left:.25rem; padding-left:.55rem; border-left:1px solid rgba(255,255,255,.07); }
.sp-menu__group{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); padding:.4rem .85rem .35rem;
}
.sp-menu__panel a{
  display:flex; flex-direction:column; gap:.08rem;
  padding:.5rem .85rem; border-radius:10px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--white); transition:background .2s var(--ease);
}
.sp-menu__panel a::after{ display:none; }   /* cancel the .nav__links underline sweep */
.sp-menu__panel a small{ font-family:var(--font-body); font-weight:400; color:var(--grey-light); font-size:.74rem; }
.sp-menu__panel a:hover{ background:rgba(122,168,255,.13); color:#fff; }
.sp-menu__panel a.is-current{ background:rgba(255,93,0,.14); color:var(--orange-soft); }
.sp-menu__panel a.is-current small{ color:rgba(255,138,61,.75); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  height:100vh; height:100svh; min-height:600px;
  overflow:hidden;
}

/* --- scroll-scrubbed video backdrop --- */
.hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:var(--ink);
  transform-origin:50% 47%;   /* zoom target = the rocket fire in the final frame */
  will-change:transform;
}
.hero__fadeout{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 47%, rgba(255,140,40,.25), transparent 60%), var(--ink);
  opacity:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,6,15,.78) 0%, rgba(4,6,15,.28) 24%,
                            rgba(4,6,15,0) 46%, rgba(4,6,15,.30) 78%, rgba(4,6,15,.62) 100%),
    radial-gradient(120% 70% at 50% 120%, rgba(4,6,15,.55), transparent 60%);
}

/* --- heading stages --- */
.hero__stages{
  position:absolute; z-index:5; inset:0;
  display:grid; grid-template-columns:minmax(0,1fr);   /* don't let a long word blow out the column */
  justify-items:center; align-items:start;
  text-align:center;
  padding:clamp(12vh,15vh,17vh) 1.2rem 0;
  pointer-events:none;
}
.stage{
  grid-area:1/1;
  width:min(820px,92vw); min-width:0;   /* allow the grid item to shrink, not overflow */
  opacity:0; visibility:hidden;
  text-shadow:0 2px 30px rgba(2,6,18,.55);
}
.stage.is-active{ opacity:1; visibility:visible; }
.stage .eyebrow{ margin-bottom:1.1rem; }
.display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,7vw,5.3rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin-bottom:1.1rem;
  overflow-wrap:break-word;
}
.display em{
  background:linear-gradient(105deg,var(--blue-glow),var(--cyan) 40%,var(--orange-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{
  font-size:clamp(1rem,1.6vw,1.22rem);
  color:var(--grey-light);
  max-width:46ch; margin:0 auto;
}
.hero__cta{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  margin-top:1.8rem; pointer-events:auto;
}

/* word-reveal mask */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* --- scroll cue --- */
.hero__cue{
  position:absolute; z-index:6; left:50%; bottom:2rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--grey-light); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__cue-line{ width:1px; height:46px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.hero__cue-line i{ position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:linear-gradient(var(--orange),transparent); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{top:-50%;} 60%,100%{top:100%;} }

/* ============================================================
   COSMOS — space backdrop for the bottom sections
   A blue-dominant canvas starfield (orange + white accents) with a
   gyroscopic parallax. The sky is a sticky, viewport-tall layer that
   the content sections scroll over; faint blue/orange nebula behind.
   ============================================================ */
.cosmos{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(70% 50% at 16% 6%,  rgba(59,130,246,.20), transparent 60%),
    radial-gradient(60% 45% at 88% 20%, rgba(255,93,0,.10),  transparent 60%),
    radial-gradient(85% 60% at 50% 98%, rgba(45,92,174,.22), transparent 72%),
    var(--ink);
}
.cosmos__sky{
  position:sticky; top:0;
  width:100%; height:100vh;
  margin-bottom:-100vh;        /* sit behind the content that follows */
  z-index:0; pointer-events:none;
}
.cosmos__sky canvas{ width:100%; height:100%; display:block; }
.cosmos > :not(.cosmos__sky):not(.cosmos__enter){ position:relative; z-index:1; }
/* dark-to-clear bridge at the top: hands off from the hero's fade-out and lets
   the starfield + content emerge from black as you scroll into the section */
.cosmos__enter{
  position:absolute; top:0; left:0; right:0; height:80vh; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(4,6,15,.72) 32%, transparent 100%);
}

/* ============================================================
   SOLUTIONS — alternating rows: text one side, a 2×2 grid of
   sub-product cards (empty for now) that fly in on the other
   ============================================================ */
.sols{
  position:relative; z-index:1;
  max-width:min(1680px, 94vw); margin:0 auto;
  padding:clamp(5rem,12vh,9rem) clamp(1.2rem,4vw,3rem) clamp(4rem,9vh,7rem);
}
.sols__head{ max-width:720px; margin:0 auto clamp(2.5rem,7vh,5rem); text-align:center; }
.sols__head .eyebrow{ margin-bottom:1rem; }
.sols__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.03em;
  margin:.4rem 0 1.1rem; color:var(--white);
}
.sols__title span{ color:var(--orange); }
.sols__lede{ color:var(--lt-blue); font-size:clamp(1rem,1.5vw,1.15rem); max-width:54ch; margin:0 auto; }

/* --- each solution is a full-screen "stage" (pinned by JS) --- */
.sols{ counter-reset:sol; }
.sol{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.1fr; align-items:center;
  gap:clamp(2rem,6vw,5.5rem);
  min-height:100vh;
  padding:clamp(2rem,5vh,3.5rem) clamp(1.5rem,4vw,4rem);
  counter-increment:sol;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:clamp(20px,2.4vw,32px);
  box-shadow:0 50px 90px -40px rgba(4,10,22,.55);
  margin-bottom:clamp(1.5rem,3vh,2.5rem);
}
.sol--flip .sol__body { order:2; }
.sol--flip .sol__grid{ order:1; }
/* giant ghost index number — strong per-section identity */
.sol::before{
  content:counter(sol, decimal-leading-zero);
  position:absolute; top:50%; left:-1.5vw; transform:translateY(-50%);
  z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(12rem, 40vh, 30rem); line-height:.78;
  color:rgba(0,71,143,.05);
}
.sol--flip::before{ left:auto; right:-1.5vw; }
/* focused accent glow behind the card grid */
.sol::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:780px; max-height:780px; border-radius:50%;
  top:50%; right:-12vw; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(0,71,143,.10), transparent 62%);
  filter:blur(12px);
}
.sol--flip::after{ right:auto; left:-12vw; }
.sol__body, .sol__grid{ position:relative; z-index:1; }
.sol__body{
  background:rgba(255,255,255,.42);
  border-radius:20px;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  margin:clamp(-1.4rem,-2.4vw,-2.2rem);
}

.sol__kicker{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin-bottom:1rem;
}
.sol__name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.02; letter-spacing:-.03em;
  color:var(--ink-text); margin-bottom:1rem;
}
.sol__desc{
  color:var(--slate); font-size:clamp(1rem,1.3vw,1.15rem); max-width:42ch;
}

/* --- 2×2 grid of clickable sub-product cards (with hover popup) --- */
.sol__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.4rem,4vw,3.6rem);
  perspective:1200px;
}
.subcard{
  position:relative; display:block; text-decoration:none; cursor:pointer;
  aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.45), 0 0 0 0 rgba(255,138,61,0);
  will-change:transform, opacity;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .35s var(--ease);
}
/* obvious lift + glow on hover — signals "this is clickable" */
.subcard:hover{
  transform:translateY(-6px) scale(1.025);
  border-color:rgba(255,138,61,.75);
  box-shadow:0 22px 48px -10px rgba(0,0,0,.6),
             0 0 0 3px rgba(255,138,61,.22);
}
/* subtle shimmer sweep that draws the eye */
.subcard::before{
  content:"";
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .0s;
}
.subcard:hover::before{ transform:translateX(200%); transition:transform .55s var(--ease); }
/* dummy thumbnail image (swap the gradient for a real <img> later) */
.subcard__img{ position:absolute; inset:0; transition:transform .5s var(--ease); }
.subcard__img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,10,22,.72) 0%, rgba(4,10,22,.18) 60%, transparent 100%); }
.subcard:hover .subcard__img{ transform:scale(1.06); }
/* label area with arrow cue */
.subcard__label{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem .9rem 1.1rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:#fff;
}
/* arrow icon — always visible, slides right on hover to signal action */
.subcard__label::after{
  content:"→";
  font-size:1rem; opacity:.6;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
  flex-shrink:0;
}
.subcard:hover .subcard__label::after{ transform:translateX(4px); opacity:1; }
/* per-card markup kept only as a data source for the big grid popup */
.subcard__pop{ display:none; }

/* dummy image gradients — replace with a real <img> in .subcard__img later */
.subcard--g1 .subcard__img{ background:linear-gradient(135deg,#0a3a7a,#2a8fe0); }
.subcard--g2 .subcard__img{ background:linear-gradient(135deg,#7a2f0a,#ff8a3d); }
.subcard--g3 .subcard__img{ background:linear-gradient(135deg,#10324f,#3aa6b8); }
.subcard--g4 .subcard__img{ background:linear-gradient(135deg,#2a1d5e,#7b5cff); }

/* --- big popup that covers the whole 2×2 grid on hover --- */
.sol__pop{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:5; pointer-events:none;
  display:flex; gap:clamp(1rem,2vw,2rem); padding:clamp(1.2rem,2.2vw,2rem);
  border-radius:22px;
  background:linear-gradient(160deg, rgba(12,33,67,.98), rgba(8,14,28,.99));
  border:1px solid rgba(255,138,61,.45);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.92);
  opacity:0; transform:scale(.98); transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.sol__pop.is-on{ opacity:1; transform:none; }
.sol__pop-img{
  flex:1 1 50%; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background-size:cover; background-position:center;
}
.sol__pop-body{ flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; gap:.9rem; }
.sol__pop-body strong{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1.05; color:#fff; }
.sol__pop-body p{ color:var(--lt-blue); font-size:clamp(.95rem,1.3vw,1.12rem); line-height:1.5; }
.sol__pop-cta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange); }
@media (max-width:560px){ .sol__pop{ flex-direction:column; } .sol__pop-img{ flex-basis:42%; } }

.sols__more{ text-align:center; color:var(--med-grey); font-size:1.05rem; margin-top:2.5rem; }
.sols__more::before{
  content:""; display:block; width:46px; height:2px; margin:0 auto 1.4rem;
  background:linear-gradient(90deg, var(--navy), var(--orange));
}

@media (max-width:860px){
  .sol{ grid-template-columns:1fr; gap:1.8rem; min-height:auto; padding:clamp(3rem,9vh,5rem) 0; }
  .sol--flip .sol__body { order:1; }
  .sol--flip .sol__grid{ order:2; }
  .sol::before{ font-size:9rem; opacity:.7; }
}

/* ============================================================
   CONTACT / BOOK A DEMO
   ============================================================ */
.eyebrow-mono{
  font-family:var(--font-mono); font-size:.74rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange);
}
.contact{
  position:relative; z-index:1;
  max-width:min(1680px, 95vw); margin:0 auto;
  padding:clamp(4rem,11vh,8rem) clamp(1rem,2.5vw,2rem) clamp(5rem,12vh,9rem);
}
.contact__inner{
  display:grid; grid-template-columns:1fr 1fr; align-items:start;
  gap:clamp(2.5rem,6vw,5rem);
  /* frosted highlight box that lifts the section off the starfield */
  padding:clamp(2rem,4.5vw,3.6rem);
  border-radius:28px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 50px 110px -45px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
.contact__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.035em;
  color:var(--white); margin:1rem 0 1.2rem;
}
.contact__title span{ color:var(--orange); }
.contact__lede{ color:var(--lt-blue); font-size:clamp(1rem,1.4vw,1.15rem); max-width:42ch; }
.contact__meta{ list-style:none; margin-top:clamp(2rem,5vh,3rem); display:grid; gap:1rem; }
.contact__meta li{ font-size:.98rem; color:var(--lt-blue); }
.contact__meta span{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--med-grey); margin-bottom:.2rem;
}
.contact__meta a{ color:var(--cyan); }
.contact__meta a:hover{ color:#fff; }

.contact__form{
  display:grid; gap:1.1rem;
  padding:clamp(1.6rem,3vw,2.4rem); border-radius:24px;
  background:#ffffff;                       /* white form card */
  border:1px solid rgba(0,71,143,.12);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
}
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-slate); }
.field input, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink-text);
  padding:.85em 1em; border-radius:12px; resize:vertical;
  background:#f3f6fb; border:1px solid #d8e1e7;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#9aa6b6; }
.field input:focus, .field textarea:focus{
  outline:none; background:#fff; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,93,0,.16);
}
.contact__submit{ justify-self:start; margin-top:.4rem; }
.contact__note{ font-size:.9rem; color:var(--navy); min-height:1.2em; font-weight:500; }
.contact__note.is-error{ color:#c0392b; }

@media (max-width:760px){ .contact__inner{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:1;
  background:linear-gradient(180deg, #050a16, var(--near-black));
  border-top:1px solid rgba(255,255,255,.06);
  padding:clamp(3.5rem,8vh,6rem) clamp(1.2rem,5vw,4rem) 2rem;
}
.foot__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(2.5rem,6vw,5rem);
}
.foot__brand .brand{ margin-bottom:1.2rem; }
.foot__tag{ color:var(--med-grey); font-size:.98rem; max-width:36ch; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot__col{ display:flex; flex-direction:column; gap:.7rem; }
.foot__col h4{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); font-weight:400; margin-bottom:.4rem;
}
.foot__col a{ color:var(--lt-blue); font-size:.95rem; transition:color .25s var(--ease); }
.foot__col a:hover{ color:#fff; }
.foot__bar{
  max-width:var(--maxw); margin:clamp(3rem,6vh,4rem) auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.85rem; color:var(--med-grey);
}
.foot__star{ color:var(--teal-grey); }
@media (max-width:760px){
  .foot__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .foot__cols{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   CHATBOT — floating, client-side
   ============================================================ */
.bot{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:200; }
.bot__fab{
  position:relative; width:60px; height:60px; border-radius:50%; cursor:pointer; border:0;
  display:grid; place-items:center; padding:0;
  background:linear-gradient(160deg, var(--orange-soft), var(--orange));
  box-shadow:0 14px 34px -8px rgba(255,93,0,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bot__fab:hover{ transform:translateY(-3px) scale(1.04); }
/* attention: pulsing ring + gentle bob until the user opens it once */
.bot.is-idle:not(.is-open) .bot__fab{ animation:botBob 2.8s ease-in-out infinite; }
.bot__fab::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.bot.is-idle:not(.is-open) .bot__fab::after{ animation:botRing 2.2s ease-out infinite; }
@keyframes botRing{ 0%{ box-shadow:0 0 0 0 rgba(255,93,0,.55); } 70%{ box-shadow:0 0 0 16px rgba(255,93,0,0); } 100%{ box-shadow:0 0 0 0 rgba(255,93,0,0); } }
@keyframes botBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
/* unread badge */
.bot__badge{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 4px;
  display:none; place-items:center; border-radius:999px;
  background:#fff; color:var(--orange); font-size:.7rem; font-weight:700; line-height:1;
}
.bot.has-badge .bot__badge{ display:grid; }
.bot.is-open .bot__badge{ display:none; }
/* proactive greeting bubble */
.bot__nudge{
  position:absolute; right:74px; bottom:6px; width:max-content; max-width:230px;
  padding:.85em 1.9em .85em 1em; border-radius:14px; cursor:pointer;
  font-size:.86rem; line-height:1.4; color:var(--lt-blue);
  background:linear-gradient(160deg, #0c2143, #0a1426);
  border:1px solid rgba(120,170,230,.25);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  animation:nudgeIn .4s var(--ease);
}
.bot__nudge[hidden]{ display:none; }
.bot__nudge::after{   /* pointer toward the fab */
  content:""; position:absolute; right:-7px; bottom:20px; width:13px; height:13px;
  background:#0a1426; border-right:1px solid rgba(120,170,230,.25); border-bottom:1px solid rgba(120,170,230,.25);
  transform:rotate(-45deg);
}
.bot__nudge-x{ position:absolute; top:3px; right:6px; background:none; border:0; color:var(--med-grey); font-size:1rem; line-height:1; cursor:pointer; }
.bot__nudge-x:hover{ color:#fff; }
@keyframes nudgeIn{ from{ opacity:0; transform:translateX(10px); } }
@media (max-width:760px){ .bot__nudge{ display:none; } }
.bot__fab-icon{ width:34px; height:34px; transition:opacity .25s, transform .25s; }
.bot__fab-x{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.9rem; line-height:1; color:#fff; opacity:0; transform:rotate(-45deg); transition:opacity .25s, transform .25s;
}
.bot.is-open .bot__fab-icon{ opacity:0; transform:scale(.4); }
.bot.is-open .bot__fab-x{ opacity:1; transform:rotate(0); }

.bot__panel{
  position:absolute; right:0; bottom:74px;
  width:min(360px, 86vw); height:min(520px, 70vh);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px;
  background:linear-gradient(180deg, #0c2143, #0a1426);
  border:1px solid rgba(120,170,230,.22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform-origin:bottom right;
  animation:botPop .35s var(--ease);
}
.bot__panel[hidden]{ display:none; }
@keyframes botPop{ from{ opacity:0; transform:translateY(12px) scale(.94); } }
.bot__head{
  display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(0,71,143,.25);
}
.bot__avatar{ width:36px; height:36px; }
.bot__head strong{ display:block; color:#fff; font-size:.98rem; }
.bot__head span{ font-family:var(--font-mono); font-size:.68rem; color:var(--cyan); letter-spacing:.04em; }
.bot__close{ margin-left:auto; background:none; border:0; color:var(--lt-blue); font-size:1.4rem; cursor:pointer; line-height:1; }
.bot__close:hover{ color:#fff; }

.bot__log{ flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.msg{ max-width:86%; padding:.7em .95em; border-radius:14px; font-size:.92rem; line-height:1.45; }
.msg--bot{ align-self:flex-start; background:rgba(120,170,230,.12); border:1px solid rgba(120,170,230,.18); color:var(--lt-blue); border-bottom-left-radius:4px; }
.msg--user{ align-self:flex-end; background:linear-gradient(160deg, var(--orange-soft), var(--orange)); color:#fff; border-bottom-right-radius:4px; }
.msg a{ color:var(--cyan); text-decoration:underline; }

.bot__chips{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .6rem; }
.bot__chip{
  font-size:.78rem; color:var(--lt-blue); cursor:pointer;
  padding:.4em .8em; border-radius:999px;
  background:rgba(0,71,143,.3); border:1px solid rgba(120,170,230,.28);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bot__chip:hover{ background:rgba(255,93,0,.18); border-color:rgba(255,138,61,.7); }
.bot__input{ display:flex; gap:.5rem; padding:.8rem 1.1rem 1.1rem; border-top:1px solid rgba(255,255,255,.07); }
.bot__input input{
  flex:1; font-family:var(--font-body); font-size:.92rem; color:var(--white);
  padding:.7em .9em; border-radius:12px;
  background:rgba(4,10,22,.6); border:1px solid rgba(120,170,230,.22);
}
.bot__input input:focus{ outline:none; border-color:rgba(255,138,61,.7); }
.bot__input button{
  flex:none; width:42px; border-radius:12px; cursor:pointer; border:0; color:#fff; font-size:1.1rem;
  background:linear-gradient(160deg, var(--orange-soft), var(--orange));
}

/* ---------- mobile nav toggle (hamburger) ---------- */
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; cursor:pointer;
  background:transparent; border:0; margin-left:.4rem;
  position:relative; z-index:2;
}
.nav__toggle span{ display:block; height:2px; width:100%; background:var(--white); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease); }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__links-cta{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .display{ font-size:clamp(1.9rem,7.4vw,3rem); }
  .lede{ font-size:1rem; }
}

@media (max-width:760px){
  /* belt-and-braces: clip any off-viewport decorative/animated overflow so the
     page can't be panned sideways on phones (no visible element exceeds the
     viewport — only transformed/glow flourishes do). */
  html, body{ overflow-x:clip; }
  .nav{ padding:.9rem 1.1rem; }
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  /* mobile smoothness: the fixed nav re-blurs every scroll frame → use a
     solid tint instead of backdrop-filter (also .contact glass panel) */
  .nav.is-scrolled{ background:rgba(6,9,20,.96); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .contact__inner{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  /* slide-down menu panel */
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0; z-index:1;
    flex-direction:column; align-items:flex-start; gap:.4rem;
    padding:5.2rem clamp(1.1rem,5vw,2rem) 1.6rem;
    background:rgba(4,6,15,.96); backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.08);
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .45s var(--ease), opacity .35s var(--ease);
  }
  .nav.is-open .nav__links{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a{ font-size:1.1rem; padding:.55rem 0; color:var(--white); }
  .nav__links a::after{ display:none; }
  .nav__links-cta{ display:inline-flex; margin-top:.8rem; }
  /* quick menu → stack the 3 columns and become an in-flow accordion */
  .sp-menu__panel{ flex-direction:column; gap:0; max-height:none; }
  .sp-menu__col{ min-width:0; }
  .sp-menu__col + .sp-menu__col{ margin:.35rem 0 0; padding:.6rem 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.07); }
  .sp-nav .sp-menu__panel{ max-height:min(70vh,460px); overflow-y:auto; }   /* sub-page nav stays a floating dropdown → keep it scrollable */
  .nav__links .sp-menu{ width:100%; }
  .nav__links .sp-menu__trigger{ font-size:1.1rem; padding:.55rem 0; color:var(--white); }
  .nav__links .sp-menu__panel{
    position:static; opacity:1; visibility:visible; transform:none; display:none;
    width:100%; margin:.2rem 0 .4rem; box-shadow:none;
    background:rgba(255,255,255,.03);
  }
  .nav__links .sp-menu__item.is-open .sp-menu__panel{ display:flex; }

  .hero__cue{ display:none; }
  /* keep hero copy centered & wrapping inside the viewport */
  .hero__stages{ padding-left:1rem; padding-right:1rem; }
  .stage{ width:100%; max-width:100%; }
  .display{ overflow-wrap:anywhere; }
  .lede{ max-width:34ch; }
  /* sub-product grids: a touch tighter */
  .sol__grid{ gap:.7rem; }
}

@media (max-width:460px){
  .sol__grid{ grid-template-columns:1fr; }   /* one sub-product per row on small phones */
}

/* ============================================================
   REDUCED MOTION — everything visible & still
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero{ height:auto; min-height:0; padding:8rem 1.2rem 4rem; }
  .hero__stages{ position:relative; display:block; }
  .stage{ opacity:1!important; visibility:visible!important; margin:0 auto 4rem; }
  .hero__cue-line i{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}

/* Touch/mobile: JS adds .motion-lite → same static hero as reduced-motion,
   so the phone scrolls natively instead of pinning + scrubbing the video. */
.motion-lite .hero{ height:auto; min-height:0; padding:7rem 1.2rem 4rem; }
.motion-lite .hero__stages{ position:relative; display:block; }
.motion-lite .stage{ opacity:1!important; visibility:visible!important; margin:0 auto 3.4rem; }
.motion-lite .hero__cue{ display:none; }
.motion-lite .hero__cue-line i{ animation:none; }
.motion-lite .reveal{ opacity:1; transform:none; }