:root{
      --bg:#f6f9ff;
      --white:#ffffff;
      --blue:#1d4ed8;
      --blue2:#2563eb;
      --sky:#38bdf8;
      --text:#0b1220;
      --muted:#516075;
      --stroke: rgba(15, 23, 42, .10);
      --shadow: 0 18px 45px rgba(2, 8, 23, .12);
      --shadow2: 0 28px 70px rgba(2, 8, 23, .16);
      --gold:#d6b35a;
    }

    *{font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
    html{scroll-behavior:smooth;}
    body{
      background:
        radial-gradient(1100px 600px at 15% 10%, rgba(37,99,235,.14), transparent 55%),
        radial-gradient(900px 500px at 85% 15%, rgba(56,189,248,.18), transparent 55%),
        linear-gradient(180deg, #ffffff, var(--bg));
      color: var(--text);
      overflow-x:hidden;
      cursor:none;
    }

    /* Cursor trail canvas + dot */
    #cursorCanvas{
      position:fixed; inset:0;
      z-index:9999;
      pointer-events:none;
    }
    .cursor-dot{
      position:fixed;
      width:10px;height:10px;
      border-radius:50%;
      background: radial-gradient(circle at 30% 30%, #ffffff88, transparent 60%), var(--gold);
      box-shadow: 0 0 18px rgba(214,179,90,.55);
      transform: translate(-50%, -50%);
      z-index:10000;
      pointer-events:none;
      mix-blend-mode: multiply;
    }

    /* Navbar */
    .navbar{
      background: rgba(255,255,255,.84) !important;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      transition: box-shadow .25s ease, background .25s ease;
    }
    .nav-shadow{
      box-shadow: 0 14px 40px rgba(2,8,23,.10);
      background: rgba(255,255,255,.92) !important;
    }
    .brand-badge{
      width:42px;height:42px;border-radius:14px;
      background: linear-gradient(135deg, var(--blue), var(--sky));
      color:#fff;
      display:grid;place-items:center;
      font-weight:800;
      box-shadow: 0 12px 30px rgba(29,78,216,.25);
    }
    .nav-link{ color: rgba(11,18,32,.78) !important; font-weight:600; }
    .nav-link:hover{ color: var(--blue) !important; }

    .btn-primaryx{
      background: linear-gradient(135deg, var(--blue), var(--sky));
      border:0;
      color:#fff;
      box-shadow: 0 18px 40px rgba(29,78,216,.25);
    }
    .btn-soft{
      border: 1px solid rgba(29,78,216,.22);
      background: rgba(29,78,216,.05);
      color: var(--blue);
      font-weight:700;
    }


    .card3d{
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(15, 23, 42, .10);
      border-radius: 22px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      transform-style: preserve-3d;
      will-change: transform;
  
    } 
    .icon-pill{
      width:52px;height:52px;border-radius:18px;
      background: linear-gradient(135deg, rgba(29,78,216,.12), rgba(56,189,248,.14));
      border: 1px solid rgba(29,78,216,.18);
      display:grid;place-items:center;
      font-size:22px;
      flex:0 0 auto;
    }

    /* Sections */
    .hero{ padding: 120px 0 70px; }
    .hero h1{
      font-size: clamp(2rem, 3.6vw, 3.6rem);
      line-height:1.08;
      letter-spacing:-.4px;
    }
    .muted{ color: var(--muted); }
    .chip{
      display:inline-block;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(29,78,216,.08);
      border: 1px solid rgba(29,78,216,.14);
      color: var(--blue);
      font-weight:700;
      font-size:.9rem;
    }

    section{ padding: 80px 0; }
    .section-title{ font-weight:800; letter-spacing:-.3px; }

    /* Form */
    .form-control, .form-select{
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, .12);
      padding: 14px 14px;
    }
    .form-control:focus, .form-select:focus{
      border-color: rgba(29,78,216,.45);
      box-shadow: 0 0 0 .2rem rgba(29,78,216,.12);
    }

    footer{
      background:#fff;
      border-top: 1px solid rgba(15,23,42,.08);
      padding: 40px 0;
    }

    /* Small helper */
    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
      margin: 18px 0;
    }

    /* Normal cursor on touch devices */
    input, textarea, select, button, a { cursor:none; }
    @media (hover:none){
      body{ cursor:auto; }
      #cursorCanvas, .cursor-dot{ display:none; }
      input, textarea, select, button, a { cursor:auto; }
    }





    .seopages a{
      text-decoration: none;
      color: black;
    }


       .smopages a{
      text-decoration: none;
      color: black;
    }


       .sempages a{
      text-decoration: none;
      color: black;
    }


       .smmpages a{
      text-decoration: none;
      color: black;
    }


       .emailpages a{
      text-decoration: none;
      color: black;
    }



       .affpages a{
      text-decoration: none;
      color: black;
    }


       .webpages a{
      text-decoration: none;
      color: black;
    }


       .apppages a{
      text-decoration: none;
      color: black;
    }


       .graphpages a{
      text-decoration: none;
      color: black;
    }



    /* ===== Shutter Loader (no HTML change) ===== */
.shutter-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.shutter-panel{
  background: #0b1220; /* match your dark bg vibe */
  transform: translateX(0);
  will-change: transform;
}

/* left & right panel */
.shutter-panel.left{
  border-right: 1px solid rgba(255,255,255,.08);
}
.shutter-panel.right{
  border-left: 1px solid rgba(255,255,255,.08);
}

/* optional center glow line */
.shutter-glow{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100vh;
  z-index: 100000;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.35), transparent);
  opacity: .7;
  pointer-events: none;
}

/* Stop scroll during intro */
body.is-intro{
  overflow: hidden;
}





:root{
  --blue:#1f6bff;
  --blue2:#0b3dff;
  --gold:#d8b15a;
  --ink:#0b1220;
  --muted:#5b6475;
  --bg:#f7f9ff;
  --card:#ffffff;
  --stroke: rgba(11,18,32,.10);
}

*{font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;}
body{background:var(--bg); color:var(--ink); padding-top:72px;}

.nav-link{color:rgba(11,18,32,.75);}
.nav-link.active{color:var(--blue);}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2)); border:0;}
.btn-primary:hover{filter:brightness(.95);}

.hero{
  position:relative;
  overflow:hidden;
  padding-bottom:40px;
}
.hero-glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 30%, rgba(31,107,255,.18), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(11,61,255,.12), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(216,177,90,.12), transparent 50%);
  pointer-events:none;
  filter: blur(10px);
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--stroke);
  backdrop-filter: blur(10px);
  font-weight:600;
}
.badge-pill .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(216,177,90,.15);
}

.grad{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mini-trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mini-item{
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:#fff;
  font-weight:600;
  color:rgba(11,18,32,.75);
}
.mini-item span{margin-right:6px;}

.hero-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 40px rgba(11,18,32,.08);
}
.hc-top{display:flex; gap:12px; align-items:center;}
.hc-icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(31,107,255,.14), rgba(11,61,255,.10));
  border:1px solid var(--stroke);
  font-size:22px;
}
.hc-title{font-weight:800;}
.hc-sub{color:var(--muted); font-size:13px;}
.hc-grid{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:14px;
}
.hc-chip{
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--stroke);
  font-weight:600;
  font-size:13px;
}
.hc-bar{
  height:10px; border-radius:999px;
  background:rgba(11,18,32,.07);
  overflow:hidden;
}
.hc-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
}

.industry-card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  height:100%;
  box-shadow:0 16px 36px rgba(11,18,32,.06);
  transform-style:preserve-3d;
}
.industry-card:hover{
  border-color: rgba(31,107,255,.25);
  box-shadow:0 18px 48px rgba(11,18,32,.10);
}
.ic-head{display:flex; gap:12px; align-items:center;}
.ic-icon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(216,177,90,.16), rgba(31,107,255,.12));
  font-size:22px;
}
.ic-list{
  margin:0;
  padding-left:18px;
  color:rgba(11,18,32,.78);
}
.ic-list li{margin-bottom:10px; line-height:1.4;}
.ic-footer{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#fff;
  font-weight:700;
  color:rgba(11,18,32,.72);
}

.stats-strip{
  background:linear-gradient(180deg,#ffffff, rgba(255,255,255,.6));
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.stat-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px 12px;
}
.stat-num{
  font-size:34px;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat-label{color:var(--muted); font-weight:600;}

.cta-box{
  background:linear-gradient(135deg, rgba(31,107,255,.10), rgba(216,177,90,.10));
  border:1px solid var(--stroke);
  border-radius:24px;
  padding:22px;
  box-shadow:0 20px 60px rgba(11,18,32,.08);
}

/* Reveal defaults (GSAP will animate from these vibes) */
.reveal-up, .reveal-card, .reveal-scale{
  opacity:0;
  transform: translateY(18px);
}
.reveal-scale{
  transform: scale(.96);
}

/* Mobile tweaks */
@media (max-width: 576px){
  .display-5{font-size:2rem;}
}




/* OUR CLIENTS */
.clients-wrap{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border-top: 1px solid rgba(11,18,32,.08);
  border-bottom: 1px solid rgba(11,18,32,.08);
  overflow:hidden;
}

.clients-kicker{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,18,32,.10);
  backdrop-filter: blur(10px);
}

.clients-title{
  letter-spacing:-.02em;
}

/* Marquee */
.clients-marquee{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}

.clients-track{
  display:flex;
  gap:14px;
  padding:16px;
  width:max-content;
  align-items:center;
  will-change: transform;
}

.client-pill{
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:#fff;
  font-weight:800;
  font-size:14px;
  color: rgba(11,18,32,.82);
  white-space:nowrap;
  transform-style:preserve-3d;
}

.client-pill::before{
  content:"";
  display:inline-block;
  width:10px;height:10px;
  margin-right:10px;
  border-radius:50%;
  background: linear-gradient(135deg, #1f6bff, #0b3dff);
  box-shadow: 0 0 0 6px rgba(31,107,255,.12);
  vertical-align:middle;
}

/* Grid cards */
.clients-grid .client-card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(11,18,32,.10);
  border-radius:18px;
  padding:14px 14px;
  font-weight:800;
  color: rgba(11,18,32,.82);
  box-shadow: 0 14px 34px rgba(11,18,32,.06);
  height:100%;
  transform-style: preserve-3d;
}
.clients-grid .client-card:hover{
  border-color: rgba(31,107,255,.24);
  box-shadow: 0 18px 48px rgba(11,18,32,.10);
}

/* reveal default (GSAP animates it) */
.clients-wrap .reveal-client{
  opacity:0;
  transform: translateY(18px);
}






.hero-image-wrapper {
  width: 100%;
  max-width: 420px;        /* portrait width */
  aspect-ratio: 3 / 4;    /* portrait ratio */
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* image crop hoke portrait feel degi */
}