/* Hero refinement pass — art direction only. Loaded last so it wins over the
   seven earlier sheets. Campaign first, software second. */

/* ── navigation: smaller, lighter, editorial ─────────────────────────── */
.garu-nav { padding: 18px 4vw; gap: 22px; }
.garu-nav.scrolled { padding-top: 12px; padding-bottom: 12px; }
.garu-logo { font-size: 36px; letter-spacing: -.08em; }
.nav-caption { font-size: 12px; font-weight: 400; letter-spacing: .01em; opacity: .55; margin-left: 4px; }
.garu-nav nav { gap: 26px; }
.garu-nav nav > a { font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.garu-nav nav > a:not(.button):hover { text-underline-offset: 5px; }
.garu-nav nav .account-actions { min-height: 0; gap: 18px; padding: 0; margin-left: 10px; color: inherit; background: transparent; border: 0; box-shadow: none; }
.garu-nav nav .account-actions a { min-height: 36px; padding: 0; font-size: 13px; font-weight: 500; color: inherit; opacity: .85; border-radius: 999px; }
.garu-nav nav .account-actions a:first-of-type:hover, .garu-nav nav .account-actions a:first-of-type:focus-visible { background: transparent; opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.garu-nav nav .account-actions .book-demo-link { padding: 0 14px; color: #fff; background: #0b0b0b; opacity: 1; box-shadow: none; }
.garu-nav.scrolled nav .account-actions .book-demo-link { background: #0b0b0b; color: #fff; }
.garu-nav nav .account-actions .book-demo-link:hover { transform: none; background: #262626; }

/* ── the model: larger, a little lower, luminous ────────────────────── */
/* The campaign film (garu.ai's editorial hero): a wide 1156x596 plate shown
   in a tall box, so it needs scale to fill without letterboxing, framed on
   the model's face. */
.hero-media video, .hero-media img { animation: none !important; transform: scale(1.1); transform-origin: 50% 35%; object-position: center 12% !important; }
/* localized darkening behind the copy, a soft top band for the nav, a
   bottom fade for the index — the image itself keeps its light */
.hero-wash { background:
  radial-gradient(ellipse 58% 44% at 50% 60%, rgba(12,9,10,.52) 0%, rgba(12,9,10,.30) 45%, rgba(12,9,10,0) 75%),
  linear-gradient(180deg, rgba(12,9,10,.30) 0%, rgba(12,9,10,0) 16%),
  linear-gradient(0deg, rgba(12,9,10,.55) 0%, rgba(12,9,10,0) 30%) !important; }

/* ── copy: tighter, bolder, a little higher ─────────────────────────── */
.hero-copy { width: min(1180px, 92vw); padding: clamp(96px, 13vh, 170px) 0 190px; align-items: center; justify-content: center; text-align: center; }
.hero h1 { max-width: 900px; font-size: clamp(40px, 4.35vw, 74px); line-height: .9; letter-spacing: -.055em; }
.hero .type-sans { font-weight: 700 !important; letter-spacing: -.055em; }
.hero .type-serif { font-family: Georgia, "Times New Roman", serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 1.08em; letter-spacing: -.045em; line-height: .92; margin-top: -.04em; color: rgba(255,255,255,.96); }
.hero-lede { max-width: 48ch; margin: 22px auto 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.4; letter-spacing: -.01em; font-weight: 400; color: rgba(255,255,255,.72); }

/* ── one action group ───────────────────────────────────────────────── */
.hero-actions { gap: 12px; margin-top: 30px; }
.hero-actions .button { min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; border-radius: 999px; box-shadow: none; gap: 10px; }
.hero-actions .button:hover { transform: none; }
.hero .button-light { background: #fff; color: #111; }
.hero .button-light:hover { background: #f2efe9; }
.hero .hero-button-outline { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.42); color: rgba(255,255,255,.92); backdrop-filter: none; }
.hero .hero-button-outline:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }

/* ── bottom product index ───────────────────────────────────────────── */
.scroll-cue { right: 4vw; left: 4vw; bottom: 58px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .02em; }
.scroll-cue:hover { text-decoration: none; }
.hero-index { display: flex; gap: 34px; }
.hero-index span { display: inline-flex; gap: 8px; }
.hero-index b { font-weight: 400; opacity: .55; font-variant-numeric: tabular-nums; }
.scroll-cue .discover { display: inline-flex; align-items: center; gap: 8px; }
.scroll-cue .discover i { font-style: normal; font-size: 13px; animation: none; }

/* ── phones ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .garu-nav { padding: 14px 20px; }
  .garu-logo { font-size: 32px; }
  .hero { min-height: 100svh; }
  .hero-media video, .hero-media img { transform: scale(1.04); transform-origin: 50% 20%; object-position: 50% 8% !important; }
  .hero-wash { background:
    radial-gradient(ellipse 80% 40% at 50% 66%, rgba(12,9,10,.58) 0%, rgba(12,9,10,.32) 50%, rgba(12,9,10,0) 78%),
    linear-gradient(180deg, rgba(12,9,10,.32) 0%, rgba(12,9,10,0) 18%),
    linear-gradient(0deg, rgba(12,9,10,.72) 0%, rgba(12,9,10,0) 36%) !important; }
  .hero-copy { width: 100%; padding: 140px 22px 160px; justify-content: flex-end; }
  .hero h1 { font-size: clamp(38px, 9.8vw, 48px); line-height: .92; }
  .hero-lede { font-size: 16px; max-width: 30ch; margin-top: 18px; color: rgba(255,255,255,.76); }
  .hero-actions { flex-direction: column; gap: 10px; margin-top: 26px; width: min(100%, 300px); }
  .hero-actions .button { width: 100%; min-height: 48px; font-size: 15px; }
  .scroll-cue { right: 20px; left: 20px; bottom: 30px; padding-top: 16px; font-size: 11px; }
  .hero-index { gap: 18px; }
}
@media (max-width: 420px) { .hero-index b { display: none; } .hero-index { gap: 16px; } }
/* inside the dark mobile menu the primary pill inverts to stay legible */
@media (max-width: 1100px) { .garu-nav nav .account-actions { margin: 18px 0 0; justify-content: center; gap: 22px; } .garu-nav nav .account-actions .book-demo-link { background: #fff !important; color: #111 !important; padding: 0 18px; min-height: 42px; } }
@media (prefers-reduced-motion: reduce) { .hero-media video, .hero-media img { transform: scale(1.1); } }

/* ---- Hero: SpreeAI register — Afacad 700 + Georgia, centered ---- */
@font-face { font-family: "Afacad"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/afacad-400.woff2) format("woff2"); }
@font-face { font-family: "Afacad"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/afacad-600.woff2) format("woff2"); }
@font-face { font-family: "Afacad"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/afacad-700.woff2) format("woff2"); }
.hero-copy { width: min(1180px, 92vw); padding: 153px 0 145px; align-items: center; justify-content: center; text-align: center; }
.hero h1 { max-width: 860px; font-size: clamp(34px, 3.8vw, 65px); line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.hero .type-sans { font-family: "Afacad", system-ui, sans-serif !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: -.055em; line-height: .96; color: #fff; }
.hero .type-serif { font-family: Georgia, "Times New Roman", serif !important; font-style: normal !important; font-weight: 400 !important; font-size: 1em; letter-spacing: -.06em; line-height: .94; margin-top: 0; color: #fff; }
.hero-actions { gap: 26px; margin-top: 38px; }
.hero-actions .button { font-family: "Afacad", system-ui, sans-serif; min-height: 48px; padding: 0 22px; font-size: 14px; font-weight: 650; letter-spacing: 0; }
.hero .hero-button-outline { background: rgba(5,5,5,.24); border: 1px solid rgba(255,255,255,.58); color: #fff; backdrop-filter: blur(12px); }
.scroll-cue { right: 5vw; left: 5vw; bottom: 35px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: 0; }
.hero-tagline { font-family: "Afacad", system-ui, sans-serif; font-size: 12px; }
@media (max-width: 640px) {
  .hero-copy { width: 100%; padding: 160px 22px 135px; justify-content: center; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 44px); line-height: .98; }
  .hero .type-sans { line-height: .98; }
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 24px; width: auto; }
  .hero-actions .button { width: auto; min-height: 48px; font-size: 14px; }
  .scroll-cue { right: 22px; left: 22px; bottom: 22px; }
}
/* phones: SpreeAI sits the headline lower (top at ~50% of the viewport) */
@media (max-width: 640px) { .hero-copy { padding: 300px 22px 68px; } }

/* ---- Hero video shown like garu.ai: no extra upscale, no wash on the face ---- */
.hero-media video, .hero-media img { transform: none !important; object-position: 50% 50% !important; }
.hero-wash { background: linear-gradient(rgba(0,0,0,.38) 0%, rgba(0,0,0,.10) 22%, rgba(0,0,0,0) 42%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.62) 100%) !important; }
@media (max-width: 640px) {
  .hero-media video, .hero-media img { transform: none !important; object-position: 50% 50% !important; }
  .hero-wash { background: linear-gradient(rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 20%, rgba(0,0,0,0) 38%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.78) 100%) !important; }
}
@media (prefers-reduced-motion: reduce) { .hero-media video, .hero-media img { transform: none !important; } }
/* SpreeAI's vertical "scroll to explore" on the hero's right edge */
.hero-side-cue { position: absolute; z-index: 3; right: 26px; top: 50%; transform: translateY(-40%); display: flex; flex-direction: column; align-items: center; gap: 18px; color: rgba(255,255,255,.72); text-decoration: none; }
.hero-side-cue span { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero-side-cue i { display: block; width: 1px; height: 96px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.1)); position: relative; }
.hero-side-cue i::after { content: ""; position: absolute; left: -3px; bottom: -2px; width: 7px; height: 7px; border-right: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); transform: rotate(45deg); animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
.hero-side-cue:hover { color: #fff; }
@media (max-width: 760px) { .hero-side-cue { display: none; } }
/* nav: install is the primary action, the demo is the quiet one */
.garu-nav .account-actions { display: flex; align-items: center; gap: 18px; }
.garu-nav .nav-demo-link { font-size: 14px; font-weight: 500; white-space: nowrap; }
@media (max-width: 980px) { .garu-nav .account-actions { flex-direction: column; align-items: stretch; gap: 10px; } }