:root{--c-dark:#050505;--c-dark2:#0B0C10;--c-dark3:#0f1115;--c-cyan:#2a9fda;--c-blue:#195480;--c-purple:#8B5CF6;--c-pink:#ec4899;--c-yellow:#eab308;--c-green:#22c55e;--c-white:#ffffff;--c-gray:#9ca3af;--c-gray2:#6b7280;--c-border:rgba(255,255,255,0.07);--nav-h:80px;--r-lg:18px;--r-xl:26px;--tr:0.3s cubic-bezier(0.4,0,0.2,1);}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:'Outfit',sans-serif;background:var(--c-dark);color:#fff;overflow-x:hidden;line-height:1.6;}
    ::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--c-dark2);}::-webkit-scrollbar-thumb{background:var(--c-blue);border-radius:3px;}::-webkit-scrollbar-thumb:hover{background:var(--c-cyan);}
    a{text-decoration:none;color:inherit;}ul{list-style:none;}img{max-width:100%;display:block;}
    .container{max-width:1200px;margin:0 auto;padding:0 28px;}
    #wf-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}
    .hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(42,159,218,0.09) 1px,transparent 1px),linear-gradient(90deg,rgba(42,159,218,0.09) 1px,transparent 1px);background-size:55px 55px;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 20%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black 20%,transparent 100%);pointer-events:none;}
    .blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:0.18;z-index:0;pointer-events:none;animation:blobAnim 14s ease-in-out infinite;}
    .blob-1{width:500px;height:500px;background:var(--c-purple);top:-120px;left:-100px;animation-delay:0s;}
    .blob-2{width:400px;height:400px;background:var(--c-cyan);top:15%;right:-80px;animation-delay:-5s;}
    .blob-3{width:350px;height:350px;background:var(--c-blue);bottom:5%;left:25%;animation-delay:-10s;}
    @keyframes blobAnim{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(20px,-35px) scale(1.07);}66%{transform:translate(-15px,18px) scale(0.93);}}
    #wf-pre{position:fixed;inset:0;background:var(--c-dark);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s;}
    #wf-pre.out{opacity:0;visibility:hidden;}
    .pre-ring{width:50px;height:50px;border:2.5px solid rgba(42,159,218,0.15);border-top-color:var(--c-cyan);border-radius:50%;animation:spin .75s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg);}}
    .tg{background:linear-gradient(135deg,var(--c-cyan),var(--c-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
    .lbl{display:inline-block;font-size:.73rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-cyan);margin-bottom:10px;}
    .sh{font-size:clamp(1.9rem,3.5vw,2.6rem);font-weight:900;line-height:1.15;}
    .sub{color:var(--c-gray2);font-size:.95rem;margin-top:12px;max-width:540px;}
    .btn-p{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:50px;background:linear-gradient(135deg,var(--c-blue),var(--c-cyan));color:#fff;font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:var(--tr);font-family:'Outfit',sans-serif;}
    .btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(42,159,218,.32);}
    .btn-o{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:50px;border:1.5px solid rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;background:transparent;transition:var(--tr);font-family:'Outfit',sans-serif;}
    .btn-o:hover{border-color:var(--c-cyan);color:var(--c-cyan);}
    .pp{padding:80px 0;}.pp-sm{padding:56px 0;}
    /* Canvas sitewide: page containers are transparent, sections use semi-opaque dark bg */
    .page{display:none;position:relative;z-index:1;min-height:calc(100vh - var(--nav-h));background:transparent;}
    /* Sub-page sections: darken slightly but allow canvas bleed-through */
    #page-about .pp, #page-services .pp, #page-portfolio .pp, #page-contact .pp {
      background: rgba(5,6,11,0.88) !important;
    }
    .page.ap{display:block;animation:pgFade .45s ease both;}
    @keyframes pgFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
    main{padding-top:var(--nav-h);}
    /* NAV */
    #wf-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);transition:background .3s,box-shadow .3s;}
    #wf-nav.sc{background:rgba(5,5,5,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 24px rgba(0,0,0,.45);}
    .ni{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 4px;}
    .nl{font-size:1.4rem;font-weight:900;letter-spacing:.04em;color:#fff;cursor:pointer;}
    .nl span{color:var(--c-cyan);}
    .nls{display:flex;align-items:center;gap:2px;}
    .nls a{position:relative;padding:8px 13px;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.7);transition:color var(--tr);cursor:pointer;}
    .nls a::after{content:'';position:absolute;bottom:4px;left:13px;right:13px;height:2px;background:var(--c-cyan);transform:scaleX(0);transition:transform var(--tr);border-radius:2px;}
    .nls a:hover,.nls a.act{color:#fff;}.nls a:hover::after,.nls a.act::after{transform:scaleX(1);}
    .nc{padding:9px 22px;border-radius:50px;background:linear-gradient(135deg,var(--c-blue),var(--c-cyan));font-weight:700;font-size:.85rem;color:#fff;border:none;cursor:pointer;font-family:'Outfit',sans-serif;transition:var(--tr);}
    .nc:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(42,159,218,.3);}
    .nh{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
    .nh span{display:block;width:25px;height:2px;background:#fff;border-radius:2px;transition:var(--tr);}
    .nh.op span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
    .nh.op span:nth-child(2){opacity:0;}
    .nh.op span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
    .nm{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(5,5,5,.97);backdrop-filter:blur(20px);padding:18px 24px 30px;z-index:999;border-top:1px solid var(--c-border);}
    .nm.op{display:block;}
    .nm a{display:block;padding:12px 0;font-size:1rem;font-weight:600;color:rgba(255,255,255,.75);border-bottom:1px solid var(--c-border);transition:color var(--tr);cursor:pointer;}
    .nm a:last-of-type{border-bottom:none;}
    .nm a:hover{color:var(--c-cyan);}
    /* HERO */
    .hs{position:relative;min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
    .hc{position:relative;z-index:2;padding:64px 24px 0;max-width:920px;display:flex;flex-direction:column;align-items:center;}
    .hbg{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:50px;border:1px solid rgba(42,159,218,.3);background:rgba(42,159,218,.07);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-cyan);margin-bottom:26px;}
    .hbg i{font-size:.65rem;animation:pulse 2s ease infinite;}
    @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
    .hh1{font-size:clamp(2.8rem,8vw,6.5rem);font-weight:900;line-height:1.05;margin:0 0 0;max-width:860px;text-align:center;}
    .hsub{font-size:clamp(.95rem,2vw,1.15rem);color:var(--c-gray);max-width:580px;margin:0 auto 38px;font-weight:300;}
    .hbtns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center;}
    .hscr{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.28);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;z-index:2;}
    .hscr-l{width:1px;height:44px;background:linear-gradient(to bottom,rgba(42,159,218,.75),transparent);animation:sp 1.8s ease-in-out infinite;}
    @keyframes sp{0%,100%{opacity:1;transform:scaleY(1);}50%{opacity:.4;transform:scaleY(.6);}}
    /* STATS — semi-transparent so canvas shows through (sitewide bg) */
    .ss{background:rgba(11,12,16,0.75);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
    .sg{display:grid;grid-template-columns:repeat(4,1fr);}
    .si{padding:40px 20px;text-align:center;border-right:1px solid var(--c-border);transition:background var(--tr);}
    .si:last-child{border-right:none;}.si:hover{background:rgba(42,159,218,.04);}
    .sn{font-size:clamp(1.9rem,3.5vw,2.7rem);font-weight:900;line-height:1;margin-bottom:6px;}
    .sl{font-size:.8rem;color:var(--c-gray2);text-transform:uppercase;letter-spacing:.08em;font-weight:500;}
    /* SEC HEADER */
    .shd{margin-bottom:52px;}.shd.ctr{text-align:center;}.shd.ctr .sub{margin:12px auto 0;}
    /* CARDS */
    .svgg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
    .svgg.c3{grid-template-columns:repeat(3,1fr);}
    .svc{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:30px 24px;transition:var(--tr);}
    .svc:hover{transform:translateY(-5px);border-color:rgba(42,159,218,.4);box-shadow:0 18px 46px rgba(0,0,0,.38),0 0 28px rgba(42,159,218,.07);}
    .svi{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:18px;transition:transform var(--tr);}
    .svc:hover .svi{transform:scale(1.1);}
    .svc h4{font-size:.95rem;font-weight:700;margin-bottom:9px;}
    .svc p{font-size:.83rem;color:var(--c-gray2);line-height:1.6;}
    /* ABOUT */
    .ag{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
    .ais{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;}
    .ai{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:14px;padding:22px;display:flex;gap:13px;align-items:flex-start;transition:var(--tr);}
    .ai:hover{border-color:rgba(42,159,218,.28);}
    .aic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
    .ai h5{font-size:.88rem;font-weight:700;margin-bottom:5px;}.ai p{font-size:.8rem;color:var(--c-gray2);line-height:1.55;}
    .af{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:18px;position:relative;}
    .af iframe{width:100%;aspect-ratio:16/9;border-radius:10px;border:none;display:block;}
    .agl{position:absolute;inset:-30px;background:radial-gradient(ellipse at center,rgba(42,159,218,.1),transparent 65%);pointer-events:none;}
    .clbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-gray2);margin-top:22px;margin-bottom:12px;}
    .cstrip{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
    .cstrip img{height:36px;width:auto;filter:grayscale(1) brightness(.65);transition:filter var(--tr);border-radius:5px;object-fit:contain;}
    .cstrip img:hover{filter:grayscale(0) brightness(1);}
    /* SOLUTIONS */
    .solg{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
    .soli{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:16px;padding:26px 14px;text-align:center;transition:var(--tr);}
    .soli:hover{border-color:rgba(42,159,218,.35);transform:translateY(-4px);background:rgba(42,159,218,.04);}
    .soli img{width:50px;height:50px;object-fit:contain;margin:0 auto 12px;transition:transform var(--tr),filter var(--tr);filter:brightness(.85);}
    .soli:hover img{transform:scale(1.1);filter:brightness(1.1);}
    .soli h5{font-size:.8rem;font-weight:700;color:var(--c-gray2);line-height:1.3;}
    .soli:hover h5{color:#fff;}
    /* PORTFOLIO */
    .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
    .pg.c2{grid-template-columns:repeat(2,1fr);}
    .pi{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:#0b1018;display:block;border:1px solid rgba(255,255,255,.07);}
    .pi img{width:calc(100% - 24px);height:calc(100% - 24px);margin:12px;object-fit:contain;object-position:top center;transition:transform .6s ease;display:block;border-radius:calc(var(--r-lg) - 4px);}
    .pi:hover img{transform:scale(1.07);}
    .po{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 30%,rgba(0,0,0,.15) 70%,transparent);opacity:0;transition:opacity var(--tr);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;}
    .pi:hover .po{opacity:1;}
    .ptag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-cyan);margin-bottom:5px;transform:translateY(7px);transition:transform var(--tr);}
    .pi:hover .ptag{transform:translateY(0);}
    .ptit{font-size:1.05rem;font-weight:700;color:#fff;transform:translateY(7px);transition:transform var(--tr) .04s;}
    .pi:hover .ptit{transform:translateY(0);}
    .pex{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;opacity:0;transition:opacity var(--tr),background var(--tr);}
    .pi:hover .pex{opacity:1;}.pex:hover{background:var(--c-cyan);border-color:var(--c-cyan);}
    /* TESTIMONIALS */
    .tg2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;padding-bottom:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .tg2::-webkit-scrollbar{display:none;}
    .tc{flex:0 0 calc(50% - 12px);scroll-snap-align:start;min-width:300px;}
    .tc{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:30px;position:relative;transition:var(--tr);}
    .tc:hover{border-color:rgba(42,159,218,.22);transform:translateY(-3px);}
    .tc::before{content:'\201C';position:absolute;top:16px;right:22px;font-size:4.5rem;line-height:1;font-family:Georgia,serif;color:rgba(42,159,218,.1);pointer-events:none;}
    .tst{color:var(--c-yellow);font-size:.72rem;margin-bottom:10px;}
    .tc p{font-size:.9rem;color:var(--c-gray);line-height:1.7;margin-bottom:22px;font-style:italic;}
    .tau{display:flex;align-items:center;gap:11px;}
    .tav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--c-blue),var(--c-cyan));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0;}
    .tnm{font-size:.88rem;font-weight:700;}
    .trl{font-size:.75rem;color:var(--c-cyan);}
    /* WHY US */
    .wg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
    .wc{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:30px 22px;text-align:center;transition:var(--tr);position:relative;overflow:hidden;}
    .wc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--c-cyan),var(--c-purple));transform:scaleX(0);transition:transform var(--tr);}
    .wc:hover::after{transform:scaleX(1);}.wc:hover{border-color:rgba(42,159,218,.22);transform:translateY(-4px);}
    .wi{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 18px;transition:transform var(--tr);}
    .wc:hover .wi{transform:scale(1.1) rotate(-4deg);}
    .wc h4{font-size:.95rem;font-weight:700;margin-bottom:9px;}.wc p{font-size:.82rem;color:var(--c-gray2);line-height:1.6;}
    /* CTA */
    .ctab{background:var(--c-dark3);border:1px solid rgba(42,159,218,.18);border-radius:var(--r-xl);padding:68px 40px;text-align:center;position:relative;overflow:hidden;}
    .ctab::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--c-blue),var(--c-cyan),var(--c-purple));}
    .ctab::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(42,159,218,.06),transparent 60%);pointer-events:none;}
    .ctab h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;margin-bottom:14px;position:relative;z-index:1;}
    .ctab p{color:var(--c-gray2);max-width:440px;margin:0 auto 32px;position:relative;z-index:1;}
    .ctab .btn-p{position:relative;z-index:1;font-size:.95rem;padding:15px 38px;}
    /* CONTACT */
    .cgg{display:grid;grid-template-columns:1fr 1.45fr;gap:60px;align-items:start;}
    .ci h3{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;line-height:1.2;margin-bottom:16px;}
    .ci>p{color:var(--c-gray2);margin-bottom:36px;font-size:.95rem;}
    .cd{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
    .cdi{width:46px;height:46px;border-radius:13px;background:var(--c-dark3);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--c-cyan);flex-shrink:0;transition:var(--tr);}
    .cd:hover .cdi{background:var(--c-cyan);color:var(--c-dark);}
    .cdt p:first-child{font-size:.72rem;color:var(--c-gray2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;}
    .cdt p,.cdt a{font-size:.9rem;font-weight:600;color:#fff;}.cdt a:hover{color:var(--c-cyan);}
    .cfw{background:var(--c-dark3);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:38px 34px;}
    .fr{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
    .fg2{margin-bottom:14px;}
    .fg2 label{display:block;font-size:.75rem;font-weight:600;color:var(--c-gray2);margin-bottom:7px;letter-spacing:.04em;text-transform:uppercase;}
    .fg2 input,.fg2 textarea{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:12px 15px;color:#fff;font-size:.92rem;font-family:'Outfit',sans-serif;transition:border-color var(--tr),box-shadow var(--tr);outline:none;}
    .fg2 input::placeholder,.fg2 textarea::placeholder{color:rgba(255,255,255,.22);}
    .fg2 input:focus,.fg2 textarea:focus{border-color:var(--c-cyan);box-shadow:0 0 0 3px rgba(42,159,218,.1);}
    .fg2 textarea{resize:vertical;min-height:110px;}
    .contact-form .btn-p{width:100%;justify-content:center;padding:15px;font-size:.95rem;margin-top:4px;}
    #message{margin-top:14px;}
    #message .alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac;border-radius:9px;padding:13px 16px;}
    #message .alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:9px;padding:9px 16px;font-size:.87rem;}
    /* FOOTER */
    #wf-footer{position:relative;z-index:1;background:#000;border-top:1px solid var(--c-border);padding:60px 0 0;}
    .fg3{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:52px;}
    .fb p{font-size:.85rem;color:var(--c-gray2);line-height:1.7;margin-top:13px;max-width:270px;}
    .fso{display:flex;gap:9px;margin-top:18px;}
    .fsl{width:36px;height:36px;border-radius:9px;background:var(--c-dark3);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--c-gray2);transition:var(--tr);}
    .fsl:hover{background:var(--c-cyan);color:var(--c-dark);border-color:var(--c-cyan);transform:translateY(-2px);}
    .fc h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:18px;}
    .fc ul{display:flex;flex-direction:column;gap:9px;}
    .fc ul li a,.fc ul li button{font-size:.85rem;color:var(--c-gray2);transition:color var(--tr);background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;padding:0;text-align:left;}
    .fc ul li a:hover,.fc ul li button:hover{color:var(--c-cyan);}
    .fa2 li{font-size:.83rem;color:var(--c-gray2);display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;}
    .fa2 li i{color:var(--c-cyan);margin-top:2px;flex-shrink:0;font-size:.82rem;}
    .fa2 li a{color:var(--c-gray2);transition:color var(--tr);}.fa2 li a:hover{color:var(--c-cyan);}
    .fbot{border-top:1px solid var(--c-border);padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .fbot p{font-size:.78rem;color:var(--c-gray2);}
    .fbl{display:flex;gap:18px;}.fbl a{font-size:.78rem;color:var(--c-gray2);transition:color var(--tr);}.fbl a:hover{color:var(--c-cyan);}
    /* BTT */
    #btt{position:fixed;bottom:26px;right:26px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--c-blue),var(--c-cyan));color:#fff;border:none;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;z-index:800;box-shadow:0 6px 18px rgba(42,159,218,.32);}
    #btt.vis{opacity:1;transform:translateY(0);}#btt:hover{transform:translateY(-3px);}
    /* REVEAL */
    .rv{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease;}
    .rv.show{opacity:1;transform:translateY(0);}
    .rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}.rv.d3{transition-delay:.24s;}.rv.d4{transition-delay:.32s;}
    /* RESPONSIVE */
    @media(max-width:1024px){.svgg{grid-template-columns:repeat(2,1fr);}.solg{grid-template-columns:repeat(3,1fr);}.pg{grid-template-columns:repeat(2,1fr);}.fg3{grid-template-columns:1fr 1fr;gap:32px;}}
    @media(max-width:768px){.sg{grid-template-columns:repeat(2,1fr);}.si:nth-child(2){border-right:none;}.si:nth-child(3),.si:nth-child(4){border-top:1px solid var(--c-border);}.ag{grid-template-columns:1fr;gap:36px;}.ais{grid-template-columns:1fr;}.tc{flex:0 0 100%;}.wg{grid-template-columns:repeat(2,1fr);}.cgg{grid-template-columns:1fr;gap:36px;}.fr{grid-template-columns:1fr;}.fg3{grid-template-columns:1fr;gap:28px;}.fbot{flex-direction:column;text-align:center;}.nls,.nc.dk{display:none;}.nh{display:flex;}.solg{grid-template-columns:repeat(2,1fr);}.pg{grid-template-columns:1fr;}}
    @media(max-width:480px){.sg{grid-template-columns:1fr;}.si{border-right:none!important;border-bottom:1px solid var(--c-border);}.si:last-child{border-bottom:none;}.svgg{grid-template-columns:1fr;}.wg{grid-template-columns:1fr;}.hbtns{flex-direction:column;align-items:center;}.cfw{padding:26px 18px;}.ctab{padding:46px 22px;}}
/* ---- Back navigation ---- */
.page-nav-back{padding:20px 0 0;display:flex;align-items:center;gap:8px;}
.back-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:50px;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.65);font-size:.85rem;font-weight:600;cursor:pointer;background:transparent;font-family:'Outfit',sans-serif;transition:.3s ease;}
.back-btn:hover{border-color:var(--c-cyan);color:var(--c-cyan);}

