/* =========================================================
   Lexend clone - custom stylesheet (Bootstrap 5 based)
   Pixel-matched to the original WordPress theme (light mode only)
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Regular.woff2") format("woff2"),
       url("../fonts/Graphik-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Medium.woff2") format("woff2"),
       url("../fonts/Graphik-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Semibold.woff2") format("woff2"),
       url("../fonts/Graphik-Semibold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mabry Pro";
  src: url("../fonts/MabryPro-Regular.woff2") format("woff2"),
       url("../fonts/MabryPro-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mabry Pro";
  src: url("../fonts/MabryPro-Bold.woff2") format("woff2"),
       url("../fonts/MabryPro-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sharp Grotesk";
  src: url("../fonts/SharpGrotesk-Medium.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root{
  --primary: #16404b;
  --primary-hover: #0e2c34;
  --navy: #0d262d;        /* dark panel bg (solutions/CTA) */
  --accent: #e2ff5e;      /* lime */
  --cream: #f5eee9;
  --hero-bg: #eeff9e;
  --border-soft: rgba(131,131,131,.25);
  --ghost-bg: #e8ecec;
  --ghost-bg-hover: #d0d9db;
  --ink: #101013;
  --shadow-sm: 2px 2px 0 0 #000;
  --shadow-hover: 3px 3px 0 0 #000;
  --shadow-md: 4px 4px 0 0 #000;
  --shadow-lg: 8px 8px 0 0 #000;
  --footer-bg-end: #f3ffbf;
  --heading-font: "Sharp Grotesk", "Graphik", sans-serif;
  --ui-font: "Mabry Pro", "Graphik", sans-serif;

  --bs-primary: var(--primary);
  --bs-primary-rgb: 22, 64, 75;
  --bs-body-font-family: "Graphik", "Segoe UI", sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
}

