:root {
  --nav-link-color: #aeafb1;
  --nav-link-hover: #0F5CE0;
  --cta-start: #1F6BFF;
  --cta-end: #0F5CE0;
  --cta-text: #fff;
  --nav-h: 72px;                /* actual navbar height */
  --hero-radius: 36px;          /* card corner radius */
  --hero-shadow: 0 30px 70px rgba(0,0,0,.45);
  --hero-edge-glow: rgba(255,255,255,.06); /* faint rim light on edges */

  /* layout knobs */
  --hero-reveal: 12px;                           /* visible gap under the nav */
  --page-gutter: clamp(16px, 3.2vw, 40px);       /* card inset from sides */
  --hero-radius: clamp(22px, 3.5vw, 40px);
  --hero-shadow: 0 30px 70px rgba(0,0,0,.45);
  --hero-bg: #131416 ;                          /* #131416  or #1A1F2A*/
  --page-bg: #0D0D0D;
  --accent: #2b66ff;
  --text: #F4F7FF;
  --muted: #b9b9b9;
  --stroke: rgba(255,255,255,.06);
  --raise: 0 18px 60px rgba(0,0,0,.45);
  --raise-hover: 0 26px 80px rgba(0,0,0,.6);

  --glass-bg: color-mix(in oklab, white 6%, transparent);
  --glass-stroke: color-mix(in oklab, white 12%, transparent);
  --radius-xl: 28px;
  --radius-md: 18px;
  --shadow-soft: 0 20px 40px rgba(0,0,0,.35);

  /* === Comparison Section Specific === */
  --compare-brand-1: #2460E0;                       /* Inflate gradient start */
  --compare-brand-2: #5ea0ff;                       /* Inflate gradient end */
  --compare-row-bg-odd: color-mix(in oklab, white 6%, transparent);
  --compare-row-bg-even: color-mix(in oklab, white 4%, transparent);
  --compare-row-stroke: color-mix(in oklab, white 6%, transparent);
  --compare-pill-shadow: 0 12px 24px rgba(36,96,224,.35);
  --compare-pill-radius: 16px;
  --compare-check-bg: radial-gradient(circle at 50% 40%, rgba(36,96,224,.35), rgba(36,96,224,.15) 60%, rgba(0,0,0,.55));
  --review-stagger-pad: clamp(40px, 7.2vw, 96px);
}


/* page background */
html, body { background: var(--page-bg); }

html, body {
  color: #fff; /* optional: make text visible on black */
}


/* Navbar Container */
.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(90deg, rgba(179, 182, 186, 0.05) 0%, rgba(255,255,255,0) 25%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.6rem 0;
}

/* Left (Logo) */
.brand-logo {

}

/* Center Nav Links */
.nav-center .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px;
}
.nav-center .nav-link {
  color: var(--nav-link-color);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-center .nav-link:hover {
  color: var(--nav-link-hover);
}

/* Right (CTA Button) */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 16px rgba(15,92,224,0.25);
}
.btn-cta__label {
  position: relative;
  z-index: 2;
  color: var(--cta-text);
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}
.btn-cta__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cta-start), var(--cta-end));
  border-radius: 999px;
  z-index: 0;
}
.btn-cta__hover {
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  background: var(--cta-end);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 0;
  transform: scale(0.95);
}
.btn-cta:hover .btn-cta__hover {
  opacity: 0.25;
  transform: scale(1);
}

/* Flex layout: left - center - right */
.nav-left,
.nav-right {
  flex: 0 0 auto;
}
.nav-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Make the bar sticky */
.glass-nav{
  position: sticky;
  top: 0;
  z-index: 1050;                 /* above content */
  background: #0D0D0D;
  padding: 0.6rem 0;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

/* When page is scrolled a bit, add subtle tint + shadow */
.glass-nav.scrolled{
  background: linear-gradient(90deg, rgba(15,92,224,0.05) 0%, rgba(255,255,255,0) 25%);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border-bottom-color: rgba(0,0,0,.06);
}

/* Optional: compact height when scrolled */
.glass-nav.compact { padding: 0.4rem 0; }

/* Apply Inter font to navbar and headings */
.glass-nav,
.glass-nav .nav-link,
.btn-cta__label,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
}


.navbar, header{
  background: transparent;
  height: var(--nav-h);
  position: sticky; top: 0; z-index: 50;
}

header, .navbar {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
}

/* ——— Hamburger toggle ——— */
.nav-toggle{
  width: 42px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: color-mix(in oklab, white 6%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
}
.nav-toggle:active{ transform: translateY(1px); }
.nav-toggle:hover{
  background: color-mix(in oklab, white 10%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in oklab, white 18%, transparent);
}

/* Icon: 3 bars */
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  display:block;
  width:20px; height:2px; border-radius:2px;
  background: color-mix(in oklab, white 85%, transparent);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-icon{ position: relative; }
.nav-toggle-icon::before{ position:absolute; top:-6px; left:0; }
.nav-toggle-icon::after{ position:absolute; top:6px; left:0; }

/* Optional: animate into X when expanded (Bootstrap adds .show to #nvxNav) */
#nvxNav.show + .dummy{} /* anchor for specificity */
.navbar-toggler[aria-expanded="true"] .nav-toggle-icon{
  background: transparent;
}
.navbar-toggler[aria-expanded="true"] .nav-toggle-icon::before{
  transform: translateY(6px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .nav-toggle-icon::after{
  transform: translateY(-6px) rotate(-45deg);
}

/* ——— Mobile drawer ——— */
.mobile-drawer{
  background: var(--hero-bg);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.mobile-drawer .container{
  padding-block: clamp(10px, 2.5vw, 16px);
}

/* Links inside drawer */
.mobile-nav-list{ margin: 0 0 12px; padding: 0; }
.mobile-link{
  display: block;
  padding: 12px 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, white 6%, transparent);
  transition: color .2s ease, text-shadow .2s ease, background .2s ease;
}
.mobile-nav-list li:last-child .mobile-link{ border-bottom: 0; }
.mobile-link:hover{
  color: var(--accent);
  text-shadow: 0 0 8px rgba(36,96,224,.35);
  background: color-mix(in oklab, white 4%, transparent);
}

/* CTA inside drawer */
.mobile-cta{
  margin-top: 8px;
  border-radius: 12px;
}

/* ——— Visibility rules ——— */
@media (min-width: 992px){
  .nav-toggle{ display: none !important; }
  .mobile-drawer{ display: none !important; }
}

/* Logo sizing on small screens */
@media (max-width: 991.98px){
  .brand-logo{ max-height: 34px; width: auto; }
}

/* 1) Logo sizing + prevent squeeze */
.nav-left{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.navbar-brand{ margin: 0; padding: 0; }        /* reset BS spacing */
.brand-logo{
  display: block;
  height: 36px;                                 /* desktop logo height */
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;                                /* don't let flex shrink it */
}

/* 2) Keep center truly centered on desktop (doesn't push logo) */
@media (min-width: 992px){
  .glass-nav .container{ position: relative; }
  .nav-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;                                  /* stop consuming row space */
    white-space: nowrap;                         /* prevent wrap jitter */
  }
  /* make sure left/right sit above if overlap happens */
  .nav-left, .nav-right{ position: relative; z-index: 2; }
  .nav-center{ z-index: 1; }
}

/* 3) Tweak gaps on tighter desktops so center doesn’t collide */
@media (min-width: 992px) and (max-width: 1199.98px){
  .nav-center .nav-list{ gap: 18px; }
}

/* 4) Mobile logo scale */
@media (max-width: 991.98px){
  .brand-logo{ height: 30px; }
}


/* HERO as inset card */
.hero{
  position: relative;
  background: var(--hero-bg);
    border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  box-shadow: var(--hero-shadow);
  overflow: hidden;

  /* inset from viewport edges */
  margin-inline: var(--page-gutter);

  /* content spacing — includes nav height so nothing hides under it */
  padding-top: 4vh;
  padding-bottom: clamp(40px, 6vw, 64px);

  /* optional bottom breathing room */
  margin-bottom: clamp(16px, 2.5vw, 28px);
}

/* faint inner rim for crisp edges on dark bg */
.hero::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit; pointer-events:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.06) inset;
}

/* soft top halo so the card feels ‘elevated’ under the nav */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; top:-60px; height:120px;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
  filter: blur(8px);
  opacity:.7;
}

