/* Cross-Browser Compatible Design System */
/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.6;color:#0f172a;background:linear-gradient(135deg,#0c0a09 0%,#1c1917 25%,#292524 50%,#44403c 75%,#57534e 100%);background-attachment:fixed;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Skip Link */
.skip-link{position:absolute;top:-40px;left:6px;background:#000;color:#fff;padding:8px;text-decoration:none;z-index:1000;border-radius:4px}
.skip-link:focus{top:6px}



/* Ultra-Cool Floating Navigation */
.header{position:fixed;top:2rem;left:50%;transform:translateX(-50%);width:calc(100% - 4rem);max-width:1000px;background:rgba(0,0,0,0.25);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);z-index:1000;border:1px solid rgba(255,255,255,0.08);transition:all 0.5s cubic-bezier(0.4,0,0.2,1);border-radius:30px;box-shadow:0 25px 60px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05),0 0 0 1px rgba(245,158,11,0.1);animation:headerGlow 4s ease-in-out infinite alternate}
.header.scrolled{background:rgba(0,0,0,0.35);box-shadow:0 30px 80px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.08),0 0 0 1px rgba(245,158,11,0.2);transform:translateX(-50%) scale(0.98)}
.nav-container{padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;height:75px}
.logo{font-size:1.9rem;font-weight:900;background:linear-gradient(135deg,#f59e0b 0%,#f97316 25%,#ef4444 50%,#a855f7 75%,#3b82f6 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;transition:all 0.4s ease;filter:drop-shadow(0 0 25px rgba(245,158,11,0.6));animation:logoShine 3s ease-in-out infinite}
.logo:hover{transform:scale(1.15) rotate(2deg);filter:drop-shadow(0 0 40px rgba(245,158,11,1));animation-duration:1s}
.nav-menu{display:flex;list-style:none;gap:0.75rem;margin:0;padding:0.75rem;background:rgba(255,255,255,0.03);border-radius:50px;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.05);position:relative}
.nav-menu::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background:linear-gradient(45deg,transparent,rgba(245,158,11,0.2),transparent,rgba(239,68,68,0.2),transparent);border-radius:50px;z-index:-1;opacity:0;transition:opacity 0.5s ease;animation:borderGlow 3s linear infinite}
.nav-menu:hover::before{opacity:1}
.nav-link{color:#e5e7eb;text-decoration:none;font-weight:600;font-size:0.85rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;padding:0.9rem 1.8rem;border-radius:25px;text-transform:uppercase;letter-spacing:0.5px;overflow:hidden}
.nav-link::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(245,158,11,0.3),rgba(239,68,68,0.2));border-radius:50%;transition:all 0.5s ease;transform:translate(-50%,-50%);z-index:-1}
.nav-link:hover{color:#ffffff;transform:translateY(-2px) scale(1.05);text-shadow:0 0 10px rgba(245,158,11,0.8)}
.nav-link:hover::before{width:200px;height:200px}
.nav-link.active{color:#ffffff;background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 8px 25px rgba(245,158,11,0.5),inset 0 1px 0 rgba(255,255,255,0.2);text-shadow:0 0 15px rgba(245,158,11,1);animation:activeGlow 2s ease-in-out infinite alternate}
.nav-toggle{display:none;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);cursor:pointer;padding:1rem;border-radius:15px;transition:all 0.4s ease;backdrop-filter:blur(10px)}
.nav-toggle:hover{background:rgba(255,255,255,0.15);border-color:rgba(245,158,11,0.5);transform:scale(1.1);box-shadow:0 0 20px rgba(245,158,11,0.3)}

@keyframes headerGlow{0%{box-shadow:0 25px 60px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05),0 0 0 1px rgba(245,158,11,0.1)}100%{box-shadow:0 25px 60px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05),0 0 0 1px rgba(245,158,11,0.3)}}
@keyframes logoShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes borderGlow{0%{background:linear-gradient(45deg,transparent,rgba(245,158,11,0.2),transparent,rgba(239,68,68,0.2),transparent)}25%{background:linear-gradient(135deg,transparent,rgba(239,68,68,0.2),transparent,rgba(168,85,247,0.2),transparent)}50%{background:linear-gradient(225deg,transparent,rgba(168,85,247,0.2),transparent,rgba(59,130,246,0.2),transparent)}75%{background:linear-gradient(315deg,transparent,rgba(59,130,246,0.2),transparent,rgba(245,158,11,0.2),transparent)}100%{background:linear-gradient(45deg,transparent,rgba(245,158,11,0.2),transparent,rgba(239,68,68,0.2),transparent)}}
@keyframes activeGlow{0%{box-shadow:0 8px 25px rgba(245,158,11,0.5),inset 0 1px 0 rgba(255,255,255,0.2)}100%{box-shadow:0 8px 25px rgba(245,158,11,0.8),inset 0 1px 0 rgba(255,255,255,0.3)}}

