/* public/style.css */

:root{

  --bg:#090d14;

  --bg2:#101826;

  --card:#151d2b;

  --border:#243041;

  --text:#ffffff;

  --sub:#9ca3af;

  --blue:#4da3ff;

  --blue2:#2563eb;

  --green:#22c55e;

  --red:#ef4444;

  --shadow:
  0 15px 50px rgba(0,0,0,.35);

}

*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

  background:
  linear-gradient(
    180deg,
    #090d14 0%,
    #101826 100%
  );

  color:#fff;

  font-family:
  Inter,
  sans-serif;

  min-height:100vh;

}

a{

  text-decoration:none;

  color:inherit;

}

button{

  border:none;

  cursor:pointer;

  font-family:inherit;

}

.container{

  width:92%;

  max-width:1300px;

  margin:auto;

}

/* navbar */

.navbar{

  position:sticky;

  top:0;

  z-index:999;

  background:
  rgba(9,13,20,.78);

  backdrop-filter:blur(18px);

  border-bottom:
  1px solid rgba(255,255,255,.05);

}

.navbar-inner{

  height:78px;

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.logo{

  font-size:30px;

  font-weight:900;

  letter-spacing:.5px;

}

.logo span{

  color:var(--blue);

}

.nav-links{

  display:flex;

  align-items:center;

  gap:26px;

}

.nav-links a{

  color:#d1d5db;

  transition:.2s;

  font-size:15px;

}

.nav-links a:hover{

  color:#fff;

}

/* hero */

.hero{

  padding:
  150px 0
  130px;

  text-align:center;

}

.hero-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:
  10px 18px;

  border-radius:999px;

  background:
  rgba(77,163,255,.14);

  color:#cde4ff;

  margin-bottom:28px;

  font-size:14px;

  border:
  1px solid rgba(77,163,255,.25);

}

.hero h1{

  font-size:84px;

  line-height:1;

  margin-bottom:26px;

  font-weight:900;

}

.hero p{

  max-width:760px;

  margin:auto;

  color:#9ca3af;

  line-height:1.9;

  font-size:19px;

}

.hero-buttons{

  margin-top:38px;

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;

}

/* buttons */

.button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:
  15px 30px;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    var(--blue),
    var(--blue2)
  );

  color:#fff;

  font-weight:700;

  transition:
  transform .2s,
  opacity .2s;

}

.button:hover{

  transform:translateY(-4px);

  opacity:.96;

}

.secondary-button{

  background:
  rgba(255,255,255,.05);

  border:
  1px solid rgba(255,255,255,.08);

}

/* section */

.section{

  padding:90px 0;

}

.section-head{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:36px;

}

.section-title{

  font-size:44px;

  margin-bottom:12px;

}

.section-sub{

  color:#9ca3af;

}

/* cards */

.card-grid{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(310px,1fr)
  );

  gap:24px;

}

.card{

  position:relative;

  overflow:hidden;

  background:
  rgba(21,29,43,.85);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:24px;

  padding:30px;

  box-shadow:var(--shadow);

  transition:
  transform .25s,
  border-color .25s;

}

.card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(77,163,255,.45);

}

.card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(77,163,255,.12),
    transparent 40%
  );

}

.tool-icon{

  width:60px;

  height:60px;

  border-radius:16px;

  display:flex;

  justify-content:center;

  align-items:center;

  background:
  rgba(77,163,255,.14);

  font-size:24px;

  margin-bottom:20px;

}

.card h2{

  font-size:25px;

  margin-bottom:12px;

}

.card p{

  color:#9ca3af;

  line-height:1.8;

}

/* announcements */

.announcement-list{

  display:flex;

  flex-direction:column;

  gap:20px;

}

.announcement{

  background:
  rgba(21,29,43,.82);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:22px;

  padding:28px;

}

.announcement-title{

  font-size:24px;

  margin-bottom:10px;

}

.announcement-date{

  color:#6b7280;

  margin-bottom:14px;

  font-size:14px;

}

.announcement p{

  color:#9ca3af;

  line-height:1.8;

}

/* footer */

.footer{

  margin-top:120px;

  border-top:
  1px solid rgba(255,255,255,.05);

}

.footer-inner{

  height:90px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:#9ca3af;

}

/* inputs */

.input{

  width:100%;

  padding:16px;

  border-radius:16px;

  background:#0d131d;

  border:
  1px solid rgba(255,255,255,.06);

  color:#fff;

  outline:none;

}

.input:focus{

  border-color:var(--blue);

}

/* panels */

.panel{

  background:
  rgba(21,29,43,.85);

  border:
  1px solid rgba(255,255,255,.05);

  border-radius:28px;

  padding:36px;

  box-shadow:var(--shadow);

}

/* responsive */

@media(max-width:900px){

  .hero h1{

    font-size:58px;

  }

}

@media(max-width:700px){

  .navbar-inner{

    flex-direction:column;

    justify-content:center;

    gap:16px;

    height:auto;

    padding:18px 0;

  }

  .hero{

    padding:
    110px 0
    90px;

  }

  .hero h1{

    font-size:44px;

  }

  .section-title{

    font-size:34px;

  }

}