@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@500;600;700&display=swap');

 :root {
     --primary: 16 185 129;
     --primary-rgb: 16, 185, 129;
     --secondary: 6, 182, 212;
 }
footer {
  position: relative;
  z-index: 1;
}

 .tail-container {
     font-family: 'Inter', system_ui, sans-serif;
 }

 .hero-bg {
     background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)), url('/assets/images/hero.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }


 .contact-bg {
     background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)), url('https://picsum.photos/id/1018/1920/1080');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 .neon-text {
     text-shadow:
         0 0 10px rgba(var(--primary-rgb), 0.5),
         0 0 20px rgba(var(--primary-rgb), 0.3),
         0 0 40px rgba(var(--primary-rgb), 0.2);
 }

 .letter {
     display: inline-block;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .marquee {
     animation: marquee 25s linear infinite;
 }

 @keyframes marquee {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .section-fade {
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .section-fade.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .stat-number {
     font-variant-numeric: tabular-nums;
 }

 .glass {
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .parallax {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .hover-scale {
     transition: transform 0.3s ease;
 }

 .hover-scale:hover {
     transform: scale(1.05);
 }

 .back-to-top {
     position: fixed;
     bottom: 40px;
     right: 40px;
     z-index: 1000;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .back-to-top.visible {
     opacity: 1;
 }

 /* Smooth background transition */
 #navbar {
     transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
 }

 /* Stronger glass when scrolling */
 #navbar.scrolled {
     background-color: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(20px);
 }

 /* Clean link animation */
 .nav-link {
     position: relative;
     transition: color 0.3s ease;
 }

 .nav-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
     width: 0%;
     height: 2px;
     background: #10b981;
     transition: width 0.3s ease;
 }

 .nav-link:hover {
     color: #10b981;
 }

 .nav-link:hover::after {
     width: 100%;
 }

 /* Fix Android 100vh issue */
 #hero {
     min-height: 100svh;
 }

 /* Smooth entrance animation */
 #hero>div {
     animation: fadeUp 0.8s ease-out forwards;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Subtle floating scroll indicator */
 .scroll-indicator {
     animation: float 2.5s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(6px);
     }
 }

 /* Android-safe height consistency */
 #motto {
     min-height: 60svh;
 }

 /* Logo entrance animation */
 .logo-letter {
     opacity: 0;
     transform: translateY(20px);
     animation: letterFade 0.6s ease forwards;
 }

 .logo-letter:nth-child(1) {
     animation-delay: 0.05s;
 }

 .logo-letter:nth-child(2) {
     animation-delay: 0.1s;
 }

 .logo-letter:nth-child(3) {
     animation-delay: 0.15s;
 }

 .logo-letter:nth-child(4) {
     animation-delay: 0.2s;
 }

 .logo-letter:nth-child(6) {
     animation-delay: 0.3s;
 }

 .logo-letter:nth-child(7) {
     animation-delay: 0.35s;
 }

 .logo-letter:nth-child(8) {
     animation-delay: 0.4s;
 }

 .logo-letter:nth-child(9) {
     animation-delay: 0.45s;
 }

 .logo-letter:nth-child(10) {
     animation-delay: 0.5s;
 }

 @keyframes letterFade {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Smooth marquee animation */
 .marquee {
     animation: scrollX 18s linear infinite;
 }

 @keyframes scrollX {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* Pause marquee on hover (premium touch) */
 .marquee:hover {
     animation-play-state: paused;
 }

 /* Smooth section reveal */
 #contact {
     opacity: 0;
     transform: translateY(40px);
     animation: contactFade 0.8s ease forwards;
     animation-delay: 0.2s;
 }

 @keyframes contactFade {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Optional subtle background glow animation */
 #contact::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15), transparent 70%);
     opacity: 0.5;
     pointer-events: none;
     animation: pulseGlow 6s ease-in-out infinite;
 }

 @keyframes pulseGlow {

     0%,
     100% {
         opacity: 0.4;
     }

     50% {
         opacity: 0.6;
     }
 }