:root{
  --bg:#0b1320;
  --bg-light:#101a2c;
  --card:#15233a;
  --text:#e6edf5;
  --muted:#9fb0c7;
  --accent:#00c2ff;
  --border:#22324d;
  --radius:10px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

img{max-width:100%; display:block;}

/* ===== HEADER ===== */
header{
  background:var(--bg-light);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.navbar{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:700; color:var(--text);
}

nav ul{
  list-style:none; display:flex; gap:22px; flex-wrap:wrap;
}
nav ul li a{
  color:var(--text); font-weight:500; font-size:15px;
  padding:6px 4px; border-bottom:2px solid transparent;
}
nav ul li a:hover, nav ul li a.active{
  color:var(--accent); border-bottom:2px solid var(--accent); text-decoration:none;
}

.menu-toggle{
  display:none; background:none; border:none; color:var(--text); font-size:26px; cursor:pointer;
}

/* ===== HERO ===== */
.page-hero{
  background:linear-gradient(135deg, var(--accent-1, #0e2a45), var(--accent-2, #122a4a));
  padding:60px 20px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.page-hero h1{
  font-size:clamp(28px,5vw,42px);
  margin-bottom:10px;
}
.page-hero p{color:var(--muted); max-width:650px; margin:0 auto;}

/* ===== LAYOUT CONTAINER ===== */
.container{
  max-width:1200px; margin:0 auto; padding:50px 20px;
}

.section-title{
  font-size:28px; margin-bottom:8px; border-left:4px solid var(--accent); padding-left:12px;
}
.section-sub{color:var(--muted); margin-bottom:30px; padding-left:16px;}

/* ===== CARDS / GRID ===== */
.grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; transition:transform .2s, border-color .2s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.card h3{margin-bottom:8px; color:var(--text);}
.card .meta{color:var(--accent); font-size:13px; margin-bottom:8px; display:block;}
.card p{color:var(--muted); font-size:14px;}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block; background:var(--accent); color:#031018; font-weight:600;
  padding:10px 22px; border-radius:6px; border:none; cursor:pointer; font-size:15px;
}
.btn:hover{opacity:.85; text-decoration:none;}
.btn-outline{
  background:transparent; border:1px solid var(--accent); color:var(--accent);
}

/* ===== FORMS ===== */
form{display:flex; flex-direction:column; gap:14px; max-width:600px;}
input, textarea, select{
  background:var(--bg-light); border:1px solid var(--border); color:var(--text);
  padding:12px; border-radius:6px; font-size:15px; font-family:inherit;
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent);}

/* ===== TABLE ===== */
table{width:100%; border-collapse:collapse; margin-top:10px;}
th,td{padding:12px; border:1px solid var(--border); text-align:left; font-size:14px;}
th{background:var(--bg-light); color:var(--accent);}

/* ===== FOOTER ===== */
footer{
  background:var(--bg-light); border-top:1px solid var(--border);
  padding:36px 20px; margin-top:40px;
}
.footer-inner{
  max-width:1200px; margin:0 auto; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.footer-inner h4{margin-bottom:10px; color:var(--accent);}
.footer-inner p, .footer-inner a{color:var(--muted); font-size:14px;}
.footer-bottom{
  text-align:center; padding-top:20px; margin-top:20px; border-top:1px solid var(--border);
  color:var(--muted); font-size:13px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .menu-toggle{display:block;}
  nav ul{
    display:none; flex-direction:column; width:100%;
    background:var(--bg-light); position:absolute; left:0; top:64px;
    padding:14px 20px; border-top:1px solid var(--border);
  }
  nav ul.show{display:flex;}
  .navbar{flex-wrap:wrap;}
}