/* keep your existing hero pattern */
.hero-pattern{
  position:absolute; inset:0;
  background-image:url(''); /* your dots */
  background-size: 40.5px auto;
  background-repeat: repeat;
  opacity:.6; pointer-events:none;
}



/* ---- Headline ---- */
.hero-copy h1{
  font-family:'Inter', sans-serif;  /* or Inter Display if you load it */
  font-weight:600;
  font-size: clamp(34px, 6vw, 58px);
  line-height:1.12;
  letter-spacing:-.03em;
  color:#F4F7FF	
}
.hero-copy .accent{ color:#3884ff; }

/* ---- CTA (reuses navbar CTA pieces) ---- */
.btn-cta{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.15rem;
  border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden; isolation:isolate;
  box-shadow:0 10px 28px rgba(36,96,224,.25);
}
.btn-cta__label{
  position:relative; z-index:2;
  color:#fff; font-weight:600; font-size:14.5px; white-space:nowrap;
}
.btn-cta__bg,
.btn-cta__hover{ position:absolute; inset:0; border-radius:10px; }
.btn-cta__bg{ background:#2460E0; z-index:0; }
.btn-cta__hover{
  background:#fff; filter:blur(15px); opacity:0; transition:opacity .25s ease, transform .25s ease;
  transform:scale(.96); z-index:0;
}
.btn-cta:hover .btn-cta__hover{ opacity:.25; transform:scale(1); }



.logo-marquee{
  --gap: clamp(2rem, 6vw, 4rem);
  --speed: 35s;
  --logo-h: clamp(22px, 5vw, 42px);

  position: relative;
  overflow: hidden;
  width: 100%;
  min-block-size: calc(var(--logo-h) + 16px);
  padding-block: 8px;
  display: grid;
  place-items: center;

  /* edge fade on black bg */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.logo-track{
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin: 0; padding: 0;
  list-style: none;
  width: max-content;

  /* single moving strip */
  will-change: transform;
  animation: marquee-x var(--speed) linear infinite;
}

.logo-track > li{ flex: 0 0 auto; }  /* prevent shrink */
.logo-track img{
  height: var(--logo-h);
  width: auto;
  display: block;
  object-fit: contain;
  /* filter: saturate(0) opacity(.75); */
  transition: filter .2s ease;
}
.logo-track img:hover{ filter: none; }

@keyframes marquee-x{
  /* we duplicated content once, so slide only half its total width */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* motion preferences */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; }
}

.hero-video {
  position: relative;
  width: 100%;
  max-width: 53vw;
  margin: 24px auto; /* center & add spacing */
  aspect-ratio: 16 / 9; /* keeps 16:9 shape */
  border-radius: 12px;  /* smooth edges */
  overflow: hidden;     /* ensures rounded corners work */
  box-shadow: 0 8px 28px rgba(0,0,0,0.35); /* subtle depth */
}

.hero-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.py-100{ padding-block: clamp(56px, 8vw, 120px); }

/* section heading */
.section-eyebrow{
  display:inline-block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.75rem;
}
#solutions h2{
  color:var(--text);
  font-size:clamp(28px, 4.5vw, 48px);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .5rem;
  text-wrap:balance;
}
#solutions .lead{
  color:var(--muted);
  max-width:60ch;
  margin-inline:auto;
}

/* service cards */
.service-card{
  background:var(--hero-bg);
  border:1px solid var(--stroke);
  border-radius:24px;
  box-shadow:var(--raise);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow:var(--raise-hover);
  border-color: rgba(255,255,255,.1);
}

/* top illustration area */
.service-art{
  position:relative;
  padding: clamp(22px, 3.2vw, 32px);
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(70% 60% at 80% 20%, rgba(43,102,255,.15), transparent 70%),
    radial-gradient(70% 60% at 20% 10%, rgba(255,255,255,.05), transparent 70%),
    var(--hero-bg);
}
.service-art img{
  display:block;
  width:min(360px, 80%);
  margin-inline:auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
}

/* body */
.service-card .card-body{
  padding: clamp(18px, 3vw, 28px);
}
.service-card h5{
  color:var(--text);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 .25rem;
}
.service-card h5 .bi{ color:var(--accent); opacity:.9; }
.service-card p,
.service-card li{ color:var(--muted); }
.service-card ul{
  margin:0; padding:0; list-style:none;
}
.service-card ul li{
  position:relative;
  padding-left:1.1rem;
  line-height:1.6;
}
.service-card ul li::before{
  content:"•";
  position:absolute; left:0; top:0;
  color:var(--accent);
  opacity:.9;
}

