/* ============================================================
   WBots 2026 — Premium Tech Theme
   ============================================================ */

:root {
  --w-bg:       #050c1a;
  --w-bg2:      #080f1e;
  --w-bg3:      #0b1628;
  --w-card:     #0c1a2e;
  --w-card2:    #0f1e35;
  --w-border:   rgba(14,162,189,.16);
  --w-glow:     rgba(14,162,189,.30);
  --w-glow2:    rgba(14,162,189,.55);
  --w-primary:  #0ea2bd;
  --w-light:    #1ec3e0;
  --w-accent:   #00d4ff;
  --w-text:     #dde6f0;
  --w-muted:    #6e82a0;
  --w-dim:      #3a4a60;
  --w-green:    #4ade80;
  --w-red:      #f87171;
}

/* ── RESET / BASE ───────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  background: var(--w-bg);
  color: var(--w-text);
  font-family: var(--font-default);
}

h1,h2,h3,h4,h5,h6 { color: #fff; }
p { color: var(--w-text); }

a { color: var(--w-primary); text-decoration: none; }
a:hover { color: var(--w-light); }

section { padding: 90px 0; overflow: hidden; }

/* ── PRELOADER ──────────────────────────────────────────────── */
#preloader { background: var(--w-bg); }
#preloader:before, #preloader:after { border-color: var(--w-primary); }

/* ── SCROLL TOP ─────────────────────────────────────────────── */
.scroll-top {
  background: var(--w-primary);
  box-shadow: 0 0 16px var(--w-glow);
  border-radius: 8px;
}
.scroll-top:hover { background: var(--w-light); }

/* ── HEADER / NAV ───────────────────────────────────────────── */
#header {
  background: rgba(5,12,26,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--w-border);
  padding: 8px 0;
  transition: background .3s, box-shadow .3s;
}
#header.sticked {
  background: rgba(5,12,26,.97);
  box-shadow: 0 4px 32px rgba(14,162,189,.10);
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}

.navbar a, .navbar a:focus {
  display: block;
  color: rgba(221,230,240,.80);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 7px;
  transition: all .22s;
  text-decoration: none;
}
.navbar a:hover,
.navbar li.active > a,
.navbar .active {
  color: #fff;
  background: rgba(14,162,189,.14);
}
/* Nav panel logo row — hidden on desktop */
.nav-panel-logo { display: none; }

/* Hide toggle on desktop */
@media (min-width: 1280px) {
  .mobile-nav-toggle { display: none !important; }
}

/* ── MOBILE NAV ─────────────────────────────────────────────── */
@media (max-width: 1279px) {

  /*
   * backdrop-filter on #header creates a CSS containing block for
   * position:fixed children, capping the navbar at header height (~80px).
   * Remove it on mobile so the navbar positions against the viewport.
   */
  #header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5,12,26,.98) !important;
  }

  /* Full-screen panel — uses transform (not left) so it's independent
     of any containing block the header might create. */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #060d1b !important;
    z-index: 9998 !important;
    display: block !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
    pointer-events: none !important;
  }

  body.mobile-nav-active .navbar {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Kill the gray overlay main.css injects — panel is already full-screen */
  .mobile-nav-active .navbar::before {
    display: none !important;
  }

  /* Toggle button — styled icon button, always above the panel */
  .mobile-nav-toggle {
    pointer-events: auto !important;
    position: fixed !important;
    top: 20px !important;
    right: 16px !important;
    z-index: 9999 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 22px !important;
    color: var(--w-text) !important;
    background: rgba(14,162,189,.08) !important;
    border: 1px solid rgba(14,162,189,.16) !important;
    border-radius: 8px !important;
    transition: background .2s, border-color .2s, color .2s !important;
  }

  .mobile-nav-toggle:hover {
    background: rgba(14,162,189,.15) !important;
    border-color: rgba(14,162,189,.3) !important;
  }

  .mobile-nav-toggle.bi-x {
    color: var(--w-light) !important;
    background: rgba(14,162,189,.14) !important;
    border-color: rgba(14,162,189,.28) !important;
  }

  /* Logo header row inside the panel — same height as browser header */
  .nav-panel-logo {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    border-bottom: 1px solid var(--w-border);
  }

  /* Nav list */
  .navbar ul {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Item separators */
  .navbar li {
    border-bottom: 1px solid rgba(14,162,189,.07) !important;
  }
  .navbar li:last-child {
    border-bottom: none !important;
  }

  /* Links */
  .navbar a, .navbar a:focus {
    color: rgba(200,215,230,.65) !important;
    font-size: .80rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    border-left: 3px solid transparent !important;
    transition: color .2s, background .2s, border-left-color .2s !important;
  }

  .navbar a:hover {
    color: #fff !important;
    background: rgba(14,162,189,.06) !important;
    border-left-color: var(--w-primary) !important;
  }

  .navbar li.active > a,
  .navbar .active {
    color: var(--w-light) !important;
    background: rgba(14,162,189,.09) !important;
    border-left-color: var(--w-light) !important;
  }
}

/* ── HERO — INDEX ───────────────────────────────────────────── */
.hero-wbots {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg,#020818 0%,#050c1a 50%,#06122a 100%);
  overflow: hidden;
}
.hero-wbots::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(14,162,189,.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0,212,255,.04) 0%, transparent 60%);
  pointer-events:none;
}
.hero-wbots::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,162,189,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,162,189,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,162,189,.10);
  border: 1px solid rgba(14,162,189,.28);
  color: var(--w-light);
  padding: 5px 15px;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  background: var(--w-light);
  border-radius: 50%;
  animation: blink 2s ease infinite;
  flex-shrink: 0;
}
@keyframes blink {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.65)}
}

