:root{
    --grad-a:#ff3b8b;   /* pink */
    --grad-b:#a43ae8;   /* purple */
    --card-r:4px;
     --pp:#6e4dc3; --pp2:#9263e3; --pp3:#b182f3; --bg:#faf8ff;

     --purple-700:#6e4dc3;
    --purple-600:#9263e3;
    --purple-500:#b182f3;
    --lavender:#d1a8f9;
    --ink:#111322;
    --muted:#5b6074;
    --bg:#ffffff;
    --ring: rgba(110,77,195,.35);
  }

  a,button{
    cursor: pointer !important;
  }
.count {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s ease;
}
.count.animated {
  opacity: 1;
  transform: translateY(0);
}








.copy button{
  margin-top: 3px;
}

  
    /* ====== Wrapper ====== */
    .hero{
      position:relative;
      overflow:hidden;
      padding:90px 24px 60px;
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns: 1.05fr 1fr;
      gap:40px;
    }

    /* soft floating icons left */
    .side-icons{
      position:absolute; left:12px; top:30%; opacity:.18; font-weight:600;
      writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:3px;
      display:flex; gap:18px; align-items:center;
    }
    .side-icons span{transform:rotate(180deg)}

    /* ====== Left copy ====== */
    /* .copy h1{
      font-size: clamp(34px, 5vw, 54px);
      line-height:1.05;
      margin:0 0 14px;
    }
  
    .copy p{
      margin:0 0 28px;
      color:var(--muted);
      font-size:clamp(15px, 1.6vw, 18px);
      max-width:520px;
    } */


     /* Left copy */
  /* .copy{ max-width: 760px; color: var(--ink); } */

  /* Gradient heading */

  .copy{
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--ink);
  }

  .copy h1{
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(34px, 5.6vw, 50px) !important;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-600) 55%, var(--purple-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }


  .copy p{ margin: 10px 0 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--muted); }
  .copy p.lead{
    color: var(--purple-700);
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 20px);
  }

    .cta{
      display:inline-flex; align-items:center; gap:12px;
      padding:14px 22px; border-radius:999px; border:none; cursor:pointer;
      color:#fff; font-weight:600; letter-spacing:.2px; font-size:16px;
      /* background:linear-gradient(135deg, var(--pp) 0%, var(--pp-soft) 60%, var(--lav) 120%); */
      background: linear-gradient(135deg, #6e4dc3 0%, #9263e3 60%, #b182f3 120%);
          box-shadow: inset -20px -1px 40px #6b00ff1a;
      transition:transform .15s ease, box-shadow .2s ease;
    }
    .cta:hover{ transform:translateY(-2px); box-shadow:0 24px 48px rgba(61,33,150,.22); }
    .cta:active{ transform:translateY(0) scale(.99); }

    /* bottom features bar */
    .features{
      margin-top:46px;
      display:grid; grid-template-columns: repeat(4, 1fr);
      gap:20px;
      background:linear-gradient(180deg, #f6f3ff 0%, #f0ebff 100%);
      border-radius:28px; padding:22px;
      box-shadow:var(--shadow-soft);
    }
    .feat{
      display:grid; gap:10px; align-content:start; padding:14px 16px; border-radius:18px;
    }
    .feat h4{ margin:0; font-size:16px }
    .feat p{ margin:0; color:var(--muted); font-size:13px }

    /* avatars + stat chunk */
    .meta{
      display:flex; align-items:center; gap:18px; margin-top:18px;
    }
    .avatars{
      display:flex;
    }
    .avatar{
      width:34px; height:34px; border-radius:50%;
      border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.08);
      background:#e9e6ff; display:block;
    }
    .avatar + .avatar{ margin-left:-10px }
    .stat{
      font-weight:600; color:#4b3aa8; font-size:14px;
    }

    /* ====== Right: device & floating cards ====== */
    .right{
      position:relative; display:flex; align-items:center; justify-content:center;
    }
    .right img{
          max-width: 150%;
    height: 100%;
    }
    .blob{
      position:absolute; inset:-40px -20px -40px -20px; z-index:0;
      /* background:
        radial-gradient(500px 280px at 40% 60%, #efe8ff 0, transparent 70%),
        radial-gradient(400px 260px at 80% 30%, #f1eaff 0, transparent 70%); */
      filter:saturate(120%);
    }
    .phone{
        margin: 50px;
      position:relative; z-index:2;
      width:min(380px, 85%); border-radius:36px; padding:18px; background:var(--white);
      box-shadow:0 26px 80px rgba(60, 32, 150, .22);
    }
    .phone .screen{
      border-radius:28px; overflow:hidden;
      background:linear-gradient(180deg, var(--pp) 0%, var(--pp-soft) 45%, var(--pp-pastel) 100%);
      color:#fff; padding:22px 18px 16px;
      min-height:640px; position:relative;
    }
    .screen .topbar{
      display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; opacity:.95;
      font-weight:600;
    }
    .card-purple{
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
      padding:16px; border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
      margin:10px 0 16px;
    }
    .mini-list{
      background:#fff; color:#2a2a44; border-radius:18px; padding:14px; box-shadow:var(--shadow-soft);
    }
    .mini-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 6px; }
    .dot{ width:8px; height:8px; border-radius:50%; background:var(--pp); margin-right:10px; }
    .mini-left{ display:flex; align-items:center; gap:8px; }

    /* Rating badge */
    .rating{
      position:absolute; left:50%; top:-16px; transform:translateX(-50%);
      background:#fff; border-radius:999px; padding:8px 14px;     box-shadow: inset -20px -1px 40px #6b00ff1a;
      display:flex; gap:8px; align-items:center; font-weight:600;
    }
    .rating .star{ width:18px; height:18px; border-radius:50%; background:gold; display:inline-block }

    /* Floating side cards */
    .float-card{
      position:absolute; right:-22px; top:42px; z-index:3;
      width:220px; background:#fff; border-radius:18px; padding:14px;     box-shadow: inset -20px -1px 40px #6b00ff1a;
    }
    .float-title{ font-weight:700; margin:0 0 8px; font-size:14px; }
    .todo{
      position:absolute; right:-10px; bottom:28px; z-index:3;
      width:220px; background:#fff; border-radius:18px; padding:12px;     box-shadow: inset -20px -1px 40px #6b00ff1a;
    }
    .todo h5{ margin:0 0 10px; font-size:13px }
    .todo .task{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:12px; color:#3a3560 }
    .check{ width:14px; height:14px; border:2px solid #cfc2ff; border-radius:4px }

    /* ====== Footer stripe inside hero ====== */
    .footer-row{
      grid-column:1 / -1; margin-top:18px;
      display:flex; align-items:center; justify-content:space-between; gap:18px;
    }
    .download{
      margin-left:auto; font-weight:600; color:#4b3aa8;
      background:#fff; padding:10px 14px; border-radius:14px; box-shadow:var(--shadow-soft);
    }

    /* Responsive */
    @media (max-width: 960px){
      .hero{ grid-template-columns:1fr; padding:70px 18px }
      .footer-row{ flex-wrap:wrap }
      .float-card, .todo{ display:none }
      .features{ grid-template-columns: 1fr 1fr }
    }
    @media (max-width:460px){
      .features{ grid-template-columns: 1fr }
      .copy p{ max-width:unset }
    }
    .bg--gradient{ background: linear-gradient(135deg, #6b00ff 0%, #a779f5 100%); }
    .btn--gradient{     box-shadow: 0 10px 20px #9263e378;; }
    .border--gradient{ position:relative }
    .border--gradient::before{ content:''; position:absolute; inset:0; padding:2px; border-radius:14px;
      background: linear-gradient(135deg, #6b00ff 0%, #c223c1 100%);
      -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
    }
    .font--gradient{ background:linear-gradient(135deg, #6b00ff 0%, #9263e3 100%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    /* Header menu */
    .nav--btn{ @apply inline-flex items-center gap-1.5 px-2 py-3 font-semibold text-black; }
    .nav--btn:hover{ color:#6e4dc3; }
    /* Mega dropdown */
    .nav--dropdown{ position:absolute; left:50%; transform:translateX(-50%) translateY(10px);
      min-width:760px; background:#fff; border:1px solid #E7E7E7; border-radius:16px;
      box-shadow:0 24px 48px rgba(0,0,0,.08); display:none; z-index:40;
    }
    .group:hover .nav--dropdown{ display:block; }
    .nav--icon{ position:relative; padding-left:28px; }
    .nav--icon:before{ content:''; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:6px; background:#d1a8f9; }
    /* Mobile collapse */
    .hs-collapse{ display:none }
    .hs-collapse.open{ display:block }
    .roll-mask{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
    @keyframes rolling { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
    @keyframes lgRolling { from{ transform: translateX(0) } to{ transform: translateX(-25%) } }
    .animate-[rolling_20s_linear_infinite]{ animation: rolling 20s linear infinite; }
    .animate-[lgRolling_20s_linear_infinite]{ animation: lgRolling 20s linear infinite; }








.industry_carousal{
background-color: #d7d7d740;
}

  .carousel{max-width:1200px;margin:0 auto;padding:68px 20px 90px;position:relative;
  }
  .viewport{position:relative;overflow:hidden;border-radius:26px;}
  .track{display:flex;will-change:transform;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .slide{
    min-width:100%;
    display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;
    padding:70px clamp(20px,5vw,60px);
    background: linear-gradient(88deg, #ffffffa6, #00000000);
    /* background: radial-gradient(600px 380px at 75% 20%, #efe8ff 0, transparent 70%), linear-gradient(180deg,#fff 0,#f8f6ff 100%); */
  }

  /* Left content */
  .copy h3{margin:0 0 12px;font-weight:800;line-height:1.1;font-size:clamp(26px,3.6vw,40px)}
  .copy p{margin:0 0 24px;color:var(--muted);max-width:56ch;line-height:1.65}
  /* .cta{display:flex;gap:12px;flex-wrap:wrap} */
  .btn{font-weight:700;border:none;border-radius:12px;padding:12px 20px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
  .btn-primary{color:#fff;background:linear-gradient(135deg,var(--pp),var(--pp2),var(--pp3));box-shadow:0 14px 30px rgba(110,77,195,.25)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(110,77,195,.3)}
  /* .btn-ghost{background:#fff;color:var(--pp);border:2px solid var(--pp2)} */
  /* .btn-ghost:hover{background:#f5f0ff} */

  /* Right image panel */
  .art{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
  .blob{position:absolute;inset:-10%;z-index:0;filter:saturate(120%);
  }
  .image-wrap{
    position:relative; z-index:1; width:min(520px,100%);
    border-radius:20px; overflow:hidden; 
    /* background:#fff; */
    /* box-shadow:0 30px 80px rgba(28,18,75,.18), inset 0 0 0 1px rgba(110,77,195,.12); */
  }
  .image-wrap img{
    width:100%; height:100%; display:block;
    object-fit:contain; /* keeps your full image visible */
    background:transparent;   /* white canvas behind PNGs */
    aspect-ratio: 4/3; /* feel free to change/remove */
  }

  /* Controls */
  .controls{display:flex;gap:10px;position:absolute;right:26px;bottom:24px;z-index:5}
  .arrow{
    width:44px;height:44px;border-radius:10px;border:0;cursor:pointer;
    color:#fff;background:linear-gradient(135deg,var(--pp),var(--pp2));box-shadow:0 10px 24px rgba(110,77,195,.25);
    display:grid;place-items:center;font-size:18px;transition:transform .15s
  }
  .arrow:hover{transform:translateY(-2px)}

  /* Progress rail */
  .progress{position:absolute;left:26px;bottom:84px;display:flex;align-items:center;gap:12px;color:#a0a0b6;font-weight:600}
  .rail{width:160px;height:3px;background:#ece8f6;border-radius:10px;position:relative}
  .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--pp),var(--pp3));border-radius:10px}
  .index{letter-spacing:.08em}
  .total{opacity:.6}


  /* Responsive */
  @media (max-width: 980px){
    .slide{grid-template-columns:1fr;gap:18px;padding:54px 22px 110px}
    .art{order:2}
    .controls{right:20px;bottom:20px}
    /* .dots{right:20px;bottom:20px} */
    .progress{left:20px;bottom:78px}
  }







    .global-hero{
    position:relative; color:#fff;
    padding: clamp(56px,7vw,96px) 24px;
    /* World map PNG (public) */
    background:
linear-gradient(180deg, #a06bec, rgb(80 50 203 / 85%)), url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1600px-World_map_-_low_resolution.svg.webp) center / cover no-repeat;
 overflow:hidden;
  }
  .wrap{max-width:1200px;margin:0 auto}

  .headline{
      margin: 0 auto 28px;
    max-width: 38ch;
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: .2px;
  }

  /* Stat row aligned to the right on desktop */
  .stats-row{
    display:flex; gap:14px; flex-wrap:wrap;
    justify-content:center; align-items:stretch;
  }
  .stat{
    min-width: 210px;
    padding:14px 16px;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff22,#ffffff12);
    border:1px solid #cdbdff44;
    backdrop-filter: blur(6px);
    box-shadow:0 10px 28px rgba(0,0,0,.24);
    text-align:center;
  }
  .stat strong{
    display:block; line-height:1; font-weight:800;
    font-size: clamp(22px,2.8vw,34px);
    background:linear-gradient(90deg,#fff,#ffe6ff);
    -webkit-background-clip:text; color:transparent;
  }
  .stat small{display:block; margin-top:6px; opacity:.9;color: white; font-size: 13px;}

  /* Responsive: center the row on small screens */
  @media (max-width: 860px){
    .stats-row{justify-content:center}
    .stat{min-width: 46%}
  }
  @media (max-width: 520px){
    .stat{min-width: 100%}
  }


















  .contact-wrap{
    position:relative; overflow:hidden; padding:96px 24px;
    color:#1a1135; background:
      linear-gradient(180deg,#ffffff 0%, #f7f3ff 60%, #ffffff 100%);
  }
  .contact-wrap::before{
    /* subtle world map background */
    content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
    background: #b182f340;
  }
  .contact-inner{
    position:relative; z-index:1;
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:start;
  }

  /* left */
  .badge{
    display:inline-block; font-weight:700; font-size:13px;
    padding:8px 12px; border-radius:999px; color:#c1366a;
    background:#ffe2ea; box-shadow:0 8px 20px rgba(255,110,160,.18);
  }
  .title{margin:12px 0 8px; font-weight:800; line-height:1.1; font-size:clamp(28px,3.8vw,40px)}
  .subtitle{color:var(--muted); max-width:50ch; line-height:1.7; margin-bottom:22px}

  .cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px}
  .card{
    display:flex; gap:10px; align-items:center; padding:14px 16px; border-radius:14px;
    background:rgba(255,255,255,.75); border:1px solid #e8defe;
    box-shadow:0 10px 24px rgba(110,77,195,.08); color:#2f1c63; text-decoration:none;
  }
  .card:hover{background:#fff}
  .ico{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;
       background:linear-gradient(135deg,var(--pp),var(--pp2)); color:#fff}
  .ico svg{width:22px;height:22px}

  /* right form */
  .contact-form{
    background:rgba(255,255,255,.82);
    border:1px solid #e7dcff; border-radius:20px; padding:26px;
    box-shadow:0 18px 50px rgba(110,77,195,.12); backdrop-filter: blur(6px);
  }
  .contact-form h3{margin:0 0 14px; font-size:22px; font-weight:800; color:#2b1b64}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .field{position:relative; display:block}
  .field input,.field textarea,.field select{
    width:100%; border:1.5px solid #e6defc; background:#fff; color:#1a1135;
    padding:14px 12px; border-radius:12px; outline:none; font: 500 15px/1.4 "Poppins",sans-serif;
    transition:border-color .2s, box-shadow .2s;
  }
  .field textarea{resize:vertical}
  .field input:focus,.field textarea:focus,.field select:focus{
    border-color:#b39bff; box-shadow:0 0 0 4px #eae2ff;
  }
  /* floating label */
  /* .field span{
    position:absolute; left:12px; top:12px; padding:0 6px; pointer-events:none;
    background:#fff; color:#6b6b87; transform-origin:left top; transition:all .18s ease;
  } */
  .field input:not(:placeholder-shown)+span,
  .field textarea:not(:placeholder-shown)+span,
  .field select:valid+span,
  .field input:focus+span,.field textarea:focus+span,.field select:focus+span{
    transform:translateY(-14px) scale(.85); color:#7050e0;
  }
  .hp{position:absolute; left:-9999px; opacity:0}

  .actions{margin-top:12px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
  .chk{display:flex; align-items:center; gap:8px; color:#574586; font-size:14px}
  .chk a{color:#6e4dc3}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 18px; border-radius:12px; border:0; cursor:not-allowed;
    background:linear-gradient(135deg,var(--pp),var(--pp2),var(--pp3)); color:#fff; font-weight:700;
    box-shadow:0 12px 26px rgba(110,77,195,.25); transition:transform .15s, filter .15s;
  }
  .btn.enabled{cursor:pointer}
  .btn.enabled:hover{transform:translateY(-2px)}
  .note{margin:10px 0 0; color:#6b6b87; font-size:13px}

  /* toast */
  .toast{
    position:fixed; right:20px; bottom:20px; z-index:50; padding:14px 16px;
    border-radius:12px; color:#0f1223; background:#eafff1; border:1px solid #8cf0b8;
    box-shadow:0 10px 30px rgba(0,0,0,.12); display:none;
  }

  /* responsive */
  @media (max-width: 980px){
    .contact-inner{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
  }
  @media (max-width: 540px){
    .grid{grid-template-columns:1fr}
    .actions{flex-direction:column; align-items:stretch}
    .btn{justify-content:center}
  }





  


.clients-section {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  overflow: hidden;
}

.clients-title {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  color: #0f1223;
  line-height: 1.2;
  margin-bottom: 40px;
}

.logo-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: scroll-left 40s linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-track img {
  height: 60px;
  width: auto;
  margin: 0 40px;
  opacity: 0.85;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-track img:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* smooth infinite loop */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* duplicates make loop seamless */
}

/* fade edges */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.logo-slider::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.logo-slider::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* responsive tweaks */
@media (max-width: 768px) {
  .logo-track img {
    height: 45px;
    margin: 0 25px;
  }
}
@media (max-width: 480px) {
  .logo-track img {
    height: 40px;
    margin: 0 18px;
  }
}
/* ===== Premium Enhancements ===== */
:root{ --ring: rgba(79,70,229,.35); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:5px; font-weight:600; transition:all .2s ease; }
.btn.primary{ background:linear-gradient(135deg,#4f46e5,#a855f7); color:#fff; box-shadow:0 8px 24px rgba(79,70,229,.25); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(79,70,229,.35); }
.btn.ghost{ border:1px solid #e5e7eb; }
.btn.ghost:hover{ background:#f9fafb; color:#111827;  }
.btn.white{ background:#fff; color:#111827; }
.btn.outline{ border:1px solid rgba(255,255,255,.6); color:#fff; }
.input{ width:100%; padding:.75rem 1rem; border-radius:1rem; border:1px solid #e5e7eb; background:rgba(255,255,255,.8); outline:none; }
.input:focus{ box-shadow:0 0 0 3px var(--ring); border-color:#6366f1; }

/* Header */
.nav-link{ padding:.5rem .75rem; border-radius:.75rem; transition:color .2s ease, background .2s ease; }
.nav-link:hover{ color:#4f46e5; background:#f8fafc; }
.nav-group{ position:relative; }
.nav-trigger{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .75rem; border-radius:.75rem; transition:all .2s; }
.nav-trigger:hover{ background:#f8fafc; color:#4f46e5; }
.mega{ position:absolute; left:0; top:calc(100% + .5rem); width:min(720px,90vw); background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 20px 60px rgba(0,0,0,.12); border-radius:1rem; padding:1rem; visibility:hidden; opacity:0; transform:translateY(8px); transition:all .2s ease; }
.nav-group:hover .mega, .nav-group:focus-within .mega{ visibility:visible; opacity:1; transform:none; }
.mega-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.mega-item{ display:flex; gap:.75rem; padding:.5rem; border-radius:.75rem; transition:all .2s; }
/* .mega-item:hover{ background:#f8fafc; transform:translateY(-2px); } */
.mega-item img{ margin-top: 10px; width:35px; height:35px; object-fit:cover; border-radius:.5rem; }
.mega-item h4{ font-weight:600; }
.mega-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1rem; padding:.5rem; }
.mega-cols a{
  padding: 10px;
  font-weight: bold;
  border-radius:.5rem; 
  color:  #9263e3 !important;
}
.mega-cols a:hover, .mega-item:hover{
 background:linear-gradient(135deg, #eef2ff, #faf5ff); transform:translateY(-2px);
}
.mega-spotlight{ display:flex; gap:1rem; align-items:center; background:linear-gradient(135deg, #eef2ff, #faf5ff); padding:1rem; border-radius:.75rem; }
.mega-spotlight img{ padding: 10px; width:140px; height:88px; object-fit:cover; border-radius:.5rem; }

/* Hero */
.hero{ position:relative;overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height: 100%; object-fit:cover; transform:scale(1.05); filter:contrast(1.05) saturate(1.1); }
.hero-overlay{ position:absolute; inset:0; 
  /* background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); */

}
.hero-inner{ position:relative; z-index:1; height:100%; display:grid; place-items:center; text-align:center; color:#fff; padding:0 1rem; }
.hero-title{ font-size:clamp(2rem,3.5vw,3rem); font-weight:800; letter-spacing:-.01em; animation:fadeUp .6s ease both .05s; }
.hero-sub{ max-width:780px; opacity:.95; margin-top:.5rem; animation:fadeUp .6s ease both .15s; }

/* Cards & sections */
.card{ padding:1.25rem; border:1px solid #e5e7eb; border-radius:1rem; background:white; transition:transform .25s, box-shadow .25s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.08); }
.sec-title{ font-weight:800; font-size:1.5rem; text-align:center; }
.cta{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem; border-radius:1.25rem; color:#fff; background:linear-gradient(135deg,#4f46e5,#a855f7); }
.cta h2{ font-size:1.5rem; font-weight:800; }
.glass{ backdrop-filter: blur(8px); background:rgba(255,255,255,.65); border:1px solid rgba(99,102,241,.2); border-radius:1.25rem; padding:1rem; }

/* Logos */
.logo-row{ display:grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:1.25rem; align-items:center; }
.logo-row img{ filter: grayscale(1); opacity:.8; height:36px; width:auto; justify-self:center; }
.logo-row img:hover{ filter:none; opacity:1; }

/* FAQ */
.faq{ padding:1rem 1rem; border:1px solid #e5e7eb; border-radius:1rem; background:white; }
.faq[open]{ box-shadow:0 12px 32px rgba(0,0,0,.06); }

/* Loader */
.loader-dot{ width:14px; height:14px; border-radius:50%; background:#4f46e5; animation: pulse 1s infinite; box-shadow: 18px 0 0 #a855f7, -18px 0 0 #22c55e; }
@keyframes pulse{ 0%,100%{ transform:scale(.8); } 50%{ transform: scale(1.2); } }

/* Page transitions & reveal */

.reveal{ opacity:0; transform:translateY(10px); transition:all .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Footer */
.foot-head{ font-weight:700; margin-bottom:.5rem; }
.foot-list li a{ color:#d1d5db; display:block; padding:.25rem 0; }
.foot-list li a:hover{ color:white; }

/* Animations */
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* === Reveal animations === */




/* Apply reveals to children in main on load without touching HTML */
main > section, main .card, main .cta, main .t-card { will-change: transform, opacity; }


/* Safety: if JS fails, keep content visible */
@supports not (animation-name: fadeUp) {
  .reveal-left, .reveal-right, 
}

/* === Safer reveal: only hide items that JS marks as .will-reveal === */
.will-reveal{ opacity:0; transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s cubic-bezier(.2,.6,.2,1); }
.will-reveal.from-left{ transform:translateX(-24px); }
.will-reveal.from-right{ transform:translateX(24px); }
.will-reveal.reveal-in{ opacity:1; transform:none; }

/* === Mobile Nav Forced Visibility (independent) === */
.mobile-nav{ display:none; border-top:1px solid rgba(0,0,0,.08); background:#fff; }
.mobile-nav[data-open="true"]{ display:block; }
.mobile-nav__inner{ padding:12px 16px; display:grid; gap:8px; }
.mobile-nav a{ padding:6px 0; display:block; }
@media (min-width: 1024px){
  .mobile-nav{ display:none !important; }
}

.mobileclass{
    background-color: #6e4dc3 !important;
    color: white !important;
    border-radius: 0px 0px 80px 0px;
}   



/* === KPI Responsive Font Sizes === */

/* Optional: tighter padding on smaller devices */
@media (max-width: 768px) {
.count-adv {
  font-size: 20px !important;
}

.text-base {
  font-size: 12px !important;
  line-height: normal !important;
  margin-top: 10px !important;

}
.cta{
  display: block !important;
}
.cta div{
  margin-top: 20px;
}
/* 

.cta-group {
  display: block !important;
} */

/* .hidewhenmobile{
  display: none !important;
} */

.grid-tiles {
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;
}

.csswhenmobile{
  background: linear-gradient(135deg, #6e4dc3 0%, #9263e3 60%, #b182f3 120%) !important;
    color: #fff !important;
    font-weight: 600!important;
    letter-spacing: .2px!important;
    font-size: 16px!important;
    border: none!important;
    border-radius: 10px!important;
    padding: 14px 28px!important;
    display: inline-flex!important;
    align-items: center!important;
    gap: 10px!important;
    box-shadow: 0 10px 24px rgba(61,33,150,0.25)!important;
    cursor: pointer!important;
    transition: all 0.2s ease!important;
}
}





  /* (Keep your existing hero CSS above) */

  .feature-highlight{
    position: relative;
    margin-top: clamp(32px, 6vw, 64px);
    padding: clamp(32px, 5vw, 64px) clamp(16px, 6vw, 80px);
    background: linear-gradient(135deg, rgba(110,77,195,.08), rgba(177,130,243,.08)),
                rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    overflow: hidden;
    isolation: isolate;
  }

  .feature-highlight::before{
    content:"";
    position:absolute;
    inset: -2px;
    z-index:0;
    transition: opacity .6s ease;
  }
  .feature-highlight:hover::before{ opacity:.65; }

  .feature-highlight .inner{
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
  }

  .feature-highlight h2{
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, #6e4dc3, #9263e3 60%, #b182f3 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 20px;
  }

  
  .feature-highlight .cta{
    margin-top: 28px;
  }

  @media (max-width: 640px){
    .feature-highlight{
      border-radius: 0;
      margin-left: calc(50% - 50vw);
      width: 100vw;
      padding: 48px 20px;
    }
  }




  .why-mobiize {
    position: relative;
    /* background: linear-gradient(180deg, rgba(246,243,255,0.7) 0%, #ffffff 100%); */
    padding: 90px 24px 60px;
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
  }

  .why-mobiize__title {
    text-align: center;
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.2;
    background: linear-gradient(135deg, #6e4dc3, #9263e3 55%, #b182f3 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 16px;
  }

  .why-mobiize__subtitle {
    text-align: center;
    color: #5b6074;
    font-size: clamp(15px, 1.4vw, 18px);
    max-width: 800px;
    margin: 0 auto 48px;
  }

  .why-mobiize__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }

  .why-mobiize__card {
    position: relative;
    background: linear-gradient(135deg, rgba(110,77,195,.06), rgba(177,130,243,.06)),
                rgba(255,255,255,.78);
    border: 1px solid rgba(146,99,227,.18);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    padding: clamp(20px, 2.5vw, 28px);
    box-shadow: 0 14px 36px rgba(61,33,150,.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .why-mobiize__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(61,33,150,.15);
  }

  .why-mobiize__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .why-mobiize__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: linear-gradient(135deg, #6e4dc3, #9263e3 60%, #b182f3);
    color: #fff;
    box-shadow: 0 6px 16px rgba(61,33,150,.24);
  }

  .why-mobiize__heading {
    font-weight: 700;
    font-size: 18px;
    color: #1a1d2b;
  }

  .why-mobiize__text {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3a3f56;
  }

  .why-mobiize__badge {
    margin-top: 14px;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #6e4dc3;
    background: rgba(110,77,195,0.08);
    border: 1px solid rgba(146,99,227,0.25);
    border-radius: 999px;
    padding: 6px 14px;
    transition: all .2s ease;
  }

  .why-mobiize__card:hover .why-mobiize__badge {
    background: linear-gradient(135deg, #6e4dc3, #9263e3 55%, #b182f3);
    color: #fff;
    border-color: transparent;
  }

  /* ----- FIX: make container responsive ----- */
.why-mobiize{
  width: 100%;          /* was 1200px */
  max-width: 1200px;    /* keep the cap for desktop */
  box-sizing: border-box;
}

/* ----- FIX: make cards fit smaller screens ----- */
.why-mobiize__grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* was 350px */
}

/* ----- Mobile tweaks ----- */
@media (max-width: 768px){
  .why-mobiize{
    padding: 64px 16px 48px; /* tighter padding on phones */
  }
  .why-mobiize__grid{
    grid-template-columns: 1fr;   /* single column on small screens */
    gap: 16px;
  }
  .why-mobiize__icon{
    width: 40px; height: 40px;    /* slightly smaller icon */
    font-size: 18px;
  }
  .why-mobiize__heading{ font-size: 17px; }
  .why-mobiize__text{ font-size: 15px; line-height: 1.65; }

  .checkheader{
    box-shadow: none !important;
  }


}





.dblock{
  display: block !important;
}












    .blog-article{padding:3rem 1rem}
    .blog-article .wrap{max-width:50rem;margin:0 auto}
    .blog-article .crumbs{font-size:.9rem;color:#64748b;margin-bottom:1rem}
    .blog-article h1{font-size:2rem;line-height:1.2;margin:.25rem 0 .75rem}
    .blog-article .meta{color:#64748b;font-size:.9rem;margin-bottom:1.5rem}
    .blog-article h2{font-size:1.375rem;margin:2rem 0 .5rem}
    .blog-article h3{font-size:1.1rem;margin:1.25rem 0 .35rem}
    .blog-article p{color:#334155;line-height:1.75}
    .blog-article ul{margin:.5rem 0 1rem 1.25rem}
    .blog-article .toc{background:#f8fafc;border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;margin:1.25rem 0}
    .blog-article .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
    .blog-article .nav{display:flex;justify-content:space-between;margin-top:2.5rem;border-top:1px solid #e5e7eb;padding-top:1rem}
    .blog-article a.anchor{color:#6e4dc3;text-decoration:none}