/* responsive tweaks */
@media (max-width: 575.98px){
  .service-art img{ width: 92%; }
}

/* Card keeps your existing look */
.section-card {
  background: var(--hero-bg);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: clamp(24px, 4vw, 48px);
  margin-bottom: 40px;
}

/* card frame */
.case-video{
  display:flex;
  justify-content: center;
    height: 400px!important;
    width: auto!important;
  margin:0 auto;
  aspect-ratio:16/9;           /* default */
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 4px 30px rgba(0,0,0,.4);
}
/* for this clip (1080x1080) */
.case-video.is-square{ aspect-ratio:1/1; }

/* video fills the card */
.video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;            /* fill inside the card */
  object-position:center;
  display:block;
  border:0;
}

/* reliable fullscreen rules */
.video-el.is-fs{               /* toggled by JS below */
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none;
  max-height:none;
  object-fit:contain !important;  /* <-- no crop in fullscreen */
  background:#000;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* also try native :fullscreen when supported */
video:fullscreen,
video:-webkit-full-screen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  object-fit:contain;
  background:#000;
  border-radius:0;
  box-shadow:none;
}

.video-testimonials.section-card{
  background: var(--section-card);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-soft);
}

/* grid of 4 */
.video-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.2vw, 24px);
}
@media (max-width: 1200px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .video-grid{ grid-template-columns: 1fr; }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two per row */
  gap: clamp(14px, 2.2vw, 24px);
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr; /* stack for mobile */
  }
}

/* inner “glass” cards */
.video-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  padding: clamp(12px, 1.7vw, 16px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.video-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, white 22%, transparent);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}

/* responsive iframe */
.testimonial-video .responsive-iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,.06);
}
.testimonial-video iframe{
  width: 100%;
  height: 100%;
  display: block;
}

/* stars & text */
.testimonial-stars{
  margin-top: .75rem;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.testimonial-stars .star{
  color: #FFD76A; /* warm gold */
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.testimonial-title{
  margin: .5rem 0 .25rem;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 700;
  color: #fff;
}
.testimonial-text{
  margin: 0;
  font-size: clamp(13px, 1vw, 14px);
  color: rgba(255,255,255,.8);
}


/* Comparison Section (Why top companies choose Inflate) */
#why-nexvix { background: var(--page-bg); color: var(--text, #fff); }

#why-nexvix .eyebrow{
  text-align:center;
  font-size:12px;
  font-weight:600;
  color: color-mix(in oklab, var(--accent, #2b66ff) 70%, white 30%);
  letter-spacing:.08em;
  margin:0 0 8px;
}

/* Card shell */
.compare-card{
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise, 0 18px 60px rgba(0,0,0,.45));
  padding: clamp(16px, 3vw, 28px);
  position: relative;
  overflow: hidden;
}

/* subtle edge stroke */
.compare-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--stroke);
}

/* header */
.compare-head{
  display:grid;
  grid-template-columns: 1fr minmax(240px, 380px) 1fr;
  align-items:center;
  gap: clamp(8px, 2vw, 20px);
  margin: 6px 6px 18px;
}

.head-cell{
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.head-cell.benefits{ text-align:left; }
.head-cell.other{ text-align:right; }

/* Inflate pill */
.head-brand{ display:flex; justify-content:center; }

.brand-pill{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  /* font-weight:800;  */
  letter-spacing:.08em;
  padding: 14px 28px;
  border-radius: var(--compare-pill-radius, 16px);
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  /* background:#2460E0; */
  box-shadow: var(--compare-pill-shadow, 0 12px 24px rgba(36,96,224,.35)),
              inset 0 1px 0 rgba(255,255,255,.25);
  clip-path: inset(0 round var(--compare-pill-radius, 16px));
}
.brand-pill .brand-glow{
  position:absolute; inset:-12px -16px; border-radius:calc(var(--compare-pill-radius, 16px) + 8px);
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.35), transparent 60%);
  filter: blur(14px); opacity:.4; pointer-events:none;
}

/* rows */
.compare-rows{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}

.compare-row{
  display:grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items:center;
  gap: clamp(8px, 2vw, 20px);
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--compare-row-bg-odd, color-mix(in oklab, white 6%, transparent));
  border: 1px solid var(--compare-row-stroke, color-mix(in oklab, white 6%, transparent));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.compare-row:nth-child(even){
  background: var(--compare-row-bg-even, color-mix(in oklab, white 4%, transparent));
}
.compare-row:hover{
  border-color: color-mix(in oklab, var(--compare-row-stroke, #ffffff0f) 60%, white 40%);
}

/* cells */
.compare-row .benefit{
  font-weight: 500;
  color: var(--text, #fff);
  opacity:.95;
}

/* check / cross badges */
.compare-row .yes,
.compare-row .no{
  display:flex; align-items:center; justify-content:center;
  margin-inline:auto;
  width: 40px; height: 40px; border-radius:999px;
  background: #0c0c0c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.compare-row .yes svg,
.compare-row .no svg{
  width:18px; height:18px; fill:#fff; stroke:#fff; stroke-width:1.4; vector-effect:non-scaling-stroke;
}

.compare-row .yes{
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in oklab, var(--compare-brand-1, var(--brand-1, #2460E0)) 45%, transparent) 0%,
      color-mix(in oklab, var(--compare-brand-1, var(--brand-1, #2460E0)) 20%, transparent) 60%,
      rgba(0,0,0,.55) 100%);
}
.compare-row .no svg{ fill:none; }

/* responsive */
@media (max-width: 900px){
  .compare-head{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .head-cell.benefits, .head-cell.other{ text-align:center; }
  .compare-row{
    grid-template-columns: 1fr 80px 1fr;
  }
}
@media (max-width: 640px){
  .compare-row{
    grid-template-columns: 1fr;
    text-align:center;
    gap:10px;
  }
  .compare-row .benefit{ order:1; }
  .compare-row .yes{ order:2; }
  .compare-row .no{ order:3; }
}

/* Section shell aligns with the rest of the site */
#team { background: var(--page-bg); color: var(--text, #fff); }



#team .eyebrow {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: 
 color-mix(in oklab, var(--accent, #2b66ff) 70%, white 30%);
    letter-spacing: .08em;
    margin: 0 0 8px;
}
.section-card {
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise, 0 18px 60px rgba(0,0,0,.45));
  padding: clamp(18px, 3vw, 28px);
  position: relative; overflow: hidden;
}
.section-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--stroke);
}

.team-swiper .swiper-slide{
  /* display:flex; */
  justify-content:center;
}

/* Swiper frame */
.team-swiper { padding: clamp(14px, 2.4vw, 22px) 8px 40px; position: relative; }
.team-swiper .swiper-wrapper { align-items: stretch; }

/* Glass card */
/* Base card resets for this effect */
.team-card{
  position: relative;
  overflow: hidden;
  height: calc(clamp(420px, 60vh, 680px) - 8px);
  border-radius: var(--radius-md, 16px);
  background: #0b0f14;              /* shows behind contain-scaled images */
  padding: 0;                        /* start clean — no padding until active */
  box-shadow: var(--shadow-soft, 0 20px 40px rgba(0,0,0,.35));
}

/* Full-image layer */
.team-bg,
.team-bg img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.team-bg img{
  object-fit:contain;
  transition: filter .45s ease, transform .6s ease, opacity .35s ease;
  will-change: filter, transform;
}

/* Optional soft vignette for legibility when active */
.team-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(110% 70% at 50% 80%, rgba(0,0,0,.45) 0%, transparent 100%) ,
              linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  color: white;
}

/* Text panel — hidden by default */
.team-copy{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 3.2vw, 28px);
  color: #ffffff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, backdrop-filter .35s ease;
  backdrop-filter: blur(0px);
  background-color: #0a0a0a88;
}

/* Nice, condensed layout for text */
.team-name{ margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.2; }
.team-role{ margin: 0 0 10px; opacity: .85; }
.team-bio { margin: 0; opacity: .9; }

/* ——— ACTIVE STATE (when the slide is centered/active in Swiper) ——— */
.swiper-slide-active .team-card .team-bg img{
  /* filter: blur(6px) brightness(.85) saturate(.95); */
  transform: scale(1.02);
}
.swiper-slide-active .team-card::after{
  opacity: 1;
}
.swiper-slide-active .team-card .team-copy{
  opacity: 1;
  transform: translateY(0);
  backdrop-filter: blur(2px);        /* soft glass behind text for readability */
}

/* (Optional) If you keep the old avatar ring, only show it when active */
.team-avatar{ display:none; }
.swiper-slide-active .team-avatar{ display:grid; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .team-bg img, .team-copy, .team-card::after{ transition: none; }
}


/* Card shell – same vibe as hero, smaller spacing */
.hiw-card{
  position: relative;
  background: var(--hero-bg);
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  overflow: hidden;

  margin-inline: var(--page-gutter);
  margin-top: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(24px, 3vw, 36px);

  padding-top: clamp(22px, 4vw, 36px);
  padding-bottom: clamp(30px, 5vw, 48px);
}

/* inner rim + top halo for depth (same pattern as hero) */
.hiw-card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.06) inset;
}
.hiw-card::after{
  content:"";
  position:absolute; left:0; right:0; top:-50px; height:100px;
  pointer-events:none;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08), transparent 55%);
  filter: blur(8px);
  opacity:.7;
}

/* reuse your existing pattern hook */
.hiw-card .hero-pattern{
  position:absolute; inset:0;
  background-image: url(''); /* same dots if you want */
  background-size: 40.5px auto;
  background-repeat: repeat;
  opacity:.55; pointer-events:none;
}

/* content constraints */
.hiw-copy{ max-width: 980px; margin-inline: auto; }
.hiw-copy .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color: color-mix(in oklab, white 65%, transparent);
  margin:0 0 6px;
  text-transform: uppercase;
}

/* smaller title than hero */
.hiw-title{
  margin:0 0 clamp(12px, 2.2vw, 16px);
  font-weight: 600;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
}
.hiw-title .accent{ color: var(--accent); }

/* video: slightly smaller than hero, responsive 16:9 */
.hiw-video{
  width: min(100%, 880px);
  aspect-ratio: 16 / 9;
  margin: 0 auto clamp(14px, 2.4vw, 18px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  border: 1px solid var(--stroke);
  background: #0b0b0b;
}
.hiw-video iframe{
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

/* keep your CTA styles; just tighten the spacing */
#how-it-works .btn-cta{ margin-top: clamp(6px, 1.6vw, 10px); }

/* mobile tweaks */
@media (max-width: 720px){
  .hiw-video{ border-radius: 12px; }
}


/* Booking card shell (same vibe as hero/section-card) */
.book-card{
  position: relative;
  background: var(--hero-bg);
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  overflow: hidden;

  margin-inline: var(--page-gutter);
  margin-top: clamp(18px, 3vw, 28px);
  margin-bottom: clamp(24px, 3.5vw, 40px);

  padding-top: clamp(28px, 5vw, 48px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

/* faint inner rim + soft top halo for depth */
.book-card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
.book-card::after{
  content:"";
  position:absolute; left:0; right:0; top:-50px; height:110px; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08), transparent 55%);
  filter: blur(8px);
  opacity:.7;
}

/* optional dotted background, reuses your existing hook */
.book-card .hero-pattern{
  position:absolute; inset:0;
  background-image: url(''); /* keep empty or plug your dot texture */
  background-size: 40.5px auto;
  background-repeat: repeat;
  opacity:.55; pointer-events:none;
}

/* Heading + sub */
.book-copy{ max-width: 980px; margin-inline: auto; }
.book-title{
  margin: 0 0 4px;
  font-size: clamp(26px, 4.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
}
.book-sub{
  margin: 0 0 clamp(14px, 2.2vw, 18px);
  color: var(--muted);
}

/* Calendly container – framed like a video
.book-cal{
  width: min(100%, 1000px);
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: #0b0b0b;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
} */

/* Make the Calendly inline widget responsive in height */
/* .calendly-inline-widget {
  min-width: 280px;
  height: 100vh;
} */

/* Ensure Calendly’s injected iframe fills the box cleanly */
/* .calendly-inline-widget iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
} */

/* Small viewports: slightly softer rounding */
/* @media (max-width: 720px){
  .book-cal{ border-radius: 12px; }
} */

/* Section shell */
#contact.contact-area{
  background: var(--page-bg);
  color: var(--text, #fff);
  padding-block: clamp(56px, 8vw, 100px);
}

/* Card container (same DNA as other section-cards) */
.contact-card{
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  padding: clamp(20px, 3.2vw, 36px);
  position: relative;
  overflow: hidden;
}
.contact-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--stroke);
}

/* Eyebrow */
#contact .eyebrow{
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: color-mix(in oklab, white 55%, transparent);
  margin-bottom: 6px; text-transform: uppercase;
}

/* Form grid */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 22px);
  margin-top: clamp(10px, 2vw, 18px);
}
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-span-2{ grid-column: 1 / -1; }

/* Labels */
.contact-card .form-label{
  font-size: 13px; font-weight: 600;
  color: var(--muted);
}

/* Inputs, selects, textarea -> glassy */
.contact-card .form-control,
.contact-card .form-select{
  appearance: none;
  background: color-mix(in oklab, white 4%, transparent);
  border: 1px solid var(--stroke);
  color: var(--text, #fff);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  line-height: 1.35;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.12);
}
.contact-card .form-textarea{ min-height: 160px; resize: vertical; }
.contact-card .form-control::placeholder{ color: color-mix(in oklab, white 45%, transparent); }

/* Focus + hover */
.contact-card .form-control:focus,
.contact-card .form-select:focus{
  border-color: color-mix(in oklab, var(--accent, #2460E0) 65%, white 0%);
  box-shadow: 0 0 0 4px rgba(36,96,224,.18);
  background: color-mix(in oklab, white 7%, transparent);
}
.contact-card .form-control:hover,
.contact-card .form-select:hover{
  border-color: color-mix(in oklab, white 22%, transparent);
}

/* Select caret */
.contact-card .form-select{
  background-image:
    linear-gradient(45deg, transparent 50%, #999 50%),
    linear-gradient(135deg, #999 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Actions */
.form-actions{
  display:flex; justify-content:flex-start; gap:12px; margin-top: 4px;
}
.form-actions .btn-cta{ transform: translateZ(0); }
.form-actions .btn-cta:hover{ box-shadow: var(--raise-hover); }

/* Responsive */
@media (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-actions{ justify-content:center; }
}

.text-muted {
    --bs-text-opacity: 1;
    color:#A9B4C7			!important;
}



/* ---- Section shell ---- */
#testimonials{
  background: var(--page-bg);
  color: var(--text);
}

/* spacing helpers */
.py-100{ padding-block: clamp(56px, 8vw, 100px); }
.mb-3{ margin-bottom: .75rem; }
.mb-5{ margin-bottom: clamp(16px, 3vw, 32px); }

/* Eyebrow + heading */
#testimonials .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: color-mix(in oklab, white 55%, transparent);
  margin:0 0 6px;
}
#testimonials .h2{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 4.2vw, 42px);
  letter-spacing: -0.02em;
}

/* ---- Grid ---- */
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: auto;
  gap: clamp(12px, 2vw, 18px);
}

/* Slightly taller option (kept modest) */
.review-card{ grid-row: span 1; }
.review-card.span-rows-2{ min-height: 360px; }

/* ---- Card ---- */
.review-card{
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 260px;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  margin-top: 0; /* for stagger adjustments */
}
.review-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; box-shadow: inset 0 0 0 1px var(--stroke);
}
.review-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--raise-hover);
}

/* Media (top screenshot / placeholder) */
.review-media{
  position:relative; aspect-ratio: 16 / 9; overflow:hidden;
  background: color-mix(in oklab, white 5%, transparent);
  border-bottom: 1px solid var(--stroke);
}
.review-media img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter: saturate(.9) contrast(1.02);
}

/* Header brand row */
.review-head {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Optional: align them to the left */
  gap: 10px;
  padding: 0 14px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  object-fit:contain; flex:0 0 auto; filter:brightness(1.1);
}
.brand-name{
  font-size:13px; font-weight:700; letter-spacing:.01em;
  color:#fff;
}

/* Body copy */
.review-body{
  padding: 8px 14px 12px;
  color: color-mix(in oklab, white 88%, transparent);
  font-size: 13.5px; line-height: 1.55;
  flex: 1 1 auto;
}

/* Meta row */
.review-meta{
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px 14px;
  border-top: 1px solid color-mix(in oklab, white 4%, transparent);
}
.review-meta .avatar{
  width:28px; height:28px; border-radius:999px; object-fit:cover; flex:0 0 auto;
  box-shadow: 0 0 0 1px var(--stroke);
}
.review-meta .who{ display:flex; flex-direction:column; line-height:1.2; }
.review-meta .name{
  font-size: 13px; font-weight: 600; color:#fff;
}
.review-meta .role{
  font-size: 12px; color: color-mix(in oklab, white 60%, transparent);
}
.review-meta .verified{
  margin-left:auto; font-size:12px; line-height:1; color:#77c9ff;
  border:1px solid color-mix(in oklab, white 18%, transparent);
  border-radius:999px; width:18px; height:18px; display:inline-grid; place-items:center;
  background: color-mix(in oklab, white 6%, transparent);
}

/* Hover lift */
.review-card:hover .avatar{ box-shadow: 0 0 0 2px rgba(123,170,255,.25); }
.review-card:hover .brand-logo{ filter: drop-shadow(0 0 6px rgba(123,170,255,.25)); }

/* ===== Stagger (now using margin so it’s visible) ===== */
:root{ --review-stagger-gap: clamp(20px, 3.6vw, 48px); }

/* Apply stagger only on 3-column layout */
@media (min-width: 1101px){
  /* Offset columns 1 and 3 in *every* row */
  .reviews-grid .review-card:nth-child(3n + 1),
  .reviews-grid .review-card:nth-child(3n + 3){
    margin-top: var(--review-stagger-gap);
  }
}

/* Remove stagger on smaller layouts */
@media (max-width: 1100px){
  .reviews-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .reviews-grid .review-card{ margin-top: 0; }
}
@media (max-width: 640px){
  .reviews-grid{ grid-template-columns: 1fr; }
  .review-card{ margin-top: 0; }
}


.text-muted .intro{
  color:#A9B4C7;	
}

.highlight-color{
  color: #3884ff !important;
}

.header-font-color{
  color:#F4F7FF;
}

.icon-color{
  color: #a2a2a2ba;
  font-size: 0.75rem!important;
  padding-right: 0.5rem;
}

/* #custom {
  font-size: 0.75em!important;
} */

/* ===== Swiper shell for testimonials ===== */

.reviews-viewport{
  position: relative;
  overflow: hidden;          /* << kills horizontal scrollbar */
  /* small padding so card shadows aren’t hard-clipped */
  padding-inline: 6px;
}
.reviews-swiper {
  overflow: visible; /* let shadows show outside slides */
  padding-inline: 6px; /* tiny breathing room so mask fade looks nicer */

  /* Side fade—same concept as the logo marquee */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.75) 4%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.75) 96%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.75) 4%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.75) 96%,
    transparent 100%
  );
}

