:root{
  --bg:#0d1b2a;
  --primary:#0077b6;
  --accent:#00b4d8;
  --text:#333;
  --light:#f8f9fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--light)}
header{position:sticky;top:0;z-index:1000;background:var(--bg);color:#fff}
.header-inner{max-width:1200px;margin:auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-wrap img{height:44px;display:block}
.logo-title{font-weight:700;letter-spacing:.5px}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
nav a{color:#fff;text-decoration:none;font-weight:600}
nav a:hover, nav a.active{color:var(--accent)}
.menu-toggle{display:none;font-size:28px;cursor:pointer;color:#fff}
.hero{display:grid;place-items:center;min-height:60vh;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35)),url('https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;color:#fff;padding:80px 20px}
.hero h1{font-size:clamp(28px,4vw,46px);margin:0 0 10px}
.hero p{max-width:760px;margin:0 auto 22px;font-size:clamp(16px,2.2vw,20px)}
.btn{display:inline-block;background:var(--accent);color:#003049;border:none;padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none}
.btn:hover{filter:brightness(.95)}
.section{max-width:1200px;margin:auto;padding:64px 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:22px;opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.card.show{opacity:1;transform:none}
.card h3{color:var(--primary);margin-top:10px}
.card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.about-hero{background:url('https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;min-height:260px;border-radius:12px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:center}
.kv img{width:100%;height:280px;object-fit:cover;border-radius:12px}
.list{line-height:1.9}
footer{background:var(--bg);color:#fff}
.footer-inner{max-width:1200px;margin:auto;padding:24px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.social a{display:inline-flex;margin-right:10px}
.social img{width:22px;height:22px}
.contact-card{max-width:720px;margin:auto;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:22px}
form{display:grid;gap:14px}
input, textarea{width:100%;padding:12px 14px;border:1px solid #d0d7de;border-radius:8px;font-size:16px}
button{background:var(--primary);color:#fff;border:none;padding:12px 18px;border-radius:8px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(.95)}
.success{padding:10px 14px;border-radius:8px;background:#e8f7ef;color:#126b3c;margin-bottom:10px;border:1px solid #c7efd9}
.error{padding:10px 14px;border-radius:8px;background:#fdecea;color:#611a15;margin-bottom:10px;border:1px solid #f5c6cb}
.hero .sub{opacity:.9}
/* Responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr}
  nav ul{display:none;flex-direction:column;background:var(--bg);position:absolute;left:0;right:0;top:64px;padding:14px 20px}
  nav ul.show{display:flex}
  .menu-toggle{display:block}
}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .card{transition:none}
}