.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.09;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -.5px;
}
.hero-title .grad {
  background: linear-gradient(130deg, var(--w-primary), var(--w-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--w-muted);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 36px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(14,162,189,.08);
  border: 1px solid rgba(14,162,189,.18);
  color: var(--w-text);
  padding: 9px 17px;
  border-radius: 10px;
  font-size: .86rem;
}
.hero-badge i { color: var(--w-primary); font-size: .95rem; }
.hero-badge strong { color: var(--w-light); }

.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; }
.hero-visual img {
  max-width: 380px; width: 100%;
  filter: drop-shadow(0 0 50px rgba(14,162,189,.25));
  animation: float 7s ease-in-out infinite;
  position: relative; z-index: 2;
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.ring {
  position:absolute;
  border-radius:50%;
  border: 1px solid rgba(14,162,189,.12);
}
.ring-1 { width:340px;height:340px; animation: spin 24s linear infinite; }
.ring-2 { width:460px;height:460px; animation: spin 38s linear infinite reverse; border-color:rgba(14,162,189,.07); }
.ring-3 { width:580px;height:580px; animation: spin 52s linear infinite; border-color:rgba(14,162,189,.04); }
.ring-1::before, .ring-2::before {
  content:'';
  position:absolute;
  top:-4px; left:50%;
  width:8px; height:8px;
  background: var(--w-light);
  border-radius:50%;
  box-shadow: 0 0 10px var(--w-primary);
  transform:translateX(-50%);
}
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ── PAGE HERO (inner pages) ────────────────────────────────── */
.page-hero {
  padding: 130px 0 72px;
  background: linear-gradient(180deg,#020818 0%, var(--w-bg2) 100%);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,162,189,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,162,189,.04) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
.page-hero h1 {
  font-size: clamp(2rem,4vw,3.2rem);
  font-weight: 800;
  color: #fff;
  position: relative; z-index:1;
  letter-spacing:-.4px;
}
.page-hero p {
  color: var(--w-muted);
  font-size: 1.05rem;
  max-width: 540px;
  position: relative; z-index:1;
  line-height: 1.7;
}

/* ── SECTION HEADERS ────────────────────────────────────────── */
.section-header { text-align:center; padding-bottom: 52px; }
.section-header h2 {
  font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.section-header p { color: var(--w-muted); max-width:580px; margin:0 auto; font-size:.97rem; line-height:1.7; }

.section-tag {
  display: inline-block;
  background: rgba(14,162,189,.10);
  border: 1px solid rgba(14,162,189,.24);
  color: var(--w-light);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ── CARDS ──────────────────────────────────────────────────── */
.wcard {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 14px;
  padding: 26px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative; overflow: hidden;
}
.wcard::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,var(--w-primary),transparent);
  opacity:0; transition:opacity .3s;
}
.wcard:hover {
  border-color: rgba(14,162,189,.38);
  box-shadow: 0 8px 30px rgba(14,162,189,.10);
  transform: translateY(-3px);
}
.wcard:hover::before { opacity:1; }

.wcard-icon {
  width: 46px; height: 46px;
  background: rgba(14,162,189,.11);
  border: 1px solid rgba(14,162,189,.2);
  border-radius: 11px;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.25rem;
  color: var(--w-primary);
  margin-bottom: 15px;
}

/* ── DATES TIMELINE ─────────────────────────────────────────── */
.date-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 17px 20px;
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: border-color .22s, background .22s;
}
.date-item:hover { border-color:rgba(14,162,189,.35); background:var(--w-card2); }
.date-icon {
  width:40px;height:40px;
  background:rgba(14,162,189,.10);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--w-primary); flex-shrink:0; font-size:1rem;
}
.date-label {
  font-size:.75rem; color:var(--w-muted);
  text-transform:uppercase; letter-spacing:.8px; font-weight:600; margin-bottom:3px;
}
.date-value {
  font-size:1.05rem; font-weight:700; color:var(--w-light);
}
.date-value.strike { text-decoration: line-through; color: var(--w-muted); }

/* ── ABOUT SECTION ──────────────────────────────────────────── */
.about-section { background: var(--w-bg2); }
.about-text h3 { font-size:1.75rem; font-weight:700; color:#fff; margin-bottom:18px; }
.about-text p { color:var(--w-muted); line-height:1.82; font-size:.95rem; margin-bottom:16px; }
.about-text a { color:var(--w-primary); }
.about-text a:hover { color:var(--w-light); }

/* ── TOPICS ─────────────────────────────────────────────────── */
.topics-section { background: var(--w-bg); }

.topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 767px) {
  .topics-grid { grid-template-columns: 1fr; }
}

.topic-item {
  display:flex; align-items:center; gap:14px;
  padding: 16px 20px;
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 10px;
  transition: border-color .22s, background .22s;
  margin-bottom: 0;
}
.topic-item:hover { border-color:rgba(14,162,189,.32); background:var(--w-card2); }
.topic-item i { color:var(--w-primary); font-size:1.1rem; flex-shrink:0; }
.topic-item span { color:var(--w-text); font-size:.9rem; line-height:1.45; }

/* ── SUBMISSION TYPES ───────────────────────────────────────── */
.submit-card {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-left: 3px solid var(--w-primary);
  border-radius: 0 12px 12px 0;
  padding: 22px 26px;
  margin-bottom: 14px;
  transition: border-left-color .22s, background .22s;
}
.submit-card:hover { border-left-color:var(--w-light); background:var(--w-card2); }
.submit-card h5 { color:var(--w-light); font-weight:700; margin-bottom:7px; font-size:.95rem; }
.submit-card p { color:var(--w-muted); margin:0; font-size:.875rem; line-height:1.65; }

/* ── INFO BOX ───────────────────────────────────────────────── */
.info-box {
  background: rgba(14,162,189,.06);
  border: 1px solid rgba(14,162,189,.18);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.info-box h5 {
  color:var(--w-light); font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:8px; font-size:.95rem;
}
.info-box p, .info-box li { color:var(--w-muted); font-size:.875rem; line-height:1.72; margin-bottom:6px; }
.info-box ul { list-style:none; padding:0; margin:0; }
.info-box ul li { position:relative; padding-left:18px; }
.info-box ul li::before { content:'→'; position:absolute; left:0; color:var(--w-primary); font-weight:700; }
.info-box a { color:var(--w-primary); }
.info-box a:hover { color:var(--w-light); }

/* ── POLICY CARDS ───────────────────────────────────────────── */
.policy-card { border-radius:12px; padding:22px 26px; margin-bottom:14px; }
.policy-card.allowed { background:rgba(74,222,128,.05); border:1px solid rgba(74,222,128,.20); }
.policy-card.forbidden { background:rgba(248,113,113,.05); border:1px solid rgba(248,113,113,.20); }
.policy-card.neutral { background:rgba(14,162,189,.05); border:1px solid rgba(14,162,189,.18); }
.policy-card.allowed h5 { color:var(--w-green); }
.policy-card.forbidden h5 { color:var(--w-red); }
.policy-card.neutral h5 { color:var(--w-light); }
.policy-card h5 { font-size:.9rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.policy-card p { color:var(--w-muted); font-size:.875rem; margin:0; line-height:1.65; }

/* ── TEAM CARDS ─────────────────────────────────────────────── */
.team-section { background:var(--w-bg2); }
.member-card {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  text-align: center;
}
.member-card:hover {
  border-color: rgba(14,162,189,.38);
  box-shadow: 0 12px 44px rgba(14,162,189,.13);
  transform: translateY(-4px);
}
.member-card .photo-wrap {
  position:relative; overflow:hidden; height:250px;
}
.member-card .photo-wrap img {
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  transition: transform .4s; filter:grayscale(15%);
}
.member-card:hover .photo-wrap img { transform:scale(1.06); filter:grayscale(0); }
.member-card .photo-wrap::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:70px;
  background: linear-gradient(transparent,var(--w-card));
}
.member-card .info { padding:18px 20px 22px; }
.member-card .info h4 { font-size:1rem; font-weight:700; color:#fff; margin-bottom:4px; }
.member-card .info .role { font-size:.75rem; color:var(--w-light); font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.member-card .info .inst { font-size:.82rem; color:var(--w-muted); margin-top:2px; }

/* ── PROGRAM TABLE ──────────────────────────────────────────── */
.program-section { background:var(--w-bg); }
.program-wrap {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 16px;
  overflow: hidden;
}
.program-wrap table { width:100%; border-collapse:collapse; margin:0; }
.program-wrap thead tr { background:rgba(14,162,189,.10); border-bottom:1px solid var(--w-border); }
.program-wrap thead td, .program-wrap thead th {
  color:var(--w-light); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; padding:16px 20px; border:none;
}
.program-wrap tbody tr { border-bottom:1px solid rgba(14,162,189,.06); transition:background .2s; }
.program-wrap tbody tr:last-child { border-bottom:none; }
.program-wrap tbody tr:hover { background:rgba(14,162,189,.04); }
.program-wrap tbody td { padding:15px 20px; color:var(--w-text); border:none; vertical-align:middle; font-size:.9rem; }
.time-cell { color:var(--w-primary) !important; font-weight:700; font-family:monospace; font-size:.95rem; white-space:nowrap; }
.session-head { background:rgba(14,162,189,.10) !important; vertical-align:middle !important; text-align:center !important; color:var(--w-light) !important; }

/* ── PAPER CARDS ────────────────────────────────────────────── */
.papers-section { background:var(--w-bg); }
.paper-card {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 14px;
  padding: 22px 24px;
  transition: border-color .25s, box-shadow .25s;
  margin-bottom: 12px;
}
.paper-card:hover { border-color:rgba(14,162,189,.33); box-shadow:0 6px 28px rgba(14,162,189,.08); }
.paper-card .badge {
  font-size:.7rem; font-weight:700;
  background:rgba(14,162,189,.12) !important;
  color:var(--w-light) !important;
  border:1px solid rgba(14,162,189,.22);
  padding:4px 10px; border-radius:6px; margin-bottom:11px; display:inline-block;
}
.paper-title { font-size:.97rem; font-weight:700; color:#fff; line-height:1.42; margin-bottom:9px; }
.paper-authors { color:var(--w-muted); font-size:.86rem; margin:0; }
.paper-authors strong { color:var(--w-primary); }

/* ── COMING SOON ────────────────────────────────────────────── */
.coming-soon {
  min-height:55vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:80px 20px;
}
.coming-soon .cs-icon {
  font-size:3.5rem; color:var(--w-primary); margin-bottom:22px;
  animation:pulse-icon 3s ease infinite;
}
@keyframes pulse-icon {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.88)}
}
.coming-soon h2 { font-size:1.8rem; font-weight:700; color:#fff; margin-bottom:10px; }
.coming-soon p { color:var(--w-muted); max-width:400px; font-size:.97rem; }

/* ── FOOTER ─────────────────────────────────────────────────── */
#footer {
  background: var(--w-bg2);
  border-top: 1px solid var(--w-border);
}
.footer-top { padding:60px 0 36px; }

/* Sobrescreve o background cinza do main.css */
.footer .footer-legal,
#footer .footer-legal {
  background: transparent !important;
  border-top: 1px solid var(--w-border);
  padding: 18px 0;
}

.footer-brand .brand-name {
  font-size:1.35rem; font-weight:800; color:#fff; display:inline-block; margin-bottom:10px;
}
.footer-brand .brand-name span { color:var(--w-light); }
.footer-brand p { color:var(--w-muted); font-size:.875rem; line-height:1.7; max-width:320px; }

.footer-col h4 {
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.3px; color:var(--w-light); margin-bottom:16px;
}
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:9px; }
.footer-col ul li a { color:var(--w-muted); font-size:.875rem; transition:color .2s; }
.footer-col ul li a:hover { color:var(--w-light); }
.footer-col p { color:var(--w-muted); font-size:.875rem; line-height:1.9; }
.footer-col strong { color:var(--w-text); }

.footer-legal {
  border-top:1px solid var(--w-border);
  padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.footer-legal .copyright { color:var(--w-muted); font-size:.78rem; }
.footer-legal .credits { color:var(--w-dim); font-size:.73rem; }
.footer-legal .credits a { color:var(--w-muted); }

/* ── UTILITIES ──────────────────────────────────────────────── */
.text-accent { color:var(--w-light) !important; }
.text-w-muted { color:var(--w-muted) !important; }
.bg-w { background:var(--w-bg) !important; }
.bg-w2 { background:var(--w-bg2) !important; }

hr.w-hr { border:none; border-top:1px solid var(--w-border); margin:32px 0; }

/* ── DATES BANNER (Call for Papers) ────────────────────────── */
.dates-banner-section {
  background: linear-gradient(180deg, var(--w-bg2) 0%, var(--w-bg3) 100%);
  border-bottom: 1px solid rgba(14,162,189,.20);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.dates-banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(14,162,189,.09) 0%, transparent 68%);
  pointer-events: none;
}

.dates-banner-header {
  text-align: center;
  margin-bottom: 50px;
}
.dates-banner-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}
.dates-banner-header p { color: var(--w-muted); font-size: .97rem; }

