/* ------------------------------------------------------------------------- 
   ENTERPRISE-GRADE LANDING.CSS
   Structured, accessible, themable, high-contrast support
   ------------------------------------------------------------------------- */

/* =========================================================================
   1.   DESIGN TOKENS / VARIABLES
   ========================================================================= */
:root{
  /* ─── Colours ─────────────────────────────────────────────────────────── */
  --ol-primary:#0061f2;
  --ol-primary-50:#e6f0ff;
  --ol-dark:#152035;
  --ol-body:#5b667f;
  --ol-light-bg:#ffffff;
  --ol-alt-bg:#f8f9fc;
  --ol-dark-bg:#16191f;
  --ol-dark-alt-bg:#1b1e26;
  --ol-radius-xl:1rem;
  --ol-gradient:linear-gradient(135deg,var(--ol-primary-50) 0%,var(--ol-light-bg) 100%);

  /* ─── Typography ─────────────────────────────────────────────────────── */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --heading-weight:700;
  --body-color:var(--ol-body);
  --heading-color:var(--ol-dark);

  /* ─── Rhythm & motion ────────────────────────────────────────────────── */
  --spacer:1rem;
  --spacer-lg:1.5rem;
  --spacer-xl:4.5rem;

  --transition-fast:.2s ease;
  --transition-medium:.35s ease;
  --transition-slow:.6s ease-out;
}

/* Dark-mode overrides */
:root[data-theme="dark"]{
  --ol-primary-50:#103c80;
  --ol-gradient:linear-gradient(135deg,#00265b 0%,var(--ol-dark-bg) 100%);
  --ol-body:#d6d8df;
  --ol-light-bg:#121520;
  --ol-alt-bg:var(--ol-dark-bg);
}

/* =========================================================================
   2.   GLOBAL TYPOGRAPHY & LAYOUT
   ========================================================================= */
body{
  font-family:var(--font-sans);
  color:var(--body-color);
  background-color:var(--ol-light-bg);
  line-height:1.6;
  scroll-behavior:smooth;
}
:root[data-theme="dark"] body{background-color:var(--ol-light-bg);}

h1,h2,h3,h4{
  color:var(--heading-color);
  font-weight:var(--heading-weight);
  margin-bottom:var(--spacer);
}

.section-title{
  font-size:1.9rem;
  font-weight:var(--heading-weight);
  margin-bottom:var(--spacer-lg);
}

/* Skip-to-content link */
.skip-link{
  position:absolute;top:-40px;left:0;
  background:var(--ol-primary);color:#fff;
  padding:.5rem;z-index:2000;transition:top .3s ease;
}
.skip-link:focus{top:0;}

/* =========================================================================
   3.   NAVBAR
   ========================================================================= */
.navbar{
  background-color:var(--ol-light-bg);
  transition:box-shadow var(--transition-fast);
}
.navbar.is-scrolled{box-shadow:0 .125rem .75rem rgba(0,0,0,.08);}
.navbar-brand{font-size:1.3rem;letter-spacing:-.4px;font-weight:var(--heading-weight);}
.nav-link{font-weight:500;padding:.5rem 1rem;}

.navbar .nav-link{opacity:.80;transition:opacity var(--transition-fast);}
.navbar .nav-link:hover,.navbar .nav-link:focus{opacity:1;}

.navbar .btn-primary{
  padding:.35rem 1rem;
  font-weight:600;
  border-radius:var(--bs-border-radius-pill,50rem);
}

.nav-link:focus{outline:2px solid var(--ol-primary);outline-offset:2px;}

/* =========================================================================
   4.   HERO
   ========================================================================= */
.hero{
  background: var(--ol-gradient) no-repeat center/100% 100%;
  position:relative;
  isolation:isolate;
  padding-block:4.5rem; /* trimmed on laptop screens */
  --tilt:6deg;
}
@media(min-width:1200px){.hero{padding-block:6rem;}}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,
                             rgba(255,255,255,.25) 0%,
                             rgba(255,255,255,0) 70%);
  pointer-events:none;
  will-change:transform;          /* make it a separate layer               */
  transform:translateZ(0);        /* prevents fractional-pixel resampling    */
}
@media(min-width:992px){
  .hero{min-height:70vh;}
  .hero::after{
    content:"";position:absolute;inset:auto 0 0 0;height:140px;
    background:var(--ol-light-bg);transform-origin:100% 100%;
    transform:skewY(calc(-1*var(--tilt)));
    background-repeat: no-repeat;
  }
}
.hero .display-4{font-weight:800;}
.gradient-text{
  background:linear-gradient(45deg,var(--ol-primary),#4c8dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-blob{
  position:absolute; right:-800px; top:-10rem; width:800px; height:800px;
  opacity:.3; transition:transform var(--transition-slow);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
}

/* the section is already overflow-hidden, but make it explicit */
.hero{overflow:hidden;}

/* =========================================================================
   5.   FEATURE ICONS & STEP CIRCLES
   ========================================================================= */
.feature-icon,
.step-circle{
  width:4rem;height:4rem;display:grid;place-items:center;
  border-radius:50%;background:var(--ol-primary);color:#fff;
}
.feature-icon{font-size:1.6rem;margin:0 auto;}
.step-circle{font-size:1.4rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.1);margin:0 auto;}

