/* ============================================================
   OPI ROBOTICS — Base
   Sticky Hero Peel structural primitives + resets + typography
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:16px; } /* 16px floor prevents iOS auto-zoom */
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ font-weight:600; line-height:var(--lh-heading); letter-spacing:var(--ls-heading); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--a);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--a); box-shadow:0 0 10px 1px rgba(34,211,238,.7); }
.lede{ color:var(--text-2); font-size:1.0625rem; max-width:640px; }
.overflow-wrap{ overflow-wrap:anywhere; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--a); color:var(--on-accent); padding:10px 18px; border-radius:var(--r-sm); font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--p-hover); outline-offset:3px; border-radius:var(--r-xs); }

.container{
  width:100%;
  max-width:calc(var(--container-max) + var(--gutter) * 2);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------------------------------------------------------------
   STICKY HERO PEEL — structural signature of Layout Blueprint #21
   .hero-stage   fixed, full-viewport, sits at z-index 0, never scrolls
   .hero-spacer  reserves initial scroll space equal to hero height
   .peel-sheet   the rounded "card" of page content that scrolls up
                 and visually covers the fixed hero as the user scrolls
   .finale       transparent band after the sheet where the hero canvas
                 is allowed to reappear — the "ending" reveal
   --------------------------------------------------------------- */
.hero-stage{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(59,130,246,.30), transparent 60%),
    radial-gradient(45% 40% at 12% 85%, rgba(34,211,238,.14), transparent 65%),
    var(--bg-recessed);
}
.hero-stage .starfield{ position:absolute; inset:0; opacity:.55; }
.hero-stage .horizon-line{
  position:absolute; left:50%; top:62%; width:220vw; height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55) 35%, rgba(59,130,246,.7) 50%, rgba(34,211,238,.55) 65%, transparent);
  transform:translate(-50%,-50%) rotate(-3deg);
  box-shadow:0 0 24px 1px rgba(34,211,238,.35);
}
/* Hero content is a flow-based flex column so the headline block and the
   stat/foot block can NEVER overlap, no matter how short the viewport is.
   __main takes auto margins so it optically centres in whatever vertical
   space is left over after the foot has claimed its height. */
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column;
  padding-top:96px;
  padding-bottom:var(--sp-4);
  gap:var(--sp-4);
}
.hero-content__main{ margin-top:auto; margin-bottom:auto; min-width:0; }
.hero-foot{ flex:0 0 auto; }

/* The hero text fades out once the sheet has covered the hero, so it can't
   bleed through the transparent .finale band and collide with the finale copy.
   The canvas (starfield / gradient / video) deliberately stays visible.
   Toggled by assets/js/hero-reveal.js. */
.hero-content{
  transition:opacity var(--dur-slow) var(--ease-out-premium), visibility var(--dur-slow);
}
.hero-stage.is-past-hero .hero-content{
  opacity:0; visibility:hidden; pointer-events:none;
}

.hero-heading{ max-width:920px; margin-top:22px; }
.hero-lede{ margin-top:24px; font-size:1.15rem; }
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:56px; flex-wrap:wrap; }

/* Compact heroes: the sheet covers the stage at .hero-spacer--sm (64dvh), so
   centre the content inside that visible band instead of the full viewport —
   otherwise the headline sits crammed against the top edge of the sheet. */
.hero-stage--compact .hero-content{ height:64dvh; padding-bottom:var(--sp-2); }

/* Short viewports (laptops, browser chrome + OS taskbar eating height):
   tighten the vertical rhythm and step the type down so the whole hero
   still breathes inside one screen. */
@media (max-height:860px){
  .hero-content{ gap:var(--sp-3); padding-bottom:var(--sp-3); }
  .hero-heading{ font-size:clamp(2.1rem,1.3rem + 3.4vw,3.5rem); margin-top:16px; }
  .hero-lede{ margin-top:18px; font-size:1.05rem; }
  .hero-ctas{ margin-top:26px; }
  .hero-stats{ gap:40px; }
}
@media (max-height:720px){
  .hero-content{ padding-top:84px; gap:var(--sp-2); }
  .hero-heading{ font-size:clamp(1.9rem,1.2rem + 2.6vw,2.7rem); }
  .hero-lede{ margin-top:14px; font-size:1rem; }
  .hero-ctas{ margin-top:20px; }
  .hero-stats{ gap:28px; }
}

/* Very short viewports: stop pinning the hero to the viewport entirely.
   The stage becomes a normal block that scrolls, so nothing can ever be
   clipped by the fixed stage's overflow:hidden. */
@media (max-height:620px){
  .hero-stage{ position:relative; inset:auto; height:auto; min-height:auto; }
  .hero-content,
  .hero-stage--compact .hero-content{ height:auto; padding-top:96px; padding-bottom:var(--sp-5); }
  .hero-content__main{ margin-top:0; margin-bottom:0; }
  .hero-spacer{ display:none; }
}
.hero-stage .grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }

.hero-spacer{ height:100dvh; position:relative; z-index:0; pointer-events:none; }
.hero-spacer--sm{ height:64dvh; }

.peel-sheet{
  position:relative; z-index:3;
  background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -40px 90px -30px rgba(0,0,0,.65);
  border-top:1px solid var(--border-strong);
}
.peel-sheet::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--a), transparent);
  opacity:.6;
}

.finale{
  position:relative; z-index:2;
  min-height:34dvh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: var(--sp-6) var(--gutter);
}
.finale p{ color:var(--text-2); font-size:1.05rem; max-width:520px; margin:0 auto; }
.finale .eyebrow{ justify-content:center; margin-bottom:var(--sp-2); }

@media (max-width:899px){
  .hero-spacer{ height:85dvh; }
  /* keep the compact hero band in sync with the spacer override above */
  .hero-stage--compact .hero-content{ height:85dvh; }
  .peel-sheet{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
}

/* Section rhythm inside the sheet */
.section{ padding:var(--sp-9) 0; position:relative; }
.section--light{ padding:var(--sp-6) 0; }
@media (max-width:899px){
  .section{ padding:var(--sp-7) 0; }
  .section--light{ padding:var(--sp-4) 0; }
}
.section-head{ max-width:680px; margin-bottom:var(--sp-5); }
.section-head + .section-head{ margin-top:var(--sp-5); }
.rule{ height:1px; background:var(--border); border:0; margin:0; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }