@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    font-family: "Google Sans", sans-serif !important;
}
:root{
      --bg:#f8f7f3;
      --ink:#121212;
      --muted:#6c6c68;
      --card:#ffffff;
      --yellow: #0f48e3;
      --lime: #0f48e3;
      --border:#dfddd6;
      --dark:#151515;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family: "Google Sans", sans-serif;
      background:var(--bg);
      color:var(--ink);
      line-height:1.5;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container{width:min(1180px,calc(100% - 40px));margin:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    }
    .eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
    h1,h2,h3{line-height:1.05}
    h1{font-size:clamp(48px,7vw,88px);letter-spacing:-.055em}
    h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.045em}
    h3{font-size:25px;letter-spacing:-.025em}
    p{color:var(--muted)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:12px;
      border-radius:999px;padding:15px 24px;font-weight:800;
      border:1px solid var(--dark);transition:.25s ease;
    }
    .btn-dark{background:var(--dark);color:white}
    .btn-dark:hover{transform:translateY(-2px);background:#2a2a2a}
    .btn-light{background:white}
    .btn-light:hover{transform:translateY(-2px)}
    .arrow{font-size:20px}


    /* 3D HERO ANIMATION */
    .hero-visual{perspective:1200px;transform-style:preserve-3d}
    .sphere{
      transform-style:preserve-3d;
      animation:floatSphere 7s ease-in-out infinite, spinSphere 18s linear infinite;
    }
    .sphere::before,
    .sphere::after{
      content:"";
      position:absolute;
      inset:8%;
      border:1px solid rgba(255,255,255,.35);
      border-radius:50%;
      transform:rotateX(72deg);
    }
    .sphere::after{
      inset:14%;
      transform:rotateY(72deg);
      border-color:rgba(20,20,20,.16);
    }
    .float-card{
      transform-style:preserve-3d;
      will-change:transform;
    }
    .fc-1{animation:cardFloat1 5s ease-in-out infinite}
    .fc-2{animation:cardFloat2 6s ease-in-out infinite}
    .hero-3d-ring{
      position:absolute;
      width:390px;height:390px;
      right:25px;top:55px;
      border:1px solid rgba(20,20,20,.18);
      border-radius:50%;
      transform-style:preserve-3d;
      animation:ringRotate 12s linear infinite;
      pointer-events:none;
    }
    .hero-3d-ring::before,
    .hero-3d-ring::after{
      content:"";
      position:absolute;
      inset:25px;
      border:1px dashed rgba(20,20,20,.14);
      border-radius:50%;
    }
    .hero-3d-ring::after{
      inset:-15px;
      transform:rotateX(72deg);
    }
    .orb-3d{
      position:absolute;
      width:22px;height:22px;
      border-radius:50%;
      background:#171717;
      box-shadow:0 0 0 7px rgba(223,255,0,.38),0 8px 25px rgba(0,0,0,.2);
      top:18px;left:50%;
      transform:translateX(-50%);
    }
    .hero-depth{
      position:absolute;
      width:120px;height:120px;
      border-radius:30px;
      background:linear-gradient(145deg,#ffffff,#d9d9d0);
      right:30px;top:10px;
      transform:translateZ(80px) rotateX(55deg) rotateZ(18deg);
      box-shadow:20px 30px 50px rgba(0,0,0,.12);
      animation:depthFloat 5s ease-in-out infinite;
      opacity:.85;
    }
    @keyframes floatSphere{
      0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}
      50%{transform:translate3d(-12px,-18px,35px) rotateZ(5deg)}
    }
    @keyframes spinSphere{
      0%{filter:hue-rotate(0deg)}
      50%{filter:hue-rotate(12deg)}
      100%{filter:hue-rotate(0deg)}
    }
    @keyframes ringRotate{
      from{transform:rotateX(66deg) rotateZ(0deg)}
      to{transform:rotateX(66deg) rotateZ(360deg)}
    }
    @keyframes cardFloat1{
      0%,100%{transform:translate3d(0,0,55px) rotateX(4deg) rotateY(-7deg) rotateZ(-6deg)}
      50%{transform:translate3d(-10px,-18px,80px) rotateX(-2deg) rotateY(7deg) rotateZ(-3deg)}
    }
    @keyframes cardFloat2{
      0%,100%{transform:translate3d(0,0,35px) rotateX(-3deg) rotateY(7deg) rotateZ(5deg)}
      50%{transform:translate3d(10px,-13px,70px) rotateX(4deg) rotateY(-5deg) rotateZ(8deg)}
    }
    @keyframes depthFloat{
      0%,100%{transform:translate3d(0,0,60px) rotateX(55deg) rotateZ(18deg)}
      50%{transform:translate3d(-20px,-18px,100px) rotateX(48deg) rotateZ(25deg)}
    }
    @media(max-width:900px){
      .hero-3d-ring{width:310px;height:310px;right:0}
      .hero-depth{right:0}
    }
    @media(prefers-reduced-motion:reduce){
      .sphere,.fc-1,.fc-2,.hero-3d-ring,.hero-depth{animation:none}
    }

    /* NAV */
    .nav-wrap{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(248,247,243,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05)}
    nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{font-size:28px;font-weight:800;letter-spacing:-.05em}
    .logo span{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--lime);margin-left:4px}
    .nav-links{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:700}
    .nav-links a:hover{opacity:.6}
    .menu-btn{display:none;background:none;border:0;font-size:28px}

    /* HERO */
    .hero{padding:82px 0 50px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:56px}
    .hero p{font-size:19px;max-width:650px;margin:25px 0 30px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .hero-visual{position:relative;min-height:520px}
    .sphere{
      width:440px;height:440px;border-radius:50%;
      background:
        radial-gradient(circle at 30% 30%,#fbffba 0 8%,transparent 25%),
        radial-gradient(circle at 65% 30%,#0f48e3 0 24%, #0f48e3 50%, #011f72 75%, #051d5d 100%);
      position:absolute;right:0;top:30px;
      box-shadow:inset -35px -30px 70px rgba(0,0,0,.2),0 40px 80px rgba(0,0,0,.08);
    }
    .float-card{
      position:absolute;background:white;border:1px solid var(--border);border-radius:24px;
      box-shadow:0 24px 70px rgba(0,0,0,.12);padding:20px;
    }
    .fc-1{left:0;top:75px;width:210px;transform:rotate(-6deg)}
    .fc-2{right:10px;bottom:40px;width:240px;transform:rotate(5deg)}
    .mini-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#777}
    .big-num{font-size:36px;font-weight:800;letter-spacing:-.04em;margin-top:6px}
    .spark{height:52px;margin-top:12px;border-radius:12px;background:linear-gradient(135deg,#f2f2ed,#efffb1);position:relative;overflow:hidden}
    .spark::after{content:"";position:absolute;width:130%;height:3px;background:#111;left:-10%;top:50%;transform:rotate(-8deg)}
    .trusted{padding:25px 0 70px}
    .trusted-label{text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;color:#7d7d79}
    .logos{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:30px}
    .brand-chip{height:78px;background:white;border:1px solid var(--border);border-radius:18px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#454545}

    /* PRODUCT GRID */
    section{padding:100px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}
    .section-head p{max-width:520px;font-size:17px}
    .products{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .product-card{border-radius:28px;padding:30px;min-height:310px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
    .product-card h3{margin:14px 0 12px}
    .product-card p{max-width:310px}
    .product-card .link{position:absolute;left:30px;bottom:28px;font-weight:800}
    .product-card:nth-child(1){grid-column:span 7;background: #0f48e3;color:white}
    .product-card:nth-child(1) p{color:#b9b9b9}
    .product-card:nth-child(2){grid-column:span 5;background:#e9ff77}
    .product-card:nth-child(3){grid-column:span 4;background:#fff}
    .product-card:nth-child(4){grid-column:span 4;background:#e7e3ff}
    .product-card:nth-child(5){grid-column:span 4;background:#dff3ff}
    .orb{position:absolute;width:170px;height:170px;border-radius:50%;right:-30px;top:55px;background:radial-gradient(circle at 35% 30%,#fff 0 5%,#deff00 35%,#556500 100%);opacity:.9}
    .shape{position:absolute;right:20px;bottom:15px;width:120px;height:120px;border:18px solid rgba(0,0,0,.12);border-radius:28px;transform:rotate(18deg)}

    /* METRICS */
    .metrics{background:var(--dark);color:white}
    .metrics .section-head p{color:#aaa}
    .metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .metric{padding:38px 30px;border-radius:28px;background:#212121;border:1px solid #303030}
    .metric strong{display:block;font-size:58px;letter-spacing:-.055em;color:var(--yellow)}
    .metric span{color:#bdbdbd}

    /* WHO */
    .who-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .who-card{background:white;border:1px solid var(--border);border-radius:28px;padding:30px;min-height:230px}
    .iconbox{width:54px;height:54px;border-radius:16px;background:#f0f0ea;display:grid;place-items:center;font-size:24px;margin-bottom:34px}
    .who-card p{margin-top:12px;max-width:430px}

    /* FEATURE */
    .feature{background: #0f48e3}
    .feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
    .feature-panel{background:#fff ;border-radius:34px;padding:28px;color:white;min-height:480px;position:relative;overflow:hidden}
    .dash-card{position:absolute;background:#f8f8f8;color:#111;border-radius:18px;padding:18px;border:1px solid #ffffff}
    .dash-a{left:36px;top:45px;width:64%}
    .dash-b{right:-20px;bottom:40px;width:58%;transform:rotate(-4deg)}
    .bars{display:flex;align-items:end;height:120px;gap:8px;margin-top:18px}
    .bars i{display:block;flex:1;background:#cfe800;border-radius:8px 8px 0 0}
    .feature-list{display:grid;gap:16px;margin-top:30px}
    .feature-item{display:flex;gap:14px;align-items:flex-start}
    .check{width:25px;height:25px;border-radius:50%;background:#ffffff;color:rgb(0, 0, 0);display:grid;place-items:center;font-size:12px;flex:0 0 auto}

    /* TESTIMONIAL */
    .quote{background:white;border:1px solid var(--border);border-radius:36px;padding:55px;display:grid;grid-template-columns:160px 1fr;gap:40px;align-items:center}
    .avatar{width:160px;height:160px;border-radius:50%;background:linear-gradient(145deg,#ddd,#aaa);display:grid;place-items:center;font-size:54px}
    blockquote{font-size:clamp(25px,3vw,42px);font-weight:700;letter-spacing:-.035em}
    .quote small{display:block;margin-top:22px;color:#777;font-weight:700}

    /* CTA */
    .cta-box{background:#171717;color:white;border-radius:38px;padding:70px;position:relative;overflow:hidden}
    .cta-box p{color:#aaa;max-width:560px;font-size:18px;margin:18px 0 28px}
    .cta-orb{position:absolute;width:320px;height:320px;border-radius:50%;right:-80px;top:-60px;background:radial-gradient(circle at 35% 35%,#fbffb4,#dfff00 35%,#6b7b00 100%)}

    footer{padding:60px 0 35px}
    .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:45px}
    footer h4{margin-bottom:14px}
    footer a,footer p{font-size:14px;color:#666;display:block;margin:9px 0}
    .copyright{border-top:1px solid var(--border);margin-top:45px;padding-top:24px;font-size:13px;color:#888}

    /* reveal */
    .reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
    .reveal.show{opacity:1;transform:none}

    @media(max-width:900px){
      .nav-links{display:none;position:absolute;left:20px;right:20px;top:72px;background:white;padding:22px;border-radius:22px;box-shadow:0 20px 40px rgba(0,0,0,.12);flex-direction:column;align-items:flex-start}
      .nav-links.open{display:flex}
      .menu-btn{display:block}
      .hero-grid,.feature-grid,.quote{grid-template-columns:1fr}
      .hero-visual{min-height:430px}
      .sphere{width:350px;height:350px}
      .logos{grid-template-columns:repeat(3,1fr)}
      .product-card{grid-column:span 12!important}
      .metric-grid{grid-template-columns:1fr}
      .who-grid{grid-template-columns:1fr}
      .section-head{align-items:flex-start;flex-direction:column}
      .footer-grid{grid-template-columns:1fr 1fr}
      .quote{padding:34px}
    }
    @media(max-width:560px){
      .container{width:min(100% - 24px,1180px)}
      .hero{padding-top:55px}
      h1{font-size:49px}
      .hero-visual{min-height:365px}
      .sphere{width:280px;height:280px;right:-30px}
      .fc-1{width:180px}
      .fc-2{width:195px}
      .logos{grid-template-columns:repeat(2,1fr)}
      section{padding:72px 0}
      .cta-box{padding:42px 26px}
      .cta-orb{opacity:.35}
      .footer-grid{grid-template-columns:1fr}
      .avatar{width:110px;height:110px}
    }

.btn2{
    background: #dfff00;
    color: #000;
}

.services-hero{padding:88px 0 70px;background:radial-gradient(circle at 80% 15%,rgba(15,72,227,.16),transparent 25%),radial-gradient(circle at 20% 85%,rgba(223,255,0,.16),transparent 25%),var(--bg);overflow:hidden}
.services-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.services-hero h1{max-width:820px}.services-hero p{font-size:19px;max-width:680px;margin:24px 0 30px}.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.hero-pill{padding:9px 14px;border:1px solid var(--border);background:#fff;border-radius:999px;font-size:12px;font-weight:800}
.service-hero-visual{min-height:440px;position:relative;perspective:1100px;transform-style:preserve-3d}.blue-core{width:330px;height:330px;border-radius:50%;position:absolute;right:25px;top:45px;background:radial-gradient(circle at 28% 25%,#8db2ff,#0f48e3 42%,#082d91 100%);box-shadow:inset -28px -28px 60px rgba(0,0,0,.22),0 35px 90px rgba(15,72,227,.25);animation:coreServiceFloat 6s ease-in-out infinite}.blue-core:before,.blue-core:after{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.35);border-radius:50%;transform:rotateX(70deg)}.blue-core:after{inset:8%;transform:rotateY(70deg)}
.service-orbit-ring{position:absolute;right:-5px;top:90px;width:390px;height:190px;border:1px solid rgba(15,72,227,.28);border-radius:50%;transform:rotateX(65deg) rotateZ(-12deg);animation:serviceRing 10s linear infinite}.service-orbit-ring:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#0f48e3;right:25px;top:0;box-shadow:0 0 0 6px rgba(15,72,227,.15)}
.hero-service-card{position:absolute;left:0;top:80px;width:230px;padding:23px;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.12);transform:translateZ(70px) rotate(-6deg);animation:heroCardFloat 5s ease-in-out infinite}.hero-service-card strong{font-size:34px;letter-spacing:-.05em}.hero-service-card p{font-size:13px;margin:7px 0 0}
.service-filter{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;position:sticky;top:70px;z-index:10}.filter-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.filter-title{font-weight:800;font-size:14px}.filter-links{display:flex;gap:8px;flex-wrap:wrap}.filter-links a{padding:9px 14px;border:1px solid var(--border);border-radius:999px;font-size:12px;font-weight:800;background:#fafaf7;transition:.25s}.filter-links a:hover,.filter-links a.active{background:#0f48e3;color:#fff;border-color:#0f48e3}
.services-list{padding:90px 0}.service-row{display:grid;grid-template-columns:90px 1.15fr .9fr 170px;gap:28px;align-items:center;padding:36px 0;border-top:1px solid var(--border);position:relative;transition:.3s ease}.service-row:last-child{border-bottom:1px solid var(--border)}.service-row:hover{padding-left:12px;padding-right:12px;background:rgba(255,255,255,.55);border-radius:22px}.service-no{font-size:14px;font-weight:800;color:#85857e}.service-row h2{font-size:34px;margin-bottom:9px}.service-row p{font-size:14px;max-width:520px}.service-meta{display:flex;flex-wrap:wrap;gap:8px}.service-meta span{font-size:11px;font-weight:800;padding:7px 10px;border-radius:999px;background:#f0f0ea;border:1px solid #e4e3dc}.service-arrow{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;justify-self:end;background:#0f48e3;color:#fff;font-size:22px;transition:.3s ease;box-shadow:0 12px 25px rgba(15,72,227,.2)}.service-row:hover .service-arrow{transform:translate(5px,-5px) rotate(8deg)}
.service-feature{margin-top:80px;background:#0f48e3;color:#fff;border-radius:34px;padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:50px;position:relative;overflow:hidden}.service-feature p{color:rgba(255,255,255,.75);font-size:17px;margin-top:18px;max-width:620px}.service-feature h2{max-width:700px}.feature-orb{width:260px;height:260px;border-radius:50%;position:absolute;right:-45px;bottom:-80px;background:radial-gradient(circle at 30% 25%,#fff,#b9ceff 25%,#315fcb 60%,#08245f);box-shadow:inset -25px -30px 45px rgba(0,0,0,.25);animation:featureOrb 7s ease-in-out infinite}.feature-points{display:grid;gap:14px;position:relative;z-index:2}.feature-point{display:flex;gap:12px;align-items:center}.feature-point i{width:28px;height:28px;border-radius:50%;background:#fff;color:#0f48e3;display:grid;place-items:center;font-style:normal;font-weight:800;flex:none}
@keyframes coreServiceFloat{0%,100%{transform:translateY(0) rotateZ(0)}50%{transform:translateY(-16px) rotateZ(8deg)}}@keyframes serviceRing{to{transform:rotateX(65deg) rotateZ(348deg)}}@keyframes heroCardFloat{0%,100%{transform:translateZ(70px) rotate(-6deg) translateY(0)}50%{transform:translateZ(105px) rotate(-2deg) translateY(-15px)}}@keyframes featureOrb{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-25px,-25px,25px)}}
@media(max-width:900px){.services-hero-grid{grid-template-columns:1fr}.service-hero-visual{min-height:390px}.service-row{grid-template-columns:60px 1fr 70px}.service-meta{grid-column:2}.service-arrow{grid-column:3;grid-row:1}.service-feature{grid-template-columns:1fr;padding:40px 28px}.filter-inner{align-items:flex-start;flex-direction:column}.nav-links{display:none}.menu-btn{display:block}}
@media(max-width:560px){.container{width:calc(100% - 24px)}.services-hero{padding:60px 0}.blue-core{width:260px;height:260px;right:-10px}.service-orbit-ring{width:300px;height:150px;right:-30px}.hero-service-card{width:190px;top:70px}.service-row{grid-template-columns:1fr 52px;gap:15px;padding:28px 0}.service-no{grid-column:1}.service-row h2{font-size:27px}.service-meta{grid-column:1}.service-arrow{grid-column:2;grid-row:2}.service-feature{margin-top:50px}}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    right: 25px;
    bottom: 25px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 99999;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.whatsapp-float svg {
    width: 34px;
    height: 34px;
}

.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.06);
    background: #20ba5a;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.40);
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    right: 72px;
    background: #111827;
    color: #fff;
    padding: 9px 14px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);

    transition: 0.25s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Pulse Animation */
.whatsapp-float::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25D366;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-float svg {
        width: 31px;
        height: 31px;
    }

    .whatsapp-tooltip {
        display: none;
    }
}