/* ============================================================
   BISIBLY LANDING PAGE - style.css
   Colors: #3c1f68 (purple) | #f8b01a (gold) | #07082a (dark)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap');

/*  RESET & BASE  */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100%; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
  color: #1a0a3d;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

/*  VARIABLES  */
:root {
  --purple:      #3c1f68;
  --purple-mid:  #5c3190;
  --purple-light:#9b7cc8;
  --gold:        #f8b01a;
  --gold-dark:   #d4920e;
  --dark:        #07082a;
  --dark-alt:    #0d1040;
  --white:       #ffffff;
  --light:       #fafafa;
  --light-alt:   #f4f0fb;
  --text:        #1a0a3d;
  --text-muted:  #64748b;
  --border:      #e2d9f3;
  --radius:      16px;
  --shadow:      0 4px 24px rgba(60,31,104,.10);
  --shadow-lg:   0 20px 60px rgba(60,31,104,.18);
  --shadow-gold: 0 8px 32px rgba(248,176,26,.30);
}

/*  TYPOGRAPHY  */
h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/*  UTILITIES  */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.gradient-text {
  background: linear-gradient(135deg, var(--gold) 0%, #ffce62 50%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.shimmer-text {
  background: linear-gradient(90deg, var(--gold) 0%, #fff0c0 40%, var(--gold) 70%, #f8b01a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 600; font-family: 'Outfit', sans-serif;
  background: rgba(248,176,26,.15); border: 1px solid rgba(248,176,26,.4); color: var(--gold-dark);
}
.badge-dark {
  background: rgba(248,176,26,.15); border-color: rgba(248,176,26,.35); color: var(--gold);
}

/*  BUTTONS  */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: var(--gold); color: var(--dark);
  border: none; border-radius: 12px; font-family: 'Outfit', sans-serif;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: all .3s;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: #ffc030; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(248,176,26,.45); }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: all .3s; backdrop-filter: blur(8px);
}
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }

.btn-purple {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; background: var(--purple); color: #fff;
  border: none; border-radius: 12px; font-family: 'Outfit', sans-serif;
  font-size: 16px; font-weight: 700; cursor: pointer; transition: all .3s;
  box-shadow: 0 8px 28px rgba(60,31,104,.35);
}
.btn-purple:hover { background: var(--purple-mid); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(60,31,104,.45); }

.btn-outline-purple {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; background: transparent; color: var(--purple);
  border: 1.5px solid var(--purple); border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all .3s;
}
.btn-outline-purple:hover { background: var(--purple); color: #fff; transform: translateY(-2px); }

/*  SCROLL REVEAL  */
.reveal        { opacity:0; transform:translateY(38px);  transition:opacity .8s ease, transform .8s ease; }
.reveal-left   { opacity:0; transform:translateX(-70px); transition:opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1); }
.reveal-right  { opacity:0; transform:translateX(70px);  transition:opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1); }
.reveal-scale  { opacity:0; transform:scale(.9);         transition:opacity .75s ease, transform .75s ease; }
.revealed      { opacity:1 !important; transform:none !important; }

/*  NAV  */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--dark); border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 14px 0; transition: padding .3s ease, box-shadow .3s ease;
}
.nav.compact { padding: 10px 0; box-shadow: 0 4px 30px rgba(0,0,0,.4); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; }

.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height: 36px; width: auto; }

.nav-links { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-links > li { position: relative; }
.nav-has-drop::after {
  content: '';
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 28px;
}
.nav-has-drop:hover::after,
.nav-has-drop:focus-within::after {
  display: block;
}
.nav-links > li > a {
  display:flex; align-items:center; gap:5px;
  color: rgba(255,255,255,.72); font-size: 15px; font-weight: 500;
  transition: color .2s; font-family: 'DM Sans', sans-serif;
  padding: 8px 14px; border-radius: 8px;
}
.nav-links > li > a:hover,
.nav-has-drop:hover > a { color: var(--gold); background: rgba(255,255,255,.06); }
.nav-links > li > a svg { opacity:.55; transition: transform .2s; }
.nav-has-drop:hover > a svg { transform: rotate(180deg); opacity:1; }

/*  MEGA DROP  */
.nav-drop {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(7,8,42,.97); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 28px 24px;
  min-width: 720px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .14s;
  z-index: 1000;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(248,176,26,.06);
}
.nav-drop--sm { min-width: 440px; }
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav-drop-inner { display: flex; gap: 8px; }
.nd-col { flex: 1; padding: 0 12px; }
.nd-col + .nd-col { border-left: 1px solid rgba(255,255,255,.06); }
.nd-head {
  display: inline-flex;
  align-items: center;
  font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 12px; padding-bottom: 8px;
  text-decoration: none;
  transition: color .18s;
}
.nd-head:hover { color: rgba(248,176,26,.9); }
.nd-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  transition: background .18s;
  margin-bottom: 2px;
}
.nd-link:hover { background: rgba(255,255,255,.06); }
.nd-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.nd-link span:last-child { display: flex; flex-direction: column; gap: 1px; }
.nd-link strong { font-size: 14px; color: rgba(255,255,255,.88); font-weight: 600; font-family:'DM Sans',sans-serif; }
.nd-link em { font-size: 12px; color: rgba(255,255,255,.38); font-style: normal; }

.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-ghost {
  padding: 9px 20px; color: rgba(255,255,255,.8); font-size: 15px; font-weight: 500;
  border-radius: 8px; transition: all .2s; font-family: 'DM Sans', sans-serif;
}
.nav-ghost:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-cta {
  padding: 10px 22px; background: var(--gold); color: var(--dark);
  border-radius: 10px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
  transition: all .3s; box-shadow: 0 4px 16px rgba(248,176,26,.3);
}
.nav-cta:hover { background: #ffc030; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(248,176,26,.45); }

/* Mobile nav toggle */
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0; z-index:999;
  background: var(--dark); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 24px 28px; flex-direction:column; gap:16px;
  animation: menuSlide .25s ease;
}
.mobile-menu.open { display: flex; }
@keyframes menuSlide { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.mobile-menu a { color: rgba(255,255,255,.8); font-size:16px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.mobile-menu a:last-child { border:none; }

/*  HERO  */
.hero {
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
  background: var(--dark); padding: 120px 0 80px;
}
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-orb {
  position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none;
  animation: orbFloat 12s ease-in-out infinite;
}
.orb1 { width:700px; height:700px; background:radial-gradient(circle,rgba(60,31,104,.8),transparent); top:-200px; right:-150px; opacity:.7; }
.orb2 { width:500px; height:500px; background:radial-gradient(circle,rgba(248,176,26,.4),transparent); bottom:-150px; left:-120px; opacity:.5; animation-delay:-5s; }
.orb3 { width:380px; height:380px; background:radial-gradient(circle,rgba(92,49,144,.7),transparent); top:35%; left:35%; opacity:.4; animation-delay:-8s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-45px) scale(1.07)} 70%{transform:translateY(20px) scale(.95)} }

.hero-content { position:relative; z-index:2; text-align:center; max-width:940px; margin:0 auto; padding:0 24px; }

.hero-badge { animation: fadeDown .8s ease .1s both; }
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }

.hero-title {
  font-family: 'Outfit', sans-serif; font-size: clamp(52px, 8vw, 100px);
  font-weight: 900; line-height: 1.02; letter-spacing: -.05em; color: #fff;
  margin: 20px 0 22px; animation: fadeUp .9s ease .3s both;
}
.hero-sub {
  font-size: clamp(17px, 2.2vw, 21px); color: rgba(255,255,255,.7);
  max-width: 580px; margin: 0 auto 36px; line-height: 1.72;
  animation: fadeUp .9s ease .5s both;
}
.hero-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; animation: fadeUp .9s ease .7s both; }
.hero-note { margin-top:16px; font-size:13px; color:rgba(255,255,255,.4); animation: fadeUp .9s ease .9s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }

/* Hero dashboard mockup */
.hero-visual { position:relative; width:100%; max-width:980px; margin:56px auto 0; padding:0 24px; animation: fadeUp .9s ease 1.1s both; }
.mockup-frame {
  background: rgba(255,255,255,.04); border-radius:20px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 60px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(248,176,26,.07);
  overflow:hidden;
}
.mockup-bar {
  background: rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08);
  padding:12px 16px; display:flex; align-items:center; gap:8px;
}
.m-dot { width:12px; height:12px; border-radius:50%; }
.m-red{background:#ff5f57} .m-yel{background:#febc2e} .m-grn{background:#28c840}
.m-url {
  flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; padding:5px 12px; font-size:12px; color:rgba(255,255,255,.5); text-align:center;
}
.mockup-body { display:grid; grid-template-columns:200px 1fr; height:420px; }
.m-sidebar { background:rgba(255,255,255,.03); border-right:1px solid rgba(255,255,255,.07); padding:20px 14px; }
.m-logo-text { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:var(--gold); margin-bottom:20px; }
.m-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:3px; }
.m-item.active { background:rgba(248,176,26,.12); color:var(--gold); font-weight:600; }
.m-icon { width:14px; height:14px; border-radius:3px; background:currentColor; opacity:.5; flex-shrink:0; }
.m-main { padding:22px; overflow:hidden; }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.ds-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px; }
.ds-label { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:4px; }
.ds-val { font-size:20px; font-weight:700; color:#fff; letter-spacing:-.03em; font-family:'Outfit',sans-serif; }
.ds-chg { font-size:11px; color:#4ade80; margin-top:2px; }
.chart-box { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:16px; height:208px; }
.chart-lbl { font-size:12px; font-weight:600; color:rgba(255,255,255,.6); margin-bottom:10px; font-family:'Outfit',sans-serif; }
.chart-bars-row { display:flex; align-items:flex-end; gap:7px; height:155px; }
.cbar {
  flex:1; border-radius:4px 4px 0 0; transform-origin:bottom; transform:scaleY(0);
  animation: barUp 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes barUp { to{transform:scaleY(1)} }

/* Scroll indicator */
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; animation: fadeUp .9s ease 1.5s both;
}
.scroll-hint span { font-size:11px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.1em; }
.s-mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,.2); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.s-wheel { width:4px; height:8px; background:var(--gold); border-radius:2px; animation:wheel 1.6s ease infinite; }
@keyframes wheel { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(14px);opacity:0} }

/*  TRUST BAR  */
.trust-bar { padding:32px 0; background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.trust-label { text-align:center; font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.12em; margin-bottom:18px; }
.marquee-outer { overflow:hidden; max-width:100%; contain:layout paint; }
.marquee-track { display:flex; gap:60px; width:max-content; animation:marquee 30s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-logo { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:#c4b5d4; white-space:nowrap; }

/*  SECTION SHARED  */
.section { padding: 110px 0; }
.section-alt { background: var(--light-alt); }
.section-dark { background: var(--dark); }

.sec-head { text-align:center; max-width:720px; margin:0 auto 70px; }
.sec-title { font-family:'Outfit',sans-serif; font-size:clamp(34px,5vw,58px); font-weight:800; color:var(--text); margin:12px 0 18px; }
.sec-title-dark { color: #fff; }
.sec-sub { font-size:18px; color:var(--text-muted); line-height:1.75; }
.sec-sub-dark { color: rgba(255,255,255,.65); }

/*  FEATURES GRID  */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.icon-svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.f-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; position:relative; overflow:hidden; cursor:default;
  transition:all .35s ease;
}
.f-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(60,31,104,.03), rgba(248,176,26,.04));
  opacity:0; transition:opacity .35s;
}
.f-card:hover { border-color:rgba(60,31,104,.25); box-shadow:0 20px 50px rgba(60,31,104,.10); transform:translateY(-5px); }
.f-card:hover::before { opacity:1; }
.f-icon {
  width:52px; height:52px; border-radius:14px; background:rgba(60,31,104,.08);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px;
  color:var(--purple);
  transition:all .35s; flex-shrink:0;
}
.f-card:hover .f-icon { background:var(--purple); color:#fff; transform:scale(1.1) rotate(-4deg); }
.f-icon .icon-svg { width:26px; height:26px; }
.f-title { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:10px; }
.f-desc  { font-size:14px; color:var(--text-muted); line-height:1.72; }

/*  SPLIT REVEAL (curtain / door)  */
.split-reveal-section {
  position: relative; overflow: hidden;
}
.split-panel {
  position: absolute; top: 0; width: 50%; height: 100%; z-index: 10;
  transition: transform 1.1s cubic-bezier(.77,0,.18,1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sp-left  { left: 0;  transform: translateX(0); }
.sp-right { right: 0; transform: translateX(0); }
.sp-left.bg-purple  { background: linear-gradient(135deg, var(--purple), #2a1550); }
.sp-right.bg-gold   { background: linear-gradient(225deg, var(--gold-dark), var(--gold)); }
.sp-left.bg-dark    { background: var(--dark); }
.sp-right.bg-dark2  { background: var(--dark-alt); }

/* Watermark text on curtain panels */
.sp-watermark {
  font-family:'Outfit',sans-serif; font-size:clamp(60px,10vw,120px);
  font-weight:900; opacity:.08; color:#fff; white-space:nowrap; letter-spacing:-.05em; pointer-events:none;
}

.split-reveal-section.curtain-open .sp-left  { transform: translateX(-100%); }
.split-reveal-section.curtain-open .sp-right { transform: translateX(100%); }

.split-content { position: relative; z-index: 1; padding: 110px 0; }

/*  SHOWCASE (video + text) */
.showcase-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }

.check-list { list-style:none; margin:24px 0 32px; }
.check-item { display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.check-item:last-child { border:none; }
.check-icon {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple), var(--purple-mid));
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0; margin-top:2px;
  font-size:0;
}
.check-icon::after {
  content:'';
  width:6px;
  height:10px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-1px;
}
.check-item p { font-size:15px; color:var(--text-muted); line-height:1.65; }
.check-item strong { color:var(--text); }

.vid-wrap {
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:16/10;
  box-shadow: 0 40px 90px rgba(60,31,104,.22);
}

/*  SHOWCASE VIDEO  */
.showcase-video-wrap {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 32px 80px rgba(60,31,104,.28), 0 0 0 1px rgba(255,255,255,.07);
}
.showcase-video-wrap video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #07082a;
}

/*  LAPTOP MOCKUP VIDEO  */
.laptop-wrap {
  position: relative; width: 100%;
  filter: drop-shadow(0 40px 80px rgba(60,31,104,.30));
}
.laptop-img {
  display: block; width: 100%; position: relative; z-index: 2;
  pointer-events: none; user-select: none;
}
.laptop-screen {
  position: absolute;
  /* tune these % to fit the screen area of the laptop PNG */
  top: 6.2%; left: 13.2%; width: 73.8%; height: 68%;
  z-index: 1; overflow: hidden; background: #000;
  border-radius: 2px;
}
.laptop-screen video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vid-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(60,31,104,.88);
  border: 2.5px solid rgba(255,255,255,.25);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 10;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.vid-play-btn:hover {
  background: var(--gold); color: var(--dark);
  transform: translate(-50%, -50%) scale(1.12);
}
.vid-play-btn.playing { opacity: 0; }
.showcase-video-wrap:hover .vid-play-btn.playing,
.showcase-video-wrap:focus-within .vid-play-btn.playing { opacity: 1; }
.icon-play { margin-left: 4px; }
.icon-pause { margin-left: 0; }
.vid-fallback {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#1a0a3d,#3c1f68,#5c3190,#f8b01a,#5c3190,#1a0a3d);
  background-size:300% 300%; animation:gradMove 10s ease infinite;
}
@keyframes gradMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.vid-wrap video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vid-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(60,31,104,.2) 0%,transparent 60%); pointer-events:none; }
.vid-badge {
  position:absolute; bottom:18px; left:18px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-radius:10px;
  padding:10px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.vid-dot { width:10px; height:10px; border-radius:50%; background:#22c55e; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.45)} }
.vid-badge span { font-size:13px; font-weight:600; color:var(--text); font-family:'Outfit',sans-serif; }

/*  VOLTZ CREDITS  */
.voltz-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; padding-top:20px; }
.voltz-card {
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:32px 24px 28px; text-align:center; transition:all .35s ease;
  position:relative; overflow:visible;
}

/* White shimmer + gold glow on hover - no dark purple */
.voltz-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.95) 0%, rgba(248,176,26,.10) 100%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
/* Gold bottom accent bar */
.voltz-card::after {
  content:''; position:absolute; bottom:0; left:16px; right:16px; height:3px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  border-radius:0 0 3px 3px; transform:scaleX(0); transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.voltz-card:hover {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(248,176,26,.18), 0 20px 50px rgba(248,176,26,.18);
  transform:translateY(-5px);
}
.voltz-card:hover::before { opacity:1; }
.voltz-card:hover::after  { transform:scaleX(1); }
.voltz-card:hover .voltz-name  { color:var(--purple); }
.voltz-card:hover .voltz-price { color:var(--text); }

/* Popular card - permanent gold ring */
.voltz-card.popular {
  border-color:var(--gold); border-width:2px;
  box-shadow:0 0 0 4px rgba(248,176,26,.12), 0 12px 40px rgba(248,176,26,.22);
  background:linear-gradient(160deg,#fffdf5 0%,#fff 60%);
}
.voltz-popular-tag {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  background-size:200% 100%; animation:shimmer 2.5s linear infinite;
  color:var(--dark); font-size:12px; font-weight:800;
  padding:5px 18px; border-radius:100px; font-family:'Outfit',sans-serif; white-space:nowrap;
  box-shadow:0 4px 16px rgba(248,176,26,.5); letter-spacing:.06em; text-transform:uppercase;
  z-index:5;
}
.voltz-icon {
  width:58px;
  height:58px;
  margin:0 auto 14px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(248,176,26,.18), rgba(60,31,104,.08));
  border:1px solid rgba(248,176,26,.2);
  color:var(--gold-dark);
  box-shadow:0 10px 24px rgba(7,8,42,.08);
}
.voltz-icon .icon-svg { width:30px; height:30px; }
.voltz-name { font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.voltz-amount { font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; color:var(--purple); letter-spacing:-.03em; }
.voltz-amount sup { font-size:16px; vertical-align:top; margin-top:4px; }
.voltz-price { font-size:13px; color:var(--text-muted); margin-top:4px; }
.voltz-v { font-size:26px; font-weight:900; color:var(--gold); font-family:'Outfit',sans-serif; letter-spacing:-.04em; }

/*  STATS  */
.stats-section { padding:72px 0; background:linear-gradient(135deg, var(--purple) 0%, #2a1550 45%, var(--dark) 100%); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; }
.stat-item { color:#fff; }
.stat-num { font-family:'Outfit',sans-serif; font-size:62px; font-weight:900; letter-spacing:-.05em; line-height:1; margin-bottom:8px; }
.stat-suf { font-size:36px; }
.stat-label { font-size:15px; opacity:.72; }
.stat-gold { color: var(--gold); }

/*  AI SECTION  */
.ai-card {
  background:linear-gradient(135deg,#0f0823 0%,#1e0d45 50%,#0f0823 100%);
  border-radius:26px; padding:80px; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  border:1px solid rgba(248,176,26,.1);
}
.ai-glow { position:absolute; border-radius:50%; filter:blur(100px); opacity:.25; pointer-events:none; }
.ai-glow-1 { width:500px; height:500px; background:var(--purple); top:-150px; right:-100px; }
.ai-glow-2 { width:350px; height:350px; background:var(--gold); bottom:-100px; left:-80px; }
.ai-content { position:relative; z-index:2; }
.ai-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(248,176,26,.15); border:1px solid rgba(248,176,26,.3); border-radius:100px; font-size:13px; font-weight:600; color:var(--gold); margin-bottom:20px; font-family:'Outfit',sans-serif; }
.ai-title { font-family:'Outfit',sans-serif; font-size:clamp(30px,4vw,50px); font-weight:800; letter-spacing:-.04em; color:#fff; line-height:1.12; margin-bottom:18px; }
.ai-desc { font-size:16px; color:rgba(255,255,255,.62); line-height:1.75; margin-bottom:28px; }
.ai-chat { position:relative; z-index:2; background:rgba(255,255,255,.05); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:24px; }
.chat-msg { display:flex; gap:12px; margin-bottom:14px; }
.chat-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; font-weight:700; }
.av-user { background:rgba(60,31,104,.4); color:var(--purple-light); }
.av-ai   { background:linear-gradient(135deg,var(--purple),var(--purple-mid)); color:#fff; }
.chat-bubble { background:rgba(255,255,255,.07); border-radius:12px; padding:10px 14px; font-size:14px; color:rgba(255,255,255,.82); line-height:1.55; }
.chat-bubble.user { background:rgba(60,31,104,.3); }
.typing { display:flex; gap:4px; padding:12px 14px; background:rgba(255,255,255,.07); border-radius:12px; width:fit-content; }
.t-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:tdot 1.3s ease-in-out infinite; }
.t-dot:nth-child(2){animation-delay:.2s} .t-dot:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,80%,100%{transform:scale(.65);opacity:.45} 40%{transform:scale(1.1);opacity:1} }

/*  VIDEO BG SECTION  */
.video-bg-section { position:relative; padding:120px 0; overflow:hidden; }
.vbg-el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vbg-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(7,8,42,.92) 0%,rgba(60,31,104,.82) 100%); z-index:1; }
.vbg-content { position:relative; z-index:2; text-align:center; max-width:780px; margin:0 auto; }
.vbg-title { font-family:'Outfit',sans-serif; font-size:clamp(36px,6vw,68px); font-weight:900; letter-spacing:-.045em; color:#fff; line-height:1.1; margin-bottom:20px; }
.vbg-sub  { font-size:18px; color:rgba(255,255,255,.72); margin-bottom:40px; line-height:1.75; }

/*  PRICING  */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1040px; margin:0 auto; padding-top:24px; }
.p-card {
  background:#fff; border:1.5px solid var(--border); border-radius:22px; padding:40px;
  position:relative; transition:all .35s ease; overflow:visible;
}
.p-card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 0 0 3px rgba(248,176,26,.15), 0 24px 60px rgba(248,176,26,.18); }
.p-card.featured { border-color:var(--purple); box-shadow:0 0 0 4px rgba(60,31,104,.08), 0 24px 60px rgba(60,31,104,.15); }
.p-popular {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, var(--gold-dark), var(--gold)); color:var(--dark);
  font-size:12px; font-weight:800; padding:6px 22px; border-radius:100px;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; font-family:'Outfit',sans-serif;
  box-shadow:0 4px 16px rgba(248,176,26,.5); z-index:10;
}
.p-plan { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:var(--purple); text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px; }

/* Clean price display */
.p-price-row { display:flex; align-items:flex-start; gap:3px; line-height:1; margin:0 0 6px; }
.p-sym { font-family:'Outfit',sans-serif; font-size:16px; font-weight:800; color:var(--purple); padding-top:14px; letter-spacing:.04em; }
.p-num { font-family:'Outfit',sans-serif; font-size:72px; font-weight:900; color:var(--text); letter-spacing:-.06em; line-height:1; }
.p-mo  { font-family:'DM Sans',sans-serif; font-size:16px; color:var(--text-muted); font-weight:500; padding-bottom:10px; align-self:flex-end; }
.p-period { font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.p-voltz { display:inline-flex; align-items:center; gap:6px; background:rgba(248,176,26,.1); border:1px solid rgba(248,176,26,.3); border-radius:8px; padding:5px 12px; font-size:13px; font-weight:600; color:var(--gold-dark); margin-bottom:24px; font-family:'Outfit',sans-serif; }
.p-desc { font-size:14px; color:var(--text-muted); margin-bottom:24px; line-height:1.65; padding-bottom:24px; border-bottom:1px solid var(--border); }
.p-features-list { list-style:none; margin-bottom:30px; }
.p-feat { display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:14px; color:var(--text); }
.p-feat-icon {
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--purple);
  flex-shrink:0;
  margin-top:1px;
  border:1.5px solid currentColor;
  border-radius:999px;
  font-size:0;
  position:relative;
}
.p-feat-icon::after {
  content:'';
  width:5px;
  height:9px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  margin-top:-1px;
}
.p-feat-icon.gold { color:var(--gold-dark); }
.p-btn-outline {
  display:block; text-align:center; padding:14px; border:1.5px solid var(--border);
  border-radius:11px; font-size:15px; font-weight:600; color:var(--text); transition:all .3s;
  font-family:'Outfit',sans-serif;
}
.p-btn-outline:hover { border-color:var(--purple); color:var(--purple); }
.p-btn-filled {
  display:block; text-align:center; padding:14px; background:var(--purple);
  border-radius:11px; font-size:15px; font-weight:700; color:#fff; transition:all .3s;
  box-shadow:0 8px 28px rgba(60,31,104,.3); font-family:'Outfit',sans-serif;
}
.p-btn-filled:hover { background:var(--purple-mid); box-shadow:0 14px 40px rgba(60,31,104,.45); transform:translateY(-1px); }

/*  TESTIMONIALS  */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.t-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; transition:all .35s ease;
}
.t-card:hover { border-color:var(--gold); box-shadow:0 0 0 3px rgba(248,176,26,.12), 0 20px 50px rgba(248,176,26,.16); transform:translateY(-5px); }
.t-stars {
  color:var(--gold);
  display:flex;
  gap:2px;
  font-size:18px;
  letter-spacing:1px;
  line-height:1;
  margin-bottom:14px;
  text-shadow:0 2px 12px rgba(248,176,26,.2);
}
.t-quote { font-size:15px; color:var(--text); line-height:1.75; margin-bottom:24px; }
.t-author { display:flex; align-items:center; gap:12px; }
.t-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:#fff; flex-shrink:0; font-family:'Outfit',sans-serif; }
.t-name { font-size:14px; font-weight:700; color:var(--text); font-family:'Outfit',sans-serif; }
.t-role { font-size:13px; color:var(--text-muted); }

/*  CTA  */
.cta-card {
  background:linear-gradient(135deg, var(--purple) 0%, #2a1550 45%, var(--dark) 100%);
  border-radius:28px; padding:100px 80px; text-align:center; position:relative; overflow:hidden;
  border:1px solid rgba(248,176,26,.1);
}
.cta-orb { position:absolute; border-radius:50%; background:rgba(248,176,26,.08); filter:blur(60px); pointer-events:none; }
.cta-orb-1 { width:400px; height:400px; top:-150px; left:-100px; }
.cta-orb-2 { width:500px; height:500px; bottom:-200px; right:-120px; }
.cta-title { font-family:'Outfit',sans-serif; font-size:clamp(40px,7vw,78px); font-weight:900; letter-spacing:-.05em; color:#fff; line-height:1.05; margin-bottom:18px; position:relative; z-index:2; }
.cta-sub { font-size:20px; color:rgba(255,255,255,.75); margin-bottom:40px; max-width:540px; margin-left:auto; margin-right:auto; position:relative; z-index:2; line-height:1.7; }
.cta-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; z-index:2; }

/*  FOOTER  */
.footer {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 72px 0 0;
  position: relative;
  overflow: hidden;
}

/* Top row: legal + feature columns */
.footer-top { display:flex; gap:64px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-top-legal { flex:0 0 210px; padding:0; }
.footer-top-brand { flex:0 0 260px; }
.footer-top-brand img { height:40px; width:auto; margin-bottom:16px; display:block; }
.footer-top-brand p { font-size:14px; color:rgba(255,255,255,.45); line-height:1.8; margin-bottom:20px; }
.footer-top-badges { display:flex; flex-direction:column; gap:10px; }
.footer-top-badges img { height:44px; width:auto; border-radius:6px; filter:brightness(.85); transition:filter .2s; }
.footer-top-badges a:hover img { filter:brightness(1); }
.gplay-badge img { height:50px; width:auto; border-radius:8px; transition:filter .25s; filter:brightness(.85); }
.gplay-badge:hover img { filter:brightness(1); }

/* Link columns grid */
.footer-cols { flex:1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.fc { padding:0 8px; }
.fc-head {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:14px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.fc-link {
  display:block; font-size:14px; color:rgba(255,255,255,.55);
  padding:5px 0; transition:color .18s;
  line-height:1.4;
}
.fc-link:hover { color:var(--gold); }

/* Social */
.social-row { display:flex; gap:8px; flex-wrap:wrap; }
.soc-btn { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); transition:all .22s; flex-shrink:0; }
.soc-btn svg { width:15px; height:15px; flex-shrink:0; }
.soc-btn:hover { background:var(--gold); color:var(--dark); transform:translateY(-2px); }

/* Centered brand strip */
.footer-brand-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 0 24px;
  text-align: center;
}
.footer-bottom-logo img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-brand-bottom p {
  max-width: 620px;
  color: rgba(255,255,255,.48);
  font-size: 14px;
  line-height: 1.75;
}
.footer-bottom-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-bottom-badges img {
  height: 42px;
  width: auto;
  border-radius: 6px;
  filter: brightness(.88);
  transition: filter .2s;
}
.footer-bottom-badges a:hover img { filter: brightness(1); }
.footer-bottom-badges .gplay-badge img { height: 50px; border-radius: 8px; }

/* Bottom bar */
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding:20px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  font-size:13px; color:rgba(255,255,255,.35);
  text-align:center;
}
.footer-bottom a { color:rgba(255,255,255,.4); transition:color .2s; }
.footer-bottom a:hover { color:var(--gold); }
.footer-bottom .social-row { margin:0; }
.footer-bottom-links {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
}

/*  VIDEO CARDS  */
.vcard-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:56px; }
.vcard {
  border-radius:20px;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
  background:#07082a;
  box-shadow:0 20px 55px rgba(7,8,42,.22);
}
.vcard::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,42,.18) 0%,rgba(7,8,42,.36) 48%,rgba(7,8,42,.86) 100%);
}
.vcard-grad,
.vcard video { z-index:0; }
.vcard video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard-overlay {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:2;
  padding:22px 24px;
  background:rgba(7,8,42,.74);
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}
.vcard-title { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; color:#fff; margin-bottom:4px; }
.vcard-desc { font-size:14px; color:rgba(255,255,255,.82); }
.vcard-play-btn {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:64px;
  height:64px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.26);
  background:rgba(60,31,104,.88);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.vcard-play-btn:hover {
  background:var(--gold);
  color:var(--dark);
  transform:translate(-50%,-50%) scale(1.12);
}
.vcard-play-btn.playing { opacity:0; }
.vcard:hover .vcard-play-btn.playing,
.vcard:focus-within .vcard-play-btn.playing { opacity:1; }

/*  PARTICLES  */
#particles-container { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.particle { position:absolute; border-radius:50%; opacity:0; animation:particleRise var(--d,8s) linear var(--dl,0s) infinite; }
@keyframes particleRise { 0%{opacity:0;transform:translateY(100vh) scale(0)} 15%{opacity:.6} 85%{opacity:.2} 100%{opacity:0;transform:translateY(-20vh) scale(1.5)} }

/*  RESPONSIVE  */
@media(max-width:1100px){
  .footer-cols { grid-template-columns:repeat(2,1fr); }
  .footer-top { flex-direction:column; gap:40px; }
  .footer-top-legal { flex:none; }
  .footer-top-brand { flex:none; }
  .pricing-grid { gap:16px; }
}
@media(max-width:900px){
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .showcase-grid { grid-template-columns:1fr; gap:48px; }
  .ai-card { grid-template-columns:1fr; padding:60px 36px; }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:420px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .voltz-grid { grid-template-columns:repeat(2,1fr); }
  .mockup-body { grid-template-columns:1fr; }
  .m-sidebar { display:none; }
  .dash-stats { grid-template-columns:repeat(2,1fr); }
  .vcard-grid { grid-template-columns:1fr; }
}
@media(max-width:768px){
  .nav-links { display:none; }
  .nav-ghost { display:none; }
  .nav-hamburger { display:flex; }
  .features-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .cta-card { padding:60px 24px; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-copy { flex-direction:column; gap:12px; text-align:center; }
  .hero-title { font-size:48px; }
  .sp-watermark { font-size:50px; }
}
@media(max-width:480px){
  .footer-inner { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .voltz-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .cta-actions { flex-direction:column; align-items:center; }
}

/*
   ADVANCED ANIMATIONS
 */

/*  Scroll progress bar  */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--purple), var(--gold), var(--purple));
  background-size: 200% 100%;
  width: 0%;
  border-radius: 0 3px 3px 0;
  transition: width .08s linear;
  animation: progressShimmer 3s linear infinite;
  box-shadow: 0 0 10px rgba(248,176,26,.6);
}
@keyframes progressShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/*  Zoom-in reveal  */
.reveal-zoom {
  opacity: 0;
  transform: scale(.82) translateY(24px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
}
.reveal-zoom.revealed { opacity: 1; transform: scale(1) translateY(0); }

/*  Flip-up reveal  */
.reveal-flip {
  opacity: 0;
  transform: perspective(600px) rotateX(18deg) translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  transform-origin: top center;
}
.reveal-flip.revealed { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }

/*  Stagger children  */
.stagger-children > * { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.stagger-children.revealed > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger-children.revealed > *:nth-child(2) { opacity:1; transform:none; transition-delay:.14s; }
.stagger-children.revealed > *:nth-child(3) { opacity:1; transform:none; transition-delay:.23s; }
.stagger-children.revealed > *:nth-child(4) { opacity:1; transform:none; transition-delay:.32s; }
.stagger-children.revealed > *:nth-child(5) { opacity:1; transform:none; transition-delay:.41s; }
.stagger-children.revealed > *:nth-child(6) { opacity:1; transform:none; transition-delay:.50s; }

/*  Magnetic button  */
.magnetic { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }

/*  Cursor spotlight  */
.cursor-glow {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,176,26,.06) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}

/*  Parallax wrapper  */
[data-parallax] { will-change: transform; }

/*  Section number / step counter  */
.step-num {
  font-family: 'Outfit', sans-serif; font-size: 80px; font-weight: 900;
  color: rgba(60,31,104,.06); line-height: 1; letter-spacing: -.05em;
  position: absolute; top: -10px; right: 0; pointer-events: none; user-select: none;
}

/*  Animated underline on headings  */
.underline-anim {
  position: relative; display: inline-block;
}
.underline-anim::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  border-radius: 2px;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.underline-anim.revealed::after { width: 100%; }

/*  Word-by-word title reveal  */
.word-reveal .word {
  display: inline-block; opacity: 0; transform: translateY(24px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.word-reveal.revealed .word { opacity: 1; transform: translateY(0); }
.word-reveal.revealed .word:nth-child(1)  { transition-delay:.0s; }
.word-reveal.revealed .word:nth-child(2)  { transition-delay:.08s; }
.word-reveal.revealed .word:nth-child(3)  { transition-delay:.16s; }
.word-reveal.revealed .word:nth-child(4)  { transition-delay:.24s; }
.word-reveal.revealed .word:nth-child(5)  { transition-delay:.32s; }
.word-reveal.revealed .word:nth-child(6)  { transition-delay:.40s; }
.word-reveal.revealed .word:nth-child(7)  { transition-delay:.48s; }
.word-reveal.revealed .word:nth-child(8)  { transition-delay:.56s; }

/*  Floating bob animation  */
.float-bob { animation: floatBob 4s ease-in-out infinite; }
.float-bob-slow { animation: floatBob 6s ease-in-out infinite; }
@keyframes floatBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/*  Pulse ring on stat numbers  */
.stat-gold { position: relative; display: inline-block; }

/*  Glowing card on hover  */
.glow-hover { transition: all .35s ease; }
.glow-hover:hover { box-shadow: 0 0 0 1px var(--gold), 0 24px 60px rgba(248,176,26,.2); }

/*  Gradient border animation  */
@keyframes borderSpin {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}
.animated-border {
  position: relative; border-radius: var(--radius); z-index: 0;
}
.animated-border::before {
  content: ''; position: absolute; inset: -1px; border-radius: calc(var(--radius) + 1px);
  background: linear-gradient(135deg, var(--gold-dark), #fff, var(--gold), #fffdf5, var(--gold-dark));
  background-size: 300% 300%;
  z-index: -1; opacity: 0; transition: opacity .4s;
  animation: borderSpin 4s ease infinite;
}
.animated-border:hover::before { opacity: 1; }

/*  Scroll-triggered counter highlight  */
@keyframes countPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.count-popped { animation: countPop .45s cubic-bezier(.22,.61,.36,1); }

/*  Section divider wave  */
.wave-divider { display:block; width:100%; overflow:hidden; line-height:0; }
.wave-divider svg { display:block; width:100%; }

/*  Stat number size boost  */
.stat-num { transition: transform .3s ease; }
.stat-item:hover .stat-num { transform: scale(1.06); }

/*  Responsive pricing grid with padding  */
@media(max-width:900px) {
  .pricing-grid { padding-top: 20px; }
}

/*
   MOBILE - 768px and below
 */
@media(max-width:768px) {
  .hero-orb,
  .ph-orb { display:none !important; }
  .reveal-left,
  .reveal-right { transform:translateY(32px); }

  /* Hide hero visual mockup - prevents horizontal overflow */
  .hero-visual { display:none; }

  /* Hero layout becomes single column */
  .hero-inner { grid-template-columns:1fr; text-align:center; gap:32px; }
  .hero-title { font-size:clamp(32px, 9vw, 52px); }
  .hero-sub { font-size:16px; max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-trust { justify-content:center; }
  .hero-badge { margin:0 auto; }

  /* Hide split reveal curtain panels - content visible immediately */
  .sp-left, .sp-right { display:none !important; }

  /* Section padding reduced */
  section, .section { padding:60px 0; }
  .hero { min-height:auto; padding:100px 0 60px; }

  /* Split reveal section: let content show normally */
  .split-reveal-section { overflow:visible; }
  .split-content { position:relative; z-index:1; }

  /* Features */
  .features-grid { grid-template-columns:1fr; }

  /* VoltZ tools mini-grid - 2 cols */
  .voltz-tools-grid { grid-template-columns:repeat(2,1fr) !important; }

  /* Testimonials */
  .testi-grid { grid-template-columns:1fr; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; max-width:420px; }

  /* Stats */
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .stat-num { font-size:44px; }

  /* AI card */
  .ai-card { grid-template-columns:1fr; padding:48px 28px; gap:32px; }

  /* CTA card */
  .cta-card { padding:48px 24px; }

  /* Footer */
  .footer-cols { grid-template-columns:repeat(2,1fr); }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-bottom .social-row { justify-content:center; }
  .footer-bottom-links { gap:8px 14px; }

  /* Nav */
  .nav-links { display:none; }
  .nav-ghost { display:none; }
  .nav-cta { display:none; }
  .nav-hamburger { display:flex; }

  /* Watermark text */
  .sp-watermark { font-size:48px; }

  /* Marquee */
  .marquee-track {
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 20px;
    width:100%;
    transform:none !important;
  }
  .t-logo-dup { display:none; }
}

/*
   MOBILE - 480px and below
 */
@media(max-width:480px) {
  /* Layout */
  .container { padding:0 18px; }
  section, .section { padding:48px 0; }
  .hero { padding:88px 0 48px; }

  /* Hero */
  .hero-title { font-size:clamp(28px, 8vw, 40px); }
  .hero-sub { font-size:15px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { width:100%; text-align:center; }
  .hero-badge { font-size:13px; padding:6px 14px; }

  /* Section headings */
  .section-title { font-size:clamp(26px, 7vw, 36px); }
  .section-sub { font-size:15px; }

  /* Feature cards */
  .f-card { padding:24px 18px; }
  .f-icon { width:46px; height:46px; font-size:20px; }

  /* Pricing */
  .p-card { padding:32px 20px; }
  .p-num { font-size:60px; }
  .pricing-grid { max-width:100%; }

  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .stat-num { font-size:38px; }

  /* VoltZ grid */
  .voltz-grid { grid-template-columns:1fr; }
  .voltz-card { padding:28px 20px; }

  /* Testimonials */
  .t-card { padding:24px 18px; }

  /* Video cards */
  .vcard-overlay { padding:16px; }
  .vcard-title { font-size:16px; }
  .vcard-desc { font-size:13px; }
  .vcard-play-btn,
  .vid-play-btn { width:54px; height:54px; }

  /* AI / CTA */
  .ai-card { padding:36px 18px; }
  .cta-card { padding:40px 18px; }
  .cta-actions { flex-direction:column; align-items:stretch; }
  .cta-actions .btn { width:100%; text-align:center; }

  /* Footer */
  .footer-cols { grid-template-columns:1fr; }
  .footer-top-brand { flex:none; }

  /* Buttons */
  .btn { font-size:15px; padding:14px 24px; }
  .btn-lg { padding:16px 28px; }

  /* Cursor glow - disable on small touch screens */
  .cursor-glow { display:none; }
}

/*
   MOBILE - 360px and below (very small phones)
 */
@media(max-width:360px) {
  .hero-title { font-size:26px; }
  .section-title { font-size:24px; }
  .container { padding:0 14px; }
  .p-card { padding:28px 16px; }
  .p-num { font-size:52px; }
  .nav-logo img { height:28px; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-num { font-size:42px; }
}

/* ============================================================
   FEATURE DETAIL PAGES
   Shared styles for landing/features/*.html
   ============================================================ */

.nav-has-drop:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-drop--wide {
  position: fixed;
  top: 72px;
  left: 50%;
  width: min(1080px, calc(100vw - 32px));
  min-width: 0;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.nav-drop--wide .nav-drop-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.nav-drop--wide .nd-col {
  min-width: 0;
}

.nd-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248,176,26,.12);
  border: 1px solid rgba(248,176,26,.2);
  color: var(--gold);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.f-card[role="link"] {
  cursor: pointer;
}

.f-card[role="link"]:focus-visible,
.feature-index-card:focus-visible,
.fd-related-card:focus-visible,
.nd-link:focus-visible,
.nd-head:focus-visible,
.fc-link:focus-visible {
  outline: 3px solid rgba(248,176,26,.55);
  outline-offset: 3px;
}

.fd-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(7,8,42,.97) 0%, rgba(7,8,42,.88) 48%, rgba(7,8,42,.7) 100%),
    var(--fd-image) center/cover no-repeat,
    var(--dark);
  color: #fff;
  padding: 138px 0 92px;
}

.fd-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(120deg, rgba(248,176,26,.12), transparent 34%),
    linear-gradient(225deg, color-mix(in srgb, var(--fd-accent) 28%, transparent), transparent 42%);
}

.fd-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, rgba(7,8,42,.96));
  pointer-events: none;
}

.fd-hero-content {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.fd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--gold);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.fd-kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.fd-kicker-dark {
  color: var(--purple);
}

.fd-hero h1,
.feature-index-hero h1,
.fd-section h2,
.fd-cta h2,
.feature-index-group h2 {
  letter-spacing: 0;
}

.fd-hero h1 {
  max-width: 720px;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .98;
}

.fd-lede,
.feature-index-hero p {
  max-width: 610px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.72);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.7;
}

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

.fd-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
  margin-top: 42px;
}

