/* ============================================================
   Sequonix landing — BLACK theme overrides + velorix video hero
   Loaded AFTER refresh.css so these win.
   ============================================================ */

/* ---------- BLACK THEME (override refresh tokens) ---------- */
:root {
  --bone:        #000000;   /* page canvas — pure black */
  --paper:       #111111;   /* elevated surface (cards) */
  --paper-solid: #141414;   /* opaque elevated surface */
  --bone-deep:   #0a0a0a;   /* subtle recess */
  --ink:         #ffffff;   /* primary text */
  --ink-soft:    rgba(255,255,255,0.70);
  --ink-faint:   rgba(255,255,255,0.45);
  --line:        rgba(255,255,255,0.10);

  /* accent — purple, matched to the flower in the hero video */
  --emerald:        #a855f7;
  --emerald-deep:   #7c3aed;
  --emerald-bright: #c084fc;
  --emerald-tint:   rgba(192,132,252,.14);

  --night:       #0d0d0d;
  --night-soft:  #121212;
  --night-line:  rgba(255,255,255,0.10);
  --cream-on-dark:#ffffff;
  --faint-on-dark:rgba(255,255,255,0.55);
}

/* kill the warm paper-grain overlay — keep it pure black */
body::before { display: none; }

body { background: #000; }

/* dark feature cards tinted to the purple accent on black */
.hpanel.is-feature, .card.feature { background: #1a0f2e; border-color: rgba(168,85,247,.30); }
.card.feature::after { background: radial-gradient(120% 120% at 100% 0%, rgba(168,85,247,.22), transparent 60%); }
.cta-band { background: #0c0c0c; border-color: rgba(255,255,255,0.10); }
.stat-box { background: #0e0e0e; }

/* ============================================================
   VELORIX VIDEO HERO  (namespaced .vx-* to avoid collisions)
   ============================================================ */
.vx-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: "Inter", sans-serif;
}

/* background video — full-bleed, edge to edge; seamless boomerang loop.
   Promoted to its own GPU layer so scrolling the hero is a cheap composite. */
.bg-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* frozen still over the video; cropped identically (same source aspect).
   The radial hole in the centre reveals the looping video (flower),
   while the opaque sides keep the two hands perfectly still.
   Starts hidden so the hands' fly-in intro plays, then fades in to freeze them. */
.hero-freeze {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(ellipse 14% 28% at 51.5% 71%, transparent 50%, #000 85%);
          mask-image: radial-gradient(ellipse 14% 28% at 51.5% 71%, transparent 50%, #000 85%);
  /* rasterise the masked image once and move it as a layer (no per-frame mask repaint) */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-freeze.show { opacity: 1; }

/* ---------- white pill button ---------- */
.btn-white {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; color: #000;
  font-family: "Inter", sans-serif; font-size: .875rem; font-weight: 500;
  padding: .5rem 1.25rem; border-radius: 999px;
  transition: opacity .3s cubic-bezier(0.23,1,0.32,1);
}
.btn-white:hover { opacity: .8; }

/* ---------- NAV ---------- */
.vx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
}
.vx-brand {
  color: #fff; font-family: "Inter", sans-serif;
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
  position: relative; z-index: 60;
}
.nav-pill {
  display: flex; align-items: center; gap: .25rem;
  background: #0C0C0C; border-radius: 999px; padding: .375rem .5rem;
}
.nav-pill a {
  color: rgba(255,255,255,0.8); font-family: "Inter", sans-serif; font-size: .875rem;
  padding: .375rem 1rem; border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.nav-pill a:hover { color: #fff; background-color: rgba(255,255,255,0.1); }
.nav-right { display: flex; align-items: center; gap: .5rem; }

/* ---------- hamburger (Menu <-> X crossfade) ---------- */
.vx-burger {
  position: relative; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background-color: transparent;
  transition: background-color .3s cubic-bezier(0.23,1,0.32,1); z-index: 60;
}
.vx-burger .icon {
  position: absolute; display: flex;
  transition: opacity .3s cubic-bezier(0.23,1,0.32,1), transform .3s cubic-bezier(0.23,1,0.32,1);
}
.icon-menu { opacity: 1; transform: rotate(0deg) scale(1); }
.icon-x    { opacity: 0; transform: rotate(90deg) scale(0.5); }
body.menu-open .vx-burger { background-color: #1a1a1a; }
body.menu-open .icon-menu { opacity: 0; transform: rotate(-90deg) scale(0.5); }
body.menu-open .icon-x    { opacity: 1; transform: rotate(0deg) scale(1); }

/* ---------- mobile menu ---------- */
.m-backdrop {
  position: fixed; inset: 0; z-index: 30;
  background-color: rgba(0,0,0,0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background-color .5s cubic-bezier(0.23,1,0.32,1), backdrop-filter .5s cubic-bezier(0.23,1,0.32,1);
}
body.menu-open .m-backdrop {
  background-color: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  pointer-events: auto;
}
.m-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  overflow: hidden; max-height: 0;
  transition: max-height .5s cubic-bezier(0.23,1,0.32,1);
}
body.menu-open .m-menu { max-height: 460px; }
.m-menu-inner {
  padding: 5rem 1.25rem 1.5rem;
  background-color: rgba(8,8,8,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.m-links { display: flex; flex-direction: column; gap: .25rem; }
.m-links a {
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,0.7); font-family: "Inter", sans-serif; font-size: 1rem;
  padding: .75rem; border-radius: 14px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .4s cubic-bezier(0.23,1,0.32,1), transform .4s cubic-bezier(0.23,1,0.32,1), color .2s, background-color .2s;
}
.m-links a:hover { color: #fff; background-color: rgba(255,255,255,0.05); }
.m-links a .arr { opacity: 0; transform: translateX(-4px); color: rgba(255,255,255,0.4); transition: opacity .2s, transform .2s; }
.m-links a:hover .arr { opacity: .4; transform: translateX(0); }
body.menu-open .m-links a { opacity: 1; transform: translateY(0); }
body.menu-open .m-links a:nth-child(1) { transition-delay: 80ms; }
body.menu-open .m-links a:nth-child(2) { transition-delay: 130ms; }
body.menu-open .m-links a:nth-child(3) { transition-delay: 180ms; }
body.menu-open .m-links a:nth-child(4) { transition-delay: 230ms; }
body.menu-open .m-links a:nth-child(5) { transition-delay: 280ms; }
.m-cta {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .4s cubic-bezier(0.23,1,0.32,1), transform .4s cubic-bezier(0.23,1,0.32,1);
}
body.menu-open .m-cta { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
.m-cta .btn-white { width: 100%; justify-content: center; padding: .75rem; border-radius: 999px; }

/* ---------- hero content ---------- */
.vx-hero-content {
  position: relative; z-index: 20;
  display: flex; flex-direction: column; align-items: center;
  padding: 90px 1.25rem 0;
}
.vx-hero-content h1 {
  color: #fff; font-family: "Inter", sans-serif; font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.12;
  letter-spacing: -0.02em; max-width: 52rem; margin: 0;
}
.vx-hero-content .sub {
  margin-top: 1.25rem; color: rgba(255,255,255,0.6);
  font-family: 'Courier New', Courier, monospace;
  font-size: .9rem; line-height: 1.6; letter-spacing: 0.01em; max-width: 30rem;
}
.hero-btn { margin-top: 1.75rem; padding: .625rem 1.25rem; }
.hero-btn .arr { transition: transform .2s cubic-bezier(0.23,1,0.32,1); }
.hero-btn:hover .arr { transform: translateX(2px); }

/* scroll-progress accent on black */
.scroll-progress { background: var(--emerald-bright); }

/* eyebrow labels (Why Sequonix / How we work / Our promise …) were tiny on big screens */
.eyebrow { font-size: clamp(.9rem, .78rem + .35vw, 1.15rem); }

/* Process section: make the big watermark number actually visible on black */
.scrolly-count { color: rgba(255,255,255,0.10); }

/* bigger number on the service cards */
.hpanel .c-num { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }

/* ---- Services cards: rich hover (panel transform is GSAP-driven, so animate the rest) ---- */
.hpanel {
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease), background-color .4s var(--ease);
}
.hpanel .hp-ico { transition: opacity .45s var(--ease); }
.hpanel .hp-ico svg { transition: transform .55s var(--ease); }
.hpanel h3 { transition: color .3s var(--ease); }
.hpanel .c-num { transition: color .3s var(--ease), letter-spacing .35s var(--ease); }
.hpanel:hover {
  border-color: color-mix(in srgb, var(--emerald) 60%, var(--line));
  background-color: #150b27;
  box-shadow: 0 22px 55px -18px rgba(168,85,247,.60), inset 0 0 0 1px rgba(168,85,247,.22);
}
.hpanel.is-feature:hover { background-color: #1f1233; }
.hpanel:hover h3 { color: var(--emerald-bright); }
.hpanel:hover .c-num { letter-spacing: .04em; }
.hpanel:hover .hp-ico { opacity: .20; }
.hpanel:hover .hp-ico svg { transform: scale(1.12) rotate(-5deg); }
.hpanel:hover .c-link { color: var(--emerald-bright); }

/* ============================================================
   Process / "How we work" — keep ALL text inside the viewport
   on any device by sizing against viewport WIDTH *and* HEIGHT.
   ============================================================ */
.scrolly-pin {
  height: 100vh;
  height: 100svh;            /* accounts for mobile browser UI bars */
  padding: 13vh 1.25rem 8vh; /* breathing room, content never hugs edges */
  box-sizing: border-box;
}
.scrolly-inner { width: 100%; max-width: 1000px; }
.scrolly-prog { margin-bottom: clamp(1rem, 3vh, 2.5rem); }
.scrolly-steps { min-height: clamp(7.5em, 26vh, 10em); }
.scrolly-step { gap: clamp(.5rem, 1.6vh, 1rem); justify-content: center; }
/* min() caps growth by the smaller of width/height so it can't overflow a short screen */
.scrolly-step .k {
  font-size: clamp(1.7rem, min(7vw, 8.5vh), 5rem);
  line-height: 1.05;
}
.scrolly-step p {
  font-size: clamp(.95rem, min(2.6vw, 2.6vh), 1.35rem);
  max-width: 44ch; line-height: 1.5;
}
.scrolly-count {
  font-size: clamp(9rem, 42vw, 34rem);
  top: 50%;
  transform: translate(-50%, -50%);  /* center behind the words, fills the lower half */
}

/* ---------- responsive ---------- */
@media (min-width: 1024px) {
  .vx-nav { padding: 1.5rem 2.5rem; }
  .vx-burger { display: none; }
  .vx-hero-content { padding-top: 120px; }
  .vx-hero-content .sub { font-size: 1rem; }
  .brk { display: block; }
}
@media (max-width: 1023px) {
  .nav-pill { display: none; }
  .nav-cta  { display: none; }
  .brk { display: none; }
}

/* Portrait phones: a full-bleed 16:9 video would crop the hands off the sides.
   Fit the whole frame into a centred band so both hands + flower stay visible
   (object-fit cover on a box matching the video aspect = no crop, mask still aligns). */
@media (max-width: 1023px) and (orientation: portrait) {
  .bg-video, .hero-freeze {
    inset: auto; top: 56%; left: 0; right: 0;
    width: 100%; height: auto; aspect-ratio: 3828 / 2164;
    transform: translate(0, -50%) translateZ(0);
  }
}