:root{--red:#2d5ce0;--deep:#0d1b52;--cream:#f2f5fd;--ink:#0b1330;--line:#d8e0f7}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip} /* safety net: page never scrolls sideways */
body{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--ink)}
.r{background:var(--red);color:#fff}.l{background:var(--cream)}
section{padding:clamp(64px,9vw,120px) 5.7vw}
.in{max-width:1180px;margin:auto}
h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin-bottom:16px;max-width:18ch}
h3{font-size:1.25rem;line-height:1.25}
.sub{opacity:.85;max-width:56ch;font-size:1.05rem}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;background:#fff;color:var(--red);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.g{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4)}
.l .btn{background:var(--red);color:#fff}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:44px}
.grid>*,.split>*,.fg>*{min-width:0}
.card{border-radius:24px;padding:28px;background:#fff;border:1px solid var(--line);display:block}
.r .card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.card p{margin-top:10px;opacity:.85}
.card .more{margin-top:14px}
.more{display:inline-block;margin-top:16px;font-weight:600;color:var(--red)}

/* nav (pill from design) */
#nav{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:50;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;color:#fff;transition:background .3s;max-width:calc(100vw - 16px)}
#nav.s{background:rgba(13,27,82,.92)}
#menu{display:flex;align-items:center;gap:6px;padding:0 14px;height:56px}
#menu>a,.dd>a{padding:8px 16px;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;font-weight:500;white-space:nowrap}
#menu a:hover{opacity:.75}
#menu .cta{background:#fff;color:var(--red);border-radius:999px;font-weight:700;font-size:.85rem;margin-left:6px}
.dd{position:relative}
.dd .drop{display:none;position:absolute;top:100%;left:-10px;padding-top:14px;min-width:270px}
.dd:hover .drop,.dd:focus-within .drop{display:block}
.drop div{background:var(--deep);border-radius:20px;padding:10px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.drop a{display:block;padding:10px 14px;border-radius:12px;font-size:.95rem}
.drop a:hover{background:rgba(255,255,255,.12)}
.drop small{display:block;opacity:.7;font-size:.78rem}
.top{display:none}
#bt{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;padding:0 16px}

/* mega menu (Services): single consolidated block */
.dd.mega{position:relative}
.dd.mega .drop{display:none;position:absolute;top:100%;left:0;transform:none;padding-top:14px;width:min(940px,92vw);max-width:calc(100vw - 32px)}
.dd.mega:hover .drop,.dd.mega:focus-within .drop{display:block}
.dd.mega .drop>div,.megagrid{display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:18px;background:var(--deep);border-radius:24px;padding:22px;box-shadow:0 20px 40px rgba(0,0,0,.25);overflow:hidden}
.megacol{padding:26px 22px;display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(255,255,255,.1)}
.megacol:last-child{border-right:none}
.megacol .colhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.55;font-weight:700;margin-bottom:12px}
.megacol a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:.93rem;font-weight:500;white-space:normal}
.megacol a .ic{font-size:1rem;flex:0 0 auto}
.megacol a em{display:inline-block;margin-left:8px;background:var(--red);color:#fff;font-style:normal;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.megacol a:hover{background:rgba(255,255,255,.12);transform:translateX(2px)}
.megacol.promo{background:rgba(255,255,255,.05);justify-content:center;border-radius:16px;padding:14px}
.megacol.promo p{font-size:.85rem;opacity:.75;margin:4px 0 16px;line-height:1.4}
.megacol.promo .cta{display:inline-block;background:#fff;color:var(--red);padding:11px 20px;border-radius:999px;font-weight:700;font-size:.85rem;text-align:center}

@media(max-width:960px){
 #nav{width:calc(100% - 28px);max-width:none;top:14px;display:flex;justify-content:space-between;align-items:center;height:54px}
 .top{display:block;padding-left:22px;font-weight:800;font-size:1.1rem}
 #bt{display:block}
 #menu{display:none;position:fixed;inset:80px 14px auto;flex-direction:column;align-items:stretch;height:auto;max-height:calc(100svh - 96px);overflow:auto;background:var(--deep);border-radius:24px;padding:14px;gap:2px}
 #menu.o{display:flex}
 .dd .drop{display:block;position:static;padding:0}.drop div{background:none;box-shadow:none;padding:0 0 0 12px}
 #menu .cta{margin:8px 0 0;text-align:center;padding:14px}
 .dd.mega .drop{position:static;transform:none;width:auto;max-width:none;padding-top:0}
 .dd.mega .drop>div,.megagrid{display:flex;flex-direction:column;background:none;box-shadow:none;border-radius:0;padding:0 0 0 12px;gap:14px}
 .megacol{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:16px 0 16px 12px}
 .megacol:last-child{border-bottom:none}
 .megacol.promo{background:none;padding:0}
}

/* hero */
#hero{position:relative;height:100svh;min-height:560px;padding:0;overflow:hidden;background:var(--red)}
#c{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
#hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,27,82,.5),transparent 55%);pointer-events:none}
.ht{position:absolute;z-index:2;left:5.7vw;bottom:6vh;right:5.7vw}
.ht p.a{font-size:1.1rem;text-shadow:-1.5px 0 rgba(0,229,255,.8),1.5px 0 rgba(255,43,214,.8),0 2px 12px rgba(0,0,0,.55)}
.ht h1 .a{display:block;font-size:1.1rem;font-weight:500;letter-spacing:0;line-height:1.4;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.ht h1{font-size:clamp(3rem,min(7vw,14svh),7rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:6px 0 10px;text-shadow:-.03em 0 rgba(0,229,255,.75),.03em 0 rgba(255,43,214,.75),0 4px 30px rgba(13,27,82,.4)}
.ht p.t{font-size:clamp(1.05rem,1.5vw,1.35rem);text-shadow:-1.5px 0 rgba(0,229,255,.8),1.5px 0 rgba(255,43,214,.8),0 2px 12px rgba(0,0,0,.55)}
.ht p.d{max-width:62ch;margin-top:6px;font-size:clamp(.9rem,2.2svh,1.02rem);opacity:.92;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.ht .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}


/* hero speech bubble */
#say{position:absolute;z-index:3;left:50%;top:30%;width:max-content;max-width:min(270px,72vw);padding:11px 18px;border-radius:20px;background:#fff;color:var(--ink);font-weight:600;font-size:.98rem;line-height:1.35;text-align:center;box-shadow:0 14px 34px rgba(13,27,82,.35);opacity:0;transform:translate(-50%,-100%) translateY(8px) scale(.95);transition:opacity .25s,transform .25s;pointer-events:none}
#say.on{opacity:1;transform:translate(-50%,-100%) translateY(-6px) scale(1)}
#say:after{content:"";position:absolute;left:50%;bottom:-7px;width:16px;height:16px;background:#fff;border-radius:3px;transform:translateX(-50%) rotate(45deg)}

@media(max-width:700px){
 #hero:after{background:linear-gradient(0deg,rgba(13,27,82,.85) 20%,rgba(13,27,82,.35) 55%,transparent 75%)}
 .ht{bottom:6vh}
 .ht .btn{padding:12px 22px}
}
@media(max-height:680px){.ht p.d{display:none}}

/* sections */
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:32px}
.stats b{display:block;font-size:2.4rem;font-weight:800;color:var(--red);line-height:1}
.stats span{font-size:.95rem;opacity:.75}
.split{display:grid;gap:56px;grid-template-columns:1.1fr 1fr;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}
.badge{display:inline-block;border:1px solid var(--red);color:var(--red);border-radius:999px;padding:6px 16px;font-size:.9rem;font-weight:600;margin-bottom:20px}
.serp{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 30px 60px rgba(13,27,82,.18);position:relative}
.serp .q{border:1px solid #ddd;border-radius:999px;padding:10px 18px;color:#444}
.serp .tabs{font-size:.8rem;color:#777;margin:12px 0}
.serp .res{border-left:4px solid var(--red);padding:8px 14px;background:var(--cream);border-radius:0 14px 14px 0}
.serp .res span{color:#777;font-size:.9rem;display:block}
.serp .acts{display:flex;gap:8px;margin-top:10px;font-size:.85rem;flex-wrap:wrap}.acts i{font-style:normal;border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.serp .pop{position:absolute;right:-10px;bottom:-22px;background:var(--red);color:#fff;border-radius:18px;padding:12px 20px;font-weight:800}
@media(max-width:600px){.serp .pop{right:10px;bottom:-20px}}
.big{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;line-height:1}
.chart{margin-top:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:24px}
.chart svg{width:100%;height:auto}
.step img{width:72px;height:72px;object-fit:contain;margin-bottom:14px}
.step .n{position:absolute;top:22px;right:26px;font-size:2.2rem;font-weight:800;color:var(--red);opacity:.35}
.step{position:relative}
.case b{display:block;font-size:2rem;font-weight:800;line-height:1.1}
.case .m{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}.case .m div{flex:1 1 90px;font-size:.85rem}
.case q{display:block;margin-top:12px;font-style:italic;quotes:none}
.founder img{width:100%;max-width:440px;border-radius:32px;aspect-ratio:4/5;object-fit:cover;background:var(--line)}
.founder blockquote{border-left:4px solid var(--red);padding-left:18px;margin:22px 0;font-size:1.2rem;font-weight:600}
.vals{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin:24px 0}
.vals p{font-size:.95rem}.vals strong{display:block}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--red);font-size:1.5rem;line-height:1}
details[open] summary:after{content:"–"}
details p{margin-top:12px;max-width:70ch;opacity:.85}
.contact a.big{display:block;margin:6px 0;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips a{border:1px solid var(--red);color:var(--red);border-radius:999px;padding:9px 20px;font-weight:600;transition:background .2s,color .2s}
.chips a:hover{background:var(--red);color:#fff}
footer{background:var(--ink);color:#f3d9d0;padding:64px 5.7vw 28px}
.fg{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr .9fr .9fr 1.1fr;max-width:1300px;margin:auto}
@media(max-width:960px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fg{grid-template-columns:1fr}}
footer h4{color:#fff;margin-bottom:12px}footer li{list-style:none;margin:6px 0;font-size:.95rem}footer ul{padding:0}
footer a,footer p,footer li{overflow-wrap:anywhere}
footer a:hover{color:#fff}
.legal{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}#say{transition:none}}

/* client review strips (two marquees) */
.r .badge{color:#fff;border-color:rgba(255,255,255,.7)}
.rev{padding-left:0;padding-right:0;overflow:hidden}
.rev .in{padding:0 5.7vw}
.rev-rows{display:grid;gap:16px;margin-top:40px}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:16px;width:max-content;will-change:transform}
.marq.rl .track{animation:rl 70s linear infinite}
.marq.lr .track{animation:lr 80s linear infinite}
.marq:hover .track,.marq:focus-within .track{animation-play-state:paused}
@keyframes rl{to{transform:translateX(calc(-50% - 8px))}}
@keyframes lr{from{transform:translateX(calc(-50% - 8px))}to{transform:translateX(0)}}
.rc{flex:none;width:250px;margin:0;padding:18px 20px;border-radius:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;gap:10px}
.rc.m{width:340px}
.rc .ch{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#fff;color:var(--red)}
.rc.wa .ch{background:#d9fdd3;color:#075e54}
.rc.ig .ch{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff}
.rc blockquote{margin:0}
.rc p{font-size:.98rem;line-height:1.45;font-weight:500}
.rc.m p{font-size:1.02rem}
.rc figcaption{font-size:.82rem;opacity:.75;margin-top:auto}
@media(max-width:600px){.rc{width:220px}.rc.m{width:290px}}
@media(prefers-reduced-motion:reduce){.marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.rc[aria-hidden="true"]{display:none}}
.ht p.d{font-size:clamp(.95rem,1.2vw,1.1rem);max-width:52ch;opacity:.9;margin-top:10px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chips a{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:.9rem;background:#fff}
.chips a:hover{background:var(--red);color:#fff;border-color:var(--red)}

.rev{overflow:hidden}
.rev-rows{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq .track{display:flex;gap:18px;width:max-content;animation:scrollL 70s linear infinite}
.marq.lr .track{animation-name:scrollR}
.marq:hover .track{animation-play-state:paused}
@keyframes scrollL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.rc{flex:0 0 300px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:20px}
.rc .ch{font-size:.75rem;opacity:.7;display:block;margin-bottom:10px}
.rc blockquote{margin:0;font-size:.95rem;line-height:1.5}
.rc figcaption{margin-top:12px;font-size:.82rem;opacity:.65}

#waFixed{position:fixed;right:18px;bottom:18px;z-index:45;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.3)}
#waFixed svg{width:60%;height:60%}
#waFixed:hover{transform:scale(1.08)}

/* glitch heading */
.glitch span{position:relative;display:inline-block;animation:gls 5s infinite steps(1)}
.glitch span::before,.glitch span::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.glitch span::before{color:#00e5ff;animation:gl1 5s infinite steps(1)}
.glitch span::after{color:#ff2bd6;animation:gl2 5s infinite steps(1)}
@keyframes gls{0%,90%,100%{transform:none}92%{transform:translate(2px,-1px) skewX(-4deg)}94%{transform:translate(-3px,1px)}96%{transform:translate(1px,0) skewX(3deg)}}
@keyframes gl1{0%,90%,100%{opacity:0}91%{opacity:.9;clip-path:inset(10% 0 60% 0);transform:translate(-4px,0)}93%{opacity:.9;clip-path:inset(55% 0 15% 0);transform:translate(3px,0)}95%{opacity:.9;clip-path:inset(30% 0 40% 0);transform:translate(-2px,0)}97%{opacity:.9;clip-path:inset(75% 0 5% 0);transform:translate(4px,0)}}
@keyframes gl2{0%,90%,100%{opacity:0}92%{opacity:.9;clip-path:inset(60% 0 10% 0);transform:translate(4px,0)}94%{opacity:.9;clip-path:inset(15% 0 55% 0);transform:translate(-3px,0)}96%{opacity:.9;clip-path:inset(45% 0 30% 0);transform:translate(3px,0)}98%{opacity:.9;clip-path:inset(5% 0 80% 0);transform:translate(-4px,0)}}

.ht p.a,.ht p.t{animation:gltext 5s infinite steps(1)}
@keyframes gltext{
0%,90%,100%{text-shadow:-1.5px 0 rgba(0,229,255,.8),1.5px 0 rgba(255,43,214,.8),0 2px 12px rgba(0,0,0,.55)}
92%{text-shadow:-4px 0 #00e5ff,4px 0 #ff2bd6,0 2px 12px rgba(0,0,0,.55)}
94%{text-shadow:3px 0 #00e5ff,-3px 0 #ff2bd6,0 2px 12px rgba(0,0,0,.55)}
96%{text-shadow:-2px 1px #00e5ff,2px -1px #ff2bd6,0 2px 12px rgba(0,0,0,.55)}}

h1,h2,h3,
.ht p.a,.ht p.t,
#menu>a,.dd>a,.megacol a,
.btn,
.badge,
footer h4,
.rc .ch{
  animation:gltext 5s infinite steps(1)
}

/* ── remove the main site's glitch effect on this page only ── */
h1,h2,h3,
.btn,.badge,
#menu>a,.dd>a,.megacol a,
footer h4,.rc .ch,
.glitch span,.glitch span::before,.glitch span::after{
  animation:none!important;
}
.glitch span::before,.glitch span::after{display:none!important}