.fd-metric {
  min-height: 92px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.fd-metric strong {
  display: block;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.fd-metric span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  line-height: 1.35;
}

.fd-hero-visual-layer {
  position: absolute;
  right: max(32px, calc((100vw - 1200px) / 2));
  bottom: 58px;
  z-index: 1;
  width: min(48vw, 610px);
  opacity: .92;
  pointer-events: none;
}

.fd-product-screen {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 34px 90px rgba(0,0,0,.4);
  backdrop-filter: blur(18px);
  transform: perspective(1100px) rotateY(-13deg) rotateX(6deg);
  animation: fdScreenFloat 7s ease-in-out infinite;
}

@keyframes fdScreenFloat {
  0%, 100% { transform: perspective(1100px) rotateY(-13deg) rotateX(6deg) translateY(0); }
  50% { transform: perspective(1100px) rotateY(-10deg) rotateX(5deg) translateY(-12px); }
}

.fd-screen-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

.fd-window-controls {
  display: flex;
  gap: 6px;
}

.fd-window-controls span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.fd-screen-top strong {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}

.fd-screen-top em {
  margin-left: auto;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  font-style: normal;
}

.fd-screen-body {
  display: grid;
  grid-template-columns: 58px 1fr;
  min-height: 390px;
}

.fd-screen-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding-top: 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  background: rgba(7,8,42,.34);
}