/* =========================================================================
   6.   TESTIMONIALS, CTA, CARDS, ANIMATIONS
   ========================================================================= */
.testimonial{
  background:var(--ol-light-bg);
  border-radius:var(--ol-radius-xl);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.05);
  padding:2rem;
}
.testimonial p{font-style:italic;}
.testimonial .avatar{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;margin-right:.75rem;
}

/* CTA footer */
.cta-footer{
  position:relative;
  background:url("../img/map.svg") center/cover,var(--ol-primary) no-repeat;
}
.cta-footer .overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.cta-footer h2{position:relative;color:#fff;}

/* =========================================================================
   7.   MISCELLANEOUS & UTILITIES
   ========================================================================= */
.card{
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08);
}

.quote-card,                /* if you gave it a class */
.card input[type="range"] { /* or the card’s selector */
  color-scheme: light dark; /* let UA draw thumb/track appropriately */
}

.metrics-strip{
  min-height:110px;
  font-size:.9375rem;
}

/* new – structured metrics under hero */
.metric-item{
  gap:.75rem;
  padding:.35rem .75rem;
  border-radius:999px;
  background:rgba(0,0,0,.01);
}

.metric-icon{
  width:2.25rem;
  height:2.25rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ol-primary-50);
  color:var(--ol-primary);
  flex-shrink:0;
}

.metric-copy{
  text-align:left;
}

.metric-value{
  display:block;
  font-weight:700;
  line-height:1.1;
}

.metric-label{
  display:block;
  font-size:.8rem;
  line-height:1.3;
  color:var(--ol-body);
  opacity:.9;
}

@media (max-width: 575.98px){
  .metric-item{
    width:100%;
    justify-content:flex-start;
  }
}

/* Dark-mode for metrics */
[data-theme="dark"] .metric-item{
  background:rgba(255,255,255,.03);
}

[data-theme="dark"] .metric-icon{
  background:rgba(17,117,185,.2);
  color:#fff;
}

.opacity-0{opacity:0;transition:all var(--transition-slow);}
.translate-y-2{transform:translateY(1rem);transition:all var(--transition-slow);}
.fade-in{opacity:1 !important;transform:none !important;}

.kpi-number{
  font-size:2.2rem;font-weight:800;
  color:var(--ol-primary);letter-spacing:-.5px;margin-bottom:.25rem;
}

/* ═════════════════════  QUICK-QUOTE CARD  ═════════════════════ */
/* Give the quote card a consistent surface with repayments + FAQ */
.quote-card {
  border-radius: var(--ol-radius-xl);
  border: 0;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.06);
  background: var(--ol-light-bg);
}

.quote-card .form-label {
  font-weight: 600;
  font-size: .9rem;
}

.quote-card .range-row {
  gap: .75rem;
}

.quote-card-output {
  font-variant-numeric: tabular-nums;
}

/* Dark mode */
:root[data-theme="dark"] .quote-card {
  background: var(--ol-dark-bg);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.22);
}

