/* =========================================================
   CASEFOX LANDING — CLEAN + OPTIMIZED CSS (ONE FILE)
   - Same class names
   - 1295px consistent container
   - Mobile safe
========================================================= */

/* =========================
   1) FONTS
========================= */
@font-face{
  font-family: "Basier Square";
  src:url("https://www.casefox.com/assets/font/BasierSquare-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   2) TOKENS / VARIABLES (single :root only)
========================= */
:root{
  --font: "Basier Square", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --bg:#F8F9FB;
  --text:#0a0a0a;
  --heading:#0B3558;
  --accent:#ffffff;

  --white:#fff;
  --muted: rgba(10,10,10,.65);

  --w:1295px;                /* ✅ main max width */
  --pad:16px;

  --r12:12px;
  --r16:16px;
  --r18:18px;
  --r22:22px;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* light/dark utilities (kept) */
.light-background{ --bg:#f3f9ff; --white:#fff; }
.dark-background{
  --bg:#0058D3; --text:#fff; --heading:#fff; --white:#0058D3;
}

/* =========================
   3) RESET / BASE
========================= */
*{ box-sizing:border-box; }
html,body{ width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:none; transition:.2s ease; }
a:hover{ color:color-mix(in srgb, var(--accent), transparent 25%); }

h1,h2,h3,h4,h5,h6{ font-family:var(--font); color:var(--heading); margin:0; }

/* ✅ common container */
.cfWrap{
  width:min(var(--w), calc(100vw - (var(--pad) * 2)));
  margin-inline:auto;
}

/* =========================
   4) SECTIONS / TITLES
========================= */
section,.section{
  padding:60px 0;
  scroll-margin-top:90px;
  overflow:clip;
}
@media (max-width:1199px){ section,.section{ scroll-margin-top:66px; } }

.section-title{
  text-align:center;
  padding-bottom:60px;
  margin-top:-30px;
}
.section-title h2{
  font-size:36px;
  font-weight:800;
  margin:0 0 20px;
  padding-bottom:18px;
  color:rgb(11,53,88);
  position:relative;
}
.section-title h2::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  width:50px; height:3px;
  background:var(--accent);
  margin:auto;
}
.section-title p{ margin:0; }

/* =========================
   5) HEADER / NAV (your existing classes)
========================= */
/* =========================================================
   HEADER / NAV
   ========================================================= */
.header {
  color: var(--default-color);
  padding: 0;
  transition: all 0.5s;
  z-index: 997;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 8px;
}
.header .header-container {
  background-color: rgba(255, 255, 255, 0.807);
  border-radius: 15px;
  border: 2px solid rgba(0, 4, 255, 0.100);
  padding: 5px 25px;
  max-width: 1295px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scrolled .header { background-color: #ffffff00; }
.scrolled .header .logo h1 { color: #2d405f; }
.scrolled .navmenu ul li a,
.scrolled .navmenu ul li a:focus { color: #2d405f; }
.scrolled .navmenu ul li:hover > a,
.scrolled .navmenu .active,
.scrolled .navmenu .active:focus { color: var(--accent-color); }
.scrolled .mobile-nav-toggle { color: #2d405f; }

.header .logo {
  line-height: 1;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.header .logo img { max-height: 50px; margin-right: 0; }
.header .logo h1 {
  font-size: 24px; margin: 0; font-weight: 500;
  color: var(--default-color); transition: color 0.3s;
}

.header .btn-getstarted,
.header .btn-getstarted:focus { border: none; cursor: pointer; }
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover { color: var(--contrast-color); }


.header .bbtn-getstarted,
.header .bbtn-getstarted:focus {
  color: var(--contrast-color);
  background: linear-gradient(90deg,#b9fb6a,#3df84a); color:#000000; border:1px solid #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  margin: 0;
  border-radius: 7px;
  transition: 0.3s;
  border: none; cursor: pointer;
  font-family: var(--nav-font);
}
.header .bbtn-getstarted:hover,
.header .bbtn-getstarted:focus:hover {
  color: black;
  background:#3df84a ;
}

/* =========================
   DROPDOWN (Desktop + Mobile)
   ========================= */

.navmenu .dropdown{ position: relative; }

.navmenu .dropdown-menu-simple{
  min-width: 290px;
  background: #fff;
  border: 1px solid rgba(2,6,23,0.08);
  border-radius: 12px;
  padding: 10px;
}

/* Desktop hover dropdown */
@media (min-width: 1200px){
  .navmenu .dropdown-menu-simple{
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: 0.2s ease;
    box-shadow: 0 12px 40px rgba(2,6,23,0.12);
    z-index: 9999;
  }

  .navmenu .dropdown:hover > .dropdown-menu-simple{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mobile: dropdown becomes accordion */
@media (max-width: 1199px){
  .navmenu .dropdown-menu-simple{
    position: static;
    border: 0;
    padding: 0 0 0 10px;
    margin-top: 6px;
    background: transparent;
    box-shadow: none;
    display: none;
  }

  .navmenu .dropdown.dropdown-open > .dropdown-menu-simple{
    display: block;
  }

  .navmenu .dropdown-menu-simple a{
    display: block;
    padding: 10px 0;
    color: #2d3748;
    text-decoration: none;
    font-size: 14px;
    margin-left: 10px;
  }
}

@media (min-width: 1210px) {
  .navmenu { padding: 0; }
  .navmenu ul {
    margin: 0; padding: 0; display: flex; list-style: none; align-items: center;
  }
  .navmenu li { position: relative; }
  .navmenu a,
  .navmenu a:focus {
    color: #10021c;
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none;
  }
  .navmenu a i,
  .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; transition: 0.3s; }
  .navmenu li:last-child a { padding-right: 0; }
  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus { color: #5d07a8a0; }

  .navmenu .dropdown ul{
    margin:0; padding:10px 0; display:block; position:absolute; visibility:hidden;
    left:14px; top:130%; opacity:0; transition:0.3s; border-radius:4px; z-index:99;
  }
  .navmenu .dropdown ul li { min-width: 200px; }
  .navmenu .dropdown ul a { padding:10px 20px; font-size:15px; }
  .navmenu .dropdown ul a i { font-size:12px; }
  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a { color: var(--nav-dropdown-hover-color); }
  .navmenu .dropdown:hover > ul { opacity:1; top:100%; visibility:visible; }
  .navmenu .dropdown .dropdown ul { top:0; left:-90%; visibility:hidden; }
  .navmenu .dropdown .dropdown:hover > ul { opacity:1; top:0; left:-100%; visibility:visible; }
}

@media (max-width: 1210px) {
  .mobile-nav-toggle {
    color:#5c07a8; font-size:28px; line-height:0; margin-right:10px;
    cursor:pointer; transition:color .3s; display:block;
  }
  .navmenu { padding:0; z-index:9997; }
  .navmenu ul{
    display:none; list-style:none; position:absolute; inset:60px 20px 20px 20px;
    padding:10px 0; margin:0; border-radius:6px; background:var(--nav-mobile-background-color);
    overflow-y:auto; transition:.3s; z-index:9998; box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .navmenu a,
  .navmenu a:focus{
    color:var(--nav-dropdown-color); padding:10px 20px; font-family:var(--nav-font);
    font-size:17px; font-weight:500; display:flex; align-items:center; justify-content:space-between;
    white-space:nowrap; transition:.3s; text-decoration:none;
  }
  .navmenu a i,
  .navmenu a:focus i{
    font-size:12px; line-height:0; margin-left:5px; width:30px; height:30px; display:flex;
    align-items:center; justify-content:center; border-radius:50%;
    transition:.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }
  .navmenu a i:hover,
  .navmenu a:focus i:hover{ background-color: var(--accent-color); color: var(--contrast-color); }
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus{ color: var(--nav-dropdown-hover-color); }
  .navmenu .active i,
  .navmenu .active:focus i{ background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); }
  .navmenu .dropdown ul{
    position:static; display:none; z-index:99; padding:10px 0; margin:10px 20px;
    background:var(--nav-dropdown-background-color);
    border:1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow:none;
    transition:all .5s ease-in-out;
  }
  .navmenu .dropdown ul ul{ background-color: rgba(33,37,41,0.1); }
  .navmenu .dropdown > .dropdown-active { display:block; background-color: rgba(33,37,41,0.03); }

  .mobile-nav-active { overflow:hidden; }
  .mobile-nav-active .mobile-nav-toggle{
    color:#2d405f; position:absolute; font-size:32px; top:15px; right:15px; margin-right:0; z-index:9999;
  }
  .mobile-nav-active .navmenu{
    position:fixed; overflow:hidden; inset:0; background:rgba(33,37,41,.8); transition:.3s;
  }
  .mobile-nav-active .navmenu > ul { display:block; }

  .scrolled .mobile-nav-toggle { color:#2d405f; }
  .scrolled.mobile-nav-active .mobile-nav-toggle { color:#2d405f; }
}

  @media (max-width: 1210px) {
    .mobile-nav-active .navmenu > ul {
        display: block;
        background-color: white;
    }
}

@media (max-width: 1200px) {
  .header { padding-top: 0; }
  .header .header-container { margin-left:0; margin-right:0; padding:10px 5px 10px 15px; }
  .header .logo { order:1; }
  .header .btn-getstarted { order:2; margin:0 -10px 0 0; padding:6px 15px; margin-top:5px; }
  .navmenu { order:3; }
}

.login-btn {
  display:inline-flex; align-items:center; text-decoration:none; color:#093444;
  font-size:16px; margin-right:8px; font-family:sans-serif;
}
.login-btn i { color:#093444; font-size:20px; margin-right:8px; }
.login-btn:hover { text-decoration: underline; color:black}
@media (max-width: 499px) { .login-btn { display: none; } }

.ccustom-section{
  padding: 0 40px; padding-top:20px; background:#ffffff; border-radius:20px;
  border-top:3px solid rgb(7,7,77); margin-left:-380px; padding-bottom:20px;
}
@media (max-width:768px){
  .ccustom-section{
    padding:0; background-color:#ffffff00; border-radius:20px;
    border-top:3px solid rgba(255,255,255,0); margin-left:0; margin-top:-42px;
  }
}
.custom-section{
  padding:0 40px; padding-top:20px; background:#ffffff; border-radius:20px;
  border-top:3px solid rgb(7,7,77); margin-left:-272px; padding-bottom:15px;
}
.custom-container{
  max-width: 1290px; min-width:1200px; margin:auto; display:flex; justify-content:space-between; gap:30px;
}
.custom-column{ width:30%; }
.custom-heading{
  font-weight:600; background:#f3f4f6; color:#374151; padding:8px 12px; border-radius:6px;
  margin-bottom:10px; font-size:16px; margin-left:-5px;
}
.custom-heading.custom-active{ background:#e5e7eb; }
.custom-item{ margin-bottom:-5px; }
.custom-title{
  display:inline-block; font-weight:600; color:#0f172a; text-decoration:none; font-size:15px; margin-left:-20px;
}
.custom-title:hover{ text-decoration: underline; }
.custom-item p{ color:#6b7280; font-size:11px; margin:-4px 0 0; }
.custom-see-all{ color:#6b7280; font-size:14px; text-decoration:none; }
.custom-see-all:hover{ text-decoration: underline; }
.custom-column img{ max-width:300px; height:auto; border-radius:10px; display:block; }
@media (max-width:768px){
  .custom-column img{ display:none; }
  .custom-section{
    padding:0; background:#ffffff00; border-radius:20px; border-top:3px solid rgba(255,255,255,0);
    margin-left:0; margin-top:-42px;
  }
  .custom-title{ margin-top:-25px; }
}
@media (max-width:910px){
  .custom-container{ flex-direction:column; }
  .custom-column{ width:100%; }
  .custom-item{ margin-bottom:5px; padding:10px; max-width:25%; }
}


.btn-main,.btn-outline{
  padding:14px 32px; font-size:1rem; border-radius:8px;
  text-decoration:none; font-weight:600;
}
.btn-main{
  background: linear-gradient(90deg,#b9fb6a,#3df84a); color:#000000; border:1px solid #ffffff;
}
.btn-main:hover{
  background: linear-gradient(90deg,#3df84a,#b9fb6a); color:#000000; border:1px solid #ffffff;
}
.btn-outline{
  border:2px solid #e5e5e5; color:#000; background:white;
}
.btn-main:hover{
  color:#000000; 
}

/* =========================
   6) HERO (lxHero)
========================= */
.lxHero, .lxHero *{ min-width:0; }
.lxHero{
  position:relative;
  padding:160px 0 0;
  overflow:hidden;
  color:#fff;
  isolation:isolate;

  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,255,200,.22), transparent 60%),
    radial-gradient(900px 500px at 95% 15%, rgba(0,180,255,.16), transparent 65%),
    radial-gradient(1000px 700px at 50% 110%, rgba(0,255,170,.12), transparent 70%),
    linear-gradient(145deg, #021916 0%, #031f1c 40%, #041b19 70%, #020f12 100%);
}

.lxHero::before{
  content:"";
  position:absolute;
  inset:-6%;
  background:url("ChatGPT Image Feb 11, 2026, 12_46_35 PM.png") center/cover no-repeat;
  filter: brightness(1.10) saturate(1.05);
  transform:scale(1.06);
  z-index:0;
}
.lxHero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    url("https://demo.awaikenthemes.com/savio/wp-content/uploads/2025/12/dark-section-bg-shape-prime.png") center/cover no-repeat,
    radial-gradient(1000px 500px at 70% 0%, rgba(4,199,66,.55), transparent 62%),
    radial-gradient(900px 500px at 20% 90%, rgba(2,239,30,.45), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(5,41,0,.65));
  opacity:.75;
  pointer-events:none;
}

.lxHero__vignette{
  position:absolute;
  inset:-80px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(0,0,0,.45), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(0,0,0,.40), transparent 62%),
    radial-gradient(1100px 620px at 50% 110%, rgba(0,0,0,.55), transparent 58%);
}

.lxHero__wrap{
  width:min(var(--w), 92vw);
  margin:auto;
  position:relative;
  z-index:2;
}

.lxHero__badge{
  display:inline-flex;
  padding:14px 26px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
  font-size:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}

.lxHero__title{
  margin-top:22px;
  color:#fff;
  font-size:clamp(54px,6.2vw,92px);
  font-weight:950;
  line-height:1.02;
  letter-spacing:-1.6px;
  text-shadow:0 18px 70px rgba(0,0,0,.55);
}

.smartGlow{
  position: relative;
  display: inline-block;

  /* remove fake italic */
  font-style: normal;
  transform: skewX(-8deg);   /* controlled angle */
  
  /* tighten tracking properly */
  letter-spacing: -0.015em;

  background: linear-gradient(110deg,#9effb8 0%,#CAF880 45%,#bfffdf 60%,#CAF880 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  color: transparent;

  text-shadow: 
    0 0 8px rgba(202,248,128,.18),
    0 0 18px rgba(0,255,170,.06);

  animation: softGlowMove 6s ease-in-out infinite;

  will-change: background-position;
}

@keyframes softGlowMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.smartGlow::after{
  content:"";
  position:absolute;
  left:0; bottom:-14px;
  width:100%; height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,transparent, rgba(137,220,4,.85), rgba(0,255,200,.65), transparent);
  opacity:.7;
  filter:blur(3px);
}

.lxHero__bottom{
  margin-top:38px;
  display:grid;
  grid-template-columns:560px 1fr;
  gap:44px;
  align-items:end;
}
.lxHero__cards{ display:flex; gap:26px; }

.lxHero__card{
  width:260px;
  padding:28px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  box-shadow:0 22px 70px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.lxHero__card::before{
  content:"";
  position:absolute;
  inset:-50px -40px auto -40px;
  height:120px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:rotate(-10deg);
  opacity:.35;
}

.lxHero__num{ font-size:44px; font-weight:950; }
.lxHero__sub{ color:rgba(255,255,255,.70); margin:0 0 18px; }

.lxHero__desc{
  max-width:720px;
  color:rgba(255,255,255,.75);
  font-size:24px;
  line-height:1.8;
}

.lxHero__form{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:12px 18px;
  border-radius:999px;
  position:relative;
  overflow:hidden;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 22px 70px rgba(0,0,0,.50),
    0 0 50px rgba(0,255,170,.18);

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.lxHero__form::before{
  content:"";
  position:absolute;
  inset:-60% -30%;
  background:linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 25%, transparent 55%);
  transform:translateY(-18%) translateX(-10%);
  opacity:.45;
  pointer-events:none;
}
.lxHero__input{
  flex:1;
  background:transparent;
  border:0;
  outline:0;
  color:#fff;
  font-size:16px;
  min-width:0;
}
.lxHero__input::placeholder{ color:rgba(255,255,255,.55); }

.lxHero__btn{
  padding:14px 26px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:800;
  color:#fff;
  background:#030407;
  transition:.2s ease;
  white-space:nowrap;
}
.lxHero__btn:hover{ transform:translateY(-2px); filter:brightness(1.05);background-color: #CAF880; color: #000; }
.lx-hero-link:hover{
color:black;
}

/* vector */
.lxHero__vectorWrap{
  max-width:var(--w);
  width:100%;
  margin:110px auto 0;
  position:relative;
  z-index:2;
}
.lxHero__vector{ width:100%; height:auto; object-fit:contain; }

/* hero enter animation hooks */
.lxHero [data-anim]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
  will-change:transform, opacity;
}
.lxHero.is-inview [data-anim]{ opacity:1; transform:translate3d(0,0,0); }
.lxHero [data-anim="badge"]{ transition-delay:.05s; }
.lxHero [data-anim="title"]{ transition-delay:.14s; }
.lxHero [data-anim="desc"] { transition-delay:.24s; }
.lxHero [data-anim="form"] { transition-delay:.34s; }
.lxHero [data-anim="card1"]{ transition-delay:.46s; }
.lxHero [data-anim="card2"]{ transition-delay:.56s; }
.lxHero [data-anim="vector"]{ transition-delay:.62s; }

/* mobile hero */
@media (max-width:520px){
  .lxHero{ padding:104px 0 28px; }
  .lxHero__wrap{ width:100%; padding:0 18px; }
  .lxHero__badge{ padding:10px 14px; font-size:12px; }
  .lxHero__title{ margin-top:14px; font-size:42px; line-height:1.08; max-width:20ch; }
  .lxHero__bottom{ display:block; margin-top:18px; }
  .lxHero__cards{ flex-direction:column; gap:14px; margin-top:14px; }
  .lxHero__card{ width:100%; padding:18px; }
  .lxHero__num{ font-size:30px; }
  .lxHero__sub{ font-size:12px; margin:0 0 10px; }
  .lxHero__desc{ font-size:12.5px; line-height:1.6; max-width:36ch; margin-top:14px; }
  .lxHero__form{ flex-direction:column; align-items:stretch; border-radius:18px; padding:12px; gap:10px; }
  .lxHero__input{ width:100%; font-size:14px; padding:8px 6px; }
  .lxHero__btn{ width:100%; }
  .lxHero__vectorWrap{ margin-top:28px; padding:0 18px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .lxHero, .lxHero [data-anim], .smartGlow{ animation:none !important; transition:none !important; }
  .lxHero [data-anim]{ opacity:1 !important; transform:none !important; }
}

/* =========================
   7) ANALYTICS CARDS (anaSec)
========================= */
.anaSec{
  padding:70px 0 78px;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.anaSec::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(16,24,40,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,24,40,.06) 1px, transparent 1px);
  background-size:180px 180px;
  opacity:.35;
  pointer-events:none;
}
.anaWrap{
  position:relative;
  z-index:2;
  width:min(var(--w), 92vw);
  margin:auto;
  text-align:center;
}
@media (max-width:768px){ .anaWrap{ padding:0 16px; width:100%; } }

.anaKicker{ margin:0 0 12px; font-size:16px; font-weight:800; color:#2f8a52; }
.anaTitle{ margin:0 0 34px; font-size:clamp(28px, 4vw, 46px); line-height:1.15; font-weight:950; color:#0f172a; }

.anaGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
}
.anaCard{
  background:#fff;
  border-radius:18px;
  padding:30px 30px 28px;
  text-align:left;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  min-height:320px;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, background .14s linear, border-color .14s linear;
}
.anaCard:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.12); }

.anaIcon{
  width:56px; height:56px;
  border-radius:14px;
  background:#2f8a52;
  display:grid;
  place-items:center;
  margin-bottom:18px;
}
.anaIcon svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.anaCardTitle{ margin:0 0 14px; font-size:22px; font-weight:950; color:#0f172a; }
.anaCardText{ margin:0 0 22px; font-size:15px; line-height:1.7; color:rgba(15,23,42,.70); max-width:95%; }

.anaBtn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.15);
  color:#0f172a;
  background:#fff;
  font-size:14px;
  font-weight:800;
  width:fit-content;
}

/* active middle card */
.anaCard--active{
  background:#CAF880;
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 45px rgba(15,23,42,.14);
}
.anaCard--active .anaCardTitle{ color:#0b1f13; }
.anaCard--active .anaCardText{ color:rgba(0,0,0,.78); }
.anaIcon--active{ background:rgba(255,255,255,.35); }
.anaIcon--active svg{ stroke:#0b1f13; }
.anaBtn--active{ background:rgba(255,255,255,.80); border-color:rgba(255,255,255,.55); }

/* reveal */
.anaReveal{
  opacity:0;
  transform:translateY(22px) scale(.99);
  filter:blur(6px);
  transition:opacity .75s ease, transform .75s ease, filter .75s ease;
}
.anaReveal.is-in{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.anaGrid .anaReveal:nth-child(1){ transition-delay:.05s; }
.anaGrid .anaReveal:nth-child(2){ transition-delay:.15s; }
.anaGrid .anaReveal:nth-child(3){ transition-delay:.25s; }

/* hover invert for side cards only */
.anaCard:not(.anaCard--active):hover{
  background:#0b0f14;
  border-color:rgba(255,255,255,.14);
}
.anaCardTitle,.anaCardText,.anaIcon,.anaBtn{
  transition:color .14s linear, background .14s linear, border-color .14s linear;
}
.anaCard:not(.anaCard--active):hover .anaCardTitle{ color:#fff; }
.anaCard:not(.anaCard--active):hover .anaCardText{ color:rgba(255,255,255,.78); }
.anaCard:not(.anaCard--active):hover .anaIcon{ background:#fff; }
.anaCard:not(.anaCard--active):hover .anaIcon svg{ stroke:#0b0f14; }
.anaCard:not(.anaCard--active):hover .anaBtn{ color:#fff; border-color:rgba(255,255,255,.35); background:transparent; }

@media (max-width:992px){
  .anaGrid{ grid-template-columns:1fr; }
  .anaCard{ min-height:auto; }
  .anaGrid .anaReveal:nth-child(1),
  .anaGrid .anaReveal:nth-child(2),
  .anaGrid .anaReveal:nth-child(3){ transition-delay:0s; }
}
@media (prefers-reduced-motion: reduce){
  .anaReveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}



/* =========================================================
   WF HERO (Desktop 1295px + Mobile same as reference)
   - Clean spacing
   - Premium button (arrow inside)
   - Mobile layout exactly like screenshot
   - Scroll reveal kept
========================================================= */
/* Base */


/* Base */
.role-section {   background-color:#ffffff; }
.role-heading { font-size:2.5rem; font-weight:600; margin-bottom: -10px;  }
.role-disc{ font-size: 18px; color: #676666; margin-bottom: -5px;}

/* Tabs / Items */
.role-tab{
  cursor:pointer;
  padding:14px 16px;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease-in-out;
  margin-bottom: 0px;
  color:#6c757d;
}
.role-tab + .role-tab { margin-top:10px; }
.role-tab.active {background:#ffffff; color:#000; }
.role-tab:focus { outline:2px solid #00794D; outline-offset:2px; }

.role-title { font-weight:700; font-size:20px; margin-bottom: 10px;}
.desc { font-size:0.9rem; margin:.25rem 0; color:#6c757d; font-weight:500; }
.learn-more-link { font-size:1.1rem; font-weight:600; color:#0f5aa5; text-decoration:none; margin-top:15px; }

/* Always-visible descriptions */
.role-list .desc-wrap { display:block; margin-top:.25rem; }
.role-list .desc { margin:0 0 .25rem 0; }

/* (Legacy collapsible kept harmless; not used but doesn’t affect layout) */
.collapsible { max-height:none; opacity:1; transition:none; }

/* Image */
.image-wrapper { padding:0; border-radius:0; }
.role-img{
  max-height:530px;
  object-fit:contain;
  width:100%;
  height:auto;
  border-radius:.75rem;
  transition:opacity .35s ease, transform .35s ease;
}
.role-img.switching { opacity:.1; transform:scale(.98); }



/* Progress line (kept) */
.border-progress{
  height:3px;
  background:#e6e8ef;
  border-radius:999px;
  overflow:hidden;
  margin-top:10px;
  position:relative;
}
.border-progress.active::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, #C0FF6C, #C0FF6C);
  animation:fillBar 5s linear forwards;
}

/* Single, conflict-free keyframes (scaleX approach) */
@keyframes fillBar { to { transform:scaleX(1); } }

/* Responsive */
@media (max-width:992px){
  .role-heading{ font-size:2.2rem; }
  .role-title{ font-size:1rem; }
  .desc{ font-size:.875rem; }
  .learn-more-link{ font-size:1rem; }
  .role-img{ max-height:400px; }
}
@media (max-width:768px){
  .role-heading{ font-size:1.75rem; }
  .role-title{ font-size:.95rem; }
  .desc{ font-size:.825rem; }
  .learn-more-link{ font-size:.95rem; }
  .role-img{ max-height:400px; }
}
@media (max-width:576px){
  .role-heading{ font-size:1.5rem; }
  .role-title{ font-size:.9rem; }
  .desc{ font-size:.8rem; }
  .learn-more-link{ font-size:.9rem; }
  .role-img{ max-height:400px; }
}



/* Image: minimal defaults; no perpetual will-change */
.animated-3d{
  display:block;
  transform-origin:center center;
  backface-visibility:hidden;
  transform: translate3d(0,0,0);   /* kick to GPU without changing layout */
  filter:none;
  opacity:1;
}

/* Only enable heavy hints while animating (JS toggles .is-animating) */
.perspective-container.is-animating .animated-3d{
  will-change: transform, filter, opacity;  /* allocate GPU resources only in-flight */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .animated-3d{
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
    transition:none !important;
  }
}



/* =========================================================
   ========================================================= */




/* Base */
.persona-section {  background-color: #F8F9FB; }
.persona-heading { font-size:3.0rem; font-weight:600; }

/* Image (now on the LEFT) */
.media-wrapper { padding:0; border-radius:0; }
.media-img{
  max-height:530px;
  object-fit:contain;
  width:100%;
  height:auto;
  border-radius:.75rem;
  transition:opacity .35s ease, transform .35s ease;
}
.media-switching { opacity:.1; transform:scale(.98); }

/* Tabs / Items (now on the RIGHT) */
.persona-tab{
  cursor:pointer;
  padding:14px 16px;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease-in-out;
  margin-bottom: 0px;
  color:#6c757d;
}
.persona-tab + .persona-tab { margin-top:10px; }
.persona-tab.active { background:#ffffff; color:#000; }
.persona-tab:focus { outline:2px solid #00794D; outline-offset:2px; }

.persona-title { font-weight:700; font-size:20px; }
.persona-desc { font-size:0.9rem; margin:.25rem 0; color:#6c757d; font-weight:500; }
.persona-link { font-size:1.1rem; font-weight:600; color:#0f5aa5; text-decoration:none; margin-top:15px; }

/* Always-visible descriptions */
.persona-list .persona-descwrap { display:block; margin-top:.25rem; }
.persona-list .persona-desc { margin:0 0 .25rem 0; }

/* (Legacy collapsible neutralized) */
.collapsible { max-height:none; opacity:1; transition:none; }

/* Progress line (kept) */
.persona-progress{
  height:3px;
  background:#e6e8ef;
  border-radius:999px;
  overflow:hidden;
  margin-top:10px;
  position:relative;
}
.persona-progress.active::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, #C0FF6C, #C0FF6C);
  animation:personaFill 5s linear forwards;
}

/* Keyframes */
@keyframes personaFill { to { transform:scaleX(1); } }

/* Responsive */
@media (max-width:992px)
{
  .persona-section .row.align-items-center{ flex-direction: column-reverse; }
  .persona-heading{ font-size:2.2rem; }
  .persona-title{ font-size:1rem; }
  .persona-desc{ font-size:.875rem; }
  .persona-link{ font-size:1rem; }
  .media-img{ max-height:400px; }
}
@media (max-width:768px){
  .persona-heading{ font-size:1.75rem; }
  .persona-title{ font-size:.95rem; }
  .persona-desc{ font-size:.825rem; }
  .persona-link{ font-size:.95rem; }
  .media-img{ max-height:400px; }
}
@media (max-width:576px){
  .persona-heading{ font-size:1.5rem; }
  .persona-title{ font-size:.9rem; }
  .persona-desc{ font-size:.8rem; }
  .persona-link{ font-size:.9rem; }
  .media-img{ max-height:400px; }
}


/* =========================================================
   ========================================================= */


   .uueye-section {  background-color:#ffffff;}
.uueye-heading { font-size:3.5rem; font-weight:600; }

/* Tabs */
.uueye-tab{
  cursor:pointer;
  padding:14px 16px;
  border-radius: 12px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease-in-out;
  margin-bottom: 0rem;
  color:#6c757d;
}
.uueye-tab + .uueye-tab { margin-top:10px; }
.uueye-tab.active { background:#ffffff; font-weight:600; color:#000; }
.uueye-tab:focus { outline:2px solid #00794D; outline-offset:2px; }

.uueye-title { font-weight:700; font-size:20px; }
.uueye-desc { font-size:0.9rem; margin:.25rem 0; color:#6c757d; font-weight:500; }
.uueye-link { font-size:1.1rem; font-weight:600; color:#0f5aa5; text-decoration:none; margin-top:15px; }
.uueye-list .uueye-descwrap { display:block; margin-top:.25rem; }
.uueye-list .uueye-desc { margin:0 0 .25rem 0; }

/* Image */
.uueye-imagewrapper { padding:0; border-radius:0; }
.uueye-img{
  max-height:530px;
  object-fit:contain;
  width:100%;
  height:auto;
  border-radius:.75rem;
  transition:opacity .35s ease, transform .35s ease;
}
.uueye-img.switching { opacity:.1; transform:scale(.98); }

/* Progress bar */
.uueye-progress{
  height:3px;
  background:#e6e8ef;
  border-radius:999px;
  overflow:hidden;
  margin-top:10px;
  position:relative;
}
.uueye-progress.active::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, #C0FF6C, #C0FF6C);
  animation:uueyeFill 5s linear forwards;
}
@keyframes uueyeFill { to { transform:scaleX(1); } }

/* Responsive */
@media (max-width:992px){
  .uueye-heading{ font-size:2.2rem; }
  .uueye-title{ font-size:1rem; }
  .uueye-desc{ font-size:.875rem; }
  .uueye-link{ font-size:1rem; }
  .uueye-img{ max-height:400px; }
}
@media (max-width:768px){
  .uueye-heading{ font-size:1.75rem; }
  .uueye-title{ font-size:.95rem; }
  .uueye-desc{ font-size:.825rem; }
  .uueye-link{ font-size:.95rem; }
  .uueye-img{ max-height:400px; }
}
@media (max-width:576px){
  .uueye-heading{ font-size:1.5rem; }
  .uueye-title{ font-size:.9rem; }
  .uueye-desc{ font-size:.8rem; }
  .uueye-link{ font-size:.9rem; }
  .uueye-img{ max-height:400px; }
}

/* =========================================================
   ========================================================= */

   /* Base */
.case-insights-section { 
  background-color: #F8F9FB; 
}

.insights-heading { 
  font-size: 3rem; 
  font-weight: 600; 
}

/* Image (LEFT) */
.insights-media-wrapper { 
  padding: 0; 
  border-radius: 0; 
}

.insights-media-img {
  max-height: 530px;
  object-fit: contain;
  width: 100%;
  height: auto;
  border-radius: .75rem;
  transition: opacity .35s ease, transform .35s ease;
}

.media-is-switching { 
  opacity: .1; 
  transform: scale(.98); 
}

/* Feature Items (RIGHT) */
.insight-item {
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all .3s ease-in-out;
  margin-bottom: 0;
  color: #6c757d;
}

.insight-item + .insight-item { 
  margin-top: 10px; 
}

.insight-item.is-active { 
  background: #ffffff; 
  color: #000; 
}

.insight-item:focus { 
  outline: 2px solid #00794D; 
  outline-offset: 2px; 
}

.insight-title { 
  font-weight: 700; 
  font-size: 20px; 
}

.insight-description { 
  font-size: 0.9rem; 
  margin: .25rem 0; 
  color: #6c757d; 
  font-weight: 500; 
}

.insight-link { 
  font-size: 1.1rem; 
  font-weight: 600; 
  color: #0f5aa5; 
  text-decoration: none; 
  margin-top: 15px; 
}

/* Always-visible descriptions */
.insights-feature-list .insight-content { 
  display: block; 
  margin-top: .25rem; 
}

.insights-feature-list .insight-description { 
  margin: 0 0 .25rem 0; 
}

/* Legacy collapsible neutralized */
.collapsible { 
  max-height: none; 
  opacity: 1; 
  transition: none; 
}

/* Progress Line */
.insight-progress-bar {
  height: 3px;
  background: #e6e8ef;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}

.insight-progress-bar.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #C0FF6C, #C0FF6C);
  animation: insightFill 5s linear forwards;
}

/* Keyframes */
@keyframes insightFill { 
  to { transform: scaleX(1); } 
}

/* Responsive */
@media (max-width: 992px) {
  .case-insights-section .row.align-items-center { 
    flex-direction: column-reverse; 
  }

  .insights-heading { font-size: 2.2rem; }
  .insight-title { font-size: 1rem; }
  .insight-description { font-size: .875rem; }
  .insight-link { font-size: 1rem; }
  .insights-media-img { max-height: 400px; }
}

@media (max-width: 768px) {
  .insights-heading { font-size: 1.75rem; }
  .insight-title { font-size: .95rem; }
  .insight-description { font-size: .825rem; }
  .insight-link { font-size: .95rem; }
  .insights-media-img { max-height: 400px; }
}

@media (max-width: 576px) {
  .insights-heading { font-size: 1.5rem; }
  .insight-title { font-size: .9rem; }
  .insight-description { font-size: .8rem; }
  .insight-link { font-size: .9rem; }
  .insights-media-img { max-height: 400px; }
  .insights-heading{ padding: 15px;}
  .insights-subtext{ padding: 15px;}
}

/* =========================
   9) GEN SECTION (tabs + accordion + image)
========================= */
.genSec{
  padding:80px 0 92px;
  background:#CAF880;
  position:relative;
  overflow:hidden;
}
.genSec::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.46), transparent 52%),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.10), transparent 58%);
  opacity:.75;
  pointer-events:none;
}
.genWrap{
  width:min(var(--w), 92vw);
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* tabs */
.genTabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin:0 0 22px;
}
.genTab{
  appearance:none;
  border:1px solid rgba(11,31,19,.16);
  background:rgba(255,255,255,.66);
  color:#0b1f13;
  padding:10px 16px;
  border-radius:999px;
  font-weight:950;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: background 140ms linear, border-color 140ms linear, transform 120ms linear;
}
.genDot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(11,31,19,.35);
  box-shadow:0 0 0 4px rgba(11,31,19,.10);
}
.genTab.is-active{
  background:#0b1f13;
  color:#fff;
  border-color:rgba(11,31,19,.42);
  box-shadow:0 12px 28px rgba(11,31,19,.22);
}
.genTab.is-active .genDot{
  background:#CAF880;
  box-shadow:0 0 0 4px rgba(202,248,128,.18), 0 0 16px rgba(202,248,128,.35);
}
.genTab:active{ transform:translateY(1px); }

/* main card */
.genCard{
  position:relative;
  border-radius:22px;
  padding:34px;
  display:grid;
  grid-template-columns: 1.02fr .98fr;
  gap:34px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%),
    linear-gradient(180deg, rgba(7,9,11,.94), rgba(7,9,11,.92));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  overflow:hidden;
  isolation:isolate;
}
.genCard::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(202,248,128,.16), transparent 62%),
    radial-gradient(820px 520px at 92% 26%, rgba(0,255,200,.10), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.genCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.6px);
  background-size:26px 26px;
  opacity:.12;
  pointer-events:none;
}
.genLeft,.genRight{ position:relative; z-index:1; }

.genTitle{
  margin:0 0 14px;
  font-size:clamp(28px, 3.3vw, 44px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:950;
  color:#fff;
  max-width:22ch;
}
.genSub{
  margin:0 0 18px;
  color:rgba(255,255,255,.74);
  line-height:1.7;
  font-size:15px;
  max-width:58ch;
}

/* accordion */
.genAcc{ display:flex; flex-direction:column; gap:10px; margin:10px 0 18px; }
.genItem{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  transition:border-color 140ms linear, background 140ms linear;
}
.genItem.is-open{
  border-color:rgba(202,248,128,.22);
  background:rgba(202,248,128,.10);
}
.genHead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  cursor:pointer;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
}
.genHeadLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.genCheck{
  width:20px;height:20px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(202,248,128,.14);
  border:1px solid rgba(202,248,128,.24);
  flex:0 0 auto;
}
.genCheck svg{ width:13px;height:13px; fill:none; stroke:#CAF880; stroke-width:2; }
.genHeadTitle{
  font-weight:950;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.genChevron{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition:transform 150ms var(--ease);
}
.genChevron svg{ width:16px;height:16px; fill:none; stroke:#fff; stroke-width:2; }
.genItem.is-open .genChevron{ transform:rotate(180deg); }

.genBody{ max-height:0; overflow:hidden; transition:max-height 220ms var(--ease); }
.genBodyInner{ padding:0 14px 14px 44px; color:rgba(255,255,255,.78); line-height:1.65; font-size:14px; }

/* CTA */
.genBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  font-size:14px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(11,31,19,.92);
  color:#CAF880;
  border:1px solid rgba(202,248,128,.20);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  transition:transform 120ms linear, filter 120ms linear;
}
.genBtn:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* preview */
.genPreview{
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.genPreview::before{
  content:"";
  position:absolute;
  top:-12%;
  left:-22%;
  width:78%;
  height:125%;
  background:radial-gradient(circle at 25% 55%, rgba(0,255,170,.45), rgba(0,180,120,.30), rgba(0,120,85,.18), transparent 68%);
  filter:blur(70px);
  opacity:.85;
  pointer-events:none;
  mix-blend-mode:screen;
}

.genImg{
  width:100%;
  max-width:580px;
  border-radius:14px;
  object-fit:contain;
}

/* reveal (single version only) */
.genReveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity 520ms var(--ease), transform 620ms var(--ease);
  will-change:transform, opacity;
}
.genReveal.is-in{ opacity:1; transform:translate3d(0,0,0); }

/* responsive */
@media (max-width:980px){
  .genCard{ grid-template-columns:1fr; }
  .genTitle{ max-width:none; }
}
@media (max-width:600px){
  .genCard{ padding:18px; gap:18px; border-radius:18px; }
  .genHeadTitle{ white-space:normal; overflow:visible; text-overflow:unset; line-height:1.25; }
  .genBodyInner{ padding:0 14px 14px 14px; }
  .genImg{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .genReveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .genBody{ transition:none !important; }
}

/* =========================
   4) FEATURES 4-CARD GRID (featSec)
========================= */
.quote-sec{
  padding: 70px 0 80px;
  background: #fff;
}

.quote-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.quote-title{
  font-size: 56px;
  line-height: 1.08;
  font-weight: 800;
  color: #0b0b0b;
  margin: 0 auto 48px;
  letter-spacing: -0.02em;
  max-width: 980px;
}

.quote-mark{
  font-weight: 900;
}

.hl{
  color: #0b0b0b;
  background: linear-gradient(transparent 60%, #B9FB6A 60%);
  padding: 0 .12em;
  border-radius: 6px;
}

.quote-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  align-items: stretch;
}

.qcard{
  text-align: left;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  padding: 26px 26px 24px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  min-height: 160px;
}

.qcard:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 16px 30px rgba(0,0,0,.08);
}

.qcard.is-active{
  background: #0b0b0b;
  border: 2px solid #C9FF72;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}

/* Title */
.qcard.is-active h3{
  color: #ffffff;
}

/* Paragraph */
.qcard.is-active p{
  color: rgba(255,255,255,.85);
}

/* Icon container */
.qcard.is-active .qicon{
  color: #ffffff;
}

.qicon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #0b0b0b;
  margin-bottom: 14px;
}

.qicon svg{
  width: 34px;
  height: 34px;
}

.qcard h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #0b0b0b;
}

.qcard p{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(0,0,0,.65);
  max-width: 260px;
}

@media (max-width: 1100px){
  .quote-title{ font-size: 46px; }
  .quote-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .quote-sec{ padding: 56px 0 60px; }
  .quote-title{ font-size: 34px; line-height: 1.12; margin-bottom: 28px; }
  .quote-cards{ grid-template-columns: 1fr; gap: 14px; }
  .qcard{ padding: 22px; }
}




/* =========================
   11) TESTIMONIAL MARQUEE (marqTesti)
========================= */
.marqTesti{ padding:92px 0 74px; background:#CAF880; }
.marqWrap{ width:min(var(--w), 92vw); margin:0 auto; }

.marqHead{ text-align:center; margin-bottom:34px; }
.marqTitle{
  font-size:clamp(28px, 3.1vw, 46px);
  font-weight:950;
  letter-spacing:-0.03em;
  color:#0b0b0b;
  margin:0 0 10px;
  line-height:1.08;
}
.marqSub{
  max-width:720px;
  margin:0 auto;
  color:rgba(0,0,0,.62);
  line-height:1.75;
  font-size:15.5px;
  font-weight:700;
}

.marqGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:26px;
}

.marqCol{
  position:relative;
  height:720px;
  overflow:hidden;
  border-radius:22px;
}

.marqFadeTop,.marqFadeBot{
  position:absolute; left:0; right:0;
  height:90px;
  z-index:3;
  pointer-events:none;
}
.marqFadeTop{ top:0; background:linear-gradient(to bottom, rgba(202,248,128,1), rgba(202,248,128,0)); }
.marqFadeBot{ bottom:0; background:linear-gradient(to top, rgba(202,248,128,1), rgba(202,248,128,0)); }

.marqTrack{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:22px;
  will-change:transform;
  transform:translateZ(0);
}
.marqStack{ display:flex; flex-direction:column; gap:22px; }

.marqCard{
  border-radius:22px;
  padding:26px 26px 24px;
  min-height:210px;

  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.12);

  transition:transform .25s ease, box-shadow .25s ease;
}
.marqCard:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 85px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.06);
}

.marqBrand{ font-weight:900; color:#0b0b0b; font-size:14px; display:flex; gap:8px; margin-bottom:12px; opacity:.92; }
.marqQuote{ margin:0 0 18px; color:rgba(0,0,0,.78); font-weight:750; line-height:1.7; font-size:15px; }
.marqMeta{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.marqName{ font-weight:900; color:rgba(0,0,0,.78); }
.marqRole{ color:rgba(0,0,0,.52); font-weight:800; }
.marqRate{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:7px 12px;
  font-weight:950;
  color:#0b0b0b;
}

/* black cards pattern (kept) */
.marqGrid .marqCol:first-child .marqCard:nth-child(3n),
.marqGrid .marqCol:last-child .marqCard:nth-child(3n-1){
  background:#0b0b0b;
  border-color:rgba(255,255,255,.10);
}
.marqGrid .marqCol:first-child .marqCard:nth-child(3n) *,
.marqGrid .marqCol:last-child .marqCard:nth-child(3n-1) *{
  color:#fff !important;
}
.marqGrid .marqCol:first-child .marqCard:nth-child(3n) .marqRole,
.marqGrid .marqCol:last-child .marqCard:nth-child(3n-1) .marqRole{
  color:rgba(255,255,255,.60) !important;
}
.marqGrid .marqCol:first-child .marqCard:nth-child(3n) .marqRate,
.marqGrid .marqCol:last-child .marqCard:nth-child(3n-1) .marqRate{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* marquee animation */
@keyframes marqUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes marqDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.marqUp{ animation:marqUp linear infinite; }
.marqDown{ animation:marqDown linear infinite; }
.marqSpeed1{ animation-duration:7s !important; }
.marqSpeed2{ animation-duration:9s !important; }
.marqSpeed3{ animation-duration:8s !important; }

.marqCtaWrap{ display:flex; justify-content:center; margin-top:22px; }
.marqCtaBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#0b0b0b;
  color:#fff;
  font-weight:950;
  padding:12px 18px;
  border-radius:999px;
  box-shadow:0 18px 55px rgba(0,0,0,.20);
  transition:transform .2s ease, box-shadow .2s ease;
}
.marqCtaBtn span{
  width:34px;height:34px;border-radius:999px;
  background:#fff;color:#0b0b0b;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:950;
}
.marqCtaBtn:hover{ transform:translateY(-2px); box-shadow:0 24px 70px rgba(0,0,0,.24); }

/* headline animation (kept) */
.marqTesti.anim-ready .marqHead{
  opacity:0;
  transform:translateY(40px) scale(.92);
  filter:blur(6px);
  transition:opacity .8s ease, transform .8s var(--ease), filter .8s ease;
}
.marqTesti.anim-ready.is-inview .marqHead{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* responsive */
@media (max-width:991px){
  .marqGrid{ grid-template-columns:1fr; gap:16px; }
  .marqCol{ height:520px; }
}
@media (max-width:576px){
  .marqGrid{ grid-template-columns:1fr !important; }
  .marqGrid .marqCol:nth-child(2),
  .marqGrid .marqCol:nth-child(3){ display:none; }
  .marqCol{ height:520px; }
}
@media (prefers-reduced-motion: reduce){
  .marqUp,.marqDown{ animation:none !important; }
  .marqCol{ overflow:auto; }
  .marqFadeTop,.marqFadeBot{ display:none; }
}



/* ===============================
   INTEGRATION SECTION – PIXEL CLEAN
=============================== */

.integration-sec{
  background:#F8F9FB;
  padding:90px 0 80px;
}

.integration-sec .container{
  max-width:1295px;
  margin:auto;
}

/* pill */

.int-pill{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  background:#eaf7d9;
  color:#0b0b0f;
  border:1px solid #d6edb8;
}

/* title */

.int-title{
  font-size:56px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1.05;
  color:#0b0b0f;
}

/* subtitle */

.int-sub{
  max-width:780px;
  font-size:16px;
  line-height:1.75;
  color:#5b5e66;
}

/* CTA */

.int-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 16px 12px 22px;
  border-radius:999px;
  background:#0b0b0f;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:.25s ease;
}

.int-cta-arrow{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  color:#0b0b0f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  transition:.25s ease;
}

.int-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}

.int-cta:hover .int-cta-arrow{
  transform:translateX(4px);
}

/* SVG image */

/* ✅ SVG always center */
.int-img{
  display:block;              /* important */
  margin:70px auto 0;         /* auto = center */
  width:100%;
  max-width:1100px;
  height:auto;
}

/* =========================
   Scroll reveal animation
========================= */

/* default hidden state */
.integration-sec .int-pill,
.integration-sec .int-title,
.integration-sec .int-sub,
.integration-sec .int-cta,
.integration-sec .int-img{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* stagger delays */
.integration-sec .int-pill{ transition-delay: .05s; }
.integration-sec .int-title{ transition-delay: .12s; }
.integration-sec .int-sub{ transition-delay: .18s; }
.integration-sec .int-cta{ transition-delay: .24s; }
.integration-sec .int-img{ transition-delay: .32s; }

/* when in view */
.integration-sec.is-inview .int-pill,
.integration-sec.is-inview .int-title,
.integration-sec.is-inview .int-sub,
.integration-sec.is-inview .int-cta,
.integration-sec.is-inview .int-img{
  opacity:1;
  transform: translateY(0);
}

/* SVG slight zoom + soften */
.integration-sec .int-img{
  transform: translateY(18px) scale(.98);
}
.integration-sec.is-inview .int-img{
  transform: translateY(0) scale(1);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .integration-sec .int-pill,
  .integration-sec .int-title,
  .integration-sec .int-sub,
  .integration-sec .int-cta,
  .integration-sec .int-img{
    transition:none;
    opacity:1;
    transform:none;
  }
}


/* ===============================
   RESPONSIVE
=============================== */

@media(max-width:991px){
  .int-title{ font-size:38px; }
  .int-img{ margin-top:50px; }
}

@media(max-width:575px){
  .integration-sec{
    padding:70px 16px;
  }

  .int-title{
    font-size:30px;
  }

  .int-sub{
    font-size:15px;
  }
}



/* =========================
   FAQ SECTION 
   ========================= */
.faq {
  background: #ffffff;
}

.faq-badge{
  display:inline-block;
  padding:6px 16px;
  border-radius:999px;
  background:#ecffd6;
  color:#6acb00;
  font-weight:600;
  font-size:14px;
  margin-bottom:16px;
}

.faq-title{
  font-size:48px;
  font-weight:700;
  line-height:1.15;
  margin-bottom:16px;
}

.faq-desc{
  color:#666;
  font-size:16px;
  max-width:420px;
  margin-bottom:30px;
}

.faq-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 26px;
  background:#b7ff4f;
  color:#000;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  transition:.25s;
}

.faq-btn span{
  background:#000;
  color:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.faq-btn:hover{
  transform:translateY(-2px);
  color:black;
}

.faq-list{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #eee;
}

.faq-item{
  border-bottom:1px solid #eee;
}

.faq-item:last-child{
  border-bottom:none;
}

.faq-item h3{
  margin:0;
  padding:22px 24px;
  font-size:18px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.faq-toggle{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:.3s;
}

.faq-content{
  padding:0 24px 0;
  max-height:0px;
  overflow:hidden;
  color:#666;
  transition:.35s ease;
}

.faq-item.faq-active{
  background:linear-gradient(180deg,#f2ffd6,#ffffff);
}

.faq-item.faq-active .faq-content{
  padding:0 24px 22px;
  max-height:900px;
}

.faq-item.faq-active .faq-toggle{
  background:#b7ff4f;
  transform:rotate(180deg);
}

@media(max-width:768px){
  .faq-title{font-size:34px;}
  .faq-desc{max-width:100%;}
}



/* =========================
   12) CTA BLOCK
========================= */
.sas-ctaBlock{ background:#fff; }
.sas-ctaPanel{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#b7ff4a;
  padding:90px 20px;
}
.sas-ctaInner{ position:relative; z-index:2; max-width:980px; margin:0 auto; text-align:center; }
.sas-ctaPanel::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.16) 0px,
    rgba(255,255,255,.16) 42px,
    rgba(255,255,255,.08) 42px,
    rgba(255,255,255,.08) 84px
  );
  opacity:.65;
  pointer-events:none;
}
.sas-ctaPill{
  display:inline-flex;
  padding:10px 18px;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:900;
  font-size:14px;
}
.sas-ctaTitle{
  font-size:54px;
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:950;
  color:#111;
  margin:10px 0 8px;
}
.sas-ctaSub{
  font-size:16px;
  line-height:1.7;
  color:#111;
  opacity:.85;
  font-weight:700;
  margin:0 auto 18px;
  max-width:70ch;
}
.sas-ctaBtn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 18px 14px 22px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:900;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sas-ctaBtn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18); color:#fff; }
.sas-ctaBtnIcon{
  width:38px;height:38px;border-radius:999px;
  background:#fff;color:#111;
  display:grid;place-items:center;
}

@media (max-width:991px){
  .sas-ctaPanel{ padding:70px 18px; }
  .sas-ctaTitle{ font-size:42px; }
}
@media (max-width:576px){
  .sas-ctaPanel{ padding:56px 16px; border-radius:18px; }
  .sas-ctaTitle{ font-size:34px; }
  .sas-ctaSub{ font-size:15px; }
  .sas-ctaBtn{ width:100%; justify-content:center; }
}

/* =========================
   CTA REVEAL ON SCROLL
========================= */

/* default hidden */
.sas-ctaPanel .sas-ctaPill,
.sas-ctaPanel .sas-ctaTitle,
.sas-ctaPanel .sas-ctaSub,
.sas-ctaPanel .sas-ctaBtn{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* stagger */
.sas-ctaPanel .sas-ctaPill{ transition-delay:.05s; }
.sas-ctaPanel .sas-ctaTitle{ transition-delay:.12s; }
.sas-ctaPanel .sas-ctaSub{ transition-delay:.18s; }
.sas-ctaPanel .sas-ctaBtn{ transition-delay:.26s; }

/* when visible */
.sas-ctaPanel.is-inview .sas-ctaPill,
.sas-ctaPanel.is-inview .sas-ctaTitle,
.sas-ctaPanel.is-inview .sas-ctaSub,
.sas-ctaPanel.is-inview .sas-ctaBtn{
  opacity:1;
  transform: translateY(0);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .sas-ctaPanel .sas-ctaPill,
  .sas-ctaPanel .sas-ctaTitle,
  .sas-ctaPanel .sas-ctaSub,
  .sas-ctaPanel .sas-ctaBtn{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* =========================
   13) FOOTER 
   ========================= */
  .footer-v2{
  background-image:url('https://www.casefox.com/assets/img/za/footer-img.webp');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  font-size:15px;
  color:#111;
}

/* TOP AREA */

.footer-v2 .footer-top{
  padding:60px 0;
}

.footer-v2 .footer-top ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-v2 .footer-top ul li{
  margin-bottom:10px;
}

.footer-v2 .footer-top .row{
  justify-content:center;
  text-align:left;
}

.footer-v2 .footer-top ul{
  padding:0;
  margin:0;
  list-style:none;
}

.footer-v2 .footer-top li{
  margin-bottom:8px;
}

.footer-v2 .footer-top ul li a{
  color:#111;
  text-decoration:none;
}

.footer-v2 .footer-top ul li a:hover{
  text-decoration:underline;
}

/* =========================
   BOTTOM AREA
========================= */

.footer-v2 .footer-bottom{
  background:#e9e9e9;
  padding:20px 31px;
  border-top:1px solid #cfd8e1;
}

.footer-v2 .footer-bottom .container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0;
}

/* SOCIAL ICONS */

.footer-v2 .social-icons{
  display:flex;
  align-items:center;
  gap:15px;
}

.footer-v2 .social-icons a{
  color:#111;
  font-size:20px;
  text-decoration:none;
}

/* LEGAL TEXT */

.footer-v2 .legal-links{
  flex:1;
  text-align:center;
}

.footer-v2 .legal-links p{
  margin:0;
}

.footer-v2 .legal-links a{
  margin-left:15px;
  color:#111;
  text-decoration:none;
}

.footer-v2 .legal-links a:hover{
  text-decoration:underline;
}

/* APP BUTTONS */

.footer-v2 .app-buttons{
  display:flex;
  gap:10px;
}

.footer-v2 .app-buttons img{
  height:40px;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

.footer-v2 .footer-bottom .container{
  flex-direction:column;
  text-align:center;
}

.footer-v2 .social-icons{
  justify-content:center;
}

.footer-v2 .legal-links{
  order:2;
}

.footer-v2 .app-buttons{
  justify-content:center;
}

}


/* =========================
   14) UTILITIES
========================= */
.scroll-top{
  position:fixed;
  right:15px;
  bottom:-15px;
  width:44px;height:44px;
  border-radius:999px;
  background:black;
  z-index:99999;
  visibility:hidden;
  opacity:0;
  transition:all .3s ease;
}
.scroll-top i{ font-size:24px; color:white; line-height:0; }
.scroll-top.active{ visibility:visible; opacity:1; bottom:15px; }


/* AOS delay disable on mobile */
@media (max-width:768px){ [data-aos-delay]{ transition-delay:0 !important; } }