.fd-screen-rail span {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
}

.fd-screen-rail span.active {
  background: var(--fd-accent);
}

.fd-screen-main {
  padding: 22px;
}

.fd-screen-head span {
  display: block;
  color: var(--fd-accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.fd-screen-head strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
}

.fd-screen-meter {
  height: 8px;
  margin: 22px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.fd-screen-meter i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fd-accent), var(--gold));
  animation: fdMeter 3.2s ease-in-out infinite;
}

@keyframes fdMeter {
  0%, 100% { width: 58%; }
  50% { width: 86%; }
}

.fd-screen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fd-screen-card {
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  animation: fdCardLift 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .28s);
}

@keyframes fdCardLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.fd-screen-card span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fd-accent) 22%, transparent);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 900;
}

.fd-screen-card strong,
.fd-screen-card small {
  display: block;
}

.fd-screen-card strong {
  margin-top: 10px;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
}

.fd-screen-card small {
  margin-top: 6px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.35;
}

.fd-screen-steps {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.fd-screen-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.fd-screen-steps span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fd-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.fd-section {
  padding: 104px 0;
  background: #fff;
}

.fd-section-alt {
  background: #f7f8fb;
}

.fd-section-head {
  max-width: 760px;
  margin-bottom: 44px;
}

.fd-section-head h2,
.fd-steps-wrap h2,
.fd-proof-copy h2,
.feature-index-group h2 {
  margin: 0 0 16px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.fd-section-head p,
.fd-steps-wrap p,
.fd-proof-copy p {
  max-width: 680px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.78;
}

.fd-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fd-card {
  min-height: 270px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.fd-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fd-accent, var(--gold)) 48%, var(--border));
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.fd-card-num {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--purple);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.fd-card h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0;
}

