:root{
  --primary:#0b8fcf;
  --primary-dark:#066899;
  --dark:#0b2230;
  --text:#172033;
  --muted:#667085;
  --light:#f4f9fc;
  --white:#ffffff;
  --border:#e5edf3;
  --shadow:0 18px 45px rgba(11,34,48,.10);
  --radius:22px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

a{text-decoration:none;color:inherit}

.container{
  width:min(1180px,92%);
  margin:auto;
}

.topbar{
  background:linear-gradient(90deg,#071f2d,#0b3448);
  color:#fff;
  font-size:14px;
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
}

.header{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:99;
}

.nav{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:25px;
  font-weight:900;
  letter-spacing:-.5px;
}

.brand img{
  height:58px;
  width:auto;
}

.menu{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.menu a{
  padding:12px 16px;
  border-radius:999px;
  color:#273347;
  font-weight:700;
  transition:.25s;
}

.menu a:hover,
.menu a.active{
  background:#e8f6fd;
  color:var(--primary);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:92px 0;
  background:
    radial-gradient(circle at 85% 20%,rgba(11,143,207,.22),transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f4fbff 45%,#eaf7fd 100%);
}

.hero:before{
  content:"";
  position:absolute;
  inset:auto -120px -220px auto;
  width:520px;
  height:520px;
  background:linear-gradient(135deg,var(--primary),#63c8f4);
  border-radius:50%;
  opacity:.12;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:55px;
  align-items:center;
  position:relative;
}

.badge{
  display:inline-flex;
  padding:9px 16px;
  border-radius:999px;
  background:#e7f6fd;
  color:var(--primary);
  font-weight:900;
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(42px,6vw,76px);
  line-height:1.02;
  margin:0 0 22px;
  letter-spacing:-2.5px;
  color:#111827;
}

.hero p{
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  max-width:720px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  cursor:pointer;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff !important;
  font-weight:900;
  box-shadow:0 12px 28px rgba(11,143,207,.25);
  transition:.25s;
  margin:4px;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 35px rgba(11,143,207,.32);
}

.btn-light{
  background:#fff;
  color:var(--primary) !important;
  border:1px solid #d8eef8;
  box-shadow:0 10px 25px rgba(11,34,48,.08);
}

.hero-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  border-radius:32px;
  padding:42px;
  text-align:center;
}

.hero-card img{
  max-width:250px;
  margin-bottom:24px;
}

.hero-card h3{
  font-size:30px;
  margin:0 0 10px;
}

.section{
  padding:78px 0;
}

.section h2{
  font-size:38px;
  margin:0 0 14px;
  letter-spacing:-1px;
}

.section-lead{
  color:var(--muted);
  font-size:17px;
  line-height:1.8;
  max-width:850px;
}

.grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 12px 35px rgba(11,34,48,.07);
  transition:.25s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:#ccecf9;
}

.card h3{
  margin:0 0 12px;
  font-size:21px;
}

.card p{
  color:var(--muted);
  line-height:1.7;
}

.stats{
  background:linear-gradient(135deg,#071f2d,#0b3448);
  color:#fff;
}

.stats .section-lead,
.stats p{color:#d7e9f0}

.stat{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:30px;
  text-align:center;
}

.stat strong{
  font-size:44px;
  color:#6bd2ff;
}

.form-card{
  margin-top:28px;
  max-width:760px;
}

.form{
  display:grid;
  gap:14px;
}

.input,
textarea{
  width:100%;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  font-size:15px;
  background:#fbfdff;
}

textarea{
  min-height:140px;
  resize:vertical;
}

.input:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(11,143,207,.12);
}

.footer{
  background:#071f2d;
  color:#dceaf0;
  padding:60px 0 35px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:35px;
}

.footer img{
  max-width:130px;
  background:#fff;
  padding:8px;
  border-radius:14px;
}

.footer h3{
  color:#fff;
}

.footer a{
  color:#dceaf0;
}

.footer a:hover{
  color:#6bd2ff;
}

.admin-edit{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
}

@media(max-width:900px){
  .hero-grid,
  .grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .nav{
    align-items:flex-start;
    flex-direction:column;
    padding:18px 0;
  }

  .menu{
    width:100%;
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:8px;
  }

  .hero{
    padding:60px 0;
  }

  .hero h1{
    font-size:42px;
  }
}