/* ========================================
   CYBERSCHOOL - SECURITY-FIRST DESIGN
   Color Scheme: Gold (#C9A227), Crimson (#8B1A1A), Ink (#0D0C0A)
   ======================================== */

:root {
  --gold: #D4AF37;
  --gold-light: #F9D768;
  --gold-dark: #B8860B;
  --gold-pale: #FDF5E6;
  --crimson: #C62828;
  --crimson-deep: #8E0000;
  --crimson-mid: #E53935;
  --white: #FAFAF8;
  --off-white: #F0EDE4;
  --ink: #0D0C0A;
  --ink-soft: #1A1814;
  --slate: #2A2720;
  --muted: #6B6560;
  --divider: rgba(201,162,39,0.2);
  --success: #22A855;
  --warning: #FF9F1C;
  --danger: #DC3545;
}

/* ========== RESET ========== */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  background-color: var(--white); 
  color: var(--ink); 
  font-family: 'Inter', sans-serif; 
  font-weight: 400; 
  overflow-x: hidden; 
  line-height: 1.6;
  padding-top: 92px;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 { 
  font-family: 'Lora', serif; 
  font-weight: 700; 
  line-height: 1.2; 
}

p { 
  margin-bottom: 1rem; 
}

a { 
  color: var(--gold); 
  text-decoration: none; 
  transition: color 0.2s; 
}

a:hover { 
  color: var(--gold-light); 
}

/* ========== NAVIGATION ========== */
nav { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 999; 
  background: rgba(13,12,10,0.97); 
  backdrop-filter: blur(12px); 
  border-bottom: 1px solid var(--divider); 
}

.nav-inner { 
  max-width: 1500px; 
  margin: 0 auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 34px;
  height: 92px;
}

.nav-brand { 
  display: flex; 
  align-items: center; 
  gap: 0;
  text-decoration: none; 
}

.nav-logo { 
  width: 84px;
  height: 84px;
  background: transparent; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
  transform: translateY(-8px);
}

.nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.48);
  transform-origin: center;
}

.nav-name { 
  font-family: 'Lora', serif; 
  font-size: 19px; 
  font-weight: 700; 
  color: var(--gold-light); 
  line-height: 1;
  letter-spacing: 0.01em; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -18px;
  transform: translateY(-1px);
}

.nav-name span { 
  display: block; 
  font-size: 10px; 
  font-weight: 600; 
  color: var(--gold); 
  letter-spacing: 0.18em; 
  text-transform: uppercase; 
  margin-top: 3px; 
}

.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  list-style: none; 
  flex-wrap: wrap;
}

.nav-links a { 
  display: block; 
  padding: 8px 12px; 
  color: rgba(250,250,248,0.75); 
  text-decoration: none; 
  font-size: 12px; 
  font-weight: 500; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  transition: color 0.2s; 
}

.nav-links a:hover { 
  color: var(--gold-light); 
}

.nav-links .nav-cta > a { 
  background: var(--gold); 
  color: var(--ink); 
  border-radius: 2px; 
  padding: 10px 24px; 
  margin-left: 8px; 
}

.nav-links .nav-cta > a:hover { 
  background: var(--gold-light); 
}

/* ========== MOBILE MENU BUTTON ========== */
.menu-toggle { 
  display: none; 
  flex-direction: column; 
  background: none; 
  border: none; 
  cursor: pointer; 
  gap: 6px; 
  padding: 8px; 
}

.menu-toggle span { 
  display: block; 
  width: 24px; 
  height: 2px; 
  background: var(--gold-light); 
  transition: all 0.3s ease; 
  border-radius: 1px;
}

.menu-toggle.active span:nth-child(1) { 
  transform: rotate(45deg) translate(10px, 10px); 
}

.menu-toggle.active span:nth-child(2) { 
  opacity: 0; 
}

.menu-toggle.active span:nth-child(3) { 
  transform: rotate(-45deg) translate(7px, -7px); 
}

/* ========== MOBILE RESPONSIVE NAVBAR ========== */
@media (max-width: 1024px) {
  .nav-inner { 
    padding: 0 20px; 
  }
  
  .nav-links { 
    gap: 0; 
  }
  
  .nav-links a { 
    padding: 8px 10px; 
    font-size: 11px; 
  }
}

@media (max-width: 768px) {
  .menu-toggle { 
    display: flex; 
  }
  
  .nav-links { 
    position: absolute; 
    top: 86px; 
    left: 0; 
    right: 0; 
    background: rgba(13,12,10,0.98); 
    backdrop-filter: blur(12px); 
    flex-direction: column; 
    gap: 0; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease; 
    border-bottom: 1px solid var(--divider); 
    z-index: 120;
  }
  
  .nav-links.active { 
    max-height: 500px; 
  }
  
  .nav-links a { 
    padding: 14px 20px; 
    border-bottom: 1px solid rgba(201,162,39,0.1); 
    font-size: 12px; 
  }
  
  .nav-links .nav-cta { 
    border-bottom: none; 
  }
  
  .nav-links .nav-cta a { 
    margin-left: 0; 
    width: calc(100% - 40px); 
    margin: 12px 20px; 
    display: block; 
    text-align: center; 
  }

  .has-dropdown .login-dropdown {
    position: static;
    display: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid rgba(201,162,39,0.08);
    background: rgba(255,255,255,0.02);
  }

  .has-dropdown:hover .login-dropdown,
  .has-dropdown:focus-within .login-dropdown {
    display: block;
  }
  
  .nav-brand { 
    gap: 0; 
  }
  
  .nav-logo {
    width: 68px;
    height: 68px;
    transform: translateY(-6px);
  }

  .nav-name { 
    font-size: 16px; 
    margin-left: -12px;
  }
  
  .nav-name span { 
    font-size: 8px; 
    margin-top: 3px;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 78px;
  }

  .nav-inner { 
    padding: 0 12px;
    height: 78px;
  }
  
  .nav-logo { 
    width: 60px; 
    height: 60px; 
    transform: translateY(-5px);
  }
  
  .nav-name { 
    font-size: 14px; 
    margin-left: -10px;
  }
  
  .nav-name span { 
    font-size: 8px; 
    margin-top: 2px; 
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
  }
}