/* ---- Client logo strip ---- */
.cl-strip{display:flex;gap:32px;flex-wrap:nowrap;align-items:center;margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:none;}
.cl-strip::-webkit-scrollbar { display: none; }
.cl-item{height:44px;display:flex;align-items:center;transition:opacity .3s;}
.cl-item img{height:44px;width:auto;max-width:110px;object-fit:contain;border-radius:6px;transition:transform .3s ease;}
.cl-item:hover img{transform:scale(1.05);}
.cl-placeholder{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:0 14px;height:40px;}
.cl-placeholder span{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.35);white-space:nowrap;letter-spacing:.03em;}
.cl-placeholder:hover{border-color:rgba(42,159,218,.3);}
.cl-placeholder:hover span{color:rgba(42,159,218,.7);}

/* Home page clients section */
.home-clients{padding:48px 0;background:rgba(15,17,21,0.75);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.home-clients-inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
.home-clients-lbl{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gray2);flex-shrink:0;white-space:nowrap;}

/* ---- YouTube thumbnail embed ---- */
.yt-thumb-wrap{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000;cursor:pointer;}
.yt-thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:opacity .3s;}
.yt-thumb-wrap:hover img{opacity:.75;}
.yt-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.yt-play-btn i{font-size:3.5rem;color:#fff;filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));transition:transform .3s,color .3s;}
.yt-thumb-wrap:hover .yt-play-btn i{transform:scale(1.15);color:#ff0000;}


/* ===== REFINEMENTS ===== */

/* Nav - ensure proper height and logo sizing on all screens */
.nl{display:inline-flex;align-items:center;}

/* About frame - constrain height */
.af{position:relative;}
.yt-thumb-wrap img{border-radius:10px;}

/* Solutions grid - better mobile */
@media(max-width:600px){.solg{grid-template-columns:repeat(3,1fr);gap:10px;}.soli{padding:18px 8px;}.soli img{width:38px;height:38px;}.soli h5{font-size:.7rem;}}

/* Home clients section - scrollable on mobile */
@media(max-width:768px){.home-clients-inner{flex-direction:column;align-items:center;gap:16px;}}

/* Portfolio grid - proper aspect ratio */
.pi{display:block;}

/* Contact form - gap fix */
.cgg{gap:48px;}

/* Back button top spacing */
.page-nav-back{padding:24px 0 0;}

/* Footer brand logo color fix */
#wf-footer .nl span{color:var(--c-cyan);}

/* Stat section - ensure no overflow */
.ss{position:relative;z-index:1;}

/* Ensure pages don't have horizontal scroll */
.page{overflow-x:hidden;}

/* Fix about grid mobile */
@media(max-width:768px){.ag{grid-template-columns:1fr;gap:32px;}.ais{grid-template-columns:1fr 1fr;}}

/* CTA box padding mobile */
@media(max-width:480px){.cgg{gap:28px;}.ci h3{font-size:1.5rem;}.ctab{padding:40px 20px;}}

/* Back btn on very small screens */
@media(max-width:480px){.back-btn{font-size:.8rem;padding:8px 16px;}}

/* Smooth hover for all portfolio items */
.pi{cursor:pointer;}

/* Clients strip on about page */
.cl-strip.rv{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:12px;}
.cl-strip.rv::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════
   SITEWIDE BACKGROUND: Canvas visible through ALL sections
   ═══════════════════════════════════════════════════════════ */
/* The canvas, blobs and grid-bg are all position:fixed z-index:0.
   Every section must be semi-transparent for the effect to show. */
body { background: #05060B; }

/* Home page — hero has no bg, all other sections semi-transparent */
.ss { background: rgba(5,6,11,0.70) !important; }
.home-clients { background: transparent !important; }

/* All sections/pages that use .pp padding class */
.pp { background: transparent; }

/* Subpage wrappers: apply slightly heavier veil to the entire page for smooth transition */
#page-about,
#page-services,
#page-portfolio,
#page-contact { background: rgba(5,6,11,0.82) !important; }

/* Subpage sections don't need extra background now */
#page-about .pp,
#page-services .pp,
#page-portfolio .pp,
#page-contact .pp { background: transparent !important; }

/* Footer always fully opaque */
#wf-footer { background: #0B0C10 !important; }

/* Tagline strip */
.tagline-strip { background: rgba(42,159,218,0.04); }

/* Standalone CTA section */
.standalone-cta { background: rgba(5,6,11,0.78) !important; }

/* Cards, cards-dark — keep their own backgrounds but z-index right */
.svc, .ci, .review-card, .about-dark-card, .pf-card { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════
   SERVICE CARD: Larger logo badge for better visibility
   ═══════════════════════════════════════════════════════════ */
.pf-logo-badge {
  width: 110px !important;
  height: 110px !important;
}
.pf-logo-badge img {
  width: 72% !important;
  height: 72% !important;
}