html { scroll-behavior: smooth; }
body{ font-family: var(--bs-body-font-family); color: var(--bs-body-color); overflow-x: hidden; background:#fff; }
h1,h2,h3,h4,h5,h6{ font-family: var(--heading-font); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
p{ line-height: 1.6; }
a{ text-decoration: none; }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--ui-font);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  height: 48px;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover{ background: var(--primary-hover); color:#fff; }

.btn-ghost{
  background: var(--ghost-bg);
  color: var(--primary);
  height: 56px;
  padding: 0 2.25rem;
}
.btn-ghost:hover{ background: var(--ghost-bg-hover); color: var(--primary); }

/* The signature white "elementor" CTA button: pill, hard shadow, bold.
   Hover turns solid black/near-black with white text, shadow collapses to 0 — matches original exactly. */
.btn-cta{
  background: #fff;
  color: rgb(33,37,41);
  border-radius: 50px;
  height: 56px;
  padding: 0 2.25rem;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ background: rgb(33,37,41); color: #fff; box-shadow: 0 0 0 0; }

/* Teal bg + lime text, no shadow — used by "Browse all integrations" */
.btn-teal-lime{
  background: var(--primary);
  color: var(--accent);
  border-radius: 50px;
  height: 53px;
  padding: 0 2.5rem;
  font-weight: 700;
}
.btn-teal-lime:hover{ background: var(--primary-hover); color: var(--accent); }

/* Lime bg + teal text, no shadow — used by the final "Start free trial with email" CTA */
.btn-lime{
  background: var(--accent);
  color: var(--primary);
  border-radius: 50px;
  height: 53px;
  padding: 0 2.5rem;
  font-weight: 700;
}
.btn-lime:hover{ background:#d3f23f; color: var(--primary); }

/* Plain bold text link with arrow — used by "See all feedbacks" (NOT a button box) */
.btn-text-link{
  color: var(--primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: none;
  padding: 0;
}
.btn-text-link:hover{ color: var(--primary-hover); }

/* ---------- Pill badge (eyebrow) ---------- */
.pill-badge{
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border-soft);
  border-radius: 50px;
  padding: .45rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
}
.pill-badge.on-dark{ border-color: rgba(255,255,255,.25); color:#fff; }

/* ---------- Top banner ---------- */
.top-banner{
  background: linear-gradient(to right, var(--primary), var(--navy));
  color: #fff;
  font-size: .875rem;
  padding: .6rem 1rem;
  text-align: center;
}
.top-banner a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(131,131,131,.4);
  padding-bottom: 1px;
}
.top-banner .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); opacity: .8; }

/* ---------- Logo hover (brand book motion spec: 350ms ease-out, scale 1.06) ----------
   Oxen-only — [data-brand="oxen"] is set by brand.js; on the Anomoz proxy the
   root gets data-brand="anomoz" instead, so this never runs there. */
html[data-brand="oxen"] .brand-logo-link img{
  transition: transform .35s ease-out;
}
html[data-brand="oxen"] .brand-logo-link:hover img{
  transform: scale(1.06);
}

/* ---------- Navbar ---------- */
/* Default: overlays the hero background (absolute, no flow space) — matches original.
   Once scrolled past the hero, JS switches it to a fixed, frosted, hide-on-scroll bar. */
.navbar{
  padding-top: .85rem;
  padding-bottom: .85rem;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, transform .3s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.navbar.is-sticky{
  position: fixed;
  background-color: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.navbar.nav-hide{ transform: translateY(-100%); }
.navbar-brand img{ height: 40px; }

/* Nav links: 16px/400 Mabry Pro, 24px gap between items — matches original exactly */
.main-nav{ gap: 24px; }
.nav-link{
  font-family: var(--ui-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink) !important;
  padding: 0 !important;
  position: relative;
  opacity: 1;
  transition: opacity .15s ease;
}
.nav-link:hover{ opacity: .75; }
.dropdown-toggle::after{ vertical-align: 2px; margin-left: .35rem; }

/* ---------- "Which case studies?" choice menu (topmenu.php) ---------- */
.case-dd{ position: relative; }
.case-dd-toggle i{ font-size: .65rem; margin-left: .2rem; transition: transform .2s ease; }
.case-dd.open .case-dd-toggle i{ transform: rotate(180deg); }
.case-menu{
  position: absolute; top: calc(100% + 16px); left: 50%;
  width: 340px; padding: .9rem;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1040;
}
.case-menu::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.case-dd.open .case-menu{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
@media (hover:hover) and (min-width: 992px){
  .case-dd:hover .case-menu{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
  .case-dd:hover .case-dd-toggle i{ transform: rotate(180deg); }
}
.case-menu-title{ font-family: var(--ui-font); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(16,16,19,.5); padding: .1rem .35rem .6rem; }
.case-opt{
  display: flex; align-items: center; gap: .8rem; padding: .75rem; border-radius: 12px;
  color: var(--ink); border: 1px solid transparent; transition: background-color .15s, border-color .15s;
}
.case-opt + .case-opt{ margin-top: .25rem; }
.case-opt:hover{ background: #F4FFD1; border-color: var(--accent); color: var(--ink); }
.case-opt .ic{ width: 40px; height: 40px; border-radius: 10px; flex: none; display:flex; align-items:center; justify-content:center; background: var(--navy); color: var(--accent); font-size: 1.05rem; }
.case-opt .ic.seo{ background: var(--accent); color: var(--primary); }
.case-opt strong{ display:block; font-size: .95rem; line-height: 1.2; }
.case-opt small{ display:block; font-size: .76rem; color: rgba(16,16,19,.55); margin-top: .15rem; line-height: 1.3; }
.case-opt .go{ margin-left: auto; color: rgba(16,16,19,.3); }
.case-opt:hover .go{ color: var(--primary); }

/* The "green sort of thing" — a 3px inset bar in primary color at the TOP of the
   link while its mega-menu is open, exactly matching the original's
   `.uc-navbar-nav>li>a[aria-expanded=true]{box-shadow:inset 0 3px var(--color-primary)}` */
.nav-link.dropdown-toggle[aria-expanded="true"]{
  opacity: .75;
  box-shadow: inset 0 3px var(--primary);
}

.nav-side-link{
  font-family: var(--ui-font);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.nav-side-link:hover{ color: var(--primary); }
.btn-nav-signup{
  height: 40px;
  padding: 0 12px;
  font-size: 1rem;
  font-weight: 700;
}

/* Mega dropdown panel — soft shadow (not the hard/offset style used elsewhere),
   matches original: 0 24px 32px -1.6px rgba(0,0,0,.15) */
.dropdown-menu-mega{
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: 0 24px 32px -1.6px rgba(0,0,0,.15);
  padding: 2.5rem 0;
  margin-top: .85rem !important;
}
.mega-col-title{ font-family: var(--heading-font); font-size: 18px; font-weight: 700; margin-bottom: 1rem; }
.mega-link{ display: flex; gap: .65rem; align-items: flex-start; padding: .55rem 0; color: var(--ink); }
.mega-link:hover{ color: var(--primary); }
.mega-link .icon-wrap{
  width: 36px; height: 36px; flex: none;
  display: flex; align-items:center; justify-content:center;
  border-radius: 8px; background: var(--ink); color:#fff; font-size: 1rem;
}
.mega-link .mega-link-title{ font-weight: 500; display:block; font-size: 14px; }
.mega-link .mega-link-desc{ font-size: 12px; color: rgba(0,0,0,.5); display:block; }
.mega-cta-box{ background: #f6f6f6; border-radius: 1rem; padding: 1.5rem; height: 100%; }

/* ---------- Mobile hamburger (animated 3-line -> X, matches the original's morph) ---------- */
.hamburger-toggle{
  /* 44px keeps the tap target at the accessible minimum on phones; the
     22px bars inside keep it looking the same size as before. */
  width: 44px; height: 44px;
  margin-right: -6px;
  border: none; background: transparent; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger-toggle .line{
  display:block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.hamburger-toggle[aria-expanded="true"] .line-1{ transform: translateY(7px) rotate(45deg); }
.hamburger-toggle[aria-expanded="true"] .line-2{ opacity: 0; }
.hamburger-toggle[aria-expanded="true"] .line-3{ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile offcanvas menu ---------- */
.mobile-menu-panel{ width: 270px !important; }
.mobile-menu-panel .offcanvas-header{ padding: 20px 20px 0; }
.mobile-menu-panel .offcanvas-body{ padding: 16px 20px 20px; }
.mobile-logo-mark img{ width: 32px; height: 32px; display:block; }
.offcanvas-close-btn{
  width: 44px; height: 44px;
  border: none; background: transparent;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: .6;
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.offcanvas-close-btn:hover{ color: var(--primary); opacity: 1; transform: rotate(90deg); }

.mobile-search{ position: relative; }
.mobile-search .form-control{
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  font-size: 14px;
  padding: .55rem 2.25rem .55rem .75rem;
}
.mobile-search i{
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  color: rgba(0,0,0,.4); font-size: .9rem; pointer-events: none;
}

.nav-y-mobile{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.nav-y-mobile a{
  font-family: var(--ui-font);
  font-size: 1rem; font-weight: 500;
  color: var(--ink);
  display: block; padding: .5rem 0;
}
.nav-y-mobile a:hover{ color: var(--primary); }

.mobile-social-icons{ list-style:none; padding:0; margin:0; display:flex; gap:.5rem; }
.mobile-social-icons a{
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  border: 1px solid var(--border-soft); color: var(--ink);
}
.mobile-social-icons a:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Hero ---------- */
.hero-section{
  background-color: var(--hero-bg);
  background-image: linear-gradient(rgba(255,255,255,0) 45%, #fff 100%);
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 64px;
}
@media (max-width: 767.98px){
  .hero-section{ padding-top: 76px; padding-bottom: 40px; }
}
.hero-section h1{ font-size: 48px; line-height: 1.1; font-weight: 700; }
@media (max-width:767.98px){ .hero-section h1{ font-size: 32px; } }
.hero-highlight{ background: var(--primary); color: var(--accent); padding: 0 .3rem; border-radius: 6px; }
/* Typed.js swap-word line — fixed min-height so the line never collapses
   mid-delete, and it always sits on its own <br>-separated line, so the
   surrounding heading text never re-wraps and the page never jumps as the
   word types/deletes (was causing visible layout shift on the homepage). */
.typed-line{ display: inline-block; min-height: 1.15em; }
@media (max-width: 767.98px){ .typed-line{ min-height: 1.1em; } }
.hero-float-icon{ position: absolute; filter: drop-shadow(0 8px 16px rgba(0,0,0,.08)); }
.hero-sub{ font-size: 1rem; color: rgba(16,16,19,.65); }
.hero-feature-list{ font-size: .9rem; font-weight: 500; }
.hero-feature-list img{ width: 20px; height: 20px; }
.hero-video-frame{
  max-width: 1000px; margin: 2.5rem auto 0;
  border-radius: 1.25rem; overflow: hidden;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: var(--shadow-lg);
  transform-origin: center top;
  will-change: transform;
}
.hero-video-frame video{ width: 100%; display:block; }

/* ---------- Section basics ---------- */
section{ padding: 5rem 0; }
.section-eyebrow{ margin-bottom: 1.25rem; }
.section-heading{ font-size: 32px; margin-bottom: .75rem; }
.section-sub{ color: rgba(16,16,19,.6); font-size: 1.05rem; }
.text-accent-box{ background: var(--accent); padding: 0 .35rem; border-radius: 6px; }

/* ---------- Logo marquee ---------- */
.logo-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track{ display: flex; align-items: center; gap: 4.5rem; width: max-content; animation: marquee 30s linear infinite; }
.logo-track img{ height: 28px; width: auto; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Integration tabs ---------- */
.integration-tabs .nav-link{
  border: 1px solid var(--border-soft);
  border-radius: 50px;
  color: rgba(16,16,19,.7);
  font-weight: 500;
  font-size: .95rem;
  padding: .6rem 1.25rem !important;
  background: transparent;
}
.integration-tabs .nav-link.active{
  background: var(--accent) !important;
  color: var(--primary) !important;
  border-color: var(--accent);
  font-weight: 700;
}

/* ---------- Cards (integrations / blog) ---------- */
.card-hover{
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  background: #fff;
}
.card-hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #000; }

.integration-card .integration-thumb{
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.integration-card .card-body-pad{ padding: 1.5rem; }
.get-started-link{ color: var(--primary); font-weight: 500; font-size: .95rem; display:inline-flex; align-items:center; gap:.35rem; }
.get-started-link:hover{ color: var(--primary-hover); }

/* ---------- Dark panel (Solutions + CTA combined, matches original exactly) ---------- */
.dark-panel{
  background: var(--navy);
  border-radius: 32px;
  color: #fff;
  padding: 130px 15px;
  position: relative;
  overflow: hidden;
}
.dark-panel .panel-inner{ max-width: 1008px; margin: 0 auto; }
.dark-panel h2, .dark-panel h4{ color: #fff; }
.dark-panel .section-sub{ color: rgba(255,255,255,.65); }

/* Final CTA panel — same shape family, different gradient + tighter padding */
.final-cta-panel{
  background: linear-gradient(45deg, #16404b 0%, #091a1e 100%);
  border-radius: 16px;
  padding: 64px;
}
/* Wider than the standard .container so the closing CTA reads as the biggest
   moment on the page. Used via .cta-container on the wrapping div. */
.cta-container{ max-width: 1420px; }
.final-cta-panel{ padding: 52px 56px; }

/* Two columns: copy on the left, the actions block on the right. Replaces a
   centred stack that ran ~500px tall and left a thin column of text adrift
   in a very wide panel. */
.cta-split{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: center;
  text-align: left;
}
.cta-copy h2{
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.22;
  margin: 0 0 .85rem;
  max-width: 620px;
}
.cta-sub{
  color: rgba(255,255,255,.68);
  font-size: .97rem;
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}

/* Founder credit sits with the copy — a face, at a size that doesn't push
   the whole panel taller. */
.cta-founder{ display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.cta-founder-photo{
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.85); flex: none;
}
.cta-founder-meta{ display: flex; flex-direction: column; line-height: 1.3; }
.cta-founder-meta strong{ color: #fff; font-size: .92rem; }
.cta-founder-meta small{ color: rgba(255,255,255,.55); font-size: .78rem; }

.cta-actions{ display: flex; flex-direction: column; gap: .7rem; }
.cta-actions .btn{ width: 100%; }
.cta-trust{
  list-style: none; padding: 0; margin: .55rem 0 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.cta-trust li{
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.cta-trust i{ color: var(--accent); }

/* A highlight that wraps onto a second line renders as one ragged shape
   unless each line-box gets its own padding and rounded corners. */
.text-accent-box{
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* Secondary button for use on the dark CTA panel — outlined, so the lime
   "Book a call" stays the single obvious primary action. */
.btn-cta-outline{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  height: 53px;          /* matches .btn-lime so the pair sits level */
  padding: 0 2rem;
}
.btn-cta-outline:hover{ background: rgba(255,255,255,.1); color:#fff; border-color:#fff; }

@media (max-width: 991.98px){
  /* Stack the two columns, and re-centre everything so it doesn't read as a
     broken grid on tablet/phone. */
  .cta-split{ grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .cta-copy h2, .cta-sub{ max-width: 640px; margin-left: auto; margin-right: auto; }
  .cta-founder{ justify-content: center; }
  .cta-trust{ align-items: center; }
  .final-cta-panel{ padding: 44px 32px; }
}
@media (max-width: 575.98px){
  .final-cta-panel{ padding: 36px 20px; border-radius: 20px; }
  .cta-founder-meta small{ font-size: .72rem; }
}

/* Header block: pill + heading + subtext stacked in one centered column (not split 2-col) */
.solutions-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.solutions-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4rem; margin-bottom: 8rem; }
@media (max-width: 1024px){ .solutions-grid{ grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; margin-bottom: 4rem; } }
@media (max-width: 767.98px){ .solutions-grid{ grid-template-columns: 1fr; margin-top: 3rem; margin-bottom: 3rem; } }

/* Each feature item: icon stacked ABOVE text, everything centered (vstack, not a row) */
.features-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.feature-icon-box{
  width: 48px; height: 48px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items:center; justify-content:center;
  flex: none;
  color: var(--primary); /* lime never carries white text/icons — brand book rule */
  font-size: 1.2rem;
}
.feature-icon-box img{ width: 24px; height: 24px; }
.feature-row-title{ color:#fff; font-weight: 700; font-size: 18px; margin: 0; font-family: var(--heading-font); }
.feature-row-desc{ color: rgba(255,255,255,.6); font-size: .9rem; margin:0; }
.dark-panel .decor-img{ position:absolute; opacity:.95; }
.solutions-cta{ padding-top: 1rem; }
.solutions-cta h4{ font-size: 2rem; font-weight: 700; }
@media (max-width: 767.98px){ .solutions-cta h4{ font-size: 1.5rem; } }

@media (max-width: 991.98px){
  .dark-panel{ padding: 100px 15px; border-radius: 24px; }
}
@media (max-width: 575.98px){
  .dark-panel{ padding: 60px 15px; }
}

/* ---------- Pricing ---------- */
.pricing-table-wrap{ overflow-x: auto; }
.pricing-feature-col .feature-row{ padding: .9rem 1.25rem; font-size: .9rem; }
.pricing-feature-col .feature-row:nth-child(even){ background: #f8f8f6; }
.pricing-card{
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
  position: relative;
  background:#fff;
}
.pricing-card.featured{
  border: 2px solid var(--primary);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.pricing-card .plan-head{ padding: 2rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.pricing-card .price{ font-family: var(--heading-font); font-size: 2.5rem; font-weight: 700; }
.pricing-card .price sup{ font-size: 1.1rem; top: -1em; }
.pricing-row{ padding: .9rem 1.25rem; font-size: .9rem; }
.pricing-row:nth-child(even){ background: #f8f8f6; }
.pricing-check{
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background: var(--primary); color:#fff; font-size:.7rem;
}
.pricing-cross{
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.08); color: rgba(0,0,0,.4); font-size:.7rem;
}
.best-value-tag{
  position:absolute; top:.85rem; right:.85rem;
  background: var(--accent); color: var(--primary);
  font-size:.75rem; font-weight:700; padding:.2rem .55rem; border-radius:8px;
}

/* ---------- Testimonials ---------- */
.testimonial-card{
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.testimonial-card:hover{ box-shadow: var(--shadow-hover); border-color:#000; transform: translateY(-2px); }
.testimonial-card .avatar{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.testimonial-card p{ font-size: .95rem; opacity: .85; }

/* ---------- FAQ ----------
   Each question is its own bordered card rather than a plain hairline list,
   so an open answer reads as one contained block instead of running into
   the next question. */
.accordion-button{
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1.35rem 1.5rem;
  background: transparent;
  border-radius: 14px !important;
}
.accordion-button:not(.collapsed){ color: var(--primary); background: transparent; box-shadow: none; }
.accordion-button:focus{ box-shadow: none; }
.accordion-button::after{ flex-shrink: 0; }
.accordion-body{ padding: 0 1.5rem 1.4rem; color: rgba(16,16,19,.68); font-size: .95rem; line-height: 1.65; }
.accordion-item{
  border: 1px solid var(--border-soft);
  border-radius: 14px !important;
  background: #fff;
  margin-bottom: .85rem;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.accordion-item:last-child{ margin-bottom: 0; }
.accordion-item:hover{ border-color: rgba(0,0,0,.25); }
/* The open card gets the lime rail + a lift, so where you are in the list
   is obvious at a glance. */
.accordion-item:has(.accordion-button:not(.collapsed)){
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 575.98px){
  .accordion-button{ font-size: 1rem; padding: 1.15rem 1.15rem; }
  .accordion-body{ padding: 0 1.15rem 1.2rem; }
}

.still-questions-panel{
  background: var(--primary);
  border-radius: 16px;
  color: #fff;
  padding: 3rem 2rem;
}
.still-questions-panel p{ color: rgba(255,255,255,.7); }
/* The global h1-h6 rule hardcodes dark ink, which wins over this panel's
   inherited white (a directly-set property beats an inherited one
   regardless of specificity) — so the heading rendered near-invisible on
   this teal background. Override it back to white here explicitly. */
.still-questions-panel h3{ color: #fff; }

/* ---------- Blog ---------- */
.blog-card img{ height: 220px; object-fit: cover; width: 100%; border-bottom:1px solid rgba(0,0,0,.08); }
.blog-card .card-body-pad{ padding: 1.5rem; }

/* ---------- Floating WhatsApp button (every page, via footer.php) ------- */
.whatsapp-float{
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.4);
  z-index: 990;
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-float:hover{ color: #fff; transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px -6px rgba(0,0,0,.5); }
.whatsapp-float i{ line-height: 1; }
/* Keep the footer's own "Book a Discovery Call" button clear of the floating
   WhatsApp bubble, which otherwise sits right on top of it at page bottom. */
.footer-bottom{ padding-right: 76px; }
@media (max-width: 767.98px){
  .footer-bottom{ padding-right: 0; padding-bottom: 72px; }
}
@media (max-width: 575.98px){
  .whatsapp-float{ right: 1rem; bottom: 1rem; width: 52px; height: 52px; font-size: 1.4rem; }
}

/* ---------- "Before you go" exit popup (every page, via includes/exit-popup.php) */
.exit-popup-backdrop{
  position: fixed; inset: 0; background: rgba(13,38,45,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 2500; padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.exit-popup-backdrop.show{ opacity: 1; visibility: visible; transition: opacity .25s ease; }
.exit-popup{
  background: #fff; border-radius: 20px; max-width: 420px; width: 100%;
  padding: 2.25rem 1.85rem 1.5rem; text-align: center; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: translateY(16px) scale(.97); transition: transform .25s ease;
}
.exit-popup-backdrop.show .exit-popup{ transform: translateY(0) scale(1); }
.exit-popup-close{
  position: absolute; top: .85rem; right: .85rem; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-soft); background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; color: var(--ink);
}
.exit-popup-close:hover{ background: #F1F1EE; }
.exit-popup-icon{
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 1.1rem;
}
.exit-popup h3{ font-size: 1.28rem; line-height: 1.3; margin-bottom: .6rem; }
.exit-popup p{ color: rgba(16,16,19,.6); font-size: .9rem; line-height: 1.55; margin-bottom: 1.4rem; }
.exit-popup-actions{ display: flex; flex-direction: column; gap: .65rem; }
.exit-popup-actions .btn{ width: 100%; }
.exit-popup-dismiss{ background: none; border: none; color: rgba(16,16,19,.42); font-size: .8rem; margin-top: 1.1rem; text-decoration: underline; }
.exit-popup-dismiss:hover{ color: var(--ink); }

/* ---------- Footer ----------
   NOT a dark footer — the original fades from transparent into a pale lime
   at the bottom (same family as the hero bg), with black text throughout. */
footer{
  background-image: linear-gradient(rgba(255,255,255,0) 0%, var(--footer-bg-end) 100%);
  color: var(--ink);
  padding: 5rem 0 2rem;
}
footer h6{
  color: var(--ink);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
}
footer p{ color: var(--ink); }
footer a{ color: var(--ink); }
footer a:hover{ color: var(--primary); }
footer img.footer-logo{ height: 34px; }
footer hr{ border-color: var(--border-soft) !important; opacity: 1 !important; }
.footer-bottom{ border-top: 1px solid var(--border-soft); padding-top: 32px; }
.social-icons a{
  width: 24px; height: 24px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--primary);
  font-size: 1.1rem;
}
.social-icons a:hover{ color: var(--primary-hover); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  section{ padding: 3.5rem 0; }
}