/* ========== HERO SECTION ========== */
.hero { 
  min-height: 100vh; 
  background: var(--ink); 
  position: relative; 
  display: flex; 
  align-items: center; 
  overflow: hidden; 
}

.hero-grid { 
  position: absolute; 
  inset: 0; 
  background-image: linear-gradient(rgba(201,162,39,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,39,0.04) 1px, transparent 1px); 
  background-size: 60px 60px; 
}

.hero-glow { 
  position: absolute; 
  width: 600px; 
  height: 600px; 
  background: radial-gradient(ellipse, rgba(139,26,26,0.22) 0%, transparent 70%); 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  pointer-events: none; 
}

.hero-inner { 
  position: relative; 
  z-index: 2; 
  max-width: 1320px; 
  margin: 0 auto; 
  padding: 44px 32px 64px; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  align-items: center; 
  gap: 60px; 
}

.hero-eyebrow { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-bottom: 18px; 
}

.hero-eyebrow-line { 
  width: 40px; 
  height: 1px; 
  background: var(--gold); 
}

.hero-eyebrow span { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: var(--gold); 
}

.hero-title { 
  font-family: 'Lora', serif; 
  font-size: clamp(34px, 4vw, 58px); 
  font-weight: 700; 
  color: var(--white); 
  line-height: 1.1; 
  margin-bottom: 16px; 
}

.hero-title em { 
  font-style: normal; 
  color: var(--gold-light); 
  display: block; 
}

.hero-sub { 
  font-size: 16px; 
  line-height: 1.7; 
  color: rgba(250,250,248,0.58); 
  margin-bottom: 32px; 
  max-width: 520px; 
}

.hero-actions { 
  display: flex; 
  gap: 16px; 
  flex-wrap: wrap; 
  margin-bottom: 28px;
}

.hero-stats { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1px; 
  margin-top: 36px; 
  border: 1px solid var(--divider); 
}

.hero-stat { 
  padding: 20px 16px; 
  border-right: 1px solid var(--divider); 
  background: rgba(201,162,39,0.03); 
}

.hero-stat:last-child { 
  border-right: none; 
}

.hero-stat-num { 
  font-family: 'Lora', serif; 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--gold-light); 
  display: block; 
}

.hero-stat-label { 
  font-size: 11px; 
  font-weight: 500; 
  color: rgba(250,250,248,0.38); 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
}

/* ========== SHIELD VISUAL ========== */
.hero-visual { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative; 
}

.shield-wrap { 
  position: relative; 
  width: 300px; 
  height: 340px; 
}

.shield-outer { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(160deg, var(--gold-dark) 0%, var(--gold) 40%, var(--gold-dark) 100%); 
  clip-path: polygon(50% 0%, 95% 15%, 100% 60%, 50% 100%, 0% 60%, 5% 15%); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.shield-inner { 
  width: 88%; 
  height: 88%; 
  background: linear-gradient(160deg, var(--crimson-deep) 0%, var(--crimson) 60%, var(--crimson-deep) 100%); 
  clip-path: polygon(50% 0%, 95% 15%, 100% 60%, 50% 100%, 0% 60%, 5% 15%); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
}

.shield-stars { 
  display: flex; 
  gap: 8px; 
}

.shield-star { 
  width: 20px; 
  height: 20px; 
  background: var(--gold); 
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
}

.shield-sword { 
  width: 14px; 
  height: 80px; 
  background: linear-gradient(to bottom, var(--gold-light), var(--gold), var(--gold-dark)); 
  border-radius: 1px 1px 5px 5px; 
  position: relative; 
}

.shield-sword::before { 
  content: ''; 
  position: absolute; 
  top: 18px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 36px; 
  height: 5px; 
  background: linear-gradient(to right, var(--gold-dark), var(--gold-light), var(--gold-dark)); 
  border-radius: 2px; 
}

.shield-glow { 
  position: absolute; 
  inset: -20px; 
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.18) 0%, transparent 65%); 
  pointer-events: none; 
  animation: pulse 3s ease-in-out infinite; 
}

@keyframes pulse { 
  0%,100%{opacity:0.7} 
  50%{opacity:1} 
}

/* ========== TICKER ========== */
.ticker { 
  background: var(--crimson-deep); 
  border-top: 1px solid rgba(201,162,39,0.2); 
  border-bottom: 1px solid rgba(201,162,39,0.2); 
  padding: 10px 0; 
  overflow: hidden; 
}

.ticker-inner { 
  display: flex; 
  gap: 0; 
  white-space: nowrap; 
  animation: scroll 30s linear infinite; 
}

.ticker-item { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  padding: 0 36px; 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.18em; 
  text-transform: uppercase; 
  color: var(--gold-pale); 
}

.ticker-dot { 
  width: 4px; 
  height: 4px; 
  background: var(--gold); 
  border-radius: 50%; 
}

@keyframes scroll { 
  from{transform:translateX(0)} 
  to{transform:translateX(-50%)} 
}

/* ========== BUTTONS ========== */
.btn-primary { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); 
  color: #000; 
  padding: 14px 32px; 
  font-family: 'Inter', sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-radius: 2px; 
  border: none; 
  cursor: pointer; 
  transition: all 0.25s ease; 
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

.btn-primary:hover { 
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); 
  color: #000;
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

.btn-outline { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: rgba(250, 250, 248, 0.03); 
  color: var(--white); 
  border: 1px solid rgba(250, 250, 248, 0.2); 
  backdrop-filter: blur(4px);
  padding: 14px 32px; 
  font-family: 'Inter', sans-serif; 
  font-size: 13px; 
  font-weight: 600; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-radius: 2px; 
  cursor: pointer; 
  transition: all 0.2s; 
}

.btn-outline:hover { 
  background: rgba(250, 250, 248, 0.1); 
  border-color: var(--white); 
  transform: translateY(-2px); 
}

.btn-secondary { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: var(--ink); 
  color: var(--gold-light); 
  border: 1px solid rgba(201,162,39,0.3); 
  padding: 14px 32px; 
  font-family: 'Inter', sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  text-decoration: none; 
  border-radius: 2px; 
  cursor: pointer; 
  transition: all 0.2s; 
}

