/* =========================================================
   FIREFLY LIGHTS — ELITE THEME (FULL FILE)
   Clean consolidated version
========================================================= */

:root{
  --black:#000;
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --hair:rgba(255,255,255,.16);

  --cyan:#1FE0FF;
  --pink:#FF2EDC;
  --purple:#8B5CFF;

  --radius:18px;
  --shadow:0 30px 90px rgba(0,0,0,.85);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   TYPE
========================================================= */
.eyebrow{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.75);
}

.h2{
  margin:.35rem 0;
  font-size:clamp(28px,3.8vw,44px);
  font-weight:900;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.h3{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
}

.copy{
  color:var(--muted);
  line-height:1.75;
  font-size:16px;
}

.accent{
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 20px;
  border-radius:999px;
  font-weight:900;
  border:1px solid var(--hair);
  transition:.18s ease;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
  background:transparent;
  color:#fff;
}

.btn__sub{
  display:block;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:none;
  opacity:.85;
}

.btn--primary{
  background:#fff;
  color:#111;
  border-color:transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 22px 70px rgba(0,0,0,.75);
}

.btn--ghost{
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.btn--full{ width:100%; }

.btn:hover{ transform:translateY(-1px); }

.btn--primary:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 26px 90px rgba(0,0,0,.85),
    0 0 34px rgba(31,224,255,.35),
    0 0 34px rgba(255,46,220,.22);
}

.btn--ghost:hover{
  background:rgba(0,0,0,.65);
  border-color:rgba(31,224,255,.45);
}

/* =========================================================
   CARD / GLASS
========================================================= */
.card,
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* =========================================================
   HEADER
========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(0,0,0,.65);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

/* brand lockup */
.brand{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:240px;
}

.brand__bug{
  height:48px;
  width:auto;
  flex:0 0 auto;
  transition:.25s ease;
  filter:
    drop-shadow(0 0 12px rgba(31,224,255,.35))
    drop-shadow(0 0 14px rgba(255,46,220,.20));
}

.brand__nameImg{
  height:52px;
  width:auto;
  display:block;
  flex:0 1 auto;
  transition:.25s ease;
  filter:
    drop-shadow(0 0 16px rgba(31,224,255,.30))
    drop-shadow(0 0 16px rgba(255,46,220,.22));
}

.brand:hover .brand__bug,
.brand:hover .brand__nameImg{
  transform:translateY(-1px);
  filter:
    drop-shadow(0 0 20px rgba(31,224,255,.55))
    drop-shadow(0 0 24px rgba(255,46,220,.35));
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav a{
  padding:10px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.82);
  font-weight:700;
  white-space:nowrap;
}

.nav a:hover{ color:#fff; }

.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.hamburger span{
  display:block;
  height:2px;
  background:#fff;
  margin:6px 10px;
  border-radius:2px;
  opacity:.9;
}

/* mobile drawer */
.nav--mobile{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  padding:14px 20px 18px;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:grid;
  gap:10px;
}

.nav--mobile[hidden]{ display:none !important; }

.nav--mobile a:not(.btn){
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}

@media (max-width:920px){
  .nav--desktop{ display:none !important; }
  .hamburger{ display:block !important; }
  .brand__bug{ height:42px; }
  .brand__nameImg{ height:44px; }
}

@media (min-width:921px){
  .nav--desktop{ display:flex !important; }
  .hamburger{ display:none !important; }
  .nav--mobile{ display:none !important; }
}

@media (max-width:576px){
  .brand__bug{ height:34px; }
  .brand__nameImg{ height:36px; }
}

/* =========================================================
   HERO — BASE
========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:72vh;
  max-height:760px;
  z-index:1;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 520px at 20% 20%, rgba(31,224,255,.10), transparent 60%),
    radial-gradient(1100px 520px at 80% 30%, rgba(255,46,220,.08), transparent 55%),
    url('/assets/img/hero.jpg');
  background-size:cover;
  background-position:center;
  filter:contrast(1.08) brightness(.80);
  transform:scale(1.03);
}

.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  filter:contrast(1.12) brightness(.92) saturate(1.05);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.78) 65%, rgba(0,0,0,.92));
}

.hero__lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.45;
  background:
    linear-gradient(120deg, transparent 10%, rgba(31,224,255,.65), transparent 60%),
    linear-gradient(300deg, transparent 15%, rgba(255,46,220,.55), transparent 65%);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:260px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 25%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,1) 100%
  );
}

.hero__grid{
  position:relative;
  z-index:3;
  padding-top:120px;
  padding-bottom:70px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
  align-items:start;
}

.hero__title{
  font-size:clamp(40px,6vw,74px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.02;
  margin:.55rem 0 .6rem;
  text-transform:uppercase;
}

.lead{
  color:var(--muted);
  line-height:1.75;
  max-width:65ch;
}

.panel--hero{
  padding:20px;
  align-self:start;
}

.panel__kicker{
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.75);
}

.panel__h{
  margin:.5rem 0 .4rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:22px;
}

.panel__p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.panel__cta{
  display:grid;
  gap:12px;
  margin-top:14px;
}

/* elite desktop */
@media (min-width:769px){
  .hero{
    min-height:84vh !important;
    max-height:920px !important;
  }

  .hero__video,
  .hero__bg{
    transform:scale(1.035) !important;
    filter:contrast(1.1) brightness(.88) saturate(1.04);
  }

  .hero__overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.18) 24%,
        rgba(0,0,0,.52) 58%,
        rgba(0,0,0,.88) 100%
      ) !important;
  }

  .hero__lines{
    opacity:.34 !important;
  }

  .hero__grid{
    grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr) !important;
    align-items:end !important;
    gap:28px !important;
    padding-top:132px !important;
    padding-bottom:42px !important;
  }

  .hero__copy{
    max-width:760px;
  }

  .hero__copy .eyebrow{
    font-size:11px !important;
    letter-spacing:.22em !important;
    color:rgba(255,255,255,.78) !important;
    margin-bottom:10px !important;
  }

  .hero__title{
    font-size:clamp(56px,6.2vw,92px) !important;
    line-height:.96 !important;
    letter-spacing:-.045em !important;
    margin:0 0 16px !important;
    max-width:9ch;
    text-wrap:balance;
    text-shadow:0 14px 48px rgba(0,0,0,.30);
  }

  .hero__copy .lead{
    display:block !important;
    max-width:62ch !important;
    font-size:18px !important;
    line-height:1.8 !important;
    color:rgba(255,255,255,.76) !important;
    margin:0 !important;
  }

  .panel--hero{
    padding:22px !important;
    border-radius:22px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      0 30px 90px rgba(0,0,0,.68),
      inset 0 0 0 1px rgba(255,255,255,.03),
      0 0 26px rgba(31,224,255,.08),
      0 0 26px rgba(255,46,220,.05) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .panel__kicker{
    font-size:11px !important;
    letter-spacing:.18em !important;
    color:rgba(255,255,255,.72) !important;
  }

  .panel__h{
    font-size:28px !important;
    line-height:1.02 !important;
    margin:8px 0 8px !important;
  }

  .panel__p{
    font-size:15px !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.74) !important;
    margin:0 !important;
  }

  .panel__cta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:16px !important;
  }

  .panel__cta .btn{
    min-height:52px !important;
    padding:14px 18px !important;
    border-radius:16px !important;
    font-size:12px !important;
    letter-spacing:.12em !important;
  }

  .panel__cta .btn--primary{
    box-shadow:
      0 18px 44px rgba(0,0,0,.46),
      0 0 18px rgba(31,224,255,.14),
      0 0 18px rgba(255,46,220,.08) !important;
  }

  .panel__cta .btn:hover{
    transform:translateY(-2px);
  }
}

