:root{
  --bg:#080d10; --panel:#0d1519; --panel2:#111c21; --line:#1d3036;
  --text:#e6eeee; --muted:#91a4a8; --accent:#3bb7b0; --accent2:#8be4dc;
  --danger:#b64b50; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 70% 0,#12272c 0,#080d10 42%);color:var(--text);font:16px/1.7 Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.nav{position:fixed;left:0;top:0;bottom:0;width:245px;background:rgba(6,11,14,.96);border-right:1px solid var(--line);padding:28px 18px;z-index:5}
.logo{font-weight:900;letter-spacing:2px;font-size:22px;color:var(--accent2);margin:0 8px 4px}
.tag{color:var(--muted);font-size:12px;margin:0 8px 30px}
.nav a{display:block;padding:12px 14px;border-radius:6px;color:#c9d3d5;margin:4px 0}
.nav a:hover,.nav a.active{background:#12262b;color:#fff;border-left:3px solid var(--accent)}
.main{margin-left:245px;min-height:100vh}
.wrap{max-width:var(--max);margin:auto;padding:70px 42px}
.hero{min-height:560px;display:flex;align-items:center;background-image:linear-gradient(90deg,rgba(5,10,12,.92) 0%,rgba(5,10,12,.76) 40%,rgba(5,10,12,.3) 100%),url("../assets/hero.png");background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(48px,7vw,88px);line-height:.95;margin:10px 0 22px;letter-spacing:-3px}
.kicker{color:var(--accent);font-weight:bold;letter-spacing:3px;text-transform:uppercase}
.hero p{max-width:650px;color:#c6d1d3;font-size:19px}
.btn{display:inline-block;margin-top:18px;padding:12px 20px;border:1px solid var(--accent);color:var(--accent2);border-radius:5px}
.btn:hover{background:var(--accent);color:#061013}
h2{font-size:34px;margin:0 0 22px;color:var(--accent2)}
h3{color:#d8f1ef}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);padding:24px;border-radius:8px}
.card .icon{font-size:30px;color:var(--accent)}
.muted{color:var(--muted)}
.quote{border-left:3px solid var(--accent);padding:10px 20px;color:#cbd7d8;background:#0b1418}
.timeline{border-left:1px solid var(--accent);margin:28px 0;padding-left:28px}
.timeline article{margin-bottom:30px}
.badge{display:inline-block;padding:3px 9px;border:1px solid #31565b;border-radius:20px;color:var(--accent2);font-size:12px}
footer{border-top:1px solid var(--line);padding:25px 42px;color:#6f8084;text-align:center}
.table{width:100%;border-collapse:collapse;background:var(--panel)}
.table th,.table td{padding:14px;border:1px solid var(--line);text-align:left}
.table th{color:var(--accent2)}
@media(max-width:800px){
 .nav{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px}
 .nav a{display:inline-block;margin:2px}
 .logo{display:inline-block}.tag{display:none}.main{margin-left:0}
 .wrap{padding:48px 20px}.hero{min-height:520px}.grid{grid-template-columns:1fr}
}