:root{
  --ink:#0f172a; --muted:#334155; --bg:#f6f7fb;
  --brand:#4b2aa6; --brand2:#00c2a8; --card:#ffffff; --border:#e2e8f0;
  --radius:18px; --shadow:0 10px 24px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
a{color:var(--brand)}
.page_wrapper{max-width:1100px;margin:0 auto}

/* Header */
#header{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(0,194,168,.18), transparent),
    radial-gradient(900px 500px at 110% 10%, rgba(75,42,166,.22), transparent),
    linear-gradient(135deg,#1a1240 0%, #2b1972 55%, #4b2aa6 100%);
  color:#fff; padding:22px 24px; border-radius:0 0 20px 20px
}
.brandbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brandbar img.logo{height:40px; width:auto; display:block}
.brandbar h1{margin:0; font-weight:800; font-size:28px; color:#fff}
.brandbar h1 a{color:#fff; text-decoration:none}

#menu{margin-top:12px}
#menu ul{display:flex; gap:26px; list-style:none; margin:0; padding:0; align-items:center; flex-wrap:wrap}
#menu a{color:#e8efff; font-weight:700; text-decoration:none}
#menu a:hover{color:#fff; text-decoration:underline}
#menu .cta{
  background:var(--brand2); color:#052e2a !important; padding:10px 16px; border-radius:14px;
  box-shadow:0 8px 20px rgba(0,194,168,.25)
}

/* Layout */
#page{display:grid; grid-template-columns:1fr 320px; gap:24px; padding:22px}
#content.box.box2{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow)
}
#content u b{color:var(--brand)}
.c4{color:var(--ink)}
#sidebar2 .apply-wrapper{margin-bottom:14px}
#sidebar2 img{max-width:100%; height:auto; display:block}
#sidebar2 .sidebar-collage{border-radius:14px; box-shadow:0 18px 36px rgba(2,6,23,.18)}

/* Footer */
.footnote, #footer{ color:var(--muted); text-align:center; padding:16px }

@media (max-width: 860px){
  #page{grid-template-columns:1fr}
}