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

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:#0b0b12;color:#fff;overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:22px 52px;display:flex;align-items:center;justify-content:space-between;transition:background .35s,backdrop-filter .35s}
.header.scrolled{background:rgba(11,11,18,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}

.logo{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.logo-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center}

.nav{display:flex;align-items:center;gap:6px;padding:10px 30px;border:1px solid rgba(47,175,249,.35);border-radius:40px;background:rgba(12,14,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 18px rgba(47,175,249,.12)}
.nav a{padding:7px 20px;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.78);border-radius:24px;transition:color .3s,background .3s,box-shadow .3s}
.nav a:hover,.nav a.active{color:#fff;background:linear-gradient(90deg,rgba(47,175,249,.3),rgba(182,239,9,.2));box-shadow:0 6px 18px rgba(47,175,249,.2)}

.social-icons{display:flex;align-items:center;gap:14px}
.social-icons a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);transition:background .3s,transform .3s}
.social-icons a:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.social-icons a svg{width:15px;height:15px;fill:#fff}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:200;background:none;border:none;padding:4px}
.hamburger span{display:block;width:26px;height:2.5px;background:#fff;border-radius:4px;transition:transform .35s,opacity .25s}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.btn-get-started{display:inline-flex;align-items:center;justify-content:center;padding:18px 42px;font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:600;color:#fff;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.22);border-radius:14px;cursor:pointer;transition:all .35s;position:relative;overflow:hidden;letter-spacing:.01em}
.btn-get-started:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px);box-shadow:0 10px 40px rgba(255,255,255,.06)}

/* ===== RESPONSIVE: Tablet ===== */
@media(max-width:1024px){
  .header{padding:16px 28px}
  .nav{padding:8px 20px;gap:4px}
  .nav a{padding:6px 12px;font-size:.82rem}
}

/* ===== RESPONSIVE: Mobile ===== */
@media(max-width:768px){
  .header{padding:14px 20px}
  .nav{display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:rgba(11,11,18,.97);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:none;border-radius:0;padding:60px 24px;z-index:150;transition:transform .35s ease-in-out;transform:translateY(-100%)}
  .nav.open{display:flex;transform:translateY(0)}
  .nav a{font-size:1.4rem;padding:14px 28px}
  .hamburger{display:flex}
  .social-icons{display:none}
}

@media(max-width:480px){
  .logo{font-size:1rem}
  .btn-get-started{padding:12px 24px;font-size:.88rem}
}