.btn-secondary:hover { 
  border-color: var(--gold); 
  background: var(--slate); 
}

/* ========== SHARED SECTION STYLES ========== */
section { 
  padding: 96px 0; 
}

.container { 
  max-width: 1500px; 
  margin: 0 auto; 
  padding: 0 40px; 
}

.section-eyebrow { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-bottom: 16px;
  justify-content: center;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.section-eyebrow-line { 
  display: none; 
}

.section-eyebrow span { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: var(--gold); 
}

.section-title { 
  font-family: 'Lora', serif; 
  font-size: clamp(24px, 2.8vw, 38px); 
  font-weight: 700; 
  line-height: 1.15; 
  margin-bottom: 16px; 
  color: var(--ink);
}

.section-sub { 
  font-size: 16px; 
  line-height: 1.7; 
  color: var(--muted); 
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

.section-header { 
  margin-bottom: 52px;
  text-align: center;
}

/* ========== FEATURE CARDS ========== */
.features-section { 
  background: var(--off-white); 
}

.features-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2px; 
  background: var(--divider);
  align-items: stretch;
}

.feature-card { 
  background: var(--white); 
  padding: 40px 32px; 
  position: relative; 
  overflow: hidden; 
  transition: all 0.3s; 
}

.feature-card::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 2px; 
  background: linear-gradient(to right, var(--gold-dark), var(--gold)); 
  opacity: 0; 
  transition: opacity 0.3s; 
}

.feature-card:hover { 
  background: #FEFCF5; 
}

.feature-card:hover::before { 
  opacity: 1; 
}

.feature-icon { 
  width: 48px; 
  height: 48px; 
  margin-bottom: 20px; 
  background: rgba(139,26,26,0.07); 
  border: 1px solid rgba(139,26,26,0.14); 
  border-radius: 2px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.feature-icon svg { 
  width: 22px; 
  height: 22px; 
  stroke: var(--crimson); 
  fill: none; 
  stroke-width: 1.5; 
}

.feature-card h3 { 
  font-family: 'Lora', serif; 
  font-size: 15px; 
  font-weight: 600; 
  margin-bottom: 12px; 
  color: var(--ink); 
}

.feature-card p { 
  font-size: 14px; 
  line-height: 1.7; 
  color: var(--muted); 
}

.feature-num { 
  position: absolute; 
  top: 28px; 
  right: 28px; 
  font-family: 'Lora', serif; 
  font-size: 44px; 
  font-weight: 700; 
  color: rgba(201,162,39,0.07); 
  line-height: 1; 
  pointer-events: none; 
}

/* ========== DEPARTMENT CARDS ========== */
.depts-section { 
  background: var(--off-white); 
}

.depts-section .section-title { 
  color: var(--ink); 
}

.depts-section .section-sub { 
  color: var(--muted); 
}

.depts-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px; 
}

.dept-card { 
  background: var(--white); 
  border: 1px solid rgba(201,162,39,0.3); 
  padding: 30px 24px; 
  position: relative; 
  overflow: hidden; 
  transition: all 0.3s; 
  cursor: pointer; 
  text-decoration: none; 
  display: block; 
}

.dept-card:hover { 
  background: rgba(201,162,39,0.05); 
  border-color: rgba(201,162,39,0.35); 
  transform: translateY(-3px); 
}

.dept-card-accent { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 2px; 
  background: linear-gradient(to right, var(--crimson), var(--gold)); 
  transform: scaleX(0); 
  transform-origin: left; 
  transition: transform 0.3s; 
}

.dept-card:hover .dept-card-accent { 
  transform: scaleX(1); 
}

.dept-icon { 
  margin-bottom: 16px; 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(201,162,39,0.08), rgba(201,162,39,0.18));
  color: var(--gold);
  overflow: hidden;
}

.dept-icon svg, .dept-icon i {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.dept-card h3 { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
  margin-bottom: 8px; 
}

.dept-card p { 
  font-size: 13px; 
  line-height: 1.6; 
  color: var(--muted); 
}

.dept-courses { 
  margin-top: 14px; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 5px; 
}

.dept-tag { 
  font-size: 10px; 
  font-weight: 600; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  background: rgba(201,162,39,0.1); 
  border: 1px solid rgba(201,162,39,0.2); 
  color: var(--gold); 
  padding: 3px 7px; 
  border-radius: 1px; 
}

/* ========== VERIFICATION SECTION ========== */
.verify-section { 
  background: var(--off-white); 
}

.verify-panel { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 60px; 
  align-items: start; 
}

.verify-demo { 
  background: var(--white); 
  border: 1px solid rgba(201,162,39,0.2); 
  padding: 36px; 
  position: relative; 
}

.verify-demo::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 3px; 
  background: linear-gradient(to right, var(--crimson), var(--gold)); 
}

.verify-label { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--muted); 
  margin-bottom: 8px; 
}

.verify-input-row { 
  display: flex; 
  gap: 8px; 
  margin-bottom: 20px; 
}

.verify-input { 
  flex: 1; 
  padding: 12px 14px; 
  border: 1px solid rgba(201,162,39,0.25); 
  background: var(--white); 
  color: var(--ink); 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 13px; 
  outline: none; 
  transition: border-color 0.2s; 
}

.verify-input:focus { 
  border-color: var(--gold); 
}

.verify-input::placeholder { 
  color: var(--muted); 
}

.verify-btn { 
  padding: 12px 20px; 
  background: var(--gold); 
  border: none; 
  cursor: pointer; 
  font-family: 'Inter', sans-serif; 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--ink); 
  transition: background 0.2s; 
  border-radius: 2px;
}

.verify-btn:hover { 
  background: var(--gold-light); 
}

.verify-result { 
  border: 1px solid rgba(34,139,34,0.2); 
  background: rgba(34,139,34,0.04); 
  padding: 18px; 
  margin-top: 20px;
}

.verify-status { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 14px; 
}

.verify-dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: var(--success); 
  animation: blink 2s ease-in-out infinite; 
}

@keyframes blink { 
  0%,100%{opacity:1} 
  50%{opacity:0.4} 
}

.verify-status span { 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--success); 
}

.verify-row { 
  display: flex; 
  justify-content: space-between; 
  padding: 7px 0; 
  border-bottom: 1px solid rgba(201,162,39,0.1); 
}