/* ═════════════════════  FAQ ACCORDION  ═════════════════════ */
.enterprise-faq{--bs-accordion-border-width:0;}
.enterprise-faq .accordion-item{border:none;}
.enterprise-faq .accordion-button{
  background:var(--ol-alt-bg);
  border-radius:var(--ol-radius-xl);
  padding:1rem 1.25rem;font-weight:600;color:var(--ol-dark);
  transition:background var(--transition-fast),color var(--transition-fast);
}
.enterprise-faq .accordion-button:focus{
  box-shadow:0 0 0 3px rgba(0,97,242,.25);
}
.enterprise-faq .accordion-button:not(.collapsed){
  background:var(--ol-primary-50);color:var(--ol-primary);
}
.enterprise-faq .accordion-button .faq-toggle-icon{display:inline-flex;align-items:center;}
.enterprise-faq .accordion-button .bi-dash-lg{display:none;}
.enterprise-faq .accordion-button:not(.collapsed) .bi-plus-lg{display:none;}
.enterprise-faq .accordion-button:not(.collapsed) .bi-dash-lg{display:inline;}

.enterprise-faq .accordion-body{
  background:var(--ol-light-bg);
  border-radius:0 0 var(--ol-radius-xl) var(--ol-radius-xl);
  padding:1rem 1.5rem;font-size:.95rem;color:var(--ol-body);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.04);
}
.enterprise-faq .accordion-item + .accordion-item{margin-top:var(--spacer-lg);}

/* ═════════════════════  CTA FOOTER  ═════════════════════ */
.site-cta-footer{
  position:relative;
  background:var(--ol-primary) url("../img/map.svg") center/cover no-repeat;
  overflow:hidden;border-top:4px solid var(--ol-primary);
}
.site-cta-footer .overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);}
.site-cta-footer .btn-cta{
  padding:.85rem 2rem;text-transform:uppercase;
  font-weight:600;transition:transform .2s ease,box-shadow .2s ease;
}
.site-cta-footer .btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

/* ------------------------------------------------------------------
   Dark-mode surface + text tweaks (no nesting!)
   ------------------------------------------------------------------ */
:root[data-theme="dark"]{
  /* 1️⃣ flip the token that headings & links use */
  --heading-color: #ffffff;          /* pure white = WCAG AAA on #121520 */

  /* optional: brighten brand blue a little on very dark surfaces */
  /* --ol-primary: #2082ff; */
}

/* 2️⃣ generic text              (h5, h6 were not in the earlier rule) */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{
  color: var(--heading-color);
}

/* 3️⃣ “light” utility surfaces → dark equivalents  */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .table-light,
[data-theme="dark"] .section-alt{
  background-color: var(--ol-dark-alt-bg) !important;
}

/* 4️⃣ cards & product cards (keep a very dark charcoal, not full black) */
[data-theme="dark"] .card,
[data-theme="dark"] .product-card{
  background-color: var(--ol-dark-bg);
  color: var(--ol-body);                   /* body text token is already light */
}

/* 5️⃣ feature / step icon circles – keep them brand-blue for contrast */
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .step-circle{
  background: var(--ol-primary);
  color:#fff;
}

/* 6️⃣ hero skew footer (white on light theme → dark on dark theme) */
[data-theme="dark"] .hero::after{
  background: var(--ol-dark-bg);
}

