:root{
 --bg:#ffffff;--soft:#f5f8fd;--soft2:#eef3fb;--ink:#101a2b;--ink2:#20304a;--muted:#556377;--muted2:#8593a7;
 --line:#e8eef6;--line2:#d9e3ef;--blue:#2e6be6;--blue-d:#1f52bd;--teal:#0e9c8a;--navy:#0d1728;
 --grad:linear-gradient(100deg,#2e6be6,#0e9c8a);--grad-soft:linear-gradient(120deg,#eaf1ff,#e6fbf6);
 --shadow-s:0 6px 18px -10px rgba(20,42,80,.22);--shadow:0 20px 44px -22px rgba(20,42,80,.28);--shadow-l:0 34px 70px -30px rgba(20,42,80,.34);
 --radius:16px;--maxw:1400px;--fd:"Sora",sans-serif;--fb:"Plus Jakarta Sans",sans-serif;--fm:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.64;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink)}
p{margin:0}
/* Two measures on purpose. --maxw is the *layout* width: hero, grids, cards,
   header and footer. Reading sections override it inline with 760-940px,
   because prose at 1400px is an unreadable line length — 45 of the 152 .wrap
   uses do that, and widening the shell must never widen those.
   At 1180 the page filled 63% of a 1900px window with 353px dead on each side. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--fm);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);background:var(--soft);padding:7px 13px;border-radius:999px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap;font-family:var(--fb)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(46,107,230,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(46,107,230,.8)}
.btn-ghost{background:#fff;border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{background:var(--soft);transform:translateY(-2px)}
.section{padding:84px 0;position:relative}
.section.soft{background:var(--soft)}
.h2{font-size:clamp(28px,3.9vw,42px)}
.lead{color:var(--muted);font-size:18px;max-width:640px}
.shead{max-width:680px;margin-bottom:44px}.shead.ctr{margin:0 auto 44px;text-align:center}
.shead .h2{margin-top:12px}.shead p{margin-top:12px}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}
@keyframes floatp{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.floatimg{animation:floaty 6s ease-in-out infinite;filter:drop-shadow(0 24px 30px rgba(20,42,80,.24))}
.topbar{background:var(--navy);color:#c8d6ec;font-size:13px}
.topbar-in{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.topbar a{color:#dbe6f5;display:inline-flex;align-items:center;gap:7px}
.topbar a svg{width:14px;height:14px;color:#7fe3d3}
.topbar .r{display:flex;gap:20px;align-items:center}
.topbar .r .muted{color:#8ea3c2}
@media(max-width:760px){.topbar .r{display:none}}
.hdr{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{flex:none;display:flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.brand img{width:32px;height:32px}
/* Full lockup: sized by height so the wordmark keeps its proportions. */
.brand .logo{flex:none;width:auto;height:42px;display:block}
/* The wordmark is 3.45:1, so height drives width: 42px reads as 145px across.
   Between 981px and 1080px the full nav and all three CTAs are still on the bar,
   and that is the only place it does not fit — hold the old height there. */