.verify-row:last-child { 
  border-bottom: none; 
}

.verify-row .vk { 
  font-size: 12px; 
  color: var(--muted); 
  font-weight: 500; 
}

.verify-row .vv { 
  font-size: 12px; 
  color: var(--ink); 
  font-weight: 600; 
  font-family: 'JetBrains Mono', monospace;
}

/* ========== COURSES SECTION ========== */
.courses-section { 
  background: var(--white); 
}

.courses-tabs { 
  display: flex; 
  gap: 0; 
  margin-bottom: 36px; 
  border-bottom: 1px solid rgba(201,162,39,0.2); 
  flex-wrap: wrap; 
}

.course-tab { 
  padding: 11px 22px; 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: var(--muted); 
  cursor: pointer; 
  border-bottom: 2px solid transparent; 
  transition: all 0.2s; 
  margin-bottom: -1px; 
  background: none; 
  border-left: none; 
  border-right: none; 
  border-top: none; 
  font-family: 'Inter', sans-serif; 
}

.course-tab.active { 
  color: var(--gold-dark); 
  border-bottom-color: var(--gold); 
}

.course-tab:hover:not(.active) { 
  color: var(--ink); 
}

.courses-list { 
  display: grid; 
  gap: 1px; 
  background: rgba(201,162,39,0.08); 
}

.course-row { 
  background: var(--white); 
  padding: 22px 28px; 
  display: grid; 
  grid-template-columns: 3fr 1fr 1fr 1fr 110px; 
  align-items: center; 
  gap: 16px; 
  transition: background 0.2s; 
}

.course-row:hover { 
  background: #FEFCF5; 
}

.course-row-name { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
}

.course-row-name span { 
  display: block; 
  font-family: 'Inter', sans-serif; 
  font-size: 12px; 
  font-weight: 400; 
  color: var(--muted); 
  margin-top: 3px; 
}

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

.seats-bar { 
  width: 100%; 
  height: 3px; 
  background: rgba(201,162,39,0.1); 
  border-radius: 1px; 
  margin-top: 4px; 
}

.seats-fill { 
  height: 100%; 
  border-radius: 1px; 
  background: linear-gradient(to right, var(--gold-dark), var(--gold)); 
}

.enroll-btn { 
  padding: 8px 14px; 
  background: var(--gold); 
  border: none; 
  cursor: pointer; 
  font-family: 'Inter', sans-serif; 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--ink); 
  transition: background 0.2s; 
  white-space: nowrap; 
  border-radius: 2px;
}

.enroll-btn:hover { 
  background: var(--gold-light); 
}

/* ========== EVENT CARDS ========== */
.events-section { 
  background: var(--off-white); 
}

.events-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 24px; 
}

.event-card { 
  border: 1px solid rgba(201,162,39,0.15); 
  overflow: hidden; 
  transition: all 0.3s; 
  background: var(--white);
}

.event-card:hover { 
  border-color: rgba(201,162,39,0.38); 
  transform: translateY(-2px); 
}

.event-header { 
  background: var(--ink); 
  padding: 26px 26px 22px; 
  position: relative; 
  overflow: hidden; 
}

.event-header-glow { 
  position: absolute; 
  top: -20px; 
  right: -20px; 
  width: 110px; 
  height: 110px; 
  background: radial-gradient(ellipse, rgba(201,162,39,0.13) 0%, transparent 70%); 
}

.event-date { 
  font-family: 'Lora', serif; 
  font-size: 34px; 
  font-weight: 700; 
  color: var(--gold-light); 
  line-height: 1; 
}

.event-month { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--gold); 
  margin-top: 4px; 
}

.event-type { 
  display: inline-block; 
  margin-top: 10px; 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  padding: 3px 9px; 
  background: var(--crimson); 
  color: var(--gold-pale); 
  border-radius: 1px; 
}

.event-body { 
  padding: 22px 26px; 
  background: var(--white); 
}

.event-title { 
  font-family: 'Lora', serif; 
  font-size: 15px; 
  font-weight: 600; 
  color: var(--ink); 
  margin-bottom: 9px; 
}

.event-desc { 
  font-size: 13px; 
  line-height: 1.6; 
  color: var(--muted); 
  margin-bottom: 18px; 
}

.event-meta { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
}

.event-meta-item { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  font-size: 12px; 
  color: var(--muted); 
}

.event-meta-item svg { 
  width: 14px; 
  height: 14px; 
  stroke: var(--gold); 
  fill: none; 
  stroke-width: 1.5; 
  flex-shrink: 0; 
}

.event-countdown { 
  margin-top: 18px; 
  padding: 11px; 
  background: var(--off-white); 
  display: flex; 
  gap: 14px; 
  align-items: center; 
  justify-content: center;
}

.countdown-unit { 
  text-align: center; 
}

.countdown-num { 
  font-family: 'Lora', serif; 
  font-size: 19px; 
  font-weight: 700; 
  color: var(--crimson); 
  display: block; 
}

.countdown-lbl { 
  font-size: 9px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--muted); 
}

.countdown-sep { 
  font-size: 18px; 
  color: var(--gold); 
  font-weight: 700; 
  align-self: flex-start; 
  margin-top: 3px; 
}

/* ========== TEAM SECTION ========== */
.team-section { 
  background: var(--white); 
}

.team-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 2px; 
  background: var(--divider); 
}

.team-card { 
  background: var(--white); 
  padding: 30px 22px; 
  text-align: center; 
  transition: background 0.2s; 
}

.team-card:hover { 
  background: #FEFCF5; 
}

.team-avatar { 
  width: 68px; 
  height: 68px; 
  margin: 0 auto 14px; 
  background: linear-gradient(135deg, var(--crimson-deep), var(--crimson)); 
  border: 2px solid rgba(201,162,39,0.2); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: 'Lora', serif; 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--gold-light); 
  position: relative; 
}

.team-badge { 
  position: absolute; 
  bottom: -4px; 
  right: -4px; 
  width: 20px; 
  height: 20px; 
  background: var(--gold); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border: 2px solid var(--white); 
}

