*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  color:#111827;

  background:#f5f7fb;

}

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

button,input,select,textarea{font:inherit}

.nav,.hero,.section,.footer{

  width:min(1180px,92vw);

  margin:0 auto;

}

.nav{

  padding:24px 0;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

}

.brand{

  display:flex;

  align-items:center;

  gap:12px;

  font-weight:900;

}

.logo{

  width:42px;

  height:42px;

  border-radius:12px;

  display:grid;

  place-items:center;

  background:#0b2a4a;

  color:white;

  font-weight:900;

}

.brand small{

  display:block;

  color:#6b7280;

  font-size:12px;

  margin-top:3px;

}

.navlinks{

  display:flex;

  align-items:center;

  gap:18px;

  color:#374151;

  font-weight:800;

  font-size:14px;

}

.navbtn{

  padding:11px 16px;

  border-radius:12px;

  background:#0b2a4a;

  color:white!important;

}

.hero{

  padding:74px 0 72px;

  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:34px;

  align-items:center;

}

.badge{

  display:inline-flex;

  padding:8px 12px;

  border:1px solid #dbe3ee;

  border-radius:999px;

  background:white;

  color:#0b4a7a;

  font-size:12px;

  font-weight:900;

}

.hero h1{

  margin:22px 0 18px;

  font-size:clamp(42px,5.6vw,70px);

  line-height:1.04;

  letter-spacing:-.055em;

}

.hero p{

  margin:0;

  max-width:720px;

  color:#4b5563;

  font-size:18px;

  line-height:1.8;

  word-break:keep-all;

}

.actions{

  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:30px;

}

.primary,.secondary{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:52px;

  padding:0 20px;

  border-radius:13px;

  font-weight:900;

}

.primary{

  background:#0b2a4a;

  color:white;

  box-shadow:0 18px 36px rgba(11,42,74,.16);

}

.secondary{

  background:white;

  color:#0b2a4a;

  border:1px solid #dbe3ee;

}


.panel,.card,.contactBox{

  background:white;

  border:1px solid #dbe3ee;

  border-radius:26px;

  box-shadow:0 22px 60px rgba(15,23,42,.07);

}

.panel{

  min-height:520px;

  padding:28px;

}

.panelHead{

  padding:24px;

  border-radius:20px;

  background:#0b2a4a;

  color:white;

}

.panelHead span{

  display:block;

  font-size:13px;

  opacity:.78;

  font-weight:800;

  margin-bottom:8px;

}

.panelHead b{

  font-size:30px;

  letter-spacing:-.03em;

}

.metricGrid{

  margin:18px 0;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;

}

.metricGrid div{

  padding:18px;

  border:1px solid #e5ebf3;

  border-radius:18px;

  background:#f8fafc;

}

.metricGrid strong{

  display:block;

  color:#0b2a4a;

  font-size:28px;

}

.metricGrid span{

  color:#6b7280;

  font-size:13px;

  font-weight:800;

}

.todo{

  display:grid;

  gap:10px;

  margin:0;

  padding:0;

  list-style:none;

}

.todo li{

  padding:14px 15px;

  border-radius:15px;

  background:#f8fafc;

  border:1px solid #e5ebf3;

  color:#374151;

  font-weight:800;

}

.todo li:before{

  content:"•";

  color:#0b4a7a;

  margin-right:8px;

}

.section{margin-bottom:72px}

.head{margin-bottom:22px}

.head span{

  display:inline-flex;

  padding:8px 12px;

  border-radius:999px;

  background:white;

  border:1px solid #dbe3ee;

  color:#0b4a7a;

  font-size:12px;

  font-weight:900;

}

.head h2{

  margin:14px 0 8px;

  font-size:clamp(30px,4vw,48px);

  line-height:1.12;

  letter-spacing:-.045em;

}

.head p{

  margin:0;

  color:#6b7280;

  line-height:1.7;

  font-size:17px;

}

.grid3{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;

}

.card{

  min-height:240px;

  padding:26px;

}

.num{

  width:42px;

  height:42px;

  border-radius:13px;

  display:grid;

  place-items:center;

  background:#eaf2ff;

  color:#0b4a7a;

  font-weight:900;

}

.card h3{

  margin:20px 0 10px;

  font-size:22px;

}

.card p{

  margin:0;

  color:#6b7280;

  line-height:1.7;

  word-break:keep-all;

}

.contact{

  display:grid;

  grid-template-columns:.9fr 1.1fr;

  gap:22px;

}

.contactBox{

  padding:30px;

}

.contactBox h2{

  margin:14px 0 10px;

  font-size:42px;

  line-height:1.12;

  letter-spacing:-.045em;

}

.contactBox p{

  margin:0;

  color:#6b7280;

  line-height:1.75;

}

.noteList{

  display:grid;

  gap:10px;

  margin-top:24px;

}

.noteList div{

  padding:15px;

  border-radius:15px;

  border:1px solid #e5ebf3;

  background:#f8fafc;

}

.noteList b{

  display:block;

  margin-bottom:5px;

}

form{

  margin-top:22px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:13px;

}

label{

  display:grid;

  gap:7px;

  color:#374151;

  font-weight:900;

  font-size:13px;

}

.full{grid-column:1/-1}

input,select,textarea{

  width:100%;

  min-height:50px;

  border:1px solid #dbe3ee;

  border-radius:13px;

  background:#fff;

  padding:0 13px;

  outline:none;

}

textarea{

  padding:13px;

  resize:vertical;

}

input:focus,select:focus,textarea:focus{

  border-color:#0b4a7a;

  box-shadow:0 0 0 4px rgba(11,74,122,.10);

}

.submit{

  grid-column:1/-1;

  min-height:54px;

  border:0;

  border-radius:13px;

  background:#0b2a4a;

  color:white;

  font-weight:900;

  cursor:pointer;

}

.msg{

  grid-column:1/-1;

  min-height:22px;

  margin:0;

  font-weight:900;

  color:#6b7280;

}

.msg.ok{color:#059669}

.msg.err{color:#dc2626}

.footer{

  padding:32px 0 46px;

  display:flex;

  gap:16px;

  color:#6b7280;

  font-weight:800;

}

.footer b{color:#111827}

.footer a{margin-left:auto;color:#0b4a7a}

@media(max-width:920px){

  .nav{align-items:flex-start;flex-direction:column}

  .navlinks{flex-wrap:wrap}

  .hero,.contact{grid-template-columns:1fr}

  .grid3,.metricGrid{grid-template-columns:1fr}

  form{grid-template-columns:1fr}

  .panel{min-height:auto}

  .footer{flex-direction:column}

  .footer a{margin-left:0}

}