/* ============================================================
   Rework — HERO BACKGROUND VIDEO (sorce.jobs-style).
   Loaded last. Purely additive + graceful: with no video file
   present, .has-video is never set, so the existing hero shows
   unchanged. Drop hero.webm / hero.mp4 / hero-poster.jpg into the
   site folder to activate (see README).
   ============================================================ */

.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:0; pointer-events:none;
  background:var(--bg);
  transition:opacity 1s var(--ease);
}
.has-video .hero-video{opacity:1;}

/* darkening veil keeps headline + CTA readable over footage */
.hero-video-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1s var(--ease);
  background:
    linear-gradient(90deg, rgba(10,10,13,.62) 0%, rgba(10,10,13,.24) 52%, rgba(10,10,13,.05) 100%),
    linear-gradient(180deg, rgba(10,10,13,.5) 0%, rgba(10,10,13,.26) 42%, rgba(10,10,13,.8) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(10,10,13,.5) 100%);
}
.has-video .hero-video-veil{opacity:1;}

/* accessibility: respect reduced-motion — keep the static hero */
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
}

/* mobile portrait: the subject (phone with the app) sits left-of-centre in the
   16:9 footage, so the default centre cover-crop pushes it off-screen. Recentre
   the crop onto the phone. */
@media(max-width:760px){
  .hero-video{object-position:35% center;}
}

/* ---------- creative tagline over the video (sorce.jobs vibe) ---------- */
.hero-tagline{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:12px;
  font-family:'Archivo', var(--font-display), sans-serif; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
  font-size:clamp(24px, 3.4vw, 46px); color:#fff;
  text-shadow:0 2px 28px rgba(0,0,0,.5);
}
.hero-tagline .dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 4px rgba(var(--glow-1),.25);
  animation:pulse 2.2s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce){ .hero-tagline .dot{animation:none;} }
/* audience posyl — the punchy second line under the slogan */
.hero-posyl{
  display:block; margin:0 0 22px;
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(16px, 1.8vw, 23px); color:var(--accent);
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
@media(max-width:760px){
  .hero-tagline{font-size:clamp(19px,5.6vw,30px); margin-bottom:9px; gap:9px;}
  .hero-tagline .dot{width:8px; height:8px;}
  .hero-posyl{font-size:clamp(14px,4vw,18px); margin-bottom:18px;}
}

/* ============================================================
   WELCOME INTRO — full-screen video + centered slogan (sorce.jobs)
   ============================================================ */
.intro{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  /* poster as painted fallback: the video fades in above it, so the
     first frame is never a black screen even if the stream stalls */
  background:
    linear-gradient(180deg, rgba(10,10,13,.55) 0%, rgba(10,10,13,.32) 45%, rgba(10,10,13,.72) 100%),
    url(hero-poster.jpg) center/cover no-repeat,
    var(--bg);
}
@media(max-width:760px){
  .intro{background-position:center, 35% center;}
}
.intro .hero-video-veil{
  background:
    linear-gradient(180deg, rgba(10,10,13,.55) 0%, rgba(10,10,13,.30) 45%, rgba(10,10,13,.70) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 34%, rgba(10,10,13,.50) 100%);
}
.intro-inner{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:30px; padding:90px 24px 0; max-width:1100px;
}
.intro-title{
  font-family:var(--font-display), sans-serif; font-weight:600;
  text-transform:none; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(34px, 6vw, 96px); color:#fff; max-width:17ch;
  text-wrap:balance; text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.intro-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.intro-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px;
}
.intro-scroll::after{
  content:""; position:absolute; left:50%; top:8px; width:4px; height:8px;
  background:#fff; border-radius:2px; transform:translateX(-50%);
  animation:introcue 1.6s var(--ease) infinite;
}
@keyframes introcue{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}}
@media (prefers-reduced-motion: reduce){.intro-scroll::after{animation:none;}}
@media(max-width:760px){
  .intro-inner{gap:22px; padding:72px 22px 0;}
  .intro-title{font-size:clamp(28px, 8.4vw, 46px); line-height:1.02; max-width:18ch;}
  .intro-cta .btn{height:50px; padding:0 24px;}
  .intro-scroll{bottom:22px;}
}