.team-badge svg { 
  width: 10px; 
  height: 10px; 
  stroke: var(--ink); 
  fill: none; 
  stroke-width: 2; 
}

.team-id { 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 10px; 
  color: var(--gold); 
  letter-spacing: 0.12em; 
  margin-bottom: 5px; 
}

.team-name { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
  margin-bottom: 4px; 
}

.team-role { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: var(--crimson); 
  margin-bottom: 10px; 
}

.team-since { 
  font-size: 12px; 
  color: var(--muted); 
}

.team-verified { 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  margin-top: 10px; 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--success); 
}

/* ========== SECURITY SECTION ========== */
.security-section { 
  background: var(--ink); 
  position: relative; 
  overflow: hidden; 
}

.security-section .section-title { 
  color: var(--white); 
}

.security-section .section-sub { 
  color: rgba(250,250,248,0.5); 
}

.security-bg { 
  position: absolute; 
  inset: 0; 
  background-image: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(201,162,39,0.04) 59px, rgba(201,162,39,0.04) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(201,162,39,0.04) 59px, rgba(201,162,39,0.04) 60px); 
  pointer-events: none; 
}

.security-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 1px; 
  background: rgba(201,162,39,0.1); 
  position: relative; 
  z-index: 1; 
}

.security-item { 
  background: var(--ink-soft); 
  padding: 32px 28px; 
  display: flex; 
  gap: 18px; 
  align-items: flex-start; 
}

.security-icon { 
  width: 40px; 
  height: 40px; 
  flex-shrink: 0; 
  background: rgba(139,26,26,0.2); 
  border: 1px solid rgba(139,26,26,0.3); 
  border-radius: 2px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.security-icon svg { 
  width: 18px; 
  height: 18px; 
  stroke: var(--crimson-mid); 
  fill: none; 
  stroke-width: 1.5; 
}

.security-item h4 { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--gold-light); 
  margin-bottom: 7px; 
}

.security-item p { 
  font-size: 13px; 
  line-height: 1.6; 
  color: rgba(250,250,248,0.38); 
}

/* ========== PARTNERS SECTION ========== */
.partners-section { 
  background: var(--off-white); 
}

.partners-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 16px; 
}

.partner-card { 
  background: var(--white); 
  border: 1px solid rgba(201,162,39,0.15); 
  padding: 26px 22px; 
  text-align: center; 
  transition: all 0.2s; 
}

.partner-card:hover { 
  border-color: rgba(201,162,39,0.38); 
}

.partner-logo { 
  width: 52px; 
  height: 52px; 
  margin: 0 auto 14px; 
  background: linear-gradient(135deg, var(--gold-dark), var(--gold)); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: 'Lora', serif; 
  font-size: 16px; 
  font-weight: 700; 
  color: var(--white); 
}

.partner-name { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
  margin-bottom: 4px; 
}

.partner-id { 
  font-family: 'JetBrains Mono', monospace; 
  font-size: 10px; 
  color: var(--muted); 
  margin-top: 4px; 
}

.partner-status { 
  display: inline-flex; 
  align-items: center; 
  gap: 5px; 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--success); 
  margin-top: 8px; 
}

/* ========== COLLABORATION SECTION ========== */
.collab-section { 
  background: var(--white); 
}

.collab-inner { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 60px; 
  align-items: start; 
}

.form-group { 
  margin-bottom: 18px; 
}

.form-label { 
  display: block; 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--muted); 
  margin-bottom: 7px; 
}

.form-control { 
  width: 100%; 
  padding: 11px 14px; 
  border: 1px solid rgba(201,162,39,0.2); 
  background: var(--white); 
  color: var(--ink); 
  font-family: 'Inter', sans-serif; 
  font-size: 15px; 
  outline: none; 
  transition: border-color 0.2s; 
  border-radius: 2px;
}

.form-control:focus { 
  border-color: var(--gold); 
}

.form-control::placeholder { 
  color: var(--muted); 
}

textarea.form-control { 
  resize: vertical; 
  min-height: 96px; 
  font-family: 'Inter', sans-serif;
}

select.form-control { 
  appearance: none; 
  cursor: pointer; 
}

.form-submit { 
  width: 100%; 
  padding: 14px; 
  background: var(--ink); 
  color: var(--gold-light); 
  border: 1px solid rgba(201,162,39,0.3); 
  cursor: pointer; 
  font-family: 'Inter', sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  transition: all 0.2s; 
  border-radius: 2px;
}

.form-submit:hover { 
  background: var(--slate); 
  border-color: var(--gold); 
}

.info-blocks { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
}

.info-block { 
  padding: 22px 26px; 
  border-left: 2px solid var(--gold); 
  background: var(--off-white); 
}

.info-block h4 { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
  margin-bottom: 7px; 
}

.info-block p { 
  font-size: 13px; 
  line-height: 1.6; 
  color: var(--muted); 
}

/* ========== STUDENT SECTION ========== */
.student-section { 
  background: linear-gradient(135deg, var(--crimson-deep) 0%, #3D0A0A 100%); 
}

.student-section .section-title { 
  color: var(--gold-light); 
}

.student-section .section-sub { 
  color: rgba(245,233,192,0.6); 
}

.student-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 18px; 
}

.student-feature { 
  background: rgba(255,255,255,0.05); 
  border: 1px solid rgba(201,162,39,0.15); 
  padding: 26px 22px; 
  text-align: center; 
  transition: all 0.3s; 
}

.student-feature:hover { 
  background: rgba(255,255,255,0.08); 
  border-color: rgba(201,162,39,0.32); 
}

.student-feature-icon { 
  width: 46px; 
  height: 46px; 
  margin: 0 auto 14px; 
  background: rgba(201,162,39,0.1); 
  border: 1px solid rgba(201,162,39,0.2); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 2px;
}

.student-feature-icon svg { 
  width: 20px; 
  height: 20px; 
  stroke: var(--gold-light); 
  fill: none; 
  stroke-width: 1.5; 
}

.student-feature h4 { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--gold-pale); 
  margin-bottom: 7px; 
}

.student-feature p { 
  font-size: 13px; 
  line-height: 1.5; 
  color: rgba(245,233,192,0.48); 
}

/* ========== TESTIMONIALS SECTION ========== */
.testimonials-section { 
  background: var(--off-white); 
}

