/* ============================================================
   IDFC 2027 — MODERN CYBER / DARK-TECH REDESIGN
   Loaded LAST. Establishes the IDFC 2027 VIOLET + MAGENTA
   identity and restyles the hero, navbar, cards, buttons, and
   sections. Sections 1-13 are historical palette layers kept
   for cascade stability; sections 14-17 are the live violet
   identity, section format, enhanced scope, and the no-JS
   scroll-reveal fallback. The base/theme layers were migrated
   to violet at the source (Aug 2026), so most earlier !important
   color overrides here are now belt-and-suspenders.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (override both naming schemes) ---------- */
:root {
  /* Cyber palette */
  --idfc-navy-950: #060b18;
  --idfc-navy-900: #0a1020;
  --idfc-navy-850: #0d1526;
  --idfc-navy-800: #111a30;
  --idfc-navy-700: #17233f;
  --idfc-blue:     #2563eb;
  --idfc-blue-400: #3b82f6;
  --idfc-cyan:     #22d3ee;
  --idfc-cyan-glow: rgba(34, 211, 238, .35);
  --idfc-ink:      #e7ecf5;
  --idfc-muted:    #9aa7bd;
  --idfc-line:     rgba(148, 163, 184, .14);

  /* --- remap the base.css scheme --- */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;
  --secondary: #22d3ee;
  --secondary-dark: #06b6d4;
  --secondary-light: #67e8f9;
  --accent: #3b82f6;
  --accent-light: #60a5fa;

  --text: #0f1e33;
  --text-light: #475569;
  --text-lighter: #64748b;

  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-elevated: #eef3fb;
  --border: #e2e8f0;
  --border-light: #eef2f7;

  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
  --gradient-hero: linear-gradient(140deg, #0a1020 0%, #0d1a33 55%, #0a1020 100%);
  --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --shadow-hover: 0 24px 50px -12px rgba(37, 99, 235, .35);

  /* --- remap the theme.css scheme --- */
  --primary-color: #2563eb;
  --secondary-color: #22d3ee;
  --accent-color: #3b82f6;

  /* Modern type: geometric sans headings, mono accents */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Slightly tighter, modern radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
}

/* Headings use the modern display font everywhere */
h1, h2, h3, h4, h5, h6,
.section-title, .hero-title, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading) !important;
  letter-spacing: -.02em;
}

/* ---------- 2. NAVBAR — glassy dark bar ---------- */
.navbar {
  background: rgba(10, 16, 32, .82) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--idfc-line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.navbar .nav-link {
  color: #c7d2e4 !important;
  font-weight: 500;
  letter-spacing: .01em;
  position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #fff !important;
}
/* animated underline on hover */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .35rem;
  height: 2px;
  background: linear-gradient(90deg, var(--idfc-blue), var(--idfc-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
  border-radius: 2px;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1); }
.navbar .dropdown-menu {
  background: rgba(13, 21, 38, .97);
  border: 1px solid var(--idfc-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.navbar .dropdown-item { color: #c7d2e4; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: rgba(37, 99, 235, .18);
  color: #fff;
}

/* Primary CTA pill in the nav (submit / register) */
.nav-cta-btn,
.navbar .btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .35);
}
.nav-cta-btn:hover,
.navbar .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(34, 211, 238, .4);
}

/* ---------- 3. HERO — dark cyber canvas ---------- */
.page-hero,
.hero-section {
  position: relative;
  background: var(--gradient-hero) !important;
  color: var(--idfc-ink);
  overflow: hidden;
  border-bottom: 1px solid var(--idfc-line);
}
/* subtle grid + glow overlays */
.page-hero::before,
.hero-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.page-hero::after,
.hero-section::after {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: 720px; height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--idfc-cyan-glow) 0%, transparent 60%);
  opacity: .5;
  pointer-events: none;
}
.page-hero .container,
.hero-section .container,
.page-hero .container-xxl,
.hero-section .container-xxl { position: relative; z-index: 2; }

.page-hero h1, .hero-section h1,
.page-hero .hero-title, .hero-section .hero-title,
.page-hero .display-4, .page-hero .display-5, .page-hero .display-6 {
  color: #fff !important;
  text-shadow: 0 2px 30px rgba(34, 211, 238, .18);
}
.page-hero .lead, .hero-section .lead,
.page-hero p, .hero-section p { color: #b8c6de !important; }

/* gradient text accent for hero titles that use .text-gradient */
.text-gradient {
  background: linear-gradient(100deg, #ffffff 0%, #7dd3fc 55%, #22d3ee 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* hero pills / badges */
.hero-pills .pill,
.page-hero .badge,
.hero-section .badge {
  background: rgba(37, 99, 235, .16) !important;
  border: 1px solid rgba(34, 211, 238, .3) !important;
  color: #cfe6ff !important;
  border-radius: 999px;
}

/* ---------- 4. BUTTONS ---------- */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(34, 211, 238, .38);
}
.btn-outline-primary {
  border: 1px solid var(--idfc-blue);
  color: var(--idfc-blue);
  border-radius: 10px;
}
.btn-outline-primary:hover {
  background: var(--idfc-blue);
  border-color: var(--idfc-blue);
  color: #fff;
}
.btn-outline-light { border-radius: 10px; }

/* ---------- 5. CARDS & SECTIONS ---------- */
.content-card,
.card,
.card-gradient,
.topic-card,
.sub-type-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(15, 30, 51, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.content-card:hover,
.card.hover-card:hover,
.card-gradient:hover,
.topic-card:hover,
.sub-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37, 99, 235, .12);
  border-color: rgba(37, 99, 235, .35);
}

/* topic / track cards: gradient icon chips + left accent */
.topic-card .topic-icon,
.sub-type-card .sub-type-icon,
.topic-icon-wrap {
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.12)) !important;
  color: var(--idfc-blue) !important;
}

/* section titles get a modern gradient underline */
.section-title { position: relative; }
.section-title.text-center::after { left: 50%; transform: translateX(-50%); }
.section-title::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin-top: .6rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--idfc-blue), var(--idfc-cyan));
}

/* section badge / kicker chips */
.section-badge,
.badge-soft {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(34,211,238,.12));
  color: var(--idfc-blue);
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* ---------- 6. FOOTER — deep navy ---------- */
.modern-footer,
.site-footer,
footer {
  background: var(--idfc-navy-950) !important;
  border-top: 1px solid var(--idfc-line);
}

/* ---------- 7. Countdown / stat numbers use mono + gradient ---------- */
.hero-countdown-number,
.committee-stat-number,
.stat-number {
  font-family: var(--font-mono);
  color: #fff;
}