/* 7️⃣ make sure links inside dark navbar stay visible */
[data-theme="dark"] .navbar .nav-link{
  color: var(--ol-body);
}
[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link:focus{
  /* 15 % brighter than --ol-body (#d6d8df ≈ 8 : 1 on charcoal) */
  color: color-mix(in srgb, var(--ol-body) 85%, #fff);
  opacity: 1;                            /* keep the crisp edge */
}

/* ─── FAQ accordion – dark-mode fixes ──────────────────────────── */
[data-theme="dark"] .enterprise-faq .accordion-button{
  background: var(--ol-dark-alt-bg);   /* same surface as section */
  color:       var(--body-color);      /* light grey ≈ #d6d8df   */
}

[data-theme="dark"] .enterprise-faq .accordion-button:not(.collapsed){
  background:  var(--ol-primary-50);   /* brand tint */
  color:       #ffffff;                /* pure white on blue      */
}

/* keep the “+ / –” icon in sync with the text colour */
[data-theme="dark"] .enterprise-faq .faq-toggle-icon i{
  color: inherit;
}

/* accordion body surface + text */
[data-theme="dark"] .enterprise-faq .accordion-body{
  background: var(--ol-dark-bg);       /* slightly deeper shade   */
  color:      var(--body-color);
}

/* higher-contrast focus ring for keyboard users */
[data-theme="dark"] .enterprise-faq .accordion-button:focus{
  box-shadow: 0 0 0 3px rgba(0,97,242,.45);
}

[data-theme="dark"] .enterprise-faq .accordion-body:focus{
  outline: 3px solid rgba(0,97,242,.45);
  outline-offset: 2px;
}

[data-theme="dark"] .metrics-strip{
  background-color: var(--ol-dark-alt-bg) !important;  /* same as other dark sections */
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ─── Repayment table: dark-mode contrast ─────────────── */
[data-theme="dark"] .repayment-table thead th{
  color: var(--heading-color);                /* pure white */
  border-bottom: 2px solid var(--ol-primary); /* keep brand rule */
}

[data-theme="dark"] .repayment-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.05);          /* gentle zebra */
}

/* ─── Light → dark for #fafbfe trust strip ─────────────── */
[data-theme="dark"] .trust-strip{
  background: var(--ol-dark-alt-bg);
}

[data-theme="dark"] .trust-strip img{
  filter: brightness(1.05) contrast(1.15);
}

[data-theme="dark"] .wave-divider path{
  fill: var(--ol-dark-alt-bg);
}

/* ═════════════════════  REPAYMENT TABLE  ═════════════════════ */
.repayments-shell{max-width:840px;}
.repayment-table thead th{
  font-size:.9rem;letter-spacing:.3px;font-weight:600;
  color:var(--ol-dark);border-bottom:2px solid var(--ol-primary);
}
.repayment-table tbody td{
  padding:.65rem .75rem;font-variant-numeric:tabular-nums;
}
.repayment-table tbody tr:nth-child(odd){background:var(--ol-alt-bg);}
.repayment-table tbody tr:last-child td{border-bottom:1px solid rgba(0,0,0,.05);}

/* Mobile “card” breakup */
@media(max-width:575.98px){
  .repayment-table thead{position:absolute;clip:rect(0,0,0,0);}
  .repayment-table tr{
    display:block;margin-bottom:1rem;
    background:var(--ol-light-bg);box-shadow:0 .25rem .5rem rgba(0,0,0,.04);
    border-radius:var(--ol-radius-xl);
  }
  .repayment-table td{
    display:flex;justify-content:space-between;align-items:center;
    padding:.6rem 1rem;border:none !important;
  }
  .repayment-table td::before{
    content:attr(data-label);font-weight:600;color:var(--ol-body);
  }
}

:root[data-theme="dark"] .repayment-table thead th{
  color: var(--heading-color);               /* pure white = AAA contrast   */
  background: var(--ol-dark-alt-bg);         /* slightly lighter charcoal   */
}

:root[data-theme="dark"] .repayment-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.04);          /* add a faint strip on even rows */
}

/* ═════════════════════  HOW-IT-WORKS CARD  ═════════════════════ */
.how-card{
  background:rgba(0,97,242,.03);
  border-radius:var(--ol-radius-xl);
}
.step-badge{
  position:absolute;top:-6px;right:-6px;width:1.35rem;height:1.35rem;
  display:grid;place-items:center;font-size:.65rem;font-weight:700;
  color:#fff;background:var(--ol-primary);border-radius:50%;
}

/* ═════════════════════  PRICING  ═════════════════════ */
.pricing-fig{line-height:1;letter-spacing:-.5px;}