/* Stunning Hero Section */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,#1e1b4b 0%,#312e81 25%,#3730a3 50%,#1e40af 75%,#1e3a8a 100%);color:#fff;position:relative;overflow:hidden}
.home-page .hero{padding-top:6rem}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(245,158,11,0.15),transparent 50%),radial-gradient(circle at 80% 70%,rgba(239,68,68,0.1),transparent 50%),radial-gradient(circle at 50% 50%,rgba(168,85,247,0.1),transparent 50%);z-index:1}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");animation:float 20s ease-in-out infinite;z-index:0}
.hero-content{max-width:900px;padding:0 2rem;position:relative;z-index:3}
.hero-title{font-size:clamp(3.5rem,10vw,7rem);font-weight:900;margin-bottom:2rem;opacity:0;animation:fadeInUp 1.2s ease 0.3s forwards;background:linear-gradient(135deg,#ffffff 0%,#f59e0b 30%,#ef4444 60%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.05;letter-spacing:-0.03em;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}
.hero-subtitle{font-size:clamp(1.4rem,5vw,2.2rem);margin-bottom:2rem;opacity:0;animation:fadeInUp 1.2s ease 0.6s forwards;font-weight:500;color:#fbbf24;letter-spacing:1px;text-transform:uppercase;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.hero-description{font-size:clamp(1.1rem,3vw,1.4rem);margin-bottom:3rem;opacity:0;animation:fadeInUp 1.2s ease 0.9s forwards;line-height:1.8;color:#f3f4f6;max-width:700px;margin-left:auto;margin-right:auto;font-weight:400}
.hero-cta{display:inline-flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#f59e0b,#f97316);color:#ffffff;padding:1.5rem 3rem;border-radius:50px;text-decoration:none;font-weight:700;font-size:1.2rem;transition:all 0.4s ease;opacity:0;animation:fadeInUp 1.2s ease 1.2s forwards;box-shadow:0 15px 35px rgba(245,158,11,0.4),inset 0 1px 0 rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.1);text-transform:uppercase;letter-spacing:0.5px}
.hero-cta:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 25px 50px rgba(245,158,11,0.6),inset 0 1px 0 rgba(255,255,255,0.3);background:linear-gradient(135deg,#f97316,#ea580c);filter:brightness(1.1)}

/* Typing Animation */
.typing-text{border-right:2px solid #fff;animation:blink 1s infinite}
@keyframes blink{0%,50%{border-color:#fff}51%,100%{border-color:transparent}}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Fixed Mobile Navigation */
@media (max-width:768px){
  .header{top:1rem;width:calc(100% - 2rem);border-radius:20px;height:65px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.1)}
  .nav-container{padding:0 1.5rem;height:65px}
  .logo{background:linear-gradient(135deg,#f59e0b,#f97316,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.6rem}
  .nav-menu{position:fixed;top:85px;left:1rem;right:1rem;background:rgba(255,255,255,0.98);backdrop-filter:blur(30px);flex-direction:column;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,0.15);transform:translateY(-20px) scale(0.95);opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border-radius:20px;border:1px solid rgba(0,0,0,0.1);z-index:999}
  .nav-menu.active{transform:translateY(0) scale(1);opacity:1}
  .nav-toggle{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:8px}
  .hamburger{display:block;width:24px;height:2px;background:#1e293b;position:relative;transition:all 0.3s ease;border-radius:2px}
  .hamburger::before,.hamburger::after{content:'';position:absolute;width:24px;height:2px;background:#1e293b;transition:all 0.3s ease;border-radius:2px}
  .hamburger::before{top:-6px}
  .hamburger::after{bottom:-6px}
  .nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
  .nav-toggle[aria-expanded="true"] .hamburger::before{transform:rotate(45deg);top:0;background:#ef4444}
  .nav-toggle[aria-expanded="true"] .hamburger::after{transform:rotate(-45deg);bottom:0;background:#ef4444}
  .nav-link{color:#1e293b;padding:1rem 1.5rem;margin:0.25rem 0;border-radius:12px;font-weight:600;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.05);transition:all 0.3s ease}
  .nav-link:hover{background:rgba(245,158,11,0.1);color:#f59e0b;border-color:rgba(245,158,11,0.2)}
  .nav-link.active{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(247,147,22,0.1));color:#f59e0b;border-color:rgba(245,158,11,0.3);font-weight:700}
  .home-page .hero{padding-top:5.5rem}
  .hero-title{font-size:clamp(2.8rem,9vw,4.5rem)}
  .hero-subtitle{font-size:clamp(1.3rem,5vw,2rem)}
  .hero-description{font-size:clamp(1.05rem,3vw,1.3rem)}
  .hero-cta{padding:1.1rem 2.2rem;font-size:1.05rem}
}

@keyframes mobileBorderGlow{0%{background:linear-gradient(45deg,rgba(245,158,11,0.3),rgba(239,68,68,0.2),rgba(168,85,247,0.2),rgba(59,130,246,0.2))}25%{background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(168,85,247,0.2),rgba(59,130,246,0.2),rgba(245,158,11,0.2))}50%{background:linear-gradient(225deg,rgba(168,85,247,0.3),rgba(59,130,246,0.2),rgba(245,158,11,0.2),rgba(239,68,68,0.2))}75%{background:linear-gradient(315deg,rgba(59,130,246,0.3),rgba(245,158,11,0.2),rgba(239,68,68,0.2),rgba(168,85,247,0.2))}100%{background:linear-gradient(45deg,rgba(245,158,11,0.3),rgba(239,68,68,0.2),rgba(168,85,247,0.2),rgba(59,130,246,0.2))}}