/* ==========================================================
   ORPEW v2 — richer brand look: colour, motion, service visuals
   ========================================================== */
:root{
  --violet:#7b5cff; --grad:linear-gradient(120deg,#1450e6 0%,#4fb0ff 45%,#7b5cff 100%);
  --glass:rgba(255,255,255,.06); --glass-b:rgba(255,255,255,.12);
}
h1 em,h2 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.sec-dark h2 em,.cta h2 em,.hero2 h1 em{background:linear-gradient(120deg,#4fb0ff,#a48bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-dark{background:var(--ink);position:relative;overflow:hidden}
.btn-grad{background:var(--grad);background-size:200% 100%;color:#fff;box-shadow:0 10px 30px -10px rgba(20,80,230,.7);transition:background-position .5s,transform .25s,box-shadow .25s}
.btn-grad:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(123,92,255,.7)}
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--grad);z-index:70;pointer-events:none}

/* ---------- HERO ---------- */
.hero2{background:var(--ink);color:#fff;padding:96px 0 120px;overflow:hidden;isolation:isolate;margin-top:-78px;padding-top:174px}
.hero2 .aurora{position:absolute;inset:-20%;z-index:-2;filter:blur(70px);opacity:.75}
.hero2 .aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.hero2 .aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:4%;background:#1450e6}
.hero2 .aurora i:nth-child(2){width:34vw;height:34vw;left:66%;top:38%;background:#7b5cff;animation-delay:-6s;animation-duration:22s}
.hero2 .aurora i:nth-child(3){width:28vw;height:28vw;left:18%;top:52%;background:#0e7fc2;opacity:.55;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-6%,8%) scale(1.08)}66%{transform:translate(5%,-6%) scale(.94)}}
.hero2 .gridbg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero2 .eyebrow{color:var(--gold-2)}
.badge-new{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font-size:.82rem;color:#d6def0;margin-bottom:28px;backdrop-filter:blur(8px)}
.badge-new b{background:var(--grad);color:#fff;padding:4px 10px;border-radius:999px;font-size:.72rem;letter-spacing:.06em}
.hero2 h1{font-size:clamp(2.6rem,5.4vw,4.6rem);margin-bottom:26px;line-height:1.04}
.rotator{display:inline-grid;vertical-align:bottom;height:1.12em;overflow:hidden}
.rotator span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s;background:linear-gradient(120deg,#4fb0ff,#a48bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--serif);font-style:italic;font-weight:400;padding-right:.1em;white-space:nowrap}
.rotator span.on{transform:none;opacity:1}
.rotator span.out{transform:translateY(-110%);opacity:0}
.hero2 .lead{color:#aab4c8;margin-bottom:38px;max-width:560px}
.hero2 .btn-ghost-light{backdrop-filter:blur(6px);background:rgba(255,255,255,.04)}
.hero2-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.hero2-meta span{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:#c3cbdc;padding:8px 14px;border-radius:999px;border:1px solid var(--glass-b);background:rgba(255,255,255,.03)}
.hero2-meta .ic{color:var(--gold-2)}

/* hero stage: stacked floating UI cards */
.stage{position:relative;height:560px;perspective:1200px}
.stage>*{position:absolute;border-radius:18px;transition:transform .4s ease-out}
.st-browser{left:0;top:30px;width:86%;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);overflow:hidden;animation:bob 7s ease-in-out infinite}
.st-browser .vz-bar{background:#eef1f6}
.st-browser .vz-shot{aspect-ratio:16/10}
.st-chat{right:0;top:220px;width:300px;animation:bob 8s ease-in-out infinite -2s;z-index:2}
.st-stat{left:4%;bottom:6px;width:250px;padding:18px;background:rgba(18,24,40,.82);border:1px solid var(--glass-b);backdrop-filter:blur(12px);animation:bob 9s ease-in-out infinite -4s;z-index:3}
.st-stat small{color:#8f9bb3;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.st-stat .spark{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:12px}
.st-stat .spark i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(#4fb0ff,#1450e6);height:var(--h);animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
.st-stat .spark i:nth-child(2){animation-delay:.1s}.st-stat .spark i:nth-child(3){animation-delay:.2s}.st-stat .spark i:nth-child(4){animation-delay:.3s}.st-stat .spark i:nth-child(5){animation-delay:.4s}.st-stat .spark i:nth-child(6){animation-delay:.5s}.st-stat .spark i:nth-child(7){animation-delay:.6s}
.st-stat b{display:flex;align-items:center;gap:8px;font-size:.95rem;margin-top:4px}
.st-pill{right:6%;top:0;padding:10px 16px;background:rgba(18,24,40,.82);border:1px solid var(--glass-b);backdrop-filter:blur(10px);font-size:.82rem;display:flex;gap:10px;align-items:center;animation:bob 6s ease-in-out infinite -1s;z-index:3}
.st-pill .ic{color:#4ade80}
.st-orbit{right:12%;bottom:40px;width:74px;height:74px;border-radius:22px!important;background:var(--grad);display:grid;place-items:center;box-shadow:0 20px 40px -10px rgba(123,92,255,.7);animation:bob 5s ease-in-out infinite -3s;z-index:1}
.st-orbit img{width:42px;filter:brightness(0) invert(1)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes grow{from{height:4%}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--ink);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);overflow:hidden;padding:22px 0;color:#c9d2e3}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:48px;font-size:1.05rem;font-weight:500;white-space:nowrap}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- SERVICE CARDS WITH VISUALS ---------- */
.svc2-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svc2{--a:#1450e6;grid-column:span 2;position:relative;display:flex;flex-direction:column;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;isolation:isolate}
.svc2.wide{grid-column:span 3}
.svc2::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--a) 14%,transparent),transparent 60%);opacity:0;transition:opacity .4s}
.svc2:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--a) 55%,transparent);border-color:color-mix(in srgb,var(--a) 40%,transparent)}
.svc2:hover::before{opacity:1}
.svc2 .vis{height:230px;position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 10%,#f4f6fb),color-mix(in srgb,var(--a) 22%,#eef1f7));overflow:hidden;border-bottom:1px solid var(--line)}
.svc2.wide .vis{height:260px}
.svc2 .body{padding:28px;display:flex;flex-direction:column;flex:1}
.svc2 .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.svc2 .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--a);box-shadow:0 8px 20px -8px var(--a)}
.svc2 .n{margin-left:auto;font-family:var(--serif);font-style:italic;color:var(--muted-light);font-size:1.1rem}
.svc2 h3{font-size:1.3rem;margin:0}
.svc2 p{color:var(--muted);font-size:.95rem;margin:0 0 18px;flex:1}
.svc2 ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.svc2 ul li{font-size:.76rem;font-weight:600;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--a) 9%,transparent);color:color-mix(in srgb,var(--a) 80%,#0a0e1a)}
.svc2 .more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--a)}
.svc2 .more .ic{transition:transform .25s}
.svc2:hover .more .ic{transform:translateX(5px)}
.svc2.hot .vis::after{content:"NEW";position:absolute;top:16px;left:16px;font-size:.7rem;font-weight:700;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:var(--a);color:#fff;z-index:5}

/* ---------- VISUAL PRIMITIVES (.vz) ---------- */
.vz{position:absolute;inset:0;--a:inherit}
.vz-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f1f3f8;border-bottom:1px solid rgba(10,14,26,.06)}
.vz-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.vz-bar i:nth-child(2){background:#febc2e}.vz-bar i:nth-child(3){background:#28c840}
.vz-bar span{margin-left:10px;font-size:.68rem;color:#7a8396;background:#fff;border-radius:6px;padding:3px 10px;flex:1;max-width:200px}
.vz-shot{overflow:hidden;background:#dfe5ee}
.vz-shot img{width:100%;display:block}
.vz-browser{position:absolute;left:8%;top:14%;width:78%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -20px rgba(10,14,26,.45);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.vz-browser .vz-shot{aspect-ratio:16/10}
.svc2:hover .vz-browser{transform:translateY(-8px) rotate(-1deg)}
.vz-phone{position:absolute;right:6%;top:30%;width:22%;aspect-ratio:9/18;border-radius:16px;border:5px solid #0a0e1a;overflow:hidden;background:#000;box-shadow:0 20px 40px -14px rgba(10,14,26,.6);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.vz-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.svc2:hover .vz-phone{transform:translateY(-14px) rotate(3deg)}
.vz-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:7px 11px;border-radius:999px;background:#fff;color:#0a0e1a;box-shadow:0 10px 24px -10px rgba(10,14,26,.4);animation:bob 5s ease-in-out infinite}
.vz-chip .ic{color:var(--a,#1450e6)}
.vz-chip.c1{left:5%;bottom:12%}
.vz-chip.c2{right:5%;top:9%;animation-delay:-2.5s}
.vz-toast{position:absolute;right:5%;bottom:10%;display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 14px 10px 10px;box-shadow:0 18px 36px -14px rgba(10,14,26,.5);animation:toast 6s ease-in-out infinite}
.vz-toast .dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--a);color:#fff}
.vz-toast b{display:block;font-size:.78rem}.vz-toast small{font-size:.68rem;color:#6b7488}
@keyframes toast{0%,8%{opacity:0;transform:translateY(16px) scale(.96)}14%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-6px)}}

/* chat */
.vz-chat,.st-chat{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(10,14,26,.55);color:#0a0e1a}
.vz-ai-agents-chatbots .vz-chat{position:absolute;left:50%;top:9%;width:min(330px,80%);transform:translateX(-50%)}
.vz-chat-h{display:flex;gap:10px;align-items:center;padding:12px 14px;background:linear-gradient(120deg,#7b5cff,#4fb0ff);color:#fff}
.vz-chat-h .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.vz-chat-h b{display:block;font-size:.8rem}.vz-chat-h small{font-size:.66rem;opacity:.9;display:flex;align-items:center;gap:5px}
.vz-chat-h small i{width:6px;height:6px;border-radius:50%;background:#4ade80}
.vz-chat-b{padding:12px;display:flex;flex-direction:column;gap:7px;background:#f6f7fb;min-height:150px}
.vz-chat-b .m{margin:0;font-size:.72rem;line-height:1.45;padding:8px 11px;border-radius:12px;max-width:84%;opacity:0;animation:msg 10s ease infinite}
.vz-chat-b .u{align-self:flex-end;background:#0a0e1a;color:#fff;border-bottom-right-radius:4px}
.vz-chat-b .a{align-self:flex-start;background:#fff;border:1px solid rgba(10,14,26,.08);border-bottom-left-radius:4px}
.vz-chat-b .m:nth-child(1){animation-delay:0s}.vz-chat-b .m:nth-child(2){animation-delay:.8s}.vz-chat-b .m:nth-child(3){animation-delay:1.8s}.vz-chat-b .m:nth-child(4){animation-delay:2.6s}.vz-chat-b .m:nth-child(5){animation-delay:3.4s}
@keyframes msg{0%{opacity:0;transform:translateY(8px)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.vz-chat-b .typing{display:flex;gap:4px;padding:10px 12px}
.vz-chat-b .typing span{width:6px;height:6px;border-radius:50%;background:#9aa3b5;animation:dots 1s infinite}
.vz-chat-b .typing span:nth-child(2){animation-delay:.15s}.vz-chat-b .typing span:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.svc2 .vz-chat-b{min-height:0}
.svc2 .vz-chat-b .m:nth-child(n+4){display:none}
.vz-agent{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:.72rem;font-weight:600;padding:8px 13px;border-radius:999px;background:#0a0e1a;color:#fff;box-shadow:0 14px 30px -12px rgba(10,14,26,.6)}
.vz-agent span{color:#a48bff;display:grid}

/* marketing */
.vz-post{position:absolute;left:8%;top:10%;width:46%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(10,14,26,.45);transform:rotate(-3deg);transition:transform .6s}
.svc2:hover .vz-post{transform:rotate(0) translateY(-6px)}
.vz-post-h{display:flex;gap:8px;align-items:center;padding:8px 10px}
.vz-post-h .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(45deg,#ff6b4a,#e5489b)}
.vz-post-h b{display:block;font-size:.66rem}.vz-post-h small{font-size:.58rem;color:#8a93a6}
.vz-post-img{aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(135deg,#ff6b4a,#e5489b 60%,#7b5cff);color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.1em;text-align:center;line-height:1.2}
.vz-post-f{display:flex;gap:8px;align-items:center;padding:7px 10px;font-size:.7rem}
.vz-post-f em{margin-left:auto;font-style:normal;font-weight:700;font-size:.62rem;color:#fff;background:#0a0e1a;padding:4px 8px;border-radius:6px}
.vz-bars{position:absolute;right:7%;bottom:12%;width:40%;background:#fff;border-radius:14px;padding:12px;box-shadow:0 20px 40px -18px rgba(10,14,26,.45)}
.vz-bars small{font-size:.64rem;color:#6b7488;font-weight:600}
.vz-bars div{display:flex;align-items:flex-end;gap:5px;height:70px;margin-top:8px}
.vz-bars i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(#ffb199,var(--a));animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}
.in .vz-bars i{animation-play-state:running}

/* seo */
.vz-serp{position:absolute;left:8%;top:10%;width:70%;background:#fff;border-radius:14px;padding:12px;box-shadow:0 24px 50px -20px rgba(10,14,26,.45)}
.vz-search{display:flex;gap:8px;align-items:center;border:1px solid #e1e5ee;border-radius:999px;padding:7px 12px;font-size:.72rem;color:#3a4256;margin-bottom:10px}
.vz-search .ic{color:#8a93a6}
.vz-search .typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--a);animation:type 6s steps(22) infinite;max-width:0}
@keyframes type{0%{max-width:0}40%,85%{max-width:22ch}100%{max-width:0}}
.vz-res{padding:7px 8px;border-radius:8px;margin-bottom:4px}
.vz-res small{display:block;font-size:.6rem;color:#22b35e}
.vz-res b{display:block;height:8px;width:70%;border-radius:4px;background:#c9d4f2;margin:4px 0;font-size:0}
.vz-res p{height:6px;width:90%;border-radius:4px;background:#eceff5;margin:0}
.vz-res.hl{background:color-mix(in srgb,var(--a) 10%,#fff);border:1px solid color-mix(in srgb,var(--a) 35%,transparent)}
.vz-res.hl b{font-size:.74rem;height:auto;width:auto;background:none;color:#1a3fb0}
.vz-line{position:absolute;right:6%;bottom:10%;width:42%;background:#fff;border-radius:14px;padding:12px;box-shadow:0 20px 40px -18px rgba(10,14,26,.45);color:var(--a)}
.vz-line small{font-size:.64rem;color:#6b7488;font-weight:600}
.vz-line path{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 3s ease forwards infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}

/* software */
.vz-code{position:absolute;left:7%;top:10%;width:74%;border-radius:12px;overflow:hidden;background:#0d1426;box-shadow:0 24px 50px -20px rgba(10,14,26,.6)}
.vz-code .vz-bar{background:#141c33;border-color:rgba(255,255,255,.06)}
.vz-code .vz-bar span{background:#0d1426;color:#7f8aa6}
.vz-code pre{margin:0;padding:12px 14px;font:500 .68rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c8d3ea;white-space:pre}
.vz-code .k{color:#a48bff}.vz-code .f{color:#4fb0ff}.vz-code .s{color:#4ade80}
.vz-code .cur{display:inline-block;width:7px;height:13px;background:#4fb0ff;vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.vz-flow{position:absolute;right:5%;bottom:9%;display:flex;align-items:center;gap:0;background:#fff;padding:8px;border-radius:999px;box-shadow:0 18px 36px -14px rgba(10,14,26,.45)}
.vz-flow span{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:700;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--a) 10%,#fff);color:#0a0e1a}
.vz-flow span .ic{color:var(--a)}
.vz-flow i{width:18px;height:2px;background:linear-gradient(90deg,var(--a) 50%,transparent 50%);background-size:8px 2px;animation:flow .6s linear infinite}
@keyframes flow{to{background-position:8px 0}}

/* branding */
.vz-brand{position:absolute;inset:12% 8%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:10px}
.vz-logo{background:#0a0e1a;border-radius:14px;display:grid;place-items:center;box-shadow:0 20px 40px -18px rgba(10,14,26,.6)}
.vz-logo img{width:46%;animation:spinY 8s ease-in-out infinite}
@keyframes spinY{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(360deg)}100%{transform:rotateY(360deg)}}
.vz-type{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 20px 40px -18px rgba(10,14,26,.35)}
.vz-type b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:2.8rem;line-height:1;color:var(--a)}
.vz-type small{font-size:.64rem;color:#6b7488;font-weight:600}
.vz-sw{grid-column:1/-1;display:flex;gap:8px;background:#fff;border-radius:12px;padding:8px;box-shadow:0 14px 30px -16px rgba(10,14,26,.35)}
.vz-sw i{flex:1;height:26px;border-radius:7px;background:var(--c);border:1px solid rgba(10,14,26,.08);transition:flex .4s}
.svc2:hover .vz-sw i:hover,.vz-sw i:hover{flex:2.2}
.vz-creative-branding .vz-chip.c1{left:auto;right:5%;bottom:auto;top:6%}

/* payments */
.vz-card{position:absolute;left:8%;top:14%;width:52%;aspect-ratio:1.586;border-radius:16px;padding:14px;color:#fff;background:linear-gradient(135deg,#0a0e1a 0%,#1d2a52 55%,#f2a516 160%);box-shadow:0 26px 50px -18px rgba(10,14,26,.65);display:flex;flex-direction:column;justify-content:flex-end;transform:rotate(-6deg);transition:transform .6s}
.svc2:hover .vz-card{transform:rotate(0) translateY(-6px)}
.vz-card .chip{position:absolute;left:14px;top:16px;width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#f6d27a,#c99a2e)}
.vz-card b{font-size:.8rem;letter-spacing:.12em;font-weight:600}
.vz-card small{font-size:.58rem;opacity:.7;letter-spacing:.14em;margin-top:4px}
.vz-card em{position:absolute;right:14px;bottom:12px;font-style:italic;font-weight:800;font-size:.9rem}
.vz-pay{position:absolute;right:6%;bottom:10%;width:46%;background:#fff;border-radius:14px;padding:12px;box-shadow:0 22px 44px -18px rgba(10,14,26,.5)}
.vz-pay small{font-size:.64rem;color:#6b7488;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vz-pay .cur{display:flex;gap:4px;margin:8px 0 10px}
.vz-pay .cur span{flex:1;text-align:center;font-size:.62rem;font-weight:700;padding:5px 0;border-radius:6px;background:#f1f3f8;color:#3a4256}
.vz-pay .cur span.on{background:var(--a);color:#fff}
.vz-pay .btn-pay{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.66rem;font-weight:700;padding:8px;border-radius:8px;background:#22b35e;color:#fff;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,179,94,.45)}50%{box-shadow:0 0 0 8px rgba(34,179,94,0)}}

/* ---------- AI SPOTLIGHT ---------- */
.ai-spot{background:radial-gradient(900px 500px at 85% 20%,rgba(123,92,255,.28),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(20,80,230,.28),transparent 60%),var(--ink);color:#fff;overflow:hidden}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ai-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0}
.ai-item{padding:18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--glass-b);transition:background .3s,border-color .3s,transform .3s}
.ai-item:hover{background:rgba(123,92,255,.12);border-color:rgba(164,139,255,.45);transform:translateY(-3px)}
.ai-item .ic{color:#a48bff;margin-bottom:10px}
.ai-item b{display:block;font-size:.98rem;margin-bottom:4px}
.ai-item small{display:block;color:#9aa6bf;font-size:.84rem;line-height:1.5}
.ai-demo{position:relative}
.ai-demo .vz-chat{position:relative;width:100%;max-width:440px;margin:0 auto;border-radius:22px}
.ai-demo .vz-chat-b{min-height:320px;padding:18px;gap:10px}
.ai-demo .vz-chat-b .m{font-size:.86rem}
.ai-demo .ring{position:absolute;inset:-40px;border-radius:50%;border:1px dashed rgba(164,139,255,.3);animation:spin 60s linear infinite;z-index:-1}
.ai-demo .tagf{position:absolute;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;padding:10px 14px;border-radius:999px;background:rgba(18,24,40,.9);border:1px solid var(--glass-b);backdrop-filter:blur(8px);animation:bob 6s ease-in-out infinite;white-space:nowrap}
.ai-demo .tagf .ic{color:#a48bff}
.ai-demo .t1{left:-6%;top:12%}.ai-demo .t2{right:-4%;top:46%;animation-delay:-2s}.ai-demo .t3{left:2%;bottom:4%;animation-delay:-4s}

/* ---------- SOLUTIONS ---------- */
.sol2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sol2{position:relative;padding:28px;border-radius:22px;background:var(--ink-2);border:1px solid var(--line-dark);overflow:hidden;transition:transform .4s,border-color .4s;isolation:isolate}
.sol2::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(79,176,255,.18),transparent 60%);opacity:0;transition:opacity .4s}
.sol2:hover{transform:translateY(-4px);border-color:rgba(79,176,255,.35)}
.sol2:hover::before{opacity:1}
.sol2 .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff;margin-bottom:22px}
.sol2 h3{margin-bottom:8px}
.sol2 p{color:var(--muted-light);font-size:.92rem;margin:0 0 18px}
.sol2 .tags{display:flex;flex-wrap:wrap;gap:6px}
.sol2.cta-card{background:var(--grad);border:0;display:flex;flex-direction:column;justify-content:space-between}
.sol2.cta-card p{color:rgba(255,255,255,.85)}
.sol2.cta-card .ico{background:rgba(255,255,255,.2)}

/* ---------- PROCESS ---------- */
.proc2{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.proc2::before{content:"";position:absolute;left:0;right:0;top:31px;height:2px;background:var(--line)}
.proc2::after{content:"";position:absolute;left:0;top:31px;height:2px;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.2,.8,.2,1)}
.proc2.in::after{transform:scaleX(1)}
.proc2 .st{position:relative;padding-right:12px}
.proc2 .dot{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--gold);position:relative;z-index:1;margin-bottom:24px;transition:border-color .4s,background .4s,color .4s}
.proc2.in .st .dot{border-color:transparent;background:var(--grad);color:#fff}
.proc2.in .st:nth-child(2) .dot{transition-delay:.5s}.proc2.in .st:nth-child(3) .dot{transition-delay:1s}.proc2.in .st:nth-child(4) .dot{transition-delay:1.5s}
.proc2 h3{font-size:1.25rem;margin-bottom:8px}
.proc2 p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- PORTFOLIO hover ---------- */
.proj .thumb img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.proj:hover .thumb img{transform:scale(1.06)}
.proj{position:relative}
.proj .thumb{position:relative}
.proj .thumb::after{content:"View project →";position:absolute;inset:auto 16px 16px auto;font-size:.8rem;font-weight:700;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);opacity:0;transform:translateY(8px);transition:.35s;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.proj:hover .thumb::after{opacity:1;transform:none}

/* ---------- INDUSTRY pills ---------- */
.pill{transition:background .3s,color .3s,border-color .3s,transform .3s}
.pill:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}

/* ---------- CTA ---------- */
.cta{background:radial-gradient(800px 400px at 50% 120%,rgba(123,92,255,.45),transparent 70%),radial-gradient(600px 400px at 10% -10%,rgba(20,80,230,.5),transparent 70%),var(--ink)}
.cta .btn-gold{background:#fff;color:var(--ink)}
.cta .btn-gold:hover{background:var(--gold-soft)}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{background:radial-gradient(700px 300px at 90% 0%,rgba(79,176,255,.18),transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(123,92,255,.12),transparent 70%)}

/* ---------- SERVICE PAGE ---------- */
.svc-hero{--a:#1450e6;padding:64px 0 88px;border-bottom:1px solid var(--line);background:radial-gradient(700px 400px at 85% 30%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%),radial-gradient(500px 300px at 0% 100%,color-mix(in srgb,var(--a) 10%,transparent),transparent 70%)}
.svc-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.svc-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:22px}
.svc-hero .lead{margin-bottom:32px}
.svc-hero .tagline{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-weight:700;font-size:.85rem;color:var(--a)}
.svc-hero .tagline .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--a);color:#fff;box-shadow:0 10px 24px -10px var(--a)}
.svc-hero .btn-dark{background:var(--a)}
.svc-hero .btn-dark:hover{filter:brightness(1.1)}
.svc-stage{position:relative;height:440px;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 12%,#f4f6fb),color-mix(in srgb,var(--a) 28%,#e9edf6));border:1px solid color-mix(in srgb,var(--a) 20%,transparent);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--a) 70%,transparent)}
.svc-stage .vz{transform:scale(1.18);transform-origin:center}
.svc-stage .vz-chat-b .m:nth-child(n+4){display:block}
.offer2{--a:#1450e6;padding:30px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .35s,box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.offer2::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--a);transform:scaleX(0);transform-origin:0;transition:transform .5s}
.offer2:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--a) 60%,transparent);border-color:color-mix(in srgb,var(--a) 35%,transparent)}
.offer2:hover::after{transform:scaleX(1)}
.offer2 .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a);margin-bottom:20px;font-family:var(--serif);font-style:italic;font-size:1.2rem}
.offer2 h3{margin-bottom:8px}
.offer2 p{color:var(--muted);margin:0;font-size:.95rem}
.svc-page .checks li .ic{color:var(--a)}
.svc-page .tools span{transition:background .3s,color .3s,border-color .3s}
.svc-page .tools span:hover{background:var(--a);color:#fff;border-color:var(--a)}
.svc-page .faq summary .ic{color:var(--a)}

/* services listing rows */
.svc-row{--a:#1450e6;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-bottom:1px solid var(--line)}
.svc-row:nth-child(even) .svc-row-vis{order:2}
.svc-row-vis{position:relative;height:340px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 10%,#f4f6fb),color-mix(in srgb,var(--a) 24%,#eaeef6));border:1px solid color-mix(in srgb,var(--a) 18%,transparent)}
.svc-row-vis .vz{transform:scale(1.05)}
.svc-row .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--a);color:#fff;margin-bottom:18px}
.svc-row h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:14px}
.svc-row .checks li .ic{color:var(--a)}
.svc-row .checks li{padding:12px 0;font-size:.95rem}
.svc-row .btn{background:var(--a);margin-top:24px}

/* ---------- reveal variants + stagger ---------- */
.reveal{transition-delay:calc(var(--d,0) * 90ms)}
.reveal.zoom{transform:scale(.96)}
.reveal.zoom.in{transform:none}

/* header over dark hero */
body.home .site-header:not(.scrolled):not(.menu-open)::before{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.home .site-header:not(.scrolled):not(.menu-open) .nav>ul>li>a{color:#c3cbdc}
body.home .site-header:not(.scrolled):not(.menu-open) .nav>ul>li>a:hover,body.home .site-header:not(.scrolled):not(.menu-open) .nav>ul>li>a.active{color:#fff;background:rgba(255,255,255,.08)}
body.home .site-header:not(.scrolled):not(.menu-open) .logo img.dark{display:none}
body.home .site-header:not(.scrolled):not(.menu-open) .logo img.light{display:block}
.logo img.light{display:none}
body.home .site-header:not(.scrolled):not(.menu-open) .nav-cta{background:#fff;color:var(--ink)}
body.home .site-header:not(.scrolled):not(.menu-open) .burger{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .svc2-grid{grid-template-columns:repeat(2,1fr)}
  .svc2,.svc2.wide{grid-column:span 1}
  .sol2-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero2{padding-top:130px;padding-bottom:80px}
  .hero2-grid,.ai-grid,.svc-hero-grid,.svc-row{grid-template-columns:1fr}
  .svc-row:nth-child(even) .svc-row-vis{order:0}
  .stage{height:480px;max-width:560px;width:100%;margin:0 auto}
  .proc2{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .proc2::before,.proc2::after{display:none}
  .ai-demo .t1{left:0}.ai-demo .t2{right:0}
  .svc-stage{height:380px}
}
@media (max-width:640px){
  .svc2-grid,.sol2-grid,.ai-list{grid-template-columns:1fr}
  .stage{height:400px}
  .st-chat{width:230px;top:170px}
  .st-stat{width:200px}
  .st-pill{font-size:.72rem}
  .svc2 .vis,.svc2.wide .vis{height:220px}
  .proc2{grid-template-columns:1fr}
  .svc-stage{height:320px}
  .svc-stage .vz{transform:scale(1)}
  .svc-row-vis{height:280px}
  .svc-row{padding:44px 0;gap:28px}
  .ai-demo .tagf{display:none}
  .marquee span{font-size:.92rem;gap:32px}
  .marquee-track{gap:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .vz-chat-b .m{opacity:1}
  .rotator span:first-child{transform:none;opacity:1}
  .vz-search .typed{max-width:none}
}
.svc2 .vz-agent{display:none}
@media (max-width:640px){.st-stat,.st-orbit{display:none}.st-chat{top:150px;right:0}.stage{height:360px}}