/* =========================================================
   NEXUS CONSULTING — iPhone-style video experience
   Full-bleed scroll-scrubbed hero · SF Pro / Inter
   Text rides the clean left band; the clip is the page.
   ========================================================= */

:root{
  --bg:    #000003;
  --ink:   #f6f8fd;
  --ink-2: #c8ccd8;
  --mute:  #8b91a3;

  --a1: #7c8bff;   /* indigo */
  --a2: #49d6ff;   /* cyan   */
  --a3: #b46bff;   /* violet */
  --accent: #8ea0ff;
  --grad: linear-gradient(100deg, var(--a1), var(--a2) 48%, var(--a3));

  --line:   rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.18);

  /* Apple system face first, Inter as the cross-platform proxy */
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;

  --maxw: 1280px;
  --pad:  clamp(20px, 4.5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--a2); color:#04121a; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* ===================== SCROLL PROGRESS ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:rgba(255,255,255,.05);
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:var(--grad); box-shadow:0 0 14px rgba(73,214,255,.55);
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:padding .4s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-top:12px; padding-bottom:12px;
  background:rgba(0,0,3,.5);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; }
.mark{ width:28px; height:28px; }
.wordmark{ display:inline-flex; align-items:baseline; gap:6px; font-size:16px; letter-spacing:-.01em; }
.w-main{ font-weight:600; color:var(--ink); }
.w-sub{ font-weight:400; color:var(--mute); }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); padding:9px 17px; border-radius:980px;
  font-size:14.5px; font-weight:500; color:var(--ink);
  position:relative; overflow:hidden;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav-cta::before{ content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .35s var(--ease); z-index:-1; }
.nav-cta:hover{ border-color:transparent; color:#05060a; }
.nav-cta:hover::before{ opacity:1; }
.nav-cta i{ font-style:normal; transition:transform .3s var(--ease); }
.nav-cta:hover i{ transform:translateX(3px); }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px; border-radius:980px;
  font-size:15.5px; font-weight:500; letter-spacing:-.01em;
  border:1px solid var(--line-2); color:var(--ink);
  position:relative; overflow:hidden; cursor:pointer; will-change:transform;
  transition:transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.btn svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn.primary{ color:#05060a; border-color:transparent; }
.btn.primary::before{ content:""; position:absolute; inset:0; background:var(--grad); z-index:-1; transition:filter .35s var(--ease); }
.btn.primary:hover::before{ filter:brightness(1.1); }
.btn.primary:hover svg{ transform:translateX(4px); }
.btn.ghost{ color:var(--ink); background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn.ghost:hover{ border-color:var(--line-2); background:rgba(255,255,255,.1); }
.btn.lg{ padding:16px 28px; font-size:16px; }

/* ===================== CINEMATIC ===================== */
.cine{ position:relative; z-index:1; }
.cine-stage{
  position:relative; min-height:100svh;
  padding:clamp(90px,13vh,140px) var(--pad);
  overflow:hidden;
}
.anim-ready .cine-stage{ display:flex; align-items:center; height:100svh; min-height:0; }

.cine-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; background:#000;
}

/* Lighter, left-weighted scrim: darkens only the band the copy lives in,
   leaving the right ~30% clear so the clip breathes. Opacity is driven in
   JS — it rises when text is up and recedes for the clean spectacle beats. */
.cine-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  transition:opacity .55s var(--ease);
  background:
    linear-gradient(90deg, rgba(0,0,3,.9) 0%, rgba(0,0,3,.55) 24%, rgba(0,0,3,.08) 48%, transparent 68%),
    linear-gradient(180deg, rgba(0,0,3,.42) 0%, transparent 18%, transparent 72%, rgba(0,0,3,.5) 100%);
}

/* default (no-JS / reduced-motion): panels stack in normal flow */
.cine-panel{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; }
.cine-panel + .cine-panel{ margin-top:clamp(56px,9vh,110px); }

/* animated mode: panels become cross-fading overlays in the left band */
.anim-ready .cine-panel{
  position:absolute; inset:0; margin:0; opacity:0;
  display:flex; align-items:center; justify-content:flex-start;
  padding:0 var(--pad);
  will-change:opacity, transform;
}
.anim-ready .cine-panel + .cine-panel{ margin-top:0; }
.anim-ready .cine-panel.is-hero{ opacity:1; } /* visible before JS scrub takes over */

/* the copy column stays narrow so it never reaches the centred iPhone.
   the hero can run a touch wider — its frames keep the phone on the right. */
.cine-wrap{ width:100%; max-width:min(33vw, 500px); }
.anim-ready .cine-panel.is-hero .cine-wrap{ max-width:min(46vw, 640px); }

/* keep copy legible over moving video */
.cine-eyebrow,.cine-title,.cine-sub,.cine-h2,.clbl,.cine-mail{
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 50px rgba(0,0,0,.4);
}

.cine-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  font-size:15px; font-weight:600; letter-spacing:0;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ping{ width:7px; height:7px; border-radius:50%; background:var(--a2); box-shadow:0 0 10px var(--a2); animation:pulse 2.2s var(--ease) infinite; flex:none; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.65);} }