@media (min-width:1200px){
  .hero__grid{
    gap:34px !important;
    padding-top:144px !important;
    padding-bottom:46px !important;
  }

  .hero__title{
    max-width:8.6ch;
  }

  .panel--hero{
    padding:24px !important;
  }

  .panel__h{
    font-size:30px !important;
  }

  .panel__p{
    font-size:15.5px !important;
  }
}

/* elite mobile */
@media (max-width:768px){
  .hero{
    min-height:58svh !important;
    max-height:none !important;
  }

  .hero::after{
    height:160px !important;
  }

  .hero__video,
  .hero__bg{
    transform:scale(1.01) !important;
    filter:contrast(1.08) brightness(.82) saturate(1.02);
  }

  .hero__overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.34) 34%,
        rgba(0,0,0,.68) 68%,
        rgba(0,0,0,.90) 100%
      ) !important;
  }

  .hero__lines{
    opacity:.24 !important;
  }

  .hero__grid{
    grid-template-columns:1fr !important;
    align-items:end !important;
    gap:14px !important;
    padding-top:76px !important;
    padding-bottom:20px !important;
  }

  .hero__copy{
    max-width:100% !important;
  }

  .hero__copy .eyebrow{
    font-size:10px !important;
    letter-spacing:.18em !important;
    color:rgba(255,255,255,.78) !important;
    margin-bottom:6px !important;
  }

  .hero__title{
    font-size:clamp(34px,9.6vw,48px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
    margin:0 !important;
    max-width:8.5ch;
    text-wrap:balance;
    text-shadow:0 8px 32px rgba(0,0,0,.30);
  }

  .hero__copy .lead{
    display:none !important;
  }

  .panel--hero{
    padding:14px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:
      0 24px 70px rgba(0,0,0,.62),
      inset 0 0 0 1px rgba(255,255,255,.03) !important;
  }

  .panel__kicker{
    font-size:10px !important;
    letter-spacing:.18em !important;
    color:rgba(255,255,255,.74) !important;
  }

  .panel__h{
    font-size:18px !important;
    line-height:1.05 !important;
    margin:6px 0 6px !important;
  }

  .panel__p{
    font-size:13px !important;
    line-height:1.45 !important;
    color:rgba(255,255,255,.74) !important;
  }

  .panel__cta{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-top:12px !important;
  }

  .panel__cta .btn{
    width:100% !important;
    min-height:46px !important;
    padding:12px 12px !important;
    border-radius:14px !important;
    font-size:11px !important;
    letter-spacing:.10em !important;
  }

  .panel__cta .btn--primary{
    box-shadow:
      0 14px 34px rgba(0,0,0,.42),
      0 0 18px rgba(31,224,255,.14),
      0 0 18px rgba(255,46,220,.08) !important;
  }

  .wrap.hero__grid > .panel--hero{
    margin-top:2px !important;
  }
}

@media (max-width:480px){
  .hero{
    min-height:54svh !important;
  }

  .hero__grid{
    padding-top:72px !important;
    padding-bottom:18px !important;
    gap:12px !important;
  }

  .hero__title{
    font-size:clamp(30px,10.5vw,42px) !important;
    max-width:9ch;
  }

  .panel--hero{
    padding:12px !important;
    border-radius:16px !important;
  }

  .panel__h{
    font-size:17px !important;
  }

  .panel__p{
    font-size:12.5px !important;
  }

  .panel__cta{
    grid-template-columns:1fr !important;
  }

  .panel__cta .btn{
    min-height:44px !important;
    font-size:11px !important;
  }
}

/* hero animation */
.hero__copy,
.panel--hero,
.heroBadgesSection{
  animation:heroEliteRise .8s cubic-bezier(.22,1,.36,1) both;
}

.panel--hero{ animation-delay:.08s; }
.heroBadgesSection{ animation-delay:.14s; }

@keyframes heroEliteRise{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  .btn,
  .hoverImg,
  .hero__copy,
  .panel--hero,
  .heroBadgesSection{
    transition:none !important;
    animation:none !important;
  }
}



/* =========================================================
   SECTIONS / LAYOUT
========================================================= */
.section{
  padding:110px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.section--alt{
  background:#050505;
}

.sectionHead{
  max-width:860px;
}

.sectionCta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.grid3{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.grid2{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.card{ padding:18px; }

/* stats */
.stats{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.statNum{
  font-weight:900;
  font-size:28px;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--cyan),var(--pink),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.statLabel{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  line-height:1.55;
}

/* =========================================================
   HOVER GRID PRODUCTS
========================================================= */
.hoverGrid{
  margin-top:26px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.hoverStage{
  position:relative;
  min-height:520px;
  overflow:hidden;
  padding:0;
}

.hoverImg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:contrast(1.06) brightness(.80);
  opacity:0;
  transform:scale(1.02);
  transition:opacity .55s ease, transform .7s ease;
}

.hoverImg.is-active{
  opacity:1;
  transform:scale(1);
}

.hoverStage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.70) 60%, rgba(0,0,0,.92));
  pointer-events:none;
  z-index:1;
}

.rail{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 10px rgba(31,224,255,.45), 0 0 18px rgba(255,46,220,.28);
}

.rail--top{ top:0; }
.rail--bottom{ bottom:0; }

.hoverCaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:4;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hoverCaptionTitle{
  margin-top:8px;
  font-weight:900;
  letter-spacing:-.02em;
  text-transform:uppercase;
  font-size:18px;
}

.hoverList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hoverItem{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hoverItem:hover{ transform:translateY(-1px); }

.hoverItem.is-active{
  border-color:rgba(31,224,255,.42);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 26px rgba(31,224,255,.18),
    0 0 26px rgba(255,46,220,.12);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:7px;
  background:var(--cyan);
  box-shadow:0 0 22px rgba(31,224,255,.65);
  flex:0 0 auto;
}

.dot--pink{
  background:var(--pink);
  box-shadow:0 0 22px rgba(255,46,220,.55);
}

.hoverText{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hoverTitle{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

.hoverSub{
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   DAY vs NIGHT — ELITE INSANE
========================================================= */
.ff-compare{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:420px;
  height:clamp(360px, 44vw, 560px);
  background:#000;
  isolation:isolate;
  touch-action:none;
  user-select:none;
  --compare-pct:50;
}

.ff-compare img{
  max-width:none !important;
}

.ff-compare-img{
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.ff-compare-day,
.ff-compare-night{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  margin:0;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.001);
}

.ff-compare-day{
  z-index:1;
  filter:saturate(1.02) contrast(1.02);
}

.ff-compare-overlay{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100%;
  overflow:hidden;
  z-index:2;
  clip-path:inset(0 calc(100% - (var(--compare-pct) * 1%)) 0 0);
  will-change:clip-path;
}

.ff-compare-night{
  z-index:1;
  filter:saturate(1.08) contrast(1.04);
}

.ff-compare-overlay::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:-1px;
  width:56px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 12%,
      rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
  opacity:.75;
}

.ff-compare-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--compare-pct) * 1%);
  width:2px;
  transform:translateX(-1px);
  z-index:4;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.95) 18%,
    rgba(255,255,255,.95) 82%,
    rgba(255,255,255,0) 100%
  );
  box-shadow:
    0 0 18px rgba(31,224,255,.28),
    0 0 18px rgba(255,46,220,.16),
    0 0 34px rgba(255,255,255,.18);
}

