/* =========================================================
   FIREFLY LIGHTS — START-OVER THEME (FULL FILE)
   One index + one css. No legacy selectors.
========================================================= */

: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%; }
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  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:.15s 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 — ONLY ONE NAV VISIBLE
========================================================= */
.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{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.brand__mark{
  width:44px;
  height:44px;
  border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(31,224,255,.35), transparent 65%),
    radial-gradient(14px 14px at 70% 70%, rgba(255,46,220,.25), transparent 65%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 50px rgba(0,0,0,.65);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}
.brand__tag{
  color:rgba(255,255,255,.65);
  font-size:12px;
  margin-top:2px;
}

.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: always hidden unless JS opens it */
.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);
}

/* Breakpoint rules (hard) */
@media (max-width: 920px){
  .nav--desktop{ display:none !important; }
  .hamburger{ display:block !important; }
}
@media (min-width: 921px){
  .nav--desktop{ display:flex !important; }
  .hamburger{ display:none !important; }
  .nav--mobile{ display:none !important; }
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height:72vh;
  max-height:760px;
  overflow:hidden;
}
.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__grid{
  position:relative;
  z-index:2;
  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; }
.ctaRow{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }

.trustRow{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.trustCard{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
}
.trustIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 22px rgba(31,224,255,.18), 0 0 22px rgba(255,46,220,.12);
  font-weight:900;
}
.trustTitle{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.trustSub{ color:rgba(255,255,255,.68); font-size:12px; margin-top:2px; }

.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; }

/* =========================================================
   SECTIONS
========================================================= */
.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; }

/* 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; }

/* Grids */
.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; }

/* Separator image */
.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);
}

/* =========================================================
   4-IMAGE HOVER SECTION
========================================================= */
.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.00);
}
.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; }

/* =========================================================
   FINAL CTA
========================================================= */
.finalCta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.finalCta__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   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; }

/* Responsive */
@media (max-width: 992px){
  .hero__grid{
    grid-template-columns:1fr;
    padding-top:92px;
    padding-bottom:56px;
  }
  .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; }
}
@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; }
  .modal__card{ margin:16px auto; max-height:calc(100vh - 32px); }
  .backTop{ right:14px; bottom:84px; }
  .stickyQuote{ left:12px; right:12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn, .hoverImg{ transition:none !important; }
}
/* =========================================================
   DAY vs NIGHT IMAGE SLIDER
========================================================= */

.ff-compare{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  min-height: 420px;
}

/* images fill the frame */
.ff-compare-img{
  width:100%;
  height: clamp(360px, 44vw, 560px);
  object-fit: cover;
  display:block;
}

/* overlay gets clipped by width */
.ff-compare-overlay{
  position:absolute;
  inset:0;
  width:50%;                 /* initial value matches range */
  overflow:hidden;
}

/* Handle line */
.ff-compare-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.85), transparent);
  box-shadow:
    0 0 18px rgba(31,224,255,.35),
    0 0 18px rgba(255,46,220,.22);
  pointer-events:none;
}

/* Handle knob */
.ff-compare-handle::after{
  content:"⇆";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:54px;
  height:54px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing:.06em;

  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;

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

  box-shadow:
    0 18px 60px rgba(0,0,0,.65),
    0 0 22px rgba(31,224,255,.25),
    0 0 22px rgba(255,46,220,.14);
}

/* Range sits on top, invisible but interactive */
.ff-compare-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor: ew-resize;
}

/* Corner labels */
.ff-compare-label{
  position:absolute;
  top:14px;
  padding:8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.16em;
  text-transform:uppercase;

  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

/* Mobile */
@media (max-width: 576px){
  .ff-compare-img{ height: 360px; }
  .ff-compare-handle::after{ width:48px; height:48px; }
}

/* =========================================================
   HOVER4 — Clean stitched default + hover wipe
   ✔ No color overlays
   ✔ No default highlighted column
   ✔ Split + Hover use identical framing (cover)
========================================================= */

.ff-hover4{ margin-top:22px; }

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

/* -------------------------
   rails
------------------------- */
.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;
}

