*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

.page{position:relative;width:100%;overflow-x:clip;background:#fff;font-family:Manrope,sans-serif;color:#032D60}
#ptcl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.shell{position:relative;z-index:1}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* type + shared atoms */
.dispXL{font:700 clamp(46px,6.6vw,92px)/1.0 'Space Grotesk',sans-serif;letter-spacing:-.03em;margin:0}
.dispL{font:700 clamp(34px,4.4vw,60px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.025em;margin:0}
.eyebrow2{display:inline-flex;align-items:center;gap:9px;background:#eaf4ff;border:1px solid #d2e7fb;color:#0176D3;padding:8px 16px;border-radius:100px;font:600 13px Manrope,sans-serif;letter-spacing:.01em}
.chap{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.chap-num{font:700 14px 'Space Grotesk',sans-serif;color:#0176D3;letter-spacing:.1em}
.chap-line{width:54px;height:1.5px;background:linear-gradient(90deg,#0176D3,transparent)}
.chap-txt{font:600 13px Manrope,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#5b7da6}
.grad{background:linear-gradient(110deg,#0176D3,#00A1E0,#1B96FF,#0176D3);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.lead{font:400 clamp(16px,1.4vw,19px)/1.6 Manrope,sans-serif;color:#52688a}
.btnf{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#0176D3,#00A1E0);color:#fff;padding:15px 28px;border-radius:13px;font:600 15px Manrope,sans-serif;text-decoration:none;box-shadow:0 14px 30px rgba(1,118,211,.32);transition:transform .3s,box-shadow .3s;cursor:pointer;border:none}
.btnf:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(1,118,211,.42)}
.btno{display:inline-flex;align-items:center;gap:9px;border:1.5px solid #cfe3f7;color:#0176D3;padding:15px 26px;border-radius:13px;font:600 15px Manrope,sans-serif;text-decoration:none;background:#fff;transition:transform .3s,border-color .3s,background .3s;cursor:pointer}
.btno:hover{transform:translateY(-3px);border-color:#0176D3;background:#f4f9ff}

/* utility helpers (replace former inline styles) */
.chap--center{justify-content:center}
.lead--mt16{margin-top:16px}
.lead--mt18{margin-top:18px}
.txt-accent{color:#0176D3}
.btnf--full{width:100%;justify-content:center}

/* progress + nav */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#0176D3,#00A1E0,#1B96FF);z-index:60;box-shadow:0 0 12px rgba(0,161,224,.6);transition:opacity .3s}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:box-shadow .4s,padding .4s;padding:20px 0}
/* The scrolled bar's blur lives on this layer, never on .nav itself: a
   non-none backdrop-filter would make .nav the containing block for its
   position:fixed children, collapsing the mobile drawer into the header. */
.nav::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.nav.scrolled::before{opacity:1}
.nav.scrolled{box-shadow:0 6px 24px rgba(3,45,96,.08);padding:12px 0}
.nav-in{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px;font:700 19px 'Space Grotesk',sans-serif;letter-spacing:.16em;color:#032D60;text-decoration:none}
.wing{width:26px;height:26px;border-radius:50% 50% 50% 3px;background:linear-gradient(135deg,#0176D3,#00A1E0);transform:rotate(-20deg);box-shadow:0 5px 14px rgba(1,118,211,.4);position:relative}
.wing::after{content:"";position:absolute;inset:6px 6px 8px 8px;border-radius:50% 50% 50% 2px;background:rgba(255,255,255,.55)}
.nav-in{gap:24px}
.nlinks{display:flex;align-items:center;gap:28px;flex-wrap:nowrap}
.nlink{font:600 14.5px Manrope,sans-serif;color:#3d5a80;text-decoration:none;position:relative;padding:4px 0;transition:color .25s;white-space:nowrap}
.nlink::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:#0176D3;transition:width .3s}
.nlink:hover{color:#0176D3}.nlink:hover::after{width:100%}
.nright{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nchip{display:flex;align-items:center;gap:9px;background:#0176D3;border-radius:11px;padding:7px 12px;text-decoration:none;box-shadow:0 8px 18px rgba(1,118,211,.26)}
.nchip-ic{width:26px;height:18px;display:flex;align-items:center;justify-content:center}
.nchip-ic svg{width:24px;height:17px}
.nchip-tx{display:flex;flex-direction:column;line-height:1}
.nchip-tx b{font:700 13px 'Space Grotesk',sans-serif;color:#fff;letter-spacing:.01em}
.nchip-tx span{font:600 9px Manrope,sans-serif;color:rgba(255,255,255,.85);margin-top:2px;letter-spacing:.04em}
.ncta{background:linear-gradient(135deg,#0176D3,#00A1E0);color:#fff;padding:11px 20px;border-radius:11px;font:600 14px Manrope,sans-serif;text-decoration:none;box-shadow:0 10px 22px rgba(1,118,211,.3);transition:transform .3s,box-shadow .3s}
.ncta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(1,118,211,.42)}
.ntoggle{display:none}
/* CTA mirrored into the mobile drawer (JS-inserted); only shown there */
.drawer-cta{display:none;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:22px;background:linear-gradient(135deg,#0176D3,#00A1E0);color:#fff;padding:14px 18px;border-radius:12px;font:600 15px Manrope,sans-serif;text-decoration:none;box-shadow:0 10px 22px rgba(1,118,211,.3)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#d6e9ff 0%,#e8f3ff 36%,#f6faff 70%,#fff 100%);z-index:0}
.sky-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.so1{width:520px;height:520px;left:-120px;top:-80px;background:radial-gradient(circle,#7cc4ff,transparent 70%)}
.so2{width:460px;height:460px;right:-100px;top:120px;background:radial-gradient(circle,#00A1E0,transparent 70%);opacity:.35}
.so3{width:380px;height:380px;left:40%;bottom:-120px;background:radial-gradient(circle,#1B96FF,transparent 70%);opacity:.28}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.hero-eye{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px}
.eye-bar{width:30px;height:1.5px;background:linear-gradient(90deg,#0176D3,transparent)}
.hero-sub{font:400 clamp(17px,1.5vw,20px)/1.6 Manrope,sans-serif;color:#52688a;max-width:480px;margin:26px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:22px;margin-top:40px}
.trust-av{display:flex}
.trust-av i{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #fff;box-shadow:0 4px 12px rgba(3,45,96,.12);color:#0176D3;font-size:17px;margin-left:-10px}
.trust-av i:first-child{margin-left:0}
.trust-tx{font:500 13px Manrope,sans-serif;color:#5b7da6;line-height:1.4}
.trust-tx b{color:#032D60;font-weight:700}

/* hero orb visual */
.orbV{position:relative;width:100%;aspect-ratio:1;max-width:440px;margin:0 auto}
.ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(1,118,211,.22)}
.ring.r1{inset:0}.ring.r2{inset:14%;animation:spin 34s linear infinite}.ring.r3{inset:28%;border-color:rgba(0,161,224,.3)}
.haze{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle,rgba(0,161,224,.28),transparent 65%);animation:pulse 5s ease-in-out infinite}
.orbCore{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1B96FF,#0176D3 60%,#032D60);box-shadow:0 0 70px rgba(1,118,211,.55),inset 0 6px 20px rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;animation:pulse 4s ease-in-out infinite}
.orbCore .wm{width:34px;height:34px;border-radius:50% 50% 50% 3px;background:#fff;transform:rotate(-20deg);margin-bottom:7px}
.orbCore span{font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.14em}
.ccloud{position:absolute;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid #e1eefc;box-shadow:0 12px 28px rgba(3,45,96,.14);padding:10px 15px;border-radius:100px;font:600 13px Manrope,sans-serif;color:#032D60;animation:bob ease-in-out infinite;backdrop-filter:blur(6px)}
.ccloud i{color:#0176D3;font-size:15px}
.lg-tx{display:flex;flex-direction:column;line-height:1}
.lg-tx i{font:600 8.5px Manrope,sans-serif;font-style:normal;letter-spacing:.32em;color:#0176D3;margin-top:3px}
.pring{position:absolute;inset:30% 9%;border-radius:50%;border:2px solid rgba(0,161,224,.45);transform:rotate(-20deg) scaleY(.32);box-shadow:0 0 20px rgba(0,161,224,.4),inset 0 0 12px rgba(124,196,255,.5)}
.sat{position:absolute;top:-9px;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#00A1E0 70%);box-shadow:0 0 16px rgba(0,161,224,.9),0 0 34px rgba(27,150,255,.55)}
.planet-glaze{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6),transparent 44%),radial-gradient(circle at 72% 80%,rgba(3,45,96,.6),transparent 56%);pointer-events:none}
.cc1{left:-8%;top:18%;animation-duration:4.2s}
.cc2{right:-10%;top:40%;animation-duration:5s;animation-delay:.6s}
.cc3{left:2%;bottom:10%;animation-duration:4.6s;animation-delay:1.2s}
.cc4{right:-4%;bottom:22%;animation-duration:5.4s;animation-delay:.3s}
.scroll-ind{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;z-index:3}
.mouse{width:24px;height:38px;border:2px solid #9cc6ef;border-radius:13px;display:flex;justify-content:center;padding-top:6px}
.wheel{width:3px;height:8px;border-radius:3px;background:#0176D3;animation:wheel 1.6s ease-in-out infinite}
.scroll-ind span{font:600 11px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7d9bc0}

/* sections */
.sec{position:relative;padding:120px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hl{display:flex;align-items:flex-start;gap:13px;margin-top:16px}
.hl-ic{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:#eaf4ff;display:flex;align-items:center;justify-content:center;color:#0176D3;font-size:14px;margin-top:1px}
.hl span{font:500 15px/1.5 Manrope,sans-serif;color:#3d5a80}
.story-p{font:400 16px/1.7 Manrope,sans-serif;color:#52688a;margin:20px 0}

/* ecosystem visual (about) */
.eco{position:relative;background:linear-gradient(160deg,#f6faff,#eaf4ff);border:1px solid #e1eefc;border-radius:28px;padding:38px 34px;box-shadow:0 30px 70px rgba(3,45,96,.1);overflow:hidden}
.eco-head{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.eco-dot{width:9px;height:9px;border-radius:50%;background:#00A1E0;box-shadow:0 0 0 4px rgba(0,161,224,.18);animation:pulse 2.4s ease-in-out infinite}
.eco-head b{font:700 13px 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#032D60}
.eco-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.eco-stat{background:#fff;border:1px solid #e8f1fb;border-radius:16px;padding:18px 14px;text-align:center;box-shadow:0 8px 20px rgba(3,45,96,.05)}
.eco-cnt{font:700 32px 'Space Grotesk',sans-serif;color:#0176D3;letter-spacing:-.02em;line-height:1}
.eco-cnt .sfx{color:#00A1E0}
.eco-lab{font:600 11px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7d9bc0;margin-top:7px}
.eco-row{display:flex;flex-wrap:wrap;gap:9px}
.eco-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #e8f1fb;border-radius:100px;padding:8px 13px;font:600 12px Manrope,sans-serif;color:#3d5a80;box-shadow:0 4px 12px rgba(3,45,96,.05)}
.eco-pill i{color:#0176D3;font-size:13px}
.eco-badge{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:linear-gradient(135deg,#032D60,#0176D3);color:#fff;padding:11px 17px;border-radius:12px;font:600 12.5px Manrope,sans-serif;box-shadow:0 12px 26px rgba(1,118,211,.3)}
.eco-badge i{color:#7cc4ff}

/* services */
.shead{text-align:center;max-width:680px;margin:0 auto 60px}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.scard{position:relative;background:#fff;border:1px solid #eaf1f9;border-radius:22px;padding:34px 30px;box-shadow:0 14px 40px rgba(3,45,96,.06);overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s}
.scard::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,161,224,.06),transparent 60%);opacity:0;transition:opacity .4s}
.scard:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(1,118,211,.16);border-color:#cfe3f7}
.scard:hover::before{opacity:1}
.scard:hover .scard-ic{transform:scale(1.08) rotate(-6deg)}
.scard-num{position:absolute;top:24px;right:28px;font:700 40px 'Space Grotesk',sans-serif;color:#eef5fd;letter-spacing:-.02em}
.scard-ic{width:62px;height:62px;border-radius:17px;background:linear-gradient(135deg,#0176D3,#00A1E0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:27px;box-shadow:0 12px 26px rgba(1,118,211,.3);margin-bottom:22px;transition:transform .4s;position:relative;z-index:1}
.scard h3{font:700 20px 'Space Grotesk',sans-serif;color:#032D60;margin:0 0 12px;position:relative;z-index:1}
.scard p{font:400 14.5px/1.65 Manrope,sans-serif;color:#5d73a0;margin:0;position:relative;z-index:1}
.scard-line{height:3px;width:34px;background:linear-gradient(90deg,#0176D3,#00A1E0);border-radius:3px;margin-top:20px;transition:width .4s;position:relative;z-index:1}
.scard:hover .scard-line{width:64px}
/* card title links through to the service's own page */
.scard h3 a{display:inline-flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none;transition:color .25s}
.scard h3 a:hover{color:#0176D3}
.scard h3 .bi{font-size:13px;opacity:.4;transition:opacity .3s,transform .3s}
.scard h3 a:hover .bi{opacity:1;transform:translateX(3px)}
/* sub-service links, mirroring the Services dropdown */
.scard-links{list-style:none;margin:16px 0 0;padding:0;position:relative;z-index:1}
.scard-links a{display:flex;align-items:center;gap:9px;padding:8px 0;font:600 13.5px/1.4 Manrope,sans-serif;color:#4a678f;text-decoration:none;transition:color .25s,transform .25s}
.scard-links a::before{content:"";width:5px;height:5px;border-radius:50%;background:#c2dbf2;flex-shrink:0;transition:background .25s,transform .25s}
.scard-links a:hover{color:#0176D3;transform:translateX(3px)}
.scard-links a:hover::before{background:#0176D3;transform:scale(1.3)}

/* solutions */
.sol{background:linear-gradient(165deg,#032D60 0%,#0a3d7a 55%,#0176D3 120%);border-radius:36px;padding:72px 56px;position:relative;overflow:hidden}
.sol::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.2px);background-size:30px 30px;opacity:.6}
.sol-orb{position:absolute;border-radius:50%;filter:blur(80px)}
.sol-o1{width:400px;height:400px;right:-120px;top:-140px;background:radial-gradient(circle,rgba(0,161,224,.5),transparent 70%)}
.sol-o2{width:340px;height:340px;left:-100px;bottom:-120px;background:radial-gradient(circle,rgba(27,150,255,.4),transparent 70%)}
.sol-in{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.sol-l .chap-txt{color:#9cc6ef}.sol-l .chap-line{background:linear-gradient(90deg,#00A1E0,transparent)}.sol-l .chap-num{color:#7cc4ff}
.sol-l h2{color:#fff}
.sol-l p{font:400 16px/1.6 Manrope,sans-serif;color:rgba(255,255,255,.72);margin-top:18px;max-width:340px}
.cloud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.cloud-card{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;backdrop-filter:blur(6px);transition:transform .35s,background .35s,border-color .35s;cursor:default}
.cloud-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.14);border-color:rgba(124,196,255,.5)}
.cloud-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:var(--c);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.cloud-card span{font:600 11.5px Manrope,sans-serif;color:rgba(255,255,255,.9);line-height:1.25}
/* per-card icon colours (replace former inline --c styles) */
.cloud-card.c-einstein{--c:#00A1E0}
.cloud-card.c-sales{--c:#0176D3}
.cloud-card.c-service{--c:#1B96FF}
.cloud-card.c-marketing{--c:#E31092}
.cloud-card.c-commerce{--c:#F4762A}
.cloud-card.c-data{--c:#032D60}
.cloud-card.c-tableau{--c:#0064A0}
.cloud-card.c-mulesoft{--c:#FF5900}
.cloud-card.c-slack{--c:#611F69}
.cloud-card.c-heroku{--c:#3ECF8E}
.cloud-card.c-netzero{--c:#2CB97A}
.cloud-card.c-success{--c:#1B96FF}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-item{border:1px solid #eaf1f9;border-radius:18px;background:#fff;margin-bottom:14px;overflow:hidden;box-shadow:0 8px 24px rgba(3,45,96,.05);transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:#cfe3f7;box-shadow:0 16px 40px rgba(1,118,211,.12)}
.faq-trig{display:flex;align-items:center;gap:18px;width:100%;background:none;border:none;padding:22px 24px;cursor:pointer;text-align:left}
.faq-n{font:700 14px 'Space Grotesk',sans-serif;color:#0176D3;letter-spacing:.04em}
.faq-q{flex:1;font:600 16.5px Manrope,sans-serif;color:#032D60}
.faq-ic{width:30px;height:30px;border-radius:9px;background:#eaf4ff;display:flex;align-items:center;justify-content:center;color:#0176D3;font-size:14px;transition:transform .35s,background .35s,color .35s;flex-shrink:0}
.faq-item.open .faq-ic{transform:rotate(135deg);background:#0176D3;color:#fff}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-item.open .faq-ans{max-height:260px}
.faq-ans p{font:400 14.5px/1.7 Manrope,sans-serif;color:#5d73a0;margin:0;padding:0 24px 24px 60px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;margin-top:54px}
.info-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid #eaf1f9;border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 8px 22px rgba(3,45,96,.05);transition:transform .3s,box-shadow .3s}
.info-card:hover{transform:translateX(6px);box-shadow:0 14px 34px rgba(1,118,211,.12)}
.info-ic{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#0176D3,#00A1E0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0;box-shadow:0 10px 22px rgba(1,118,211,.28)}
.info-card h4{font:700 14px Manrope,sans-serif;color:#032D60;margin:0 0 5px}
.info-card p{font:400 14px/1.5 Manrope,sans-serif;color:#5d73a0;margin:0}
.form{background:#fff;border:1px solid #eaf1f9;border-radius:24px;padding:34px;box-shadow:0 20px 50px rgba(3,45,96,.08)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{margin-bottom:16px}
.fg input,.fg textarea{width:100%;border:1.5px solid #e3edf7;border-radius:12px;padding:14px 16px;font:400 15px Manrope,sans-serif;color:#032D60;background:#f9fbff;transition:border-color .25s,background .25s,box-shadow .25s;resize:vertical}
.fg input:focus,.fg textarea:focus{outline:none;border-color:#0176D3;background:#fff;box-shadow:0 0 0 4px rgba(1,118,211,.1)}
.fg input::placeholder,.fg textarea::placeholder{color:#9bb0cc}

/* footer */
.footer{background:#031f44;color:#fff;padding:72px 0 32px;position:relative;z-index:1;overflow:hidden}
.footer-orb{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,rgba(1,118,211,.4),transparent 70%);right:-160px;top:-200px}
.footer-top{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.footer-brand .logo{color:#fff}
.footer-brand p{font:400 14px/1.6 Manrope,sans-serif;color:rgba(255,255,255,.6);margin:18px 0 0;max-width:260px}
.footer-soc{display:flex;gap:11px;margin-top:22px}
.footer-soc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;text-decoration:none;transition:background .3s,transform .3s}
.footer-soc a:hover{background:#0176D3;transform:translateY(-3px)}
.footer-col h4{font:700 13px 'Space Grotesk',sans-serif;letter-spacing:.08em;color:#fff;margin:0 0 18px}
.footer-col a{display:block;font:400 14px Manrope,sans-serif;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:11px;transition:color .25s,padding-left .25s}
.footer-col a:hover{color:#7cc4ff;padding-left:5px}
.footer-div{height:1px;background:rgba(255,255,255,.1)}
.footer-bot{position:relative;display:flex;align-items:center;justify-content:space-between;padding-top:24px}
.footer-bot p{font:400 13px Manrope,sans-serif;color:rgba(255,255,255,.55);margin:0}
.footer-bot p b{color:#fff}
.footer-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(1,118,211,.2);border:1px solid rgba(124,196,255,.3);color:#9cc6ef;padding:8px 14px;border-radius:100px;font:600 12px Manrope,sans-serif}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.93);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv-s.in{opacity:1;transform:none}

@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ===== dropdown navigation ===== */
.nlink.has-dd{display:inline-flex;align-items:center;gap:6px}
.nlink.has-dd .bi{font-size:11px;transition:transform .3s}
.ndd{position:relative}
.ndd:hover .nlink.has-dd .bi{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:246px;background:#fff;border:1px solid #eaf1f9;border-radius:16px;box-shadow:0 24px 54px rgba(3,45,96,.16);padding:10px;opacity:0;visibility:hidden;transition:opacity .28s,transform .28s;z-index:60}
.ndd:hover .dd,.ndd:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(12px)}
.dd::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.dd a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;text-decoration:none;transition:background .22s}
.dd a:hover{background:#f4f9ff}
.dd-ic{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:#eaf4ff;display:flex;align-items:center;justify-content:center;color:#0176D3;font-size:15px}
.dd-tx b{display:block;font:600 13.5px Manrope,sans-serif;color:#032D60}
.dd-tx span{display:block;font:500 11.5px Manrope,sans-serif;color:#7d9bc0;margin-top:2px}
.ntoggle{width:44px;height:44px;border:1px solid #e3edf7;border-radius:12px;background:#fff;color:#0176D3;font-size:20px;cursor:pointer;align-items:center;justify-content:center}
/* wide "Services" dropdown, left-aligned under the first nav item */
.dd--wide{left:0;transform:translateX(0) translateY(10px);min-width:302px}
.ndd:hover .dd--wide,.ndd:focus-within .dd--wide{transform:translateX(0) translateY(12px)}
/* nested category flyout submenus */
.ddsub{position:relative}
.ddsub-caret{margin-left:auto;font-size:11px;color:#9bb0cc;transition:transform .25s,color .25s}
.ddsub:hover .ddsub-caret{color:#0176D3}
.ddsub:hover > .ddsub-head{background:#f4f9ff}
.ddsub-menu{position:absolute;top:-10px;left:calc(100% + 6px);min-width:256px;background:#fff;border:1px solid #eaf1f9;border-radius:16px;box-shadow:0 24px 54px rgba(3,45,96,.16);padding:10px;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .24s,transform .24s;z-index:61}
.ddsub:hover .ddsub-menu{opacity:1;visibility:visible;transform:translateX(0)}
.ddsub-menu::before{content:"";position:absolute;left:-14px;top:0;width:16px;height:100%}

/* ===== inner page hero ===== */
.phero{position:relative;padding:158px 0 66px;overflow:hidden}
.phero .sky{position:absolute;inset:0;background:linear-gradient(180deg,#d6e9ff 0%,#eaf3ff 45%,#f6faff 82%,#fff 100%);z-index:0}
.phero-in{position:relative;z-index:2;max-width:820px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font:600 13px Manrope,sans-serif;color:#7d9bc0;margin-bottom:22px}
.crumb a{color:#0176D3;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .bi{font-size:10px;color:#a9c0dc}
.phero h1{font:700 clamp(36px,5vw,64px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.025em;margin:0}
.phero-sub{font:400 clamp(16px,1.5vw,20px)/1.6 Manrope,sans-serif;color:#52688a;max-width:620px;margin:22px 0 30px}
.phero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ===== generic page section + feature grid ===== */
.psec{position:relative;padding:80px 0}
.psec--tint{background:linear-gradient(180deg,#f6faff,#fff)}
.psec-head{max-width:720px;margin:0 0 44px}
.psec-head.center{margin:0 auto 48px;text-align:center}
.psec-head h2{font:700 clamp(28px,3.4vw,44px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#032D60;margin:0}
.psec-head p{font:400 clamp(15px,1.3vw,18px)/1.65 Manrope,sans-serif;color:#52688a;margin:16px 0 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.feat{position:relative;background:#fff;border:1px solid #eaf1f9;border-radius:20px;padding:30px 28px;box-shadow:0 14px 38px rgba(3,45,96,.06);transition:transform .35s,box-shadow .35s,border-color .35s}
.feat:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(1,118,211,.14);border-color:#cfe3f7}
.feat-ic{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#0176D3,#00A1E0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:23px;box-shadow:0 12px 24px rgba(1,118,211,.28);margin-bottom:20px}
.feat h3{font:700 18px 'Space Grotesk',sans-serif;color:#032D60;margin:0 0 10px}
.feat p{font:400 14.5px/1.65 Manrope,sans-serif;color:#5d73a0;margin:0}

/* ===== two column split (overview / list) ===== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split .lead{margin-top:18px}
.split-list{list-style:none;padding:0;margin:22px 0 0}
.split-list li{display:flex;align-items:flex-start;gap:13px;margin-top:15px;font:500 15px/1.55 Manrope,sans-serif;color:#3d5a80}
.split-list li .bi{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:#eaf4ff;display:flex;align-items:center;justify-content:center;color:#0176D3;font-size:13px;margin-top:1px}
.panel{background:linear-gradient(160deg,#f6faff,#eaf4ff);border:1px solid #e1eefc;border-radius:26px;padding:34px;box-shadow:0 30px 70px rgba(3,45,96,.1)}
.panel h4{font:700 15px 'Space Grotesk',sans-serif;color:#032D60;margin:0 0 20px;display:flex;align-items:center;gap:10px}
.panel h4 .bi{color:#0176D3}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-box{background:#fff;border:1px solid #e8f1fb;border-radius:16px;padding:20px 16px;text-align:center;box-shadow:0 8px 20px rgba(3,45,96,.05)}
.stat-box b{display:block;font:700 30px 'Space Grotesk',sans-serif;color:#0176D3;line-height:1}
.stat-box span{display:block;font:600 11.5px Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7d9bc0;margin-top:8px}

/* ===== process steps ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding:26px 22px;background:#fff;border:1px solid #eaf1f9;border-radius:18px;box-shadow:0 10px 30px rgba(3,45,96,.05)}
.step-n{font:700 34px 'Space Grotesk',sans-serif;background:linear-gradient(135deg,#0176D3,#00A1E0);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.step h4{font:700 16px 'Space Grotesk',sans-serif;color:#032D60;margin:12px 0 8px}
.step p{font:400 13.5px/1.6 Manrope,sans-serif;color:#5d73a0;margin:0}

/* ===== CTA band ===== */
.cta-band{position:relative;background:linear-gradient(165deg,#032D60 0%,#0a3d7a 55%,#0176D3 120%);border-radius:32px;padding:60px 52px;overflow:hidden;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.2px);background-size:30px 30px;opacity:.6}
.cta-orb{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(80px);background:radial-gradient(circle,rgba(0,161,224,.5),transparent 70%);right:-120px;top:-140px}
.cta-band-in{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta-band h2{font:700 clamp(26px,3.2vw,40px)/1.1 'Space Grotesk',sans-serif;color:#fff;margin:0}
.cta-band p{font:400 16px/1.6 Manrope,sans-serif;color:rgba(255,255,255,.75);margin:16px 0 28px}
.cta-band .btnf{background:#fff;color:#0176D3;box-shadow:0 14px 30px rgba(0,0,0,.24)}
.cta-band .btno{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.cta-band .btno:hover{background:rgba(255,255,255,.12);border-color:#fff}
.cta-band .hero-cta{justify-content:center}

/* ===== blog ===== */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid #eaf1f9;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(3,45,96,.06);transition:transform .35s,box-shadow .35s,border-color .35s;text-decoration:none}
.bcard:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(1,118,211,.16);border-color:#cfe3f7}
.bcard-top{position:relative;height:168px;background:linear-gradient(150deg,#032D60,#0176D3);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bcard-top::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.2px);background-size:24px 24px}
.bcard-top .bi{font-size:52px;color:rgba(255,255,255,.92);position:relative}
.bcard-tag{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;padding:6px 12px;border-radius:100px;font:600 11px Manrope,sans-serif;letter-spacing:.04em;backdrop-filter:blur(4px)}
.bcard-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.bcard-meta{display:flex;align-items:center;gap:10px;font:600 12px Manrope,sans-serif;color:#7d9bc0;margin-bottom:12px}
.bcard-meta .dot{width:3px;height:3px;border-radius:50%;background:#c3d5ea}
.bcard h3{font:700 19px/1.3 'Space Grotesk',sans-serif;color:#032D60;margin:0 0 12px}
.bcard p{font:400 14.5px/1.65 Manrope,sans-serif;color:#5d73a0;margin:0 0 20px;flex:1}
.bcard-more{display:inline-flex;align-items:center;gap:8px;font:600 14px Manrope,sans-serif;color:#0176D3}
.bcard:hover .bcard-more .bi{transform:translateX(4px)}
.bcard-more .bi{transition:transform .3s}

/* ===== blog article ===== */
.post{max-width:820px;margin:0 auto}
.post-body{font:400 16.5px/1.8 Manrope,sans-serif;color:#3d5a80}
.post-body h2{font:700 clamp(22px,2.6vw,30px) 'Space Grotesk',sans-serif;color:#032D60;margin:44px 0 16px;letter-spacing:-.01em}
.post-body h3{font:700 19px 'Space Grotesk',sans-serif;color:#032D60;margin:32px 0 12px}
.post-body p{margin:0 0 18px}
.post-body a{color:#0176D3;text-decoration:none;border-bottom:1px solid rgba(1,118,211,.3)}
.post-body a:hover{border-bottom-color:#0176D3}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin-bottom:10px}
.post-body strong{color:#032D60}
.post-body blockquote{margin:24px 0;padding:14px 22px;border-left:3px solid #0176D3;background:#f4f9ff;border-radius:0 12px 12px 0;color:#52688a}
.post-body pre{background:#031f44;color:#e6f0fb;border-radius:16px;padding:24px;overflow-x:auto;margin:0 0 22px;font:400 13.5px/1.6 'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;box-shadow:0 16px 40px rgba(3,31,68,.24)}
.post-body pre code{color:inherit;background:none;padding:0;font-size:inherit}
.post-body code{background:#eaf4ff;color:#0176D3;padding:2px 7px;border-radius:6px;font:500 14px 'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace}
.post-body img{max-width:100%;border-radius:14px}
.post-note{display:flex;gap:14px;background:#f4f9ff;border:1px solid #dbeafe;border-radius:16px;padding:20px 22px;margin:24px 0}
.post-note .bi{color:#0176D3;font-size:20px;flex-shrink:0;margin-top:2px}
.post-note p{margin:0;font-size:15px;color:#52688a}
.post-back{display:inline-flex;align-items:center;gap:8px;font:600 14px Manrope,sans-serif;color:#0176D3;text-decoration:none;margin-top:40px}
.post-back .bi{transition:transform .3s}
.post-back:hover .bi{transform:translateX(-4px)}

/* ===== simple content lists (industries/case studies) ===== */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #eaf1f9;border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(3,45,96,.05);transition:transform .3s,box-shadow .3s}
.ind:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(1,118,211,.12)}
.ind-ic{width:50px;height:50px;flex-shrink:0;border-radius:14px;background:#eaf4ff;display:flex;align-items:center;justify-content:center;color:#0176D3;font-size:22px}
.ind b{display:block;font:700 15.5px 'Space Grotesk',sans-serif;color:#032D60}
.ind span{display:block;font:400 13px Manrope,sans-serif;color:#7d9bc0;margin-top:3px}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cs{position:relative;background:#fff;border:1px solid #eaf1f9;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(3,45,96,.06);transition:transform .35s,box-shadow .35s}
.cs:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(1,118,211,.14)}
.cs-top{height:120px;background:linear-gradient(150deg,#0176D3,#00A1E0);display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px}
.cs-body{padding:24px}
.cs-body .tag{font:600 11px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0176D3}
.cs-body h3{font:700 18px 'Space Grotesk',sans-serif;color:#032D60;margin:10px 0}
.cs-body p{font:400 14px/1.6 Manrope,sans-serif;color:#5d73a0;margin:0}
.cs-metrics{display:flex;gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid #eef4fb}
.cs-metrics b{font:700 20px 'Space Grotesk',sans-serif;color:#0176D3}
.cs-metrics span{font:500 11px Manrope,sans-serif;color:#7d9bc0;display:block}

/* Partner chip is decorative — only show it on wider screens with room to spare. */
@media(max-width:1080px){.nchip{display:none}}

@media(max-width:900px){
  /* nav collapses to a slide-out drawer with nested accordions */
  .nlinks{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);flex-direction:column;align-items:flex-start;gap:0;background:#fff;box-shadow:-10px 0 40px rgba(3,45,96,.14);padding:88px 22px calc(30px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);z-index:55}
  .nlinks.open{transform:none}
  /* scrim behind the drawer — dims the page and is the tap target that closes it */
  .nav::after{content:"";position:fixed;inset:0;background:rgba(3,45,96,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:54}
  .nav.menu-open::after{opacity:1;visibility:visible}
  /* the toggle doubles as the close button, so it has to sit above the drawer */
  .ntoggle{display:flex;position:relative;z-index:57}
  /* lock the page behind the drawer instead of letting it scroll away */
  body.nav-open{overflow:hidden}
  body.nav-open .progress{opacity:0}
  .drawer-cta{display:flex}
  .nlink{width:100%;font-size:15px;padding:14px 8px;border-bottom:1px solid #eef4fb;white-space:normal}
  .nlink.has-dd{justify-content:space-between}
  .ndd{width:100%}
  .dd,.dd--wide{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:0 0 6px 6px;min-width:0;max-height:0;overflow:hidden;transition:max-height .35s}
  .ndd.open .dd{max-height:2200px}
  .ndd:hover .dd,.ndd:hover .dd--wide{transform:none}
  .dd a{padding:10px 8px}
  .ddsub{border-bottom:1px solid #f1f5fa}
  .ddsub:last-child{border-bottom:none}
  .ddsub-head{cursor:pointer}
  .ddsub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 4px 12px;min-width:0;max-height:0;overflow:hidden;transition:max-height .3s}
  .ddsub.open .ddsub-menu{max-height:900px}
  .ddsub.open .ddsub-caret{transform:rotate(90deg)}
  .ddsub-menu::before{display:none}
  /* content grids */
  .hero-in,.about-grid,.sol-in,.faq-grid,.contact-grid,.split{grid-template-columns:1fr;gap:40px}
  .sgrid,.eco-stats,.feat-grid,.feat-grid.cols-2,.steps,.ind-grid,.cs-grid,.blog-grid{grid-template-columns:1fr}
  .scard-links a{padding:11px 0}
  .cloud-grid{grid-template-columns:repeat(2,1fr)}
  .sol{padding:48px 28px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .form-row{grid-template-columns:1fr}.wrap,.nav-in{padding:0 22px}
  .orbV{max-width:340px;margin-top:10px}
  .cta-band{padding:44px 26px}
  .phero{padding:130px 0 50px}
}
@media(max-width:620px){.feat-grid,.ind-grid,.cs-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr}}

/* Narrow phones: the logo + CTA + hamburger stop fitting on one row, which used
   to push the hamburger past the right edge. Tighten everything down. */
@media(max-width:420px){
  .wrap,.nav-in{padding:0 16px}
  .nav-in{gap:12px}
  .nright{gap:10px}
  .logo{gap:8px;font-size:16px;letter-spacing:.1em}
  .wing{width:22px;height:22px}
  .lg-tx i{font-size:7.5px;letter-spacing:.22em}
  .ncta{padding:10px 13px;font-size:13px;border-radius:10px}
  .ntoggle{width:42px;height:42px;font-size:19px}
  .nlinks{width:min(340px,92vw);padding-left:18px;padding-right:18px}
}
/* Below this the header CTA can't fit at all — the drawer keeps its own copy. */
@media(max-width:359px){
  .ncta{display:none}
}