.ff-compare-knob{
  position:absolute;
  top:50%;
  left:50%;
  width:64px;
  height:64px;
  transform:translate(-50%, -50%);
  border-radius:999px;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(20,24,40,.98), rgba(5,7,14,.98));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 20px rgba(31,224,255,.18),
    0 0 20px rgba(255,46,220,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.ff-compare-knob::before,
.ff-compare-knob::after{
  content:"";
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  opacity:.95;
}

.ff-compare-knob::before{
  left:18px;
  transform:translateY(-50%) rotate(-135deg);
}

.ff-compare-knob::after{
  right:18px;
  transform:translateY(-50%) rotate(45deg);
}

.ff-compare-knob-bar{
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:2px;
  transform:translate(-50%, -50%);
  background:rgba(255,255,255,.95);
  border-radius:999px;
  box-shadow:0 0 10px rgba(255,255,255,.18);
}

.ff-compare.is-dragging .ff-compare-knob{
  box-shadow:
    0 24px 70px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 30px rgba(31,224,255,.32),
    0 0 30px rgba(255,46,220,.22);
  transform:translate(-50%, -50%) scale(1.05);
}

.ff-compare.is-dragging .ff-compare-handle{
  box-shadow:
    0 0 20px rgba(31,224,255,.32),
    0 0 20px rgba(255,46,220,.22),
    0 0 40px rgba(255,255,255,.22);
}

.ff-compare-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  z-index:5;
  cursor:ew-resize;
}

.ff-compare-label{
  position:absolute;
  top:14px;
  z-index:6;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.ff-compare-label-day{ left:14px; }
.ff-compare-label-night{ right:14px; }

.ff-compare.is-demo .ff-compare-handle,
.ff-compare.is-demo .ff-compare-overlay{
  transition:
    clip-path .7s cubic-bezier(.22,1,.36,1),
    left .7s cubic-bezier(.22,1,.36,1);
}

@media (max-width:576px){
  .ff-compare{
    min-height:360px;
    height:360px;
  }

  .ff-compare-knob{
    width:54px;
    height:54px;
  }

  .ff-compare-knob::before{ left:15px; }
  .ff-compare-knob::after{ right:15px; }

  .ff-compare-label{
    top:12px;
    padding:7px 11px;
    font-size:11px;
  }

  .ff-compare-label-day{ left:12px; }
  .ff-compare-label-night{ right:12px; }
}

/* =========================================================
   HOVER4
========================================================= */
.ff-hover4{ margin-top:22px; }

.ff-hover4-stage{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  min-height:520px;
  background:#000;
  isolation:isolate;
  z-index:3;
}

.ff-neon-rail-top,
.ff-neon-rail-bottom{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 10px rgba(31,224,255,.45), 0 0 18px rgba(255,46,220,.28);
}

.ff-neon-rail-top{ top:0; }
.ff-neon-rail-bottom{ bottom:0; }

.ff-hover4-stage.is-focus .ff-neon-rail-top,
.ff-hover4-stage.is-focus .ff-neon-rail-bottom{
  display:none;
}

.ff-hover4-top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:50 !important;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:16px 14px 10px;
  pointer-events:none;
}

.ff-hover4-topCell{
  text-align:center;
  padding:10px 10px 12px;
  border-left:1px solid rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  background:transparent;
  border-top:none;
  border-right:none;
  border-bottom:none;
  font:inherit;
  display:block;
}

.ff-hover4-topCell:first-child{ border-left:0; }

.ff-hover4-topCell:active{
  transform:scale(.96);
}

.ff-hover4-topCell .ff-hover4-ico{
  font-size:18px;
  opacity:.95;
}

.ff-hover4-topCell .ff-hover4-h{
  margin-top:8px;
  font-weight:900;
  letter-spacing:.14em;
  font-size:12px;
  text-transform:uppercase;
}

.ff-hover4-topCell .ff-hover4-p{
  margin-top:8px;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
}

.ff-hover4-topCell.is-active{
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:14px;
  margin:0 8px;
}

.ff-hover4-split{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  z-index:2;
}

.ff-hover4-slice{
  position:relative;
  overflow:hidden;
}

.ff-hover4-slice::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(var(--i) * -100%);
  width:400%;
  height:100%;
  background-image:var(--img);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.ff-hover4-slice + .ff-hover4-slice{
  box-shadow:inset 1px 0 0 rgba(255,255,255,.12);
}

.ff-hover4-stage.is-focus .ff-hover4-split{
  opacity:0;
  pointer-events:none;
}

.ff-hover4-focus{
  position:absolute;
  inset:0;
  z-index:4;
  opacity:0;
  pointer-events:none;
}

.ff-hover4-stage.is-focus .ff-hover4-focus{
  opacity:1;
  pointer-events:auto;
}

.ff-hover4-img{
  position:absolute;
  inset:0;
  opacity:0;
  transform:none !important;
  will-change:clip-path, opacity;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.ff-hover4-img.is-active{ opacity:1; }
.ff-hover4-img.is-prev{ opacity:1; z-index:1; }
.ff-hover4-img.is-next{ opacity:1; z-index:2; }

.ff-hover4-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:7;
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.ff-hover4-title{
  margin-top:6px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:18px;
}

.ff-hover4-zones{
  position:absolute;
  inset:0;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.ff-hover4-zone{ cursor:pointer; }

#hover4{
  position:relative;
  padding-top:0;
  margin-top:-120px;
  border-top:0 !important;
  background:transparent;
  z-index:2;
}

#hover4::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:240px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 20%,
    rgba(0,0,0,.75) 55%,
    rgba(0,0,0,1) 100%
  );
}

