*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050507;color:#f4f4f6;font-family:Inter,Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#scene{position:fixed;inset:0;width:100%;height:100%;z-index:-3}.cursor{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(119,91,255,.13),transparent 68%);pointer-events:none;transform:translate(-50%,-50%);z-index:-1}.header{height:82px;position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:linear-gradient(#050507ed,transparent);backdrop-filter:blur(10px)}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:white;font:700 13px "Space Grotesk", Arial, sans-serif;letter-spacing:.08em}.logo b{display:grid;place-items:center;border:1px solid #555;border-radius:9px;width:33px;height:33px;font-size:19px}.logo b:after{content:"";position:absolute;width:5px;height:5px;background:#9a85ff;border-radius:50%;margin:19px 0 0 21px}.header nav{display:flex;gap:32px}.header nav a{color:#999;text-decoration:none;font-size:11px;transition:.25s}.header nav a:hover{color:white}.head-right{display:flex;align-items:center;gap:14px}.langs{display:flex;border:1px solid #292930;border-radius:100px;padding:3px}.langs button{background:none;border:0;color:#666;font:600 9px "Space Grotesk", Arial, sans-serif;padding:6px 7px;border-radius:100px;cursor:pointer}.langs button.active{color:#fff;background:#22222a}.smallcta{color:#fff;text-decoration:none;border:1px solid #333;border-radius:100px;padding:10px 14px;font-size:10px}.hamb{display:none;background:none;border:0;color:white;font-size:20px}.hero{height:100vh;height:100dvh;min-height:620px;position:relative;display:flex;align-items:center;padding:82px 9vw 24px;box-sizing:border-box;overflow:hidden}.hero-copy{max-width:780px;z-index:2;display:flex;flex-direction:column;justify-content:center}.eyebrow,.kicker{font:600 clamp(9px,0.7vw,11px) "Space Grotesk", Arial, sans-serif;letter-spacing:.2em;color:#777}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9a83ff;box-shadow:0 0 16px #9a83ff;margin-right:9px}.hero h1{font:700 clamp(48px,6.8vw,102px)/.91 "Space Grotesk", Arial, sans-serif;letter-spacing:-.065em;margin:clamp(12px,2vh,22px) 0 clamp(14px,2.2vh,24px)}.hero h1 em,.contact h2 em{font-style:normal;background:linear-gradient(120deg, #ffffff, #8e74ff, #4ef2bb, #00d2ff, #c084fc, #ff61d2, #8e74ff);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;animation:colorShift 8s ease infinite;filter:drop-shadow(0 0 25px rgba(142,116,255,0.35));}@keyframes colorShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.hero p{max-width:620px;color:#92929b;font-size:clamp(13px,1.08vw,15.5px);line-height:1.65;margin:0 0 clamp(16px,2.5vh,26px)}.actions{display:flex;gap:12px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;text-decoration:none;border-radius:100px;padding:clamp(12px,1.4vh,15px) clamp(18px,1.5vw,22px);font-size:clamp(10.5px,0.8vw,11.5px);font-weight:700;transition:.3s}.btn.white{background:#fff;color:#050507}.btn.white:hover{transform:translateY(-3px);box-shadow:0 15px 50px #fff2}.btn.line{border:1px solid #303038;color:#fff}.btn.line:hover{border-color:#777}.hero-trust{display:flex;gap:24px;margin-top:clamp(20px,3.5vh,44px);color:#50505a;font:clamp(8.5px,0.65vw,9.5px) "Space Grotesk", Arial, sans-serif;letter-spacing:.12em}.hero-trust b{color:#888}.hero-object{position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:42vw;height:65vh;display:grid;place-items:center;pointer-events:none}.cube{width:185px;height:185px;position:relative;transform-style:preserve-3d;animation:spin 16s linear infinite}.face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #8272d955;background:#7561ff09;font:700 34px "Space Grotesk", Arial, sans-serif;backface-visibility:hidden}.front{transform:translateZ(92px)}.back{transform:rotateY(180deg) translateZ(92px)}.right{transform:rotateY(90deg) translateZ(92px)}.left{transform:rotateY(-90deg) translateZ(92px)}.top{transform:rotateX(90deg) translateZ(92px)}.bottom{transform:rotateX(-90deg) translateZ(92px)}@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}.halo{position:absolute;border-radius:50%;background:radial-gradient(circle,#7159ff22,transparent 67%)}.h1{width:520px;height:520px}.h2{width:270px;height:270px}.orbit{position:absolute;border:1px solid #7770;border-radius:50%;transform:rotate(65deg) scaleY(.4)}.o1{width:600px;height:600px;border-color:#7966ff2a}.o2{width:440px;height:440px;border-color:#fff15}.section{padding:145px 9vw}.about{background:linear-gradient(180deg,transparent,#07070a)}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;margin-top:25px}.about h2,.section-title h2,.work h2,.cap-grid h2,.process>h2,.contact h2{font:600 clamp(44px,6vw,82px)/.98 "Space Grotesk", Arial, sans-serif;letter-spacing:-.06em;margin:0}.about h2 span,.section-title h2 span,.work h2 span,.cap-grid h2 span,.process h2 span{color:#65656e}.about-grid p{color:#777;line-height:1.8;font-size:14px;margin:0 0 20px}.numbers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #222228;border-bottom:1px solid #222228;margin-top:90px}.numbers div{padding:28px 0;display:flex;flex-direction:column;gap:12px;border-right:1px solid #222228;padding-left:20px}.numbers div:first-child{padding-left:0}.numbers div:last-child{border:0}.numbers strong{font:600 30px "Space Grotesk"}.numbers span{font-size:9px;color:#666;letter-spacing:.15em}.section-title,.work-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}.section-title>p,.work-head>p{max-width:350px;color:#777;font-size:13px;line-height:1.8}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-grid article{min-height:350px;border:1px solid #1f1f26;border-radius:22px;padding:30px;position:relative;overflow:hidden;background:linear-gradient(145deg,#0b0b10,#07070a);transition:.4s}.service-grid article:hover{transform:translateY(-8px);border-color:#4a465b}.service-grid article:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-130px;top:-130px;background:radial-gradient(circle,#8069ff1c,transparent 67%)}.service-grid label{position:absolute;right:25px;top:25px;color:#444;font:10px "Space Grotesk"}.ico{font-size:30px;color:#9a84ff;margin-bottom:70px}.service-grid h3{font:600 24px "Space Grotesk", Arial, sans-serif;margin:0 0 13px}.service-grid p{color:#777;font-size:12px;line-height:1.75;margin:0;max-width:340px}.service-grid span{color:#6b6b7a;font:9px "Space Grotesk", Arial, sans-serif;letter-spacing:.08em;position:static}.work{background:#07070a}.work-head{margin-top:25px}.lana{min-height:850px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:120px 9vw;gap:8vw;position:relative;overflow:hidden}.lana-visual{height:600px;position:relative;display:grid;place-items:center}.big-orb{width:410px;height:410px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#d2ccff,#7961da 10%,#221b3b 37%,#08080b 68%);box-shadow:0 0 120px #765aff20,inset -30px -30px 60px #000;position:relative}.big-orb:after{content:"";position:absolute;inset:-30px;border:1px solid #7761ff35;border-radius:50%;animation:orbspin 12s linear infinite}@keyframes orbspin{to{transform:rotate(360deg)}}.big-orb span{font:700 190px "Space Grotesk", Arial, sans-serif;text-shadow:0 0 40px #fff3}.scan{position:absolute;width:520px;height:1px;background:#8c79ff55;box-shadow:0 0 20px #8c79ff;animation:scan 4s ease-in-out infinite}@keyframes scan{50%{transform:translateY(200px)}}.float-label{position:absolute;right:3%;top:10%;color:#555;font:9px "Space Grotesk", Arial, sans-serif;letter-spacing:.16em;writing-mode:vertical-rl}.lana-text h2{font:700 105px/.8 "Space Grotesk", Arial, sans-serif;letter-spacing:-.08em;margin:20px 0}.lana-text h2 sup{font-size:14px;color:#777}.lana-text h3{font:500 28px "Space Grotesk", Arial, sans-serif;margin:20px 0}.lana-text p{color:#777;line-height:1.8;font-size:14px;max-width:500px}.lana-pills{display:flex;gap:7px;flex-wrap:wrap;margin:25px 0}.lana-pills span{border:1px solid #292630;color:#777;border-radius:100px;padding:7px 10px;font:8px "Space Grotesk"}.capabilities{background:#08080b}.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;margin-top:30px}.cap-list{border-top:1px solid #26262d}.cap-list-OLD-REMOVED{display:none}.cap-list b{color:#666;font:10px "Space Grotesk"}.cap-list h3{margin:0;font:600 21px "Space Grotesk"}.cap-list-OLD-P-REMOVED{display:none}.pricing{padding:150px 9vw;background:linear-gradient(180deg,#08080b,#050507)}.pricing-inner{max-width:1200px;margin:auto}.pricing h2{font:600 clamp(45px,6vw,78px)/.98 "Space Grotesk", Arial, sans-serif;letter-spacing:-.06em;margin:25px 0 60px}.pricing h2 span{color:#65656e}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.price-grid>div{border:1px solid #25252c;border-radius:20px;padding:30px;min-height:230px;display:flex;flex-direction:column;background:#09090d}.price-grid .hot{border-color:#6653a4;background:linear-gradient(145deg,#151025,#09090d)}.price-grid small{color:#777;font:9px "Space Grotesk", Arial, sans-serif;letter-spacing:.15em}.price-grid strong{font:600 35px "Space Grotesk", Arial, sans-serif;margin:20px 0 10px}.price-grid p{color:#666;font-size:12px;line-height:1.6}.price-grid a{margin-top:auto;color:#fff;text-decoration:none;font:10px "Space Grotesk"}.custom-note{text-align:center;color:#555;font-size:11px;margin-top:35px}.process{background:#07070a}.process>h2{margin-top:25px}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:75px;border-top:1px solid #25252c;border-bottom:1px solid #25252c}.steps>div{padding:32px 24px;border-right:1px solid #25252c;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .3s,background .3s}.steps>div:last-child{border-right:none}.steps>div:first-child{padding-left:0}.steps>div:hover{border-color:#6a5acd;background:rgba(106,90,205,.04)}.steps b{color:#7664d2;font:700 32px "Space Grotesk", Arial, sans-serif;letter-spacing:-.02em}.steps span{font:600 10px "Space Grotesk", Arial, sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#666}.steps>div:hover span{color:#9a85ff}.steps p{font-size:11px;color:#666;line-height:1.6}.contact{padding:170px 9vw 120px;position:relative;overflow:hidden}.contact-bg{position:absolute;width:650px;height:650px;right:-100px;top:-100px;border-radius:50%;background:radial-gradient(circle,#7961ff16,transparent 65%)}.contact h2{font-size:clamp(60px,9vw,125px);margin:25px 0}.contact>p{color:#777;font-size:14px}.contact-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #25252b;margin-top:80px;padding-top:30px;position:relative}.mail{color:white;text-decoration:none;font:500 clamp(20px,3vw,38px) "Space Grotesk"}.mail span{color:#8d78ff;margin-left:10px}footer{border-top:1px solid #1b1b21;padding:28px 5vw;display:flex;justify-content:space-between;color:#4e4e56;font:9px "Space Grotesk", Arial, sans-serif;letter-spacing:.1em}#loader{position:fixed;inset:0;z-index:10001;background:#050507;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .8s ease}.loader-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(118,100,210,.08),transparent 70%)}.loader-logo{height:120px;width:auto;position:relative;z-index:2;filter:drop-shadow(0 0 40px rgba(118,100,210,.4)) drop-shadow(0 0 80px rgba(78,242,187,.15));animation:loaderFadeIn .8s ease forwards}.loader-text{font:700 32px "Space Grotesk",Arial,sans-serif;letter-spacing:.25em;color:#fff;text-shadow:0 0 30px rgba(154,133,255,.3);animation:loaderFadeIn .8s ease .2s forwards;opacity:0}@keyframes loaderFadeIn{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}.loader-bar-wrap{width:160px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;animation:loaderFadeIn .6s ease .4s forwards;opacity:0}.loader-bar{height:100%;width:0;background:linear-gradient(90deg,#7664d2,#4ef2bb,#9a85ff);border-radius:2px;animation:loaderBarFill 1.8s cubic-bezier(.4,0,.2,1) .5s forwards;box-shadow:0 0 15px rgba(118,100,210,.4)}@keyframes loaderBarFill{0%{width:0}100%{width:100%}}.loader-tagline{font:400 12px "Space Grotesk",Arial,sans-serif;letter-spacing:.3em;color:#555;text-transform:uppercase;opacity:0;animation:loaderFadeIn .8s ease .3s forwards}@keyframes loading{from{width:0}to{width:100%}}/* 3D Portfolio Ring Carousel */
.portfolio3d-wrap{margin-top:55px;--ring-radius:390px;--ring-step:40deg}
.portfolio3d-stage{position:relative;height:480px;perspective:1600px;perspective-origin:50% 42%;overflow:visible}
.portfolio3d{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab;transition:transform .12s linear;will-change:transform}
.portfolio3d.dragging{cursor:grabbing;transition:none}
.pcard{position:absolute;left:50%;top:50%;width:min(300px,74vw);margin-left:calc(min(300px,74vw)/-2);margin-top:-190px;transform:rotateY(calc(var(--i)*var(--ring-step,90deg))) translateZ(var(--ring-radius,470px));transform-style:preserve-3d}
.pcard-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;height:380px;box-sizing:border-box;padding:26px 22px;border:1px solid #26262f;border-radius:24px;background:linear-gradient(165deg,#101018f2,#0a0a10f2);backdrop-filter:blur(6px);box-shadow:0 30px 80px #0009;text-decoration:none;color:#fff;overflow:hidden;position:relative;transition:border-color .3s,box-shadow .3s;pointer-events:none}
.pcard.backfacing .pcard-inner{background:linear-gradient(165deg,#0b0b11e6,#08080de6)}
.pcard-inner:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;top:-110px;right:-110px;background:radial-gradient(circle,#8069ff1f,transparent 67%);pointer-events:none}
.pcard.front .pcard-inner{border-color:#6a5acd;box-shadow:0 30px 90px #000c,0 0 45px #7c5cff2e;pointer-events:auto}
.pcard-logo{width:120px;height:120px;border-radius:28px;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#252038,#0d0d14 70%);border:1px solid #3a3550;box-shadow:inset 0 0 30px #0008;flex-shrink:0}
.pcard-logo img{max-width:74px;max-height:74px;object-fit:contain}
.pcard-logo .nexus-logo-img,.pcard-logo .pm-logo-img{max-width:82px;max-height:82px;object-fit:contain}
.pcard-logo .nexus-logo-img{filter:drop-shadow(0 0 14px #6adfbe66)}
.pcard-logo .nesic-logo-img{max-width:86px;max-height:86px;border-radius:50%;box-shadow:0 0 0 2px #d3a95f55,0 0 18px #d3a95f33}
.pcard-logo .dubocica-logo-img{max-width:86px;max-height:86px;border-radius:14px;box-shadow:0 0 0 2px #ffd70044,0 0 18px #e4002b33}
.pcard-logo .produkt-logo-img{max-width:86px;max-height:86px;border-radius:50%;box-shadow:0 0 0 2px #ffffff33,0 0 18px #1b2a5b55}
.pcard-logo .swb-logo-img{max-width:86px;max-height:86px;border-radius:50%;box-shadow:0 0 0 2px #d4b26244,0 0 18px #00000088}
.pcard-logo .mmd-logo-img{max-width:96px;max-height:66px;filter:drop-shadow(0 0 12px #ff7a1a44)}
.pcard-logo .olympus-logo-img{max-width:96px;max-height:76px;filter:drop-shadow(0 0 14px #2f9df155)}
.textlogo{width:100%;height:100%;display:grid;place-items:center;border-radius:24px}
.textlogo b{font:700 34px "Space Grotesk", Arial, sans-serif;letter-spacing:-.03em}
.textlogo-pm{background:linear-gradient(135deg,#171a2e,#0b0d18);border:1px solid #3d4470}
.textlogo-pm b{background:linear-gradient(120deg,#fff,#8ea0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.textlogo-plus{background:linear-gradient(135deg,#1b1430,#0d0a18);border:1px dashed #6a5acd}
.textlogo-plus b{color:#a18cff;font-size:44px;font-weight:500}
.pcard-name{font:700 clamp(20px,1.8vw,26px)/1.02 "Space Grotesk", Arial, sans-serif;letter-spacing:-.03em}
.pcard-name span{color:#8d78ff}
.pcard-badge{font:600 8.5px "Space Grotesk", Arial, sans-serif;letter-spacing:.18em;color:#777}
.pcard-desc{margin:0;color:#8a8a94;font-size:11.5px;line-height:1.65;max-width:250px}
.pcard-tags{margin-top:auto;color:#8b7dbe;font:9px "Space Grotesk", Arial, sans-serif;letter-spacing:.08em}
.portfolio3d-floor{position:absolute;left:50%;top:66%;width:900px;height:900px;transform:translate(-50%,-50%) rotateX(84deg);border-radius:50%;border:1px solid #7961ff2b;background:radial-gradient(circle,#7961ff0d,transparent 60%);pointer-events:none}
.portfolio3d-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}
.pcar-btn{width:44px;height:44px;border-radius:50%;border:1px solid #2e2e38;background:#0d0d13;color:#fff;font-size:16px;cursor:pointer;transition:.25s}
.pcar-btn:hover{border-color:#8d78ff;background:#161622}
.pcar-dots{display:flex;gap:8px}
.pcar-dot{width:7px;height:7px;border-radius:50%;background:#33333d;border:0;padding:0;cursor:pointer;transition:.25s}
.pcar-dot.active{background:#8d78ff;box-shadow:0 0 12px #8d78ff}
.pcar-hint{text-align:center;color:#4a4a54;font:8.5px "Space Grotesk", Arial, sans-serif;letter-spacing:.22em;margin-top:16px}
/* All Projects Bubble Button + Popup */
.portfolio3d-wrap{text-align:center}
.ap-open-btn{display:inline-flex;align-items:center;gap:10px;margin:26px auto 0;padding:14px 26px;border-radius:100px;border:1px solid #6a5acd66;background:radial-gradient(circle at 30% 25%,#241d40,#0d0d15);color:#fff;font:700 11px "Space Grotesk", Arial, sans-serif;letter-spacing:.16em;cursor:pointer;transition:.3s;box-shadow:0 10px 34px #0009,0 0 26px #7c5cff26}
.ap-open-btn i{font-style:normal;color:#8d78ff;transition:.3s}
.ap-open-btn:hover{transform:translateY(-3px);border-color:#8d78ff;box-shadow:0 16px 44px #000b,0 0 40px #7c5cff44}
.ap-open-btn:hover i{transform:translate(3px,-3px)}
.ap-modal{position:fixed;inset:0;z-index:10000;display:none}
.ap-modal.open{display:block}
.ap-overlay{position:absolute;inset:0;background:#050507e6;backdrop-filter:blur(10px)}
.ap-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1060px,92vw);max-height:86vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;border:1px solid #26262f;border-radius:26px;background:linear-gradient(165deg,#0e0e16,#09090e);box-shadow:0 40px 120px #000c,0 0 60px #7c5cff14;padding:44px 40px 36px;animation:apIn .35s cubic-bezier(.2,.9,.3,1.2)}
.ap-box::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes apIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ap-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid #2e2e38;background:#0d0d13;color:#999;font-size:15px;cursor:pointer;transition:.25s;z-index:2}
.ap-close:hover{color:#fff;border-color:#8d78ff;transform:rotate(90deg)}
.ap-kicker{font:600 9px "Space Grotesk", Arial, sans-serif;letter-spacing:.28em;color:#777}
.ap-title{font:600 clamp(26px,3vw,40px)/1.05 "Space Grotesk", Arial, sans-serif;letter-spacing:-.04em;margin:12px 0 10px}
.ap-title span{color:#65656e}
.ap-sub{color:#777;font-size:13px;line-height:1.7;max-width:560px;margin:0 0 30px}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.ap-item{display:flex;gap:14px;align-items:center;border:1px solid #1f1f26;border-radius:18px;padding:16px;background:#0b0b10;text-decoration:none;color:#fff;transition:.3s}
.ap-item:hover{border-color:#6a5acd;transform:translateY(-4px);box-shadow:0 14px 40px #0008}
.ap-ico{width:64px;height:64px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#252038,#0d0d14 70%);border:1px solid #3a3550}
.ap-ico img{max-width:44px;max-height:44px;object-fit:contain}
.ap-info b{display:block;font:600 15px "Space Grotesk", Arial, sans-serif;letter-spacing:-.02em}
.ap-info small{display:block;font:600 8px "Space Grotesk", Arial, sans-serif;letter-spacing:.16em;color:#777;margin:3px 0 6px}
.ap-info p{margin:0;color:#8a8a94;font-size:11px;line-height:1.55}
.ap-cta{display:block;text-align:center;margin-top:28px;padding:16px;border-radius:14px;border:1px dashed #4a3f78;color:#c9bcff;text-decoration:none;font:600 12px "Space Grotesk", Arial, sans-serif;letter-spacing:.08em;transition:.3s}
.ap-cta:hover{background:#16112a;border-color:#8d78ff;color:#fff}
@media(max-width:950px){.ap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ap-box{padding:34px 20px 26px}.ap-grid{grid-template-columns:1fr}.ap-info p{display:none}}
@media(max-width:950px){.header nav{display:none}.portfolio3d-wrap{--ring-radius:300px;--ring-step:40deg}.portfolio3d-stage{height:430px}.pcard{position:absolute;left:50%;top:50%;width:min(300px,74vw);margin-left:calc(min(300px,74vw)/-2);margin-top:-175px;transform:rotateY(calc(var(--i)*var(--ring-step,40deg))) translateZ(var(--ring-radius,400px));transform-style:preserve-3d}.pcard-inner{height:350px}.smallcta{display:none}.hamb{display:block}.hero-object{opacity:.35;right:-15vw;width:70vw}.service-grid{grid-template-columns:1fr 1fr}.lana{grid-template-columns:1fr}.numbers{grid-template-columns:1fr 1fr}.price-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.cap-grid,.about-grid{grid-template-columns:1fr;gap:45px}}@media(max-width:600px){.portfolio3d-wrap{--ring-radius:210px;--ring-step:40deg}.portfolio3d-stage{height:400px;perspective:1200px}.pcard{margin-top:-160px;transform:rotateY(calc(var(--i)*var(--ring-step,40deg))) translateZ(var(--ring-radius,250px))}.pcard-inner{height:320px;gap:8px;padding:20px 16px}.pcard-logo{width:92px;height:92px;border-radius:22px}.pcard-logo img{max-width:56px;max-height:56px}.pcard-logo .nexus-logo-img,.pcard-logo .pm-logo-img{max-width:62px;max-height:62px}.pcard-logo .nesic-logo-img,.pcard-logo .dubocica-logo-img,.pcard-logo .produkt-logo-img,.pcard-logo .swb-logo-img{max-width:66px;max-height:66px}
@media(max-width:600px){.pcard-logo .mmd-logo-img{max-width:70px;max-height:50px}.pcard-logo .olympus-logo-img{max-width:70px;max-height:56px}}.pcard-desc{display:none}.pcard-badge{font-size:7.5px}.pcard-name{font-size:17px}.portfolio3d-floor{width:560px;height:560px;top:62%}.section,.pricing,.lana,.contact{padding-left:7vw;padding-right:7vw}.hero{padding-left:7vw}.hero h1{font-size:53px}.hero-object{display:none}.service-grid{grid-template-columns:1fr}.actions{flex-direction:column;align-items:flex-start}.numbers{grid-template-columns:1fr 1fr}.numbers div{padding-left:12px}.lana-visual{height:430px}.big-orb{width:290px;height:290px}.big-orb span{font-size:130px}.scan{width:340px}.steps{grid-template-columns:1fr}.contact-row{display:block}.contact-row .btn{margin-top:25px}.mail{font-size:20px}.work-head,.section-title{display:block}footer{flex-direction:column;gap:10px}.langs button{padding:6px 5px}}
/* Rocket Back To Top Button */
.rocket-btn {
position: fixed;
bottom: 175px;
right: 34px;
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(14, 14, 20, 0.85);
border: 1px solid rgba(138, 114, 255, 0.35);
backdrop-filter: blur(12px);
cursor: pointer;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.9);
transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, border-color 0.3s, box-shadow 0.3s;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(122, 95, 255, 0.1);
padding: 0;
}
.rocket-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.rocket-btn:hover {
border-color: rgba(168, 145, 255, 0.8);
box-shadow: 0 15px 35px rgba(122, 95, 255, 0.35), inset 0 0 20px rgba(122, 95, 255, 0.25);
transform: translateY(-4px) scale(1.06);
}
.rocket-svg {
width: 28px;
height: 28px;
display: block;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.rocket-btn:hover .rocket-svg {
transform: translateY(-2px);
}
/* Flame animation */
.rocket-flame {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 8px;
height: 14px;
background: radial-gradient(circle, #ffe600 0%, #ff5e00 60%, transparent 80%);
border-radius: 50% 50% 30% 30%;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
}
.rocket-btn:hover .rocket-flame {
opacity: 0.85;
transform: translateX(-50%) scale(1);
animation: flicker 0.15s infinite alternate;
}
/* Launching state animation */
.rocket-btn.launching {
pointer-events: none;
animation: rocketLaunch 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.rocket-btn.launching .rocket-flame {
opacity: 1;
transform: translateX(-50%) scale(1.6);
height: 22px;
background: radial-gradient(circle, #ffffff 0%, #00e1ff 35%, #ff5e00 70%, transparent 90%);
box-shadow: 0 0 15px #ff5e00, 0 0 25px #00e1ff;
animation: flicker 0.08s infinite alternate;
}
.rocket-btn.launching .rocket-smoke span {
opacity: 0.8;
animation: smokePuff 0.6s ease-out infinite;
}
.rocket-smoke {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.rocket-smoke span {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
opacity: 0;
}
.rocket-smoke span:nth-child(1) { left: -6px; }
.rocket-smoke span:nth-child(2) { left: 0px; animation-delay: 0.1s; }
.rocket-smoke span:nth-child(3) { left: 6px; animation-delay: 0.2s; }
@keyframes flicker {
0% { transform: translateX(-50%) scaleY(0.9) scaleX(0.95); }
100% { transform: translateX(-50%) scaleY(1.2) scaleX(1.1); }
}
@keyframes rocketLaunch {
0% {
transform: translateY(0) scale(1.06);
}
25% {
transform: translateY(12px) scale(0.98); /* Crouch down before blast off */
}
100% {
transform: translateY(-110vh) scale(1.2); /* Blast off into orbit */
opacity: 0;
}
}
@keyframes smokePuff {
0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
100% { transform: translate(0, 20px) scale(3); opacity: 0; }
}
.logo-img {
height: 38px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.45));
transition: transform 0.3s ease, filter 0.3s ease;
}
.logo:hover .logo-img {
transform: scale(1.08) rotate(-2deg);
filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.75));
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 82px;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5vw;
background: linear-gradient(#050507ed, transparent);
backdrop-filter: blur(10px);
}
.header .logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: white;
z-index: 2;
}
.header nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 32px;
pointer-events: auto;
}
.header .head-right {
display: flex;
align-items: center;
gap: 14px;
z-index: 2;
}
.logo-text {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.logo-typed {
display: inline-block;
white-space: nowrap;
font-family: "Space Grotesk", Arial, sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.logo-cursor {
display: inline-block;
margin-left: 2px;
color: #00d2ff;
font-weight: 300;
animation: blinkCursor 0.75s step-end infinite;
text-shadow: 0 0 8px #00d2ff;
}
@keyframes blinkCursor {
from, to { opacity: 1; }
50% { opacity: 0; }
}
/* Service Card Clickable Styling */
.service-grid article {
cursor: pointer;
display: flex;
flex-direction: column;
}
.service-grid article:hover {
border-color: #8c78ff;
box-shadow: 0 20px 45px rgba(140, 120, 255, 0.15);
}
.service-bot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.service-more {
color: #a894ff;
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.04em;
transition: transform 0.25s, color 0.25s;
}
.service-grid article:hover .service-more {
transform: translateX(4px);
color: #fff;
}
/* Service Popup Modal */
.service-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.service-modal.active {
opacity: 1;
visibility: visible;
}
.service-modal-overlay {
position: absolute;
inset: 0;
background: rgba(3, 3, 6, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.service-modal-card {
position: relative;
width: 100%;
max-width: 680px;
max-height: 90vh;
overflow-y: auto;
background: linear-gradient(150deg, #13121c, #09090e);
border: 1px solid rgba(140, 120, 255, 0.35);
border-radius: 26px;
padding: 40px;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.85), 0 0 45px rgba(120, 95, 255, 0.15);
transform: scale(0.92) translateY(20px);
transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
color: #f4f4f6;
z-index: 1;
}
.service-modal.active .service-modal-card {
transform: scale(1) translateY(0);
}
.service-modal-close {
position: absolute;
top: 24px;
right: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #bbb;
font-size: 24px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.25s;
}
.service-modal-close:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
transform: rotate(90deg);
}
.service-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.service-modal-badge {
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.15em;
color: #9a85ff;
}
.service-modal-icon {
font-size: 32px;
color: #9a84ff;
filter: drop-shadow(0 0 14px rgba(154, 132, 255, 0.5));
}
.service-modal-title {
font: 700 clamp(26px, 3.2vw, 36px) "Space Grotesk", Arial, sans-serif;
letter-spacing: -0.04em;
margin: 0 0 10px;
color: #fff;
}
.service-modal-sub {
color: #a0a0ab;
font-size: 14px;
line-height: 1.7;
margin: 0 0 26px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.service-modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 26px;
}
.service-modal-col h4 {
font: 600 12px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c5bbff;
margin: 0 0 14px;
}
.service-modal-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.service-modal-col li {
font-size: 13px;
color: #8c8c99;
line-height: 1.6;
margin-bottom: 10px;
position: relative;
padding-left: 18px;
}
.service-modal-col li::before {
content: "✦";
position: absolute;
left: 0;
color: #9a83ff;
font-size: 10px;
top: 1px;
}
.service-modal-tech {
margin-bottom: 30px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.service-modal-tech span {
display: block;
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.1em;
color: #777;
margin-bottom: 10px;
}
.tech-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tech-pills span {
display: inline-block;
background: rgba(140, 120, 255, 0.08);
border: 1px solid rgba(140, 120, 255, 0.25);
border-radius: 100px;
padding: 6px 12px;
font: 500 10px "Space Grotesk", Arial, sans-serif;
color: #ddd;
letter-spacing: 0.04em;
margin: 0;
}
.service-modal-footer {
display: flex;
justify-content: flex-end;
}
@media (max-width: 650px) {
.service-modal-card {
padding: 26px 20px;
}
.service-modal-body {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* ============================================
PROCESS MODAL
============================================ */
.process-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.process-modal.active {
opacity: 1;
visibility: visible;
}
.process-modal-overlay {
position: absolute;
inset: 0;
background: rgba(3, 3, 6, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.process-modal-card {
position: relative;
width: 100%;
max-width: 620px;
background: linear-gradient(150deg, #13121c, #09090e);
border: 1px solid rgba(140, 120, 255, 0.35);
border-radius: 26px;
padding: 42px 40px 36px;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.85), 0 0 45px rgba(120, 95, 255, 0.15);
transform: scale(0.92) translateY(20px);
transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
color: #f4f4f6;
z-index: 1;
overflow: hidden;
}
.process-modal.active .process-modal-card {
transform: scale(1) translateY(0);
}
.process-modal-close {
position: absolute;
top: 22px;
right: 22px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #bbb;
font-size: 22px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.25s;
}
.process-modal-close:hover {
background: rgba(255, 60, 80, 0.15);
border-color: rgba(255, 60, 80, 0.3);
color: #ff6680;
transform: rotate(90deg);
}
.process-modal-badge {
display: inline-block;
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.15em;
color: #9a85ff;
margin-bottom: 14px;
}
.process-modal-title {
font: 700 clamp(26px, 3.2vw, 34px)/1.1 "Space Grotesk", Arial, sans-serif;
letter-spacing: -0.04em;
margin: 0 0 10px;
color: #fff;
}
.process-modal-sub {
color: #a0a0ab;
font-size: 14px;
line-height: 1.7;
margin: 0 0 28px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.process-modal-body {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
margin-bottom: 24px;
}
.process-modal-col h4 {
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c5bbff;
margin: 0 0 14px;
}
.process-modal-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.process-modal-col li {
font-size: 13px;
color: #9a9aa5;
line-height: 1.6;
margin-bottom: 10px;
position: relative;
padding-left: 18px;
}
.process-modal-col li::before {
content: "✦";
position: absolute;
left: 0;
color: #9a83ff;
font-size: 10px;
top: 1px;
}
.process-modal-col p {
font-size: 13.5px;
color: #8c8c99;
line-height: 1.75;
margin: 0;
border-left: 2px solid #6a5acd;
padding-left: 16px;
}
.process-modal-timeline {
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
gap: 10px;
}
.process-modal-timeline span {
font: 600 20px "Space Grotesk", Arial, sans-serif;
color: #6adfb8;
}
/* Step card clickable */
.step-card {
cursor: pointer;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.step-card:hover {
border-color: #6a5acd;
box-shadow: 0 15px 40px rgba(100, 80, 255, 0.12);
transform: translateY(-4px);
}
@media (max-width: 650px) {
.process-modal-card { padding: 30px 22px 28px; }
.process-modal-body { grid-template-columns: 1fr; gap: 18px; }
}
/* ============================================
NUMBERS MODAL
============================================ */
.numbers-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.numbers-modal.active {
opacity: 1;
visibility: visible;
}
.numbers-modal-overlay {
position: absolute;
inset: 0;
background: rgba(3, 3, 6, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.numbers-modal-card {
position: relative;
width: 100%;
max-width: 620px;
background: linear-gradient(150deg, #13121c, #09090e);
border: 1px solid rgba(140, 120, 255, 0.35);
border-radius: 26px;
padding: 42px 40px 36px;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.85), 0 0 45px rgba(120, 95, 255, 0.15);
transform: scale(0.92) translateY(20px);
transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
color: #f4f4f6;
z-index: 1;
overflow: hidden;
}
.numbers-modal.active .numbers-modal-card {
transform: scale(1) translateY(0);
}
.numbers-modal-close {
position: absolute;
top: 22px;
right: 22px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #bbb;
font-size: 22px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.25s;
}
.numbers-modal-close:hover {
background: rgba(255, 60, 80, 0.15);
border-color: rgba(255, 60, 80, 0.3);
color: #ff6680;
transform: rotate(90deg);
}
.numbers-modal-badge {
display: inline-block;
font: 700 48px "Space Grotesk", Arial, sans-serif;
color: #7664d2;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.numbers-modal-title {
font: 600 12px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #9a85ff;
margin: 0 0 16px;
}
.numbers-modal-sub {
color: #a0a0ab;
font-size: 14px;
line-height: 1.7;
margin: 0 0 28px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.numbers-modal-body {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
}
.numbers-modal-col h4 {
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c5bbff;
margin: 0 0 14px;
}
.numbers-modal-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.numbers-modal-col li {
font-size: 13px;
color: #9a9aa5;
line-height: 1.6;
margin-bottom: 10px;
position: relative;
padding-left: 18px;
}
.numbers-modal-col li::before {
content: "✦";
position: absolute;
left: 0;
color: #9a83ff;
font-size: 10px;
top: 1px;
}
.numbers-modal-col p {
font-size: 13.5px;
color: #8c8c99;
line-height: 1.75;
margin: 0;
border-left: 2px solid #6a5acd;
padding-left: 16px;
}
.num-card {
cursor: pointer;
transition: background 0.3s;
}
.num-card:hover {
background: rgba(106, 90, 205, 0.06);
}
@media (max-width: 650px) {
.numbers-modal-card { padding: 30px 22px 28px; }
.numbers-modal-body { grid-template-columns: 1fr; gap: 18px; }
}
/* ============================================
CALCULATOR SECTION - PREMIUM CYBERPUNK DESIGN
============================================ */
.calc-section { text-align: center; padding-bottom: 100px; position: relative; overflow: hidden; }
.calc-section h2 { margin: 12px 0 10px; }
.calc-section h2 span { color: #65656e; }
.calc-section > p { color: #777; font-size: 13px; line-height: 1.7; max-width: 480px; margin: 0 auto 40px; }
.calc-container {
max-width: 840px;
margin: 0 auto;
position: relative;
border-radius: 28px;
padding: 3px;
background: linear-gradient(135deg, #7664d2, #4ef2bb, #9a85ff, #00d2ff, #7664d2);
background-size: 400% 400%;
animation: calcBorderGlow 6s ease infinite;
}
@keyframes calcBorderGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.calc-inner {
background: linear-gradient(165deg, #0c0c14 0%, #08080e 100%);
border-radius: 26px;
padding: 44px 40px 36px;
text-align: left;
position: relative;
overflow: hidden;
}
.calc-inner::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 20%, rgba(118, 100, 210, 0.06), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(78, 242, 187, 0.04), transparent 50%);
pointer-events: none;
}
/* Animated floating orbs */
.calc-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
animation: calcOrbFloat 8s ease-in-out infinite;
}
.calc-orb-1 { width: 200px; height: 200px; background: rgba(118, 100, 210, 0.15); top: -60px; right: -40px; animation-delay: 0s; }
.calc-orb-2 { width: 150px; height: 150px; background: rgba(78, 242, 187, 0.1); bottom: -40px; left: -30px; animation-delay: 2s; }
.calc-orb-3 { width: 100px; height: 100px; background: rgba(0, 210, 255, 0.08); top: 40%; right: 10%; animation-delay: 4s; }
@keyframes calcOrbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -15px) scale(1.1); }
66% { transform: translate(-15px, 10px) scale(0.9); }
}
/* Progress */
.calc-progress { position: relative; margin-bottom: 44px; z-index: 1; }
.calc-progress-track {
height: 3px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.calc-progress-bar {
height: 100%;
background: linear-gradient(90deg, #7664d2, #4ef2bb, #9a85ff);
background-size: 200% 100%;
animation: calcProgressShimmer 2s linear infinite;
border-radius: 3px;
width: 25%;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 20px rgba(118, 100, 210, 0.5);
}
@keyframes calcProgressShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.calc-steps-indicator {
display: flex;
justify-content: space-between;
margin-top: 16px;
position: relative;
}
.calc-steps-indicator::before {
content: "";
position: absolute;
top: 14px;
left: 14px;
right: 14px;
height: 1px;
background: rgba(255, 255, 255, 0.06);
}
.calc-step-dot {
width: 30px;
height: 30px;
border-radius: 50%;
background: #12121a;
border: 2px solid #222;
color: #555;
font: 600 11px "Space Grotesk", Arial, sans-serif;
display: grid;
place-items: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.calc-step-dot.active {
background: linear-gradient(135deg, #7664d2, #9a85ff);
border-color: transparent;
color: #fff;
box-shadow: 0 0 25px rgba(118, 100, 210, 0.6), 0 0 50px rgba(118, 100, 210, 0.3);
transform: scale(1.15);
}
.calc-step-dot.done {
background: linear-gradient(135deg, #4ef2bb, #00d2ff);
border-color: transparent;
color: #050507;
box-shadow: 0 0 15px rgba(78, 242, 187, 0.4);
}
/* Steps */
.calc-step {
display: none;
animation: calcStepIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.calc-step.active { display: block; }
@keyframes calcStepIn {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
.calc-step h3 {
font: 600 20px "Space Grotesk", Arial, sans-serif;
color: #fff;
margin: 0 0 28px;
display: flex;
align-items: center;
gap: 12px;
}
.calc-step h3::before {
content: "";
width: 4px;
height: 24px;
background: linear-gradient(180deg, #7664d2, #4ef2bb);
border-radius: 4px;
}
/* Service Cards - Premium Style */
.calc-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.calc-service-card {
padding: 24px 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 18px;
background: linear-gradient(145deg, rgba(18, 18, 28, 0.8), rgba(10, 10, 16, 0.9));
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.calc-service-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
padding: 1px;
background: linear-gradient(135deg, transparent, rgba(118, 100, 210, 0.3), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
}
.calc-service-card:hover::before { opacity: 1; }
.calc-service-card:hover {
transform: translateY(-6px);
border-color: rgba(118, 100, 210, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(118, 100, 210, 0.15);
}
.calc-service-card.selected {
border-color: rgba(78, 242, 187, 0.5);
background: linear-gradient(145deg, rgba(20, 30, 25, 0.9), rgba(10, 15, 12, 0.95));
box-shadow: 0 20px 50px rgba(78, 242, 187, 0.2), 0 0 40px rgba(78, 242, 187, 0.1);
}
.calc-service-card.selected::after {
content: "✓";
position: absolute;
top: 12px;
right: 12px;
width: 22px;
height: 22px;
background: linear-gradient(135deg, #4ef2bb, #00d2ff);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
color: #050507;
font-weight: 700;
animation: calcCheckPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes calcCheckPop {
0% { transform: scale(0); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.calc-service-icon {
font-size: 32px;
margin-bottom: 12px;
display: inline-block;
transition: transform 0.4s;
}
.calc-service-card:hover .calc-service-icon { transform: scale(1.15) rotate(-5deg); }
.calc-service-card.selected .calc-service-icon { filter: drop-shadow(0 0 12px rgba(78, 242, 187, 0.6)); }
.calc-service-card h4 {
font: 600 14px "Space Grotesk", Arial, sans-serif;
color: #fff;
margin: 0 0 6px;
}
.calc-service-card p {
font-size: 11px;
color: #555;
margin: 0;
transition: color 0.3s;
}
.calc-service-card:hover p,
.calc-service-card.selected p { color: #888; }
/* Options & Checkboxes - Neon Style */
.calc-details label {
display: block;
font: 600 11px "Space Grotesk", Arial, sans-serif;
color: #4ef2bb;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 12px;
}
.calc-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.calc-option {
flex: 1;
min-width: 120px;
padding: 16px 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
background: rgba(18, 18, 28, 0.6);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
position: relative;
overflow: hidden;
}
.calc-option::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(118, 100, 210, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.calc-option:hover { border-color: rgba(118, 100, 210, 0.4); transform: translateY(-2px); }
.calc-option:hover::before { opacity: 1; }
.calc-option.selected {
border-color: rgba(78, 242, 187, 0.6);
background: rgba(20, 35, 30, 0.8);
box-shadow: 0 0 25px rgba(78, 242, 187, 0.15), inset 0 0 20px rgba(78, 242, 187, 0.05);
}
.calc-option.selected::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #4ef2bb, #00d2ff);
}
.calc-option-title {
display: block;
font: 600 13px "Space Grotesk", Arial, sans-serif;
color: #ccc;
margin-bottom: 4px;
position: relative;
z-index: 1;
}
.calc-option.selected .calc-option-title { color: #fff; }
.calc-option-desc {
display: block;
font-size: 10px;
color: #555;
position: relative;
z-index: 1;
}
.calc-checkbox-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.calc-checkbox {
padding: 12px 20px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 100px;
background: rgba(18, 18, 28, 0.6);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font: 500 12px "Space Grotesk", Arial, sans-serif;
color: #666;
position: relative;
overflow: hidden;
}
.calc-checkbox::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(78, 242, 187, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.calc-checkbox:hover { border-color: rgba(118, 100, 210, 0.4); color: #aaa; }
.calc-checkbox:hover::before { opacity: 1; }
.calc-checkbox.selected {
border-color: rgba(78, 242, 187, 0.6);
color: #4ef2bb;
box-shadow: 0 0 20px rgba(78, 242, 187, 0.15);
}
.calc-checkbox.selected::before { opacity: 1; }
/* Result - Glowing Box */
.calc-result {
background: linear-gradient(145deg, rgba(18, 18, 28, 0.9), rgba(10, 10, 16, 0.95));
border: 1px solid rgba(78, 242, 187, 0.2);
border-radius: 20px;
padding: 28px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.calc-result::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #4ef2bb, #00d2ff, #7664d2, #9a85ff, #4ef2bb);
background-size: 200% 100%;
animation: calcResultShimmer 3s linear infinite;
}
@keyframes calcResultShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.calc-price-box {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 20px;
}
.calc-price-label {
font: 500 14px "Space Grotesk", Arial, sans-serif;
color: #888;
}
.calc-price-value {
font: 700 42px "Space Grotesk", Arial, sans-serif;
background: linear-gradient(135deg, #4ef2bb, #00d2ff, #9a85ff);
background-size: 200% 200%;
animation: calcPriceGradient 4s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 30px rgba(78, 242, 187, 0.3));
}
@keyframes calcPriceGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.calc-includes {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 18px;
}
.calc-includes h4 {
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.12em;
color: #4ef2bb;
margin: 0 0 12px;
text-transform: uppercase;
}
.calc-includes ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.calc-includes li {
font-size: 11px;
color: #888;
background: rgba(78, 242, 187, 0.06);
border: 1px solid rgba(78, 242, 187, 0.15);
padding: 6px 14px;
border-radius: 100px;
transition: all 0.3s;
}
.calc-includes li:hover {
background: rgba(78, 242, 187, 0.12);
color: #4ef2bb;
}
/* Contact Form - Cyber Style */
.calc-contact-form { margin-top: 24px; }
.calc-form-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.calc-form-row input,
.calc-form-row textarea {
flex: 1;
background: rgba(18, 18, 28, 0.8);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 14px 18px;
color: #fff;
font-size: 13px;
font-family: Inter, Arial, sans-serif;
outline: none;
transition: all 0.3s;
resize: none;
}
.calc-form-row input:focus,
.calc-form-row textarea:focus {
border-color: rgba(78, 242, 187, 0.5);
box-shadow: 0 0 20px rgba(78, 242, 187, 0.1);
}
.calc-form-row input::placeholder,
.calc-form-row textarea::placeholder { color: #444; }
/* Navigation - Animated Buttons */
.calc-nav {
display: flex;
justify-content: space-between;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.calc-btn {
padding: 14px 32px;
border-radius: 100px;
font: 600 12px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
position: relative;
overflow: hidden;
}
.calc-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.calc-btn:hover::before { opacity: 1; }
.calc-btn-back {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #888;
}
.calc-btn-back:hover {
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
transform: translateX(-4px);
}
.calc-btn-next {
background: linear-gradient(135deg, #7664d2, #9a85ff);
color: #fff;
box-shadow: 0 10px 30px rgba(118, 100, 210, 0.35);
}
.calc-btn-next:hover {
transform: translateY(-3px) translateX(4px);
box-shadow: 0 15px 40px rgba(118, 100, 210, 0.5);
}
.calc-btn-send {
background: linear-gradient(135deg, #4ef2bb, #00d2ff);
color: #050507;
font-weight: 700;
box-shadow: 0 10px 30px rgba(78, 242, 187, 0.35);
}
.calc-btn-send:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(78, 242, 187, 0.5);
}
.calc-btn-send::after {
content: "→";
display: inline-block;
margin-left: 8px;
transition: transform 0.3s;
}
.calc-btn-send:hover::after { transform: translateX(4px); }
@media (max-width: 650px) {
.calc-inner { padding: 28px 18px 24px; }
.calc-services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-service-card { padding: 18px 12px; }
.calc-service-icon { font-size: 26px; }
.calc-form-row { flex-direction: column; }
.calc-option { min-width: 100%; }
.calc-price-value { font-size: 32px; }
}
/* Fix Service Card Layout & Overlap */
.service-grid article {
position: relative;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding-bottom: 24px !important;
}
.service-bot {
margin-top: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: static !important;
padding-top: 18px !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
width: 100% !important;
}
.service-bot > span:first-child {
position: static !important;
display: inline-block !important;
color: #727282 !important;
font: 9px "Space Grotesk", Arial, sans-serif !important;
letter-spacing: 0.06em !important;
max-width: 65% !important;
}
.service-more {
position: static !important;
display: inline-flex !important;
align-items: center !important;
color: #9a84ff !important;
font: 600 11px "Space Grotesk", Arial, sans-serif !important;
letter-spacing: 0.04em !important;
transition: transform 0.25s, color 0.25s !important;
white-space: nowrap !important;
}
.service-grid article:hover .service-more {
transform: translateX(4px) !important;
color: #ffffff !important;
}
/* Remove Scrollbar from Popups but keep smooth scrolling */
.service-modal-card {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE and Edge */
}
.service-modal-card::-webkit-scrollbar {
display: none !important; /* Chrome, Safari, Opera */
width: 0 !important;
height: 0 !important;
}
/* ============================================
Accordion Capabilities - CLEAN FINAL FIX
============================================ */
.cap-list {
border-top: 1px solid #26262d;
}
/* Each accordion row */
.cap-item {
display: block !important;
padding: 22px 0 !important;
border-bottom: 1px solid #26262d !important;
cursor: pointer !important;
transition: background 0.25s, padding-left 0.25s !important;
border-radius: 0 !important;
}
.cap-item:hover {
background: rgba(140, 120, 255, 0.04);
padding-left: 8px !important;
}
/* Number + Title row */
.cap-item-top {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
.cap-item b {
color: #555 !important;
font: 700 10px "Space Grotesk", Arial, sans-serif !important;
flex-shrink: 0 !important;
width: 24px !important;
}
.cap-item.active b,
.cap-item:hover b {
color: #9a84ff !important;
}
.cap-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex: 1 !important;
}
.cap-item h3 {
margin: 0 !important;
font: 600 20px "Space Grotesk", Arial, sans-serif !important;
color: #fff !important;
}
.cap-item.active h3,
.cap-item:hover h3 {
color: #c5bbff !important;
}
/* +/x Arrow */
.cap-arrow {
font-size: 24px !important;
font-weight: 300 !important;
color: #7a68d4 !important;
flex-shrink: 0 !important;
line-height: 1 !important;
display: inline-block !important;
user-select: none !important;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s !important;
}
.cap-item.active .cap-arrow {
transform: rotate(45deg) !important;
color: #ff6699 !important;
}
/* Short description under title */
.cap-summary {
display: block !important;
margin: 8px 0 0 38px !important;
color: #8a8a99 !important;
font-size: 13px !important;
line-height: 1.6 !important;
width: auto !important;
}
/* Expandable details container - smooth height */
.cap-expand {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 0fr !important;
transition: grid-template-rows 0.4s ease !important;
margin-left: 38px !important;
}
.cap-item.active .cap-expand {
grid-template-rows: 1fr !important;
}
/* Inner content - overflow hidden for smooth animation */
.cap-details {
overflow: hidden !important;
color: #b3b3c2 !important;
font-size: 13.5px !important;
line-height: 1.75 !important;
border-left: 2px solid #8c78ff !important;
padding-left: 16px !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
border-radius: 0 8px 8px 0 !important;
background: rgba(255,255,255,0.025) !important;
box-sizing: border-box !important;
transition: padding-top 0.35s ease, padding-bottom 0.35s ease, margin-top 0.35s ease !important;
display: block !important;
width: 100% !important;
}
.cap-item.active .cap-details {
padding-top: 12px !important;
padding-bottom: 12px !important;
margin-top: 12px !important;
}
/* ============================================
PRICING MODAL (pm-*)
============================================ */
.pm-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
align-items: center;
justify-content: center;
padding: 20px;
}
.pm-overlay.open {
display: flex;
animation: pmFadeIn 0.3s ease;
}
@keyframes pmFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.pm-box {
position: relative;
background: linear-gradient(145deg, #111118 0%, #0d0d17 100%);
border: 1px solid rgba(140,120,255,0.2);
border-radius: 24px;
padding: 44px 48px;
max-width: 780px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
scrollbar-width: none;
animation: pmSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 80px rgba(100,80,255,0.12), 0 30px 80px rgba(0,0,0,0.5);
}
.pm-box::-webkit-scrollbar { display: none; }
@keyframes pmSlideUp {
from { opacity: 0; transform: translateY(40px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pm-close {
position: absolute;
top: 18px;
right: 20px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #aaa;
font-size: 18px;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
line-height: 1;
}
.pm-close:hover {
background: rgba(255,60,80,0.15);
border-color: rgba(255,60,80,0.3);
color: #ff6680;
}
.pm-badge {
display: inline-block;
font: 700 10px "Space Grotesk", Arial, sans-serif;
letter-spacing: 2px;
color: #9a84ff;
background: rgba(140,120,255,0.12);
border: 1px solid rgba(140,120,255,0.25);
border-radius: 6px;
padding: 4px 12px;
margin-bottom: 14px;
}
.pm-price {
font: 800 52px "Space Grotesk", Arial, sans-serif;
color: #ffffff;
line-height: 1;
margin-bottom: 10px;
background: linear-gradient(135deg, #fff 40%, #b0a0ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pm-tagline {
font-size: 15px;
color: #8a8a99;
margin: 0 0 0;
line-height: 1.6;
}
.pm-divider {
height: 1px;
background: linear-gradient(90deg, rgba(140,120,255,0.25), transparent);
margin: 28px 0;
}
.pm-cols {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
}
.pm-col h4 {
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 1.5px;
color: #8c78ff;
text-transform: uppercase;
margin: 0 0 14px;
}
.pm-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.pm-list li {
font-size: 14px;
color: #c5c5d6;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.pm-list li::before {
content: "checkmark";
color: #8c78ff;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.pm-list.pm-tech li::before {
content: "diamond";
font-size: 9px;
color: #6adfb8;
margin-top: 4px;
}
.pm-list.pm-bonus li::before {
content: "star";
color: #ffcc44;
font-size: 11px;
}
.pm-extras h4 {
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 1.5px;
color: #ffcc44;
text-transform: uppercase;
margin: 0 0 14px;
}
.pm-extras .pm-list {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.pm-extras .pm-list li {
background: rgba(255,200,50,0.07);
border: 1px solid rgba(255,200,50,0.18);
border-radius: 8px;
padding: 7px 14px;
font-size: 13px;
color: #e8d880;
}
.pm-extras .pm-list li::before { display: none; }
.pm-time {
font: 600 22px "Space Grotesk", Arial, sans-serif;
color: #6adfb8;
margin: 6px 0 0;
}
.pm-cta {
display: block;
margin-top: 32px;
background: linear-gradient(135deg, #7056ec, #9a84ff);
color: #fff;
text-align: center;
padding: 16px 24px;
border-radius: 14px;
font: 700 14px "Space Grotesk", Arial, sans-serif;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.25s;
box-shadow: 0 8px 30px rgba(112,86,236,0.4);
}
.pm-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(112,86,236,0.55);
}
/* Price card clickable */
.price-card {
cursor: pointer;
transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.price-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 50px rgba(100,80,255,0.18) !important;
}
.price-more {
display: inline-block;
margin-top: 18px;
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 1px;
color: #8c78ff;
text-transform: uppercase;
transition: letter-spacing 0.2s;
}
.price-card:hover .price-more {
letter-spacing: 2px;
}
@media (max-width: 640px) {
.pm-box { padding: 28px 22px; }
.pm-cols { grid-template-columns: 1fr; gap: 22px; }
.pm-price { font-size: 38px; }
}
/* ---- Flag language buttons ---- */
.langs button {
background: none !important;
border: none !important;
font-size: 22px !important;
line-height: 1 !important;
padding: 4px 5px !important;
border-radius: 8px !important;
cursor: pointer !important;
opacity: 0.45 !important;
filter: grayscale(30%) !important;
transition: opacity 0.2s, transform 0.2s, filter 0.2s !important;
display: flex !important;
align-items: center !important;
}
.langs button:hover {
opacity: 0.85 !important;
transform: scale(1.18) !important;
filter: grayscale(0%) !important;
}
.langs button.active {
opacity: 1 !important;
transform: scale(1.22) !important;
filter: grayscale(0%) drop-shadow(0 0 6px rgba(160,140,255,0.5)) !important;
background: none !important;
}
/* ---- Flag-icons sizing ---- */
.langs button .fi {
width: 24px !important;
height: 18px !important;
border-radius: 3px !important;
display: block !important;
background-size: cover !important;
}
/* ---- Nexus 3D Orb Logo Styling ---- */
.big-orb {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.nexus-orb-img {
width: 72%;
height: 72%;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 0 25px rgba(106, 223, 184, 0.6)) drop-shadow(0 0 50px rgba(154, 133, 255, 0.5));
transition: transform 0.5s ease, filter 0.5s ease;
animation: orbPulse 5s ease-in-out infinite alternate;
z-index: 2;
pointer-events: none;
}
@keyframes orbPulse {
0% {
transform: scale(0.96);
filter: drop-shadow(0 0 20px rgba(106, 223, 184, 0.45)) drop-shadow(0 0 45px rgba(154, 133, 255, 0.4));
}
100% {
transform: scale(1.04);
filter: drop-shadow(0 0 35px rgba(106, 223, 184, 0.75)) drop-shadow(0 0 70px rgba(154, 133, 255, 0.7));
}
}
.mini-orb {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.nexus-mini-img {
width: 76%;
height: 76%;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 0 10px rgba(106, 223, 184, 0.6));
}
/* =========================================================
CALL WIDGET (RIGHT SIDE, HEADSET BUBBLE)
========================================================= */
.call-widget{position:fixed;right:30px;bottom:100px;z-index:9998;font-family:"Space Grotesk", Arial, sans-serif}
.call-trigger{width:62px;height:62px;border-radius:50%;border:1px solid rgba(141,120,255,.5);background:linear-gradient(135deg,rgba(24,20,44,.95),rgba(7,7,10,.95));box-shadow:0 10px 30px rgba(0,0,0,.7),0 0 25px rgba(141,120,255,.28);backdrop-filter:blur(14px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#c9bcff;transition:.3s;position:relative}
.call-trigger svg{width:28px;height:28px}
.call-trigger:hover{transform:scale(1.08);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.8),0 0 40px rgba(141,120,255,.45)}
.call-widget.open .call-trigger{color:#8d78ff;border-color:#8d78ff}
.call-trigger:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(141,120,255,.35);animation:callPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes callPulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.call-menu{position:absolute;right:0;bottom:74px;min-width:230px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:20px;border:1px solid rgba(120,110,190,.35);background:linear-gradient(160deg,rgba(18,16,32,.97),rgba(9,9,14,.97));box-shadow:0 20px 60px rgba(0,0,0,.85),0 0 30px rgba(124,92,255,.15);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(12px) scale(.95);transform-origin:bottom right;transition:.28s cubic-bezier(.2,.9,.3,1.2)}
.call-widget.open .call-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.call-opt{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;text-decoration:none;color:#ddd;font:600 12.5px "Space Grotesk", Arial, sans-serif;letter-spacing:.04em;transition:.22s;border:1px solid transparent}
.call-opt svg{width:20px;height:20px;flex-shrink:0}
.call-opt:hover{background:rgba(141,120,255,.12);border-color:rgba(141,120,255,.35);color:#fff;transform:translateX(-4px)}
.call-opt.viber{color:#a78bfa}.call-opt.viber:hover{color:#c4b5fd}
.call-opt.whatsapp{color:#4ade80}.call-opt.whatsapp:hover{color:#86efac}
.call-opt.phone{color:#8d78ff}.call-opt.phone:hover{color:#b3a3ff}
/* =========================================================
NEXUS AI ASSISTANT WIDGET (LEFT-FLOATING, CYBERPUNK GLASS)
========================================================= */
.nexus-widget {
position: fixed;
bottom: 100px;
left: 30px;
z-index: 9999;
font-family: "Space Grotesk", Arial, sans-serif;
}
/* Floating Trigger Button */
.nexus-trigger {
position: relative;
width: 62px;
height: 62px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(20, 16, 38, 0.95), rgba(7, 7, 10, 0.95));
border: 1px solid rgba(106, 223, 184, 0.45);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(106, 223, 184, 0.25);
backdrop-filter: blur(14px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s;
}
.nexus-trigger:hover {
transform: scale(1.08) translateY(-3px);
border-color: rgba(106, 223, 184, 0.9);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 35px rgba(106, 223, 184, 0.5), inset 0 0 20px rgba(154, 133, 255, 0.3);
}
.nexus-trigger-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.nexus-trigger-icon img {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 0 8px rgba(106, 223, 184, 0.8));
}
.nexus-trigger-badge {
position: absolute;
top: -2px;
right: -2px;
background: linear-gradient(135deg, #6adfb8, #8e74ff);
color: #050507;
font-size: 9px;
font-weight: 800;
padding: 2px 6px;
border-radius: 100px;
letter-spacing: 0.05em;
box-shadow: 0 0 10px rgba(106, 223, 184, 0.6);
}
.nexus-trigger-glow {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(106, 223, 184, 0.35), transparent 70%);
animation: triggerGlow 3s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes triggerGlow {
0% { transform: scale(0.9); opacity: 0.5; }
100% { transform: scale(1.18); opacity: 0.9; }
}
/* Tooltip on Hover */
.nexus-trigger-tooltip {
position: absolute;
left: 76px;
top: 50%;
transform: translateY(-50%) translateX(-8px);
background: rgba(11, 11, 16, 0.95);
border: 1px solid rgba(106, 223, 184, 0.35);
border-radius: 12px;
padding: 8px 14px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
gap: 2px;
}
.nexus-trigger:hover .nexus-trigger-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
.nexus-tooltip-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: #6adfb8;
}
.nexus-tooltip-sub {
font-size: 10px;
color: #92929b;
font-family: Inter, Arial, sans-serif;
}
/* Chat Panel */
.nexus-panel {
position: absolute;
bottom: 80px;
left: 0;
width: 375px;
max-width: calc(100vw - 40px);
height: 520px;
max-height: calc(100vh - 120px);
background: linear-gradient(165deg, rgba(16, 14, 24, 0.96), rgba(8, 8, 12, 0.98));
border: 1px solid rgba(138, 114, 255, 0.3);
border-radius: 22px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 40px rgba(106, 223, 184, 0.15);
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.94);
transform-origin: bottom left;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}
.nexus-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Panel Header */
.nexus-panel-header {
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.02);
}
.nexus-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.nexus-avatar {
position: relative;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(106, 223, 184, 0.1);
border: 1px solid rgba(106, 223, 184, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.nexus-avatar img {
width: 26px;
height: 26px;
object-fit: contain;
mix-blend-mode: screen;
}
.nexus-status-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #4ef2bb;
border: 2px solid #08080c;
box-shadow: 0 0 8px #4ef2bb;
}
.nexus-header-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
display: flex;
align-items: center;
gap: 6px;
}
.nexus-header-title span {
font-size: 9px;
background: rgba(106, 223, 184, 0.15);
color: #6adfb8;
border: 1px solid rgba(106, 223, 184, 0.3);
padding: 1px 5px;
border-radius: 6px;
}
.nexus-header-status {
font-size: 10.5px;
color: #8a8a95;
font-family: Inter, Arial, sans-serif;
margin-top: 1px;
}
.nexus-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.nexus-btn-icon {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #888;
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 13px;
transition: all 0.2s;
}
.nexus-btn-icon:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
}
/* Quick prompt chips */
.nexus-chips {
padding: 10px 14px;
display: flex;
gap: 6px;
overflow-x: auto;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.2);
scrollbar-width: none;
}
.nexus-chips::-webkit-scrollbar {
display: none;
}
.nexus-chip {
flex: 0 0 auto;
background: rgba(106, 223, 184, 0.06);
border: 1px solid rgba(106, 223, 184, 0.25);
color: #c4d0df;
font-size: 10.5px;
font-family: Inter, Arial, sans-serif;
padding: 5px 10px;
border-radius: 100px;
cursor: pointer;
transition: all 0.2s;
}
.nexus-chip:hover {
background: rgba(106, 223, 184, 0.2);
border-color: #6adfb8;
color: #fff;
}
/* Messages Area */
.nexus-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: Inter, Arial, sans-serif;
font-size: 12.5px;
line-height: 1.55;
scrollbar-width: thin;
scrollbar-color: rgba(106, 223, 184, 0.2) transparent;
}
.nexus-msg {
display: flex;
flex-direction: column;
max-width: 86%;
word-break: break-word;
animation: msgPop 0.25s ease-out;
}
@keyframes msgPop {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.nexus-msg.bot {
align-self: flex-start;
}
.nexus-msg.user {
align-self: flex-end;
}
.nexus-bubble {
padding: 10px 14px;
border-radius: 14px;
}
.nexus-msg.bot .nexus-bubble {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(106, 223, 184, 0.22);
color: #e2e2ea;
border-top-left-radius: 3px;
}
.nexus-msg.user .nexus-bubble {
background: linear-gradient(135deg, #7961ff, #5940e0);
color: #fff;
border-top-right-radius: 3px;
box-shadow: 0 4px 15px rgba(121, 97, 255, 0.35);
}
.nexus-time {
font-size: 9px;
color: #555;
margin-top: 4px;
padding: 0 4px;
}
.nexus-msg.user .nexus-time {
align-self: flex-end;
}
/* Typing indicator */
.nexus-typing {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(106, 223, 184, 0.22);
border-radius: 14px;
border-top-left-radius: 3px;
width: fit-content;
}
.nexus-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6adfb8;
animation: typingBounce 1.2s infinite ease-in-out;
}
.nexus-typing span:nth-child(2) { animation-delay: 0.2s; }
.nexus-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1.1); opacity: 1; }
}
/* Form Input */
.nexus-form {
padding: 12px 14px;
background: rgba(10, 10, 14, 0.95);
border-top: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
align-items: center;
gap: 8px;
}
.nexus-form input {
flex: 1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px 14px;
color: #fff;
font-size: 12px;
outline: none;
transition: border-color 0.2s, background 0.2s;
font-family: Inter, Arial, sans-serif;
}
.nexus-form input:focus {
border-color: rgba(106, 223, 184, 0.6);
background: rgba(255, 255, 255, 0.07);
}
.nexus-send-btn {
background: linear-gradient(135deg, #6adfb8, #00d2ff);
border: none;
width: 36px;
height: 36px;
border-radius: 10px;
color: #050507;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.2s, opacity 0.2s;
}
.nexus-send-btn:hover {
transform: scale(1.05);
opacity: 0.95;
}
@media (max-width: 768px) {
/* Nexus widget: above mobile nav */
.nexus-widget {
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
left: 16px;
}
.nexus-trigger {
width: 52px;
height: 52px;
}
.nexus-trigger-icon {
width: 32px;
height: 32px;
}
/* Full-screen style panel on mobile */
.nexus-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
height: 75dvh;
max-height: 75dvh;
border-radius: 24px 24px 0 0;
transform-origin: bottom center;
transform: translateY(30px) scale(0.98);
}
.nexus-panel.open {
transform: translateY(0) scale(1);
}
.nexus-trigger-tooltip { display: none; }
}
/* =========================================================
PARTNERS SECTION
========================================================= */
.partners { text-align: center; padding-bottom: 80px; }
.partners h2 {
font: 700 clamp(28px, 3vw, 42px)/1.05 "Space Grotesk", Arial, sans-serif;
letter-spacing: -0.04em;
margin: 12px 0 10px;
}
.partners h2 span { color: #65656e; }
.partners p {
color: #777;
font-size: 13px;
line-height: 1.7;
max-width: 480px;
margin: 0 auto 40px;
}
.partners-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.partner-card {
width: 180px;
height: 180px;
border-radius: 24px;
border: 1px solid #26262f;
background: linear-gradient(165deg, #101018f2, #0a0a10f2);
backdrop-filter: blur(6px);
display: grid;
place-items: center;
padding: 30px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.partner-card:hover {
border-color: #6a5acd;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 92, 255, 0.15);
transform: translateY(-5px);
}
.partner-logo {
max-width: 120px;
max-height: 120px;
object-fit: contain;
filter: grayscale(20%) brightness(0.9);
transition: filter 0.3s, transform 0.3s;
}
.partner-card:hover .partner-logo {
filter: grayscale(0%) brightness(1.1);
transform: scale(1.05);
}
@media (max-width: 600px) {
.partners-grid { gap: 24px; }
.partner-card { width: 140px; height: 140px; padding: 22px; }
.partner-logo { max-width: 90px; max-height: 90px; }
}
/* ============================================
PREMIUM CYBERPUNK FOOTER
============================================ */
.footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(12, 12, 18, 0.8) 0%, #050507 100%);
position: relative;
z-index: 10;
padding: 70px 8vw 36px;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(118, 100, 210, 0.6), rgba(78, 242, 187, 0.5), transparent);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
width: fit-content;
}
.footer-logo-img {
width: 34px;
height: 34px;
object-fit: contain;
border-radius: 8px;
filter: drop-shadow(0 0 10px rgba(118, 100, 210, 0.5));
}
.footer-logo-text {
font: 700 13px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
}
.footer-desc {
color: #888896;
font-size: 13px;
line-height: 1.75;
max-width: 360px;
margin: 0;
}
.footer-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 100px;
background: rgba(78, 242, 187, 0.06);
border: 1px solid rgba(78, 242, 187, 0.22);
font: 500 11px "Space Grotesk", Arial, sans-serif;
color: #4ef2bb;
width: fit-content;
letter-spacing: 0.04em;
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ef2bb;
box-shadow: 0 0 10px #4ef2bb;
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.85); }
}
.footer-col h4 {
font: 600 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
margin: 0 0 18px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-col a {
color: #777785;
text-decoration: none;
font-size: 12.5px;
transition: color 0.2s, transform 0.2s;
display: inline-block;
}
.footer-col a:hover {
color: #a894ff;
transform: translateX(4px);
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-c-link {
display: flex;
align-items: center;
gap: 10px;
color: #888896;
text-decoration: none;
font-size: 12.5px;
transition: color 0.2s;
word-break: break-all;
}
.footer-c-link svg {
color: #7664d2;
flex-shrink: 0;
transition: color 0.2s;
}
.footer-c-link:hover {
color: #fff;
}
.footer-c-link:hover svg {
color: #4ef2bb;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 28px;
color: #555562;
font: 500 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.05em;
}
.footer-tag {
color: #444450;
letter-spacing: 0.16em;
}
/* ============================================
MOBILE WEBAPP — FULL APP EXPERIENCE
============================================ */
/* --- MOBILE TOP BAR --- */
.m-topbar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 998;
height: calc(52px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
padding-left: 16px;
padding-right: 16px;
background: rgba(5, 5, 7, 0.92);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(255,255,255,0.06);
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 0 rgba(118, 100, 210, 0.08);
}
.m-topbar-logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #fff;
font: 700 11px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.1em;
}
.m-topbar-logo img {
width: 26px;
height: 26px;
object-fit: contain;
border-radius: 6px;
}
.m-topbar-langs {
display: flex;
gap: 3px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 100px;
padding: 3px 6px;
}
.m-topbar-langs button {
background: none;
border: none;
cursor: pointer;
padding: 3px 4px;
border-radius: 6px;
opacity: 0.45;
filter: grayscale(30%);
transition: opacity 0.2s, transform 0.2s, filter 0.2s;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.m-topbar-langs button:hover {
opacity: 0.85;
}
.m-topbar-langs button.active {
opacity: 1;
transform: scale(1.15);
filter: grayscale(0%) drop-shadow(0 0 6px rgba(160, 140, 255, 0.6));
}
.m-topbar-langs button .fi {
width: 20px;
height: 15px;
border-radius: 2px;
display: block;
}
/* --- MOBILE BOTTOM NAV --- */
.m-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: rgba(8, 8, 14, 0.93);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 8px 4px env(safe-area-inset-bottom, 8px);
justify-content: space-around;
align-items: center;
height: calc(62px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -1px 0 rgba(118, 100, 210, 0.1);
}
.m-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-decoration: none;
color: #555;
font: 500 8px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.03em;
padding: 4px 6px;
border-radius: 10px;
transition: color 0.25s, background 0.25s;
-webkit-tap-highlight-color: transparent;
position: relative;
flex: 1;
max-width: 72px;
}
.m-nav-item svg {
transition: transform 0.25s, filter 0.25s;
}
.m-nav-item.active {
color: #fff;
}
.m-nav-item.active svg {
filter: drop-shadow(0 0 8px rgba(118, 100, 210, 0.7));
transform: scale(1.1);
}
.m-nav-item.active::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 3px;
background: linear-gradient(90deg, #7664d2, #4ef2bb);
border-radius: 3px;
}
/* ── 5 YEARS ANNIVERSARY BADGE IN LOADER ────────────────────── */
.loader-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 22px;
border-radius: 100px;
background: rgba(18, 16, 32, 0.85);
border: 1px solid rgba(154, 133, 255, 0.45);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 25px rgba(122, 95, 255, 0.28), inset 0 0 15px rgba(154, 133, 255, 0.12);
font: 700 12.5px "Space Grotesk", Arial, sans-serif;
letter-spacing: 0.24em;
color: #ffffff;
text-transform: uppercase;
position: relative;
z-index: 2;
opacity: 0;
animation: loaderFadeIn 0.8s ease 0.2s forwards;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.loader-badge span:nth-child(2) {
background: linear-gradient(120deg, #ffffff 15%, #b4a2ff 65%, #4ef2bb 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.loader-badge-dot {
color: #4ef2bb;
font-size: 12px;
text-shadow: 0 0 10px #4ef2bb, 0 0 20px rgba(78, 242, 187, 0.6);
animation: pulseDot 2s ease-in-out infinite alternate;
}
@keyframes pulseDot {
0% { transform: scale(0.85); opacity: 0.75; }
100% { transform: scale(1.22); opacity: 1; }
}
/* ============================================================
MOBILE WEBAPP — FULL APP EXPERIENCE (Android + iOS)
============================================================ */
/* === GLOBAL MOBILE (≤ 768px) === */
@media (max-width: 768px) {
/* Show mobile top bar and bottom nav, hide desktop header */
.m-topbar { display: flex !important; }
.m-nav { display: flex !important; }
.header { display: none !important; }
.hamb { display: none !important; }
/* Loader styling on mobile */
#loader {
gap: 16px !important;
padding: 0 20px;
box-sizing: border-box;
}
.loader-logo {
height: 90px !important;
}
.loader-text {
font-size: 24px !important;
letter-spacing: 0.2em !important;
text-align: center;
}
.loader-badge {
padding: 6px 16px !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
gap: 8px !important;
max-width: 90%;
text-align: center;
background: rgba(18, 16, 32, 0.9) !important;
border: 1px solid rgba(154, 133, 255, 0.5) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 20px rgba(122, 95, 255, 0.3) !important;
}
.loader-tagline {
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-align: center;
}
/* Body & scroll */
body {
padding-bottom: calc(70px + env(safe-area-inset-bottom, 10px));
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* Hero fills screen with room for top bar */
.hero {
min-height: 100dvh;
min-height: -webkit-fill-available;
padding-top: calc(68px + env(safe-area-inset-top, 0px));
padding-bottom: 30px;
align-items: flex-start;
}
/* Cursor off on mobile */
.cursor { display: none !important; }
.noise { z-index: 0; }
/* Sections scroll target clears top bar */
.section, .pricing, .lana, .contact, .calc-section {
scroll-margin-top: calc(60px + env(safe-area-inset-top, 0px));
}
/* Footer mobile layout */
.footer {
padding: 44px 20px calc(95px + env(safe-area-inset-bottom, 15px)) !important;
}
.footer-main {
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 30px;
}
.footer-brand { gap: 12px; }
.footer-desc { font-size: 12px; max-width: 100%; }
.footer-col h4 { margin-bottom: 12px; font-size: 11px; }
.footer-col ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.footer-col a { font-size: 12px; padding: 4px 0; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-top: 20px;
font-size: 10.5px;
}
/* Call widget — fixed bottom right, sits above mobile nav */
.call-widget {
position: fixed !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
right: 16px !important;
z-index: 9998 !important;
}
.call-trigger {
width: 52px !important;
height: 52px !important;
}
.call-trigger svg {
width: 24px !important;
height: 24px !important;
}
.call-menu {
bottom: 62px !important;
right: 0 !important;
min-width: 210px !important;
}
/* Rocket back to top — stacked safely ABOVE call widget (never overlaps!) */
.rocket-btn {
position: fixed !important;
bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
right: 20px !important;
width: 44px !important;
height: 44px !important;
z-index: 99 !important;
}
.rocket-svg {
width: 22px !important;
height: 22px !important;
}
/* Nexus widget — fixed bottom left, perfectly balanced with call widget */
.nexus-widget {
position: fixed !important;
bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
left: 16px !important;
z-index: 9999 !important;
}
.nexus-trigger {
width: 52px !important;
height: 52px !important;
}
/* ap-modal scrolls properly on mobile */
.ap-box {
max-height: 90dvh;
max-height: 90vh;
padding: 28px 20px 20px;
}
.ap-grid { grid-template-columns: 1fr; }
.ap-item { padding: 14px; }
.ap-ico { width: 52px; height: 52px; border-radius: 13px; }
.ap-ico img { max-width: 34px; max-height: 34px; }
.ap-info p { display: none; }
/* modals */
.service-modal-card,
.process-modal-card,
.numbers-modal-card,
.pm-box {
max-height: 90dvh;
max-height: 90vh;
border-radius: 24px;
padding: 26px 20px;
}
.service-modal-body { grid-template-columns: 1fr; gap: 16px; }
.process-modal-body { grid-template-columns: 1fr; gap: 14px; }
/* pricing modal */
.pm-cols { flex-direction: column; gap: 18px; }
/* ── CAROUSEL: flat 2D swipe slider on mobile ─────────────────────────── */
.portfolio3d-wrap {
margin-top: 16px;
padding: 0 0 20px;
overflow: visible;
position: relative;
}
.portfolio3d-stage {
height: 330px !important;
perspective: none !important;
overflow: hidden !important; /* clip side cards */
touch-action: pan-y;
position: relative;
}
/* Ring itself has no 3D transform — JS sets it to "none" on mobile */
.portfolio3d {
position: absolute;
inset: 0;
transform-style: flat !important;
touch-action: pan-y;
}
/* All cards: centered anchor, JS controls translateX */
.pcard {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 268px !important;
margin-left: -134px !important;
margin-top: -145px !important;
/* transform and opacity are controlled dynamically by JS on mobile */
filter: none !important;
pointer-events: auto !important;
cursor: pointer !important;
transition: none !important;
will-change: transform, opacity;
}
.pcard.front {
z-index: 2;
pointer-events: auto !important;
cursor: default !important;
}
.pcard.backfacing {
opacity: 0 !important;
pointer-events: none !important;
}
.pcard-inner {
height: 290px !important;
padding: 22px 18px !important;
gap: 8px !important;
border-radius: 20px;
background: linear-gradient(165deg, #0e0d18f5, #09090ef5);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 18px 50px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
}
.pcard.front .pcard-inner {
border-color: rgba(141, 120, 255, 0.6);
box-shadow: 0 22px 58px rgba(0,0,0,0.85), 0 0 30px rgba(141,120,255,0.25);
}
.pcard-logo {
width: 80px !important;
height: 80px !important;
border-radius: 18px;
background: radial-gradient(circle at 32% 25%, #252038, #0d0d14 70%);
border: 1px solid #3a3550;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
margin-bottom: 4px;
flex-shrink: 0;
display: grid;
place-items: center;
}
.pcard-logo img {
max-width: 52px !important;
max-height: 52px !important;
object-fit: contain;
}
.pcard-logo .nexus-logo-img, .pcard-logo .pm-logo-img {
max-width: 58px !important;
max-height: 58px !important;
}
.pcard-name {
font-size: 16px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 2px 0 0;
}
.pcard-badge {
font-size: 7.5px;
letter-spacing: 0.14em;
color: #777;
}
.pcard-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 11px !important;
line-height: 1.45;
color: #888896;
margin: 0;
max-width: 100%;
}
.pcard-tags {
font-size: 8.5px;
margin-top: auto;
color: #8d78ff;
letter-spacing: 0.06em;
}
/* Hide 3D floor on mobile */
.portfolio3d-floor { display: none; }
.portfolio3d-nav {
margin-top: 18px;
gap: 14px;
}
.pcar-btn {
width: 42px;
height: 42px;
border-radius: 50%;
font-size: 17px;
background: rgba(18, 16, 28, 0.95);
border: 1px solid rgba(141, 120, 255, 0.35);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
cursor: pointer;
}
.pcar-dots { gap: 5px; }
.pcar-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #2a2a36;
border: 0; padding: 0; cursor: pointer;
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.pcar-dot.active {
width: 18px; border-radius: 9px;
background: #8d78ff;
box-shadow: 0 0 8px rgba(141,120,255,0.7);
}
.ap-open-btn { font-size: 10px; padding: 13px 22px; margin-top: 16px; border-radius: 100px; }
.pcar-hint { font-size: 8px; letter-spacing: 0.2em; color: #555562; margin-top: 12px; }
}
/* === SMALL PHONES (≤ 480px) === */
@media (max-width: 480px) {
/* --- HERO --- */
.hero {
padding: 60px 20px 24px !important;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
}
.eyebrow { font-size: 8.5px !important; letter-spacing: 0.18em; }
.hero h1 {
font-size: clamp(32px, 10vw, 44px) !important;
line-height: 1.07 !important;
letter-spacing: -0.025em;
margin: 12px 0 14px;
}
.hero h1 em { display: block; }
.hero p {
font-size: 13.5px;
line-height: 1.65;
color: #888;
margin: 0 0 20px;
max-width: 100%;
}
.actions {
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.actions .btn {
width: 100%;
justify-content: center;
padding: 15px 22px;
font-size: 12px;
border-radius: 14px;
gap: 8px;
}
.hero-trust {
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
font-size: 8px;
}
.hero-object { display: none !important; }
/* --- SECTIONS --- */
.section, .pricing { padding: 56px 20px 36px !important; }
.lana { padding: 50px 20px 40px !important; }
.contact { padding: 56px 20px 40px !important; }
h2 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -0.02em; }
.kicker { font-size: 8.5px; letter-spacing: 0.2em; margin-bottom: 10px; color: #666; display: block; }
/* --- ABOUT --- */
.about-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
.about-grid p { font-size: 13px; color: #888; }
.numbers { grid-template-columns: 1fr 1fr !important; gap: 8px; border: none; margin-top: 32px; }
.numbers div {
padding: 18px 14px !important;
border-radius: 16px;
border: 1px solid #222228;
display: flex;
flex-direction: column;
gap: 8px;
}
.numbers div:last-child { border: 1px solid #222228; }
.numbers strong { font-size: 26px; }
.numbers span { font-size: 8px; }
/* --- SERVICES --- */
.section-title { flex-direction: column; align-items: flex-start !important; gap: 10px; margin-bottom: 30px; }
.section-title > p { max-width: 100%; font-size: 12.5px; }
.service-grid { grid-template-columns: 1fr !important; gap: 10px; }
.service-grid article { min-height: auto; padding: 24px 20px 20px; border-radius: 20px; }
.service-grid article .ico { font-size: 24px; margin-bottom: 40px; }
.service-grid h3 { font-size: 17px; }
.service-grid p { font-size: 12.5px; line-height: 1.6; }
/* --- PORTFOLIO 3D CAROUSEL (480px) --- */
.work-head { flex-direction: column; align-items: flex-start !important; gap: 10px; margin-bottom: 24px; }
.work-head > p { max-width: 100%; font-size: 12.5px; }
/* Tighter card for small phones */
.pcard {
width: 250px !important;
margin-left: -125px !important;
margin-top: -140px !important;
}
.portfolio3d-stage { height: 310px !important; }
.pcard-inner { height: 280px !important; }
/* --- NEXUS SECTION --- */
.lana { grid-template-columns: 1fr !important; gap: 0; }
.lana-visual { height: 260px; margin-top: 0; }
.big-orb { width: 190px; height: 190px; }
.big-orb span { font-size: 85px; }
.scan { width: 220px; }
.float-label { display: none; }
.lana-text { padding-right: 0; }
.lana-text h2 { font-size: 50px !important; line-height: 0.9 !important; }
.lana-text h3 { font-size: 15px !important; margin: 12px 0 10px; }
.lana-text p { font-size: 13px; line-height: 1.6; color: #888; }
.lana-pills { gap: 6px; flex-wrap: wrap; }
.lana-pills span { font-size: 8.5px; padding: 5px 12px; }
.lana-text .btn.white { width: 100%; justify-content: center; padding: 15px; border-radius: 14px; margin-top: 10px; }
/* --- CAPABILITIES --- */
.cap-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
.cap-grid h2 { font-size: clamp(22px, 7vw, 28px) !important; }
.cap-item { padding: 18px 16px; }
.cap-item-top { padding: 14px 0; }
.cap-head h3 { font-size: 15px; }
.cap-details { font-size: 12.5px; line-height: 1.6; }
/* --- PRICING --- */
.pricing-inner { max-width: 100%; }
.price-grid { grid-template-columns: 1fr !important; gap: 10px; }
.price-grid > div { padding: 22px 18px; border-radius: 18px; }
.price-grid small { font-size: 8px; letter-spacing: 0.16em; }
.price-grid strong { font-size: 28px; margin: 14px 0 8px; }
.price-grid p { font-size: 12px; }
.custom-note { font-size: 10.5px; margin-top: 20px; }
/* pricing modal */
.pm-box { padding: 22px 16px; border-radius: 20px; }
.pm-cols { display: flex; flex-direction: column; gap: 16px; }
.pm-list li { font-size: 12px; }
/* --- PROCESS --- */
.steps {
grid-template-columns: 1fr 1fr !important;
gap: 8px;
border: none;
margin-top: 30px;
}
.steps > div {
padding: 18px 14px;
border: 1px solid #25252c;
border-radius: 16px;
}
.steps > div:first-child { padding-left: 14px; }
.steps b { font-size: 24px; }
.steps span { font-size: 9px; letter-spacing: 0.12em; }
.steps p { font-size: 10.5px; }
/* --- CALCULATOR --- */
.calc-container { border-radius: 20px; }
.calc-inner { padding: 24px 16px 20px; border-radius: 18px; }
.calc-services-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-service-card { padding: 16px 10px; border-radius: 16px; }
.calc-service-icon { font-size: 26px; margin-bottom: 8px; }
.calc-service-card h4 { font-size: 11px; }
.calc-service-card p { font-size: 9.5px; }
.calc-step h3 { font-size: 16px; margin-bottom: 20px; }
.calc-options { gap: 8px; display: flex; flex-wrap: wrap; }
.calc-option { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 13px 10px; border-radius: 14px; text-align: center; }
.calc-option-title { font-size: 12px; }
.calc-option-desc { font-size: 9.5px; }
.calc-step-dot { width: 26px; height: 26px; font-size: 9px; }
.calc-progress { margin-bottom: 28px; }
.calc-result { padding: 18px 16px; border-radius: 16px; }
.calc-price-value { font-size: 30px; }
.calc-price-box { flex-direction: column; gap: 4px; align-items: flex-start; }
.calc-includes li { font-size: 11px; padding: 5px 10px; }
.calc-form-row { flex-direction: column; gap: 10px; }
.calc-form-row input, .calc-form-row textarea { padding: 13px 15px; font-size: 13.5px; border-radius: 14px; }
.calc-nav { margin-top: 22px; padding-top: 16px; gap: 10px; }
.calc-btn { padding: 13px 24px; font-size: 11.5px; border-radius: 100px; }
/* --- CONTACT --- */
.contact-bg { display: none; }
.contact h2 { font-size: clamp(28px, 9vw, 44px) !important; }
.contact > p { font-size: 13px; color: #888; line-height: 1.65; }
.contact-row {
flex-direction: column;
gap: 14px;
margin-top: 30px;
padding-top: 22px;
}
.mail { font-size: 16px !important; word-break: break-all; }
.contact-row .btn { width: 100%; justify-content: center; padding: 15px 22px; font-size: 12px; border-radius: 14px; }
/* --- PARTNERS --- */
.partners { padding: 50px 20px 30px !important; }
.partners-grid { gap: 12px; justify-content: center; }
.partner-card { width: 130px; height: 130px; padding: 20px; border-radius: 18px; }
.partner-logo { max-width: 80px; max-height: 80px; }
/* --- ALL MODALS --- */
.service-modal-card,
.process-modal-card,
.numbers-modal-card {
padding: 22px 16px;
border-radius: 22px;
max-height: 88dvh;
max-height: 88vh;
}
.service-modal-body { grid-template-columns: 1fr; gap: 14px; }
.process-modal-body { grid-template-columns: 1fr; gap: 14px; }
}
/* === VERY SMALL (≤ 360px) === */
@media (max-width: 360px) {
.hero h1 { font-size: 28px !important; }
h2 { font-size: 22px !important; }
.numbers { grid-template-columns: 1fr 1fr; }
.calc-services-grid { grid-template-columns: 1fr; }
.calc-option { flex: 1 1 100%; }
/* Tighter card for tiny screens */
.pcard {
width: 220px !important;
margin-left: -110px !important;
margin-top: -135px !important;
}
.portfolio3d-stage { height: 295px !important; }
.pcard-inner { height: 270px !important; padding: 18px 15px !important; }
.pcard-logo { width: 68px !important; height: 68px !important; }
.pcard-logo img { max-width: 44px !important; max-height: 44px !important; }
.pcard-name { font-size: 14px !important; }
.steps { grid-template-columns: 1fr; }
.actions .btn { padding: 14px 18px; font-size: 11.5px; }
.loader-badge { font-size: 9px !important; padding: 4px 12px !important; letter-spacing: 0.12em !important; }
.loader-text { font-size: 20px !important; }
}
/* === SAFE AREAS — notch / home indicator === */
@supports (padding: max(0px)) {
.m-nav {
padding-bottom: max(8px, env(safe-area-inset-bottom));
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
body { padding-top: max(0px, env(safe-area-inset-top)); }
}
/* === TOUCH OPTIMIZATION === */
.m-nav-item, .btn, .calc-btn, .calc-option, .calc-checkbox, .calc-service-card,
.step-card, .price-card, .service-card, .rocket-btn, .nexus-trigger,
.pcar-btn, .ap-open-btn, .nexus-chip {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
/* Active state feedback */
.calc-option:active, .calc-checkbox:active, .calc-service-card:active,
.step-card:active, .btn:active, .m-nav-item:active, .nexus-chip:active,
.pcar-btn:active, .ap-open-btn:active {
transform: scale(0.95);
transition: transform 0.1s;
}
/* Prevent iOS text selection artifacts */
.no-scroll { overflow: hidden; position: fixed; width: 100%; height: 100%; }
/* Fix iOS input zoom (min 16px font size) */
@media (max-width: 768px) {
input, textarea, select {
font-size: 16px !important;
}
.nexus-form input {
font-size: 16px !important;
}
}