:root{
  --coe-header:#0E3956;   /* dark blue header */
  --coe-nav:#007E86;      /* green navbar */
  --coe-primary:#0D4B8E;  /* primary blue */
  --coe-accent:#00A0A6;   /* teal accent */
  --coe-bg:#F4F7FA;       /* bg */
  --text:#333; --text-muted:#5b6b7a; --white:#fff;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.55; color:var(--text); background:var(--coe-bg)}

@font-face{
  font-family:'BPG Nino Mtavruli';
  src: url('../fonts/BPG_Nino_Mtavruli.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
h1,h2,h3,.h1,.h2,.h3,.nav a,.btn,.badge,.brand .title{font-family:'BPG Nino Mtavruli', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; letter-spacing:.2px}
/* Header + Navbar */
.topbar{background:var(--coe-header); color:#cfe2ff; padding:10px 0}
.container{max-width:1140px; margin:0 auto; padding:0 16px}
.row{display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:12px; color:#eaf2ff; text-decoration:none; min-width:0}
.brand img{width:132px; height:auto}
.brand .title{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.navbar{background:var(--coe-nav); color:#eaffff}
.nav{display:none} .nav.open{display:flex; flex-wrap:wrap; gap:6px}
.nav a{display:block; color:#eaffff; text-decoration:none; padding:10px 12px; border-radius:8px}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav-toggle{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); border-radius:10px; background:transparent; color:#fff}
@media(min-width:960px){.nav{display:flex !important}.nav-toggle{display:none}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid transparent; text-decoration:none; font-weight:700; cursor:pointer}
.btn-primary{background:var(--coe-primary); color:#fff} .btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.badge{display:inline-block; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.05); color:var(--text); font-size:12px; font-weight:700}
/* Sections */
.hero{background:linear-gradient(120deg, var(--coe-header), var(--coe-primary)); color:#fff; padding:72px 0 44px}
.h1{font-size:clamp(28px,5vw,44px); margin:10px 0 6px; line-height:1.2}
.lead{color:#e7f1ff}
.section{padding:28px 0} .section-lg{padding:44px 0}
.grid{display:grid; gap:16px} .card{background:#fff; border:1px solid #e6eaf0; border-radius:16px; padding:18px; box-shadow:0 2px 6px rgba(16,24,40,.04)}
@media(min-width:720px){.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}}
.muted{color:var(--text-muted)} .sep{border:none; height:1px; background:#e6eaf0; margin:18px 0}
/* Footer */
.footer{background:var(--coe-header); color:#cdd7f2; padding:18px 0; border-top:4px solid var(--coe-nav)}
/* Table & quiz */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:10px 8px; border-bottom:1px solid #e6eaf0}
.table thead th{color:#0E3956}
.quiz-q{margin-bottom:16px} .option{border:1px dashed #c9d3e0; padding:10px; border-radius:10px; cursor:pointer; margin:8px 0; background:#fff}
.option.active{border-color:var(--coe-accent); background:#f0fbfb}
.score-pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#f0fbfb; border:1px solid #c9ecee; color:#066; font-weight:700}
.pass{color:#0a7a46} .nopass{color:#b00020}
/* Forms */
.input{width:100%; padding:10px 12px; border:1px solid #d6dbe3; border-radius:10px; background:#fff}
.label{font-size:14px; color:#45556a}
.form-row{display:grid; gap:12px} @media(min-width:680px){.form-row{grid-template-columns:repeat(2,1fr)}}
/* Home extras */
.stat-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.stat{background:#fff; border:1px solid #e6eaf0; border-radius:16px; padding:16px; text-align:center}
.stat .num{font-size:28px; font-weight:900; color:var(--coe-primary)}
@media(min-width:720px){ .stat-strip{grid-template-columns:repeat(4,1fr)} }
.news-grid{display:grid; gap:16px} @media(min-width:960px){ .news-grid{grid-template-columns:2fr 1fr} }
.banner{background:linear-gradient(90deg, var(--coe-primary), var(--coe-accent)); color:#fff; border-radius:16px; padding:18px}

/* BPG Nino Mtavruli (from your upload) */

@font-face{
  font-family:'BPG Nino Mtavruli';
  src: url('../fonts/bpg-nino-mtavruli-webfont.woff2') format('woff2'), url('../fonts/bpg-nino-mtavruli-webfont.woff') format('woff'), url('../fonts/bpg-nino-mtavruli-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:'BPG Nino Mtavruli';
  src: url('../fonts/bpg-nino-mtavruli-webfont.woff2') format('woff2'), url('../fonts/bpg-nino-mtavruli-webfont.woff') format('woff'), url('../fonts/bpg-nino-mtavruli-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Apply Mtavruli across headings/menu/buttons */
h1,h2,h3,.h1,.h2,.h3,.brand .title,.nav a,.btn,.badge{
  font-family:'BPG Nino Mtavruli', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}