.testimonials-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 22px; 
}

.testimonial-card { 
  background: var(--white); 
  padding: 30px 26px; 
  border: 1px solid rgba(201,162,39,0.1); 
  position: relative; 
}

.quote-mark { 
  position: absolute; 
  top: 18px; 
  right: 22px; 
  font-family: 'Lora', serif; 
  font-size: 68px; 
  color: rgba(201,162,39,0.07); 
  line-height: 1; 
  pointer-events: none; 
}

.stars { 
  display: flex; 
  gap: 3px; 
  margin-bottom: 14px; 
}

.star { 
  width: 13px; 
  height: 13px; 
  background: var(--gold); 
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
}

.testimonial-text { 
  font-size: 14px; 
  line-height: 1.7; 
  color: var(--muted); 
  margin-bottom: 22px; 
  font-style: italic; 
}

.testimonial-author { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

.author-avatar { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--crimson-deep), var(--crimson)); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: 'Lora', serif; 
  font-size: 13px; 
  font-weight: 700; 
  color: var(--gold-light); 
  flex-shrink: 0; 
}

.author-name { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
}

.author-role { 
  font-size: 11px; 
  color: var(--muted); 
  font-weight: 500; 
}

/* ========== PLACEMENT SECTION ========== */
.placement-section { 
  background: var(--white); 
}

.placement-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  gap: 16px; 
}

.placement-card { 
  padding: 24px; 
  border: 1px solid rgba(201,162,39,0.12); 
  text-align: center; 
  transition: all 0.2s; 
}

.placement-card:hover { 
  border-color: rgba(139,26,26,0.28); 
  transform: translateY(-2px); 
}

.placement-company { 
  font-family: 'Lora', serif; 
  font-size: 15px; 
  font-weight: 700; 
  color: var(--ink); 
  margin-bottom: 4px; 
}

.placement-role { 
  font-size: 12px; 
  color: var(--muted); 
  margin-bottom: 12px; 
}

.placement-stat { 
  font-family: 'Lora', serif; 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--crimson); 
}

.placement-stat-label { 
  font-size: 11px; 
  color: var(--muted); 
  font-weight: 500; 
}

/* ========== CONTACT SECTION ========== */
.contact-section { 
  background: var(--ink); 
}

.contact-section .section-title { 
  color: var(--white); 
}

.contact-inner { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 72px; 
}

.contact-info { 
  display: flex; 
  flex-direction: column; 
  gap: 28px; 
}

.contact-item { 
  display: flex; 
  gap: 16px; 
}

.contact-icon-wrap { 
  width: 42px; 
  height: 42px; 
  flex-shrink: 0; 
  background: rgba(201,162,39,0.08); 
  border: 1px solid rgba(201,162,39,0.2); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 2px;
}

.contact-icon-wrap svg { 
  width: 18px; 
  height: 18px; 
  stroke: var(--gold); 
  fill: none; 
  stroke-width: 1.5; 
}

.contact-item-title { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--gold); 
  margin-bottom: 4px; 
}

.contact-item-val { 
  font-size: 14px; 
  color: rgba(250,250,248,0.68); 
  line-height: 1.5; 
}

.contact-form .form-control { 
  background: rgba(255,255,255,0.04); 
  border-color: rgba(201,162,39,0.15); 
  color: var(--white); 
}

.contact-form .form-control:focus { 
  border-color: rgba(201,162,39,0.5); 
}

.contact-form .form-label { 
  color: rgba(250,250,248,0.5); 
}

.contact-form .form-submit { 
  background: var(--gold); 
  color: var(--ink); 
  border-color: var(--gold); 
}

.contact-form .form-submit:hover { 
  background: var(--gold-light); 
}

/* ========== ACCORDION ========== */
.accordion { 
  background: var(--white); 
  border: 1px solid rgba(201,162,39,0.15); 
}

.accordion-item { 
  border-bottom: 1px solid rgba(201,162,39,0.15); 
}

.accordion-item:last-child { 
  border-bottom: none; 
}

.accordion-header { 
  padding: 18px 24px; 
  cursor: pointer; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background: var(--off-white); 
  transition: background 0.2s; 
}

.accordion-header:hover { 
  background: #F5F1E9; 
}

.accordion-header.active { 
  background: rgba(201,162,39,0.06); 
}

.accordion-title { 
  font-family: 'Lora', serif; 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--ink); 
}

.accordion-icon { 
  width: 20px; 
  height: 20px; 
  border: 1px solid var(--gold); 
  border-radius: 2px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 12px; 
  color: var(--gold); 
  transition: transform 0.2s; 
  flex-shrink: 0;
}

.accordion-header.active .accordion-icon { 
  transform: rotate(180deg); 
}

.accordion-content { 
  padding: 0 24px; 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.3s ease; 
}

.accordion-content.show { 
  padding: 24px; 
  max-height: 500px; 
}

/* ========== RESPONSIVE DESIGN - TABLETS & MOBILE ========== */
@media (max-width: 1024px) {
  .hero-inner { 
    grid-template-columns: 1fr; 
    gap: 40px; 
    padding: 32px 20px 52px; 
  }
  
  .hero-visual { 
    order: -1; 
  }
  
  .depts-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .courses-list { 
    gap: 20px; 
  }
  
  .course-row { 
    padding: 16px 12px; 
  }
  
  .events-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  section { 
    padding-top: 60px; 
    padding-bottom: 60px; 
  }
}