/* ---------- 8. Selection + focus polish ---------- */
::selection { background: rgba(34, 211, 238, .28); color: #fff; }
a { transition: color .2s ease; }

/* ============================================================
   9. HOMEPAGE HERO — force dark cyber canvas
   (homepage uses .hero.hero-with-image + .hero-background,
    not .page-hero, so it needs explicit overrides)
   ============================================================ */
.hero.hero-with-image,
.hero#home {
  background: var(--gradient-hero) !important;
  color: var(--idfc-ink);
}
/* replace the Naples photo layer with a dark tech wash */
.hero-background {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(140deg, #0a1020 0%, #0d1a33 55%, #0a1020 100%) !important;
  opacity: 1 !important;
}
.hero.hero-with-image::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero.hero-with-image > .container,
.hero.hero-with-image > .container-xxl { position: relative; z-index: 2; }

/* hero text → light */
.hero.hero-with-image h1,
.hero.hero-with-image .hero-title { color: #fff !important; }
.hero.hero-with-image .hero-subtitle,
.hero.hero-with-image p,
.hero.hero-with-image .lead { color: #b8c6de !important; }

/* location line (was terracotta) */
.hero-location, .hero-meta, .hero-subtitle-accent { color: var(--idfc-cyan) !important; }

/* eyebrow "edition" pill + hybrid pill → cyber
   (target the tag, NOT the .hero-eyebrow flex container; final colors
    are set later in the violet section) */
.hero-eyebrow-tag.hero-eyebrow-edition {
  color: #fff !important;
}

/* three theme tags below title → glassy dark chips */
.hero-theme-tag {
  background: rgba(255,255,255,.08) !important;
  color: #dbe7fb !important;
  border: 1px solid rgba(34,211,238,.3) !important;
}
.hero-theme-tag i { color: #22d3ee !important; }

/* co-sponsor fieldset frame + legend (was orange) */
.hero-cosponsor-fieldset {
  border-color: rgba(34,211,238,.3) !important;
  background: rgba(255,255,255,.04) !important;
}
.hero-cosponsor-legend { color: var(--idfc-cyan) !important; }

/* co-sponsor logo tiles stay light so the logos read */
.hero-cosponsor-logo { background: #fff; border-radius: 10px; padding: 8px 12px; }

/* countdown label + separators */
.hero-countdown-label { color: #9fb4d4 !important; letter-spacing: .12em; }
.hero-countdown-sep { color: var(--idfc-cyan) !important; }
.hero-countdown-unit { color: #8ea3c4 !important; }

/* "Registration Not Opened" disabled chip */
.hero-countdown-cta .btn.disabled,
.hero-countdown-cta .disabled {
  background: rgba(255,255,255,.06) !important;
  color: #8ea3c4 !important;
  border: 1px solid rgba(148,163,184,.2) !important;
}

/* ============================================================
   10. SECTION RHYTHM & COLOR — distinct, layered main sections
   ============================================================ */

/* Page backdrop: subtle cool wash so it isn't flat white */
body {
  background:
    radial-gradient(1200px 600px at 100% -5%, rgba(37,99,235,.05), transparent 55%),
    radial-gradient(1000px 500px at 0% 100%, rgba(34,211,238,.05), transparent 55%),
    var(--bg) !important;
  background-attachment: fixed;
}

/* Give the homepage sections breathing room + alternating bands.
   Sections are .container mt-5 (transparent) and one .py-5 band.
   The section padding below already provides the spacing, so cancel the
   redundant Bootstrap mt-5 top margin that was stacking on top of it
   (this was causing an oversized gap after the hero and before Research
   Topics). Also tighten the decorative circuit divider. */
#about,
.container.mt-5.fade-in,
#submissions {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  margin-top: 0 !important;
}
/* The About "Scope" card has its own top margin that stacks on the hero's
   bottom padding + the scroll chevron — remove it so the first section sits
   snug under the hero. */
#about > .content-card { margin-top: 0 !important; }
/* Decorative circuit divider between About and Research Topics: shrink it
   so it reads as a thin flourish, not a tall empty band. */
.svg-divider {
  padding: 0 !important;
  margin: 0 !important;
}
.circuit-human-svg { height: 34px !important; }
/* Tighten the hero bottom padding + the scroll chevron gap after the hero */
.hero.hero-with-image { padding-bottom: 1.75rem !important; }
.scroll-indicator { margin: 0 !important; padding: .15rem 0 .35rem !important; }
.scroll-indicator i { font-size: 1.4rem !important; }

/* Tinted full-bleed band for alternating sections (Research Topics + Submission Types) */
#submission-types,
.section-tint {
  position: relative;
  background: linear-gradient(180deg, #eef3fb 0%, #e8f0fb 100%);
  border-top: 1px solid rgba(37,99,235,.10);
  border-bottom: 1px solid rgba(37,99,235,.10);
}

/* Scope / About card: elevate with a soft cyber-tinted surface */
#about .content-card,
#about .card {
  background: linear-gradient(160deg, #ffffff 0%, #f3f7fe 100%);
  border: 1px solid rgba(37,99,235,.12);
}

/* Research Topics cards: white with a colored top edge on hover */
.research-topic-card,
.topic-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.research-topic-card:hover,
.topic-card:hover {
  border-top-color: var(--idfc-blue);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,99,235,.14);
}

/* Topic / feature icon chips: consistent blue→cyan tint */
.topic-icon-wrap,
.topic-card .topic-icon,
.feature-icon,
.sub-type-icon {
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.14)) !important;
  color: var(--idfc-blue) !important;
  border: 1px solid rgba(37,99,235,.15);
}

/* Submission-type cards: crisp with left accent */
.sub-type-card {
  background: #ffffff;
  border-left: 4px solid var(--idfc-blue);
}

/* "Submissions / important dates" section — soft navy-tinted panel */
#submissions .content-card,
#submissions .card {
  background: linear-gradient(160deg, #0e1b33 0%, #0a1426 100%);
  color: #e7ecf5;
  border: 1px solid rgba(34,211,238,.18);
}
#submissions .content-card .section-title,
#submissions .content-card h2,
#submissions .content-card h3 { color: #fff !important; }
#submissions .content-card p,
#submissions .content-card li { color: #b8c6de !important; }

/* ---- DARK MODE section rhythm ---- */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -5%, rgba(37,99,235,.10), transparent 55%),
    radial-gradient(1000px 500px at 0% 100%, rgba(34,211,238,.08), transparent 55%),
    #0a1020 !important;
}
html[data-theme="dark"] #submission-types,
html[data-theme="dark"] .section-tint {
  background: linear-gradient(180deg, #0d1526 0%, #0a1122 100%);
  border-color: rgba(34,211,238,.12);
}
html[data-theme="dark"] #about .content-card,
html[data-theme="dark"] #about .card,
html[data-theme="dark"] .research-topic-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .sub-type-card {
  background: #111a30;
  border-color: rgba(148,163,184,.14);
}
html[data-theme="dark"] .research-topic-card:hover,
html[data-theme="dark"] .topic-card:hover {
  border-top-color: var(--idfc-cyan);
}

/* ============================================================
   11. BLUE + AMBER ACCENT SYSTEM (site-wide, all 17 pages)
   Navy/blue foundation with a warm amber highlight accent.
   ============================================================ */
:root {
  --amber:      #f59e0b;
  --amber-600:  #d97706;
  --amber-300:  #fbbf24;
  --amber-glow: rgba(245, 158, 11, .35);
}

/* --- Section-title underline: blue -> amber gradient --- */
.section-title::after {
  background: linear-gradient(90deg, var(--idfc-blue), var(--amber)) !important;
}

/* --- Primary CTA buttons: keep blue, amber glow + amber hover pop --- */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 16px rgba(37,99,235,.30);
}
.btn-primary:hover {
  box-shadow: 0 8px 24px var(--amber-glow);
}

/* Secondary / "accent" CTA becomes amber */
.btn-secondary,
.btn-accent {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-600) 100%) !important;
  border: 0 !important;
  color: #1a1205 !important;
  font-weight: 700;
}
.btn-secondary:hover,
.btn-accent:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 22px var(--amber-glow) !important;
  color: #1a1205 !important;
}
.btn-outline-secondary {
  border: 1px solid var(--amber) !important;
  color: var(--amber-600) !important;
}
.btn-outline-secondary:hover {
  background: var(--amber) !important;
  color: #1a1205 !important;
}

/* --- Section eyebrow / kicker badges: amber-tinted --- */
.section-badge {
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(37,99,235,.12));
  color: var(--amber-600);
  border: 1px solid rgba(245,158,11,.3);
}

/* --- Hero: add an amber underline flourish + amber HYBRID pill --- */
.hero-eyebrow-hybrid,
.hero-eyebrow-hybrid.badge {
  background: linear-gradient(135deg, var(--amber), var(--amber-600)) !important;
  color: #1a1205 !important;
  box-shadow: 0 3px 12px var(--amber-glow) !important;
}

/* --- Card hover accents: amber top edge on topic cards --- */
.research-topic-card:hover,
.topic-card:hover {
  border-top-color: var(--amber) !important;
  box-shadow: 0 16px 40px rgba(245,158,11,.16) !important;
}

/* --- Stat / countdown numbers keep blue, but section stat labels amber --- */
.committee-stat-number,
.stat-number { color: var(--idfc-blue); }

/* ============================================================
   12. FIX STRAY BOOTSTRAP BADGE COLORS -> palette
   (submission-type "pages" badges, misc bg-* pills)
   ============================================================ */