#hover4 .ff-wrap{
  position:relative;
  z-index:2;
}

#hover4 .neon-edge,
#hover4 .neon-edge:hover,
#hover4 .ff-panel,
#hover4 .ff-panel:hover{
  transform:none !important;
}

@media (max-width:992px){
  .ff-hover4-stage{ min-height:420px; }

  .ff-hover4-top{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .ff-hover4-topCell{
    border-left:0;
    background:rgba(0,0,0,.18);
    border-radius:14px;
  }

  #hover4{
    margin-top:-90px;
  }

  .hero::after{ height:210px; }
  #hover4::before{ height:200px; }
}

@media (max-width:768px){
  #hover4 .ff-hover4-stage{
    min-height:auto !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  #hover4 .ff-hover4-top{
    position:relative !important;
    inset:auto !important;
    z-index:20 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:12px !important;
    background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0));
    pointer-events:auto !important;
  }

  #hover4 .ff-hover4-topCell{
    margin:0 !important;
    min-height:84px;
    padding:12px 10px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:14px !important;
    background:rgba(0,0,0,.34) !important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  #hover4 .ff-hover4-topCell.is-active{
    margin:0 !important;
    border-color:rgba(31,224,255,.36) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03) inset,
      0 0 18px rgba(31,224,255,.14),
      0 0 18px rgba(255,46,220,.08);
  }

  #hover4 .ff-hover4-topCell .ff-hover4-h{
    margin-top:6px;
    font-size:11px !important;
    letter-spacing:.12em;
  }

  #hover4 .ff-hover4-topCell .ff-hover4-p{
    display:none !important;
  }

  #hover4 .ff-hover4-split,
  #hover4 .ff-hover4-focus,
  #hover4 .ff-hover4-zones{
    top:116px !important;
    bottom:0 !important;
  }

  #hover4 .ff-hover4-stage{
    min-height:520px !important;
  }

  #hover4 .ff-hover4-caption{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    z-index:25 !important;
    padding:12px !important;
  }

  #hover4 .ff-hover4-title{
    font-size:16px !important;
  }

  #hover4 .ff-hover4-caption .ff-copy,
  #hover4 [data-cap-copy]{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  #hover4 .ff-hover4-zones{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
  }
}

@media (max-width:576px){
  .ff-hover4-stage{ min-height:360px; }

  #hover4{
    margin-top:-70px;
  }

  .hero::after{ height:170px; }
  #hover4::before{ height:170px; }

  #hover4 .ff-hover4-top{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:10px !important;
  }

  #hover4 .ff-hover4-topCell{
    min-height:76px;
    padding:10px 8px !important;
  }

  #hover4 .ff-hover4-topCell .ff-hover4-ico{
    font-size:16px !important;
  }

  #hover4 .ff-hover4-topCell .ff-hover4-h{
    font-size:10px !important;
  }

  #hover4 .ff-hover4-stage{
    min-height:480px !important;
  }

  #hover4 .ff-hover4-split,
  #hover4 .ff-hover4-focus,
  #hover4 .ff-hover4-zones{
    top:102px !important;
  }

  #hover4 .ff-hover4-caption{
    padding:10px !important;
  }

  #hover4 .ff-hover4-title{
    font-size:15px !important;
  }

  #hover4 .ff-hover4-caption .ff-copy,
  #hover4 [data-cap-copy]{
    font-size:12px !important;
  }
}

/* =========================================================
   MAP
========================================================= */
.customer-map{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  border-top:0 !important;
}

.customer-map::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:url('/assets/img/neon-map-bg.png') center / cover no-repeat;
  filter:contrast(1.15) saturate(1.18) brightness(1.02);
  opacity:.95;
}

.customer-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.18) 18%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,.70) 100%
    ),
    radial-gradient(
      1200px 700px at 50% 55%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.78) 100%
    );
}

.customer-map .wrap,
.customer-map .ff-map{
  position:relative;
  z-index:2;
}

.customer-map__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.customer-map__head .copy{ max-width:72ch; }

.ff-map{
  height:540px;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,.88),
    0 0 30px rgba(31,224,255,.10),
    0 0 30px rgba(255,46,220,.08);
  position:relative;
}

.ff-map::before,
.ff-map::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 10px rgba(31,224,255,.45), 0 0 18px rgba(255,46,220,.28);
  opacity:.85;
}

.ff-map::before{ top:0; }
.ff-map::after{ bottom:0; }

.ff-map .leaflet-control-zoom{
  border:0;
  box-shadow:none;
}

.ff-map .leaflet-control-zoom a{
  width:44px;
  height:44px;
  line-height:44px;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  margin-bottom:10px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 18px 60px rgba(0,0,0,.65),
    0 0 18px rgba(31,224,255,.16),
    0 0 18px rgba(255,46,220,.10);
}

.ff-map .leaflet-control-zoom a:hover{
  border-color:rgba(31,224,255,.45);
}

.ff-map .leaflet-control-attribution{
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  margin:10px;
  padding:6px 10px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:11px;
  line-height:1;
  max-width:calc(100% - 20px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.75;
}

.ff-map .leaflet-control-attribution:hover{ opacity:1; }

.ff-map .leaflet-control-attribution a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
}

.ff-map .leaflet-control-attribution a:hover{ color:#fff; }
.ff-map .leaflet-control-attribution a[href*="leaflet"]{ display:none !important; }

.ff-map .leaflet-popup-content-wrapper{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.ff-map .leaflet-popup-tip{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}

.ff-map .leaflet-popup-content{
  margin:12px 14px;
}

.ff-cluster{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(31,224,255,.45), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(255,46,220,.35), transparent 60%),
    radial-gradient(44px 44px at 50% 50%, rgba(139,92,255,.18), rgba(0,0,0,.45)),
    rgba(255,255,255,.06);
  color:#fff;
  font-weight:900;
  letter-spacing:.06em;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 6px rgba(31,224,255,.10),
    0 0 0 12px rgba(255,46,220,.06),
    0 18px 55px rgba(0,0,0,.70),
    0 0 22px rgba(31,224,255,.18),
    0 0 22px rgba(255,46,220,.12);
}

/* =========================================================
   WHY
========================================================= */
#why.section--alt{
  position:relative;
  overflow:hidden;
}

#why.section--alt::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 25%, rgba(31,224,255,.14), transparent 60%),
    radial-gradient(900px 520px at 82% 30%, rgba(255,46,220,.12), transparent 60%),
    radial-gradient(800px 520px at 50% 85%, rgba(139,92,255,.10), transparent 65%);
  filter:blur(2px);
  opacity:.9;
}

#why .wrap{ position:relative; z-index:1; }

#why .sectionHead{
  margin-bottom:22px;
  max-width:860px;
}

#why .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

#why .eyebrow::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 22px rgba(31,224,255,.75);
}