.fd-card p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.72;
}

.fd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.fd-photo {
  overflow: hidden;
  border-radius: 8px;
  min-height: 520px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(15,23,42,.12);
}

.fd-photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  animation: fdPhotoDrift 16s ease-in-out infinite;
}

@keyframes fdPhotoDrift {
  0%, 100% { transform: scale(1.02); }
  50% { transform: scale(1.09); }
}

.fd-steps {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.fd-steps li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
}

.fd-steps li > span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dark);
  color: var(--gold);
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 900;
}

.fd-steps h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 20px;
  letter-spacing: 0;
}

.fd-steps p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.68;
}

.fd-proof {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.fd-proof-list {
  display: grid;
  gap: 14px;
}

.fd-proof-list li {
  position: relative;
  padding: 18px 20px 18px 52px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.fd-proof-list li::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(248,176,26,.16);
}

.fd-related {
  padding: 86px 0 104px;
  background: #f7f8fb;
}

.fd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fd-related-card,
.feature-index-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.fd-related-card:hover,
.feature-index-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fd-accent, var(--gold)) 52%, var(--border));
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}

.fd-related-card span,
.feature-index-card span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fd-accent, var(--gold)) 15%, white);
  color: var(--purple);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.fd-related-card strong,
.feature-index-card strong {
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  line-height: 1.25;
}