.dates-banner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 991px) {
  .dates-banner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .dates-banner-grid { grid-template-columns: 1fr 1fr; }
}

.date-banner-card {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: 14px;
  padding: 28px 18px 24px;
  text-align: center;
  position: relative;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.date-banner-card:hover {
  border-color: rgba(14,162,189,.38);
  box-shadow: 0 8px 30px rgba(14,162,189,.10);
  transform: translateY(-3px);
}
.date-banner-card.dbc-highlight {
  border-color: var(--w-primary);
  background: rgba(14,162,189,.07);
  box-shadow: 0 0 40px rgba(14,162,189,.14);
}
.date-banner-card.dbc-event {
  border-color: rgba(30,195,224,.26);
  background: rgba(14,162,189,.04);
}

.dbc-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--w-primary);
  color: #fff;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 13px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(14,162,189,.45);
}

.dbc-icon {
  width: 50px; height: 50px;
  background: rgba(14,162,189,.11);
  border: 1px solid rgba(14,162,189,.20);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--w-primary);
  margin: 0 auto 14px;
}
.date-banner-card.dbc-highlight .dbc-icon {
  background: rgba(14,162,189,.18);
  border-color: rgba(14,162,189,.38);
  color: var(--w-accent);
}

.dbc-label {
  font-size: .74rem;
  color: var(--w-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 600;
  margin-bottom: 9px;
  line-height: 1.45;
}

.dbc-date {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--w-light);
  letter-spacing: -.2px;
}
.date-banner-card.dbc-highlight .dbc-date {
  font-size: 1.3rem;
  color: var(--w-accent);
  text-shadow: 0 0 18px rgba(0,212,255,.30);
}
.date-banner-card.dbc-event .dbc-date {
  color: #fff;
  font-size: 1.25rem;
}

/* ── REVIEW CRITERIA ────────────────────────────────────────── */
.criteria-list { list-style:none; padding:0; margin:0; }
.criteria-list li {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(14,162,189,.06);
}
.criteria-list li:last-child { border-bottom:none; }
.criteria-list .num {
  width:28px; height:28px; flex-shrink:0;
  background:rgba(14,162,189,.12); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--w-light); font-size:.8rem; font-weight:700;
}
.criteria-list span { color:var(--w-text); font-size:.9rem; line-height:1.5; padding-top:4px; }