/* -------------------------
   TOP titles (no highlight by default)
------------------------- */
.ff-hover4-top{
  position:absolute;
  top:0; left:0; right:0;
  z-index:12;
  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;
}
.ff-hover4-topCell:first-child{ border-left:0; }

.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);
}

/* Highlight ONLY on hover */
.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;
}

/* -------------------------
   SPLIT (default stitched from 4 photos)
------------------------- */
.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;
}

/* 400% wide layer so each slice shows aligned quarter */
.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;
}

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

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

/* -------------------------
   FOCUS (wipe layer)
------------------------- */
.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; }

/* caption */
.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;
}

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

/* prevent inherited scaling */
#hover4 .neon-edge,
#hover4 .neon-edge:hover,
#hover4 .ff-panel,
#hover4 .ff-panel:hover{
  transform:none !important;
}

/* -------------------------
   responsive
------------------------- */
@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;
  }
}

@media (max-width:576px){
  .ff-hover4-stage{ min-height:360px; }
  .ff-hover4-top{ grid-template-columns:1fr; }
  .ff-hover4-topCell .ff-hover4-p{ display:none; }
}
/* =========================================
   HERO -> HOVER4 STRONG MORPH (no title cover)
========================================= */

/* Make the transition feel like one continuous section */
#hover4{
  position:relative;
  padding-top:0;
  margin-top:-120px;          /* stronger overlap */
  border-top:0 !important;
  background:transparent;
  z-index:2;                   /* hover4 sits above hero fade */
}

/* Stronger “bridge” fade that lives BEHIND hover4 content */
#hover4::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:240px;                /* stronger morph */
  z-index:0;                   /* IMPORTANT: behind hover4 content */
  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%
  );
}

/* Hero bottom fade — stronger, but keep it BELOW hover4 */
.hero{
  position:relative;
  z-index:1;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:260px;                /* stronger morph */
  z-index:2;                   /* below hover4 (hover4 z-index is 2 but its children are above) */
  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%
  );
}

/* Ensure hero content is above its fade */
.hero__grid{
  position:relative;
  z-index:3;
}

/* Ensure hover4 content is above its own bridge fade */
#hover4 .ff-wrap{
  position:relative;
  z-index:2;
}

/* ✅ Ensure your TOP TITLES are ALWAYS above everything */
.ff-hover4-top{
  position:absolute;
  z-index:50 !important;        /* higher than zones/caption/fades */
}

/* If any overlay inside hover4 could cover titles, force stage ordering */
.ff-hover4-stage{
  position:relative;
  z-index:3;
}

/* Responsive tuning */
@media (max-width: 992px){
  #hover4{ margin-top:-90px; }
  .hero::after{ height:210px; }
  #hover4::before{ height:200px; }
}
@media (max-width: 576px){
  #hover4{ margin-top:-70px; }
  .hero::after{ height:170px; }
  #hover4::before{ height:170px; }
}

/* =========================================================
   CUSTOMER MAP — FIREFLY THEME MATCH
========================================================= */

.customer-map{ padding:110px 0; border-top:1px solid rgba(255,255,255,.10); }
.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:#000;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative;
}

/* subtle neon rails like your other sections */
.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; }

/* Leaflet UI controls — match glass + hairlines */
.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);
}

/* Attribution — keep provider credit, but make it subtle */
.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);
}
.ff-map .leaflet-control-attribution a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
}
.ff-map .leaflet-control-attribution a:hover{ color:#fff; }

/* Popup — glass panel */
.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;
}

/* Cluster — neon gradient + glow */
.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);
}

/* Optional: if you ever use circleMarkers for non-logo points */
.ff-pin-dot{
  filter: drop-shadow(0 0 10px rgba(31,224,255,.22)) drop-shadow(0 0 10px rgba(255,46,220,.14));
}

