:root {
      --brand-1: #0b1f3a;
      --brand-2: #173e73;
      --brand-3: #5cc5ff;
      --brand-4: #eaf6ff;
      --accent: #7f5af0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: #16324f;
      background:
        radial-gradient(circle at top right, rgba(92,197,255,.18), transparent 26%),
        radial-gradient(circle at left center, rgba(127,90,240,.12), transparent 22%),
        linear-gradient(180deg, #f8fcff 0%, #ffffff 35%, #f6f9ff 100%);
    }
    .navbar {
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.9);
      border-bottom: 1px solid rgba(11,31,58,.08);
    }
.hero {
  position: relative;
  overflow: hidden;
  min-height: auto;

  display: flex;
  align-items: flex-start;

  padding-top: 6rem;
  padding-bottom: 3rem;

  background: 
    linear-gradient(rgba(11,31,58,0.75), rgba(23,62,115,0.85)),
    url('../img/hero-bg.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: white;
}
.hero-bottom-info {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;

  text-align: center;
  font-size: 0.9rem;
  opacity: 0.8;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(92,197,255,0.25), transparent 40%);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}    
    
    .hero::after {
      content: "";
      position: absolute;
      inset: auto -10% -45% auto;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0));
      filter: blur(8px);
    }
    .badge-soft {
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      color: #fff;
    }
    .hero-card, .content-card {
      border: 0;
      border-radius: 1.25rem;
      box-shadow: 0 1rem 2rem rgba(9, 30, 66, .08);
    }
    .hero-card {
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(6px);
      color: white;
      box-shadow: 0 1rem 3rem rgba(0,0,0,.18);
    }
    .section-title {
      color: var(--brand-1);
      font-weight: 800;
      letter-spacing: -.02em;
    }
    .section-kicker {
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: .78rem;
      color: #5a7ea5;
      font-weight: 700;
    }
    .icon-wrap {
      width: 3rem;
      height: 3rem;
      border-radius: 1rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(92,197,255,.18), rgba(127,90,240,.12));
      color: var(--brand-2);
      font-size: 1.25rem;
    }
    .fact-item, .topic-card, .program-card, .date-card, .organizer-card {
      height: 100%;
      border: 1px solid rgba(11,31,58,.08);
      border-radius: 1.25rem;
      background: white;
      box-shadow: 0 .75rem 1.5rem rgba(17, 39, 73, .05);
    }
    .topic-card ul li, .content-list li {
      margin-bottom: .55rem;
    }
    .pill {
      display: inline-block;
      padding: .45rem .8rem;
      margin: .2rem;
      border-radius: 999px;
      font-size: .92rem;
      background: #eef7ff;
      color: #1a4c7c;
      border: 1px solid rgba(26,76,124,.08);
    }
    .cta-band {
      background: linear-gradient(135deg, #0f2748 0%, #214d8e 100%);
      color: white;
      border-radius: 1.5rem;
      overflow: hidden;
      box-shadow: 0 1rem 2rem rgba(12, 35, 70, .16);
    }
    footer {
      background: #0d1f38;
      color: rgba(255,255,255,.85);
    }
    .footer-link {
      color: rgba(255,255,255,.85);
      text-decoration: none;
    }
    .footer-link:hover {
      color: white;
    }
    .btn-glow {
      box-shadow: 0 .7rem 1.5rem rgba(92,197,255,.24);
    }
.organizer-photo {
  width: 100%;
  aspect-ratio: 3 / 2;  
  object-fit: cover;
  object-position: center top;
  border-radius: 1rem;
  display: block;
  margin-bottom: 1.25rem;
  box-shadow: 0 .75rem 1.5rem rgba(17, 39, 73, .10);
}

.organizer-card {
  overflow: hidden;
}