/* Slides should auto-height to their card content */
.reviews-swiper .swiper-slide {
  height: auto;
}
.reviews-swiper .swiper-slide > .review-card {
  height: 100%;
}

/* Nav arrows — match your dark theme */
.reviews-swiper .swiper-button-prev,
.reviews-swiper .swiper-button-next {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: color-mix(in oklab, white 8%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 1px var(--stroke);
  color: #fff;
}
.reviews-swiper .swiper-button-prev::after,
.reviews-swiper .swiper-button-next::after {
  font-size: 14px;
  font-weight: 700;
}
.reviews-swiper .swiper-button-prev:hover,
.reviews-swiper .swiper-button-next:hover {
  background: color-mix(in oklab, white 12%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklab, white 20%, transparent);
}

/* Pagination bullets */
.reviews-swiper .swiper-pagination-bullet {
  background: color-mix(in oklab, white 35%, transparent);
  opacity: .6;
}
.reviews-swiper .swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}

/* Optional: keep those mildly “taller” cards subtle */
.review-card.span-rows-2 .review-body {
  max-height: 10.5rem; /* trim extreme tall ones */
  overflow: hidden;
}


.case-study-video{
  /* padding-left: 5rem; */
}

  .testimonial-stars {
    /* margin: 8px 0; */
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 1px;
    color: #ffd700;
  }

 .testimonial-stars {
  display: flex;
  gap: 0.25rem;
}

.star {
  color: #f5c518;
  font-size: 1.25rem;
} 

#bds .review-media img{
  background-color: white;
}

#fabian .review-media img{
  background-color: rgb(42, 41, 41);
}

.testimonial-video video{
  width: 33.5vw;
  height: auto;
}


.team-copy {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 80%);
  color: #fff; /* pure white text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* adds crispness */
}

.team-name,
.team-role,
.team-bio {
  color: #ffffff; /* ensure pure white */
}


/* Wrapper for spacing */
.fallback-links {
  margin-top: clamp(12px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Muted text links */
.fallback-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Hover effect: soft accent glow */
.fallback-link:hover {
  color: var(--accent);
  text-shadow: 0 0 6px rgba(36, 96, 224, 0.35);
}


/* Responsive square video */
.case-video{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;          /* square */
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--hero-bg);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);

}

/* Video fills the box without cropping */
.case-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* show whole video (no crop) */
  /* border: 0; */
  border: 1px solid var(--stroke);
  border-radius: 16px;           /* keep your rounding */
  overflow: hidden;
}

/* Column padding: only add the left offset on large screens */
.case-study-video{ padding-left: 0; }
@media (min-width: 992px){
  /* .case-study-video{ padding-left: 5rem; } */
}

/* Optional: limit max size on wide desktops so it doesn’t look oversized */
@media (min-width: 1200px){
  .case-video{ max-width: 560px; margin-inline: auto; }
}


/* Footer shell */
.site-footer{
  background: var(--page-bg);
  color: var(--text);
  padding-block: clamp(36px, 6vw, 72px);
}

.footer-card{
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  padding: clamp(18px, 3vw, 28px);
  position: relative;
  overflow: hidden;
}
.footer-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--stroke);   /* subtle rim like your cards */
}

/* Brand / logo */
.footer-logo{
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(1.1);
}
@media (min-width: 992px){
  .footer-logo{ height: 36px; }
}

/* Social buttons */
.social-btn{
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  color: color-mix(in oklab, white 92%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  transition: transform .1s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, white 10%, transparent);
  border-color: color-mix(in oklab, white 18%, transparent);
  color: var(--accent);
}

/* Email link */
.footer-mail{
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-mail:hover{
  color: var(--accent);
  text-shadow: 0 0 6px rgba(36,96,224,.35);
}

/* Link lists */
.footer-nav li + li{ margin-top: 8px; }
.footer-nav a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-nav a:hover{
  color: var(--accent);
  text-shadow: 0 0 6px rgba(36,96,224,.35);
}

/* Legal bar */
.footer-legal{
  border-top: 1px solid var(--stroke);
}
.legal-text{
  color: color-mix(in oklab, white 70%, transparent);
  font-size: 14px;
  line-height: 1.5;
}

/* Responsive spacing tweaks */
@media (max-width: 575.98px){
  .footer-card{ padding: 16px; border-radius: var(--radius-md); }
}

/* ——— Unified band footer (no card look) ——— */
.site-footer--band{
  background: var(--hero-bg);           /* use the card bg across the whole section */
  padding-block: clamp(36px, 6vw, 72px);
}

/* Flatten the inner shell so it blends with the band */
.site-footer--band .footer-card{
  background: transparent;              /* remove inner box color */
  border-radius: 0;                     /* no rounded corners */
  box-shadow: none;                     /* no elevation */
  padding: 0;                           /* let container spacing rule */
  overflow: visible;
}

/* Kill the inner rim */
.site-footer--band .footer-card::after{
  box-shadow: none;
}

/* Keep a subtle separator line above the legal row */
.site-footer--band .footer-legal{
  border-top: 1px solid var(--stroke);
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: clamp(12px, 2vw, 18px);
}



/* ===== CONTACT PAGE (scoped) ===== */
.contact-page {
  background: var(--page-bg);
  color: var(--text);
  padding-block: clamp(56px, 8vw, 100px);
}

/* responsive container aligned to landing spacing */
.contact-page .contact-container {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* “card shell” just like hero/section-card */
.contact-page .contact-card {
  background: var(--hero-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 28px);
}
.contact-page .contact-card::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--stroke);
}

/* grid – 5/7 split on desktop, stacked on mobile */
.contact-page .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 32px);
}
@media (min-width: 992px) {
  .contact-page .contact-grid {
    grid-template-columns: 5fr 7fr;  /* approx col-5 / col-7 */
    align-items: start;
  }
}

/* left info block */
.contact-page .contact-info h1,
.contact-page .contact-info .h1 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
}
.contact-page .contact-info p {
  color: var(--muted);
  margin: 0;
}
.contact-page .info-list {
  list-style: none; padding: 0; margin: clamp(16px, 3vw, 24px) 0 0 0;
  display: grid; gap: 12px;
}
.contact-page .info-item {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
}
.contact-page .info-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  color: color-mix(in oklab, white 92%, transparent);
}