/* =========================================================
   LEAFLET ATTRIBUTION — keep provider credit, hide Leaflet word
   (Leaflet license requires attribution. Do NOT hide the whole control.)
========================================================= */

/* Make attribution less “banner-like” */
.ff-map .leaflet-control-attribution{
  font-size:11px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide only the "Leaflet" link text (keep OSM/provider credits visible) */
.ff-map .leaflet-control-attribution a[href*="leaflet"]{
  display:none !important;
}

/* Remove leftover separators like “|” when Leaflet link is hidden */
.ff-map .leaflet-control-attribution{
  /* optional: slightly more subtle */
  opacity:.75;
}
.ff-map .leaflet-control-attribution:hover{
  opacity:1;
}
/* =========================================================
   CUSTOMER MAP — FIX DARK LINE + TOO BRIGHT UNDER MAP
========================================================= */

.customer-map{
  position:relative;
  overflow:hidden;
  border-top:0 !important;
}

/* 1) Background image: overscan so no hard edge line */
.customer-map::before{
  content:"";
  position:absolute;
  inset:-18%;                 /* overscan removes visible seams */
  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;
}

/* 2) Global wash + vignette (kills the band + evens lighting) */
.customer-map::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    /* top blend into section above (NO hard “line”) */
    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%
    ),
    /* vignette */
    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%
    );
}

/* content above overlays */
.customer-map .wrap,
.customer-map .ff-map{
  position:relative;
  z-index:2;
}

/* 3) Darken specifically behind the map so bottom isn't glowing */
.customer-map .ff-map{
  background: rgba(0,0,0,.72);                 /* darker base */
  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);
}

/* “spot shadow” behind map (makes the area under the map not bright) */
.customer-map .ff-map::before{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 45%,
      rgba(0,0,0,.78),
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,0) 85%);
  filter: blur(18px);
}


/* =========================================================
   WHY SECTION — MAKE IT POP
========================================================= */
#why.section--alt{
  position:relative;
  overflow:hidden;
}

/* subtle neon atmosphere behind the section */
#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;
}

/* keep content above the glow */
#why .wrap{ position:relative; z-index:1; }

/* head: tighter + more impact */
#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);
}

/* cards: more depth + neon edge on hover */
#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;
}

/* top neon rail */
#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;
}

/* hover pop */
#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);
}

/* card type hierarchy */
#why .h3{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
}
#why .copy{
  color: rgba(255,255,255,.78);
}

/* optional: add a big faint gradient divider under the head */
#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;
}

/* =========================================================
   EXPECT SECTION — PORTRAIT VIDEO LEFT
========================================================= */

#expect{
  position:relative;
  overflow:hidden;
}

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

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

.expectGrid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;   /* portrait narrower */
  gap:22px;
  align-items:center;
}


/* Portrait frame */
.expectMedia__frame{
  position:relative;
  margin:auto;
  width:100%;
  max-width:420px;     /* controls portrait width */
  aspect-ratio: 9 / 16;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 26px rgba(31,224,255,.10),
    0 0 22px rgba(255,46,220,.08);
}

/* Portrait video */
.expectMedia__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Text */
.expectCopy{
  padding-top:6px;
}

.expectBullets{
  margin-top:18px;
}

.expectBullet{
  padding:16px;
}

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

  .expectMedia__frame{
    max-width:360px;
  }
}
/* =========================================================
   HERO BADGE STRIP — FULL WIDTH IMAGE
========================================================= */

.heroBadges{
  grid-column: 1 / -1;        /* span both hero columns */
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  position: relative;
  z-index: 3;
}

/* subtle blend fade above it */
.heroBadges::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-20px;
  height:20px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0),
    rgba(0,0,0,.55)
  );
  pointer-events:none;
}

/* make the strip fill the width */
.heroBadges img{
  width: 100%;
  height: auto;
  display: block;
  opacity: .92;
  transition: .25s ease;
  filter:
    drop-shadow(0 0 10px rgba(31,224,255,.12))
    drop-shadow(0 0 8px rgba(255,46,220,.08));
}