@media (max-width: 768px) {
  html { 
    font-size: 15px; 
  }
  
  .hero { 
    margin-top: 60px; 
  }
  
  .hero-inner { 
    grid-template-columns: 1fr; 
    gap: 30px; 
    padding: 24px 16px 44px; 
  }
  
  .hero-title { 
    font-size: clamp(24px, 5vw, 42px); 
  }
  
  .hero-sub { 
    font-size: 14px; 
    max-width: 100%; 
  }
  
  .hero-actions { 
    flex-direction: column; 
    gap: 12px; 
  }
  
  .btn-primary, .btn-outline, .btn-secondary { 
    padding: 12px 20px; 
    width: 100%; 
    text-align: center; 
  }
  
  .hero-stats { 
    grid-template-columns: 1fr; 
    margin-top: 30px; 
  }
  
  .hero-stat { 
    padding: 16px 12px; 
    border-right: none; 
    border-bottom: 1px solid var(--divider); 
  }
  
  .hero-stat:last-child { 
    border-bottom: none; 
  }
  
  .depts-grid { 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }
  
  .dept-card { 
    padding: 20px; 
  }
  
  .courses-list { 
    gap: 12px; 
  }
  
  .course-row { 
    padding: 12px 10px; 
    flex-wrap: wrap; 
    gap: 12px; 
  }
  
  .course-row-name { 
    flex: 1 1 100%; 
    min-width: 100%; 
  }
  
  .course-meta { 
    flex: 1 1 auto; 
    min-width: 80px; 
  }
  
  .enroll-btn { 
    padding: 10px 14px; 
    font-size: 10px; 
  }
  
  .events-grid { 
    grid-template-columns: 1fr; 
    gap: 20px; 
  }
  
  .feature-card { 
    padding: 24px 16px; 
  }
  
  .feature-icon { 
    width: 50px; 
    height: 50px; 
  }
  
  section { 
    padding-top: 50px; 
    padding-bottom: 50px; 
  }
  
  .section-header { 
    margin-bottom: 30px; 
  }
  
  .section-title { 
    font-size: clamp(24px, 6vw, 36px); 
  }
  
  .container { 
    max-width: 100%; 
    padding: 0 16px; 
  }
}

@media (max-width: 480px) {
  html { 
    font-size: 14px; 
  }
  
  .hero { 
    min-height: 90vh; 
    margin-top: 60px; 
  }
  
  .hero-inner { 
    padding: 18px 12px 36px; 
    gap: 20px; 
  }
  
  .hero-eyebrow { 
    gap: 8px; 
    margin-bottom: 16px; 
  }
  
  .hero-title { 
    font-size: clamp(20px, 4.5vw, 32px); 
    margin-bottom: 16px; 
  }
  
  .hero-sub { 
    font-size: 13px; 
    line-height: 1.6; 
    margin-bottom: 24px; 
  }
  
  .hero-visual { 
    margin-top: 20px; 
  }
  
  .hero-stats { 
    margin-top: 20px; 
    gap: 0; 
  }
  
  .depts-grid { 
    grid-template-columns: 1fr; 
    gap: 12px; 
  }
  
  .dept-card { 
    padding: 16px; 
  }
  
  .dept-card h3 { 
    font-size: 14px; 
  }
  
  .course-row { 
    padding: 10px 8px; 
    flex-direction: column; 
    gap: 10px; 
  }
  
  .course-row-name { 
    font-size: 13px; 
  }
  
  .course-meta { 
    font-size: 11px; 
  }
  
  .feature-card { 
    padding: 16px 12px; 
  }
  
  .feature-num { 
    font-size: 24px; 
  }
  
  .feature-icon { 
    width: 40px; 
    height: 40px; 
  }
  
  .feature-card h3 { 
    font-size: 14px; 
  }
  
  .events-grid { 
    grid-template-columns: 1fr; 
  }
  
  .event-card { 
    padding: 16px; 
  }
  
  .section-title { 
    font-size: clamp(18px, 5vw, 28px); 
  }
  
  .section-sub { 
    font-size: 13px; 
  }
  
  section { 
    padding-top: 40px; 
    padding-bottom: 40px; 
  }
  
  .container { 
    padding: 0 12px; 
  }
  
  .form-control, textarea.form-control { 
    padding: 10px 12px; 
    font-size: 14px; 
  }
  
  .form-submit { 
    padding: 12px; 
    font-size: 12px; 
  }
  
  .team-avatar { 
    width: 56px; 
    height: 56px; 
    font-size: 16px; 
  }
  
  .team-name { 
    font-size: 13px; 
  }
}

.accordion-content p { 
  font-size: 14px; 
  line-height: 1.7; 
  color: var(--muted); 
}

/* ========== FOOTER ========== */
footer { 
  background: var(--ink); 
  border-top: 1px solid var(--divider); 
  padding: 48px 0 20px; 
}

.footer-inner { 
  max-width: 1320px; 
  margin: 0 auto; 
  padding: 0 32px; 
}

.footer-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 32px; 
  margin-bottom: 32px; 
}

.footer-col h4 { 
  font-family: 'Lora', serif; 
  font-size: 12px; 
  font-weight: 700; 
  color: var(--gold-light); 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  margin-bottom: 14px; 
}

.footer-col a { 
  display: block; 
  font-size: 13px; 
  color: rgba(250,250,248,0.5); 
  margin-bottom: 8px; 
  transition: color 0.2s; 
}

.footer-col a:hover { 
  color: var(--gold-light); 
}

.footer-bottom { 
  padding-top: 20px; 
  border-top: 1px solid rgba(201,162,39,0.1); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
}

.footer-copy { 
  font-size: 12px; 
  color: rgba(250,250,248,0.38); 
}

.social-links { 
  display: flex; 
  align-items: center;
  gap: 10px; 
  flex-wrap: wrap;
}

.social-link { 
  width: 42px; 
  height: 42px; 
  border: 1px solid rgba(201,162,39,0.2); 
  border-radius: 10px; 
  display: block;
  position: relative;
  background: rgba(255,255,255,0.015);
  color: rgba(250,250,248,0.58); 
  transition: all 0.22s ease;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
  padding: 0;
}

.social-link:hover { 
  background: rgba(201,162,39,0.08); 
  border-color: rgba(201,162,39,0.34);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

.social-link svg {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  flex-shrink: 0;
}

.social-link[title="Facebook"] svg {
  transform: translate(-50%, -50%);
}

.social-link[title="Twitter"] svg {
  transform: translate(-50%, -50%);
}

.social-link[title="LinkedIn"] svg {
  transform: translate(-50%, -50%);
}

.social-link[title="YouTube"] svg {
  transform: translate(-50%, -50%);
}

.social-links-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(201,162,39,0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
}

.social-links-brand span {
  font-size: 11px !important;
  color: rgba(250,250,248,0.42) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========== ALERTS BAR ========== */
.alerts-bar { 
  background: linear-gradient(90deg, var(--crimson-deep) 0%, var(--crimson) 100%); 
  color: var(--white); 
  padding: 10px 24px; 
  font-size: 13px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3);
  flex-wrap: wrap; 
  border-bottom: 1px solid rgba(201,162,39,0.2);
}

.alert-label { 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--gold); 
  background: rgba(201,162,39,0.15); 
  padding: 3px 8px; 
  border: 1px solid rgba(201,162,39,0.3); 
  flex-shrink: 0; 
}