#why .h2{
  margin-top:.45rem;
  text-shadow:
    0 0 24px rgba(31,224,255,.18),
    0 0 24px rgba(255,46,220,.12);
}

#why .sectionHead::after{
  content:"";
  display:block;
  height:3px;
  width:min(520px, 100%);
  margin-top:16px;
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--purple));
  border-radius:999px;
  box-shadow:0 0 22px rgba(31,224,255,.25), 0 0 22px rgba(255,46,220,.14);
  opacity:.65;
}

#why .grid3{ margin-top:26px; }

#why .card{
  position:relative;
  padding:20px;
  border-radius:var(--radius);
  background:
    radial-gradient(160px 120px at 20% 15%, rgba(31,224,255,.10), transparent 65%),
    radial-gradient(160px 120px at 80% 30%, rgba(255,46,220,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 30px 90px rgba(0,0,0,.78),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow:hidden;
}

#why .card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 16px rgba(31,224,255,.35), 0 0 16px rgba(255,46,220,.22);
  opacity:.85;
}

#why .card:hover{
  transform:translateY(-3px);
  border-color:rgba(31,224,255,.35);
  box-shadow:
    0 36px 110px rgba(0,0,0,.85),
    0 0 26px rgba(31,224,255,.18),
    0 0 22px rgba(255,46,220,.12),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

#why .h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
}

#why .copy{
  color:rgba(255,255,255,.78);
}

/* =========================================================
   EXPECT
========================================================= */
#expect{
  position:relative;
  overflow:hidden;
  background:url('/assets/img/expect-bg.png') center / cover no-repeat;
}

#expect::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.55) 38%,
    rgba(0,0,0,.28) 62%,
    rgba(0,0,0,.62) 100%
  );
  z-index:0;
}

#expect::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:220px;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,1) 100%
  );
  z-index:0;
}

#expect .wrap{
  position:relative;
  z-index:1;
}

#expect + .section{
  border-top:0 !important;
}

.expectGrid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:center;
}

#expect .expectMedia,
#expect .ffPhoneWrap{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#expect .ffPhoneWrap{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  padding:0 !important;
  margin:0 !important;
}

#expect .ffPhone{
  position:relative;
  z-index:2;
  width:min(380px, 92%);
  filter:
    drop-shadow(0 50px 140px rgba(0,0,0,.85))
    drop-shadow(0 0 40px rgba(31,224,255,.25))
    drop-shadow(0 0 40px rgba(255,46,220,.20));
}

#expect .ffPhone__body{
  position:relative;
  width:100%;
  border-radius:42px;
  background:#070712;
  overflow:hidden;
  box-shadow:
    0 40px 120px rgba(0,0,0,.85),
    0 0 52px rgba(31,224,255,.26),
    0 0 52px rgba(255,46,220,.20);
}

#expect .ffPhone__body::after{
  content:"";
  display:block;
  padding-top:177.78%;
}

#expect .ffPhone__body::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:44px;
  padding:2px;
  background:linear-gradient(135deg, var(--cyan), var(--pink), var(--purple));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:6;
}

#expect .ffPhone__screen{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  bottom:12px;
  border-radius:32px;
  overflow:hidden;
  background:#000;
}

#expect .ffPhone__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#expect .ffPhone__notch{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:40%;
  height:20px;
  border-radius:0 0 16px 16px;
  background:rgba(0,0,0,.85);
  z-index:7;
}

#expect .ffPhonePlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:112px;
  height:112px;
  border-radius:999px;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:10;
  display:grid;
  place-items:center;
  transition:.2s ease;
}

#expect .ffPhonePlay__ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(31,224,255,.45), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,46,220,.40), transparent 60%),
    rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.70),
    0 0 28px rgba(31,224,255,.32),
    0 0 24px rgba(255,46,220,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#expect .ffPhonePlay__tri{
  width:0;
  height:0;
  border-left:30px solid rgba(255,255,255,.92);
  border-top:19px solid transparent;
  border-bottom:19px solid transparent;
  transform:translateX(5px);
  filter:
    drop-shadow(0 0 10px rgba(31,224,255,.25))
    drop-shadow(0 0 10px rgba(255,46,220,.18));
}

#expect .ffPhonePlay:hover{
  transform:translate(-50%,-50%) scale(1.03);
}

#expect .ffPhone.is-playing .ffPhonePlay{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.96);
}

.expectCopy{
  padding-top:6px;
}

.expectBullets{
  margin-top:18px;
}

.expectBullet{
  padding:16px;
}

@media (max-width:992px){
  .expectGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:576px){
  #expect .ffPhonePlay{
    width:96px;
    height:96px;
  }

  #expect .ffPhonePlay__tri{
    border-left-width:26px;
    border-top-width:17px;
    border-bottom-width:17px;
  }
}

/* =========================================================
   BENEFITS
========================================================= */
#benefits{
  position:relative;
  overflow:hidden;
  border-top:0 !important;
  margin-top:-120px;
  padding-top:190px;
  z-index:2;
  background:transparent;
}

#benefits::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:260px;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.30) 22%,
    rgba(0,0,0,.72) 60%,
    rgba(0,0,0,1) 100%
  );
}

#benefits::after{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1100px 650px at 18% 26%, rgba(31,224,255,.16), transparent 62%),
    radial-gradient(1100px 650px at 82% 30%, rgba(255,46,220,.13), transparent 62%),
    radial-gradient(1000px 720px at 50% 88%, rgba(139,92,255,.12), transparent 70%);
  filter:blur(2px);
  opacity:.95;
}

#benefits .wrap{
  position:relative;
  z-index:1;
}

#benefits .sectionHead{
  margin-bottom:26px;
  max-width:920px;
}

#benefits .h2{
  text-shadow:
    0 0 26px rgba(31,224,255,.16),
    0 0 26px rgba(255,46,220,.10);
}

#benefits .sectionHead::after{
  content:"";
  display:block;
  height:3px;
  width:min(560px, 100%);
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--purple));
  box-shadow:0 0 22px rgba(31,224,255,.25), 0 0 22px rgba(255,46,220,.14);
  opacity:.70;
}

#benefits .grid3{ margin-top:28px; }

#benefits .card{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:var(--radius);
  background:
    radial-gradient(220px 160px at 18% 18%, rgba(31,224,255,.10), transparent 65%),
    radial-gradient(220px 160px at 82% 26%, rgba(255,46,220,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 32px 95px rgba(0,0,0,.80),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#benefits .card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 16px rgba(31,224,255,.35), 0 0 16px rgba(255,46,220,.22);
  opacity:.90;
}

#benefits .card::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(31,224,255,.22), transparent 65%),
    radial-gradient(closest-side at 70% 60%, rgba(255,46,220,.18), transparent 68%);
  transform:translateX(-14%) rotate(-8deg);
  opacity:0;
  filter:blur(10px);
  transition:opacity .22s ease, transform .22s ease;
}