/* socials — reuse your footer button vibe */
.contact-page .socials {
  display: flex; gap: 10px; margin-top: clamp(14px, 2.4vw, 18px);
}
.contact-page .social-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  color: color-mix(in oklab, white 92%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  transition: transform .1s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.contact-page .social-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, white 10%, transparent);
  border-color: color-mix(in oklab, white 18%, transparent);
  color: var(--accent);
}

/* right form card (glass-like) */
.contact-page .form-shell {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2.6vw, 24px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}

/* form grid */
.contact-page .form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 18px);
}
@media (min-width: 576px) {
  .contact-page .form-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* inputs – consistent with your glass inputs elsewhere */
.contact-page .nx-input,
.contact-page .nx-textarea {
  width: 100%;
  color: var(--text);
  background: color-mix(in oklab, white 4%, transparent);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  line-height: 1.35;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .06s ease;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.12);
}
.contact-page .nx-input::placeholder,
.contact-page .nx-textarea::placeholder {
  color: color-mix(in oklab, white 45%, transparent);
}
.contact-page .nx-textarea {
  min-height: 140px; resize: vertical;
}

/* focus/hover */
.contact-page .nx-input:focus,
.contact-page .nx-textarea:focus {
  border-color: color-mix(in oklab, var(--accent, #2460E0) 65%, white 0%);
  box-shadow: 0 0 0 4px rgba(36,96,224,.18);
  background: color-mix(in oklab, white 7%, transparent);
}
.contact-page .nx-input:hover,
.contact-page .nx-textarea:hover {
  border-color: color-mix(in oklab, white 22%, transparent);
}

/* button row */
.contact-page .form-actions {
  display: flex; gap: 12px; margin-top: 6px;
}
.contact-page .form-actions .btn-cta {
  border-radius: 12px;
}

/* reCAPTCHA spacing */
.contact-page .g-recaptcha {
  margin-top: 10px;
}

/* loader (optional) */
.contact-page #preload {
  display: none; /* keep if you want to toggle with JS */
}

/* ===== Old vs New (theme-aligned) ===== */
.ovw-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.6vw, 24px);
  margin-bottom: clamp(18px, 3vw, 28px);
}
@media (max-width: 900px){ .ovw-grid{ grid-template-columns: 1fr; } }

.ovw-card{
  background: var(--hero-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ovw-card:hover{ transform: translateY(-4px); box-shadow: var(--raise-hover); border-color: rgba(255,255,255,.10); }

.ovw-tag{
  position: absolute;
  margin: 12px;
  padding: 6px 10px;
  font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--glass-stroke);
}
.ovw-problem{ background: color-mix(in oklab, #ff3b30 15%, transparent); color: #ffb3ad; }
.ovw-solution{ background: color-mix(in oklab, #19c37d 15%, transparent); color: #b7f5d8; }

.ovw-media{
  position: relative; aspect-ratio: 16/9;
  border-bottom: 1px solid var(--stroke);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--hero-bg);
}
.ovw-media img{
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: saturate(.95) contrast(1.02);
}
.ovw-head{ padding: 16px 16px 6px; }
.ovw-head h3{ margin:0; font-size: clamp(18px, 2.2vw, 22px); }

.ovw-list{
  list-style:none; margin: 0 0 12px; padding: 0 16px 16px;
  display:grid; gap: 10px;
  color: var(--muted);
}
.ovw-list i{ font-size: 16px; margin-right: 8px; }
.ovw-list--bad i{ color: #ff6b6b; }
.ovw-list--good i{ color: #19c37d; }

.ovw-insight{
  margin: 8px 0 18px;
  color: #55e089; /* green emphasis line */
  font-weight: 700;
}

.ovw-bullets .ovw-list{
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  padding-top: 16px; padding-bottom: 16px;
}

/* metrics */
.ovw-metrics{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin: 14px 0 10px;
}
@media (max-width: 720px){ .ovw-metrics{ grid-template-columns: 1fr; } }

.ovw-pill{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
}
.ovw-pill .val{
  font-weight: 800; font-size: clamp(18px, 3.8vw, 24px); color:#fff; letter-spacing:-.02em;
}
.ovw-pill .label{
  color: var(--muted); font-weight: 600; font-size: 13.5px;
}

.ovw-proof{
  color: var(--muted);
  margin-bottom: 14px;
}

/* Grid + cards (same as before; keep if you already added) */
.ovw-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.6vw, 24px); margin-bottom: clamp(18px, 3vw, 28px);
}
@media (max-width: 900px){ .ovw-grid{ grid-template-columns: 1fr; } }

.ovw-card{
  background: var(--hero-bg); border:1px solid var(--stroke);
  border-radius: var(--radius-xl); box-shadow: var(--raise);
  overflow:hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ovw-card:hover{ transform: translateY(-4px); box-shadow: var(--raise-hover); border-color: rgba(255,255,255,.10); }

.ovw-tag{
  position:absolute; margin:12px; padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--glass-stroke); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ovw-problem{ background: color-mix(in oklab, #ff3b30 15%, transparent); color:#ffb3ad; }
.ovw-solution{ background: color-mix(in oklab, #19c37d 15%, transparent); color:#b7f5d8; }

.ovw-media{ position:relative; aspect-ratio:16/9; border-bottom:1px solid var(--stroke);
  background: radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.06), transparent 60%), var(--hero-bg); }
.ovw-media img{ width:100%; height:100%; object-fit:contain; display:block; }

.ovw-head{ padding:16px 16px 6px; }
.ovw-head h3{ margin:0; font-size:clamp(18px, 2.2vw, 22px); }

.ovw-list{ list-style:none; margin:0 0 12px; padding:0 16px 16px; display:grid; gap:10px; color:var(--muted); }
.ovw-list i{ font-size:16px; margin-right:8px; }
.ovw-list--bad i{ color:#ff6b6b; }
.ovw-list--good i{ color:#19c37d; }

/* Metrics with icons */
.ovw-metrics{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2vw, 16px); margin: 14px 0 10px;
}
@media (max-width: 720px){ .ovw-metrics{ grid-template-columns: 1fr; } }

.ovw-pill{
  display:flex; align-items:center; gap:10px;
  background: var(--glass-bg);
  border:1px solid var(--glass-stroke);
  border-radius:14px; padding:12px 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
}
.ovw-ico{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background: color-mix(in oklab, white 6%, transparent);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 0 0 1px var(--stroke);
  color: var(--accent);
}
.ovw-ico .bi{ font-size:18px; line-height:1; }

.ovw-pill .val{
  font-weight:800; font-size:clamp(18px, 3.8vw, 24px); color:#fff; letter-spacing:-.02em;
}
.ovw-pill .label{
  margin-left:auto; color:var(--muted); font-weight:600; font-size:13.5px; text-align:right;
}

/* ===== Who it's for (service businesses) ===== */
.who-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.6vw, 24px);
}
@media (max-width: 992px){ .who-grid{ grid-template-columns: 1fr; } }

.who-card{
  background: var(--hero-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  padding: clamp(16px, 2.4vw, 22px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 160px;
}
.who-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--raise-hover);
  border-color: rgba(255,255,255,.10);
}

.who-icon{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  color: var(--accent);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  margin-bottom: 10px;
}
.who-icon .bi{ font-size: 20px; line-height: 1; }

.who-title{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text);
}
.who-text{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}


.who-card{
  background: var(--hero-bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--raise);
  padding: clamp(22px, 2.8vw, 28px);   /* ⬅️ more breathing room */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;                           /* consistent spacing between elements */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 200px;                   /* ⬅️ ensures cards look balanced */
}

.who-icon{
  width: 48px; height: 48px;           /* slightly larger */
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  color: var(--accent);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
}

.who-title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 20px); /* slightly larger for visibility */
  color: var(--text);
}

.who-text{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* =========================================================
   BENEFITS GRID + CARDS
   ========================================================= */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,3vw,28px);
}
@media (max-width:768px){
  .benefits-grid{ grid-template-columns:1fr; }
}

.benefit-card{
  background:var(--hero-bg);
  border:1px solid var(--stroke);
  border-radius:var(--radius-xl);
  box-shadow:var(--raise);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.benefit-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--raise-hover);
  border-color:rgba(255,255,255,.1);
}

/* media (designed for 1280×720 assets) */
.benefit-media{
  position:relative;
  aspect-ratio:16/9;
  min-height:clamp(180px,52vw,240px);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--stroke);
}
.benefit-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
@media (max-width:768px){
  .benefit-media{ min-height:clamp(200px,56vw,260px); }
}

