@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css');

/* ── Reset & Base ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:#f6faff;color:#071d49;font-family:'Inter',Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.cms-header{
  height:78px;background:#fff;
  border-bottom:1px solid #dce8f8;
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 48px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 rgba(220,232,248,.8);
}

/* Logo */
.cms-brand,.cms-footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0a3a82}
.cms-brand img,.cms-footer-brand img{height:48px;max-width:170px;object-fit:contain}
.cms-logo-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e9f4ff;font-size:22px}
.cms-brand strong,.cms-footer-brand strong{display:block;font-size:22px;font-weight:900;line-height:1;letter-spacing:-.02em;color:#0a3a82}
.cms-brand small,.cms-footer-brand small{display:block;color:#f97316;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;line-height:1.4}

/* Nav */
.cms-nav{display:flex;gap:4px;align-items:center}
.cms-nav a{color:#0b2554;font-weight:700;font-size:13.5px;padding:7px 11px;border-radius:8px;transition:color .12s,background .12s;white-space:nowrap}
.cms-nav a:hover{color:#095fd8;background:#f0f6ff}

/* Hamburger (mobile) */
.cms-menu-btn{display:none;border:0;background:#095fd8;color:#fff;border-radius:10px;padding:9px 11px;font-size:18px;line-height:1}

/* Actions area */
.cms-actions{display:flex;align-items:center;gap:10px}

/* Login button */
.cms-login{
  border:2px solid #095fd8;border-radius:10px;
  padding:8px 18px;color:#095fd8;font-weight:800;font-size:13.5px;
  background:#fff;transition:all .12s;white-space:nowrap;
}
.cms-login:hover{background:#095fd8;color:#fff}

/* ── Language dropdown ── */
.hdr-lang{
  position:relative;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#0b2554;
  background:#f0f6ff;border:1.5px solid #dce8f8;
  border-radius:9px;padding:7px 11px;
  user-select:none;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.hdr-lang:hover{background:#dbeafe;border-color:#93c5fd}
.hdr-lang-drop{
  display:none;position:absolute;
  top:calc(100% + 6px);right:0;
  background:#fff;border:1.5px solid #dce8f8;
  border-radius:12px;box-shadow:0 10px 28px rgba(13,33,79,.12);
  padding:6px;min-width:140px;z-index:300;
}
.hdr-lang.open .hdr-lang-drop{display:block}
.hdr-lang-drop a{
  display:block;padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:#0b2554;
  transition:background .12s;
}
.hdr-lang-drop a:hover{background:#f0f6ff;color:#095fd8}

/* ── Auth user pill ── */
.hdr-user{
  position:relative;
  display:flex;align-items:center;gap:6px;
  cursor:pointer;
  background:#f0f6ff;border:1.5px solid #dce8f8;
  border-radius:20px;padding:4px 12px 4px 4px;
  font-size:12.5px;font-weight:700;color:#0b2554;
  user-select:none;transition:all .12s;
}
.hdr-user:hover{background:#dbeafe;border-color:#93c5fd}
.hdr-av{
  width:30px;height:30px;border-radius:50%;
  background:#095fd8;color:#fff;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;flex-shrink:0;
}
.hdr-uname{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-drop{
  display:none;position:absolute;
  top:calc(100% + 8px);right:0;
  background:#fff;border:1.5px solid #dce8f8;
  border-radius:14px;box-shadow:0 12px 36px rgba(13,33,79,.14);
  padding:7px;min-width:220px;z-index:300;cursor:default;
}
.hdr-user.open .hdr-drop{display:block}
.hdr-drop-head{padding:10px 13px;border-bottom:1px solid #f1f5f9;margin-bottom:5px}
.hdr-drop-head strong{display:block;font-size:13.5px;font-weight:700;color:#0d214f}
.hdr-drop-head small{font-size:11px;color:#67748a}
.hdr-drop-item{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:9px 13px;border-radius:9px;
  font-size:13px;font-weight:600;color:#374258;
  background:none;border:none;cursor:pointer;
  text-align:left;text-decoration:none;
  transition:background .12s;font-family:inherit;
}
.hdr-drop-item i{font-size:16px;color:#94a3b8;flex-shrink:0}
.hdr-drop-item:hover{background:#f0f6ff;color:#095fd8}
.hdr-drop-item:hover i{color:#095fd8}
.hdr-sep{height:1px;background:#f1f5f9;margin:4px 0}
.hdr-logout{color:#dc2626!important}
.hdr-logout i{color:#dc2626!important}
.hdr-logout:hover{background:#fee2e2!important;color:#dc2626!important}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.cms-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;padding:70px;background:radial-gradient(circle at 0 15%,#e4f2ff 0 34%,transparent 35%),linear-gradient(120deg,#fff,#eef7ff);border-bottom:1px solid #dce8f8}
.cms-hero h1{font-size:52px;line-height:1.05;margin:0 0 16px;letter-spacing:-.04em}
.cms-hero p{font-size:17px;color:#607089;line-height:1.55}
.cms-hero-actions{display:flex;gap:14px;margin:28px 0}
.cms-btn-orange,.cms-btn-outline{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:13px;min-height:48px;padding:0 22px;font-weight:900;transition:all .12s}
.cms-btn-orange{background:#ff6a00;color:#fff}.cms-btn-orange:hover{background:#e55f00}
.cms-btn-orange.small{min-height:40px}
.cms-btn-outline{border:2px solid #095fd8;color:#095fd8;background:#fff}.cms-btn-outline:hover{background:#095fd8;color:#fff}
.cms-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cms-benefits span{background:#fff;border:1px solid #dce8f8;border-radius:14px;padding:12px;font-weight:800;color:#095fd8;font-size:12.5px}
.cms-hero-panel{min-height:360px;display:grid;place-items:center}
.cms-dashboard-mini{background:#fff;border:1px solid #dce8f8;border-radius:24px;padding:26px;width:340px;box-shadow:0 22px 55px rgba(7,29,73,.1)}
.cms-dashboard-mini strong{font-size:22px}
.cms-dashboard-mini div{display:flex;justify-content:space-between;margin:16px 0}
.cms-progress{height:10px;background:#e7eef8;border-radius:999px;display:block!important}
.cms-progress i{height:10px;background:#0aa36e;border-radius:999px;display:block}

/* ══════════════════════════════════════════
   SECTIONS & CARDS
══════════════════════════════════════════ */
.cms-section{padding:50px 70px}
.cms-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cms-section-head h2{font-size:28px;margin:0;letter-spacing:-.02em}
.cms-section-head a{color:#095fd8;font-weight:800}
.cms-card-grid{display:grid;gap:20px}
.cms-card-grid.four{grid-template-columns:repeat(4,1fr)}
.cms-card-grid.three{grid-template-columns:repeat(3,1fr)}
.cms-card,.cms-info-box,.cms-team-card,.cms-editor-section,.cms-form{background:#fff;border:1px solid #dce8f8;border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(7,29,73,.07)}
.cms-card img,.cms-team-card img,.cms-detail img{width:100%;height:190px;object-fit:cover;border-radius:14px}
.cms-placeholder-image,.cms-course-img{height:190px;border-radius:14px;background:linear-gradient(135deg,#073b7a,#dcecff);display:grid;place-items:center;color:#fff;font-weight:900}
.cms-card h3,.cms-team-card h3{margin:14px 0 8px;font-size:15px;font-weight:700}
.cms-card p,.cms-team-card p,.cms-info-box p{color:#64748b;line-height:1.6;font-size:13.5px}
.cms-card a,.cms-card-bottom a{color:#095fd8;font-weight:800}
.cms-card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.cms-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cms-inline-form{display:flex;gap:10px}
.cms-inline-form.large{max-width:700px;margin:0 auto 24px}
.cms-inline-form input,.cms-form input,.cms-form textarea{width:100%;border:1px solid #d6e3f3;border-radius:12px;padding:13px;font-family:inherit;font-size:13px}
.cms-inline-form input:focus,.cms-form input:focus,.cms-form textarea:focus{outline:none;border-color:#095fd8;box-shadow:0 0 0 3px rgba(9,95,216,.1)}
.cms-inline-form button,.cms-form button{border:0;background:#095fd8;color:#fff;border-radius:12px;padding:13px 18px;font-weight:900;cursor:pointer;white-space:nowrap}
.cms-page-hero{padding:50px 70px;background:linear-gradient(120deg,#eef7ff,#fff);border-bottom:1px solid #dce8f8}
.cms-page-hero h1{font-size:40px;margin:0 0 10px;letter-spacing:-.03em}
.cms-page-hero p{font-size:16px;color:#64748b;max-width:800px;line-height:1.6}
.cms-content-page{display:grid;gap:20px}
.cms-detail{max-width:1000px;margin:auto}
.cms-detail-body{font-size:16px;line-height:1.8;color:#334155;margin-top:20px}
.cms-course-detail,.cms-contact-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}
.cms-form{display:grid;gap:14px}
.cms-success{background:#dcfce7;color:#166534;padding:12px 14px;border-radius:12px;font-weight:600}
.cms-info-box.success{border-color:#86efac}
.cms-info-box.error{border-color:#fecaca}
.cms-empty{grid-column:1/-1;background:#fff;border:1px dashed #b7c8df;border-radius:18px;padding:30px;text-align:center;color:#64748b}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.cms-footer{background:#073b7a;color:#e8f2ff;padding:40px 70px 0}
.cms-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:34px;margin-bottom:30px}
.cms-footer h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:12px}
.cms-footer a{color:#d9ebff;display:block;margin:8px 0;font-size:13.5px;transition:color .12s}
.cms-footer a:hover{color:#fff}
.cms-footer p{color:#d9ebff;line-height:1.6;font-size:13.5px;margin-bottom:6px}
.cms-footer-brand strong{color:#fff}
.cms-footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:18px 0;display:flex;justify-content:space-between;color:#bcd4f5;font-size:12.5px}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1200px){
  .cms-header{padding:0 28px}
  .cms-nav a{font-size:13px;padding:6px 9px}
}
@media(max-width:1100px){
  .cms-hero,.cms-split,.cms-course-detail,.cms-contact-grid{grid-template-columns:1fr}
  .cms-card-grid.four,.cms-card-grid.three{grid-template-columns:repeat(2,1fr)}
  .cms-footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hdr-uname{display:none}
  .hdr-lang{display:none}
  .cms-nav{
    display:none;position:fixed;
    top:78px;left:0;right:0;
    background:#fff;padding:16px 20px;
    flex-direction:column;gap:4px;
    z-index:99;box-shadow:0 8px 24px rgba(13,33,79,.1);
    border-bottom:2px solid #dce8f8;
  }
  .cms-menu-open .cms-nav{display:flex}
  .cms-menu-btn{display:block}
}
@media(max-width:760px){
  .cms-header{padding:0 16px;gap:12px}
  .cms-actions{gap:6px}
  .cms-hero,.cms-section,.cms-page-hero,.cms-footer{padding-left:20px;padding-right:20px}
  .cms-hero h1{font-size:34px}
  .cms-benefits,.cms-card-grid.four,.cms-card-grid.three,.cms-footer-grid{grid-template-columns:1fr}
  .cms-inline-form{flex-direction:column}
  .cms-dashboard-mini{width:100%}
  .cms-footer-bottom{flex-direction:column;gap:10px}
  .cms-page-hero h1{font-size:28px}
  .cms-page-hero{padding:32px 20px}
}