/* optional subtle hover */
.heroBadges img:hover{
  opacity: 1;
  filter:
    drop-shadow(0 0 18px rgba(31,224,255,.30))
    drop-shadow(0 0 14px rgba(255,46,220,.20));
}

/* mobile breathing room */
@media (max-width: 768px){
  .heroBadges{
    margin-top: 22px;
  }
}
/* =========================
   EXPECT layout
========================= */
#expect .expectGrid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:28px;
  align-items:center;
}
@media (max-width: 992px){
  #expect .expectGrid{ grid-template-columns:1fr; }
}

#expect .expectMedia{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}

#expect .ffPhoneWrap{
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  padding: 18px 0 40px; /* space but no “box” */
}

/* =========================
   PHONE frame (ratio-safe)
========================= */
#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);
}

/* height via ratio spacer */
#expect .ffPhone__body::after{
  content:"";
  display:block;
  padding-top:177.78%;
}

/* neon border */
#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;
}

/* screen */
#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;
}

/* notch */
#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;
}

/* =========================
   PLAY overlay
========================= */
#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);
}
@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;
  }
}

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

/* readability wash */
#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;
}

/* ✅ fade into next section */
#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;
}

/* make the next section accept the fade (no hard top border/contrast edge) */
#expect + .section{
  border-top:0 !important;
}
/* =========================================
   REMOVE THE “BOX” BEHIND THE PHONE (HARD OVERRIDE)
========================================= */
#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{
  padding: 0 !important;     /* most common reason it reads like a panel */
  margin: 0 !important;
}

/* =========================================================
   BENEFITS — BLEND INTO PREVIOUS SECTION + POP
   (drop-in replacement for your benefits styling)
========================================================= */

#benefits{
  position:relative;
  overflow:hidden;

  /* ✅ blend into section above */
  border-top:0 !important;
  margin-top:-120px;        /* pull up into previous section */
  padding-top:190px;        /* compensate for overlap */
  z-index:2;

  /* ✅ don’t “reset” the background */
  background:transparent;
}

/* bridge fade at the top so it feels seamless */
#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%
  );
}

/* neon atmosphere behind the whole section */
#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;
}

/* keep content above glows */
#benefits .wrap{ position:relative; z-index:1; }

/* header more “heroic” */
#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;
}

/* cards: deeper, shinier, premium */
#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;
}

/* top neon rail */
#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;
}

/* soft spark wash on hover */
#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);
}

/* type hierarchy */
#benefits .h3{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.18em;
}
#benefits .copy{ color:rgba(255,255,255,.78); }

/* responsive overlap tuning */
@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 — IMAGE SLIDESHOW (NEON GLASS)
========================================================= */

#spaces .spacesSlider{ margin-top:22px; }

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

/* neon rails */
#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; }

/* background image layer */
#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);
}

/* cinematic overlay */
#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));
}

/* content glass */
#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; }

/* nav buttons */
#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; }

/* dots */
#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);
}

/* -------------------------
   TRANSITIONS (choose via data-transition)
------------------------- */
#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; /* wipe uses clip-path instead of opacity */
  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);
}

/* responsive */
@media (max-width: 992px){
  #spaces .spacesStage{ min-height: 460px; }
}
@media (max-width: 576px){
  #spaces .spacesStage{ min-height: 420px; }
  #spaces .spacesNav{ display:none; } /* swipe / dots on mobile */
  #spaces .spacesContent{ left:14px; right:14px; width:auto; bottom:14px; }
}
/* =========================================================
   BRAND LOCKUP — optimized for 3214x2464 wordmark
========================================================= */

.brand{
  display:flex;
  align-items:center;
  gap:18px;
}

/* Bug */
.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));
}

/* Wordmark (large + dominant) */
.brand__nameImg{
  height:52px;      /* 🔥 larger but still header safe */
  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));
}

/* Hover glow */
.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));
}

/* Responsive */
@media (max-width: 992px){
  .brand__bug{ height:42px; }
  .brand__nameImg{ height:44px; }
}

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