#benefits .card:hover{
  transform:translateY(-3px);
  border-color:rgba(31,224,255,.35);
  box-shadow:
    0 40px 120px rgba(0,0,0,.88),
    0 0 30px rgba(31,224,255,.18),
    0 0 26px rgba(255,46,220,.12),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

#benefits .card:hover::after{
  opacity:1;
  transform:translateX(0) rotate(-8deg);
}

#benefits .h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
}

#benefits .copy{
  color:rgba(255,255,255,.78);
}

@media (max-width:992px){
  #benefits{
    margin-top:-90px;
    padding-top:160px;
  }

  #benefits::before{
    height:220px;
  }
}

@media (max-width:576px){
  #benefits{
    margin-top:-70px;
    padding-top:150px;
  }
}

/* =========================================================
   SPACES
========================================================= */
#spaces .spacesSlider{ margin-top:22px; }

#spaces .spacesStage{
  position:relative;
  padding:0;
  overflow:hidden;
  min-height:520px;
  border-radius:var(--radius);
}

#spaces .spacesStage::before,
#spaces .spacesStage::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  z-index:6;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:0 0 10px rgba(31,224,255,.45), 0 0 18px rgba(255,46,220,.28);
  opacity:.9;
}

#spaces .spacesStage::before{ top:0; }
#spaces .spacesStage::after{ bottom:0; }

#spaces .spacesSlide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(0) scale(1);
  transition:opacity .6s ease, transform .75s ease;
  will-change:opacity, transform;
}

#spaces .spacesSlide.is-active{ opacity:1; z-index:2; }
#spaces .spacesSlide.is-prev{ opacity:1; z-index:1; }

#spaces .spacesBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:contrast(1.06) brightness(.78) saturate(1.05);
  transform:scale(1.06);
}

#spaces .spacesShade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 500px at 20% 25%, rgba(31,224,255,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(255,46,220,.14), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.44) 55%, rgba(0,0,0,.70));
}

#spaces .spacesContent{
  position:absolute;
  left:20px;
  bottom:20px;
  width:min(560px, calc(100% - 40px));
  padding:18px;
  border-radius:18px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 30px 90px rgba(0,0,0,.70);
}

#spaces .spacesKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.78);
}

#spaces .spacesKicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(31,224,255,.55);
}

#spaces .spacesTitle{
  margin:.5rem 0 .35rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:clamp(22px, 3vw, 32px);
}

#spaces .spacesDesc{
  margin:0;
  color:rgba(255,255,255,.75);
  line-height:1.7;
}

#spaces .spacesNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:10;
  display:grid;
  place-items:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 18px 60px rgba(0,0,0,.65),
    0 0 18px rgba(31,224,255,.16),
    0 0 18px rgba(255,46,220,.10);
  transition:.15s ease;
}

#spaces .spacesNav:hover{
  transform:translateY(-50%) scale(1.04);
  border-color:rgba(31,224,255,.45);
}

#spaces .spacesNav--prev{ left:16px; }
#spaces .spacesNav--next{ right:16px; }

#spaces .spacesDots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}

#spaces .spacesDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  box-shadow:0 0 12px rgba(0,0,0,.35);
}

#spaces .spacesDot.is-active{
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--purple));
  border-color:rgba(255,255,255,.25);
  box-shadow:
    0 0 16px rgba(31,224,255,.30),
    0 0 16px rgba(255,46,220,.18);
}

#spaces [data-transition="fade"] .spacesSlide{ transform:none; }

#spaces [data-transition="slide"] .spacesSlide{
  transform:translateX(14px);
}
#spaces [data-transition="slide"] .spacesSlide.is-active{
  transform:translateX(0);
}

#spaces [data-transition="zoom"] .spacesSlide{
  transform:scale(1.04);
}
#spaces [data-transition="zoom"] .spacesSlide.is-active{
  transform:scale(1);
}

#spaces [data-transition="wipe"] .spacesSlide{
  opacity:1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s ease;
}
#spaces [data-transition="wipe"] .spacesSlide.is-active{
  clip-path:inset(0 0 0 0);
}

/* =========================================================
   SEPARATOR
========================================================= */
.separator{
  position:relative;
  min-height:520px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.10);
}

.separator::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.78) 65%, rgba(0,0,0,.95));
}

.separator__inner{
  position:relative;
  z-index:2;
  padding:56px 0;
  max-width:820px;
}

.divider{
  height:3px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  margin:90px 0 0;
  box-shadow:0 0 20px rgba(31,224,255,.55), 0 0 40px rgba(255,46,220,.35);
}

/* =========================================================
   MODAL
========================================================= */
.hp{ display:none !important; }

.modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
}

