/* Created: 10:31 11-Aug-2026 */
/* BT2 sections A — header/nav, video hero, trust bar */

/* ---------- 1. Header ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:999;padding:16px var(--pad-page)}
.nav-inner{max-width:var(--container-large);margin:0 auto;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-radius:8px;padding:12px 16px}
.nav-base{position:absolute;inset:0;border-radius:8px;background:transparent;z-index:-1;
  transition:background-color .3s ease,box-shadow .3s ease}
.nav-logo img{height:40px;width:auto}
.nav.is-inverted .nav-logo img{filter:brightness(0) invert(1)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;line-height:16px}
.nav-links a{transition:opacity .3s ease}
.nav-links a:hover{opacity:.6}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-phone{font-size:14px;line-height:16px;display:inline-flex;align-items:center;gap:6px}
/* Sticky clone — fixed, drops in via .is-on */
.nav-sticky{position:fixed;transform:translateY(-110%);opacity:0;
  transition:transform .4s ease,opacity .4s ease}
.nav-sticky .nav-base{background:var(--paper-100);box-shadow:0 0 20px #534fa026}
.nav-sticky.is-on{transform:translateY(0);opacity:1}
/* Hamburger — left of logo, frosted secondary */
.nav-burger{display:none;width:40px;height:40px;border-radius:8px;background:var(--glass);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;
  transition:transform .3s ease,opacity .3s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile menu panel */
.mobile-menu{position:fixed;inset:0;z-index:998;display:none;flex-direction:column;
  justify-content:center;padding:96px var(--pad-page) 48px;background:var(--ink-88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper-100)}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-size:28px;line-height:44px;padding:8px 0;border-bottom:1px solid var(--paper-16)}
.mobile-menu .btn{margin-top:32px;align-self:flex-start}
@media (max-width:991px){
  .nav-links,.nav-phone{display:none}
  .nav-burger{display:flex}
}

/* ---------- 2. Video hero ---------- */
.hero{position:relative;height:100dvh;max-height:1000px;min-height:560px;
  overflow:clip;display:flex;align-items:flex-end;color:var(--paper-100)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover}
.overlay-hero{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,#534fa03d 0%,#534fa000 45%,#24bbbb29 100%),
    linear-gradient(180deg,#16262e29 0%,#16262e00 30%,#16262e7a 100%)}
/* Progressive blur stack — bottom third, 9 stacked masked panels */
.pblur{position:absolute;left:0;right:0;bottom:0;height:45%;z-index:2;pointer-events:none}
.pblur i{position:absolute;inset:0}
.pblur i:nth-child(1){backdrop-filter:blur(.3px);-webkit-backdrop-filter:blur(.3px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 45%,transparent 65%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 45%,transparent 65%)}
.pblur i:nth-child(2){backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);
  -webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 32%,#000 52%,transparent 72%);
  mask-image:linear-gradient(180deg,transparent 10%,#000 32%,#000 52%,transparent 72%)}
.pblur i:nth-child(3){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 38%,#000 58%,transparent 78%);
  mask-image:linear-gradient(180deg,transparent 18%,#000 38%,#000 58%,transparent 78%)}
.pblur i:nth-child(4){backdrop-filter:blur(1.9px);-webkit-backdrop-filter:blur(1.9px);
  -webkit-mask-image:linear-gradient(180deg,transparent 26%,#000 45%,#000 64%,transparent 84%);
  mask-image:linear-gradient(180deg,transparent 26%,#000 45%,#000 64%,transparent 84%)}
.pblur i:nth-child(5){backdrop-filter:blur(3.7px);-webkit-backdrop-filter:blur(3.7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 52%,#000 70%,transparent 90%);
  mask-image:linear-gradient(180deg,transparent 34%,#000 52%,#000 70%,transparent 90%)}
.pblur i:nth-child(6){backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 42%,#000 60%,#000 76%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 42%,#000 60%,#000 76%,transparent 96%)}
.pblur i:nth-child(7){backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 68%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 50%,#000 68%,#000 84%,transparent 100%)}
.pblur i:nth-child(8){backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  -webkit-mask-image:linear-gradient(180deg,transparent 62%,#000 80%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 62%,#000 80%,#000 100%)}
.pblur i:nth-child(9){backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px);
  -webkit-mask-image:linear-gradient(180deg,transparent 76%,#000 94%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 76%,#000 94%,#000 100%)}
.hero-content{position:relative;z-index:3;width:100%;max-width:var(--content);
  margin:0 auto;padding:0 var(--pad-page) 80px}
.hero-content .h0{max-width:900px;margin:16px 0 24px}
.hero-content .b1{color:var(--paper-88)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.hero-toggle{position:absolute;right:var(--pad-page);bottom:32px;z-index:4;width:40px;height:40px;
  border-radius:100vw;background:var(--paper-16);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;
  justify-content:center;transition:background-color .3s ease}
.hero-toggle:hover{background:var(--paper-32)}
.hero-toggle .ic-play{display:none}
.hero-toggle.is-paused .ic-play{display:block}
.hero-toggle.is-paused .ic-pause{display:none}
@media (max-width:767px){
  .hero-content{padding-bottom:64px}
  .hero-ctas{margin-top:24px}
}

/* ---------- 3. Trust bar / stats ---------- */
.trust{background:var(--bg-two);padding:var(--sec-xs) 0 var(--sec-s)}
.marquee{overflow:clip;padding:24px 0;border-bottom:1px solid var(--ink-8)}
.marquee-track{display:flex;width:max-content;animation:marquee 25s linear infinite}
.marquee-group{display:flex;align-items:center;gap:64px;padding-right:64px}
.marquee-group img{height:28px;width:auto;opacity:.64;filter:grayscale(1);
  transition:opacity .3s ease,filter .3s ease,transform .3s ease}
@media (hover:hover){
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-group img:hover{opacity:1;filter:grayscale(0);transform:translateY(-2px)}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:48px}
.stat .h3{font-variant-numeric:tabular-nums}
.stat .label-2{color:var(--text-medium);margin-top:8px;display:block}
.stat-chip{grid-column:1/-1;display:inline-flex;gap:8px;align-items:center;
  color:var(--text-medium);border-top:1px solid var(--ink-8);padding-top:24px}
@media (max-width:767px){
  .stats{grid-template-columns:repeat(2,1fr);gap:24px;padding-top:32px}
  .marquee-group{gap:40px;padding-right:40px}
  .marquee-group img{height:22px}
}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}