body {
  background-color: #030303;
  color: #f3f4f6;
  font-family: "Plus Jakarta Sans", sans-serif;
  overflow-x: hidden;
}

/* fixed grid backdrop + soft radial glow */
.grid-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 50px 50px;
}
.grid-bg:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(120,119,198,.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0%, transparent 40%);
}

/* scroll-reveal: toggled by IntersectionObserver in site.js */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.active { opacity: 1; transform: translateY(0); }

.glass-card {
  background: rgba(10,10,10,.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 20px;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.15);
  background: rgba(15,15,15,.66);
  box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 30px rgba(255,255,255,.02);
}
.glass-card.static:hover {
  transform: none;
  border-color: rgba(255,255,255,.05);
  background: rgba(10,10,10,.52);
  box-shadow: none;
}

/* pill CTAs */
.cta-primary, .cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; border-radius: 14px; padding: 0 24px; font-weight: 800; line-height: 1;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cta-primary { border: 1px solid rgba(255,255,255,.92); background: #fff; color: #000; box-shadow: 0 14px 34px rgba(255,255,255,.12); }
.cta-primary:hover { transform: translateY(-2px); border-color: #fff; background: #e5e5e5; box-shadow: 0 18px 44px rgba(255,255,255,.18); }
.cta-secondary { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); color: #fff; }
.cta-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.09); }

/* floating translucent navbar */
.nav-wrap { position: fixed; top: 1rem; left: 0; width: 100%; z-index: 50; padding: 0 1rem; }
@media (min-width: 640px) { .nav-wrap { padding: 0 1.5rem; } }
.nav-shell {
  max-width: 80rem; margin: 0 auto;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: all .3s ease;
}
#mobileMenu { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; opacity: 0; }
#mobileMenu.open { max-height: 450px; opacity: 1; }

.divider { border-top: 1px solid rgba(255,255,255,.05); }

/* marquee */
@keyframes marquee { 0% { transform: translate(0); } to { transform: translate(-50%); } }
.animate-marquee { display: flex; width: fit-content; animation: marquee 40s linear infinite; will-change: transform; backface-visibility: hidden; }
.client-card { transition: transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease, opacity .6s ease; filter: grayscale(100%); opacity: .5; }

/* stats / odometer counters */
.stat-spinner { display: block; width: 34px; height: 34px; margin: 0 auto 8px; border: 3px solid rgba(255,255,255,.12); border-top-color: #fff; border-radius: 999px; animation: stat-spin .8s linear infinite; }
@keyframes stat-spin { to { transform: rotate(360deg); } }
.stat-odometer { display: inline-flex; justify-content: center; gap: 1px; height: 1.1em; overflow: hidden; line-height: 1.1em; }
.odometer-digit { display: inline-block; height: 1.1em; overflow: hidden; }
.odometer-strip { display: flex; flex-direction: column; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.odometer-char { height: 1.1em; }
.graph-path { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 2s cubic-bezier(.16,1,.3,1); }
.active .graph-path { stroke-dashoffset: 0; }

/* feature grid */
.feature-section { position: relative; overflow: hidden; }
.feature-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.feature-card { min-height: 250px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.feature-card-primary { grid-column: span 2; grid-row: span 2; min-height: 520px; padding: 36px; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.015)), rgba(10,10,10,.58); }
.feature-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.feature-icon { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.055); color: #fff; }
.feature-card-primary .feature-icon { width: 64px; height: 64px; border-radius: 18px; }
.feature-number { color: rgba(255,255,255,.2); font-size: 12px; font-weight: 900; letter-spacing: .22em; }

/* why-choose cards */
.why-card { min-height: 245px; }
.why-pill { flex-shrink: 0; max-width: 135px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.04); padding: 7px 11px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center; }

/* FAQ accordion */
.faq-section { position: relative; overflow: hidden; }
.faq-list { position: relative; display: grid; gap: 12px; }
.faq-item { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), rgba(10,10,10,.58); transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.faq-item:has(.faq-question[aria-expanded="true"]) { border-color: rgba(255,255,255,.16); background-color: rgba(15,15,15,.7); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; text-align: left; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.35; }
.faq-icon { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.8); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.faq-question:hover .faq-icon, .faq-question[aria-expanded="true"] .faq-icon { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.16,1,.3,1); }
.faq-answer-inner { padding: 0 24px 24px; color: #a3a3a3; font-size: 14px; line-height: 1.75; }

/* final CTA split panel */
.final-cta-section { position: relative; }
.final-cta {
  position: relative; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 28px; align-items: stretch;
  overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04) 50%, rgba(255,255,255,.02)), rgba(8,8,8,.78);
  padding: clamp(28px,6vw,56px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08);
}
.final-cta:before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, black, transparent 82%);
  mask-image: linear-gradient(90deg, black, transparent 82%);
}
.final-cta-content, .final-cta-panel { position: relative; z-index: 1; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.final-cta-panel { align-self: stretch; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(0,0,0,.28); padding: 24px; }
.final-cta-row { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.04); padding: 13px 14px; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 750; }

@media (max-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature-card-primary { min-height: 360px; }
  .final-cta { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .cta-primary, .cta-secondary { width: 100%; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-primary, .final-cta-secondary { width: 100%; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card-primary { grid-column: auto; grid-row: auto; min-height: 250px; padding: 26px; }
}