*{font-family:'Inter', sans-serif;} html{scroll-behavior:smooth;}  .glass{background:rgba(24, 24, 27, 0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(63, 63, 70, 0.5);} .glass-light{background:rgba(39, 39, 42, 0.5);backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(63, 63, 70, 0.3);} .gradient-text{background:linear-gradient(135deg, #00cc95 0%, #02553f 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .gradient-bg{background:linear-gradient(135deg, #00cc95 0%, #02553f 100%);} .glow{box-shadow:0 0 40px rgba(0, 204, 149, 0.15);}  @keyframes float{0%, 100%{transform:translateY(0);}50%{transform:translateY(-10px);}} .float{animation:float 4s ease-in-out infinite;} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}} .fade-in{animation:fadeInUp 0.8s ease-out forwards;opacity:0;}   .hero-glass{ color:transparent; background:linear-gradient(135deg,  rgba(255,255,255,1) 0%,  rgba(255,255,255,0.4) 25%,  rgba(0,204,149,0.6) 45%,  rgba(2,85,63,0.8) 55%,  rgba(0,204,149,0.4) 75%,  rgba(255,255,255,1) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1.5px rgba(0, 204, 149, 0.2); filter:drop-shadow(0 15px 35px rgba(0,0,0,0.5)) drop-shadow(0 5px 10px rgba(0,0,0,0.3)); animation:shimmer 8s linear infinite;} @keyframes shimmer{ 0%{background-position:200% center;} 100%{background-position:0% center;}}   .pixel-bg{ background-image: radial-gradient(rgba(0, 204, 149, 0.08) 1px, transparent 1px), radial-gradient(rgba(0, 204, 149, 0.04) 1px, transparent 1px); background-size:40px 40px, 20px 20px; background-position:0 0, 10px 10px;}   @keyframes marquee{ 0%{transform:translateX(0%);} 100%{transform:translateX(-50%);}} .animate-marquee{animation:marquee 30s linear infinite;}   @keyframes pulse-glow{ 0%, 100%{box-shadow:0 0 20px rgba(0, 204, 149, 0.2);} 50%{box-shadow:0 0 40px rgba(0, 204, 149, 0.4);}} .pulse-glow{animation:pulse-glow 3s ease-in-out infinite;} @keyframes fadeInDown{ from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);}} .fade-in-down{animation:fadeInDown 0.5s ease-out forwards;opacity:0;} @keyframes moveAurora1{ from{transform:translate(0, 0) rotate(0deg);} to{transform:translate(100px, 50px) rotate(180deg);}} @keyframes moveAurora2{ from{transform:translate(0, 0) rotate(0deg);} to{transform:translate(-100px, -50px) rotate(-180deg);}}  @keyframes float-gw{ 0%, 100%{transform:translateY(0px) rotate(0deg);} 25%{transform:translateY(-8px) rotate(1deg);} 50%{transform:translateY(-4px) rotate(-1deg);} 75%{transform:translateY(-10px) rotate(0.5deg);}} .float-gw{animation:float-gw var(--float-duration, 4s) ease-in-out infinite;} .float-gw:nth-child(2){--float-duration:4.5s;} .float-gw:nth-child(3){--float-duration:5s;} .float-gw:nth-child(4){--float-duration:3.8s;} .float-gw:nth-child(5){--float-duration:4.2s;} .float-gw:nth-child(6){--float-duration:5.2s;} .float-gw:nth-child(7){--float-duration:3.5s;} .float-gw:nth-child(8){--float-duration:4.8s;} .float-gw:nth-child(9){--float-duration:3.2s;} .float-gw:hover{animation-play-state:paused;transform:scale(1.08) !important;}  .spotlight-overlay{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5; opacity:0.12; background-image:radial-gradient( 300px 300px at var(--mx, 50%) var(--my, 50%), rgba(0, 204, 149, 0.8), rgba(2, 85, 63, 0.3) 40%, transparent 70% ); transition:opacity 0.3s;}  @keyframes ripple-green{ 0%{ opacity:0; background-size:0 0; transform:scale(0.1); -webkit-mask-image:radial-gradient(circle at center, #00cc95 0%, #02553f 0%, transparent 2%, transparent 100%); mask-image:radial-gradient(circle at center, #00cc95 0%, #02553f 0%, transparent 2%, transparent 100%);} 50%{ opacity:1; background-size:300% 300%;} 100%{ opacity:0; background-size:600% 600%; transform:scale(1); -webkit-mask-image:radial-gradient(circle at center, #00cc95 0%, #02553f 40%, transparent 80%, transparent 100%); mask-image:radial-gradient(circle at center, #00cc95 0%, #02553f 40%, transparent 80%, transparent 100%);}} .btn-ripple{ position:relative; overflow:hidden;} .btn-ripple::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%); opacity:0; border-radius:inherit; pointer-events:none;} .btn-ripple:hover::after{ animation:ripple-green 1.2s ease-out;}  .magnet-particle{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--p-color, #00cc95); pointer-events:none; transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; opacity:0.6;} .btn-magnet{ position:relative;} .btn-magnet:hover .magnet-particle{ transform:translate(0, 0) !important; opacity:1;}  @keyframes scroll-up{ 0%{transform:translateY(0);} 100%{transform:translateY(-50%);}} @keyframes scroll-up-reverse{ 0%{transform:translateY(-50%);} 100%{transform:translateY(0);}} .animate-scroll-up{ animation:scroll-up var(--scroll-speed, 30s) linear infinite;} .animate-scroll-up-reverse{ animation:scroll-up-reverse var(--scroll-speed, 25s) linear infinite;}  .service-carousel{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;} .service-carousel::-webkit-scrollbar{display:none;} .service-card{ scroll-snap-align:start; flex-shrink:0;} .carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:30;}