.alert-text { 
  font-size: 13px; 
  color: rgba(245,233,192,0.8); 
}

/* ========== LOGIN DROPDOWN (CSS Hover Only) ========== */
.has-dropdown {
  position: relative;
}

.login-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-soft);
  border: 1px solid var(--divider);
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.has-dropdown:hover .login-dropdown {
  display: block;
}

.login-dropdown a {
  display: block;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(250,250,248,0.8);
  border-bottom: 1px solid rgba(201,162,39,0.1);
  text-transform: uppercase;
}

.login-dropdown a:last-child {
  border-bottom: none;
}

.login-dropdown a:hover {
  background: rgba(201,162,39,0.08);
  color: var(--gold-light);
}

/* Creates an invisible bridge over the 8px gap so you don't lose the hover state */
.login-dropdown::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
}

/* ========== AUTH STYLES ========== */
.auth-container { 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: var(--ink); 
  padding: 32px; 
}

.auth-box { 
  background: var(--ink-soft); 
  border: 1px solid rgba(201,162,39,0.2); 
  padding: 48px 42px; 
  max-width: 420px; 
  width: 100%; 
  position: relative;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.24);
}

.auth-box::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 2px; 
  background: linear-gradient(to right, var(--crimson), var(--gold)); 
}

.auth-header { 
  text-align: center; 
  margin-bottom: 32px; 
}

.auth-title { 
  font-family: 'Lora', serif; 
  font-size: 24px; 
  font-weight: 700; 
  color: var(--gold-light); 
  margin-bottom: 8px; 
}

.auth-form { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
}

.auth-input { 
  padding: 12px 14px; 
  border: 1px solid rgba(201,162,39,0.2); 
  background: rgba(255,255,255,0.03); 
  color: var(--white); 
  font-family: 'Inter', sans-serif; 
  font-size: 14px; 
  outline: none; 
  transition: border-color 0.2s; 
  border-radius: 2px;
}

.auth-input:focus { 
  border-color: var(--gold); 
}

.auth-input::placeholder { 
  color: rgba(250,250,248,0.35); 
}

/* Fix browser autofill background in dark theme */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover, 
.auth-input:-webkit-autofill:focus, 
.auth-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #12100d inset !important;
    -webkit-text-fill-color: var(--white) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.auth-submit { 
  padding: 12px; 
  background: var(--gold); 
  color: var(--ink); 
  border: none; 
  cursor: pointer; 
  font-family: 'Rajdhani', sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  transition: background 0.2s; 
  border-radius: 2px;
}

.auth-submit:hover { 
  background: var(--gold-light); 
}

.auth-link { 
  text-align: center; 
  font-size: 13px; 
  color: rgba(250,250,248,0.5); 
}

.auth-link a { 
  color: var(--gold-light); 
}

/* Google Auth Button */
.google-auth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(250,250,248,0.85);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.google-auth-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

.google-auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .nav-inner { 
    padding: 0 20px; 
  }

  .nav-links { 
    gap: 8px; 
  }

  .hero-inner { 
    grid-template-columns: 1fr; 
    padding: 28px 20px 48px; 
  }

  .hero-visual { 
    order: -1; 
  }

  .hero-title {
    font-size: 42px;
  }

  .hero-copy {
    font-size: 15px;
  }

  .hero-actions {
    gap: 12px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }

  .hero-stats { 
    grid-template-columns: 1fr; 
  }

  .features-grid, 
  .depts-grid, 
  .team-grid { 
    grid-template-columns: 1fr; 
  }

  .verify-panel { 
    grid-template-columns: 1fr; 
    gap: 32px; 
  }

  .course-row { 
    grid-template-columns: 1fr; 
  }

  .events-grid, 
  .testimonials-grid, 
  .placement-grid { 
    grid-template-columns: 1fr; 
  }

  .contact-inner, 
  .collab-inner { 
    grid-template-columns: 1fr; 
    gap: 40px; 
  }

  section { 
    padding: 60px 0; 
  }

  .container { 
    padding: 0 20px; 
  }

  .auth-container {
    padding: 20px;
    align-items: flex-start;
  }

  .auth-box {
    margin-top: 16px;
    padding: 36px 24px;
    border-radius: 14px;
  }

  .auth-title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  body { 
    font-size: 14px; 
  }

  .nav-name { 
    font-size: 12px; 
  }

  .hero-title { 
    font-size: 28px; 
  }

  .hero-copy {
    font-size: 14px;
    line-height: 1.65;
  }

  .section-title { 
    font-size: 22px; 
  }

  .course-row { 
    grid-template-columns: 1fr !important; 
  }

  .footer-grid { 
    grid-template-columns: 1fr; 
  }

  .footer-bottom { 
    flex-direction: column; 
    gap: 16px; 
  }

  .auth-container {
    padding: 14px;
  }

  .auth-box {
    padding: 30px 18px 22px;
  }

  .auth-header img {
    max-width: 86px;
  }

  .social-links,
  .footer-col .social-links {
    justify-content: flex-start;
  }
}

/* ========== GLOBAL POLISH ========== */

/* Dept cards: equal height grid */
.depts-grid {
  align-items: stretch;
}

.dept-card {
  display: flex;
  flex-direction: column;
}

.dept-courses {
  margin-top: auto;
  padding-top: 14px;
}

/* Feature cards: equal height */
.feature-card {
  display: flex;
  flex-direction: column;
}

.feature-card p {
  flex: 1;
}

/* CTA Section: proper text centering */
.section-sub {
  text-align: center;
}

/* Footer social column: display block properly */
.footer-col .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Navbar: ensure vertical center always */
.nav-brand {
  align-items: center;
  height: 100%;
}

/* Dept icon: consistent sizing across all cards */
.dept-icon svg {
  display: block;
}