/* ============ RESET & TOKENS ============ */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }

:root{
  --brand:#16a34a;            /* accent green */
  --brand-700:#22c55e;
  --ink:#f1f5f9;              /* main text on dark */
  --muted:#94a3b8;            /* secondary text */
  --panel:#1e293b;            /* card/panel bg */
  --stroke:#334155;           /* borders */
  --soft:#0f172a;             /* deep bg */
  --ring: 0 0 0 6px rgba(34,197,94,.2);
}

body{
  margin:0;
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#0f172a 0%, #1e293b 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }

/* Containers */
.container{ width:min(1100px, 92%); margin:0 auto; }
.section{ padding:44px 0; }
.section-title{ margin:0 0 18px 0; font-size:24px; line-height:1.2; color:var(--ink); text-align:left; }

/* ============ ACCESSIBILITY ============ */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; z-index:1000;
  width:auto; height:auto; padding:10px 14px; border-radius:10px;
  background:#0f172a; color:#fff; outline:2px solid #22c55e;
}

/* ============ TOPBAR / NAV ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#0f172acc; backdrop-filter: blur(8px);
  border-bottom:1px solid var(--stroke);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ font-weight:800; letter-spacing:.2px; color:var(--ink); }
.menu{ display:flex; gap:8px; list-style:none; padding:0; margin:0; }
.menu a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none;
  color:var(--ink);
}
.menu a:hover{ background:#1e293b; }
.menu a.active{ background:#1e293b; border:1px solid var(--stroke); }

/* optional shadow when scrolling (JS toggles with-shadow) */
.topbar.with-shadow{ box-shadow: 0 6px 16px rgba(0,0,0,.45); }

/* ============ HERO ============ */
.hero{
  padding:56px 0 36px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.88)),
    url("hero.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--stroke);
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
.hero-copy h1{ margin:0 0 8px 0; font-size:42px; line-height:1.1; color:#fff; }
.lead{ color:var(--muted); margin:0 0 16px 0; }
.actions{ display:flex; gap:10px; }

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:600;
  box-shadow: 0 1px 1px rgba(0,0,0,.4);
  transition: transform .04s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); box-shadow: var(--ring); }
.btn-ghost{ color:var(--ink); background:transparent; border:1px solid var(--stroke); }
.btn-ghost:hover{ background:#1e293b; }

/* Hero side card */
.hero-card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:22px;
  min-height:220px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.hero-card h2{ margin:0 0 10px 0; }
.hero-stat{
  display:inline-block; margin:6px 6px 0 0; padding:10px 12px;
  border-radius:12px; background:#0f172a; border:1px solid var(--stroke);
}

/* ============ COMMON SURFACES ============ */
.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
}

/* ============ FACULTIES LIST ============ */
#faculties .panel ul{ margin:0; padding-left:18px; }
#faculties .panel li{ padding:4px 0; }

/* ============ FEATURED HIGHLIGHTS ============ */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.card{
  overflow:hidden;
  padding:0;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 30px rgba(0,0,0,.5);
}
.card-img{
  width:100%;
  height:160px;
  background:#111;      /* shows even without images */
  display:block;
  object-fit:cover;
}
.card-body{ padding:16px; }
.card-body h3{ margin:0 0 10px; }
.btn-outline{
  display:inline-block; padding:8px 12px; border-radius:8px;
  border:1px solid var(--stroke); background:transparent; color:#fff;
}
.btn-outline:hover{ background:#334155; }

/* Pretty gradient fallbacks if no JPGs */
.fallback{ 
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(22,163,74,.25), transparent 40%),
    radial-gradient(120% 80% at 0% 100%, rgba(34,197,94,.2), transparent 50%),
    linear-gradient(135deg, #0f172a, #1e293b);
}
.fallback.two{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(14,165,233,.25), transparent 40%),
    radial-gradient(120% 80% at 0% 100%, rgba(99,102,241,.25), transparent 50%),
    linear-gradient(135deg, #0f172a, #1e293b);
}
.fallback.three{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(244,114,182,.25), transparent 40%),
    radial-gradient(120% 80% at 0% 100%, rgba(251,191,36,.25), transparent 50%),
    linear-gradient(135deg, #0f172a, #1e293b);
}

/* ============ UNITS ============ */
.units-parent{
  font-size:16px;
  border:1px solid var(--stroke);
  padding:12px;
  border-radius:10px;
  background:#1e293b;
  color:#fff;
}
.units-child{ font-size:1.5em; margin-bottom:12px; }
.units-badge{
  display:inline-block; margin-left:8px; padding:2px 8px; font-size:1rem;
  background:#16a34a; border:1px solid #22c55e; border-radius:999px; color:#0b1a0f;
}
.units-half{
  width:50%; background:#334155; border:1px solid #475569;
  padding:8px; border-radius:10px; color:#fff; margin-top:8px;
}

/* ============ SPECIFICITY ============ */
#specificity .panel p{ margin:8px 0; }
p{ color:var(--ink); }             /* element */
.note{ color:#22d3ee; }            /* class */
#sp-item{ color:#f87171; }         /* id */
p.note.highlight{ font-weight:700; }/* combined */

/* ============ BOX MODEL ============ */
.box{
  width:400px; height:100px;
  padding:20px; border:6px solid #475569; margin:20px 0; background:#0f172a;
  display:flex; align-items:center; justify-content:center; border-radius:10px; color:#f1f5f9;
}
.muted{ color:var(--muted); margin:0; }

/* ============ LAYOUTS ============ */
.panel .col{
  float:left;
  width:30%;
  margin:1.66%;
  background:#1e3a8a;
  padding:16px;
  border:1px solid #475569;
  border-radius:10px;
  text-align:center;
  color:#f8fafc;
}
.panel::after{ content:""; display:block; clear:both; } /* clearfix */

/* Inline-block */
.ib-card{
  display:inline-block; width:180px; margin:6px; padding:14px;
  background:#334155; border:1px solid #475569; border-radius:10px; text-align:center; color:#fff;
}

/* Grid */
.grid-wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.g{ background:#334155; border:1px solid #475569; padding:16px; text-align:center; border-radius:10px; color:#fff; }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--stroke); padding:26px 0; background:#0f172a; }
.footer p{ margin:0; color:var(--muted); }

/* ============ REVEAL ANIMATIONS ============ */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.reveal-in{ opacity:1; transform: translateY(0); }

/* ============ BACK TO TOP ============ */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#16a34a; color:#fff; border:none; cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  transform: translateY(20px); opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease, filter .2s;
}
.to-top:hover{ filter:brightness(1.08); }
.to-top.show{ transform: translateY(0); opacity:1; pointer-events:auto; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .menu{ flex-wrap:wrap; }
  .card-grid{ grid-template-columns: 1fr; }
  .panel .col{ width:100%; margin:8px 0; float:none; }
  .hero-copy h1{ font-size:34px; }
}