/* home-rbs.css — LANE A 2026-10-04: homepage RBS nebula section (.hrbs) + banner (.hbanner).
   Ported from RBS-Export-Pack source/project/HomeRBS.dc.html + HomeBanner.dc.html
   (DESIGN §3.07/§3.08, COPY §7/§8, STYLE §7 motion). Scoped: touches nothing else. */

/* ===== §3.07 — Homepage RBS section (full-bleed nebula) ===== */
.hrbs{position:relative;overflow:hidden;background-color:#070B14;
  background-image:url(/website-v19/bg-nebula-red.jpg);
  background-size:cover;background-position:center 60%;
  padding:104px 24px 112px;text-align:center;box-sizing:border-box}
/* top/bottom fades + a soft vignette so type sits on near-black */
.hrbs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 55%,rgba(7,11,20,0) 46%,rgba(7,11,20,.6) 100%),
  linear-gradient(180deg,rgba(7,11,20,.85) 0%,rgba(7,11,20,0) 22%,rgba(7,11,20,0) 78%,rgba(7,11,20,.9) 100%)}
.hrbs__inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.hrbs__hl{margin:0;font-size:52px;line-height:1.08;font-weight:300;letter-spacing:-.025em;color:#FFFFFF}
.hrbs__hl span{color:#E5384F}
.hrbs__stage{position:relative;display:block;width:340px;margin:44px auto 0}
.hrbs__glow{position:absolute;left:50%;top:52%;width:560px;height:560px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(229,56,79,.42) 0%,rgba(229,56,79,.16) 38%,rgba(229,56,79,0) 68%);
  animation:hrbs-pulse 5.5s ease-in-out infinite}
@keyframes hrbs-pulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.hrbs__book{position:relative;display:block;width:340px;height:auto;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  transform:perspective(1000px) rotateY(0) rotateX(0);
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.hrbs__stage:hover .book,.hrbs__stage:focus-within .book{transform:perspective(1000px) rotateY(-7deg) rotateX(3deg)}
.hrbs__cta{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin-top:44px;
  width:420px;max-width:100%;height:68px;border-radius:999px;background:#E5384F;color:#FFFFFF;
  font-size:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 10px 30px rgba(229,56,79,.35);transition:background .2s ease}
.hrbs__cta:hover{background:#D62F45}
/* reflection behind the CTA: shift the mirrored copy down so its contact line lands at the button's top edge (44px = .hrbs__cta margin-top) */
.hrbs__stage .book-mirror{transform:translateY(44px) rotate(-4.62deg) scaleY(-1) rotate(4.62deg)}
.hrbs__cta:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
/* 5 twinkling stars — staggered opacity loops, paused offscreen via .art--paused */
.hrbs__tw{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 6px 2px rgba(255,255,255,.7);animation:hrbs-tw 4s ease-in-out infinite}
@keyframes hrbs-tw{0%,100%{opacity:.25}50%{opacity:1}}
/* IntersectionObserver toggles .art--paused on the section when offscreen */
.art--paused .hrbs__tw,.art--paused .hrbs__glow{animation-play-state:paused}
@media (max-width:760px){
  .hrbs{padding:72px 20px 80px;background-position:center center}
  .hrbs__hl{font-size:32px}
  .hrbs__stage{margin-top:32px}
  .hrbs__stage{width:240px}
  .hrbs__stage .book{width:100%}
  .hrbs__glow{width:380px;height:380px}
  .hrbs__cta{width:100%;height:60px;font-size:18px;margin-top:32px}
  .hrbs__stage .book-mirror{transform:translateY(32px) rotate(-4.62deg) scaleY(-1) rotate(4.62deg)}
  .hrbs__stage:hover .hrbs__book{transform:none}
}

/* ===== §3.08 — Homepage RBS banner (rounded navy card between Lab and FAQ) ===== */
.hbanner{background:#070B14;padding:56px 24px;box-sizing:border-box}
.hbanner__card{position:relative;max-width:1240px;margin:0 auto;
  border:1px solid rgba(96,128,180,.32);border-radius:20px;overflow:hidden;
  background:radial-gradient(ellipse 60% 90% at 50% 70%,rgba(229,56,79,.10) 0%,rgba(229,56,79,0) 60%),#061426;
  display:grid;grid-template-columns:auto minmax(0,560px) auto;align-items:center;gap:8px;
  padding:0 48px;min-height:300px;box-sizing:border-box}
.hbanner__hl{margin:0;font-size:44px;line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#FFFFFF}
.hbanner__hl span{color:#E5384F}
.hbanner__hl .nw{color:inherit;white-space:nowrap}
.hbanner__art{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);
  mask-composite:intersect}
.hbanner__side{justify-self:end;text-align:left}
.hbanner__kick{margin:0 0 14px;font-size:20px;color:#C9D0DC}
.hbanner__cta{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 30px;
  border-radius:12px;background:#E5384F;color:#FFFFFF;font-size:20px;font-weight:600;
  text-decoration:none;white-space:nowrap;box-shadow:0 10px 28px rgba(229,56,79,.32);
  transition:background .2s ease}
.hbanner__cta:hover{background:#D62F45}
.hbanner__cta:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-width:1100px){
  .hbanner__card{padding:0 32px}
  .hbanner__hl{font-size:34px}
  .hbanner__kick{font-size:18px}
  .hbanner__cta{font-size:18px;padding:0 24px}
}
@media (max-width:860px){
  .hbanner{padding:40px 16px}
  .hbanner__card{grid-template-columns:1fr;text-align:center;padding:36px 20px 32px;gap:0;min-height:0}
  .hbanner__hl{font-size:32px}
  .hbanner__hl .nw{white-space:normal}
  .hbanner__art{margin:20px auto 4px;max-width:520px}
  .hbanner__side{justify-self:stretch;text-align:center}
  .hbanner__kick{font-size:17px;margin-bottom:12px}
  .hbanner__cta{display:flex;justify-content:center;width:100%;box-sizing:border-box;height:56px;font-size:18px}
}

/* ===== STYLE §7 — motion honors prefers-reduced-motion ===== */
@media (prefers-reduced-motion:reduce){
  .hrbs__glow,.hrbs__tw{animation:none}
  .hrbs__book{transition:none}
  .hrbs__stage:hover .hrbs__book,.hrbs__stage:focus-within .hrbs__book{transform:none}
  .hrbs__cta,.hbanner__cta{transition:none}
}

/* Squared buttons (2026-10-06, canonical-button directive): 4px corners.
   This file loads LAST on its page, so the radius override lives here. */
.hrbs__cta,
.hbanner__cta {
  border-radius: 4px;
}

/* ------------------------------------------------------------------
   2026-10-06 tuning round (user directive): ticker a touch taller with
   bigger logos; banner CTA smaller; banner wrapper edges match the
   site's section navy (#0c1728) instead of the near-black #070B14.
   home-rbs.css loads LAST on the homepage only, so these are scoped.
   ------------------------------------------------------------------ */
.marquee { padding-block: clamp(34px, 4.6vw, 58px); }
.marquee__item svg.marquee__logo,
.marquee__item img.marquee__logo { height: 28px; }
.hbanner { background: #0c1728; }
.hbanner__cta { height: 46px; padding: 0 22px; font-size: 15px; }
@media (max-width: 760px) {
  .hbanner__cta { height: 48px; font-size: 15px; }
}

/* 2026-10-06: banner heading matches the site's light section-heading treatment
   (user directive: match the font and weight of the rest of the page) -
   weight 300 + the site's tight tracking instead of the ported 600. */
.hbanner__hl { font-weight: 300; letter-spacing: -0.025em; }

/* 2026-10-06: ticker brand names a bit bigger (user directive). */
.marquee__name { font-size: clamp(16px, 1.4vw, 20px); }

/* 2026-10-06: Find My Blind Spot buttons match the Let's Build button's font
   treatment (user directive): weight 500 + 0.28em tracking + uppercase,
   matching the .btn canonical. Red fill, sizes and 4px corners stay. */
.hrbs__cta,
.hbanner__cta {
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* 2026-10-06: the bottom Let's Build matches the header/founders Let's Build
   (user directive) - outline teal like the canonical, not the solid fill. */
.final-cta__actions .btn--primary {
  background: transparent;
  border-color: #3FDCC7;
  color: #F2F5F8;
}
.final-cta__actions .btn--primary:hover {
  background-color: rgba(63, 220, 199, 0.12);
  color: #FFFFFF;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------------
   2026-10-06: smooth 50px transitions between the homepage's background
   sections (user directive). Each boundary blends the neighboring
   section's color over 50px, layered into the section's own background
   so content always paints above the fade.
   Boundaries: hero->nebula, nebula->marquee, marquee->wwd, wwd->lab,
   faq->final-cta (earth image, via its scrim layer).
   ------------------------------------------------------------------ */
.hrbs {
  background-image:
    linear-gradient(180deg, #070B14 0px, rgba(7, 11, 20, 0.85) 60px, rgba(7, 11, 20, 0) 140px),
    linear-gradient(0deg, #0c1728 0px, rgba(12, 23, 40, 0) 50px),
    url('/website-v19/bg-nebula-red.jpg');
}
.wwd {
  background-image:
    linear-gradient(180deg, #0c1728 0px, rgba(12, 23, 40, 0) 50px),
    linear-gradient(180deg, rgb(14, 26, 46) 0%, rgb(16, 29, 51) 100%);
}
.lab {
  background-image: linear-gradient(180deg, rgb(16, 29, 51) 0px, rgba(16, 29, 51, 0) 50px);
}
.final-cta__bg::after {
  background:
    linear-gradient(180deg, rgb(12, 23, 40) 0px, rgba(12, 23, 40, 0) 50px),
    linear-gradient(180deg, rgba(10, 19, 36, 0.92) 0%, rgba(10, 19, 36, 0.35) 35%, rgba(5, 11, 22, 0.15) 70%, rgba(5, 11, 22, 0.9) 100%);
}

/* ------------------------------------------------------------------
   2026-10-06: hero > nebula transition strengthened (user: it wasn't
   noticeable - both sides are near-#070B14 so the 50px flat fade read
   as a hard cut). The hero's starfield now dissolves into the shared
   base color over its bottom 100px, and the nebula image emerges over
   140px with a mid-stop instead of 50px.
   ------------------------------------------------------------------ */
.hero::after {
  /* the dark creeps up from the RBS section: tall, gentle ramp so no
     onset line is perceptible; capped by viewport so it never reaches
     the centered hero content. !important required: final.css declares
     this pseudo's background !important (and orbital.css pins its height
     at 22%) - without it both silently win the cascade. */
  height: clamp(140px, 26vh, 280px) !important;
  background: linear-gradient(180deg,
    rgba(7, 11, 20, 0) 0%,
    rgba(7, 11, 20, 0.1) 30%,
    rgba(7, 11, 20, 0.3) 56%,
    rgba(7, 11, 20, 0.6) 76%,
    rgba(7, 11, 20, 0.87) 91%,
    #070B14 100%) !important;
}

/* 2026-10-06: "Free 3-minute audit." moved under the banner's left heading
   (user directive) - kicker margin flips to top spacing. */
.hbanner__left .hbanner__kick { margin: 16px 0 0; }

/* ------------------------------------------------------------------
   2026-10-06: hero typography matched to /founders/ (user chose
   typography-only matching; the orbit scene stays). Measured deltas:
   title 62.79px at 1365 vs founders 95.55px (clamp 44/7vw/96),
   line-height 1.06 vs 1.02, color #E9EEF6 vs #F2F5F8, max-width
   1150px vs none; sub 19px/#D1DDE5/768px vs 21px/#AEBBCB/52ch.
   ------------------------------------------------------------------ */
#hero-h {
  font-size: clamp(44px, 5.8vw, 96px);
  line-height: 1.02;
  color: #F2F5F8;
  max-width: none;
}
.hero__summary {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: #AEBBCB;
  max-width: 52ch;
  margin-inline: auto;
}

/* ==================================================================
   2026-10-08: homepage large-screen design pass (local-verified,
   Jenny "ok go"). Two fixes:

   1) Hero headline split: the h1's usable width was 1068 CSS px
      (.wrap 1180 minus 2x56 padding) while the founders-matched
      clamp caps the font at 96px; "Stop experimenting with AI."
      needs 1234.5px, so past ~1460px viewport the headline split
      "Stop experimenting / with AI." with the orphan on its own
      line. Fixed px on purpose: vw terms double-scale under the
      >=1600px html zoom. 1280px clears the requirement and stays
      inside the 1600px design width.
   2) Hero height ignored viewport height: the min(92vh, 860px)
      cap bound at every desktop viewport so visual hero height =
      860px * zoom (80.6vh at 2496x1664 - next section bled into
      the first viewport; 128vh at 3440x1440). vh resolves against
      the REAL viewport inside the html zoom context, so below
      1600 the /0.82 body-zoom correction works; at >=1600 the
      (1600px/100vw) term cancels the zoom. Hero now reads ~92vh
      visual at every width (verified 1365/1920/2496/2560/3440 +
      1536@125%).
   ================================================================== */
@media (min-width: 1400px) {
  /* 2026-10-10: the 1280px headline box was wider than .wrap's content box
     (1180 - 2x56 = 1068 CSS px), so it sat left-anchored and its centered text
     drifted ~106 CSS px right of the page midline. Widen the hero inner wrap so
     the headline box fits (1400 - 2x56 = 1288) and center the box inside it. */
  .hero__inner { max-width: 1400px; }
  #hero-h { width: 1280px; max-width: none; margin-inline: auto; }
}

@media (min-width: 1600px) {
  .hero { min-height: calc(92vh * 1600px / 100vw / 0.82); }
}

/* CANDIDATE 3 (2026-10-08 8K pass) — proportional hero composition at >=1600.
   Two vh-based rules broke proportionality inside the html zoom zone (vh
   resolves against the REAL viewport, not the zoomed one):
   - .hero padding-block clamp(70px,12vh,140px)/clamp(90px,14vh,170px):
     caps bind past ~1167px/1214px viewport height, so padding stopped
     scaling (129.6->140 CSS between 1920 and 3840 while everything else
     scaled 2x). Pinned to the 1600x900 design-point values.
   - .hero__inner top:-5vh double-scales under zoom (-54 CSS at 1080p vs
     -108 CSS at 2160p = 2x the proportional -106). Pinned to -45px
     (= -5vh at the 1600x900 design point).
   Below 1600px both rules untouched. */
@media (min-width: 1600px) {
  .hero { padding-block: 108px 126px; }
  .hero__inner { top: -45px; }
}