/* EvolveX360 shared shell — site header, mega menu and footer. Every page loads this file AFTER its own stylesheet, so the shell always wins. The rules below were lifted out of css/style.css in source order, which is why the layered "V1…V10" overrides are still stacked the way the homepage built them up. index.html keeps its own (now redundant) copies inside style.css; this file overrides them, so the homepage and every new page render the same header and footer from one place. Editing the header or footer: edit it here. Do not edit the copies still sitting in style.css — they no longer decide anything. Dark pages: add class="shell-dark" to . See the last block. */ .nav-wrap{position:fixed;z-index:100;inset:18px 0 auto;padding:0 24px;pointer-events:none} .nav{pointer-events:auto;max-width:1320px;height:78px;margin:auto;padding:8px 10px 8px 20px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(10,9,16,.93);backdrop-filter:blur(22px);display:grid;grid-template-columns:190px 1fr auto;align-items:center;box-shadow:0 18px 50px rgba(18,10,40,.17)} .brand{width:120px;height:61px;display:flex;align-items:center;overflow:hidden} .brand img{width:78px;height:auto} .links{display:flex;justify-content:center;gap:clamp(20px,3vw,42px)} .links a{position:relative;color:#d8d5df;font-size:13px;font-weight:500;padding:20px 0} .links a:after{content:"";position:absolute;left:0;right:100%;bottom:9px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:.3s} .links a:hover:after{right:0} .links a:hover{color:#fff} .nav-cta{height:58px;padding:0 20px;border-radius:17px;color:#fff;background:linear-gradient(135deg,#5d0de2,#9a1df4);display:flex;align-items:center;gap:10px;font:600 13px Poppins;box-shadow:inset 0 1px rgba(255,255,255,.2),0 10px 28px rgba(103,20,239,.28);transition:.3s} .nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(103,20,239,.4)} .status{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(154,252,114,.11),0 0 14px var(--lime)} .arrow{display:inline-block;transition:.25s} .diag{transform:rotate(-45deg)} a:hover .arrow{transform:translateX(4px)} a:hover .diag{transform:rotate(-45deg) translateX(4px)} .menu{display:none;width:48px;height:48px;background:none;border:0;padding:13px} .menu i{display:block;height:2px;margin:6px;background:#fff;transition:.25s} .btn{min-height:58px;padding:0 24px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font:600 13px Poppins;transition:.3s} .btn.primary{color:#fff;background:linear-gradient(135deg,#5210d5,#9c22f4);box-shadow:0 16px 35px rgba(104,20,239,.25),inset 0 1px rgba(255,255,255,.25)} .btn.primary:hover{transform:translateY(-3px);box-shadow:0 22px 45px rgba(104,20,239,.34)} footer{padding:70px max(5vw,30px) 28px;background:#0b0a11;color:#fff} .footer-top{display:grid;grid-template-columns:220px 1fr auto;gap:50px;align-items:center;padding-bottom:45px;border-bottom:1px solid rgba(255,255,255,.11)} .footer-top img{width:120px} .footer-top p{max-width:460px;color:#aaa6b1;font-size:13px;line-height:1.7} .footer-top a{font:600 10px Poppins;color:#c8c4cd} .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:55px 0;max-width:800px;margin-left:auto} .footer-links div{display:flex;flex-direction:column;gap:13px} .footer-links small{margin-bottom:10px;font-size:7px;font-weight:700;letter-spacing:.15em;color:#6f6b77} .footer-links a{font:500 11px Poppins;color:#bbb7c1} .footer-bottom{padding-top:25px;border-top:1px solid rgba(255,255,255,.11);display:flex;justify-content:space-between;color:#6f6b77;font-size:8px} [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.75,.25,1)} [data-reveal].shown{opacity:1;transform:none} @media(max-width:1100px){ .nav{grid-template-columns:140px 1fr auto} .links{gap:20px} } @media(max-width:820px){ .nav-wrap{inset:10px 0 auto;padding:0 10px} .nav{height:70px;border-radius:20px;grid-template-columns:1fr auto} .brand{height:55px} .brand img{width:67px} .nav-cta{display:none} .menu{display:block} .links{position:absolute;left:10px;right:10px;top:78px;padding:18px;border-radius:20px;background:#100e17;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s} .links.open{opacity:1;visibility:visible;transform:none} .links a{padding:16px;border-bottom:1px solid rgba(255,255,255,.08)} .menu.open i:first-child{transform:translateY(4px) rotate(45deg)} .menu.open i:last-child{transform:translateY(-4px) rotate(-45deg)} .footer-top{grid-template-columns:1fr;text-align:center} .footer-top img,.footer-top p{margin:auto} .footer-links{margin:0;grid-template-columns:repeat(3,1fr)} } @media(max-width:540px){ .btn{width:100%} .footer-links{grid-template-columns:1fr 1fr} .footer-links div:last-child{grid-column:1/-1} .footer-bottom{flex-direction:column;align-items:center;gap:12px} } .nav-wrap{inset:14px 0 auto} .nav{height:86px;max-width:1380px;padding:9px 10px 9px 12px;border-radius:29px;grid-template-columns:82px 1fr auto;background:linear-gradient(115deg,rgba(10,9,16,.97),rgba(21,15,31,.94));border-color:rgba(172,78,255,.24);box-shadow:0 24px 70px rgba(21,10,43,.24),inset 0 1px rgba(255,255,255,.08)} .nav:before{content:"";position:absolute;left:80px;right:220px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);opacity:.8;animation:navEnergy 5s ease-in-out infinite} .brand{position:relative;width:62px;height:62px;border-radius:20px;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(206,38,255,.35),rgba(97,18,221,.17) 45%,rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 0 24px rgba(139,24,241,.2),0 0 25px rgba(113,18,226,.12)} .brand:after{content:"";position:absolute;inset:7px;border:1px solid rgba(31,194,255,.2);border-radius:14px;animation:shellPulse 3s infinite} .brand img{position:relative;z-index:2;width:57px;height:auto;transform:translateY(7px);clip-path:inset(0 0 19% 0)} .links{justify-self:center;padding:6px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);gap:2px} .links a{padding:16px 18px;border-radius:13px;font-size:12px} .links a:after{display:none} .links a:hover{background:rgba(255,255,255,.075);box-shadow:inset 0 1px rgba(255,255,255,.06)} .links a:first-child:before{content:"✦";margin-right:7px;color:#bb43ff;font-size:9px} .nav-actions{display:flex;align-items:center;gap:8px} .nav-secondary{height:58px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:17px;color:#d9d6df;display:flex;align-items:center;gap:8px;font:600 11px Poppins;transition:.25s} .nav-secondary:hover{color:#fff;background:rgba(255,255,255,.06)} .nav-cta{position:relative;overflow:hidden} .nav-cta:before{content:"";position:absolute;inset:-40% auto -40% -40%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg) translateX(0%);animation:ctaSweep 4.5s infinite} .nav-cta>*{position:relative} .command-label{position:absolute;left:96px;top:50%;transform:translateY(-50%);font-size:7px;font-weight:700;letter-spacing:.18em;color:#6c6875;pointer-events:none} .command-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);margin-right:6px;box-shadow:0 0 8px var(--lime)} .no-scroll{overflow:hidden} @media(max-width:1100px){ .nav{grid-template-columns:72px 1fr auto} .command-label{display:none} .links a{padding:16px 11px} .nav-secondary{display:none} } @media(max-width:820px){ .nav{height:72px;grid-template-columns:1fr auto} .brand{width:54px;height:54px;border-radius:17px} .brand img{width:50px} .nav-actions{display:none} .links{left:10px;right:10px;top:80px;padding:18px} .links a{padding:16px} } .engine-crop{width:88px;height:77px;overflow:hidden;display:flex;justify-content:center} .engine-crop img{width:88px;height:auto;transform:translateY(2px);clip-path:inset(0 0 19% 0)} .world-brand .engine-crop{width:94px;height:82px} .world-brand .engine-crop img{width:94px} footer{position:relative;overflow:hidden;padding:0;background:radial-gradient(circle at 73% 24%,rgba(103,18,226,.23),transparent 28%),#09080e} .footer-stage{position:relative;max-width:1500px;margin:auto;padding:105px 5vw 70px;display:grid;grid-template-columns:.95fr 1.05fr;gap:8%;align-items:center;min-height:590px} .footer-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent,#000,transparent)} .footer-copy,.footer-art{position:relative;z-index:2} .footer-kicker{font-size:8px;font-weight:700;letter-spacing:.16em;color:#8e8996} .footer-copy h2{margin:20px 0;font:700 clamp(45px,5vw,72px)/1.04 Poppins;letter-spacing:-.06em} .footer-copy h2 span{color:transparent;background:linear-gradient(90deg,#c523ff,#6514eb,#00bafc);background-clip:text} .footer-copy>p{max-width:520px;color:#a49faa;font-size:14px;line-height:1.75} .footer-actions{display:flex;align-items:center;gap:12px;margin-top:30px} .footer-actions .btn{margin-top:0} .footer-art{min-height:410px;display:grid;place-items:center} .footer-shadow{position:absolute;width:370px;height:70px;bottom:35px;border-radius:50%;background:rgba(112,27,220,.32);filter:blur(35px);animation:shadowPulse 4s infinite} .footer-orb{position:relative;width:220px;height:220px;border-radius:58px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#a02bfd,#3f0f98 48%,#0d0a13 76%);box-shadow:0 35px 65px rgba(0,0,0,.5),0 0 0 20px rgba(121,25,236,.07),0 0 80px rgba(143,31,242,.35);transform:rotate(-7deg);animation:footerHover 6s ease-in-out infinite} .footer-orb .engine-crop{width:176px;height:155px} .footer-orb .engine-crop img{width:176px} .footer-ring{position:absolute;border:1px solid rgba(163,77,255,.24);border-radius:50%;animation:spin 22s linear infinite} .footer-ring.one{inset:-55px} .footer-ring.two{inset:-115px;animation-direction:reverse;animation-duration:31s} .social-orbit{position:absolute;z-index:4;width:48px;height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(20,16,29,.9);display:grid;place-items:center;color:#fff;font:700 11px Poppins;box-shadow:0 15px 30px rgba(0,0,0,.25);transition:.3s;animation:nodeFloat 5s ease-in-out infinite} .social-orbit:hover{transform:scale(1.12);border-color:#9a30f4;background:#6b18df} .social-li{left:9%;top:18%} .social-in{right:7%;top:23%;animation-delay:-1.5s} .social-fb{left:3%;bottom:18%;animation-delay:-3s} .social-yt{right:2%;bottom:20%;animation-delay:-4s} .footer-nav{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:45px max(5vw,30px);display:grid;grid-template-columns:1.2fr repeat(3,.7fr);gap:50px;max-width:1800px;margin:auto} .footer-branding img{width:165px;height:auto;filter:drop-shadow(0 12px 30px rgba(130,20,232,.2))} .footer-branding p{max-width:350px;color:#85808d;font-size:11px;line-height:1.7} .footer-col{display:flex;flex-direction:column;gap:13px} .footer-col small{margin-bottom:8px;font-size:7px;font-weight:700;letter-spacing:.16em;color:#686371} .footer-col a{color:#b9b4bf;font:500 11px Poppins;transition:.25s} .footer-col a:hover{color:#fff;transform:translateX(4px)} .social-row{display:flex;gap:8px;margin-top:12px} .social-row a{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:11px;display:grid;place-items:center;font-size:8px} .footer-bottom{max-width:1800px;margin:auto;padding:24px max(5vw,30px);border:0} .footer-live{display:flex;align-items:center;gap:7px} .footer-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px var(--lime)} @media(max-width:1100px){ .footer-stage{grid-template-columns:1fr 1fr;gap:3%} } @media(max-width:820px){ .footer-stage{grid-template-columns:1fr;text-align:center;padding-top:90px} .footer-copy>p{margin:auto} .footer-actions{justify-content:center} .footer-art{grid-row:1;min-height:360px} .footer-orb{width:175px;height:175px} .footer-orb .engine-crop{width:140px;height:123px} .footer-orb .engine-crop img{width:140px} .footer-nav{grid-template-columns:1fr 1fr;text-align:left} .footer-branding{grid-column:1/-1} .footer-branding img{width:145px} } @media(max-width:540px){ .footer-actions{flex-direction:column} .footer-art{min-height:320px} .footer-orb{width:145px;height:145px;border-radius:42px} .footer-orb .engine-crop{width:116px;height:102px} .footer-orb .engine-crop img{width:116px} .social-orbit{width:42px;height:42px} .footer-nav{grid-template-columns:1fr 1fr;gap:35px 20px} .footer-bottom{align-items:center} } footer{isolation:isolate;background:#08070c} footer:before{content:"";position:absolute;z-index:-2;inset:0 0 auto;height:780px;background-image:linear-gradient(90deg,rgba(6,5,11,.86) 0%,rgba(8,6,14,.58) 43%,rgba(9,7,15,.4) 70%,rgba(6,5,10,.76) 100%),linear-gradient(0deg,#09080e 0%,transparent 58%),url('../assets/evolvex360-footer-bg.jpg');background-size:cover;background-position:center;filter:saturate(1.12) contrast(1.06);animation:footerScene 18s ease-in-out infinite alternate} footer:after{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:780px;background:radial-gradient(circle at 72% 33%,rgba(131,30,237,.16),transparent 24%);pointer-events:none} .footer-stage{min-height:720px;padding-top:125px;padding-bottom:100px} .footer-copy{padding:38px;border:1px solid rgba(255,255,255,.1);border-radius:31px;background:linear-gradient(135deg,rgba(10,8,15,.78),rgba(18,12,26,.48));backdrop-filter:blur(15px);box-shadow:0 30px 80px rgba(0,0,0,.3)} .footer-copy h2{font-size:clamp(50px,5.4vw,82px)} .footer-art{min-height:500px} .footer-shadow{bottom:55px} .footer-nav{max-width:none;margin:0;padding:65px max(5vw,55px);grid-template-columns:1.2fr repeat(5,.72fr);gap:34px;background:linear-gradient(180deg,rgba(10,9,15,.94),#09080e);backdrop-filter:blur(18px)} .footer-branding p{max-width:300px} .footer-col a{font-size:10px} .footer-bottom{max-width:none;padding:26px max(5vw,55px);background:#09080e} .footer-page-count{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:9px;color:#77717f;font-size:7px;letter-spacing:.1em} .footer-page-count i{width:5px;height:5px;border-radius:50%;background:#a32cff;box-shadow:0 0 7px #a32cff} @media(max-width:1100px){ .footer-nav{grid-template-columns:1.3fr repeat(3,1fr)} .footer-nav .footer-col:nth-last-child(-n+2){margin-top:20px} .footer-branding{grid-row:span 2} } @media(max-width:820px){ .footer-stage{min-height:850px;padding-top:95px} .footer-copy{padding:28px} .footer-nav{grid-template-columns:1fr 1fr} .footer-branding{grid-column:1/-1;grid-row:auto} .footer-nav .footer-col:nth-last-child(-n+2){margin-top:0} } @media(max-width:540px){ .footer-stage{min-height:900px} .footer-copy{padding:24px} .footer-copy h2{font-size:46px} .footer-nav{padding:50px 25px;grid-template-columns:1fr 1fr} .footer-bottom{padding:24px 25px} } .nav-wrap{inset:20px 0 auto;padding:0 28px} .nav{height:82px;max-width:1440px;padding:9px 10px 9px 12px;grid-template-columns:70px 1fr auto;border-radius:20px;background:rgba(13,11,19,.88);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 55px rgba(24,13,43,.18);backdrop-filter:blur(24px)} .nav:before{left:82px;right:260px} .brand{width:62px;height:62px;border-radius:15px} .links{padding:0;border:0;background:transparent;gap:7px} .links a{padding:14px 17px;font-size:13px;font-weight:600} .links a:first-child:before{display:none} .links a:hover{background:#fff;color:#111019} .command-label{display:none} .nav-secondary,.nav-cta{height:60px;border-radius:13px;font-size:12px} .nav-secondary{padding:0 19px} .nav-cta{padding:0 22px} .nav-actions{gap:9px} .footer-kicker{font-size:11px;letter-spacing:.1em;line-height:1.5} .footer-col small{font-size:10px;letter-spacing:.09em} .footer-copy>p{font-size:16px} .answer-action .btn{margin:0;white-space:nowrap} footer:before,footer:after{height:720px} .footer-stage{max-width:1700px;min-height:650px;grid-template-columns:1.18fr .82fr;padding:105px 5vw 85px;gap:5%} .footer-copy{padding:42px 46px;background:rgba(10,8,15,.8)} .footer-copy h2{white-space:nowrap;font-size:clamp(42px,4.5vw,74px);line-height:1.03;margin:18px 0 24px} .footer-copy h2 span{display:inline} .footer-copy>p{max-width:720px} .footer-art{min-height:420px} .footer-nav{padding:70px max(5vw,60px);grid-template-columns:1.35fr repeat(5,.8fr);gap:42px;background:#0b0910} .footer-branding img{width:190px} .footer-branding p{font-size:14px;max-width:350px} .footer-col{gap:15px} .footer-col small{margin-bottom:10px;color:#9e98a5;font-family:Poppins;font-weight:600} .footer-col a{font-size:13px;color:#c7c2cd} .footer-page-count,.footer-live{display:none} .social-row a{width:42px;height:42px;font-size:10px} .footer-bottom{font-size:12px;color:#89838f} .footer-bottom span:nth-child(2){margin-left:auto} @media(max-width:1100px){ .links a{padding:14px 11px} .nav-secondary{display:none} .footer-stage{grid-template-columns:1fr} .footer-copy{text-align:center} .footer-copy>p{margin-left:auto;margin-right:auto} .footer-actions{justify-content:center} .footer-art{min-height:360px} .footer-nav{grid-template-columns:1.3fr repeat(3,1fr)} .footer-copy h2{font-size:clamp(36px,6.2vw,64px)} } @media(max-width:820px){ .nav-wrap{padding:0 12px;inset:12px 0 auto} .nav{height:72px;border-radius:16px} .links{background:#100e17;border:1px solid rgba(255,255,255,.1)} .links a{color:#fff} .footer-copy>p{font-size:15px} .answer-action .btn{width:100%} .footer-copy h2{white-space:normal} .footer-nav{grid-template-columns:1fr 1fr} .footer-bottom span:nth-child(2){margin-left:0} } @media(max-width:540px){ .footer-copy h2{font-size:42px} .footer-copy{padding:26px 20px} .footer-col a{font-size:12px} } .nav-wrap{inset:18px 0 auto;padding:0 34px} .nav{position:relative;max-width:1500px;height:88px;padding:0;display:grid;grid-template-columns:100px 1fr 360px;align-items:center;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible} .nav:before{display:none} .nav:after{content:'';position:absolute;z-index:-1;left:118px;right:378px;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(105,20,239,.18),transparent)} .brand{position:relative;width:94px;height:86px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;justify-content:flex-start} .brand:before{content:'';position:absolute;left:7px;top:13px;width:62px;height:62px;border-radius:50%;background:rgba(108,20,232,.16);filter:blur(19px);animation:brandAura 4s ease-in-out infinite} .brand:after{display:none} .brand img{position:relative;width:91px;height:auto;transform:translate(-1px,10px);clip-path:inset(0 0 24% 0);filter:drop-shadow(0 10px 16px rgba(91,16,194,.25))} .links{position:relative;justify-self:center;display:flex;align-items:center;gap:3px;padding:7px;border:1px solid rgba(31,25,42,.1);border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(25,14,47,.1),inset 0 1px #fff;backdrop-filter:blur(22px)} .links:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(110deg,rgba(0,186,252,.42),rgba(105,20,239,.18),rgba(201,35,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .links a{position:relative;padding:15px 18px;border-radius:999px;color:#27232e;font-size:13px;font-weight:600;transition:.3s cubic-bezier(.2,.8,.2,1)} .links a:after{display:none} .links a:hover{color:#fff;background:#121019;box-shadow:0 9px 22px rgba(17,14,24,.18);transform:translateY(-1px)} .nav-actions{justify-self:end;display:flex;align-items:center;gap:10px;padding:7px;border-radius:999px;background:rgba(16,13,23,.94);border:1px solid rgba(255,255,255,.11);box-shadow:0 18px 50px rgba(24,13,43,.18);backdrop-filter:blur(22px)} .nav-secondary{height:52px;padding:0 17px;border:0;border-radius:999px;color:#dbd7e1;font-size:12px} .nav-secondary:hover{background:rgba(255,255,255,.08)} .nav-cta{height:52px;padding:0 20px;border-radius:999px;font-size:12px;background:linear-gradient(110deg,#6414eb,#a91cf3);box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 24px rgba(107,20,235,.3)} .nav-cta:after{content:'';position:absolute;inset:-5px;border:1px solid rgba(153,48,250,.22);border-radius:999px;animation:navRing 2.8s ease-out infinite} .nav-cta .status{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.1),0 0 14px #fff} .menu{border-radius:50%;background:#121019} @media(max-width:1180px){ .nav{grid-template-columns:86px 1fr 226px} .links a{padding:14px 12px} .nav-secondary{display:none} .nav-actions{padding:7px} .brand{width:82px} } @media(max-width:820px){ .nav-wrap{inset:10px 0 auto;padding:0 14px} .nav{height:72px;grid-template-columns:1fr auto} .brand{width:76px;height:70px} .brand img{width:76px;transform:translate(0,8px)} .nav-actions{display:none} .menu{display:block;width:54px;height:54px} .links{position:absolute;left:0;right:0;top:80px;padding:12px;border-radius:20px;background:rgba(16,14,23,.97);border:1px solid rgba(255,255,255,.1);display:flex;align-items:stretch} .links:before{display:none} .links a{color:#fff;border-radius:12px;padding:16px} .links a:hover{background:rgba(255,255,255,.08)} } .nav-wrap{inset:22px 0 auto;padding:0 42px} .nav{max-width:1560px;height:82px;grid-template-columns:120px 1fr 350px} .nav:after{display:none} .brand{width:108px;height:82px} .brand:before{left:2px;top:10px} .brand img{width:103px;transform:translate(-3px,8px)} .links{justify-self:start;margin-left:28px;padding:0 0 0 27px;gap:31px;border:0;border-left:1px solid rgba(25,20,34,.19);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none} .links:before{display:none} .links a{padding:15px 0;color:#28232f;border-radius:0;font-size:13px} .links a:before{content:'';position:absolute;left:0;right:100%;bottom:7px;height:2px;background:linear-gradient(90deg,#6814ef,#00bafc);transition:.3s} .links a:hover{color:#6814ef;background:transparent;box-shadow:none;transform:none} .links a:hover:before{right:0} .nav-actions{position:relative;justify-self:end;padding:0;gap:22px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none} .nav-secondary{height:54px;padding:0 3px;color:#211d28;border-radius:0;border-bottom:1px solid #2d2833} .nav-secondary:hover{color:#6814ef;background:transparent;border-color:#6814ef} .nav-cta{position:relative;height:58px;min-width:184px;padding:0 26px 0 22px;border-radius:0;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px));background:linear-gradient(110deg,#160f20,#6814ef 67%,#a91cf3);box-shadow:none} .nav-cta:after{display:none} .nav-cta:before{animation:ctaSweep 4.5s infinite} .nav-cta .status{background:#9afc72;box-shadow:0 0 0 5px rgba(154,252,114,.1),0 0 12px #9afc72} @media(max-width:1180px){ .nav{grid-template-columns:100px 1fr 205px} .links{gap:20px;margin-left:15px;padding-left:20px} .links a{font-size:12px} .nav-secondary{display:none} .brand{width:94px} .brand img{width:92px} } @media(max-width:820px){ .nav-wrap{inset:10px 0 auto;padding:0 16px} .nav{height:72px;grid-template-columns:1fr auto} .brand{width:82px;height:70px} .brand img{width:80px} .links{position:absolute;left:0;right:0;top:80px;margin:0;padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:#121019;gap:0} .links a{color:#fff;padding:16px;border-radius:8px} .links a:before{display:none} .links a:hover{color:#fff;background:rgba(255,255,255,.08)} .menu{border-radius:0;clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,25% 100%,0 75%)} } .nav-wrap{inset:20px 0 auto;padding:0 34px;z-index:240} .nav{max-width:1540px;height:90px;padding:0;display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;box-shadow:none;backdrop-filter:none} .nav:before,.nav:after,.command-label,.nav>.links{display:none} .brand{width:178px;height:90px;overflow:visible;display:flex;align-items:flex-start;justify-content:flex-start;background:transparent;border:0;border-radius:0;box-shadow:none} .brand:before,.brand:after{display:none} .brand img{width:164px;height:auto;transform:translateY(-3px);clip-path:none;filter:drop-shadow(0 13px 24px rgba(77,18,160,.18))} .nav-actions{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 19px;border:1px solid rgba(24,20,32,.1);border-radius:999px;background:rgba(255,255,255,.83);box-shadow:0 20px 55px rgba(28,18,49,.12);backdrop-filter:blur(22px)} .nav-secondary{height:52px;padding:0 11px;border:0;color:#1c1822;font:600 12px Poppins} .nav-secondary:hover{color:var(--violet);background:transparent} .nav-cta{height:54px;min-width:156px;padding:0 20px;border-radius:999px;clip-path:none;background:#111018;color:#fff;font-size:12px;box-shadow:none} .nav-cta:before,.nav-cta:after{display:none} .menu{position:relative;display:grid;width:54px;height:54px;padding:0;border:0;border-radius:50%;place-content:center;background:linear-gradient(135deg,#6814ef,#a51bf5);cursor:pointer;clip-path:none;box-shadow:0 10px 27px rgba(104,20,239,.27);transition:.35s} .menu i{width:20px;height:2px;margin:3px;border-radius:4px;background:#fff;transition:.35s} .menu:hover{transform:rotate(7deg) scale(1.04)} .menu.open{transform:rotate(90deg);background:#fff;box-shadow:none} .menu.open i{background:#111018} .menu.open i:first-child{transform:translateY(4px) rotate(45deg)} .menu.open i:last-child{transform:translateY(-4px) rotate(-45deg)} .mega-menu{position:fixed;z-index:220;inset:0;overflow:auto;color:#fff;background:radial-gradient(circle at 80% 18%,rgba(112,20,239,.34),transparent 30%),radial-gradient(circle at 16% 88%,rgba(0,186,252,.13),transparent 28%),#09080e;opacity:0;visibility:hidden;clip-path:circle(0 at calc(100% - 80px) 60px);transition:clip-path .75s cubic-bezier(.76,0,.24,1),opacity .3s,visibility .75s} .mega-menu.open{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 80px) 60px)} .mega-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 82%);pointer-events:none} .mega-inner{position:relative;z-index:2;max-width:1420px;min-height:100vh;margin:auto;padding:150px 34px 45px;display:grid;grid-template-columns:1.15fr .85fr;gap:9vw} .mega-kicker{display:flex;align-items:center;gap:12px;margin-bottom:25px;color:#aaa5b1;font-size:10px;font-weight:700;letter-spacing:.15em} .mega-kicker i{width:36px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--magenta))} .mega-links{display:flex;flex-direction:column} .mega-links a{position:relative;width:max-content;padding:7px 0;font:700 clamp(42px,5vw,74px)/1.02 Poppins;letter-spacing:-.055em;color:#fff;transition:.35s} .mega-links a span{display:inline-block;width:36px;color:#7c7487;font:600 9px Inter;letter-spacing:.1em;vertical-align:middle} .mega-links a:after{content:'↗';position:absolute;left:calc(100% + 18px);top:50%;font-size:20px;color:var(--cyan);opacity:0;transform:translate(-10px,-50%);transition:.3s} .mega-links a:hover{padding-left:18px;color:transparent;background:linear-gradient(90deg,#fff,#a94aff,#00bafc);background-clip:text} .mega-links a:hover:after{opacity:1;transform:translate(0,-50%)} .mega-side{align-self:end;padding-bottom:18px} .mega-brand{position:relative;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:30px;background:rgba(255,255,255,.045);overflow:hidden} .mega-brand:before{content:'';position:absolute;width:220px;height:220px;right:-70px;top:-100px;border-radius:50%;background:#6814ef;filter:blur(65px);opacity:.5} .mega-brand img{position:relative;width:210px;height:auto;clip-path:inset(0 0 19% 0);filter:drop-shadow(0 20px 35px rgba(0,0,0,.3))} .mega-brand h3{position:relative;margin:23px 0 10px;font:600 27px/1.2 Poppins;letter-spacing:-.04em} .mega-brand p{position:relative;margin:0;color:#aaa6b2;font-size:13px;line-height:1.7} .mega-services{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px} .mega-services button{padding:14px 10px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:transparent;color:#d7d2dd;text-align:left;font:600 9px Poppins;cursor:pointer;transition:.25s} .mega-services button:hover{color:#fff;border-color:#8f36f5;background:rgba(104,20,239,.18);transform:translateY(-3px)} .mega-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11)} .mega-contact a{font:600 11px Poppins} .mega-socials{display:flex;gap:9px} .mega-socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.13);border-radius:50%;display:grid;place-items:center;font:600 8px Poppins} .mega-socials a:hover{background:#fff;color:#111018} .mega-orbit{position:absolute;right:-120px;top:60px;width:440px;height:440px;border:1px solid rgba(168,61,255,.16);border-radius:50%;animation:spin 30s linear infinite} .mega-orbit:before,.mega-orbit:after{content:'';position:absolute;border:1px solid rgba(0,186,252,.12);border-radius:50%} .mega-orbit:before{inset:65px} .mega-orbit:after{inset:130px} .mega-menu.open .mega-links a,.mega-menu.open .mega-side{animation:megaEnter .65s both} .mega-menu.open .mega-links a:nth-child(2){animation-delay:.06s} .mega-menu.open .mega-links a:nth-child(3){animation-delay:.12s} .mega-menu.open .mega-links a:nth-child(4){animation-delay:.18s} .mega-menu.open .mega-links a:nth-child(5){animation-delay:.24s} .mega-menu.open .mega-links a:nth-child(6){animation-delay:.30s} .mega-menu.open .mega-side{animation-delay:.2s} @media(max-width:820px){ .nav-wrap{inset:12px 0 auto;padding:0 16px} .nav{height:74px} .brand{width:132px;height:74px} .brand img{width:126px} .nav-actions{padding:6px} .nav-secondary,.nav-cta{display:none} .menu{display:grid;width:52px;height:52px} .mega-inner{padding:112px 22px 35px;grid-template-columns:1fr;gap:45px} .mega-links a{font-size:clamp(38px,11vw,58px)} .mega-side{align-self:auto} .mega-brand{padding:23px} .mega-brand img{width:160px} .mega-services{grid-template-columns:1fr} .mega-contact{align-items:flex-start;flex-direction:column} } .nav .brand{width:128px;align-items:center;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .35s} .nav .brand.logo-hidden{transform:translateY(-140%);opacity:0;pointer-events:none} .nav .brand img{width:108px;max-height:116px;object-fit:contain;transform:none;filter:drop-shadow(0 15px 28px rgba(87,18,190,.28))} @media(max-width:820px){ .nav .brand{width:98px} .nav .brand img{width:84px;max-height:92px} } @media(prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none} } /* keyframes used by the shell */ @keyframes shellPulse{50%{transform:scale(1.06);opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes navEnergy{0%,100%{opacity:.25;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1)}} @keyframes ctaSweep{0%,65%{transform:skewX(-20deg) translateX(0%)}100%{transform:skewX(-20deg) translateX(485.71%)}} @keyframes nodeFloat{50%{transform:translateY(-7px)}} @keyframes footerHover{50%{transform:rotate(4deg) translateY(-15px)}} @keyframes shadowPulse{50%{transform:scaleX(.78);opacity:.65}} @keyframes footerScene{0%{background-position:48% center;transform:scale(1)}100%{background-position:54% center;transform:scale(1.035)}} @keyframes brandAura{50%{transform:scale(1.18);opacity:.65}} @keyframes navRing{0%,45%{transform:scale(.94);opacity:0}70%{opacity:1}100%{transform:scale(1.05);opacity:0}} @keyframes megaEnter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} /* --------------------------------------------------------------------------- Dark pages (body.shell-dark) The header above is built for the homepage's light hero: a white glass pill holding the actions, dark label text. On a dark hero that pill inverts. Geometry, type scale and behaviour are untouched — colour only. --------------------------------------------------------------------------- */ .shell-dark .nav-actions{border-color:rgba(255,255,255,.11);background:rgba(16,13,23,.9);box-shadow:0 20px 55px rgba(0,0,0,.35)} .shell-dark .nav-secondary{color:#dbd7e1} .shell-dark .nav-secondary:hover{color:#fff;background:rgba(255,255,255,.08)} .shell-dark .nav-cta{background:linear-gradient(110deg,#6414eb,#a91cf3);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 24px rgba(107,20,235,.3)} .shell-dark .brand img{filter:drop-shadow(0 13px 24px rgba(0,0,0,.45))}