.benefit-body{ padding:clamp(14px,2.4vw,20px); }
.benefit-title{
  font-weight:700;
  font-size:clamp(16px,1.6vw,20px);
  margin:0 0 .35rem 0;
  color:var(--text);
}
.benefit-text{
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  margin:0;
}

/* =========================================================
   HERO VIDEO (mobile-first)
   ========================================================= */
.hero-video{
  position:relative;
  width:100%;
  max-width:min(980px,92vw);
  margin:clamp(16px,3vw,28px) auto;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.hero-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
}
@media (min-width:1200px){
  .hero-video{ width:60vw; max-width:1100px; }
}

/* =========================================================
   4-STEP TIMELINE (GLASS THEME)
   ========================================================= */
#process .nx-steps{
  /* design tokens */
  --dot:42px;       /* numbered dot diameter */
  --rail-w:2px;     /* rail thickness */
  --gutter:12px;    /* left offset for vertical rail on mobile */

  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,3vw,32px);
  margin-top:clamp(14px,2vw,20px);
}

/* horizontal rail for desktop */
#process .nx-steps__rail{
  position:absolute;
  left:0; right:0;
  top:calc(var(--dot)/2 + 6px);
  height:var(--rail-w);
  background:linear-gradient(90deg,
    color-mix(in oklab, white 12%, transparent),
    color-mix(in oklab, var(--accent) 35%, transparent),
    color-mix(in oklab, white 12%, transparent));
  opacity:.6;
  box-shadow:0 0 20px rgba(36,96,224,.25);
  pointer-events:none;
}

#process .nx-step{ text-align:center; padding-top:10px; }
#process .nx-step__dot{
  width:var(--dot); height:var(--dot);
  margin-inline:auto;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:700; color:#fff;
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px var(--stroke),
    0 0 12px rgba(36,96,224,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#process .nx-step__title{
  margin:.65rem 0 .25rem 0;
  font-weight:700; color:var(--text);
  font-size:clamp(15px,1.6vw,18px);
}
#process .nx-step__desc{
  margin:0; color:var(--muted);
  font-size:clamp(13px,1.3vw,14.5px);
  max-width:32ch; margin-inline:auto;
}

/* hover accent */
@media (hover:hover){
  #process .nx-step:hover .nx-step__dot{
    box-shadow:
      0 12px 28px rgba(0,0,0,.45),
      inset 0 0 0 1px color-mix(in oklab, white 22%, transparent),
      0 0 18px rgba(36,96,224,.45);
  }
}

/* ===== Mobile: vertical timeline with perfect centering ===== */
@media (max-width:768px){
  #process .nx-steps{
    /* tokens */
    --dot: 42px;     /* dot diameter */
    --rail-w: 2px;   /* rail thickness */
    --gutter: 12px;  /* distance from card edge to dot column */

    position: relative;
    grid-template-columns: 1fr;
    row-gap: 22px;

    /* IMPORTANT: only gutter here (no + dot/2) */
    padding-left: var(--gutter);
  }

  /* hide horizontal rail */
  #process .nx-steps__rail{ display:none; }

  /* vertical rail through dot centers */
  #process .nx-steps::before{
    content:"";
    position:absolute;
    left: calc(var(--gutter) + var(--dot) / 2);
    transform: translateX(-50%);        /* center the 2px rail */
    top: calc(var(--dot) / 2);
    bottom: calc(var(--dot) / 2);
    width: var(--rail-w);
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, white 12%, transparent),
      color-mix(in oklab, var(--accent) 35%, transparent),
      color-mix(in oklab, white 12%, transparent)
    );
    box-shadow: 0 0 20px rgba(36,96,224,.25);
    pointer-events: none;
  }

  /* rows: [dot] [content] */
  #process .nx-step{
    display: grid;
    grid-template-columns: var(--dot) 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    min-height: var(--dot);
    padding: 2px 0;
  }

  /* dot centered in its column */
  #process .nx-step__dot{
    grid-column: 1;
    justify-self: center;
    align-self: start;
    margin: 0;
    transform: none;
  }

  #process .nx-step__title{
    grid-column: 2;
    margin: 0 0 6px 0;
  }
  #process .nx-step__desc{
    grid-column: 2;
    margin: 0;
    max-width: 38ch;
  }
}