.hl-grad{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.cine-title{
  font-weight:600;
  font-size:clamp(44px, 6vw, 92px); line-height:1.03; letter-spacing:-.035em;
  margin:0;
}
.cine-title .line{ display:block; }
.cine-sub{
  max-width:34ch; margin:22px 0 0;
  font-size:clamp(16px,1.25vw,19px); font-weight:400; line-height:1.5; color:var(--ink-2);
}
.cine-panel.is-hero .cine-sub{ max-width:42ch; }

.cine-h2{ font-weight:600; font-size:clamp(34px,4.4vw,68px); line-height:1.04; letter-spacing:-.03em; margin:0; }

.cine-stats{ display:flex; flex-direction:column; gap:clamp(20px,3vh,34px); margin-top:4px; }
.cstat{ display:flex; flex-direction:column; gap:6px; }
.cnum{
  font-weight:600; font-size:clamp(50px,6.5vw,92px); line-height:.95; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 4px 22px rgba(3,4,9,.5));
}
.clbl{ font-size:15px; color:var(--ink-2); letter-spacing:-.01em; }

.cine-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.cine-mail{
  display:inline-block; margin-top:18px;
  font-size:14.5px; color:var(--mute);
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.cine-mail:hover{ color:var(--a2); border-bottom-color:var(--a2); }

.scroll-cue{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:40px; }
.sc-line{ width:1.5px; height:42px; background:linear-gradient(var(--a2), transparent); position:relative; overflow:hidden; }
.sc-line::after{ content:""; position:absolute; top:0; left:0; right:0; height:12px; background:var(--ink); animation:scroll-dot 1.9s var(--ease) infinite; }
@keyframes scroll-dot{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(330%);} }
.sc-txt{ font-size:12px; letter-spacing:.04em; color:var(--mute); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 760px){
  body{ font-size:16px; }
  /* the cover-cropped video fills a phone's width — drop copy into a centred
     bottom band over a stronger bottom scrim */
  .anim-ready .cine-panel{
    align-items:flex-end; justify-content:center; text-align:center;
    padding-bottom:clamp(78px,15vh,130px);
  }
  .cine-wrap,
  .anim-ready .cine-panel.is-hero .cine-wrap{ max-width:520px; margin:0 auto; }
  .cine-sub, .cine-panel.is-hero .cine-sub{ margin-left:auto; margin-right:auto; }
  .cine-eyebrow{ justify-content:center; }
  .cine-stats, .cstat{ align-items:center; }
  .cine-cta{ justify-content:center; }
  .scroll-cue{ align-items:center; }
  .cine-scrim{
    background:linear-gradient(180deg, rgba(0,0,3,.5) 0%, transparent 26%, transparent 46%, rgba(0,0,3,.92) 100%);
  }
}
@media (max-width: 420px){
  .cine-title{ font-size:clamp(40px,12vw,58px); }
  .btn.lg{ padding:15px 22px; font-size:15px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}