/* ------------------------------------------------------------------------- 
   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);
}

a{
  color:var(--ol-primary);
  text-decoration:none;
  transition:color var(--transition-fast);
}
a:hover,a:focus{color:darken(var(--ol-primary),10%);outline:none;}

/* 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;}

.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>");
}

/* =========================================================================
   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:-6rem;top:-6rem;
  opacity:.3;transition:transform var(--transition-slow);

  right: -800px;          /* was -6rem */
  top:   -10rem;          /* was -6rem */
  width:  800px;
  height: 800px;

  /* feather-mask the bitmap’s hard edge for good measure                     */
  -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;}

.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;
}

/* ═════════════════════  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 tweaks for footers & misc */
:root[data-theme="dark"]{
  .section-alt{background:var(--ol-dark-alt-bg);}
  .card,.product-card{background:var(--ol-dark-bg);}
  .navbar,.dropdown-menu{background:var(--ol-dark-bg);}
  .site-base-footer{background-color:var(--ol-dark-bg)!important;}
  .site-base-footer .text-muted{color:rgba(255,255,255,.6)!important;}
  .bg-light,.table-light{background-color:var(--ol-dark-alt-bg)!important;}
  .text-muted{color:rgba(255,255,255,.7)!important;}
}

/* ------------------------------------------------------------------
   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{
  color: var(--heading-color);
}

/* ─── 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 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);}}