/* ═════════════════════  TRUST & CREDIBILITY  ═════════════════════ */
.rating-badge{
  display:inline-block;padding:.25rem .75rem;font-weight:700;
  border-radius:50rem;background:var(--ol-primary);color:#fff;font-size:.875rem;
}
.trust-strip{background:#fafbfe;}
.opacity-80{opacity:.80;}

/* Digital-receipts cards */
.dr-card{
  background:var(--ol-light-bg);border-radius:var(--ol-radius-xl);
  padding:2rem 1.5rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.dr-card:hover{transform:translateY(-4px);box-shadow:0 .75rem 1.5rem rgba(0,0,0,.1);}
.dr-icon{
  width:4rem;height:4rem;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--ol-primary);color:#fff;border-radius:50%;
}

/* ensure comfortable spacing */
.bg-light.py-6{padding-top:var(--spacer-xl);padding-bottom:var(--spacer-xl);}

/* Spacing between major sections */
section + section{margin-top:var(--spacer-xl);}
.wave-divider{margin-bottom:-2px;} /* (or -4px depending on SVG stroke) */

/* ─────────────  SDG strip  ───────────── */
.sdg-strip{
  background: var(--ol-alt-bg);
  padding-block: 2.5rem;            /* plenty of breathing room   */
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
:root[data-theme="dark"] .sdg-strip{
  background: var(--ol-dark-alt-bg);
  border-color: rgba(255,255,255,.06);
}

/* caption inherits heading token so it flips in dark-mode */
.sdg-caption{color: var(--heading-color);}

/* give icons a soft hover lift to signal interactivity if you link them */
.sdg-icon{
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
  transition: transform .2s ease;
}
.sdg-icon:hover,
.sdg-icon:focus{transform: translateY(-4px) scale(1.05);}


/* 0️⃣ wrap in a media-query so dark-mode remains unchanged */
:root:not([data-theme="dark"]) {
  /* section alternation */
  .section-alt           { background: var(--ol-alt-bg); }
  /* subtle card outline */
  .card, .product-card   { box-shadow: 0 0 0 1px rgba(0,0,0,.04); }

  /* stronger navbar drop shadow when scrolled */
  .navbar.is-scrolled    { box-shadow: 0 .25rem .75rem rgba(0,0,0,.10); }

  /* FAQ focus ring */
  .enterprise-faq .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(0,97,242,.35);
  }
}

/* wave divider re-tint */
.wave-divider path { fill: var(--ol-alt-bg); }


/* range slider reset + base track */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent; /* let us style the track */
}

/* WebKit track + thumb */
input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  background: color-mix(in srgb, var(--ol-body) 15%, transparent);
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ol-primary);        /* you already set this later — keep one */
  margin-top: -7px;                      /* centers thumb on 4px track */
  border: 0;
}

/* Firefox track + thumb */
input[type="range"]::-moz-range-track{
  height: 4px;
  background: color-mix(in srgb, var(--ol-body) 15%, transparent);
  border-radius: 999px;
}
input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ol-primary);        /* you already set this later — keep one */
  border: 0;
}

/* High-contrast/dark-mode friendly */
.card input[type="range"]{ color-scheme: light dark; }

/* range-slider thumb brand colour (webkit + firefox example) */
input[type="range"]::-webkit-slider-thumb { background: var(--ol-primary); }
input[type="range"]::-moz-range-thumb     { background: var(--ol-primary); }


/* bolder text + subtle underline for the current section */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  font-weight:600;
  color:var(--ol-primary);
  position:relative;
}

.navbar .nav-link.active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-.35rem;
  height:2px;border-radius:1px;
  background:var(--ol-primary);
  transform-origin:left;
  animation:grow .25s ease-out forwards;
}

@keyframes grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Better shadow + rounded corners are already in .modal-content */
:root[data-theme="dark"] .modal-content {
  background: var(--ol-dark-bg);
  color: var(--ol-body);
}

:root[data-theme="dark"] .modal-content .btn-outline-secondary {
  color: var(--ol-body);
  border-color: var(--ol-body);
}

