:root{
  --navy:#0A1F44;
  --yellow:#FFD23C;
  --gray-bg:#F5F5F5;
  --text:#1b1f2a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}

.container{width:min(1180px,100% - 32px);margin:0 auto}

header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e8e8ea
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px}
.brand{font-weight:800;color:var(--navy);font-size:20px;letter-spacing:0.5px}

nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{color:var(--navy);text-decoration:none;font-weight:600}
nav a:hover{opacity:.8}

.cta{
  background:var(--yellow);color:#111;padding:10px 16px;
  border-radius:10px;border:none;font-weight:700;cursor:pointer
}
.cta:hover{filter:brightness(.95)}

.hero{
  position:relative;min-height:58vh;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(10,31,68,.72), rgba(10,31,68,.72)),
    url('/assets/img/hero.jpg') center/cover no-repeat;
  color:#fff;text-align:center
}
.hero h1{font-size:clamp(28px,4.6vw,52px);margin:0 0 10px;font-weight:900}
.hero p{font-size:clamp(16px,2.2vw,22px);margin:0 0 22px}

.section{padding:56px 0}
.section.gray{background:var(--gray-bg)}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:#fff;border:1px solid #ececf1;border-radius:16px;padding:18px;
  box-shadow:0 2px 8px rgba(16,24,40,.04)
}
.card h3{margin:6px 0 6px;font-size:18px;color:var(--navy)}
.card p{margin:0;color:#3a4250;font-size:14px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{background:var(--navy);color:#fff;border-radius:16px;padding:18px}
.feature b{color:var(--yellow)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid #eaeaea}

.about{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.about img{width:100%;height:auto;border-radius:16px;border:1px solid #eaeaea}

form{display:grid;gap:12px}
.input{
  padding:12px 14px;border:1px solid #dcdde3;border-radius:10px;font-size:16px
}
textarea.input{min-height:120px;resize:vertical}

footer{background:#0A1F44;color:#fff;padding:32px 0;margin-top:40px}
footer a{color:#fff;text-decoration:none;opacity:.9}
footer a:hover{opacity:1}

.badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 12px;
  border-radius:999px;color:var(--navy);font-weight:700;border:1px solid #e5e7ef
}

@media (max-width:980px){
  .grid-4,.features,.gallery{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
}
@media (max-width:560px){
  nav ul{display:none}
  .grid-4,.features,.gallery{grid-template-columns:1fr}
}

/* Language switcher */
.lang-switch{position:relative;margin-left:12px}
.lang-btn{
  background:#fff;border:1px solid #e8e8ea;border-radius:10px;
  padding:8px 12px;font-weight:700;cursor:pointer;color:var(--navy)
}
.lang-btn:focus{outline:2px solid #cdd7ff;outline-offset:2px}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:180px;
  background:#fff;border:1px solid #e8e8ea;border-radius:12px;
  box-shadow:0 6px 24px rgba(16,24,40,.12);padding:8px;display:none;z-index:60
}
.lang-menu li{list-style:none}
.lang-menu a{
  display:block;padding:10px 12px;border-radius:8px;
  color:var(--navy);text-decoration:none;font-weight:600
}
.lang-menu a:hover{background:#f4f6fb}
.lang-switch.is-open .lang-menu{display:block}

@media (max-width:560px){
  .lang-switch{margin-top:8px}
}