:root{
  --bg0:#03050a;
  --card: rgba(10, 16, 28, .62);
  --cardBorder: rgba(160, 190, 205, .18);
  --text:#EAF2FF;
  --muted:#A9BED0;
  --accent:#7FB6C7;
  --accent2:#9BDCE6;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --maxw: 980px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg0);
  overflow-x:hidden;
}

/* SVG background */
.bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}

/* content above bg */
header, main, footer{
  position:relative;
  z-index:1;
}

/* ===== Header ===== */
header{
  position:sticky;
  top:0;
  backdrop-filter:blur(10px);
  background:rgba(7,10,16,.75);
  border-bottom:1px solid rgba(160,190,205,.14);
}

.header-inner{
  max-width:var(--maxw);
  margin:auto;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{ display:flex; gap:10px; align-items:center; }

.logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg, rgba(127,182,199,.35), rgba(0,0,0,.2));
  border:1px solid rgba(160,190,205,.25);
}

.brand-title b{ font-size:14px }
.brand-title span{ font-size:12px;color:var(--muted) }

/* ===== Nav ===== */
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(160,190,205,.14);
  margin-left:6px;
}
.nav a.active,
.nav a:hover{
  color:var(--text);
  border-color:rgba(155,220,230,.4);
}

/* Language buttons */
.lang-switch button{
  background:none;
  border:1px solid rgba(160,190,205,.3);
  color:var(--muted);
  border-radius:999px;
  padding:6px 10px;
  margin-left:6px;
  cursor:pointer;
}
.lang-switch button.active{
  color:var(--text);
  border-color:rgba(160,220,230,.6);
}

/* ===== Content ===== */
main{
  max-width:var(--maxw);
  margin:auto;
  padding:30px 18px 60px;
}

.card{
  background:var(--card);
  border:1px solid var(--cardBorder);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card-top{
  padding:20px;
  border-bottom:1px solid rgba(160,190,205,.14);
}

.h1{ margin:0; font-size:22px; }

.meta{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.content{
  padding:22px;
  font-size:15px;
  line-height:1.65;
}

/* ===== Footer ===== */
footer{
  max-width:var(--maxw);
  margin:auto;
  padding:18px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
}