.modal[aria-hidden="false"]{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.modal__card{
  position:relative;
  width:min(980px, calc(100% - 24px));
  margin:72px auto;
  max-height:calc(100vh - 144px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(0,0,0,.85);
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.10);
  position:sticky;
  top:0;
  z-index:2;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.modal__title{
  margin:.35rem 0 0;
  font-weight:900;
  letter-spacing:-.02em;
  text-transform:uppercase;
  font-size:18px;
}

.modal__close{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.modal__body{
  padding:18px;
  overflow:auto;
}

body.modal-open{ overflow:hidden; }

.form{
  display:grid;
  gap:12px;
}

.form label{
  display:grid;
  gap:8px;
}

.form label > span{
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

.form input,
.form select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:14px;
  padding:14px;
}

.form input::placeholder{
  color:rgba(255,255,255,.55);
}

.form input:focus,
.form select:focus{
  outline:none;
  border-color:var(--cyan);
}

.checkRow{
  display:flex !important;
  gap:12px !important;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

.checkRow input{ margin-top:3px; }

.checkRow span{
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.55;
}

.fineprint{
  color:rgba(255,255,255,.65);
  font-size:12px;
  text-align:center;
}

.fineprint a{ text-decoration:underline; }

/* =========================================================
   STICKY QUOTE + BACK TOP
========================================================= */
.stickyQuote{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9999;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 22px 70px rgba(0,0,0,.75),
    0 0 22px rgba(31,224,255,.35),
    0 0 22px rgba(255,46,220,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.backTop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 20px 60px rgba(0,0,0,.75),
    0 0 20px rgba(31,224,255,.35),
    0 0 20px rgba(255,46,220,.25);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}

.backTop.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  border-top:1px solid rgba(255,255,255,.12);
  background:#000;
}

.footer__inner{
  padding:28px 0;
  display:grid;
  gap:14px;
}

.footer__brand{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer__sub{
  color:rgba(255,255,255,.65);
}

.footer__links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.footer__btn{
  color:rgba(255,255,255,.78);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
}

.footer__links a:hover,
.footer__btn:hover{
  color:#fff;
}

.footer__fine{
  color:rgba(255,255,255,.55);
  font-size:12px;
}

/* =========================================================
   GLOBAL RESPONSIVE
========================================================= */
@media (max-width:992px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid3{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
  .hoverGrid{ grid-template-columns:1fr; }
  .hoverStage{ min-height:420px; }
  .separator{ min-height:420px; }
  #spaces .spacesStage{ min-height:460px; }
}

@media (max-width:576px){
  .wrap{ padding:0 16px; }
  .ctaRow{ display:grid; grid-template-columns:1fr; }
  .btn{ width:100%; border-radius:16px; }
  .stats{ grid-template-columns:1fr; }
  .hoverStage{ min-height:360px; }
  .separator{ min-height:360px; }
  #spaces .spacesStage{ min-height:420px; }
  #spaces .spacesNav{ display:none; }
  #spaces .spacesContent{ left:14px; right:14px; width:auto; bottom:14px; }
  .modal__card{ margin:16px auto; max-height:calc(100vh - 32px); }
  .backTop{ right:14px; bottom:84px; }
  .stickyQuote{ left:12px; right:12px; }
}

/* =========================================
   HERO -> BADGES -> HOVER4
   Hover4 should no longer overlap upward
========================================= */
#hover4{
  position: relative;
  padding-top: 0;
  margin-top: 0 !important;   /* was negative before */
  border-top: 0 !important;
  background: transparent;
  z-index: 1;
}

/* remove the old bridge fade that assumed hover4 sat directly on hero */
#hover4::before{
  display: none !important;
}

/* keep content stacking normal */
#hover4 .ff-wrap{
  position: relative;
  z-index: 2;
}

/* keep stage stable */
.ff-hover4-stage{
  position: relative;
  z-index: 3;
}

/* responsive: no negative pull-up anymore */
@media (max-width: 992px){
  #hover4{
    margin-top: 0 !important;
  }
}

@media (max-width: 576px){
  #hover4{
    margin-top: 0 !important;
  }
}

/* =========================================
   HERO BADGES — INSANE + CENTER FOCUS
========================================= */

.heroBadgesSection{
  position: relative;
  padding: 20px 0 12px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.heroBadgesSection .wrap{
  max-width: 1400px;
}

.heroBadgesScroller{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,1) 4%,
    rgba(0,0,0,1) 96%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,1) 4%,
    rgba(0,0,0,1) 96%,
    transparent 100%
  );
}

/* ambient glow */
.heroBadgesScroller::before{
  content: "";
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, rgba(31,224,255,.08), transparent 28%),
    radial-gradient(circle at 80% 50%, rgba(255,46,220,.08), transparent 28%);
  filter: blur(24px);
  z-index: 0;
}

/* center spotlight */
.heroBadgesScroller::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 26%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.10) 0%,
      rgba(31,224,255,.10) 26%,
      rgba(255,46,220,.08) 42%,
      rgba(255,255,255,0) 72%
    );
  filter: blur(18px);
}

.heroBadgesTrack{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  animation: heroBadgeMarquee 26s linear infinite;
  will-change: transform;
}

.heroBadgesScroller:hover .heroBadgesTrack{
  animation-play-state: paused;
}

.heroBadgesTrack img{
  --focus: 0;
  display: block;
  flex: 0 0 auto;
  height: 140px;
  width: auto;
  border-radius: 18px;
  opacity: calc(.72 + (.28 * var(--focus)));
  transform:
    translateY(calc(-10px * var(--focus)))
    scale(calc(1 + (.18 * var(--focus))));
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,.42))
    drop-shadow(0 0 calc(8px + 18px * var(--focus)) rgba(31,224,255,.16))
    drop-shadow(0 0 calc(8px + 14px * var(--focus)) rgba(255,46,220,.12));
  transition:
    transform .18s linear,
    filter .18s linear,
    opacity .18s linear;
  transform-origin: center center;
}

.heroBadgesTrack img:hover{
  opacity: 1;
}

@keyframes heroBadgeMarquee{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(calc(-50% - 6px));
  }
}

@media (max-width: 992px){
  .heroBadgesTrack{
    gap: 10px;
    animation-duration: 22s;
  }

  .heroBadgesTrack img{
    height: 104px;
    border-radius: 16px;
  }

  .heroBadgesScroller::after{
    width: 34%;
  }
}

@media (max-width: 768px){
  .heroBadgesSection{
    padding: 14px 0 8px;
  }

  .heroBadgesTrack{
    gap: 10px;
    animation-duration: 18s;
  }

  .heroBadgesTrack img{
    height: 90px;
    border-radius: 14px;
  }

  .heroBadgesScroller{
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 3%,
      rgba(0,0,0,1) 97%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,1) 3%,
      rgba(0,0,0,1) 97%,
      transparent 100%
    );
  }

  .heroBadgesScroller::after{
    width: 42%;
  }
}

@media (max-width: 480px){
  .heroBadgesTrack{
    animation-duration: 16s;
  }

  .heroBadgesTrack img{
    height: 78px;
    border-radius: 12px;
  }

  .heroBadgesScroller::after{
    width: 48%;
  }
}

@media (prefers-reduced-motion: reduce){
  .heroBadgesTrack{
    animation: none;
  }

  .heroBadgesTrack img{
    transition: none;
  }
}

/* =========================================
   HERO — NO OVERLAY CLEAN VIDEO
========================================= */

/* remove overlay completely */
.hero__overlay{
  display:none !important;
}

/* brighten video */
.hero__video{
  filter:none !important;
}

/* remove bottom fade */
.hero::after{
  display:none !important;
}

/* optional: slightly enhance instead of darken */
.hero__video{
  filter:contrast(1.05) saturate(1.05);
}
@media (min-width:769px){
  .hero__overlay{
    display:none !important;
  }
}

@media (max-width:768px){
  .hero__overlay{
    display:none !important;
  }
}
.hero__video{
  filter:
    contrast(1.08)
    saturate(1.08)
    brightness(1.02);
}
/* =========================================
   FINANCING STRIP — CLEAN FEATURE BANNER
========================================= */

.financeStripSection{
  position: relative;
  padding: 10px 0 22px;
  background: transparent;
}

.financeStrip{
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;

  background:
    radial-gradient(1200px 300px at 10% 50%, rgba(31,224,255,.12), transparent 55%),
    radial-gradient(1000px 300px at 90% 50%, rgba(255,46,220,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));

  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.financeStrip::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.14) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  animation: financeStripShine 4.8s linear infinite;
  pointer-events: none;
}

.financeStrip::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--purple), transparent);
  box-shadow:
    0 0 14px rgba(31,224,255,.35),
    0 0 14px rgba(255,46,220,.20);
  opacity: .95;
}