.fd-related-card em,
.feature-index-card em {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: normal;
}

.fd-cta {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background:
    linear-gradient(115deg, rgba(7,8,42,.98), rgba(7,8,42,.9)),
    linear-gradient(135deg, color-mix(in srgb, var(--fd-accent) 36%, transparent), transparent 58%);
  color: #fff;
  text-align: center;
}

.fd-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

.fd-cta h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
}

.fd-cta p {
  max-width: 640px;
  margin: 0 auto 34px;
  color: rgba(255,255,255,.68);
  font-size: 17px;
  line-height: 1.72;
}

.fd-cta .fd-actions {
  justify-content: center;
}

.feature-index-hero {
  position: relative;
  overflow: hidden;
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding: 134px 0 82px;
  background:
    linear-gradient(90deg, rgba(7,8,42,.97), rgba(7,8,42,.82)),
    url('https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
  color: #fff;
}

.feature-index-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(248,176,26,.13), transparent 34%),
    linear-gradient(245deg, rgba(20,184,166,.15), transparent 44%);
  pointer-events: none;
}

.feature-index-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 790px;
  margin-left: max(44px, calc((100vw - 1180px) / 2 + 58px));
  margin-right: auto;
}

.feature-index-hero h1 {
  max-width: 780px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1;
}

@media(min-width:901px) {
  .fd-hero-content {
    margin-left: max(24px, calc((100vw - 1180px) / 2)) !important;
    margin-right: auto !important;
    transform: translateX(-24px);
  }

  .feature-index-hero-inner {
    transform: none;
  }

  .page-hero {
    text-align: left !important;
  }

  .page-hero-inner,
  .about-hero-inner {
    margin-left: max(24px, calc((100vw - 1180px) / 2)) !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: left !important;
    transform: translateX(-18px);
  }

  .page-hero p,
  .about-hero p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-hero .page-actions {
    justify-content: flex-start !important;
  }
}

.feature-index-wrap {
  padding: 94px 0 76px;
  background: #fff;
}

.feature-index-wrap > .container {
  padding-left: clamp(32px, 5vw, 70px);
  padding-right: clamp(24px, 4vw, 54px);
}

.feature-index-group {
  padding: 0 0 78px;
}

.feature-index-group + .feature-index-group {
  padding-top: 78px;
  border-top: 1px solid var(--border);
}

.feature-index-group-head {
  display: grid;
  grid-template-columns: minmax(220px, .46fr) 1fr;
  gap: 36px;
  align-items: end;
  margin-bottom: 28px;
}

.feature-index-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.feature-index-card p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.62;
}

@media(max-width:1100px) {
  .nav-drop--wide .nav-drop-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-drop--wide .nd-col:nth-child(3) {
    border-left: 0;
  }

  .fd-card-grid,
  .fd-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-index-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fd-hero-visual-layer {
    width: min(44vw, 520px);
    opacity: .58;
  }
}

@media(max-width:900px) {
  .fd-hero {
    align-items: stretch;
    flex-direction: column-reverse;
    min-height: auto;
    padding: 126px 0 70px;
  }

  .fd-hero-visual-layer {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 620px;
    margin: 42px auto 0;
    opacity: 1;
  }

  .fd-hero-content {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .feature-index-hero-inner,
  .page-hero-inner,
  .about-hero-inner {
    transform: none;
  }

  .feature-index-hero-inner {
    margin-left: 0;
  }

  .feature-index-wrap > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .fd-product-screen {
    transform: none;
  }

  @keyframes fdScreenFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .fd-split,
  .fd-proof,
  .feature-index-group-head {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .fd-photo,
  .fd-photo img {
    min-height: 360px;
  }
}

@media(max-width:768px) {
  .mobile-menu {
    max-height: calc(100vh - 64px);
    overflow: auto;
  }

  .fd-metrics,
  .fd-card-grid,
  .fd-related-grid,
  .feature-index-grid {
    grid-template-columns: 1fr;
  }

  .fd-section,
  .fd-related,
  .fd-cta {
    padding: 72px 0;
  }

  .fd-screen-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:560px) {
  .fd-hero h1,
  .feature-index-hero h1 {
    font-size: clamp(34px, 12vw, 48px);
  }

  .fd-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fd-actions a {
    justify-content: center;
    width: 100%;
  }

  .fd-screen-body {
    grid-template-columns: 1fr;
  }

  .fd-screen-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-product-screen,
  .fd-screen-meter i,
  .fd-screen-card,
  .fd-photo img {
    animation: none !important;
  }
}