:root{--bg:#071A2E;--bg2:#0D2C4A;--blue:#1A73C8;--text:#EAF4FF}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),#091f36);color:var(--text)}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 8%;background:rgba(7,26,46,.9);position:sticky;top:0;backdrop-filter:blur(10px)}
.logo{height:100px}.menu a{white-space:nowrap;color:white;text-decoration:none;margin-left:20px}
.hero{padding:100px 8%;text-align:center;background:radial-gradient(circle at center,#1A73C8 0%,#071A2E 70%)}
.hero h1{font-size:3rem}.btn{display:inline-block;background:#1A73C8;color:#fff;text-decoration:none;padding:14px 28px;border-radius:40px}
.container{padding:70px 8%}h2{text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.1)}
footer{padding:30px;text-align:center;background:#051220}
form{display:grid;gap:12px;max-width:700px;margin:auto}
input,textarea{padding:14px;border-radius:10px;border:none}
button{padding:14px;border:none;border-radius:10px;background:#1A73C8;color:white}



img{max-width:100%;height:auto}
.menu{display:flex;flex-wrap:nowrap;gap:12px;justify-content:center;align-items:center}
.hero h1{line-height:1.2}

@media (max-width:768px){
  nav{
    flex-direction:column;
    padding:16px;
    gap:15px;
    text-align:center;
  }

  .logo{
    height:70px;
  }

  .menu{
    justify-content:center;
  }

  .menu a{white-space:nowrap;
    margin:0;
    padding:8px;
    display:inline-block;
  }

  .hero{
    padding:60px 20px;
  }

  .hero h1{
    font-size:2rem;
  }

  .container{
    padding:40px 20px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .card{
    padding:20px;
  }

  input,textarea,button{
    width:100%;
    font-size:16px;
  }
}

@media (max-width:480px){
  .hero h1{
    font-size:1.7rem;
  }

  .btn{
    width:100%;
    text-align:center;
    padding:14px;
  }
}

.menu {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}


@media (max-width:768px){
  .menu{
    flex-wrap:wrap;
    row-gap:10px;
  }
}