.badge.bg-primary   { background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#fff !important; }
.badge.bg-info      { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; color:#fff !important; }
.badge.bg-secondary { background: #334155 !important; color:#fff !important; }
.badge.bg-success   { background: linear-gradient(135deg,#f59e0b,#d97706) !important; color:#1a1205 !important; }
.badge.bg-warning   { background: linear-gradient(135deg,#fbbf24,#f59e0b) !important; color:#1a1205 !important; }
.badge.bg-danger    { background: #e11d48 !important; color:#fff !important; }
.badge.bg-light     { background: #eef3fb !important; color:#0f1e33 !important; }
.badge.bg-dark      { background: #0d1526 !important; color:#e7ecf5 !important; }

/* sub-type page-count badges specifically */
.sub-type-card .badge { border-radius: 999px; font-weight: 700; }

/* --- Amber accent for links/icons that signal "highlight" --- */
.text-warning, .text-amber { color: var(--amber-600) !important; }
.note-callout, .info-box, .warning-box {
  border-left: 4px solid var(--amber) !important;
}

/* --- DARK MODE amber tuning --- */
html[data-theme="dark"] .section-badge {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(37,99,235,.14));
  color: var(--amber-300);
}
html[data-theme="dark"] .badge.bg-light { background:#1e293b !important; color:#e7ecf5 !important; }
html[data-theme="dark"] .text-warning, html[data-theme="dark"] .text-amber { color: var(--amber-300) !important; }

/* ============================================================
   13. STATE-OF-THE-ART PALETTE REFINEMENT (2025/26)
   Deeper neutral base, brighter primary, soft-white text,
   amber kept as a rare pop. Overrides earlier tokens.
   ============================================================ */
:root {
  --idfc-navy-950: #060911;
  --idfc-navy-900: #0B0F1A;   /* deep neutral base */
  --idfc-navy-850: #10151F;
  --idfc-navy-800: #141B2D;   /* elevated surface */
  --idfc-blue:     #4F6BFF;   /* brighter electric primary */
  --idfc-blue-400: #6E86FF;
  --idfc-cyan:     #22D3EE;
  --idfc-ink:      #E7ECF5;   /* soft white */
  --idfc-muted:    #94A3B8;

  --primary: #4F6BFF; --primary-dark: #3350E6; --primary-light: #6E86FF;
  --primary-color: #4F6BFF; --accent-color: #6E86FF;
  --gradient-hero: linear-gradient(150deg, #0B0F1A 0%, #0e1730 55%, #0B0F1A 100%);
  --gradient-primary: linear-gradient(135deg, #4F6BFF 0%, #22D3EE 100%);
  --bg: #F8FAFC;
}

/* Hero base + background layer -> deep neutral navy */
.hero.hero-with-image, .hero#home, .page-hero, .hero-section {
  background: var(--gradient-hero) !important;
}
.hero-background {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(150deg, #0B0F1A 0%, #0e1730 55%, #0B0F1A 100%) !important;
}

/* Primary buttons + nav CTA -> brighter electric blue */
.btn-primary, .nav-cta-btn, .navbar .btn-primary {
  background: linear-gradient(135deg, #4F6BFF 0%, #3350E6 100%) !important;
}
.btn-primary:hover, .nav-cta-btn:hover {
  box-shadow: 0 8px 24px rgba(79,107,255,.42) !important;
}

/* Body soft-white text in dark, deep base in dark mode */
html[data-theme="dark"] body { background: #0B0F1A !important; color: var(--idfc-ink) !important; }
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .research-topic-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .sub-type-card { background: #141B2D !important; }

/* Section-title underline: brighter blue -> amber */
.section-title::after { background: linear-gradient(90deg, #4F6BFF, #F59E0B) !important; }

/* Selection */
::selection { background: rgba(79,107,255,.30); color:#fff; }

/* ============================================================
   14. NEW COLOR IDENTITY — VIOLET + MAGENTA (2027)
   Loaded LAST. Keeps the dark cyber aesthetic (glowing grid,
   glassy navbar, dark hero) but replaces the blue/cyan/amber
   identity with a violet-black base, electric-violet primary,
   and a magenta highlight accent. Overrides all earlier tokens
   and the hard-coded color values from sections 1–13.
   ------------------------------------------------------------
   Palette:
     base    #0B0812  violet-black
     surface #141020  elevated violet-navy
     primary #8B5CF6  electric violet
     violet-dk #7C3AED
     violet-lt #A855F7
     magenta #EC4899  highlight accent (replaces amber)
     cyan/glow #C084FC  soft violet glow (replaces cyan)
     ink     #ECE9F5  soft white text
   ============================================================ */
:root {
  /* --- core violet/magenta scale --- */
  --v-black:    #0B0812;
  --v-950:      #0B0812;
  --v-900:      #100B1C;
  --v-850:      #150F24;
  --v-800:      #1B1430;   /* elevated surface */
  --v-700:      #241A40;
  --violet:     #8B5CF6;   /* electric violet primary */
  --violet-dk:  #7C3AED;
  --violet-lt:  #A855F7;
  --violet-400: #A78BFA;
  --magenta:    #EC4899;   /* highlight accent (was amber) */
  --magenta-600:#DB2777;
  --magenta-300:#F472B6;
  --magenta-glow: rgba(236, 72, 153, .35);
  --v-cyan:     #C084FC;   /* soft violet glow (was cyan) */
  --v-glow:     rgba(168, 85, 247, .38);
  --v-ink:      #ECE9F5;
  --v-muted:    #A99FC0;

  /* --- remap the redesign "idfc-*" tokens --- */
  --idfc-navy-950: #0B0812;
  --idfc-navy-900: #100B1C;
  --idfc-navy-850: #150F24;
  --idfc-navy-800: #1B1430;
  --idfc-navy-700: #241A40;
  --idfc-blue:     #8B5CF6;
  --idfc-blue-400: #A78BFA;
  --idfc-cyan:     #C084FC;
  --idfc-cyan-glow: rgba(168, 85, 247, .38);
  --idfc-ink:      #ECE9F5;
  --idfc-muted:    #A99FC0;
  --idfc-line:     rgba(168, 139, 250, .16);

  /* --- remap the base.css scheme --- */
  --primary: #8B5CF6;
  --primary-dark: #7C3AED;
  --primary-light: #A855F7;
  --secondary: #C084FC;
  --secondary-dark: #A855F7;
  --secondary-light: #D8B4FE;
  --accent: #A855F7;
  --accent-light: #C084FC;

  /* --- remap the theme.css scheme --- */
  --primary-color: #8B5CF6;
  --secondary-color: #C084FC;
  --accent-color: #A855F7;

  /* --- amber tokens now map to magenta (so every amber rule turns magenta) --- */
  --amber:      #EC4899;
  --amber-600:  #DB2777;
  --amber-300:  #F472B6;
  --amber-glow: rgba(236, 72, 153, .35);

  /* --- gradients & backdrops --- */
  --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #C084FC 100%);
  --gradient-hero: linear-gradient(150deg, #0B0812 0%, #17102e 55%, #0B0812 100%);
  --gradient-accent: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
  --shadow-hover: 0 24px 50px -12px rgba(139, 92, 246, .38);
  --bg: #F7F5FC;
}

/* ---- Page backdrop wash: violet/magenta instead of blue/cyan ---- */
body {
  background:
    radial-gradient(1200px 600px at 100% -5%, rgba(139,92,246,.06), transparent 55%),
    radial-gradient(1000px 500px at 0% 100%, rgba(236,72,153,.05), transparent 55%),
    var(--bg) !important;
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -5%, rgba(139,92,246,.12), transparent 55%),
    radial-gradient(1000px 500px at 0% 100%, rgba(236,72,153,.09), transparent 55%),
    #0B0812 !important;
  color: var(--v-ink) !important;
}

/* ---- Hero canvas -> violet-black ---- */
.hero.hero-with-image, .hero#home, .page-hero, .hero-section {
  background: var(--gradient-hero) !important;
}
.hero-background {
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(150deg, #0B0812 0%, #17102e 55%, #0B0812 100%) !important;
}
/* hero glowing-grid + halo glow -> violet */
.page-hero::before, .hero-section::before, .hero.hero-with-image::before {
  background-image:
    linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.06) 1px, transparent 1px) !important;
}
.page-hero::after, .hero-section::after {
  background: radial-gradient(circle, var(--v-glow) 0%, transparent 60%) !important;
}
.page-hero h1, .hero-section h1,
.page-hero .hero-title, .hero-section .hero-title,
.page-hero .display-4, .page-hero .display-5, .page-hero .display-6 {
  text-shadow: 0 2px 30px rgba(168, 85, 247, .22) !important;
}
.hero-location, .hero-meta, .hero-subtitle-accent { color: var(--violet-lt) !important; }

/* gradient hero title text */
.text-gradient {
  background: linear-gradient(100deg, #ffffff 0%, #D8B4FE 55%, #C084FC 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Navbar glass -> violet-black ---- */
.navbar {
  background: rgba(11, 8, 18, .82) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .30) !important;
}
.navbar .dropdown-menu { background: rgba(21, 15, 36, .97) !important; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
  background: rgba(139, 92, 246, .20) !important;
}
/* Visible dividers in the dark dropdowns (Bootstrap's default is near-invisible here) */
.navbar .dropdown-menu .dropdown-divider,
.navbar .dropdown-menu hr {
  border-top: 1px solid rgba(192, 132, 252, .28) !important;
  opacity: 1 !important;
  margin: .4rem 0 !important;
}
.navbar .nav-link::after {
  background: linear-gradient(90deg, var(--violet), var(--magenta)) !important;
}
/* Disabled dropdown item (e.g. "Registration" before it opens): keep it
   clearly readable-but-muted on the dark dropdown, not near-invisible. */
.navbar .dropdown-item.disabled,
.navbar .dropdown-item:disabled,
.navbar .dropdown-item[aria-disabled="true"],
.navbar .dropdown-menu .disabled {
  color: #cbb8ff !important;      /* soft violet-tinted grey — legible on dark */
  opacity: .75 !important;
  cursor: not-allowed;
}
.navbar .dropdown-item.disabled:hover,
.navbar .dropdown-item[aria-disabled="true"]:hover {
  background: transparent !important;
}

/* ---- Buttons -> electric violet with magenta hover glow ---- */
.btn-primary, .nav-cta-btn, .navbar .btn-primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
  box-shadow: 0 4px 16px rgba(139,92,246,.32) !important;
}
.btn-primary:hover, .nav-cta-btn:hover, .navbar .btn-primary:hover {
  box-shadow: 0 8px 24px var(--magenta-glow) !important;
}
.btn-outline-primary { border-color: var(--violet) !important; color: var(--violet) !important; }
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus.active {
  background: var(--violet) !important; border-color: var(--violet) !important; color:#fff !important;
}
/* Filter pills (sponsors.php etc.): selected state = solid violet + WHITE text */
.filter-pills .btn.active,
.btn-outline-primary.active,
.btn-outline-secondary.active {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(139,92,246,.35) !important;
}
/* secondary/accent CTA -> magenta */
.btn-secondary, .btn-accent {
  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-600) 100%) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-accent:hover {
  box-shadow: 0 8px 22px var(--magenta-glow) !important; color:#fff !important;
}
.btn-outline-secondary { border-color: var(--magenta) !important; color: var(--magenta-600) !important; }
.btn-outline-secondary:hover { background: var(--magenta) !important; color:#fff !important; }

/* ---- Cards, chips, sections ---- */
.content-card:hover, .card.hover-card:hover, .card-gradient:hover,
.topic-card:hover, .sub-type-card:hover {
  box-shadow: 0 16px 40px rgba(139, 92, 246, .16) !important;
  border-color: rgba(139, 92, 246, .38) !important;
}
.research-topic-card:hover, .topic-card:hover {
  border-top-color: var(--magenta) !important;
  box-shadow: 0 16px 40px rgba(236,72,153,.16) !important;
}
/* Submission-type cards: remove the left accent border entirely */
.sub-type-card {
  border-left: 0 !important;
}
/* Icon chips: fixed square container so the glyph sits in a proper box.
   .topic-icon (cfp.php track cards) has no intrinsic size, so give it one. */
.topic-icon-wrap, .topic-card .topic-icon, .feature-icon,
.sub-type-icon, .sub-type-card .sub-type-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  border-radius: 12px !important;
  font-size: 1.4rem !important;   /* glyph fits the 48px box */
  line-height: 1 !important;
  margin-right: .85rem;
}
/* Icon chips: deeper tint + solid saturated glyph so icons read clearly */
.topic-icon-wrap, .topic-card .topic-icon, .feature-icon,
.sub-type-icon, .sub-type-card .sub-type-icon {
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(192,132,252,.20)) !important;
  color: #6D28D9 !important;                 /* deep violet — high contrast on the light chip */
  border: 1px solid rgba(139,92,246,.30) !important;
}
.topic-icon-wrap i, .topic-card .topic-icon i, .feature-icon i,
.sub-type-icon i, .sub-type-card .sub-type-icon i { font-size: inherit !important; }
.topic-icon-wrap i, .topic-card .topic-icon i, .feature-icon i,
.sub-type-icon i, .sub-type-card .sub-type-icon i {
  color: #6D28D9 !important;
}
html[data-theme="dark"] .topic-icon-wrap,
html[data-theme="dark"] .topic-card .topic-icon,
html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .sub-type-icon,
html[data-theme="dark"] .sub-type-card .sub-type-icon {
  background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(192,132,252,.24)) !important;
  color: #C4B5FD !important;                 /* light violet glyph on dark chip */
  border-color: rgba(168,139,250,.40) !important;
}
html[data-theme="dark"] .topic-icon-wrap i,
html[data-theme="dark"] .topic-card .topic-icon i,
html[data-theme="dark"] .feature-icon i,
html[data-theme="dark"] .sub-type-icon i,
html[data-theme="dark"] .sub-type-card .sub-type-icon i {
  color: #C4B5FD !important;
}

/* section-title underline: violet -> magenta */
.section-title::after { background: linear-gradient(90deg, #8B5CF6, #EC4899) !important; }

/* eyebrow / kicker badges */
.section-badge, .badge-soft {
  background: linear-gradient(135deg, rgba(236,72,153,.16), rgba(139,92,246,.14)) !important;
  color: var(--magenta-600) !important;
  border: 1px solid rgba(236,72,153,.3) !important;
}
html[data-theme="dark"] .section-badge { color: var(--magenta-300) !important; }

/* hero eyebrow / hybrid pills
   NOTE: .hero-eyebrow is the FLEX CONTAINER — it must stay transparent
   (no bar). Only the individual .hero-eyebrow-tag pills get a background. */
.hero-eyebrow {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hero-eyebrow-tag.hero-eyebrow-edition {
  background: linear-gradient(135deg, rgba(139,92,246,.92), rgba(124,58,237,.92)) !important;
  border: 1px solid rgba(192,132,252,.42) !important;
  box-shadow: 0 3px 14px rgba(139,92,246,.35) !important;
}
.hero-eyebrow-tag.hero-eyebrow-edition i { color: var(--v-cyan) !important; }
.hero-eyebrow-hybrid, .hero-eyebrow-hybrid.badge {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-600)) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px var(--magenta-glow) !important;
}
.hero-theme-tag { border-color: rgba(192,132,252,.32) !important; }
.hero-theme-tag i { color: var(--v-cyan) !important; }
.hero-cosponsor-fieldset { border-color: rgba(192,132,252,.32) !important; }
.hero-cosponsor-legend { color: var(--violet-lt) !important; }
.hero-countdown-sep { color: var(--v-cyan) !important; }

/* section tint band -> violet */
#submission-types, .section-tint {
  background: linear-gradient(180deg, #f2ecfc 0%, #efe8fb 100%) !important;
  border-color: rgba(139,92,246,.10) !important;
}
html[data-theme="dark"] #submission-types, html[data-theme="dark"] .section-tint {
  background: linear-gradient(180deg, #150F24 0%, #100B1C 100%) !important;
  border-color: rgba(192,132,252,.12) !important;
}
/* On inner pages (cfp.php, submission.php …) the Submission Types section is
   nested inside a .container, so the tint band is boxed. Break it out to a
   full-width band + internal padding so it matches the index.php band. */
.container #submission-types,
.container-fluid #submission-types,
.prose-lg #submission-types {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3.5rem clamp(1rem, 5vw, 4rem) !important;
  border-top: 1px solid rgba(139,92,246,.10);
  border-bottom: 1px solid rgba(139,92,246,.10);
}
html[data-theme="dark"] .container #submission-types,
html[data-theme="dark"] .container-fluid #submission-types {
  border-color: rgba(192,132,252,.12);
}
/* Center the section's own content back to a readable column inside the band */
.container #submission-types > .content-card,
.container #submission-types > .row,
.container #submission-types > .section-title,
.container #submission-types > .container {
  max-width: 1140px;
  margin-inline: auto;
}
#about .content-card, #about .card {
  background: linear-gradient(160deg, #ffffff 0%, #f6f2fe 100%) !important;
  border: 1px solid rgba(139,92,246,.12) !important;
}
/* dark "important dates" panel -> violet-navy */
#submissions .content-card, #submissions .card {
  background: linear-gradient(160deg, #1a1236 0%, #110b22 100%) !important;
  border: 1px solid rgba(192,132,252,.20) !important;
}
html[data-theme="dark"] #about .content-card,
html[data-theme="dark"] #about .card,
html[data-theme="dark"] .research-topic-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .sub-type-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .card { background: #1B1430 !important; border-color: rgba(168,139,250,.16) !important; }
html[data-theme="dark"] .research-topic-card:hover,
html[data-theme="dark"] .topic-card:hover { border-top-color: var(--magenta) !important; }

/* stat / countdown numbers */
.committee-stat-number, .stat-number { color: var(--violet) !important; }

/* bootstrap badge palette fixes */
.badge.bg-primary { background: linear-gradient(135deg,#8B5CF6,#7C3AED) !important; color:#fff !important; }
.badge.bg-info    { background: linear-gradient(135deg,#A855F7,#8B5CF6) !important; color:#fff !important; }
.badge.bg-success { background: linear-gradient(135deg,#EC4899,#DB2777) !important; color:#fff !important; }
.badge.bg-warning { background: linear-gradient(135deg,#F472B6,#EC4899) !important; color:#fff !important; }
.badge.bg-dark    { background: #150F24 !important; color: var(--v-ink) !important; }

/* amber-signal helpers -> magenta */
.text-warning, .text-amber { color: var(--magenta-600) !important; }
html[data-theme="dark"] .text-warning, html[data-theme="dark"] .text-amber { color: var(--magenta-300) !important; }
.note-callout, .info-box, .warning-box { border-left-color: var(--magenta) !important; }

/* footer deep violet-black */
.modern-footer, .site-footer, footer {
  background: var(--v-black) !important;
  border-top: 1px solid var(--idfc-line) !important;
}
/* Footer logo: the brand SVG is a navy+silver shield that turns muddy under
   the old brightness/invert filter on the dark footer. Drop the filter and
   sit it on a subtle light rounded chip so its real colors read clearly. */
.modern-footer .footer-logo,
.site-footer .footer-logo,
footer .footer-logo {
  filter: none !important;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(192,132,252,.25);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
/* Copyright bottom bar: remove the dark "separator" band so it blends
   seamlessly into the footer (no contrasting background, no top border). */
.modern-footer .footer-bottom,
footer .footer-bottom {
  background: transparent !important;
  border-top: 0 !important;
  margin-top: 0 !important;
}

/* ---- Submission page: indexing banner (IEEE text version), violet ---- */
.indexing-banner {
  background: linear-gradient(135deg, rgba(139,92,246,.05), rgba(236,72,153,.05));
  border-top: 1px solid rgba(139,92,246,.10);
  border-bottom: 1px solid rgba(139,92,246,.10);
}
.indexing-banner p { color: var(--text-light, #475569); }
.indexing-label {
  color: var(--violet-lt);
  letter-spacing: .1em;
}
.indexing-pill {
  background: #ffffff;
  color: var(--violet-dk) !important;
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-weight: 600;
  font-size: .82rem;
  box-shadow: 0 2px 8px rgba(139,92,246,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.indexing-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139,92,246,.16);
}
html[data-theme="dark"] .indexing-banner {
  background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(236,72,153,.06));
  border-color: rgba(192,132,252,.14);
}
html[data-theme="dark"] .indexing-banner p { color: #b8c6de; }
html[data-theme="dark"] .indexing-label { color: var(--violet-400); }
html[data-theme="dark"] .indexing-pill {
  background: #1B1430;
  color: #C4B5FD !important;
  border-color: rgba(168,139,250,.35);
}

/* committee "general chairs" featured card: blue/cyan -> violet/magenta */
.cm-chair-lead {
  background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(236,72,153,.08)) !important;
  border: 1px solid rgba(139,92,246,.20) !important;
  border-left: 3px solid var(--violet) !important;
  box-shadow: 0 2px 12px rgba(139,92,246,.06) !important;
}
.cm-chair-lead:hover { box-shadow: 0 4px 20px rgba(139,92,246,.14) !important; }
.cm-chair-lead::before {
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.06), transparent) !important;
}

/* countdown bar: glassy dark-violet panel (was light translucent white) */
.hero-countdown-bar {
  background: rgba(27, 20, 48, .55) !important;
  border: 1px solid rgba(192,132,252,.22) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.30) !important;
}
.hero-countdown-divider { background: rgba(192,132,252,.22) !important; }
.hero-countdown-number { color: #fff !important; }

/* selection */
::selection { background: rgba(139,92,246,.32) !important; color:#fff !important; }

/* ============================================================
   15. IDFC 2026 SECTION DESIGN + SHARED SVG DECORATION
   Ports IDFC 2026's hero (glowing grid + animated shield SVG)
   and section format (bordered uppercase badge with a blinking
   status dot + gradient section title), recolored to the 2027
   violet/magenta identity. Applies to index (.hero) and every
   inner page (.page-hero) via the shared hero-cyber-svg include.
   ============================================================ */

/* ---- Glowing grid overlay (both hero variants) ---- */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(168,85,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 70%);
  animation: heroGridPulse 8s ease-in-out infinite alternate;
}
@keyframes heroGridPulse {
  0%   { opacity: .4; }
  100% { opacity: .85; }
}

/* ---- Right-side shield watermark (IDFC 2026 style), violet ---- */
.hero-shield-watermark {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 240px;
  opacity: 0;
  z-index: 0;
  color: var(--violet-lt);              /* violet decoration */
  pointer-events: none;
  animation: shieldWmAppear 1.5s ease-out forwards;
}
@keyframes shieldWmAppear {
  0%   { opacity: 0; transform: translateY(-50%) scale(.8); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes shieldWmPulse { 0%,100% { opacity: .14; } 50% { opacity: .22; } }
@keyframes wmCircuitFlow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }
@keyframes wmNodePulse { 0%,100% { r: 2.5; opacity: .30; } 50% { r: 4; opacity: .55; } }
@keyframes wmLockGlow {
  0%,100% { opacity: .18; filter: drop-shadow(0 0 0 transparent); }
  50%     { opacity: .35; filter: drop-shadow(0 0 6px currentColor); }
}
@keyframes wmScanLine {
  0%   { transform: translateY(-60px); opacity: 0; }
  10%  { opacity: .25; }
  90%  { opacity: .25; }
  100% { transform: translateY(60px); opacity: 0; }
}
.wm-shield-outline { opacity: .16; animation: shieldWmPulse 5s ease-in-out 1.5s infinite; }
.wm-circuit { stroke-dasharray: 6 5; opacity: .14; animation: wmCircuitFlow 4s linear infinite; }
.wm-node { opacity: .30; animation: wmNodePulse 3s ease-in-out infinite; }
.wm-lock-group { opacity: .18; animation: wmLockGlow 4s ease-in-out 2s infinite; }
.wm-scan-line { opacity: 0; animation: wmScanLine 5s ease-in-out 2s infinite; }
.wm-fingerprint { opacity: .10; animation: shieldWmPulse 6s ease-in-out 3s infinite; }
@media (max-width: 768px) {
  .hero-shield-watermark { width: 130px; height: 156px; right: 10px; }
}
@media (max-width: 480px) {
  .hero-shield-watermark { width: 92px; height: 110px; right: 4px; opacity: .8; }
}

/* Keep hero text/content above the grid + shield layers */
.hero.hero-with-image > .container,
.hero.hero-with-image > .container-xxl,
.page-hero .container,
.page-hero .container-xxl,
.hero-section .container,
.hero-section .container-xxl { position: relative; z-index: 2; }
.hero.hero-with-image, .page-hero, .hero-section { position: relative; overflow: hidden; }

/* ---- Compact hero heights (match 2026's tighter proportions) ---- */
.page-hero {
  padding: clamp(84px, 10vw, 120px) 0 64px !important;
  min-height: 0 !important;
}
/* Index hero: was near full-viewport with a big empty gap; tighten it.
   Top padding only needs to clear the ~72px fixed navbar + a little air. */
.hero.hero-with-image,
.hero.hero-with-image.hero-offset-top {
  min-height: 0 !important;
  padding: 96px 0 56px !important;
  display: block !important;
}
.hero.hero-with-image .hero-content,
.hero.hero-with-image .row.justify-content-center { min-height: 0 !important; }
/* the eyebrow tags sit right under the navbar — no extra top margin */
.hero.hero-with-image .hero-eyebrow { margin-top: 0 !important; }

/* ============================================================
   15b. SECTION FORMAT — 2026 style, violet-recolored
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.section-header.text-start { text-align: left; }

/* Bordered uppercase kicker pill with a blinking status dot */
.section-badge {
  display: inline-block;
  position: relative;
  background: transparent !important;
  color: var(--violet-lt) !important;
  padding: .45rem 1rem .45rem 1.5rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--violet-lt) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: 1rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.section-badge::before {
  content: '';
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(236,72,153,.7);
  animation: sectionStatusBlink 2s ease-in-out infinite;
}
@keyframes sectionStatusBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
html[data-theme="dark"] .section-badge { color: var(--violet-400) !important; }

/* Gradient section titles (light context); keep the underline flourish */
.section-title {
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* White titles inside dark heroes (override the gradient clip) */
.page-hero .section-title,
.hero-section .section-title,
.hero-dark .section-title,
.hero.hero-with-image .section-title,
#submissions .content-card .section-title {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff !important;
}

/* ---- Hero info cards (2026 fast-facts style), violet dark glass ---- */
.hero.hero-with-image .hero-info-card,
.page-hero .hero-info-card,
.hero-dark .hero-info-card {
  background: rgba(27, 20, 48, .35) !important;
  border-color: rgba(168,85,247,.25) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff !important;
  border-radius: 12px;
  transition: all .3s ease;
}
.hero.hero-with-image .hero-info-card:hover,
.page-hero .hero-info-card:hover,
.hero-dark .hero-info-card:hover {
  border-color: rgba(168,85,247,.55) !important;
  box-shadow: 0 0 20px rgba(168,85,247,.18), 0 8px 32px rgba(0,0,0,.30);
}
.hero-info-card .card-icon { background: rgba(168,85,247,.12) !important; }
.hero-info-card h5 { color: #fff !important; }

/* Card + icon glow-on-hover (2026 "glowing icon circles") */
.content-card:hover, .card:hover, .info-card:hover,
.feature-card:hover, .date-card:hover {
  box-shadow: 0 0 18px rgba(168,85,247,.14), 0 12px 34px rgba(0,0,0,.10);
}
.card:hover .card-icon,
.feature-card:hover .feature-icon,
.content-card:hover .card-icon,
.date-card:hover .date-card-icon,
.topic-card:hover .topic-icon,
.topic-card:hover .topic-icon-wrap {
  box-shadow: 0 0 15px rgba(168,85,247,.35);
  transform: scale(1.05);
}

/* ============================================================
   15c. HEADER BRAND TEXT (next to logo) — footer-style, resized
   to fit the compact navbar height.
   ============================================================ */
.nav-brand { text-decoration: none; }
.nav-brand-name { line-height: 1.05; }
.nav-brand-title {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .01em;
  background: linear-gradient(135deg, #C4B5FD 0%, #F472B6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nav-brand-sub {
  font-family: var(--font-primary, 'Inter', sans-serif);
  font-weight: 500;
  font-size: .58rem;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(226, 220, 245, .72);
  margin-top: .1rem;
}
/* Hide the wordmark on very narrow widths so the navbar stays tidy */
@media (max-width: 991.98px) {
  .nav-brand-title { font-size: .95rem; }
  .nav-brand-sub { font-size: .55rem; }
}

/* ============================================================
   16. ENHANCED SCOPE SECTION (homepage) — open layout, no card
   Keeps the Scope text + Trento photo gallery, drops the white
   wrapping card, and elevates the section with a soft glow
   backdrop, focus-area chips, and a richer photo grid.
   ============================================================ */
.scope-section {
  position: relative;
}
/* Soft violet glow behind the open section (replaces the card panel) */
.scope-section::before {
  content: "";
  position: absolute;
  inset: -2rem -1rem;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 18% 20%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(55% 65% at 92% 85%, rgba(236,72,153,.08), transparent 60%);
  pointer-events: none;
}
.scope-section .scope-theme {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--violet-dk);
  border-left: 3px solid var(--violet);
  padding-left: .9rem;
}
html[data-theme="dark"] .scope-section .scope-theme { color: var(--violet-400); }

/* Focus-area chips */
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--violet-dk);
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(192,132,252,.10));
  border: 1px solid rgba(139,92,246,.24);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scope-chip i { color: var(--violet); }
.scope-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 6px 16px rgba(139,92,246,.16);
}
html[data-theme="dark"] .scope-chip {
  color: #C4B5FD;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(192,132,252,.14));
  border-color: rgba(168,139,250,.35);
}
html[data-theme="dark"] .scope-chip i { color: var(--violet-lt); }

/* Enhanced photo grid: bigger radius, layered shadow, subtle offset,
   gradient ring on hover. The zoom/cursor still comes from #scopeGallery. */
.scope-gallery .scope-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 12, 30, .18);
  border: 1px solid rgba(139,92,246,.14);
}
/* Placeholder tiles until Varna photos are provided */
.scope-thumb--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 14px;
  color: #cbb8ff;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(139,92,246,.30), transparent 60%),
    linear-gradient(150deg, #1a1236 0%, #0f0b22 100%);
  border: 1px solid rgba(192,132,252,.22) !important;
  box-shadow: 0 10px 30px rgba(15,12,30,.18);
}
.scope-thumb--placeholder i { font-size: 1.7rem; color: var(--violet-lt, #A855F7); }
.scope-thumb--placeholder span { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
/* Stagger the tiles slightly for a more dynamic, less boxy layout */
.scope-gallery .col-6:nth-child(1) .scope-thumb { transform: translateY(-.4rem); }
.scope-gallery .col-6:nth-child(4) .scope-thumb { transform: translateY(-.4rem); }
#scopeGallery.scope-gallery .scope-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(139,92,246,.28);
  border-color: rgba(139,92,246,.5);
}
@media (max-width: 575.98px) {
  .scope-gallery .col-6 .scope-thumb { transform: none !important; }
}

/* ============================================================
   17. NO-JS / RESILIENT SCROLL-REVEAL FALLBACK
   Scroll-reveal elements (.fade-in / .slide-in-* / .scale-in)
   are defined with opacity:0 in base.css and only revealed when
   js/main.js adds .visible. If that script fails to load or
   errors, whole content sections would stay invisible.
   Here we make them VISIBLE BY DEFAULT and only re-arm the
   hidden start-state when JS is confirmed active (html.js) AND
   the user has not asked for reduced motion. Content-first;
   animation is a progressive enhancement.
   ============================================================ */
.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in {
  opacity: 1 !important;
  transform: none !important;
}
/* Re-enable the hidden pre-animation state only when JS is active
   and motion is allowed. main.js then adds .visible to reveal. */
@media (prefers-reduced-motion: no-preference) {
  html.js .fade-in:not(.visible),
  html.js .slide-in-left:not(.visible),
  html.js .slide-in-right:not(.visible),
  html.js .scale-in:not(.visible) {
    opacity: 0 !important;
  }
  html.js .fade-in:not(.visible)        { transform: translateY(24px) !important; }
  html.js .slide-in-left:not(.visible)  { transform: translateX(-30px) !important; }
  html.js .slide-in-right:not(.visible) { transform: translateX(30px) !important; }
  html.js .scale-in:not(.visible)       { transform: scale(.92) !important; }
}

/* ============================================================
   18. 2026 POLISH — GRAIN OVERLAY + SHRINK-ON-SCROLL NAV
   ------------------------------------------------------------
   (a) A fine SVG noise overlay on the dark heroes kills the
       colour banding you otherwise get with dark violet
       gradients and adds subtle depth. Pure CSS, no JS, no
       extra request (inline data-URI turbulence). It sits
       above the gradient/grid but below the content.
   (b) The navbar shrinks and gains a stronger shadow once you
       scroll past the hero (main.js already toggles .scrolled).
   ============================================================ */

/* ---- (a) Grain overlay on dark hero surfaces ----
   The hero ::before/::after pseudo-elements are already used for the grid
   and glow, so we add grain as a dedicated child layer instead: the shared
   hero-cyber-svg include emits a .hero-grain span on every hero. It sits
   above the gradient/grid (z-index:1) and below the content (z-index:2). */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* footer gets a whisper of grain too, for consistency on the dark ground */
.modern-footer { position: relative; }
.modern-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.modern-footer > * { position: relative; z-index: 1; }

/* ---- (b) Shrink-on-scroll navbar (main.js toggles .scrolled) ---- */
.navbar { transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease; }
.navbar.scrolled {
  padding-top: .3rem !important;
  padding-bottom: .3rem !important;
  background: rgba(11, 8, 18, .92) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,.45) !important;
}
.navbar.scrolled .idfc-brand-logo { height: 32px !important; transition: height .25s ease; }
.idfc-brand-logo { transition: height .25s ease; }

/* ============================================================
   19. HAIRLINE-GLOW PEOPLE CARDS (committee / TPC)
   Elevated surface + 1px low-opacity violet hairline, with a
   soft violet glow + lift on hover — the core cyber-tech
   card vocabulary, applied to the committee roster.
   ============================================================ */
.cm-compact-item {
  border-color: rgba(139,92,246,.14) !important;
  border-left: 3px solid var(--violet) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.cm-compact-item:hover {
  transform: translateX(4px) !important;
  border-left-color: var(--magenta) !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 10px 26px -8px rgba(139,92,246,.30) !important;
}
.cm-pc-member {
  border-color: rgba(139,92,246,.14) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.cm-pc-member:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(139,92,246,.5) !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.22), 0 12px 28px -10px rgba(139,92,246,.32) !important;
}
html[data-theme="dark"] .cm-compact-item,
html[data-theme="dark"] .cm-pc-member {
  background: #171025 !important;
  border-color: rgba(168,139,250,.16) !important;
}
html[data-theme="dark"] .cm-pc-member:hover {
  border-color: rgba(168,139,250,.55) !important;
  box-shadow: 0 0 0 1px rgba(168,139,250,.3), 0 12px 30px -10px rgba(0,0,0,.6) !important;
}

/* ============================================================
   20. BENTO "AT A GLANCE" MODULE (homepage)
   Apple-style modular grid of unequal tiles — key dates, venue,
   stats, and a CTA — that makes dense conference info scannable.
   Uses raw CSS Grid (Bootstrap's grid is too uniform for this).
   ============================================================ */
/* Center the badge above the (centered, underlined) title */
.bento-head { display: flex; flex-direction: column; align-items: center; }
.bento-head .section-title.text-center::after,
.bento-head .section-title::after { margin-left: auto; margin-right: auto; }

.bento {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "dates venue venue stat1"
    "dates venue venue stat2"
    "cta   cta   cta   stat3";
}
@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "dates dates"
      "venue venue"
      "stat1 stat2"
      "stat3 stat3"
      "cta   cta";
  }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "dates" "venue" "stat1" "stat2" "stat3" "cta"; }
}
.bento-tile {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.14);
  border-radius: 18px;
  padding: 22px;
  text-decoration: none;
  color: var(--text, #1A1424);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}
a.bento-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 18px 42px -16px rgba(139,92,246,.35);
}
.bento-dates { grid-area: dates; }
.bento-venue { grid-area: venue; }
.bento-cta   { grid-area: cta; }

.bento-kicker {
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--violet-dk, #7C3AED);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
}
.bento-kicker.light { color: #fff; }
.bento-kicker i { color: var(--magenta); }
.bento-kicker.light i { color: var(--v-cyan, #C084FC); }

/* Dates tile */
.bento-datelist { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bento-datelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px dashed rgba(139,92,246,.18); padding-bottom: 10px; }
.bento-datelist li:last-child { border-bottom: 0; }
.bento-datelist span { color: var(--text-light, #64748B); font-size: .9rem; }
.bento-datelist b { font-family: var(--font-mono, monospace); font-size: .9rem; color: var(--text, #1A1424); font-weight: 600; }
.bento-link {
  margin-top: 16px; font-weight: 600; font-size: .88rem; color: var(--violet-dk, #7C3AED);
  display: inline-flex; align-items: center; gap: 6px;
}
.bento-link.light { color: #fff; }
a.bento-tile:hover .bento-link i { transform: translateX(3px); transition: transform .2s ease; }

/* Venue tile (image) */
.bento-venue {
  background-size: cover;
  background-position: center;
  min-height: 220px;
  justify-content: flex-end;
  color: #fff;
  border-color: rgba(192,132,252,.25);
}
/* Venue tile without a photo — dark violet gradient ground */
.bento-venue--plain {
  background:
    radial-gradient(120% 90% at 15% 15%, rgba(139,92,246,.35), transparent 60%),
    linear-gradient(150deg, #1a1236 0%, #0f0b22 100%);
}
.bento-venue-name {
  font-family: var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

/* Stat tiles */
.bento-stat { align-items: flex-start; justify-content: center; background: linear-gradient(160deg, #ffffff 0%, #f6f2fe 100%); }
.bento-s1 { grid-area: stat1; }
.bento-s2 { grid-area: stat2; }
.bento-s3 { grid-area: stat3; }
.bento-statnum {
  font-family: var(--font-heading, sans-serif);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  background: linear-gradient(120deg, var(--violet), var(--magenta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bento-statlabel { color: var(--text-light, #64748B); font-size: .85rem; margin-top: 8px; }

/* CTA tile (wide, dark) */
.bento-cta {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, #1a1236 0%, #0f0b22 100%);
  border-color: rgba(192,132,252,.22);
  color: #fff;
}
.bento-cta-title { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.bento-cta-sub { color: #b8aed4; font-size: .93rem; margin-top: 4px; max-width: 46ch; }
.bento-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* Dark mode */
html[data-theme="dark"] .bento-tile { background: #171025; border-color: rgba(168,139,250,.16); color: var(--v-ink, #ECE9F5); }
html[data-theme="dark"] .bento-stat { background: linear-gradient(160deg, #1b1430 0%, #140f26 100%); }
html[data-theme="dark"] .bento-datelist span { color: #a99fc0; }
html[data-theme="dark"] .bento-datelist b { color: #ece9f5; }
html[data-theme="dark"] .bento-link { color: var(--violet-lt, #A855F7); }

/* ============================================================
   21. CFP SUBMISSION-LIFECYCLE TIMELINE (cfp.php)
   Horizontal 5-step timeline with a gradient connector line;
   stacks vertically on mobile with a left rail.
   ============================================================ */
.cfp-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
}
/* connector line behind the dots (desktop) */
.cfp-timeline::before {
  content: "";
  position: absolute;
  top: 27px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
  opacity: .5;
  z-index: 0;
}
.cfp-step { position: relative; text-align: center; z-index: 1; padding: 0 4px; }
.cfp-dot {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--violet-dk));
  box-shadow: 0 6px 18px -4px rgba(139,92,246,.5), 0 0 0 6px var(--bg, #F7F5FC);
}
.cfp-step:last-child .cfp-dot { background: linear-gradient(135deg, var(--magenta), var(--magenta-600)); box-shadow: 0 6px 18px -4px rgba(236,72,153,.5), 0 0 0 6px var(--bg, #F7F5FC); }
.cfp-step-title { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.cfp-step-date { font-family: var(--font-mono, monospace); font-size: .8rem; color: var(--violet-dk); margin: 3px 0 7px; font-weight: 600; }
.cfp-step-desc { color: var(--text-light, #64748B); font-size: .86rem; line-height: 1.4; max-width: 22ch; margin: 0 auto; }

html[data-theme="dark"] .cfp-dot { box-shadow: 0 6px 18px -4px rgba(139,92,246,.5), 0 0 0 6px #0B0812; }
html[data-theme="dark"] .cfp-step:last-child .cfp-dot { box-shadow: 0 6px 18px -4px rgba(236,72,153,.5), 0 0 0 6px #0B0812; }
html[data-theme="dark"] .cfp-step-date { color: var(--violet-lt, #A855F7); }
html[data-theme="dark"] .cfp-step-desc { color: #a99fc0; }

/* Mobile: vertical rail */
@media (max-width: 760px) {
  .cfp-timeline { grid-template-columns: 1fr; gap: 0; }
  .cfp-timeline::before { top: 27px; bottom: 27px; left: 27px; right: auto; width: 2px; height: auto; }
  .cfp-step { text-align: left; display: grid; grid-template-columns: 54px 1fr; column-gap: 16px; grid-template-areas: "dot title" "dot date" "dot desc"; padding: 0 0 26px; }
  .cfp-dot { grid-area: dot; margin: 0; }
  .cfp-step-title { grid-area: title; align-self: center; }
  .cfp-step-date { grid-area: date; margin: 2px 0; }
  .cfp-step-desc { grid-area: desc; max-width: none; }
}

/* ============================================================
   22. KEYNOTES PAGE — speaker cards, feature tiles, CTA
   ============================================================ */
/* Speaker placeholder cards — hairline-glow, avatar with mic badge */
.keynote-card {
  text-align: center;
  padding: 30px 24px 26px;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.16);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(15,12,30,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.keynote-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 1px rgba(139,92,246,.2), 0 20px 44px -18px rgba(139,92,246,.4);
}
.keynote-avatar {
  position: relative;
  width: 92px; height: 92px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 2.4rem;
  color: var(--violet-lt, #A855F7);
  background: linear-gradient(160deg, rgba(139,92,246,.14), rgba(236,72,153,.10));
  border: 1px dashed rgba(139,92,246,.4);
}
.keynote-avatar-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  border: 3px solid var(--surface, #fff);
  box-shadow: 0 4px 12px rgba(139,92,246,.4);
}
.keynote-name { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.keynote-affil {
  font-family: var(--font-mono, monospace); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-lighter, #94a3b8); margin: 4px 0 14px;
}
.keynote-topic {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600;
  color: var(--violet-dk, #7C3AED);
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(192,132,252,.10));
  border: 1px solid rgba(139,92,246,.24);
  padding: 5px 12px; border-radius: 999px;
}
.keynote-topic i { color: var(--magenta); }

/* Feature tiles */
.keynote-feature {
  padding: 26px 24px;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.14);
  border-radius: 18px;
  border-top: 3px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.keynote-feature:hover {
  transform: translateY(-4px);
  border-top-color: var(--violet);
  box-shadow: 0 16px 38px -16px rgba(139,92,246,.3);
}
.keynote-feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
  color: var(--violet-dk, #7C3AED);
  background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(192,132,252,.14));
  border: 1px solid rgba(139,92,246,.18);
}

/* CTA band */
.keynote-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 30px 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a1236 0%, #0f0b22 100%);
  border: 1px solid rgba(192,132,252,.22);
  color: #fff;
}
.keynote-cta-body h2 { color: #fff; }
.keynote-cta-body p { color: #b8aed4; }
.keynote-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Dark mode */
html[data-theme="dark"] .keynote-card,
html[data-theme="dark"] .keynote-feature { background: #171025; border-color: rgba(168,139,250,.16); }
html[data-theme="dark"] .keynote-avatar-badge { border-color: #171025; }

/* ============================================================
   23. SPONSORSHIP TIERS (cf-sponsors.php)
   Clean vertical tier cards with hairline-glow, tier-tinted
   icons, and a featured "flagship" highlight for Platinum.
   ============================================================ */
.sponsor-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.16);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(15,12,30,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sponsor-tier:hover {
  transform: translateY(-5px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 1px rgba(139,92,246,.2), 0 22px 48px -20px rgba(139,92,246,.4);
}
/* Featured (Platinum) — violet gradient ring + subtle wash */
.sponsor-tier--featured {
  border-color: rgba(139,92,246,.5);
  background: linear-gradient(180deg, #ffffff 0%, #f7f2fe 100%);
  box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 20px 46px -18px rgba(139,92,246,.35);
}
.sponsor-tier-flag {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono, monospace);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(139,92,246,.4);
}
.sponsor-tier-icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 16px;
}
.sponsor-icon-platinum { background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(192,132,252,.16)); color: var(--violet-dk, #7C3AED); border: 1px solid rgba(139,92,246,.25); }
.sponsor-icon-gold     { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(251,191,36,.14)); color: #B45309; border: 1px solid rgba(245,158,11,.28); }
.sponsor-icon-silver   { background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(203,213,225,.16)); color: #475569; border: 1px solid rgba(148,163,184,.3); }
.sponsor-tier-name {
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em;
}
.sponsor-tier-price {
  font-family: var(--font-heading, sans-serif); font-weight: 800; font-size: 1.9rem; line-height: 1; margin: 4px 0 2px;
  background: linear-gradient(120deg, var(--violet), var(--magenta));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.sponsor-tier-sub { color: var(--text-light, #64748B); font-size: .9rem; margin-bottom: 16px; }
.sponsor-tier-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sponsor-tier-list li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--text, #1A1424); line-height: 1.4; }
.sponsor-tier-list li i { color: var(--violet); flex: none; margin-top: 3px; font-size: .95rem; }
.sponsor-tier-list li strong { color: var(--violet-dk, #7C3AED); }

/* Fee row in the comparison table */
.sponsor-fee-row td { border-top: 2px solid rgba(139,92,246,.2) !important; padding-top: 12px; }

/* Dark mode */
html[data-theme="dark"] .sponsor-tier { background: #171025; border-color: rgba(168,139,250,.16); }
html[data-theme="dark"] .sponsor-tier--featured { background: linear-gradient(180deg, #1c1436 0%, #140f28 100%); border-color: rgba(168,139,250,.45); }
html[data-theme="dark"] .sponsor-tier-list li { color: var(--v-ink, #ECE9F5); }
html[data-theme="dark"] .sponsor-icon-gold { color: #FBBF24; }
html[data-theme="dark"] .sponsor-icon-silver { color: #CBD5E1; }

/* ============================================================
   24. CALLS AT A GLANCE (homepage) — call cards
   Hairline-glow cards, one per open call, with an icon,
   description, deadline chip, and a "View" affordance.
   ============================================================ */
.call-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 20px;
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.16);
  border-radius: 18px;
  border-top: 3px solid transparent;
  box-shadow: 0 2px 10px rgba(15,12,30,.05);
  text-decoration: none;
  color: var(--text, #1A1424);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, border-top-color .25s ease;
}
.call-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139,92,246,.4);
  border-top-color: var(--violet);
  box-shadow: 0 0 0 1px rgba(139,92,246,.18), 0 20px 44px -18px rgba(139,92,246,.38);
}
.call-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
  color: var(--violet-dk, #7C3AED);
  background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(192,132,252,.14));
  border: 1px solid rgba(139,92,246,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.call-card:hover .call-card-icon { transform: scale(1.06); box-shadow: 0 0 16px rgba(139,92,246,.3); }
.call-card-title {
  font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.01em; margin: 0 0 8px;
}
.call-card-desc { color: var(--text-light, #64748B); font-size: .92rem; line-height: 1.5; margin: 0 0 18px; }
.call-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px dashed rgba(139,92,246,.18);
}
.call-card-deadline {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, monospace); font-size: .76rem; font-weight: 600;
  color: var(--violet-dk, #7C3AED);
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(192,132,252,.10));
  border: 1px solid rgba(139,92,246,.22);
  padding: 4px 10px; border-radius: 999px;
}
.call-card-deadline--open { color: var(--magenta-600, #DB2777); background: linear-gradient(135deg, rgba(236,72,153,.10), rgba(139,92,246,.08)); border-color: rgba(236,72,153,.24); }
.call-card-deadline i { font-size: .8rem; }
.call-card-link { font-weight: 600; font-size: .86rem; color: var(--violet-dk, #7C3AED); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.call-card:hover .call-card-link i { transform: translateX(3px); transition: transform .2s ease; }

/* Dark mode */
html[data-theme="dark"] .call-card { background: #171025; border-color: rgba(168,139,250,.16); }
html[data-theme="dark"] .call-card-desc { color: #a99fc0; }
html[data-theme="dark"] .call-card-deadline { color: var(--violet-lt, #A855F7); }
html[data-theme="dark"] .call-card-link { color: var(--violet-lt, #A855F7); }

/* ============================================================
   25. WORKSHOPS + SPONSORS placeholders
   ============================================================ */
/* Workshop card format chip (reuses .keynote-card) */
.workshop-format {
  display: inline-flex; align-items: center;
  margin-top: 12px;
  font-family: var(--font-mono, monospace);
  font-size: .74rem; letter-spacing: .03em;
  color: var(--text-lighter, #94a3b8);
}

/* --- Sponsor tier walls (placeholder logo slots) --- */
.sponsor-wall {
  background: var(--surface, #fff);
  border: 1px solid rgba(139,92,246,.14);
  border-radius: 18px;
  padding: 22px 24px 24px;
  box-shadow: 0 2px 10px rgba(15,12,30,.05);
}
.sponsor-wall-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sponsor-wall-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.sponsor-wall-name { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.sponsor-wall-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(139,92,246,.3), transparent); }
.sponsor-wall-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sponsor-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 16px;
  border: 1.5px dashed rgba(139,92,246,.3);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(139,92,246,.04), rgba(236,72,153,.03));
  color: var(--text-lighter, #94a3b8);
  font-size: .82rem;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.sponsor-slot i { font-size: 1.5rem; color: var(--violet-lt, #A855F7); opacity: .7; }
.sponsor-slot:hover { border-color: rgba(139,92,246,.55); transform: translateY(-2px); }

/* Dark mode */
html[data-theme="dark"] .sponsor-wall { background: #171025; border-color: rgba(168,139,250,.16); }
html[data-theme="dark"] .sponsor-slot { border-color: rgba(168,139,250,.3); background: linear-gradient(160deg, rgba(139,92,246,.08), rgba(236,72,153,.05)); }

/* ============================================================
   26. HOMEPAGE HERO TITLE — keep it to exactly 2 lines
   The title has a manual <br> splitting it into two halves;
   at the lg breakpoint (~992-1199px) the first half is just
   wide enough to wrap to a 3rd line, so trim the size a touch
   there. tabular/balance guards the wrap on all widths.
   ============================================================ */
.hero.hero-with-image .hero-title { text-wrap: balance; }
/* First line is "The 2nd International Conference on Intelligent Digital" —
   long enough to wrap on mid-desktop widths, so scale the title down through
   the lg-xl range so both halves stay on one line each (exactly 2 lines). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero.hero-with-image .hero-title.fs-1 { font-size: 1.85rem !important; line-height: 1.18; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero.hero-with-image .hero-title.fs-1 { font-size: 2.15rem !important; line-height: 1.18; }
}