/* ======================  LINKS  ====================== */
a{
  color:var(--ol-primary);
  text-decoration:none;
  transition:color var(--transition-fast);
}
/* ⬇︎ browser-native colour-mix instead of the SASS-only darken() helper */
a:hover,
a:focus { color: color-mix(in srgb, var(--ol-primary) 90%, #000); }

a:focus-visible {
  outline: 2px solid var(--ol-primary);
  outline-offset: 2px;
}

@supports not (color: color-mix(in srgb, red 90%, #000)) {
  /* Option A: simple, works everywhere */
  a:hover, a:focus { filter: brightness(.92); }

  /* Or Option B (if you prefer no filter on text):
     a:hover, a:focus { color: #0a53c1; }  // ~10% darker than #0061f2
  */
}

/* ===== NAVBAR toggler icon – only for LIGHT theme ⬇︎ ===== */
.navbar[data-bs-theme="light"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' \
        stroke='%230061f2' stroke-width='2'>\
    <path stroke-linecap='round' stroke-miterlimit='10' \
          d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
/* DARK theme icon is already delivered by critical.css ▸ keep it */


/* —— Enterprise polish —— */

:root {
  --olx-space-6: clamp(3rem, 2.2rem + 2vw, 4rem);
  --olx-radius-3: 1rem;
}

/* Hero */
.hero-pro { background: radial-gradient(1200px 600px at 90% -10%, rgba(17,117,185,.08), transparent 60%), #f8f9fc; }
.hero-pro .eyebrow { letter-spacing:.04em; text-transform:uppercase; }
.hero-pro .gradient-text { background: linear-gradient(90deg,#1175B9,#0061f2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-pro .device-shot img { background:#fff; }

/* Audience ribbon */
.audience-ribbon .btn { border-radius: 999px; padding-inline: 1rem; }

/* Mini flags (security cards) */
.mini-flag { border:1px solid #e6e9f2; border-radius: var(--olx-radius-3); padding: .9rem; background:#fff; }
.mini-flag i { font-size:1.25rem; color:#0d6efd; }
.tiny { font-size:.8125rem; line-height:1.3; }

/* KPIs */
.kpi-number { font-weight:800; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1; }

/* Section rhythm */
.section-title { font-weight:800; letter-spacing:.01em; }
section.py-6 { padding-top: var(--olx-space-6)!important; padding-bottom: var(--olx-space-6)!important; }

/* FAQ polish */
.enterprise-faq .accordion-button { border-radius:.75rem; background:#fff; }
.enterprise-faq .accordion-item { border:0; }
.enterprise-faq .accordion-button:not(.collapsed) { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); }

/* Video thumb play affordance */
.video-thumb { position:relative; overflow:hidden; border-radius:1rem; }
.video-thumb .play-icon { position:absolute; inset:auto auto 1rem 1rem; display:inline-flex; align-items:center; justify-content:center; width:48px;height:48px; border-radius:999px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.video-thumb .play-icon i { font-size:1.5rem; line-height:1; }

/* Product carousel comet bar already present — just smooth it */
.carousel-progress{
  pointer-events: none;             /* never block controls/clicks */
}
.carousel-progress .bar { transition: transform .2s linear; }

/* Dark mode light tweaks (if you toggle root [data-theme="dark"]) */
[data-theme="dark"] .hero-pro { background: radial-gradient(1200px 600px at 90% -10%, rgba(17,117,185,.12), transparent 60%), #0f1220; }
[data-theme="dark"] .mini-flag { background:#151a2b; border-color:#212844; }

/* utilities */
.fw-extrabold { font-weight: 800 !important; }
.py-6 { padding-top: var(--olx-space-6) !important; padding-bottom: var(--olx-space-6) !important; }

[data-theme="dark"] .audience-ribbon { background: var(--ol-dark-alt-bg); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .audience-ribbon .btn.btn-light { background:#1f2432; border-color:#2b344a; color:#e6e8ee; }


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html:focus-within { scroll-behavior: auto; }
}

input[type="range"]::-webkit-slider-runnable-track{ background:#d9dee8; background: color-mix(in srgb, var(--ol-body) 15%, transparent); }
input[type="range"]::-moz-range-track{             background:#d9dee8; background: color-mix(in srgb, var(--ol-body) 15%, transparent); }


/* Wider content lane for very large screens – landing page only */
@media (min-width: 1400px){ .landing-wide .container{ max-width: 1480px; } }
@media (min-width: 1800px){ .landing-wide .container{ max-width: 1680px; } }
@media (min-width: 2200px){ .landing-wide .container{ max-width: 1880px; } }


html { scroll-padding-top: 80px; }   /* match data-bs-offset */
section[id] { scroll-margin-top: 80px; }