.financeStrip:hover{
  transform: translateY(-2px);
  border-color: rgba(31,224,255,.28);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 20px rgba(31,224,255,.10),
    0 0 20px rgba(255,46,220,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.financeStrip__left{
  min-width: 0;
}

.financeStrip__eyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}

.financeStrip__title{
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 18px rgba(31,224,255,.10),
    0 0 18px rgba(255,46,220,.06);
}

.financeStrip__sub{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

.financeStrip__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.financeStrip__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #111;
  background: #fff;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 14px rgba(255,255,255,.10);
  white-space: nowrap;
}

@keyframes financeStripShine{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (max-width: 768px){
  .financeStripSection{
    padding: 8px 0 18px;
  }

  .financeStrip{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
  }

  .financeStrip__title{
    font-size: clamp(22px, 7vw, 30px);
  }

  .financeStrip__sub{
    font-size: 13px;
  }

  .financeStrip__right{
    justify-content: flex-start;
  }

  .financeStrip__cta{
    min-height: 44px;
    padding: 10px 16px;
    font-size: 11px;
  }
}

.hoverStage::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.10) 58%,
    rgba(0,0,0,.22) 100%
  );
  pointer-events:none;
  z-index:1;
}

/* =========================================
   FORM STATUS
========================================= */
.formStatus{
  display:none;
  margin:4px 0 2px;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
  border:1px solid rgba(255,255,255,.14);
}

.formStatus.is-success{
  display:block;
  background:rgba(40,180,90,.14);
  border-color:rgba(40,180,90,.34);
  color:#d8ffe6;
}

.formStatus.is-error{
  display:block;
  background:rgba(255,80,80,.12);
  border-color:rgba(255,80,80,.30);
  color:#ffdada;
}

/* =========================================
   INSANE SUCCESS STATE
========================================= */
.formSuccess{
  display:none;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:40px 20px 28px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(500px 200px at 20% 20%, rgba(31,224,255,.12), transparent 60%),
    radial-gradient(500px 220px at 80% 25%, rgba(255,46,220,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:
    0 24px 80px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.03);
  animation: successReveal .55s cubic-bezier(.22,1,.36,1);
}

.formSuccess.is-active{
  display:block;
}

.formSuccess__glow{
  position:absolute;
  inset:-30px;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 35%, rgba(31,224,255,.16), transparent 24%),
    radial-gradient(circle at 70% 45%, rgba(255,46,220,.15), transparent 24%);
  filter:blur(28px);
}

.formSuccess__orb{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
}

.formSuccess__ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 38%),
    linear-gradient(135deg, rgba(31,224,255,.90), rgba(255,46,220,.90));
  box-shadow:
    0 18px 48px rgba(0,0,0,.35),
    0 0 30px rgba(31,224,255,.28),
    0 0 30px rgba(255,46,220,.22);
  animation:
    orbPulse 2.2s ease-in-out infinite,
    orbPop .55s cubic-bezier(.22,1,.36,1);
}

.formSuccess__ring::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:rgba(8,10,18,.78);
  border:1px solid rgba(255,255,255,.12);
}

.formSuccess__check{
  position:relative;
  z-index:2;
  font-size:38px;
  font-weight:900;
  line-height:1;
  color:#fff;
  text-shadow:
    0 0 12px rgba(31,224,255,.26),
    0 0 12px rgba(255,46,220,.18);
  animation: checkPop .45s .1s cubic-bezier(.22,1,.36,1) both;
}

.formSuccess__eyebrow{
  position:relative;
  z-index:2;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
}

.formSuccess__title{
  position:relative;
  z-index:2;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:10px;
}

.formSuccess__text{
  position:relative;
  z-index:2;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.74);
  max-width:420px;
  margin:0 auto 20px;
}

.formSuccess__progress{
  position:relative;
  z-index:2;
  width:min(320px, 100%);
  height:8px;
  margin:0 auto 10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.formSuccess__progressBar{
  width:100%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--purple));
  box-shadow:
    0 0 14px rgba(31,224,255,.26),
    0 0 14px rgba(255,46,220,.18);
  transform-origin:left center;
}

.formSuccess__subtext{
  position:relative;
  z-index:2;
  font-size:12px;
  color:rgba(255,255,255,.56);
}

/* confetti */
.formSuccess__confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.formSuccess__confetti span{
  position:absolute;
  top:-14px;
  width:10px;
  height:18px;
  border-radius:4px;
  opacity:0;
  animation: confettiFall 1.45s ease-in forwards;
}

.formSuccess__confetti span:nth-child(1){ left:10%; background:#1FE0FF; animation-delay:.05s; }
.formSuccess__confetti span:nth-child(2){ left:18%; background:#FF2EDC; animation-delay:.15s; }
.formSuccess__confetti span:nth-child(3){ left:26%; background:#8B5CFF; animation-delay:.02s; }
.formSuccess__confetti span:nth-child(4){ left:34%; background:#fff; animation-delay:.20s; }
.formSuccess__confetti span:nth-child(5){ left:42%; background:#1FE0FF; animation-delay:.08s; }
.formSuccess__confetti span:nth-child(6){ left:50%; background:#FF2EDC; animation-delay:.18s; }
.formSuccess__confetti span:nth-child(7){ left:58%; background:#8B5CFF; animation-delay:.10s; }
.formSuccess__confetti span:nth-child(8){ left:66%; background:#fff; animation-delay:.22s; }
.formSuccess__confetti span:nth-child(9){ left:74%; background:#1FE0FF; animation-delay:.12s; }
.formSuccess__confetti span:nth-child(10){ left:82%; background:#FF2EDC; animation-delay:.06s; }
.formSuccess__confetti span:nth-child(11){ left:88%; background:#8B5CFF; animation-delay:.16s; }
.formSuccess__confetti span:nth-child(12){ left:94%; background:#fff; animation-delay:.11s; }

@keyframes successReveal{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes orbPop{
  from{
    transform:scale(.65);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes checkPop{
  from{
    opacity:0;
    transform:scale(.6);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes orbPulse{
  0%,100%{
    box-shadow:
      0 18px 48px rgba(0,0,0,.35),
      0 0 30px rgba(31,224,255,.28),
      0 0 30px rgba(255,46,220,.22);
  }
  50%{
    box-shadow:
      0 18px 48px rgba(0,0,0,.38),
      0 0 42px rgba(31,224,255,.36),
      0 0 42px rgba(255,46,220,.28);
  }
}

@keyframes confettiFall{
  0%{
    opacity:0;
    transform:translateY(-10px) rotate(0deg);
  }
  10%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateY(220px) rotate(220deg);
  }
}

@media (max-width:576px){
  .formSuccess{
    padding:30px 16px 22px;
  }

  .formSuccess__orb{
    width:78px;
    height:78px;
  }

  .formSuccess__check{
    font-size:32px;
  }

  .formSuccess__title{
    font-size:22px;
  }

  .formSuccess__text{
    font-size:13px;
  }
}

@media (prefers-reduced-motion: reduce){
  .formSuccess,
  .formSuccess__ring,
  .formSuccess__check,
  .formSuccess__confetti span{
    animation:none !important;
  }
}