@media(max-width:1080px){.brand .logo{height:34px}}
@media(max-width:980px){.brand .logo{height:38px}}
@media(max-width:600px){.brand .logo{height:32px}}
footer .brand .logo{height:40px}
.brand .go{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;align-items:center;gap:4px}
.nav>a,.nav .drop>button{font-family:var(--fb);font-size:15px;font-weight:600;color:var(--ink2);background:none;border:0;cursor:pointer;padding:10px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.nav>a:hover,.nav .drop>button:hover,.nav>a.active,.nav .drop:hover>button{color:var(--blue);background:var(--soft)}
.nav .drop{position:relative}
.nav .drop>button svg{width:15px;height:15px;transition:.2s}.nav .drop:hover>button svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);width:720px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-l);padding:14px;opacity:0;visibility:hidden;transition:.2s;display:grid;grid-template-columns:1.15fr 1fr;gap:10px}
.nav .drop:hover .mega,.nav .drop:focus-within .mega,.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mega-main{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px}
.m-feat{display:flex;gap:12px;align-items:flex-start;padding:6px 6px 12px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.m-feat .mi{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--blue);border:1px solid var(--line2);box-shadow:var(--shadow-s)}
.m-feat .mi svg{width:21px;height:21px}
.m-feat h5{font-size:15.5px}.m-feat p{font-size:12.6px;color:var(--muted);margin-top:2px;line-height:1.4}
.m-subs{display:grid;grid-template-columns:1fr;gap:2px}
.m-sub{display:flex;gap:10px;align-items:center;padding:8px;border-radius:9px;transition:.16s}
.m-sub:hover{background:#fff}
.m-sub .si{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#fff;color:var(--teal);border:1px solid var(--line2)}
.m-sub .si svg{width:15px;height:15px}
.m-sub b{font-family:var(--fd);font-weight:600;font-size:13.6px;color:var(--ink)}
.m-sub i{display:block;font-style:normal;font-size:11.5px;color:var(--muted2)}
.mega-side{display:flex;flex-direction:column;gap:2px}
.m-row{display:flex;gap:11px;align-items:flex-start;padding:11px;border-radius:12px;transition:.16s}
.m-row:hover{background:var(--soft)}
.m-row .mi{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--soft2);color:var(--blue);border:1px solid var(--line)}
.m-row .mi svg{width:20px;height:20px}
.m-row h5{font-size:14.5px}.m-row p{font-size:12.2px;color:var(--muted);margin-top:2px;line-height:1.4}
.hdr-cta{display:flex;align-items:center;gap:10px}
.signin{font-size:14.5px;font-weight:600;color:var(--ink2);padding:8px 10px;border-radius:9px;border:1px solid var(--line2);background:#fff}
.signin:hover{color:var(--blue);border-color:var(--blue)}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:10px;width:44px;height:40px;font-size:20px;cursor:pointer;color:var(--ink)}
/* Only ever shown inside the mobile menu — see the 980px block below. */
.m-nav-extra{display:none}
/* 981–1080px is the one band where the full nav, all three CTAs and the brand
   share the bar. The brand no longer shrinks to absorb the overflow, so buy the
   room back from the nav padding instead. */
@media(max-width:1080px){
 .nav>a,.nav .drop>button{padding-left:8px;padding-right:8px}
 .hdr-cta{gap:8px}
}
@media(max-width:980px){
 /* The burger is the only way into the menu on small screens, so it has to show. */
 .burger{display:inline-flex;align-items:center;justify-content:center}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px 18px;gap:2px;box-shadow:var(--shadow);max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
 .nav.open{display:flex}.nav .drop{width:100%}.nav .drop>button{width:100%;justify-content:space-between}
 .nav>a,.nav .drop>button{padding:13px 12px;font-size:16px;border-radius:10px}
 .mega{position:static;transform:none;width:100%;grid-template-columns:1fr;box-shadow:none;border:0;padding:4px 0;opacity:1;visibility:visible;display:none}
 .mega.open{display:grid}
 /* Sign in and Book a call used to be hidden with no replacement — they now
    move into the menu instead of disappearing. */
 .hdr-cta .btn-ghost,.signin{display:none}
 .nav .m-nav-extra{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
 .nav .m-nav-extra .btn{width:100%;justify-content:center}
 .hdr-in{position:relative}
 .hdr-cta .btn-primary{padding:10px 14px;font-size:14px}
}
@media(max-width:600px){
 /* Keep the bar to logo + one action + burger so nothing spills off-screen. */
 .hdr-cta .btn-primary{display:none}
 .brand{font-size:19px}
 .hdr-in{gap:8px}
}
/* Animated hero chart.
   The line draws itself, the area fades in behind it, then the marker settles
   with one slow ring. It runs once on load rather than looping — a hero that
   keeps moving competes with the headline for attention, and the point is to
   be read.

   pathLength="1" on the path normalises its length, so the dash animation
   works without anyone measuring the curve. Bars use transform-box:fill-box so
   scaleY grows them from their own baseline rather than the SVG origin. */
@keyframes h-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes h-in{from{opacity:0}to{opacity:1}}
@keyframes h-rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes h-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.h-line{stroke-dasharray:1;stroke-dashoffset:1;animation:h-draw 1.7s .3s cubic-bezier(.35,0,.2,1) forwards}
.h-area{opacity:0;animation:h-in 1s 1.35s ease forwards}
.h-dot{opacity:0;animation:h-in .45s 1.75s ease forwards}
.h-ring{opacity:0;transform-box:fill-box;transform-origin:center;animation:h-ping 2.8s 2.1s ease-out 2}
.h-bar{transform-box:fill-box;transform-origin:bottom;animation:h-rise .8s cubic-bezier(.3,0,.2,1) backwards}
.h-bar:nth-child(1){animation-delay:.5s}
.h-bar:nth-child(2){animation-delay:.62s}
.h-bar:nth-child(3){animation-delay:.74s}
/* Anyone who has asked the OS for less motion gets the finished state, not a
   faster version of the same movement. */
@media(prefers-reduced-motion:reduce){
 .h-line,.h-area,.h-dot,.h-ring,.h-bar{animation:none}
 .h-line{stroke-dashoffset:0}
 .h-area,.h-dot{opacity:1}
 .h-ring{opacity:0}
 .h-bar{transform:none}
}
.hero{position:relative;overflow:hidden;padding:74px 0 66px;background:linear-gradient(180deg,var(--soft),#fff)}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(34px,5.2vw,58px);font-weight:800}
.hero .sub{margin-top:20px;color:var(--muted);font-size:19px;max-width:540px}
.hero-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.chips{margin-top:28px;display:flex;gap:24px;flex-wrap:wrap}
.chips .n{font-family:var(--fd);font-weight:700;font-size:21px}.chips .l{font-size:12.5px;color:var(--muted2)}
.stars{color:#f5a524;letter-spacing:1px}
@media(max-width:980px){.hero-in{grid-template-columns:1fr;gap:36px}}
.hviz{position:relative;height:440px}
.hviz .blob{position:absolute;border-radius:50%;filter:blur(46px);z-index:0}
.hviz .b1{width:320px;height:320px;background:radial-gradient(circle,#c9dcff,transparent 66%);top:-10px;right:0;opacity:.75}
.hviz .b2{width:260px;height:260px;background:radial-gradient(circle,#bff0e7,transparent 66%);bottom:0;left:-10px;opacity:.7}
.hviz .card{position:absolute;inset:0;background:linear-gradient(150deg,#fff,var(--soft));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-l);overflow:hidden}
.hviz .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:42px 42px;opacity:.6}
.badge{position:absolute;z-index:5;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;padding:11px 14px;animation:floaty 5s ease-in-out infinite}
.badge .bi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--grad)}
.badge .bi svg{width:18px;height:18px}
.badge .t{font-size:11.5px;color:var(--muted2)}.badge .v{font-family:var(--fd);font-weight:700;font-size:15px}
.badge.top{top:18px;left:20px;animation-delay:.3s}
.chartcard{position:absolute;left:14px;bottom:16px;width:290px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-l);padding:15px 16px 10px;z-index:4;animation:floaty 6.5s ease-in-out infinite;animation-delay:1s}
.chartcard .top{display:flex;justify-content:space-between;align-items:center}
.chartcard .top .h{font-family:var(--fd);font-weight:700;font-size:15px}
.chartcard .up{color:var(--teal);font-weight:600;font-size:12.5px}
.chartcard .pill{font-size:10.5px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:3px 8px}
.chartcard svg{display:block;margin-top:6px}
.trust{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.trust .tb{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 18px 11px 12px;box-shadow:var(--shadow)}
.trust .tb .ti{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--grad-soft);color:var(--teal);border:1px solid var(--line);flex:none}
.trust .tb .ti svg{width:17px;height:17px}
.trust .tb.hot{border-color:rgba(46,107,230,.32);background:linear-gradient(120deg,#eef4ff,#eafaf6)}
.brandmq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brandmq .track{display:flex;gap:52px;align-items:center;width:max-content;animation:mqx 30s linear infinite}
.brandmq img{height:30px;opacity:.55;filter:grayscale(1);transition:.2s}
.brandmq img:hover{opacity:1;filter:none}
@keyframes mqx{to{transform:translateX(-50%)}}
@keyframes mqy{to{transform:translateY(-50%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-s);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--grad)}
.stat .n{font-family:var(--fd);font-weight:800;font-size:clamp(28px,3.5vw,40px)}
.stat .l{color:var(--muted);font-size:14px;margin-top:5px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.svc4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc4{grid-template-columns:1fr}}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-s);transition:.26s;display:block}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line2)}
.scard .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;background:var(--grad-soft);color:var(--blue);border:1px solid var(--line)}
.scard .ic svg{width:24px;height:24px}
.scard h3{font-size:20px}.scard p{color:var(--muted);font-size:14.6px;margin-top:8px}
.scard .more{margin-top:14px;font-size:13.6px;color:var(--blue);font-weight:600;display:inline-flex;gap:6px}
@media(max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.svc{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.seo-mock{position:relative;background:linear-gradient(150deg,#fff,var(--soft));border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-l);padding:22px;min-height:360px}
.seo-mock .bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font-size:12px;color:var(--muted2)}
.seo-mock .bar svg{width:15px;height:15px;color:var(--muted2)}
.seo-mock .rescount{font-size:11px;color:var(--muted2);margin:12px 2px 8px}
.seo-mock .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seo-mock .tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;height:110px;display:flex;flex-direction:column;gap:7px}
.seo-mock .tile .img{flex:1;background:var(--soft2);border-radius:6px}
.seo-mock .tile .l1{height:7px;width:80%;background:var(--soft2);border-radius:4px}
.seo-mock .tile .l2{height:7px;width:55%;background:var(--soft2);border-radius:4px}
.seo-mock .tile.hi{border:1.5px solid var(--blue);box-shadow:0 10px 22px -12px rgba(46,107,230,.5)}
.seo-mock .tile.hi .img{background:linear-gradient(135deg,#cfe0ff,#c7f2ea)}
.seo-mock .tile .st{color:#f5a524;font-size:11px;letter-spacing:1px}
.seo-mock .prod{position:absolute;right:-16px;top:-18px;width:172px;z-index:3}
.seo-mock .revcard{position:absolute;left:8px;bottom:-16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;z-index:4}
.seo-mock .revcard .st{color:#f5a524;font-size:12px;letter-spacing:1px}
.seo-mock .revcard .r{font-size:11.5px;color:var(--muted);margin-top:2px}
.flist{margin-top:10px}
.flist .fi{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}
.flist .fi:first-child{border-top:0}
.flist .fi .ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--grad-soft);color:var(--blue);border:1px solid var(--line);display:grid;place-items:center}
.flist .fi .ic svg{width:21px;height:21px}
.flist .fi b{font-family:var(--fd);font-size:16px}.flist .fi p{color:var(--muted);font-size:14px;margin-top:2px}
.ps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ps .box{border-radius:var(--radius);padding:30px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-s)}
.ps .prob{background:linear-gradient(160deg,#fff5f3,#fff)}
.ps .sol{background:linear-gradient(160deg,#effbf8,#fff)}
.ps h3{font-size:21px;margin-bottom:12px}.ps ul{margin:0;padding:0;list-style:none}
.ps li{padding:10px 0 10px 28px;position:relative;color:var(--muted);border-top:1px solid var(--line)}
.ps li:first-child{border-top:0}
.ps .prob li::before{content:"✕";position:absolute;left:0;color:#dc6a58;font-weight:700}
.ps .sol li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
@media(max-width:760px){.ps{grid-template-columns:1fr}}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;display:flex;flex-direction:column;transition:.24s}
.case:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.case .top{padding:24px 24px 0}.case .cat{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.case .big{font-family:var(--fd);font-weight:800;font-size:38px;margin:12px 0 2px}
.case h3{font-size:17px;margin-top:10px}.case p{color:var(--muted);font-size:14px;margin-top:7px}
.case .bar{margin-top:auto;padding:16px 24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--blue);font-weight:600;display:flex;justify-content:space-between}
@media(max-width:900px){.cases{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-s)}
.step .no{font-family:var(--fm);font-size:12.5px;color:var(--blue);letter-spacing:.1em}
.step h3{font-size:18px;margin:11px 0 7px}.step p{color:var(--muted);font-size:13.8px}
@media(max-width:900px){.proc{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.proc{grid-template-columns:1fr}}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pitem{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s);transition:.24s}
.pitem:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line2)}
.pitem .thumb{position:relative;overflow:hidden;background:var(--soft)}
.pitem .thumb img{width:100%;height:auto;display:block;transition:.4s}
.pitem:hover .thumb img{transform:scale(1.04)}
.pitem .thumb .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,23,40,.72));opacity:0;transition:.26s;display:flex;align-items:flex-end;justify-content:center;padding:14px}
.pitem:hover .thumb .ov{opacity:1}
.pitem .thumb .ov span{color:#fff;font-size:12.5px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.pitem .cap{padding:13px 15px 15px}
.pitem .cap .nm{font-family:var(--fd);font-weight:600;font-size:14.5px;color:var(--ink)}
.pitem .cap .sb{font-size:12px;color:var(--blue);margin-top:3px;font-weight:600}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-s);transition:.24s;display:block}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cat .catimg{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--soft);border:1px solid var(--line)}
.cat .catimg img{width:100%;height:100%;object-fit:cover;transition:.4s}
.cat:hover .catimg img{transform:scale(1.05)}
.cat .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--grad-soft);color:var(--blue);border:1px solid var(--line)}
.cat .ic svg{width:22px;height:22px}
.cat h3{font-size:21px}.cat p{color:var(--muted);margin-top:7px;font-size:14.6px}
.cat .more{margin-top:14px;font-size:14px;color:var(--blue);font-weight:600;display:inline-flex;gap:6px}
@media(max-width:760px){.cats{grid-template-columns:1fr}}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.tgrid.four{grid-template-columns:repeat(4,1fr)}
.tmem{text-align:center}
.tmem .ring{width:118px;height:118px;margin:0 auto 14px;border-radius:50%;padding:4px;background:var(--grad);box-shadow:var(--shadow-s)}
.tmem .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;background:var(--soft2)}
.tmem .nm{font-family:var(--fd);font-weight:700;font-size:15.5px}
.tmem .rl{color:var(--blue);font-size:12.3px;font-weight:600;margin-top:3px}
.tmem .tl{color:var(--muted);font-size:12.3px;margin-top:4px}
@media(max-width:980px){.tgrid,.tgrid.four{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tgrid,.tgrid.four{grid-template-columns:repeat(2,1fr)}}
.teambig{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tbcard{text-align:center}
.tbcard .photo{width:100%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--soft2);animation:floatp 7s ease-in-out infinite}
.tbcard .photo img{width:100%;height:100%;object-fit:cover;transition:.4s}
.tbcard:hover .photo img{transform:scale(1.05)}
.tbcard .nm{font-family:var(--fd);font-weight:700;font-size:18px;margin-top:16px}
.tbcard .rl{color:var(--blue);font-size:13px;font-weight:600;margin-top:3px}
.tbcard .bio{color:var(--muted);font-size:14px;margin-top:10px;text-align:left}
@media(max-width:900px){.teambig{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.teambig{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feat .f{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-s)}
.feat .f .ic{flex:none;width:32px;height:32px;border-radius:8px;background:rgba(14,156,138,.12);color:var(--teal);display:grid;place-items:center}
.feat .f .ic svg{width:17px;height:17px}
.feat .f b{display:block;font-family:var(--fd);font-size:15.5px}.feat .f span{color:var(--muted);font-size:13.5px}
@media(max-width:700px){.feat{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.why ul{list-style:none;margin:20px 0 0;padding:0}
.why li{padding:13px 0 13px 34px;position:relative;border-top:1px solid var(--line);color:var(--ink2);font-weight:500}
.why li::before{content:"✓";position:absolute;left:6px;top:12px;color:var(--teal);font-weight:800}
.avail{background:linear-gradient(160deg,#0d1728,#173a6b);color:#fff;border-radius:20px;padding:32px;box-shadow:var(--shadow-l)}
.avail .cap{font-family:var(--fm);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#ffcf7a}
.avail .big{font-family:var(--fd);font-weight:800;font-size:26px;margin:10px 0 6px;color:#fff}
.avail p{color:#c7d5ea;font-size:14.5px}
.avail .roi{display:flex;gap:18px;margin:20px 0;flex-wrap:wrap}
.avail .roi .rn{font-family:var(--fd);font-weight:800;font-size:24px;color:#7fe3d3}
.avail .roi .rl{font-size:12px;color:#c7d5ea}
@media(max-width:820px){.why{grid-template-columns:1fr}}
.tst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-s)}
.quote p{font-size:15px;margin-top:10px}
.quote .who{margin-top:18px;display:flex;align-items:center;gap:11px}
.quote .av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700}
.quote .nm{font-weight:700;font-size:14px}.quote .rl{font-size:12px;color:var(--muted2)}
.quote .storebtn{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue);border:1px solid var(--line2);border-radius:10px;padding:8px 14px;transition:.18s}
.quote .storebtn:hover{background:var(--soft);transform:translateY(-1px)}
.quote .storebtn svg{width:14px;height:14px}
@media(max-width:900px){.tst{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.ctaband{position:relative;overflow:hidden;border-radius:26px;padding:58px 40px;text-align:center;background:linear-gradient(135deg,#0d1728,#173a6b);color:#fff;box-shadow:var(--shadow-l)}
.ctaband .blob{position:absolute;filter:blur(70px);opacity:.5;border-radius:50%}
.ctaband .cb1{width:340px;height:340px;background:radial-gradient(circle,#2e6be6,transparent 60%);top:-130px;left:-50px}
.ctaband .cb2{width:320px;height:320px;background:radial-gradient(circle,#0e9c8a,transparent 60%);bottom:-140px;right:-40px;opacity:.45}
.ctaband h2{position:relative;color:#fff;font-size:clamp(28px,4.1vw,42px)}
.ctaband p{position:relative;color:#c7d5ea;max-width:520px;margin:15px auto 0}
.ctaband .row{position:relative;margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ctaband .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.ctaband .btn-ghost:hover{background:rgba(255,255,255,.18)}
.cwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px}
.cinfo .row{display:flex;gap:13px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.cinfo .row:first-child{border-top:0}
.cinfo .ic{width:42px;height:42px;border-radius:11px;background:var(--grad-soft);color:var(--blue);display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.cinfo .ic svg{width:20px;height:20px}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-s)}
.form label{font-size:13px;font-weight:600;color:var(--ink2);display:block;margin:12px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;font-family:var(--fb);font-size:15px;background:var(--soft);color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.cwrap{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}}
footer{background:var(--navy);color:#c7d5ea;padding:58px 0 26px}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:30px}
.foot .brand{color:#fff}.foot .brand .go{color:#7fe3d3;-webkit-text-fill-color:#7fe3d3}
.foot .about{color:#9fb2ce;font-size:14.2px;max-width:300px;margin-top:14px}
.foot h4{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7f93b3;margin-bottom:12px;font-weight:500}
.foot a{color:#b8c7de;font-size:14.2px;transition:.18s}.foot a:hover{color:#fff}
.foot .col a{display:block;padding:5px 0}
.foot .cta-row{display:flex;gap:11px;align-items:flex-start;padding:7px 0;color:#b8c7de;font-size:14px}
.foot .cta-row svg{width:16px;height:16px;color:#7fe3d3;flex:none;margin-top:3px}
.foot-bot{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7f93b3;font-size:13px}
@media(max-width:900px){.foot{grid-template-columns:1fr 1fr}}@media(max-width:520px){.foot{grid-template-columns:1fr}}
.slidercard{padding:0!important}
.marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:flex;gap:16px;width:max-content;padding:22px;animation:mqx 26s linear infinite}
.marquee .track.slow{animation-duration:36s}
.marquee:hover .track{animation-play-state:paused}
.mqcard{flex:none;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff;animation:floatp 5s ease-in-out infinite}
.mqcard img{display:block}
.mq-square{width:250px;height:312px}.mq-square img{width:100%;height:100%;object-fit:cover}
.mq-wide{width:404px;height:186px}.mq-wide img{width:100%;height:100%;object-fit:cover}
.mq-prod{width:250px;height:312px;background:var(--soft2)}.mq-prod img{width:100%;height:100%;object-fit:contain;padding:20px}
.vcols{position:absolute;inset:0;display:flex;gap:12px;padding:14px}
.vcol{flex:1;overflow:hidden;border-radius:14px;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line);-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.vcol .vtrack{display:block;animation:mqy 24s linear infinite}
.vcol:hover .vtrack{animation-play-state:paused}
.vcol .vtrack img{width:100%;display:block}
.jhead{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-bottom:34px}
.jhead .intro p{color:var(--muted);font-size:16px;margin-top:10px}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 24px 24px;overflow:hidden;box-shadow:var(--shadow-s)}
.jcard .bn{position:absolute;left:16px;top:0;font-family:var(--fd);font-weight:800;font-size:84px;line-height:1;color:var(--blue);opacity:.09}
.jcard h4{position:relative;font-family:var(--fd);font-size:17px}
.jcard p{position:relative;color:var(--muted);font-size:13.6px;margin-top:6px}
@media(max-width:900px){.jhead{grid-template-columns:1fr;gap:16px}.jgrid{grid-template-columns:1fr}}
.deliver{max-width:780px}
.deliver .di{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
.deliver .di:first-child{border-top:0}
.deliver .di .ck{width:26px;height:26px;border-radius:50%;background:rgba(14,156,138,.13);color:var(--teal);display:grid;place-items:center;flex:none}
.deliver .di .ck svg{width:15px;height:15px}
.deliver .di span{font-size:15.5px;color:var(--ink2)}
.modal-ov{position:fixed;inset:0;background:rgba(13,23,40,.55);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-ov.open{display:flex}
.modal{background:#fff;border-radius:20px;box-shadow:var(--shadow-l);width:100%;max-width:440px;padding:24px;position:relative;max-height:92vh;overflow:auto}
.modal h3{font-size:22px}
.modal .close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;cursor:pointer;color:var(--muted);line-height:1}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px}
.cal-head b{font-family:var(--fd);font-size:15px}
.cal-head button{background:var(--soft);border:1px solid var(--line2);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:17px;color:var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-grid .dn{font-size:11px;color:var(--muted2);text-align:center;padding:4px 0;font-weight:600}
.cal-grid>button{aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:var(--soft);cursor:pointer;font-size:13.5px;color:var(--ink)}
.cal-grid>button:hover:not(:disabled){border-color:var(--blue)}
.cal-grid>button.sel{background:var(--grad);color:#fff}
.cal-grid>button:disabled{background:transparent;color:var(--muted2);cursor:default;opacity:.4}
.cal-grid .empty{background:transparent}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.slots button{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:8px 13px;font-size:13px;cursor:pointer;color:var(--ink)}
.slots button.sel{background:var(--grad);color:#fff;border-color:transparent}
.modal label{font-size:13px;font-weight:600;display:block;margin:12px 0 6px;color:var(--ink2)}
.modal input{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;font-family:var(--fb);font-size:15px;background:var(--soft);color:var(--ink)}
.modal .ok{text-align:center;padding:16px 0}.modal .ok .big{font-family:var(--fd);font-size:20px;margin-top:8px}
.slidercard{padding:0!important}
.carousel{position:absolute;inset:0}
.cslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;transition:opacity .55s ease;pointer-events:none}
.cslide.on{opacity:1;pointer-events:auto}
.cslide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;box-shadow:var(--shadow);background:#fff}
.carousel.prod .cslide img{background:transparent;box-shadow:none;filter:drop-shadow(0 20px 26px rgba(20,42,80,.22))}
.cnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;color:var(--ink2);font-size:22px;line-height:1;z-index:6;padding-bottom:3px}
.cnav:hover{background:#fff;color:var(--blue)}
.cnav.prev{left:10px}.cnav.next{right:10px}
.cdots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:6}
.cdot{width:7px;height:7px;border-radius:50%;background:var(--line2);border:0;cursor:pointer;padding:0;transition:.2s}
.cdot.on{background:var(--blue);width:18px;border-radius:4px}
.delviz{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.delviz .dvblob{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#dbe7ff,transparent 65%);filter:blur(30px);z-index:0}
.delviz img{position:relative;z-index:1;max-width:74%}
.gchart{position:absolute;inset:0;overflow:hidden;border-radius:24px;z-index:1}
.gchart .gbar{position:absolute;bottom:20%;width:20px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#9dc0ff,#d7e6ff);transform-origin:bottom;animation:gbargrow 1.6s cubic-bezier(.2,.8,.2,1) both;opacity:.9}
@keyframes gbargrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.gchart path.gline{stroke:#2e6be6;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:gdraw 2.4s ease-out .3s forwards}
@keyframes gdraw{to{stroke-dashoffset:0}}
.gchart .gdot{opacity:0;animation:gdot .4s ease-out 2.6s forwards}
@keyframes gdot{to{opacity:1}}
.revmq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);padding:6px 0}
.revmq .rtrack{display:flex;gap:18px;width:max-content;animation:mqx 48s linear infinite}
.revmq:hover .rtrack{animation-play-state:paused}
.revmq .quote{width:360px;flex:none}
.chatw{position:fixed;bottom:22px;right:22px;z-index:900}
/* The launcher is the circular brand icon itself. The artwork already draws
   the filled circle, so the button contributes only the shadow and the hit area
   — a background here would show as a ring behind the mark. */
.chatw .fab{position:relative;width:62px;height:62px;border-radius:50%;background:none;padding:0;border:0;box-shadow:0 16px 34px -12px rgba(15,26,43,.55);cursor:pointer;display:block;transition:transform .18s,box-shadow .18s}
.chatw .fab:hover{transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(15,26,43,.65)}
.chatw .fab img{width:100%;height:100%;display:block;border-radius:50%}
.chatw .fab .bdot{position:absolute;top:4px;right:4px;width:14px;height:14px;background:var(--teal);border-radius:50%;border:2px solid #fff}
.chatp{position:absolute;bottom:74px;right:0;width:340px;max-width:calc(100vw - 44px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 70px -28px rgba(20,42,80,.5);overflow:hidden;display:none;flex-direction:column}
.chatp.open{display:flex}
.chatp .ph{background:linear-gradient(120deg,#0d1728,#173a6b);color:#fff;padding:15px 16px;display:flex;align-items:center;gap:11px}
.chatp .ph .av{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--fd);font-weight:700;flex:none}
.chatp .ph .nm{font-family:var(--fd);font-weight:700;font-size:15px}.chatp .ph .st{font-size:11.5px;color:#9fe6da;display:flex;align-items:center;gap:5px}
.chatp .ph .st::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block}
.chatp .body{padding:16px;max-height:290px;overflow-y:auto;background:var(--soft)}
.chatp .cm{display:flex;gap:8px;margin-bottom:12px;max-width:88%}
.chatp .cm .b{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.45}
.chatp .cm .avi{width:28px;height:28px;flex:none}
.chatp .cm.me{margin-left:auto;flex-direction:row-reverse}.chatp .cm.me .b{background:var(--grad);color:#fff;border-color:transparent}
.chatp .qr{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--soft)}
.chatp .qr button{font-size:12.5px;border:1px solid var(--line2);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--blue);font-weight:600}
.chatp .cin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chatp .cin input{flex:1;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-family:var(--fb);font-size:14px;background:var(--soft)}
.chatp .cin button{width:42px;border:0;border-radius:10px;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center}
.chatp .cin button svg{width:18px;height:18px}
.chatp .wa{display:block;text-align:center;padding:10px;background:#25d366;color:#fff;font-weight:600;font-size:13.5px}
.herostack{text-align:center;max-width:760px;margin:0 auto}
.herostack .sub{max-width:560px}
.bigpreview{position:relative;margin-top:36px;height:520px;background:linear-gradient(150deg,#fff,var(--soft));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-l);overflow:hidden}
.bigpreview .badge.top{top:16px;left:18px;z-index:7}
.bpcols{position:absolute;inset:0;display:flex;gap:16px;padding:16px}
.bpcol{flex:1;overflow:hidden;border-radius:14px;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line);-webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent)}
.bpcol .vtrack{display:block;animation:mqy 26s linear infinite}
.bpcol:hover .vtrack{animation-play-state:paused}
.bpcol .vtrack img{width:100%;display:block}
.bigpreview.hslide .cslide{padding:24px}
@media(max-width:700px){.bigpreview{height:430px}}
.tbtn{display:flex;gap:8px;justify-content:center;margin-top:12px}
.teambig .tbtn{justify-content:flex-start}
.tlink{font-size:12.5px;font-weight:600;color:var(--blue);border:1px solid var(--line2);border-radius:8px;padding:6px 12px;transition:.18s}
.tlink:hover{background:var(--soft);border-color:var(--blue)}
.threed{max-width:960px;margin:0 auto;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-l);background:var(--soft)}
.threed img{width:100%;display:block}
.btn.sm{padding:8px 14px;font-size:13.5px}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(700px 400px at 80% -5%,rgba(46,107,230,.14),transparent 60%),radial-gradient(600px 400px at -5% 110%,rgba(14,156,138,.12),transparent 60%),var(--soft)}
.authcard{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-l);padding:34px}
.authcard.wide{max-width:580px}
.authcard .brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:800;font-size:22px;justify-content:center}
.authcard .brand img{width:32px;height:32px}.authcard .brand .go{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.authcard h1{font-size:24px;text-align:center;margin-top:12px}
.authcard .subx{text-align:center;color:var(--muted);font-size:14.5px;margin:8px 0 22px}
.authcard label{font-size:13px;font-weight:600;color:var(--ink2);display:block;margin:12px 0 6px}
.authcard input,.authcard select{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;font-family:var(--fb);font-size:15px;background:var(--soft);color:var(--ink)}
.authcard .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.authcard .two{grid-template-columns:1fr}}
.authcard .footx{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px}
.authcard .footx a{color:var(--blue);font-weight:600}
.authback{position:fixed;top:20px;left:20px;color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:6px;z-index:5}
.authback svg{width:16px;height:16px}


/* Long-form legal copy — privacy policy and anything like it. Narrow measure and
   generous spacing, because these pages are read rather than scanned. */
.legal{font-size:16px;line-height:1.75;color:var(--muted)}
.legal h2{font-family:var(--fh);font-size:20px;color:var(--ink);margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--blue);font-weight:600}
.legal b{color:var(--ink)}
.foot-bot a{color:#dbe6f5;text-decoration:underline;text-underline-offset:3px}
.foot-bot a:hover{color:#fff}

/* Cookie banner. Bottom-left because the chat launcher owns bottom-right, and a
   card rather than a bar so it covers as little of the page as possible. */
.ckb{position:fixed;left:22px;bottom:22px;z-index:950;width:min(360px,calc(100vw - 44px));
  background:var(--card,#fff);border:1px solid var(--line,#e6ebf3);border-radius:14px;
  padding:16px 16px 13px;box-shadow:0 18px 44px -14px rgba(13,23,40,.28);
  opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
.ckb.in{opacity:1;transform:none}
.ckb p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.ckb a{color:var(--blue);font-weight:600;white-space:nowrap}
.ckb-b{display:flex;gap:8px;justify-content:flex-end}
.ckb-b button{font-family:var(--fb);font-size:13.5px;font-weight:600;border-radius:9px;
  padding:8px 16px;cursor:pointer;border:1px solid transparent}
.ckb-no{background:transparent;border-color:var(--line,#e6ebf3);color:var(--muted)}
.ckb-no:hover{color:var(--ink);border-color:var(--muted2)}
.ckb-ok{background:var(--grad);color:#fff}
.ckb-ok:hover{filter:brightness(1.06)}
@media (max-width:520px){
  .ckb{left:12px;right:12px;bottom:12px;width:auto}
  /* Lift the chat launcher clear while the banner is up. */
  .ckb ~ .chatw{bottom:calc(22px + 128px)}
}

/* ---- Blog index ---- */
.blist{display:grid;gap:16px}
.bcard{display:block;background:var(--card,#fff);border:1px solid var(--line,#e6ebf3);border-radius:16px;
  padding:22px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.bcard:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(13,23,40,.3);border-color:var(--blue)}
.bcat{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600}
.bcard h2{font-family:var(--fh);font-size:21px;line-height:1.35;color:var(--ink);margin:8px 0 8px}
.bcard p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.bmeta{font-size:13px;color:var(--muted2)}

/* ---- Blog post ---- */
.post{padding:52px 0 20px}
.post .crumb{font-size:13px;color:var(--muted2);margin-bottom:18px}
.post .crumb a{color:var(--blue);font-weight:600}
.post .crumb span{margin:0 4px}
.post h1{font-family:var(--fh);font-size:clamp(29px,4.4vw,42px);line-height:1.2;color:var(--ink)}
.post .pmeta{font-size:13.5px;color:var(--muted2);margin:14px 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line,#e6ebf3)}
.post .plead{font-size:19px;line-height:1.7;color:var(--ink);margin-bottom:26px}
/* Reference figures inside a post. Width and height are set on the img so the
   page does not reflow when a tall infographic finishes loading. */
.post figure{margin:34px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}
.post figure img{width:100%;height:auto;display:block}
.post figcaption{font-size:14.5px;color:var(--muted);padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.post figcaption a{color:var(--blue);font-weight:600}
.post h2{font-family:var(--fh);font-size:24px;line-height:1.3;color:var(--ink);margin:40px 0 12px}
.post h3{font-family:var(--fh);font-size:19px;color:var(--ink);margin:28px 0 10px}
.post p{font-size:16.5px;line-height:1.78;color:var(--muted);margin-bottom:16px}
.post ul{margin:0 0 18px 22px}
.post li{font-size:16.5px;line-height:1.75;color:var(--muted);margin-bottom:10px}
.post b{color:var(--ink);font-weight:600}
/* :not(.btn) matters — `.post a` outranks `.btn-primary` on specificity, so
   without it the CTA button's white label was being repainted blue on the blue
   gradient and became unreadable. */
.post a:not(.btn){color:var(--blue);font-weight:600}
.pcta{margin:46px 0 10px;padding:26px 28px;border-radius:16px;background:var(--soft,#f4f7fd);border:1px solid var(--line,#e6ebf3)}
.pcta h3{margin:0 0 8px}
.pcta p{font-size:15.5px;margin-bottom:16px}
.pcta .phint{font-size:14px;color:var(--muted2);margin:14px 0 0}

/* Case-study fact strip */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:28px 0 34px}
.facts>div{background:var(--soft,#f4f7fd);border:1px solid var(--line,#e6ebf3);border-radius:14px;padding:16px 18px}
.facts .fk{display:block;font-family:var(--fh);font-size:26px;font-weight:700;color:var(--blue);line-height:1.1}
.facts .fv{display:block;font-size:13px;line-height:1.5;color:var(--muted);margin-top:6px}
.post .note{background:var(--soft,#f4f7fd);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  padding:14px 18px;font-size:15px;margin:22px 0}

/* FAQ accordion */
details.faq{border-bottom:1px solid var(--line,#e6ebf3);padding:2px 0}
details.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-family:var(--fh);font-size:16.5px;font-weight:600;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-size:22px;font-weight:400;
  color:var(--blue);transition:transform .18s ease}
details.faq[open] summary::after{content:"−"}
details.faq summary:hover{color:var(--blue)}
details.faq>div{font-size:15.5px;line-height:1.75;color:var(--muted);padding:0 30px 18px 0}

/* A class that sets display beats the user-agent [hidden] rule, so .esttotal
   and .estrow kept showing /usr/bin/bash.00 with nothing selected. Make hidden win. */
[hidden]{display:none!important}

/* ---- Pricing estimator ---------------------------------------------------
   Picker scrolls, summary sticks. On a phone the summary moves above the
   picker: a running total you cannot see while choosing is no total at all. */
.estwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.estsum{position:sticky;top:92px}
.estpick{display:flex;flex-direction:column;gap:10px}
.estcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.estcard.on{border-color:var(--blue);box-shadow:var(--shadow-s)}
.esthead{display:flex;align-items:flex-start;gap:13px;width:100%;padding:16px 18px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.esthead b{display:block;font-weight:700;font-size:16px;font-family:var(--fd)}
.esthead i{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:3px}
.estbox{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;margin-top:2px;transition:.15s;background:#fff}
.estcard.on .estbox{background:var(--blue);border-color:var(--blue);color:#fff}
.estbox svg{width:13px;height:13px}
.estbody{display:flex;flex-wrap:wrap;gap:14px;padding:16px 18px 18px 53px;border-top:1px solid var(--line)}
.estf{display:flex;flex-direction:column;gap:6px;min-width:140px}
.estf>span{font-size:12.5px;color:var(--muted);font-weight:700}
.estf input,.estf select{padding:9px 11px;border:1px solid var(--line2);border-radius:9px;font:inherit;font-size:15px;background:#fff;color:var(--ink);width:100%}
.estf input:focus,.estf select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}

.estsumin{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.estsumin h3{font-size:18px;margin-bottom:14px}
.estlines{display:flex;flex-direction:column;gap:13px}
.estline{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.estline b{display:block;font-weight:700;font-size:15px}
.estline i{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:2px}
.estline em{display:block;font-style:normal;font-size:13.5px;color:var(--teal);font-weight:700;margin-top:3px}
.estline .amt{font-family:var(--fm);font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.estline.quote .amt{color:var(--muted)}
.esttotal{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.estrow{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--muted)}
.estrow .amt{font-family:var(--fm);font-variant-numeric:tabular-nums}
.estrow.big{font-size:17px;font-weight:700;color:var(--ink);font-family:var(--fd)}
.estrow.big .amt{font-size:24px;font-weight:800;color:var(--blue)}
.esthint{font-size:13.5px;color:var(--muted);line-height:1.55}
.estnote{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* Confirmation state for the copy button. */
#estcopy.copied{border-color:var(--teal);color:var(--teal)}

.pricenotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pricenotes h3{font-size:17px;margin-bottom:7px}
.pricenotes p{font-size:15px;color:var(--muted)}

/* A compact pricing panel for the individual service pages. */
.pricebox{display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:space-between;background:var(--grad-soft);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.pricebox .pb-main{display:flex;flex-direction:column;gap:5px;min-width:220px}
.pricebox .pb-k{font-size:13px;font-family:var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pricebox .pb-v{font-family:var(--fd);font-size:34px;font-weight:800;line-height:1;color:var(--ink)}
.pricebox .pb-v small{font-size:17px;font-weight:700;color:var(--muted)}
.pricebox .pb-note{font-size:14.5px;color:var(--muted);max-width:42ch}
.pricebox .pb-cta{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1000px){
 .estwrap{grid-template-columns:1fr}
 .estsum{position:static;order:-1}
 .estbody{padding-left:18px}
 .pricenotes{grid-template-columns:1fr;gap:18px}
}