/* ═══════════════════════ TOKENS ═══════════════════════ */ :root{ --p:#5046E5;--pl:#6D65F0;--ac:#7C3AED;--pi:#A78BFA; --grad:linear-gradient(135deg,#5046E5,#7C3AED); --grad3:linear-gradient(120deg,#5046E5 0%,#7C3AED 55%,#A78BFA 100%); --bg:#FBFBFE;--bg2:#F4F4FC;--ink:#0B0C14; --t1:#0D0F1A;--t2:#494F63;--t3:#9298AC; --hair:rgba(13,15,26,.09);--hairp:rgba(80,70,229,.14); --card:rgba(255,255,255,.74); --blur:blur(20px) saturate(170%); --sh:0 10px 40px rgba(80,70,229,.09); --shp:0 16px 48px rgba(80,70,229,.26); --r:14px;--rl:22px;--rx:30px; --e1:.22s cubic-bezier(.4,0,.2,1);--e2:.6s cubic-bezier(.16,1,.3,1); --nh:74px;--wrap:1320px } /* ═══════════════════════ RESET ═══════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'ClashGrotesk',-apple-system,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit}ul{list-style:none}img,canvas,svg{display:block;max-width:100%} ::selection{background:rgba(80,70,229,.16)} /* ═══════════════════════ TYPE ═══════════════════════ */ h1{font-size:clamp(2.4rem,5.5vw,5rem);font-weight:600;line-height:.95;letter-spacing:-.045em} h2{font-size:clamp(2rem,4.6vw,3.9rem);font-weight:600;line-height:1.02;letter-spacing:-.035em} h3{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:600;line-height:1.25;letter-spacing:-.02em} h4{font-size:.95rem;font-weight:600;letter-spacing:-.01em} p{color:var(--t2);line-height:1.72} .tg{background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .lbl{display:flex;align-items:center;gap:12px;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--t3)} .lbl b{color:var(--p);font-weight:600} .lbl.c{justify-content:center} /* ═══════════════════════ LAYOUT ═══════════════════════ */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 36px} section{padding:130px 0;position:relative} .sec-idx{font-size:.78rem;font-weight:600;color:var(--t3);letter-spacing:.08em;font-variant-numeric:tabular-nums} /* ═══════════════════════ ICONS ═══════════════════════ */ .ic{display:block;flex-shrink:0;width:22px;height:22px} /* ═══════════════════════ CURSOR ═══════════════════════ */ .cur-dot,.cur-ring{display:none} /* ═══════════════════════ BUTTONS ═══════════════════════ */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:100px;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:transform var(--e1),box-shadow var(--e1),background var(--e1),color var(--e1);white-space:nowrap;will-change:transform} .btn svg{transition:transform var(--e1)} .btn:hover svg{transform:translateX(3px)} .btn-p{background:var(--grad);color:#fff;box-shadow:var(--shp)} .btn-p:hover{box-shadow:0 22px 56px rgba(80,70,229,.36)} .btn-o{background:transparent;color:var(--t1);border:1.5px solid var(--hair);box-shadow:none} .btn-o:hover{border-color:var(--p);color:var(--p)} .btn-wh{background:#fff;color:var(--p);box-shadow:0 8px 28px rgba(0,0,0,.14)} .btn-ow{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35)} .btn-ow:hover{background:rgba(255,255,255,.16)} /* ═══════════════════════ LOADER ═══════════════════════ */ #loader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(120% 115% at 50% 82%,#F0EBFF 0%,#F8F6FF 46%,#FBFBFE 100%);will-change:transform} .ldr-blocks{position:absolute;inset:0;display:grid;gap:9px;padding:9px;z-index:1} .ldr-tile{border-radius:15px;opacity:0;will-change:transform,opacity;background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(243,240,255,.5));border:1px solid rgba(124,58,237,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 14px rgba(124,58,237,.045)} .ldr-cnt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;width:min(440px,86vw)} .ldr-logo{display:flex;align-items:center;gap:0;margin-bottom:34px;opacity:0} /* animated X logo */ .xlogo{display:inline-flex;align-items:baseline;user-select:none;text-decoration:none} .xlogo-mark{flex-shrink:0;overflow:visible;margin-right:-5px} .xlogo-ect{font-weight:700;letter-spacing:-0.5px;line-height:1;color:var(--ink);font-family:inherit} .xlogo--dark .xlogo-ect{color:#fff} /* round dot on i — dotless stem + overlaid circle, anchored to the stem */ .xlogo-i{font-style:normal;font-weight:inherit} .x-glow-flow,.x-core-flow{stroke-dasharray:14 44;animation:xDrift 4s linear infinite} @keyframes xDrift{from{stroke-dashoffset:58}to{stroke-dashoffset:0}} .x-trace-flow{stroke-dasharray:16 157;animation:xTrace 4s linear infinite} @keyframes xTrace{from{stroke-dashoffset:173}to{stroke-dashoffset:0}} .x-c-t{animation:xcT 4s linear infinite} .x-c-b{animation:xcB 4s linear infinite} @keyframes xcT{0%{opacity:0}2%{opacity:0}4%{opacity:1}100%{opacity:1}} @keyframes xcB{0%{opacity:0}70%{opacity:0}73%{opacity:1}100%{opacity:1}} .ldr-dot{width:9px;height:9px;border-radius:50%;background:var(--grad);margin-top:-13px;box-shadow:0 0 16px rgba(124,58,237,.5)} .ldr-count{font-weight:700;line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;justify-content:center;font-size:clamp(2.2rem,8vw,4.2rem);background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0} .ldr-count i{font-size:.26em;font-style:normal;font-weight:600;-webkit-text-fill-color:var(--t3);margin-top:.55em;margin-left:5px} .ldr-bar{width:100%;height:2px;background:rgba(80,70,229,.12);border-radius:2px;margin-top:28px;overflow:hidden;opacity:0} .ldr-fill{height:100%;width:0;background:var(--grad3)} .ldr-status{font-size:.8rem;font-weight:500;color:var(--t3);letter-spacing:.05em;margin-top:18px;height:1.3em;opacity:0} /* ═══════════════════════ RAIL & NAV ═══════════════════════ */ .rail{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad3);z-index:1001} .nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nh);display:flex;align-items:center;transition:background .4s,border-color .4s} .nav.on{background:rgba(251,251,254,.85);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--hair)} .nav .wrap{max-width:none;padding:0 44px;width:100%;flex:1} .ni{display:flex;align-items:center;justify-content:space-between;width:100%;position:relative} .logo{font-size:1.45rem;font-weight:700;color:var(--t1);letter-spacing:-.05em;display:flex;align-items:center;gap:4px} .ind-page .logo{color:#fff} .ind-page .logo .xlogo-ect{color:#fff} .ind-page .logo .x-outline-base{stroke:url(#xline-nd)} .ind-page .logo .x-solid-base{stroke:url(#xsolid-nd)} .ind-page .nav.on .logo{color:var(--t1)} .ind-page .nav.on .logo .xlogo-ect{color:var(--t1)} .ind-page .nav.on .logo .x-outline-base{stroke:url(#xline-n)} .ind-page .nav.on .logo .x-solid-base{stroke:url(#xsolid-n)} .ind-page .nl{color:#fff} .ind-page .nl:hover{color:#fff} .ind-page .nav.on .nl{color:var(--t2)} .ind-page .nav.on .nl:hover{color:var(--t1)} .logo-dot{display:none} .logo{display:inline-flex;align-items:baseline;text-decoration:none} .nm{display:flex;align-items:center;gap:10px;position:absolute;left:50%;transform:translateX(-50%)} .nit{position:relative} .nl{display:flex;align-items:center;gap:6px;padding:9px 18px;font-size:.9rem;font-weight:500;color:var(--t2);border-radius:100px;transition:color var(--e1),background var(--e1);cursor:default} .nl:hover{color:var(--t1);background:rgba(80,70,229,.06)} .nl svg{transition:transform var(--e1)} .nit:hover .nl svg{transform:rotate(180deg)} .dd{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:262px;background:#fff;border:1px solid var(--hairp);border-radius:var(--rl);box-shadow:0 26px 70px rgba(80,70,229,.16);padding:9px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s} .nit:hover .dd{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)} .dd{min-width:290px} .dd a{display:flex;align-items:center;gap:12px;padding:9px 11px;font-size:.85rem;font-weight:500;color:var(--t2);border-radius:12px;transition:background var(--e1),color var(--e1)} .dd a:hover{background:rgba(80,70,229,.07);color:var(--p)} .ddt{display:flex;flex-direction:column;gap:1px;min-width:0} .ddt b{font-size:.86rem;font-weight:600;color:var(--t1);letter-spacing:-.01em;line-height:1.25;transition:color var(--e1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ddt small{font-size:.73rem;font-weight:450;color:var(--t3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .dd a:hover .ddt b{color:var(--p)} .ddi{width:34px;height:34px;background:rgba(80,70,229,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--p);transition:background var(--e1),color var(--e1)} .dd a:hover .ddi{background:var(--grad);color:#fff} .ddi .ic{width:16px;height:16px} .na{display:flex;align-items:center;gap:12px;justify-self:end} /* Mobile hamburger + slide-out panel */ .nhamb{display:none;position:relative;width:38px;height:38px;background:none;border:none;cursor:pointer;flex-shrink:0} .nhamb span{position:absolute;right:9px;width:20px;height:2px;background:var(--t1);border-radius:2px;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s ease,top .35s cubic-bezier(.65,0,.35,1),width .35s cubic-bezier(.65,0,.35,1)} .nhamb span:nth-child(1){top:14px;width:20px} .nhamb span:nth-child(2){top:18px;width:11px} .nhamb span:nth-child(3){top:22px;width:20px} .ind-page .nhamb span{background:#fff} .ind-page .nav.on .nhamb span{background:var(--t1)} .nhamb[aria-expanded="true"] span:nth-child(1){top:18px;width:20px;transform:rotate(45deg)} .nhamb[aria-expanded="true"] span:nth-child(2){opacity:0;width:0;right:19px} .nhamb[aria-expanded="true"] span:nth-child(3){top:18px;width:20px;transform:rotate(-45deg)} .nmob{display:none;position:fixed;top:var(--nh);left:0;right:0;bottom:0;background:#fff;z-index:999;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--e1)} .nmob.on{transform:translateX(0)} .nmob-links{padding:8px 24px 8px} .nmob-acc{border-bottom:1px solid var(--hair)} .nmob-acc-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:18px 4px;background:none;border:none;font-size:1rem;font-weight:600;color:var(--t1);text-align:left;cursor:pointer;font-family:inherit} .nmob-link{display:block;padding:18px 4px;font-size:1rem;font-weight:600;color:var(--t1);text-decoration:none} .nmob-acc-arw{flex-shrink:0;color:var(--t3);transition:transform var(--e1)} .nmob-acc-hd[aria-expanded="true"] .nmob-acc-arw{transform:rotate(180deg)} .nmob-acc-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--e1)} .nmob-acc-body>.nmob-acc-body-in{min-height:0;overflow:hidden} .nmob-acc.open .nmob-acc-body{grid-template-rows:1fr} .nmob-sub-lbl{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin:0 4px 10px;padding-top:16px;border-top:1px solid var(--hair)} .nmob-sub-lbl:first-child{padding-top:4px;border-top:none} .nmob-acc-body a{display:block;padding:8px 4px;text-decoration:none} .nmob-acc-body a+.nmob-sub-lbl{margin-top:6px} .nmob-acc-body a b{display:block;font-size:.94rem;font-weight:600;color:var(--t1)} .nmob-acc-body a small{display:block;font-size:.78rem;color:var(--t3);margin-top:2px} .nmob-foot{display:flex;flex-direction:column;gap:12px;padding:20px 24px 32px} .nmob-foot .nl{justify-content:center;padding:12px;border:1px solid var(--hair);border-radius:100px} .nmob-foot .btn{justify-content:center} /* Grouped mega-menu (Platform, Solutions) */ .dd-mega{min-width:600px;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:28px} .dd-solutions{min-width:820px;grid-template-columns:2fr 1fr} .dd-solutions .dd-grp:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-content:start} .dd-solutions .dd-grp:first-child .dd-grp-lbl{grid-column:1 / -1} .dd-ind-grid{display:grid;grid-template-columns:1fr} .dd-grp{position:relative} .dd-grp+.dd-grp::before{content:'';position:absolute;top:0;bottom:0;left:-14px;width:1px;background:var(--hair)} .dd-grp-lbl{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding:8px 11px 6px} .dd-mega a{min-width:0} /* ═══════════════════════ HERO ═══════════════════════ */ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 65% at 70% 8%,#EEEFFF 0%,#FBFBFE 60%);padding-top:0} #bg3d{position:absolute;inset:0;width:100%;height:100%;opacity:.8} .hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--bg) 96%);pointer-events:none} .hero-c{position:relative;z-index:3;padding-top:calc(var(--nh) + 24px) !important;padding-bottom:10px} .hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px} .hero-pill{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 6px;background:rgba(255,255,255,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hairp);border-radius:100px;box-shadow:0 2px 18px rgba(80,70,229,.1);font-size:.82rem;font-weight:500;color:var(--t2)} .hp-tag{background:var(--grad);color:#fff;padding:4px 11px;border-radius:100px;font-size:.7rem;font-weight:600} .hero h1{max-width:1100px;margin-bottom:26px} .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em} .word>span{display:inline-block;will-change:transform} .hero-low{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:end} .hero-sub{font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:520px;color:var(--t2);opacity:0} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;opacity:0} .hero-meta{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;border-top:1px solid var(--hair);opacity:0} .hm{padding:20px 28px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--hair)} .hm:nth-child(odd){border-right:1px solid var(--hair)} .hm-v{font-size:clamp(1.05rem,1.2vw,1.22rem);font-weight:600;letter-spacing:-.02em;line-height:1.22;background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hm-l{font-size:.76rem;color:var(--t2);margin-top:8px;letter-spacing:.02em;line-height:1.45} .scroll-cue{display:none} .scroll-cue .line{width:1px;height:36px;background:var(--hair);position:relative;overflow:hidden} .scroll-cue .line::after{content:'';position:absolute;top:0;left:0;width:100%;height:50%;background:var(--p);animation:cue 1.8s ease-in-out infinite} @keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}} /* ticker */ .ticker{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:15px 0;border-top:1px solid var(--hair);background:rgba(251,251,254,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;opacity:0} .ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite} .ticker-track:hover{animation-play-state:paused} @keyframes tick{to{transform:translateX(-50%)}} .tk{display:flex;align-items:center;gap:9px;padding:0 38px;font-size:.8rem;font-weight:700;color:var(--t2);white-space:nowrap} .tk-ic{width:14px;height:14px;flex-shrink:0;color:var(--p);opacity:.8} .tk-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .dg{background:#10B981}.db{background:#6366F1}.do{background:#F59E0B}.dc{background:#22D3EE} /* ═══════════════════════ LOGOS ═══════════════════════ */ .marq{padding:54px 0;border-bottom:1px solid var(--hair);overflow:hidden} .marq-lbl{text-align:center;font-size:.68rem;font-weight:600;color:var(--t3);letter-spacing:.22em;text-transform:uppercase;margin-bottom:30px} .marq-track{display:flex;width:max-content;animation:tick 32s linear infinite} .marq-track:hover{animation-play-state:paused} .mq{padding:0 52px;font-weight:600;font-size:1.15rem;color:var(--t3);opacity:.45;letter-spacing:-.02em;white-space:nowrap;transition:opacity var(--e1)} .mq:hover{opacity:.85} /* ═══════════════════════ STORY ═══════════════════════ */ .story-sec{padding:110px 0} .story-beats{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 64px;font-weight:600;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.035em;flex-wrap:wrap} .story-beats .ar{color:var(--p);opacity:.4;font-size:.8em} .story-beats .b-in{background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .story-flow{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)} .sn{padding:30px 22px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);position:relative;transition:background var(--e2)} .sn:hover{background:rgba(80,70,229,.04)} .sn-i{font-size:.7rem;color:var(--t3);font-variant-numeric:tabular-nums;margin-bottom:18px} .sn-ic{width:42px;height:42px;border-radius:12px;background:rgba(80,70,229,.08);color:var(--p);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background var(--e2),color var(--e2)} .sn:hover .sn-ic{background:var(--grad);color:#fff} .sn-ic .ic{width:20px;height:20px} .sn-t{font-weight:600;font-size:.95rem;margin-bottom:5px;letter-spacing:-.01em} .sn-s{font-size:.76rem;color:var(--t3);line-height:1.5} /* ═══════════════════════ KINETIC BAND ═══════════════════════ */ .ko{padding:70px 0;overflow:hidden;background:var(--ink)} .ko-row{white-space:nowrap;font-weight:700;font-size:clamp(2rem,5vw,4.5rem);line-height:1.04;letter-spacing:-.03em;will-change:transform} .ko-row .fill{color:#fff} .ko-row .out{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32)} .ko-row .dotsep{color:var(--pl);margin:0 .25em} /* ═══════════════════════ PIPELINE ═══════════════════════ */ .pipe{background:radial-gradient(125% 80% at 50% -8%,#17142F 0%,#0B0C14 52%),var(--ink);color:#fff;overflow:hidden;padding:0;position:relative} .pipe-intro{padding:120px 0 10px;position:relative;z-index:2} .pipe-intro .lbl{color:#566}.pipe-intro .lbl::after{background:rgba(255,255,255,.1)} .pipe-intro h2{color:#fff;max-width:760px;margin-top:26px} .pipe-intro p{color:#8b91a8;margin-top:18px;font-size:1.06rem} .pipe-viewport{height:100vh;display:flex;align-items:center;position:relative} .pipe-track{display:flex;will-change:transform} .pipe-panel{width:100vw;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 8vw} .pp-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1140px;width:100%} .pp-num{font-size:clamp(5rem,13vw,10.5rem);font-weight:700;line-height:.82;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(167,139,250,.55);margin-bottom:26px} .pp-txt h3{font-size:clamp(1.9rem,3.6vw,2.9rem);color:#fff;margin-bottom:18px;letter-spacing:-.03em} .pp-txt p{color:#9399ae;font-size:1.08rem;max-width:430px} .pp-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} .pp-tag{padding:7px 16px;border-radius:100px;font-size:.78rem;font-weight:500;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#b8bdd0} .pp-vis{height:390px;border-radius:var(--rx);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 34px 80px rgba(0,0,0,.45)} .pp-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.32),transparent 65%);filter:blur(26px)} .vz-ic{color:#cdd2e6}.vz-ic .ic{width:16px;height:16px} .vz-stream{display:flex;flex-direction:column;gap:12px;width:76%;position:relative;z-index:1} .vz-row{display:flex;align-items:center;gap:12px} .vz-icb{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0} .vz-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden} .vz-bar i{display:block;height:100%;border-radius:3px;background:var(--grad3);animation:flow 2.4s ease-in-out infinite} @keyframes flow{0%,100%{width:30%;opacity:.5}50%{width:95%;opacity:1}} .vz-radar{width:235px;height:235px;border-radius:50%;border:1px solid rgba(255,255,255,.1);position:relative;z-index:1;display:flex;align-items:center;justify-content:center} .vz-radar::before,.vz-radar::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.07)} .vz-radar::before{width:66%;height:66%}.vz-radar::after{width:33%;height:33%} .vz-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(124,58,237,.42),transparent 30%);animation:spin 3.5s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .vz-blip{position:absolute;width:11px;height:11px;border-radius:50%;background:#22D3EE;box-shadow:0 0 12px #22D3EE;animation:blip 2s ease-in-out infinite} .vz-blip.b2{top:62%;left:35%;animation-delay:.7s;background:#F59E0B;box-shadow:0 0 12px #F59E0B} .vz-blip.b1{top:28%;left:64%} @keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}} .vz-tree{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .vz-node{padding:12px 22px;border-radius:13px;font-size:.84rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff} .vz-node.root{background:var(--grad);border:none;box-shadow:0 10px 28px rgba(80,70,229,.42)} .vz-branches{display:flex;gap:40px;margin-top:46px;position:relative} .vz-branches::before{content:'';position:absolute;top:-46px;left:50%;width:1px;height:23px;background:rgba(255,255,255,.2)} .vz-branches::after{content:'';position:absolute;top:-23px;left:25%;width:50%;height:1px;background:rgba(255,255,255,.2)} .vz-branch{position:relative} .vz-branch::before{content:'';position:absolute;top:-23px;left:50%;width:1px;height:23px;background:rgba(255,255,255,.2)} .vz-act{position:relative;z-index:1;width:130px;height:130px;display:flex;align-items:center;justify-content:center} .vz-core{width:68px;height:68px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 0 44px rgba(124,58,237,.6);z-index:2;color:#fff} .vz-core .ic{width:28px;height:28px} .vz-pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(124,58,237,.5);animation:pulse 2.4s ease-out infinite} .vz-pulse:nth-child(2){animation-delay:.8s}.vz-pulse:nth-child(3){animation-delay:1.6s} @keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.2);opacity:0}} .pipe-prog{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:5} .pd{width:36px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s,width .4s} .pd.on{background:var(--grad3);width:54px} /* ═══════════════════════ PLATFORM ═══════════════════════ */ .plat-hd{margin-bottom:64px} .plat-hd h2{max-width:640px;margin-top:26px} .plat-hd p{font-size:1.06rem;max-width:560px;margin-top:20px} .feat{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:stretch} .feat-tabs{display:flex;flex-direction:column;border-top:1px solid var(--hair)} .ft{display:flex;gap:18px;padding:22px 18px;cursor:default;border-bottom:1px solid var(--hair);position:relative;transition:background var(--e2),padding var(--e2)} .ft::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad3);transform:scaleY(0);transition:transform var(--e2)} .ft:hover{background:rgba(80,70,229,.03)} .ft.on{background:rgba(80,70,229,.045);padding-left:26px} .ft.on::before{transform:scaleY(1)} .ft-n{font-size:.72rem;color:var(--t3);font-variant-numeric:tabular-nums;padding-top:5px;width:24px;flex-shrink:0} .ft-ic{width:44px;height:44px;border-radius:12px;background:rgba(80,70,229,.08);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--e2),color var(--e2)} .ft.on .ft-ic{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(80,70,229,.3)} .ft-tx{min-width:0;flex:1} .ft-tx h3{font-size:1.04rem;transition:color var(--e2)} .ft.on .ft-tx h3{color:var(--p)} .ft-tx p{font-size:.85rem;line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height var(--e2),opacity var(--e2),margin var(--e2)} .ft.on .ft-tx p{max-height:140px;opacity:1;margin-top:7px} .ft-badge{display:none;align-items:center;padding:3px 12px;border-radius:100px;background:rgba(80,70,229,.08);font-size:.7rem;font-weight:600;color:var(--p);margin-top:11px;width:fit-content} .ft.on .ft-badge{display:inline-flex} .feat-stage{position:relative;border-radius:var(--rx);overflow:hidden;min-height:500px;background:linear-gradient(150deg,rgba(80,70,229,.05),rgba(255,255,255,.75));backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.9);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.9)} .feat-stage::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:var(--grad);opacity:.07;filter:blur(54px);top:-50px;right:-50px;pointer-events:none} .fp{position:absolute;inset:0;padding:44px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s,transform .45s} .fp.on{opacity:1;transform:translateY(0);pointer-events:auto} .fp-hd{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:24px;display:flex;align-items:center;gap:9px} .dotlive{width:7px;height:7px;border-radius:50%;background:#10B981;animation:bp 1.5s infinite} @keyframes bp{0%,100%{opacity:1}50%{opacity:.3}} .mc{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.95);border-radius:15px;box-shadow:0 4px 18px rgba(80,70,229,.07)} .es{display:flex;align-items:center;gap:11px;padding:14px 17px;font-size:.84rem;color:var(--t2);margin-bottom:10px} .es:last-child{margin-bottom:0} .es-d{width:7px;height:7px;border-radius:50%;flex-shrink:0} .es-nm{width:138px;flex-shrink:0;font-weight:500;color:var(--t1)} .es-bar{flex:1;height:6px;border-radius:3px;background:rgba(80,70,229,.1);overflow:hidden} .es-bar i{display:block;height:100%;border-radius:3px;background:var(--grad3);animation:flow 2.6s ease-in-out infinite} .es-t{font-size:.72rem;color:var(--t3);flex-shrink:0;font-variant-numeric:tabular-nums;width:36px;text-align:right} .ag{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:11px} .ag:last-child{margin-bottom:0} .ag-ic{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ag-ic .ic{width:19px;height:19px} .ag-b{flex:1;min-width:0} .ag-t{font-size:.9rem;font-weight:600;color:var(--t1)} .ag-s{font-size:.73rem;color:var(--t3)} .ag-st{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#10B981} .ag-st.wait{color:#F59E0B} .ag-st.wait .dotw{width:7px;height:7px;border-radius:50%;background:#F59E0B} .flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap} .fnode{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .fnode-b{width:78px;height:78px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 26px rgba(80,70,229,.28)} .fnode-b .ic{width:32px;height:32px} .fnode.t1 .fnode-b{background:linear-gradient(135deg,#5046E5,#6D65F0)} .fnode.t2 .fnode-b{background:linear-gradient(135deg,#6D65F0,#7C3AED)} .fnode.t3 .fnode-b{background:linear-gradient(135deg,#7C3AED,#A78BFA)} .fnode span{font-size:.8rem;font-weight:600;color:var(--t1)} .fnode small{font-size:.68rem;color:var(--t3)} .fconn{width:52px;height:2px;background:repeating-linear-gradient(90deg,var(--pl) 0 6px,transparent 6px 11px);margin:0 6px 34px;opacity:.6} .oi-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:15px} .oi-k{padding:16px} .oi-kv{font-size:1.45rem;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1} .oi-kl{font-size:.68rem;color:var(--t3);margin-top:5px} .oi-kc{font-size:.66rem;font-weight:600;color:#10B981;margin-top:3px} .oi-chart{padding:19px} .oi-cl{font-size:.7rem;color:var(--t3);margin-bottom:14px;font-weight:500} .oi-bars{display:flex;align-items:flex-end;gap:7px;height:100px} .oi-bars span{flex:1;border-radius:4px 4px 0 0;background:var(--grad3);opacity:.25} .oi-bars span.hi{opacity:.95} .sec-shield{width:76px;height:76px;border-radius:22px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:24px;box-shadow:0 12px 30px rgba(80,70,229,.3)} .sec-shield .ic{width:36px;height:36px} .sec-list{display:flex;flex-direction:column;gap:10px} .sec-i{display:flex;align-items:center;gap:12px;padding:14px 17px;font-size:.86rem;font-weight:500;color:var(--t1)} .sec-ck{width:22px;height:22px;border-radius:50%;background:rgba(16,185,129,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0} .sec-ck svg{width:13px;height:13px;stroke:#10B981;stroke-width:2.4;fill:none} .sec-i small{margin-left:auto;font-size:.7rem;color:var(--t3);font-weight:400} .intg{display:flex;flex-direction:column;align-items:center} .intg-hub{width:88px;height:88px;border-radius:26px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:28px;box-shadow:0 14px 34px rgba(80,70,229,.32);position:relative} .intg-hub .ic{width:40px;height:40px} .intg-hub::after{content:'';position:absolute;inset:-9px;border-radius:32px;border:1.5px dashed rgba(80,70,229,.22);animation:spin 14s linear infinite} .intg-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:440px} .intg-chip{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:100px;font-size:.82rem;font-weight:500;background:rgba(255,255,255,.85);border:1px solid var(--hairp);color:var(--t2);box-shadow:0 3px 12px rgba(80,70,229,.06)} .intg-chip.more{padding:9px 17px;background:var(--grad);color:#fff;border-color:transparent} .intg-chip .bdg{width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.12)} .intg-chip .bdg svg{width:13px;height:13px} .intg-chip .bdg.tx{font-size:.6rem;font-weight:700;color:#fff} .intg-chip{opacity:0;animation:intgIn .5s ease forwards} .intg-chip:nth-child(1){animation-delay:.05s} .intg-chip:nth-child(2){animation-delay:.2s} .intg-chip:nth-child(3){animation-delay:.35s} .intg-chip:nth-child(4){animation-delay:.5s} .intg-chip:nth-child(5){animation-delay:.65s} .intg-chip:nth-child(6){animation-delay:.8s} .intg-chip:nth-child(7){animation-delay:.95s} @keyframes intgIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}} @media(prefers-reduced-motion:reduce){.intg-chip{animation:none;opacity:1}} /* homepage "Connected Ecosystem" — left→right logo marquee + top-right more chip */ .fp.fp-intg{justify-content:flex-start} .fp-hd.intg-hd{justify-content:space-between} .intg-more{display:inline-flex;align-items:center;padding:6px 14px;border-radius:100px;background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:none;box-shadow:0 6px 16px rgba(80,70,229,.32)} .intg-marq{flex:1;justify-content:center;gap:16px} .intg-marq .iw-chip{box-shadow:0 4px 14px rgba(80,70,229,.08)} .intg-marq-rows{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .intg-marq-rows .iw-row{overflow:hidden} .intg-marq-rows .iw-track{gap:10px;animation-duration:26s} .intg-marq-rows .iw-row.rev .iw-track{animation-duration:32s} .intg-marq-rows .iw-chip{padding:7px 14px 7px 7px;font-size:.74rem;gap:8px;box-shadow:0 3px 10px rgba(80,70,229,.07)} .intg-marq-rows .iw-badge{width:26px;height:26px;font-size:.62rem} .intg-marq-rows .iw-badge svg{width:14px;height:14px} /* ═══════════════════════ SOLUTIONS ═══════════════════════ */ .sol{background:var(--bg2)} .sol-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:start} .sol-sticky{position:sticky;top:130px} .sol-sticky h2{margin-top:26px} .sol-sticky p{margin-top:18px;font-size:1.05rem;max-width:360px} .sol-count{margin-top:40px;display:flex;align-items:baseline;gap:12px} .sol-count b{font-size:3.8rem;font-weight:700;letter-spacing:-.04em;background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1} .sol-count span{font-size:.92rem;color:var(--t3)} .sol-list{border-top:1px solid var(--hair)} .sl{display:grid;grid-template-columns:54px 52px 1fr 46px;gap:20px;align-items:center;padding:30px 4px;border-bottom:1px solid var(--hair);cursor:default;position:relative;transition:padding var(--e2),background var(--e2)} .sl:hover{padding-left:16px;background:rgba(255,255,255,.5)} .sl-n{font-size:.95rem;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums;transition:color var(--e2)} .sl:hover .sl-n{color:var(--p)} .sl-ic{width:48px;height:48px;border-radius:14px;background:rgba(80,70,229,.07);color:var(--p);display:flex;align-items:center;justify-content:center;transition:background var(--e2),color var(--e2)} .sl:hover .sl-ic{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(80,70,229,.3)} .sl-ic .ic{width:22px;height:22px} .sl-tx h3{font-size:1.12rem;margin-bottom:5px;transition:color var(--e2)} .sl:hover .sl-tx h3{color:var(--p)} .sl-tx p{font-size:.87rem;max-width:560px} .sl-arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background var(--e2),color var(--e2),transform var(--e2),border-color var(--e2)} .sl:hover .sl-arr{background:var(--grad);border-color:transparent;color:#fff;transform:rotate(-45deg)} /* full-card deep links (Platform tabs §4 + Solutions rows §5) */ .ft-link,.sl-link{position:absolute;inset:0;z-index:3} /* ═══════════════════════ TELECOM ═══════════════════════ */ .tel{background:linear-gradient(150deg,#080B18,#0E0B28 50%,#080D1C);position:relative;overflow:hidden} .tel::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(80,70,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(80,70,229,.06) 1px,transparent 1px);background-size:66px 66px;pointer-events:none} .tel-glow{position:absolute;width:540px;height:430px;border-radius:50%;background:rgba(80,70,229,.16);filter:blur(95px);top:6%;right:6%;pointer-events:none} .tel-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center;position:relative;z-index:1} .tel .lbl{color:#566}.tel .lbl::after{background:rgba(255,255,255,.1)} .tel h2{color:#fff;margin-top:26px} .tel-int{color:#94A3B8;font-size:1.05rem;max-width:460px;margin-top:18px} .tel-feats{display:flex;flex-direction:column;margin-top:44px;border-top:1px solid rgba(255,255,255,.08)} .tf{display:flex;gap:16px;padding:21px 6px;border-bottom:1px solid rgba(255,255,255,.08);transition:padding var(--e2),background var(--e2);cursor:pointer} .tf:hover,.tf.on{padding-left:16px;background:rgba(80,70,229,.08)} .tf-ic{color:#A78BFA;flex-shrink:0;margin-top:2px} .tf-ic .ic{width:24px;height:24px} .tf h4{color:#E2E8F0;margin-bottom:4px} .tf p{font-size:.85rem;color:#64748B} .noc-stage{position:relative;min-height:470px} .noc{position:absolute;inset:0;background:rgba(255,255,255,.04);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.08);border-radius:var(--rx);padding:30px;box-shadow:0 34px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s,transform .4s} .noc.on{opacity:1;transform:translateY(0);pointer-events:auto} .noc-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px} .noc-ti{display:flex;align-items:center;gap:12px} .noc-ic{width:38px;height:38px;background:var(--grad);border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff} .noc-ic .ic{width:19px;height:19px} .noc-name{font-size:.95rem;font-weight:600;color:#E2E8F0} .noc-sub{font-size:.72rem;color:#475569} .live{display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.3);font-size:.72rem;font-weight:600;color:#10B981} .noc-met{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px} .nm-c{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,.05);text-align:center} .nm-v{font-size:1.3rem;font-weight:700;color:#A78BFA;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums} .nm-l{font-size:.62rem;color:#475569;font-weight:500} .noc-feed{display:flex;flex-direction:column;gap:8px} .nf-l{font-size:.64rem;color:#334155;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin-bottom:4px} .nf{display:flex;align-items:center;gap:9px;font-size:.76rem;color:#94A3B8;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:10px} .nf-d{width:6px;height:6px;border-radius:50%;flex-shrink:0} /* ═══════════════════════ PERSONAS ═══════════════════════ */ .per-hd{text-align:center;max-width:640px;margin:0 auto 64px} .per-hd h2{margin-top:26px} .per-hd p{margin-top:16px;font-size:1.06rem} .per-g{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair)} .pc{padding:34px 24px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background var(--e2),box-shadow var(--e2);position:relative} .pc::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad3);transform:scaleX(0);transition:transform var(--e2)} .pc:hover{background:#fff;box-shadow:0 24px 56px rgba(80,70,229,.12);z-index:1} .pc:hover::after{transform:scaleX(1)} .pc-av{width:50px;height:50px;border-radius:14px;background:rgba(80,70,229,.08);color:var(--p);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background var(--e2),color var(--e2)} .pc:hover .pc-av{background:var(--grad);color:#fff} .pc-av .ic{width:23px;height:23px} .pc-t{font-weight:600;color:var(--t1);margin-bottom:7px;font-size:.96rem} .pc-d{font-size:.8rem;line-height:1.55;color:var(--t3)} /* ═══════════════════════ SECURITY / CERTIFICATIONS ═══════════════════════ */ .sec-c{background:var(--bg2);position:relative;overflow:hidden} .sec-c::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 90% 8%,rgba(80,70,229,.035) 0 1px,transparent 1px 12px);pointer-events:none} .sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-bottom:64px;position:relative;z-index:1} .sec-head h2{margin-top:24px} .sec-head p{font-size:1.06rem;margin-top:18px;max-width:480px} /* animated certified stamp */ .stamp-stage{position:relative;height:400px} .stamp-paper{position:absolute;left:50%;top:50%;width:212px;height:212px;margin:-106px 0 0 -106px;border-radius:50%;background:radial-gradient(circle at 42% 36%,#fff,#EEEEFA);box-shadow:0 30px 64px rgba(80,70,229,.13),inset 0 1px 0 #fff;border:1px solid var(--hair);z-index:0} .stamp-paper::after{content:'';position:absolute;inset:16px;border-radius:50%;border:1px dashed rgba(80,70,229,.14)} .stamp-imprint{position:absolute;left:50%;top:50%;width:184px;height:184px;margin:-92px 0 0 -92px;color:rgba(80,70,229,.62);opacity:0;filter:blur(.3px);z-index:1} .stamp-imprint svg{width:100%;height:100%;display:block} .stamp-shadow{position:absolute;left:50%;top:50%;width:178px;height:34px;margin:-17px 0 0 -89px;border-radius:50%;background:rgba(80,70,229,.26);filter:blur(14px);opacity:0;z-index:1} .stamp-rig{position:absolute;left:50%;top:50%;width:166px;margin-left:-83px;margin-top:-150px;display:flex;flex-direction:column;align-items:center;z-index:4;transform-origin:50% 100%;pointer-events:none;will-change:transform} .sr-knob{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#B79CFF,#7C3AED 58%,#5A33C0);box-shadow:0 8px 18px rgba(80,70,229,.4),inset 0 3px 7px rgba(255,255,255,.45),inset 0 -4px 8px rgba(0,0,0,.18)} .sr-neck{width:24px;height:30px;margin-top:-3px;border-radius:5px;background:linear-gradient(90deg,#5A33C0,#7C3AED 45%,#9B72F0);box-shadow:0 4px 10px rgba(80,70,229,.3)} .sr-base{width:164px;height:52px;margin-top:-2px;border-radius:15px;position:relative;background:linear-gradient(180deg,#6D65F0,#4F46E5 65%,#3B33B8);box-shadow:0 14px 30px rgba(80,70,229,.45),inset 0 3px 5px rgba(255,255,255,.38),inset 0 -5px 10px rgba(0,0,0,.22)} .sr-base::after{content:'';position:absolute;left:10px;right:10px;bottom:-7px;height:12px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#2E2A8A,#211d6b)} .ink-ring{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;border:2px solid var(--p);opacity:0;pointer-events:none;z-index:3} .spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ac);opacity:0;pointer-events:none;z-index:3} /* credential tiles */ .cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1} .cert{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:330px;border:1px solid var(--hair);border-radius:var(--rl);background:#fff;padding:28px;box-shadow:var(--sh);transition:transform var(--e2),box-shadow var(--e2),border-color var(--e2)} .cert-logo{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;color:#474d63;background:radial-gradient(circle at 38% 30%,#fff,#E7E8F4);border:1px solid var(--hair);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 4px rgba(255,255,255,.55),0 8px 20px rgba(80,70,229,.1);transition:box-shadow var(--e2),color var(--e2)} .cert-logo svg{width:62px;height:62px;display:block} .cert:hover .cert-logo{color:var(--p);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 4px rgba(255,255,255,.55),0 14px 28px rgba(80,70,229,.18)} .cert::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 80% 18%,rgba(80,70,229,.05) 0 1px,transparent 1px 9px);opacity:.7;pointer-events:none} .cert:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(80,70,229,.14);border-color:var(--hairp)} .cert h3{position:relative;z-index:1;font-size:1.16rem;letter-spacing:-.02em} .cert p{position:relative;z-index:1;font-size:.85rem;color:var(--t2);margin-top:9px;line-height:1.55} .cert-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);font-weight:600} .cert-ver{display:flex;align-items:center;gap:6px;color:#10B981} .cert-ver .dotlive{width:6px;height:6px} .cert-ver.cert-pending{color:#D97706} .cert-ver.cert-pending .dot-pending{width:6px;height:6px;border-radius:50%;background:#D97706} /* ═══════════════════════ QUOTE ═══════════════════════ */ .qt{padding:120px 0;text-align:center;border-top:1px solid var(--hair)} .qt-mark{font-size:4.5rem;line-height:.6;background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;margin-bottom:26px} .qt blockquote{font-size:clamp(1.4rem,2.8vw,2.1rem);font-weight:500;letter-spacing:-.025em;line-height:1.35;max-width:880px;margin:0 auto 30px;color:var(--t1)} .qt-who{font-size:.9rem;color:var(--t3)} .qt-who b{color:var(--t1);font-weight:600} /* ═══════════════════════ STATS ═══════════════════════ */ .st{padding:0 0 130px} .st-g{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)} .si{padding:64px 30px 0;border-right:1px solid var(--hair)} .si:last-child{border-right:none} .si-v{font-size:clamp(3rem,6vw,5rem);font-weight:700;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;background:var(--grad3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:14px} .si-l{font-size:.9rem;color:var(--t2);font-weight:500;max-width:180px} /* ═══════════════════════ CTA ═══════════════════════ */ .cta{padding:0 36px 130px} .cta-in{max-width:var(--wrap);margin:0 auto;background:radial-gradient(420px circle at var(--mx,50%) var(--my,38%),rgba(255,255,255,.13),transparent 62%),radial-gradient(900px 520px at 14% -12%,rgba(167,139,250,.5),transparent 62%),radial-gradient(820px 480px at 88% 115%,rgba(124,58,237,.65),transparent 62%),radial-gradient(640px 400px at 80% -20%,rgba(109,101,240,.55),transparent 58%),linear-gradient(160deg,#3A2FC9 0%,#5046E5 42%,#5B21B6 100%);border-radius:var(--rx);padding:clamp(60px,8vw,110px) clamp(32px,6vw,90px);position:relative;overflow:hidden;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.07),0 44px 96px rgba(80,70,229,.32)} .cta-in::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:48px 48px;opacity:.2;-webkit-mask-image:radial-gradient(ellipse 90% 95% at 50% 40%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 90% 95% at 50% 40%,#000 40%,transparent 100%);animation:ctaGrid 14s linear infinite;transition:opacity .5s} .cta-in:hover::before{opacity:.3} .cta-in::after{content:'';position:absolute;inset:0;background-image:radial-gradient(560px 340px at 22% 18%,rgba(255,255,255,.14),transparent 65%),radial-gradient(700px 420px at 82% 88%,rgba(46,16,120,.5),transparent 68%),radial-gradient(480px 300px at 60% 30%,rgba(167,139,250,.28),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.32;mix-blend-mode:soft-light;pointer-events:none} .cta-orb{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform} .cta-orb.o1{width:460px;height:460px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(196,181,253,.08) 55%,transparent 75%);top:-42%;right:-6%;animation:ctaOrb1 16s ease-in-out infinite alternate} .cta-orb.o2{width:380px;height:380px;background:radial-gradient(circle,rgba(30,10,92,.55),rgba(76,29,149,.25) 55%,transparent 75%);bottom:-42%;left:-5%;animation:ctaOrb2 20s ease-in-out infinite alternate} @keyframes ctaOrb1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,60px) scale(1.18)}100%{transform:translate(40px,-30px) scale(.94)}} @keyframes ctaOrb2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-50px) scale(1.15)}100%{transform:translate(-40px,30px) scale(.92)}} @keyframes ctaGrid{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}} @media(prefers-reduced-motion:reduce){.cta-orb.o1,.cta-orb.o2,.cta-in::before{animation:none}} .cta-c{position:relative;z-index:1;max-width:660px;margin:0 auto} .cta-c h2{color:#fff;text-shadow:0 2px 24px rgba(30,15,110,.35)} .cta-c p{color:rgba(255,255,255,.78);margin:20px 0 42px;font-size:1.08rem} .cta-bts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ═══════════════════════ FOOTER ═══════════════════════ */ footer{background:var(--ink);padding:92px 0 46px} .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:52px;padding-bottom:62px;border-bottom:1px solid rgba(255,255,255,.06)} .fbl .logo{color:#fff;display:flex;margin-bottom:16px} .fbl .logo .xlogo-ect{color:#fff} .fbl .logo-dot{background:linear-gradient(135deg,#6D65F0,#A78BFA)} .fbl p{color:#374151;font-size:.9rem;max-width:280px} .fsoc{display:flex;gap:9px;margin-top:24px} .fsb{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#5b6478;transition:all var(--e1)} .fsb:hover{background:var(--p);border-color:var(--p);color:#fff;transform:translateY(-2px)} .fsb .ic{width:16px;height:16px} .fc h5{font-size:.68rem;font-weight:700;color:#fff;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px} .fc ul{display:flex;flex-direction:column;gap:12px} .fc ul + .fc-sub-lbl{margin-top:18px} .fc-sub-lbl{font-size:.62rem;font-weight:700;color:#6B7280;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px} .fc-cols{display:flex;flex-direction:column;gap:32px} .fc-cols .fc-sub-lbl{margin-top:0} .fc a{font-size:.88rem;color:#374151;transition:color var(--e1)} .fc a:hover{color:#94A3B8} .fbot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:30px;font-size:.8rem;color:rgba(255,255,255,.45)} .fbot-cr{text-align:left} .fleg{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .fleg a{color:rgba(255,255,255,.45);transition:color var(--e1)} .fleg a:hover{color:#fff} .fleg button{background:none;border:none;font:inherit;padding:0;cursor:pointer;color:rgba(255,255,255,.45);transition:color var(--e1)} .fleg button:hover{color:#fff} /* ═══════════════════════ REVEALS ═══════════════════════ */ .rv{opacity:0;transform:translateY(36px)} .rv-l{opacity:0;transform:translateX(-36px)} .rv-r{opacity:0;transform:translateX(36px)} /* ═══════════════════════ RESPONSIVE ═══════════════════════ */ @media(max-width:1080px){ .feat{grid-template-columns:1fr;gap:38px} .per-g{grid-template-columns:repeat(3,1fr)} .fg{grid-template-columns:1fr 1fr 1fr} .sol-grid{grid-template-columns:1fr;gap:50px}.sol-sticky{position:static} .hero-low{grid-template-columns:1fr;gap:44px} .hero-meta{max-width:480px} .story-flow{grid-template-columns:repeat(3,1fr)} .cert-grid{grid-template-columns:repeat(2,1fr)} .sec-head{grid-template-columns:1fr;gap:36px}.stamp-stage{height:300px} } @media(max-width:860px){ section{padding:92px 0} .nm{display:none} .na{display:none} .nhamb{display:flex} .nmob{display:block} .pp-inner{grid-template-columns:1fr;gap:32px;text-align:center} .pp-vis{height:300px;width:100%} .ft{flex-wrap:wrap} .ft .feat-stage{position:relative;min-height:360px;height:auto;margin-top:18px;width:100%;flex-basis:100%} .ft .feat-stage .fp{position:relative;inset:auto;padding:22px} .ft .feat-stage .fp:not(.on){display:none} .ft .mock-body{min-height:0} .ft .oi-kpis{grid-template-columns:repeat(3,1fr);gap:8px} .ft .oi-k{padding:10px 6px} .ft .oi-kv{font-size:1.3rem} .ft .oi-kl{font-size:.68rem} .ft .pmv-svg{max-height:170px} .ft .pmv-lbl{display:none} .ft .pmv-flags{gap:8px} .ft .pmv-flag{padding:7px 12px} .pipe-viewport{height:auto;padding:0 0 68px;display:block} .pipe-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;will-change:auto} .pipe-track::-webkit-scrollbar{display:none} .pipe-panel{scroll-snap-align:center;padding:0 6vw;box-sizing:border-box} .pipe-prog{position:static;transform:none;justify-content:center;margin-top:20px} .tel-grid{grid-template-columns:1fr;gap:50px} .noc-stage{min-height:0;height:auto} .noc{position:relative;inset:auto;display:none} .noc.on{display:block} .st-g{grid-template-columns:repeat(2,1fr)} .si{padding:44px 22px 0}.si:nth-child(2){border-right:none} .per-g{grid-template-columns:repeat(2,1fr)} .fg{grid-template-columns:1fr 1fr}.fbot{flex-direction:column;gap:14px;text-align:center} .fbot-cr{text-align:center} .fleg{justify-content:center;row-gap:10px} .sl{grid-template-columns:40px 1fr 44px}.sl-ic{display:none} .flow{flex-wrap:nowrap} .fnode-b{width:44px;height:44px;border-radius:14px} .fnode-b .ic{width:20px;height:20px} .fnode span{font-size:.62rem} .fnode small{font-size:.56rem} .fconn{width:20px;margin:0 2px 26px} .mock-log .lg{flex-wrap:wrap} .mock-log .lg-tx{flex:0 0 100%;margin-top:3px;padding-left:16px} } @media(max-width:560px){ .story-flow{grid-template-columns:1fr 1fr} .feat-stage{min-height:430px}.fp{padding:26px} .st-g{grid-template-columns:1fr 1fr}.si:nth-child(3){border-right:none} .per-g{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr} .noc-met{grid-template-columns:1fr 1fr} .cert-grid{grid-template-columns:1fr} .hero-meta{grid-template-columns:1fr 1fr} } @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ═══════════════════════ DEMO MODAL ═══════════════════════ */ body.modal-open{overflow:hidden} .modal{position:fixed;inset:0;z-index:10002;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s ease} .modal.open{opacity:1;pointer-events:auto} .modal-bg{position:absolute;inset:0;background:rgba(11,12,20,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .modal-card{position:relative;width:100%;max-width:780px;max-height:min(820px,92vh);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--rx);box-shadow:0 40px 110px rgba(11,12,20,.42);transform:translateY(26px) scale(.97);transition:transform .45s cubic-bezier(.16,1,.3,1)} .modal.open .modal-card{transform:none} .modal-inner{overflow-y:auto;flex:1;padding:clamp(24px,4vw,40px);scrollbar-width:thin;scrollbar-color:rgba(80,70,229,.18) transparent} .modal-inner::-webkit-scrollbar{width:4px} .modal-inner::-webkit-scrollbar-track{background:transparent} .modal-inner::-webkit-scrollbar-thumb{background:rgba(80,70,229,.18);border-radius:10px} .modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:background var(--e1),color var(--e1);z-index:1} .modal-x:hover{background:var(--bg2);color:var(--t1)} .modal-card h3{font-size:clamp(1.4rem,3vw,1.75rem);margin:12px 0 6px;letter-spacing:-.03em} .modal-sub{font-size:.92rem;color:var(--t2);margin-bottom:24px} .field{margin-bottom:15px} .field label{display:block;font-size:.76rem;font-weight:600;color:var(--t2);margin-bottom:7px} .field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--hair);border-radius:var(--r);font-family:inherit;font-size:.92rem;color:var(--t1);background:#fff;transition:border-color var(--e1),box-shadow var(--e1)} .field input::placeholder,.field textarea::placeholder{color:var(--t3)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px rgba(80,70,229,.13)} .field textarea{resize:vertical;min-height:80px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .req{color:var(--p)} .phone-row{display:flex;align-items:stretch;border:1.5px solid var(--hair);border-radius:var(--r);overflow:hidden;background:#fff;transition:border-color var(--e1),box-shadow var(--e1)} .phone-row:focus-within{border-color:var(--p);box-shadow:0 0 0 4px rgba(80,70,229,.13)} .cc-wrap{position:relative;flex-shrink:0;display:flex} .cc-btn{display:flex;align-items:center;gap:5px;padding:11px 8px 11px 13px;background:#f7f6ff;border:none;border-right:1.5px solid var(--hair);cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--t1);white-space:nowrap;border-radius:0;height:100%;transition:background var(--e1)} .cc-btn:hover{background:#eeebff} .cc-flag{width:1.4em;height:1em;border-radius:2px;flex-shrink:0;display:inline-block;vertical-align:middle} .cc-code{font-size:.84rem;font-weight:600;color:var(--t1)} .cc-arr{color:var(--t3);transition:transform .22s;flex-shrink:0} .cc-btn[aria-expanded=true] .cc-arr{transform:rotate(180deg)} .cc-list{position:fixed;min-width:210px;background:#fff;border:1.5px solid var(--hair);border-radius:14px;box-shadow:0 12px 40px rgba(11,12,20,.13);max-height:240px;overflow-y:auto;z-index:10010;list-style:none;margin:0;padding:5px;scrollbar-width:thin;scrollbar-color:rgba(80,70,229,.2) transparent} .cc-list::-webkit-scrollbar{width:4px} .cc-list::-webkit-scrollbar-thumb{background:rgba(80,70,229,.18);border-radius:10px} .cc-list[hidden]{display:none} .cc-list li{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.86rem;display:flex;align-items:center;gap:9px;white-space:nowrap;color:var(--t1);transition:background var(--e1)} .cc-list li:hover{background:rgba(80,70,229,.06)} .cc-list li[aria-selected=true]{background:rgba(80,70,229,.08);color:var(--p);font-weight:600} .cc-list li .cc-flag{font-size:1.05rem} .field .phone-row input{flex:1;min-width:0;padding:12px 14px;border:none;border-radius:0;box-shadow:none;background:transparent;width:auto} .field .phone-row input:focus{outline:none;border-color:transparent;box-shadow:none} .field-err{display:none;font-size:.72rem;color:#ef4444;margin-top:5px;font-weight:500} .field-err.show{display:block} .field input.invalid,.field select.invalid{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.1)} .modal .btn{width:100%;justify-content:center;margin-top:6px} .modal-fine{font-size:.72rem;color:var(--t3);text-align:center;margin-top:14px;line-height:1.5} .modal-ok{text-align:center;padding:18px 0 8px} .ok-badge{width:66px;height:66px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 12px 30px rgba(80,70,229,.34)} .ok-badge svg{width:30px;height:30px;stroke:#fff;stroke-width:2.4;fill:none} .modal-ok h3{margin-top:0} /* ─── GDPR cookie consent banner + preferences ─── */ .consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:9500;background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-top:1px solid var(--hairp);box-shadow:0 -12px 40px rgba(11,12,20,.12);padding:22px 24px;transform:translateY(120%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease} .consent-banner.show{transform:translateY(0);opacity:1} .consent-banner-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between} .consent-tx{flex:1;min-width:260px;font-size:.86rem;line-height:1.55;color:var(--t2);margin:0} .consent-tx a{color:var(--p);text-decoration:underline;text-underline-offset:2px} .consent-bts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex-shrink:0} .consent-btn-txt{background:none;border:none;font:inherit;font-weight:600;font-size:.85rem;color:var(--t2);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:8px 2px;transition:color var(--e1)} .consent-btn-txt:hover{color:var(--p)} @media(prefers-reduced-motion:reduce){.consent-banner{transition:opacity .3s ease}.consent-banner:not(.show){opacity:0;pointer-events:none}.consent-banner.show{transform:none;opacity:1}} @media(max-width:640px){.consent-banner{padding:20px}.consent-banner-in{gap:16px}.consent-bts{width:100%;flex-direction:column-reverse;align-items:stretch;gap:12px}.consent-bts .btn{width:100%;justify-content:center}.consent-btn-txt{text-align:center;padding:10px;margin-top:2px}} .pref-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair)} .pref-row:last-of-type{border-bottom:none} .pref-tx b{display:block;font-size:.92rem;color:var(--t1);margin-bottom:3px} .pref-tx span{display:block;font-size:.82rem;color:var(--t3);line-height:1.5} .pref-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;margin-top:2px} .pref-toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .pref-toggle input:disabled{cursor:default} .pref-slider{position:absolute;inset:0;background:var(--hair);border-radius:100px;transition:background var(--e1);pointer-events:none} .pref-slider::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,12,20,.25);transition:transform var(--e1)} .pref-toggle input:checked+.pref-slider{background:var(--grad)} .pref-toggle input:checked+.pref-slider::before{transform:translateX(18px)} .pref-toggle.locked{opacity:.65} .pref-toggle input:focus-visible+.pref-slider{outline:2px solid var(--p);outline-offset:2px} .pref-bts{display:flex;flex-direction:column;gap:10px;margin-top:6px} @media(max-width:700px){.row4{grid-template-columns:1fr 1fr}} @media(max-width:520px){.row2{grid-template-columns:1fr}.row4{grid-template-columns:1fr}} /* custom select — replaces the native