/* ============================================================
   SCS26 — Connected Earth, Sustainable Space
   ============================================================ */

:root {
  /* Color system */
  --bg-0: #030711;
  --bg-1: #060B1A;
  --bg-2: #0A1226;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.3);

  --text-1: #EEF2FA;
  --text-2: #A8B3C7;
  --text-3: #7C879C;

  /* Brand palette — primary navy #000062, secondary red/amber/cyan/maroon/green */
  --navy: #000062;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --cyan-400: #00B8D9;
  --cyan-300: #3DD6F0;
  --gold-300: #FFD08A;
  --gold-400: #FCB746;
  --gold-500: #F5A623;
  --green-400: #7EB942;
  --green-300: #9CD063;
  --red-400: #EF3E3D;
  --red-300: #FF837C;
  --maroon: #812342;

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Rhythm */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --container: 1200px;
  --nav-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-glow-blue: 0 0 40px rgba(59, 130, 246, 0.35);
  --shadow-glow-gold: 0 0 40px rgba(245, 158, 11, 0.3);

  /* Spacing rhythm */
  --space-section: clamp(96px, 12vw, 140px);
  --space-header-gap: 56px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px);
  /* Keeps the notch letterbox dark instead of white while viewport-fit=cover kicks in */
  background: var(--bg-0);
}

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }

::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }

html { scrollbar-color: #1E293B var(--bg-0); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2D3B55; }

/* Film grain — prevents banding on the large dark gradients */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--blue-600); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.text-gradient {
  background: linear-gradient(100deg, var(--blue-300), var(--cyan-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-gold {
  background: linear-gradient(100deg, var(--gold-300), var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Formal accent — white into sky blue, no warm hues */
.text-gradient-cyan {
  background: linear-gradient(100deg, #FFFFFF 15%, var(--cyan-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 12px 24px; border-radius: 999px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  cursor: pointer;
  min-height: 44px;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }

.btn--primary, .btn--gold { position: relative; overflow: hidden; }
.btn--primary::before, .btn--gold::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}
.btn--primary:hover::before, .btn--gold:hover::before { transform: translateX(120%); }

.btn--primary {
  /* blue-600 → blue-700 keeps white text ≥4.5:1 across the whole gradient */
  background: linear-gradient(120deg, var(--blue-600), #1D4ED8);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(147, 197, 253, 0.35);
}
.btn--primary:hover { box-shadow: 0 6px 30px rgba(37, 99, 235, 0.55); transform: translateY(-2px); }

.btn--gold {
  background: linear-gradient(120deg, var(--gold-400), var(--gold-500));
  color: #1A1206;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  border: 1px solid rgba(252, 211, 77, 0.5);
}
.btn--gold:hover { box-shadow: 0 6px 32px rgba(245, 158, 11, 0.5); transform: translateY(-2px); }

.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--blue-400); transform: translateY(-2px); }

.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* Respect the iPhone notch / Dynamic Island — chrome extends under it, content doesn't */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              backdrop-filter 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(3, 7, 17, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
/* While the mobile menu is open, the fixed nav sits above the overlay —
   drop its own chrome so it doesn't read as a dimmed strip */
.nav.is-menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav__inner {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 32px;
}
.nav__brand { display: flex; align-items: center; flex-shrink: 0; }
.nav__brand-img { height: 34px; width: auto; object-fit: contain; }
/* Surface-based brand mark (index.html only, which pairs two real files rather
   than recolouring one). White ink is the default because the nav opens over the
   dark hero; the dark-ink file takes over once the nav gains its light chrome.
   display:none also keeps the inactive file out of the accessibility tree, so
   the shared alt text is announced exactly once. */
.nav__brand-img--on-light { display: none; }
html[data-theme="light"] .has-dark-hero .nav.is-scrolled .nav__brand-img--on-dark,
html[data-theme="light"] .has-dark-hero .nav.is-menu-open .nav__brand-img--on-dark { display: none; }
html[data-theme="light"] .has-dark-hero .nav.is-scrolled .nav__brand-img--on-light,
html[data-theme="light"] .has-dark-hero .nav.is-menu-open .nav__brand-img--on-light { display: block; }
.nav__brand-year { color: var(--blue-400); }

.nav__links { display: flex; gap: 6px; margin-inline: auto; }
.nav__link {
  position: relative;
  font-weight: 500; font-size: 0.94rem; color: var(--text-2);
  padding: 10px 16px; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav__link:hover { color: var(--text-1); background: var(--surface); }
.nav__link.is-active { color: var(--text-1); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
}

.nav__actions { display: flex; align-items: stretch; gap: 12px; flex-shrink: 0; }
.nav__cta { flex-shrink: 0; }

/* Language toggle */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px 18px; line-height: 1.65;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.lang-toggle:hover { background: var(--surface-2); border-color: var(--blue-400); color: #fff; transform: translateY(-1px); }
.lang-toggle:active { transform: scale(0.96); }
.lang-toggle svg { width: 18px; height: 18px; color: var(--blue-300); flex-shrink: 0; }
.lang-toggle__label { line-height: 1; }

.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface);
}
.nav__burger span {
  width: 20px; height: 2px; background: var(--text-1); border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu — full-height sheet, safe-area aware (iPhone notch) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(3, 7, 17, 0.97), rgba(6, 11, 26, 0.98));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: center;
  padding:
    calc(var(--nav-h) + env(safe-area-inset-top, 0px))
    max(28px, env(safe-area-inset-right, 0px))
    calc(28px + env(safe-area-inset-bottom, 0px))
    max(28px, env(safe-area-inset-left, 0px));
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__links {
  display: flex; flex-direction: column; align-items: stretch;
  width: min(420px, 100%); margin-inline: auto;
}
.mobile-menu__links a:not(.btn) {
  font-family: var(--font-display); font-size: clamp(1.15rem, 4.2vw, 1.35rem); font-weight: 600;
  color: var(--text-1); padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.mobile-menu__links a:not(.btn):active { color: var(--blue-300); }
.mobile-menu__links .btn {
  margin-top: 24px; justify-content: center;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
}

/* Staggered entrance */
.mobile-menu__links a { opacity: 0; transform: translateY(14px); }
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.22s; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px) 0 40px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 70% 25%, rgba(20, 30, 160, 0.2), transparent 60%),
    radial-gradient(ellipse 60% 45% at 20% 80%, rgba(0, 184, 217, 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 110%, rgba(37, 99, 235, 0.18), transparent 65%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  align-items: center; gap: 48px;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
  margin-bottom: 26px;
}

.hero__logos {
  width: min(520px, 100%);
  height: auto;
  margin-bottom: 30px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--text-2); max-width: 56ch; margin-bottom: 28px;
}
.hero__sub strong { color: var(--text-1); font-weight: 600; }

.hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-bottom: 32px;
}
.hero__meta-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--text-1);
}
.hero__meta-item svg { width: 20px; height: 20px; color: var(--blue-400); }
.hero__meta-divider { width: 1px; height: 22px; background: var(--border-strong); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

/* Countdown */
.countdown { display: flex; gap: 12px; max-width: 480px; }
.countdown__cell {
  flex: 1; text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 8px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.countdown__num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown__label {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

/* Globe visual — brand PNG blended into the dark backdrop */
.hero__visual { display: grid; place-items: center; }
.globe {
  position: relative;
  width: min(430px, 32vw);
  margin-inline: auto;
  transition: transform 0.4s var(--ease-out);
  will-change: transform;
}
.globe img {
  position: relative;
  width: 100%; height: auto;
  filter: drop-shadow(0 0 60px rgba(0, 60, 200, 0.35));
  animation: globeFloat 7s ease-in-out infinite;
}
.globe__glow {
  position: absolute; inset: -18%;
  background:
    radial-gradient(circle at 50% 46%, rgba(20, 40, 190, 0.38), transparent 58%),
    radial-gradient(circle at 58% 34%, rgba(0, 184, 217, 0.12), transparent 50%);
  filter: blur(10px);
}
@keyframes globeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Organizers strip */
.hero__organizers {
  position: relative; z-index: 2;
  width: min(var(--container), 100% - 48px);
  margin: 48px auto 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.hero__organizers-label {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.hero__organizers-img {
  height: 46px; width: auto; max-width: 100%;
  object-fit: contain;
  opacity: 0.92;
}

.hero__scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--text-3);
  width: 44px; height: 44px; display: grid; place-items: center;
  animation: bob 2.4s ease-in-out infinite;
  transition: color 0.2s;
}
.hero__scroll-hint svg { width: 20px; height: 20px; }
.hero__scroll-hint:hover { color: var(--blue-300); }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ============================================================
   Sections (shared)
   ============================================================ */
.section { position: relative; padding: var(--space-section) 0; }

/* Horizon divider — a thin luminous seam between sections */
.section-divide::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.45), transparent);
}
.section-divide::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: min(480px, 80vw); height: 120px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.1), transparent 70%);
}

.section__eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-400);
  margin-bottom: 14px;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
  margin-bottom: 20px;
  max-width: 22ch;
}
.section__lead { color: var(--text-2); max-width: 60ch; font-size: 1.125rem; line-height: 1.7; }

/* ============================================================
   About
   ============================================================ */
.about { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }

.about__text {
  margin: var(--space-header-gap) 0 64px;
}
/* Stats column is gone — paragraphs run the full page width, single column */
.about__text p { color: var(--text-2); margin-bottom: 18px; max-width: none; }
/* Uniform single colour — no blue/bright accents inside the body copy */
.about__text strong { color: inherit; }
.about__text em { color: inherit; font-style: normal; }

/* Legacy event cards */
.legacy-lead {
  color: var(--text-2);
  max-width: none;
  margin-bottom: 28px;
}
.legacy-lead em { color: inherit; font-style: normal; }

.legacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.legacy-card {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.06) 60%) border-box;
  border-radius: var(--radius-lg);
  padding: 34px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.legacy-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-glow-blue); }

/* Cursor-following spotlight (shared with theme cards) */
@media (hover: hover) {
  .legacy-card::after, .theme-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
      rgba(96, 165, 250, 0.09), transparent 70%);
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in srgb, var(--card-color, var(--blue-400)) 10%, transparent), transparent 70%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
  }
  .legacy-card:hover::after, .theme-card:hover::after { opacity: 1; }
}

.legacy-card__logo { margin-bottom: 22px; }
.legacy-card__logo img {
  height: 52px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
html[dir="rtl"] .legacy-card__logo img { object-position: left center; margin-right: auto; }
.legacy-card h3 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  margin-bottom: 16px;
}

.link-arrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--blue-300);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 0.2s, background-size 0.3s var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover { color: var(--cyan-400); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Themes
   ============================================================ */
.themes {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37, 99, 235, 0.08), transparent 60%),
    var(--bg-0);
}
.themes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: var(--space-header-gap);
}
.theme-card {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, var(--surface-2), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.06) 60%) border-box;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.theme-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--card-accent, var(--blue-500));
  opacity: 0.85;
  transition: box-shadow 0.3s;
}
.theme-card:hover::before {
  box-shadow: 0 0 18px 2px rgba(96, 165, 250, 0.4);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--card-color) 60%, transparent);
}

/* Ghost numerals */
.theme-card__num {
  position: absolute; top: 14px; right: 22px;
  font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1;
  color: rgba(96, 165, 250, 0.16);
  color: color-mix(in srgb, var(--card-color) 14%, transparent);
  pointer-events: none; user-select: none;
}
.theme-card--blue { --card-accent: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); --card-color: var(--cyan-400); }
.theme-card--green { --card-accent: linear-gradient(90deg, var(--green-400), var(--green-300)); --card-color: var(--green-400); }
.theme-card--gold { --card-accent: linear-gradient(90deg, var(--gold-500), var(--gold-300)); --card-color: var(--gold-400); }

.theme-card:hover {
  transform: translateY(-8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(2, 6, 18, 0.6);
}

.theme-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.theme-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--card-color);
  background: rgba(96, 165, 250, 0.12);
  background: color-mix(in srgb, var(--card-color) 12%, transparent);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-color: color-mix(in srgb, var(--card-color) 30%, transparent);
}
.theme-card__icon svg { width: 24px; height: 24px; }
.theme-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }

/* Card image */
.theme-card__media {
  position: relative;
  height: 150px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.theme-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Sustainability before/after — endless wipe:
   2s clean orbit → 1s eased wipe → 2s debris → 1s eased wipe out, repeat.
   The divider line + handle track the wipe edge with the same easing. */
.theme-card__media--compare .compare-after {
  animation: compareWipe 6s linear infinite;
  will-change: clip-path;
}
@keyframes compareWipe {
  0%, 33.33%  { clip-path: inset(0 100% 0 0);
                animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  50%, 83.33% { clip-path: inset(0 0 0 0);
                animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%        { clip-path: inset(0 0 0 100%); }
}

.compare-divider {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; margin-left: -1px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--cyan-300) 20%, var(--cyan-300) 80%, transparent);
  box-shadow: 0 0 14px rgba(61, 214, 240, 0.75);
  opacity: 0;
  animation: compareDivider 6s linear infinite;
  will-change: left, opacity;
}
.compare-divider svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; padding: 7px;
  border-radius: 50%;
  background: rgba(3, 7, 17, 0.8);
  border: 1px solid rgba(61, 214, 240, 0.7);
  color: var(--cyan-300);
  box-shadow: 0 0 12px rgba(61, 214, 240, 0.45);
}
@keyframes compareDivider {
  0%, 33.33%     { left: 0%; opacity: 0;
                   animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  36.5%, 46.5%   { opacity: 1; }
  49.99%         { left: 100%; opacity: 0; }
  50%, 83.33%    { left: 0%; opacity: 0;
                   animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86.5%, 96.5%   { opacity: 1; }
  100%           { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card__media--compare .compare-after { animation: none; opacity: 0; }
  .compare-divider { animation: none; opacity: 0; }
}

.theme-card__intro {
  color: var(--text-3);
  font-size: 0.88rem;
  font-style: italic;
  margin: -10px 0 14px;
}

.theme-card__list { display: grid; gap: 12px; }
.theme-card__list li {
  position: relative; padding-left: 22px;
  color: var(--text-2); font-size: 0.95rem;
}
.theme-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--card-color);
  transform: rotate(45deg); opacity: 0.8;
}
.theme-card__list strong { color: var(--text-1); }

/* Accordion (Connectivity / Sustainability themes) */
.theme-card__acc { display: grid; gap: 8px; }
.theme-acc {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
html:not(.js) .theme-acc[open],
.theme-acc.is-open { border-color: color-mix(in srgb, var(--card-color) 45%, var(--border)); }
.theme-acc > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px 11px 32px;
  color: var(--text-2); font-size: 0.92rem; line-height: 1.4;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.theme-acc > summary::-webkit-details-marker { display: none; }
.theme-acc > summary::before {
  content: ""; position: absolute; left: 14px; top: 1.05em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--card-color);
  transform: rotate(45deg); opacity: 0.85;
}
.theme-acc > summary:hover { color: var(--text-1); }
.theme-acc__chev {
  width: 16px; height: 16px; flex-shrink: 0; margin-left: auto;
  margin-top: 0.15em; color: var(--card-color);
  transition: transform 0.28s var(--ease-out);
}
html:not(.js) .theme-acc[open] .theme-acc__chev,
.theme-acc.is-open .theme-acc__chev { transform: rotate(180deg); }
/* Padding-free wrapper is what animates — collapses cleanly to a true 0 height,
   while the padded text lives inside it (so no residual padding strip on close). */
.theme-acc__panel { overflow: hidden; }
.theme-acc__a {
  margin: 0; padding: 2px 14px 13px 32px;
  color: var(--text-3); font-size: 0.86rem; line-height: 1.5;
}

html[dir="rtl"] .theme-acc > summary { padding: 11px 32px 11px 14px; }
html[dir="rtl"] .theme-acc > summary::before { left: auto; right: 14px; }
html[dir="rtl"] .theme-acc__chev { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .theme-acc__a { padding: 2px 32px 13px 14px; }

/* ============================================================
   IEEE Competition
   ============================================================ */
.ieee { padding: var(--space-section) 0; }
.ieee__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 85% 30%, rgba(245, 158, 11, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(37, 99, 235, 0.09), transparent 60%);
}
.ieee__card {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: center;
  background: linear-gradient(150deg, rgba(15, 23, 42, 0.85), rgba(7, 12, 28, 0.95));
  border: 1px solid rgba(252, 211, 77, 0.22);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2, 6, 18, 0.6);
}
.ieee__card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 90% 20%, rgba(245, 158, 11, 0.1), transparent 55%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(37, 99, 235, 0.12), transparent 55%);
}

.ieee__eyebrow {
  position: relative;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  background: linear-gradient(100deg, var(--gold-300), var(--gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
  margin-bottom: 18px;
}
.ieee__eyebrow sup { font-size: 0.7em; }

.ieee__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700; line-height: 1.18; letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.ieee__text { position: relative; color: var(--text-2); max-width: 58ch; margin-bottom: 26px; }
.ieee__text strong { color: var(--text-1); }

.ieee__actions { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.ieee__soon { color: var(--text-3); font-size: 0.9rem; font-style: italic; }

/* Winners photo — compact beside the text on desktop, full width when stacked */
.ieee__winners {
  position: relative;
  width: min(520px, 100%);
  justify-self: center;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(2, 6, 18, 0.5);
}
.ieee__winners img { width: 100%; height: auto; }
.ieee__winners figcaption {
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.92rem;
  text-align: center;
}
.ieee__winners figcaption sup { font-size: 0.7em; }

/* ============================================================
   Register
   ============================================================ */
.register {
  /* Bottom padding clears the venue photo below it, so the form never sits on
     the tower — it tracks the skyline's own vw-based height. */
  padding: var(--space-section) 0 clamp(300px, 44vw, 820px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(37, 99, 235, 0.16), transparent 65%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  overflow: hidden;
}
/* CST headquarters (the event venue) rising from the bottom edge, blended
   into the dark backdrop.
   Desktop: full image width, bottom-aligned — no zoomed-in crop.
   Mobile (≤768px below): cover crop, which reads better on tall screens. */
.register__skyline {
  position: absolute; inset: auto 0 0 0;
  /* The window has to be ~54% of the image width for the tower to fit between
     its spire and its base; anything shorter clips the roof canopies. */
  height: clamp(420px, 54vw, 1000px);
  background: url("../assets/cst-hq.jpg") no-repeat;
  background-size: 100% auto;
  /* Pushed down in the same unit as the height, so the framing holds at every
     width: the foreground roof crops below the edge, the tower stays whole. */
  background-position: center bottom -6vw;
  pointer-events: none;
}
.register__skyline::after {
  content: ""; position: absolute; inset: 0;
  /* fade the sky into the section + cool the sunset toward the site palette */
  background:
    linear-gradient(180deg, var(--bg-0) 4%, rgba(3, 7, 17, 0.55) 34%, rgba(3, 7, 17, 0.05) 70%, rgba(3, 7, 17, 0.45) 100%),
    linear-gradient(180deg, rgba(6, 11, 26, 0.5), rgba(6, 11, 26, 0.18));
}
.register__stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 30%, rgba(255,255,255,0.7), transparent 100%),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 45% 20%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1.4px 1.4px at 75% 35%, rgba(255,255,255,0.65), transparent 100%),
    radial-gradient(1px 1px at 88% 65%, rgba(255,255,255,0.5), transparent 100%);
}
.register__inner { position: relative; text-align: center; max-width: 640px; margin-inline: auto; }
.register__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.register__date {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--gold-300); margin-bottom: 18px;
}
.register__text { color: var(--text-2); margin-bottom: 36px; }

.register__form { max-width: 640px; margin-inline: auto; text-align: start; }
.register__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.register__group { display: flex; flex-direction: column; gap: 7px; }
.register__group--full { grid-column: 1 / -1; }
.register__group label {
  font-size: 0.85rem; font-weight: 500; color: var(--text-2);
  padding-inline-start: 4px;
}
.register__group input,
.register__group select {
  width: 100%;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(7, 12, 28, 0.85)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.12)) border-box;
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  color: var(--text-1); font: inherit; font-size: 0.98rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.25s;
}
.register__group input::placeholder { color: var(--text-3); }
.register__group input:focus,
.register__group select:focus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.register__group input[aria-invalid="true"],
.register__group select[aria-invalid="true"] {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(7, 12, 28, 0.85)) padding-box,
    linear-gradient(180deg, rgba(248, 113, 113, 0.6), rgba(248, 113, 113, 0.2)) border-box;
}
/* Custom dropdown chevron; native arrow removed */
.register__group select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-inline-end: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(7, 12, 28, 0.85)),
    linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.12));
  background-origin: border-box;
  background-clip: border-box, padding-box, border-box;
  background-repeat: no-repeat;
  background-position: right 16px center, 0 0, 0 0;
  background-size: 16px, 100% 100%, 100% 100%;
}
.register__group select option { background: #0b1120; color: var(--text-1); }
.register__submit { margin-top: 24px; width: 100%; justify-content: center; }
.register__hint { margin-top: 16px; font-size: 0.95rem; font-weight: 600; min-height: 1.4em; color: var(--green-300); }
/* When a message is present, wrap it in a solid chip so it stays legible over the skyline */
.register__hint:not(:empty) {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(3, 7, 17, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(126, 185, 66, 0.55);
  color: var(--green-300);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.register__hint.is-error {
  color: var(--red-300);
  border-color: rgba(239, 62, 61, 0.6);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-1);
}
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 0.75fr 0.95fr 1fr;
  gap: 40px; padding: 64px 0 48px;
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--blue-300); margin-bottom: 16px;
}
.footer__org-img {
  height: 40px; width: auto; max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
  margin-bottom: 18px;
}
.footer__desc { color: var(--text-2); font-size: 0.92rem; max-width: 48ch; }
.footer__desc em { color: var(--text-2); font-style: normal; }

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h3 {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 6px;
}
.footer__col a { color: var(--text-2); font-size: 0.95rem; width: fit-content; transition: color 0.2s; }
.footer__col a:hover { color: var(--blue-300); }
.footer__event-line { color: var(--text-3); font-size: 0.9rem; }

.footer__sponsor {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.footer__sponsor-label {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 12px;
}
.footer__sponsor-img {
  /* Kept below the organizer lock-up above it — the technical sponsor mark
     must never read as the larger of the two. */
  height: 26px; width: auto;
  object-fit: contain;
  opacity: 0.85;
}

.footer__bottom { border-top: 1px solid var(--border); padding: 22px 0; }
.footer__bottom-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--text-3); font-size: 0.85rem;
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .nav__brand-img { height: 34px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .globe { width: min(340px, 70vw); margin-inline: auto; }
  .hero { min-height: auto; padding-bottom: 60px; }
  .themes__grid { grid-template-columns: 1fr 1fr; }
  .theme-card--gold { grid-column: 1 / -1; }
  .ieee__card { grid-template-columns: 1fr; gap: 32px; }
  .ieee__winners { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* The nav row needs 1086px of content at its widest (English: 253 brand +
   606 links + 163 controls + 2×32 gaps), so a 1200px container runs out of
   room at roughly 1134px of viewport. Switching to the burger at 1180px keeps
   ~46px of slack instead of letting the links wrap onto a second line. */
@media (max-width: 1180px) {
  .nav__links, .nav__cta { display: none; }
  .nav__actions { margin-inline-start: auto; }
  .nav__burger { display: flex; }
  /* Brand pinned to the far left on tablet/mobile — in both directions.
     object-position keeps the SVG artwork flush-left inside its flex box
     instead of letting object-fit:contain centre it. */
  .nav__brand-img { object-position: left center; }
  html[dir="rtl"] .nav__inner { direction: ltr; }
  html[dir="rtl"] .nav__brand { justify-content: flex-start; }
}

@media (max-height: 800px) {
  .hero__scroll-hint { display: none; }
}

@media (max-width: 768px) {
  :root { --space-section: clamp(60px, 13vw, 92px); --space-header-gap: 34px; }
  /* The burger itself already appeared at 1180px; below 768px the controls also
     compact so the brand can take the rest of the row. */
  .lang-toggle__label { display: none; }
  .lang-toggle { padding: 8px; width: 44px; height: 44px; justify-content: center; }
  .nav__inner { gap: 10px; }
  /* Brand fills the row — logo takes 90% of the space left by the controls */
  .nav__brand { flex: 1 1 auto; min-width: 0; }
  .nav__brand-img { width: 90%; height: auto; max-height: 40px; }
  /* Arabic (RTL) on mobile: keep the logo on the left, controls on the right */
  html[dir="rtl"] .nav__inner { direction: ltr; }
  html[dir="rtl"] .nav__brand { justify-content: flex-start; }
  .hero { padding-bottom: 40px; }
  .hero__inner { gap: 24px; }
  .hero__eyebrow { font-size: 0.92rem; margin-bottom: 20px; }
  /* Row wraps on narrow screens — stack date/location cleanly, drop the divider */
  .hero__meta { gap: 6px 16px; margin-bottom: 26px; }
  .hero__meta-divider { display: none; }
  .hero__meta-item { width: 100%; }
  .hero__actions { gap: 4px; margin-bottom: 28px; }
  .hero__actions .btn--primary { padding: 14px 24px; font-size: 1rem; }
  /* Secondary action reads as a quiet link, not a second button wall */
  .hero__actions .btn--ghost {
    background: none; border: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--text-2); font-size: 0.95rem;
    text-decoration: underline; text-underline-offset: 5px;
    text-decoration-color: rgba(148, 163, 184, 0.4);
  }
  .hero__actions .btn--ghost:hover { color: var(--text-1); transform: none; }
  /* Countdown collapses into one slim strip instead of four boxes */
  .countdown {
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 4px 9px;
  }
  .countdown__cell {
    background: none; border: none; box-shadow: none;
    border-radius: 0; padding: 0;
    position: relative;
  }
  .countdown__cell + .countdown__cell::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 15%; bottom: 15%;
    width: 1px; background: var(--border);
  }
  /* Globe is decorative — keep it, but don't let it own a full screen */
  .globe { width: min(240px, 58vw); }
  /* Organizers strip is duplicated in the footer — drop it from the hero */
  .hero__organizers { display: none; }
  .legacy-grid { grid-template-columns: 1fr; }
  /* The single-line lead is too wide for phones — let it wrap here */
  .legacy-lead { white-space: normal; }
  /* Event logos run large on phones — bring them down to a badge size */
  .legacy-card__logo img { height: 40px; }

  /* --- Key Themes: sticky card stack ---
     Block flow (not grid) because sticky grid items are trapped inside their
     own grid area. Each card pins below the nav with a growing offset, so
     covered cards keep only their title strip visible. */
  .themes__grid {
    display: block;
    --stack-base: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px);
    --stack-peek: 62px;
  }
  .themes__grid::after { content: ""; display: block; height: 110px; }
  .theme-card {
    position: sticky;
    top: calc(var(--stack-base) + var(--stack-i, 0) * var(--stack-peek));
    margin-bottom: 28px;
    padding-top: 18px;
    /* Opaque backdrop — cards physically cover the one pinned beneath */
    background:
      linear-gradient(170deg, #131D36, #0A1226) padding-box,
      linear-gradient(180deg, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.12) 60%) border-box;
    box-shadow: 0 -16px 36px rgba(2, 6, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .theme-card:last-child { margin-bottom: 0; }
  .theme-card:nth-child(1) { --stack-i: 0; z-index: 1; }
  .theme-card:nth-child(2) { --stack-i: 1; z-index: 2; }
  .theme-card:nth-child(3) { --stack-i: 2; z-index: 3; }
  .theme-card:hover { transform: none; }
  /* Compact head so the pinned peek strip reads as icon + title */
  .theme-card__head { margin-bottom: 18px; }
  .theme-card__icon { width: 38px; height: 38px; border-radius: 12px; }
  .theme-card__icon svg { width: 20px; height: 20px; }
  .theme-card h3 { font-size: 1.12rem; }
  .theme-card__num { top: 12px; font-size: 2.6rem; }

  .countdown { max-width: 100%; }
  .hero__organizers { flex-direction: column; align-items: flex-start; }
  .register__grid { grid-template-columns: 1fr; gap: 14px; }
  /* On phones the photo is sized off the viewport height, so the padding that
     keeps the form clear of it has to follow the same unit. */
  .register { padding-bottom: clamp(300px, 45vh, 490px); }
  .register__skyline {
    height: clamp(280px, 42vh, 460px);
    /* Crops the city sides instead of the width, and stops just short of the
       spire so the tower reads whole on a narrow screen too. */
    background-size: auto 112%;
    background-position: center bottom;
  }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 36px; }
  .hero__scroll-hint { display: none; }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 36px); }
  .hero__inner, .nav__inner, .hero__organizers { width: calc(100% - 36px); }
  .hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); }
  .hero__title { font-size: clamp(2.1rem, 8.8vw, 2.7rem); margin-bottom: 18px; }
  .hero__eyebrow { margin-bottom: 18px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .countdown__num { font-size: 1.55rem; }
  .countdown__label { font-size: 0.6rem; letter-spacing: 0.06em; }
  .theme-card { padding: 18px 22px 26px; }
  .legacy-card { padding: 28px 24px; }
  .ieee__actions { flex-direction: column; align-items: stretch; }
  .ieee__actions .btn { justify-content: center; }
  .ieee__soon { text-align: center; }
}

/* ============================================================
   Arabic / RTL
   ============================================================ */
html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
}
/* Letter-spacing pulls apart connected Arabic glyphs — neutralise it */
html[lang="ar"] * { letter-spacing: normal !important; }
html[lang="ar"] body { line-height: 1.8; }
html[lang="ar"] .hero__title,
html[lang="ar"] .section__title,
html[lang="ar"] .ieee__title,
html[lang="ar"] .register__title { line-height: 1.3; }
/* IBM Plex Sans Arabic tops out at 700 */
html[lang="ar"] .hero__title { font-weight: 700; }

/* Directional mirroring */
html[dir="rtl"] .theme-card__num { right: auto; left: 22px; }
html[dir="rtl"] .theme-card__list li { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .theme-card__list li::before { left: auto; right: 0; }

/* Arrows point toward the reading direction */
html[dir="rtl"] .btn > svg,
html[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover > svg { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* Email / phone / URL stay LTR even inside RTL flow */
html[dir="rtl"] .footer__col a[href^="mailto"],
html[dir="rtl"] .register__group input[type="email"],
html[dir="rtl"] .register__group input[type="tel"] { direction: ltr; text-align: start; }

/* Dropdown chevron moves to the left edge in RTL */
html[dir="rtl"] .register__group select {
  padding-inline-end: 40px;
  background-position: left 16px center, 0 0, 0 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   2026-07 content revision — new elements
   ============================================================ */

/* "For more" inline links to previous editions */
.legacy-lead a {
  color: var(--blue-300);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(147, 197, 253, 0.45);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.legacy-lead a:hover {
  color: var(--cyan-300);
  text-decoration-color: currentColor;
}

/* Key Themes — section header on top, horizontal image carousel below */
.themes__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-inline-start: max(24px, calc((100vw - var(--container)) / 2));
}
.themes__head { padding-inline-end: 24px; }
.themes__head .section__lead { margin-bottom: 0; }

.themes__track-wrap { min-width: 0; }
.themes__track {
  list-style: none;
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 24px 6px 0;
  scrollbar-width: none;
}
html[dir="rtl"] .themes__track { padding: 0 0 6px 24px; }
.themes__track::-webkit-scrollbar { display: none; }
/* Mouse drag-to-scroll — snapping would fight the pointer mid-drag */
@media (hover: hover) and (pointer: fine) {
  .themes__track { cursor: grab; }
  .themes__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .themes__track.is-dragging .theme-slide { user-select: none; }
  .themes__track.is-dragging img { pointer-events: none; }
}

.theme-slide {
  position: relative;
  flex: 0 0 clamp(240px, 23vw, 300px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  scroll-snap-align: start;
  isolation: isolate;
}
.theme-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.theme-slide:hover img { transform: scale(1.06); }
.theme-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 17, 0.05) 35%, rgba(3, 7, 17, 0.45) 62%, rgba(3, 7, 17, 0.88));
}
.theme-slide__title {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 20px 22px;
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 12px rgba(3, 7, 17, 0.6);
}

.themes__nav {
  display: flex; gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
  /* The track bleeds to the viewport edge, but the arrows belong to the page
     grid — line them up with the container's inner edge, same as the title. */
  padding-inline-end: max(24px, calc((100vw - var(--container)) / 2));
}
.themes__arrow {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s var(--ease-out), opacity 0.25s ease;
}
.themes__arrow svg { width: 20px; height: 20px; }
.themes__arrow:hover:not(:disabled) { border-color: var(--blue-400); background: var(--surface-2); transform: translateY(-2px); }
.themes__arrow:disabled { opacity: 0.35; cursor: default; }
html[dir="rtl"] .themes__arrow svg { transform: scaleX(-1); }

@media (max-width: 900px) {
  .themes__layout {
    grid-template-columns: 1fr;
    padding-inline: 24px;
    gap: 28px;
  }
  .themes__head { padding-inline-end: 0; }
  .themes__track {
    margin-inline: -24px;
    padding: 0 24px 6px;
    /* Snap points must respect the 24px gutter, or the first card sticks to
       the viewport edge instead of lining up with the section title. */
    scroll-padding-inline: 24px;
  }
  html[dir="rtl"] .themes__track { padding: 0 24px 6px; }
  .theme-slide { flex-basis: min(72vw, 300px); }
  .themes__nav { padding-inline-end: 0; }
}

/* Phones: the deck rests with the first card flush to the page gutter, and every
   card after it snaps to the centre of the screen with its neighbours peeking in
   from both sides. */
@media (max-width: 640px) {
  .themes__track {
    --slide-w: 68vw;
    --slide-center-gutter: calc((100vw - var(--slide-w)) / 2);
    gap: 14px;
    margin-inline: -24px;
    /* End padding lets the final card reach the centre too */
    padding-block: 0 6px;
    padding-inline: 24px var(--slide-center-gutter);
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
  }
  .theme-slide {
    flex-basis: var(--slide-w);
    scroll-snap-align: center;
  }
  /* The first card's centred snap position lands before scroll zero, so the deck
     rests with it flush to the 24px gutter — aligned with the section title —
     and only starts centring from the second card on. */
  .themes__nav { justify-content: center; }
}

/* IEEE — competition aims list */
.ieee__aims-intro {
  position: relative;
  color: var(--text-1); font-weight: 600;
  margin-bottom: 14px;
}
.ieee__aims {
  position: relative;
  list-style: none;
  display: grid; gap: 12px;
  padding: 0; margin: 0 0 28px;
  max-width: 58ch;
}
.ieee__aims li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--text-2);
  line-height: 1.6;
}
.ieee__aims li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0.52em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

/* IEEE — winners' announcement note */
.ieee__note {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 22px;
  max-width: 58ch;
  color: var(--gold-300);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ieee__note svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding:
    16px
    max(16px, env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.cookie.is-visible { display: block; }
.cookie__inner {
  pointer-events: auto;
  width: min(var(--container), 100% - 8px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(10, 18, 38, 0.96), rgba(6, 11, 26, 0.97)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.1)) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: cookie-rise 0.5s var(--ease-out) both;
}
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.cookie__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue-300);
}
.cookie__icon svg { width: 22px; height: 22px; }
.cookie__text {
  flex: 1 1 340px;
  min-width: 260px;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.6;
}
.cookie__text strong {
  display: block;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 3px;
}
.cookie__text a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 2px; }
.cookie__text a:hover { color: var(--blue-400); }
.cookie__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn--sm { padding: 10px 20px; font-size: 0.9rem; min-height: 42px; }
.btn--soft {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-1);
}
.btn--soft:hover { background: var(--surface); border-color: var(--blue-400); color: #fff; transform: translateY(-1px); }

@media (max-width: 640px) {
  .cookie__inner { padding: 18px; }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Sub-page hero (Privacy / Terms / Contact)
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 68px) 0 44px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% -10%, rgba(37, 99, 235, 0.18), transparent 60%);
}
.page-hero__inner { position: relative; }
.page-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-400);
  margin-bottom: 12px;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.page-hero__meta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-3); font-size: 0.9rem;
}
.page-hero__meta svg { width: 16px; height: 16px; }

/* ============================================================
   Legal document layout (Privacy / Terms)
   ============================================================ */
.legal { padding: clamp(48px, 8vw, 80px) 0 var(--space-section); }
.legal__body { max-width: 78ch; margin-inline: auto; }
.legal__intro {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.75;
  padding-bottom: 26px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.legal__section { margin-top: 40px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__section > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 14px;
}
.legal__section > h2 .legal__num {
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
  margin-inline-end: 10px;
}
.legal__section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; color: var(--text-1);
  margin: 22px 0 8px;
}
.legal__section p { color: var(--text-2); margin-bottom: 14px; line-height: 1.75; }
.legal__section a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 2px; }
.legal__section a:hover { color: var(--blue-400); }
.legal__section ul { display: grid; gap: 10px; margin: 0 0 16px; }
.legal__section li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--text-2);
  line-height: 1.7;
}
.legal__section li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
}
.legal__section li strong { color: var(--text-1); }
.legal__callout {
  margin: 18px 0;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--blue-500);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.95rem;
}
.legal__callout strong { color: var(--text-1); }

/* ============================================================
   Contact page
   ============================================================ */
.contact { padding: clamp(48px, 8vw, 80px) 0 var(--space-section); }
.contact__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.contact__aside-lead { color: var(--text-2); font-size: 1.02rem; line-height: 1.75; margin-bottom: 28px; }
.contact__cards { display: grid; gap: 14px; }
.contact-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.02));
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.contact-card__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue-300);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__label {
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 4px;
}
.contact-card__value { color: var(--text-1); font-size: 1rem; line-height: 1.5; }
.contact-card a.contact-card__value:hover { color: var(--blue-300); }

.contact__form-wrap {
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.06) 60%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.contact__form-title {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; margin-bottom: 6px;
}
.contact__form-sub { color: var(--text-2); font-size: 0.95rem; margin-bottom: 26px; }
.contact__form .register__grid { grid-template-columns: 1fr 1fr; }
.contact__form textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(7, 12, 28, 0.85)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0.12)) border-box;
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  color: var(--text-1); font: inherit; font-size: 0.98rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.25s;
}
.contact__form textarea::placeholder { color: var(--text-3); }
.contact__form textarea:focus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 4px rgba(59, 130, 246, 0.2);
}
.contact__form textarea[aria-invalid="true"] {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(7, 12, 28, 0.85)) padding-box,
    linear-gradient(180deg, rgba(248, 113, 113, 0.6), rgba(248, 113, 113, 0.2)) border-box;
}

/* Footer legal row */
.footer__legal { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.footer__legal a { color: var(--text-3); font-size: 0.85rem; transition: color 0.2s; }
.footer__legal a:hover { color: var(--blue-300); }
.footer__legal .sep { color: var(--border-strong); }

@media (max-width: 860px) {
  .contact__layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .contact__form .register__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Plan Your Trip pages (Participation) — 2026-07
   ============================================================ */

/* ---------- Nav dropdown ---------- */
.nav__drop { position: relative; }
.nav__drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
}
.nav__drop-btn > svg {
  width: 13px; height: 13px; flex-shrink: 0;
  transition: transform 0.25s var(--ease-out);
}
.nav__drop:hover .nav__drop-btn > svg,
.nav__drop:focus-within .nav__drop-btn > svg,
.nav__drop.is-open .nav__drop-btn > svg { transform: rotate(180deg); }

.nav__drop-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 0;
  min-width: 250px; padding: 10px; z-index: 110;
  display: grid; gap: 2px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(6, 11, 26, 0.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
/* Invisible bridge keeps hover alive across the gap under the trigger */
.nav__drop-menu::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu,
.nav__drop.is-open .nav__drop-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav__drop-menu a {
  padding: 10px 14px; border-radius: 10px;
  font-size: 0.92rem; font-weight: 500; color: var(--text-2);
  transition: background 0.2s, color 0.2s;
}
.nav__drop-menu a:hover { background: var(--surface-2); color: var(--text-1); }
.nav__drop-menu a.is-active { color: var(--text-1); background: var(--surface); }

/* ---------- Mobile menu: trip group ---------- */
.mobile-menu__group-label {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-400);
  padding: 16px 4px 4px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.mobile-menu__links .mobile-menu__group a:not(.btn) {
  font-size: 0.98rem; font-weight: 500; font-family: var(--font-body);
  color: var(--text-2); padding: 11px 4px;
}
.mobile-menu__links .mobile-menu__group a:not(.btn):active { color: var(--blue-300); }

/* ---------- Shared trip layout ---------- */
.trip { padding: clamp(48px, 8vw, 80px) 0 var(--space-section); }
/* Consecutive trip sections: keep the heading clear of the section-divide seam */
.trip + .trip { padding-top: clamp(48px, 7vw, 72px); }

.trip__head { margin-bottom: 36px; }
.trip__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.trip__lead { color: var(--text-2); max-width: 75ch; font-size: 1.05rem; line-height: 1.75; }
.trip__lead a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 3px; }
.trip__lead a:hover { color: var(--cyan-300); }

/* Intro split — text beside a large rounded image */
.trip-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 56px); align-items: center;
}
.trip-split__img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.trip-split__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* ---------- Card grids ---------- */
.trip-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.trip-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.trip-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(148, 163, 184, 0.06) 60%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.trip-card:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-glow-blue); }

.trip-card__media { position: relative; overflow: hidden; }
.trip-card__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.trip-card:hover .trip-card__media img { transform: scale(1.05); }

.trip-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.trip-card__title {
  font-family: var(--font-display);
  font-size: 1.14rem; font-weight: 600; line-height: 1.3;
  margin-bottom: 8px;
}
.trip-card__title a { transition: color 0.2s; }
.trip-card__title a:hover { color: var(--blue-300); }
.trip-card__desc { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; flex: 1; }

.trip-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--blue-300);
  transition: color 0.2s;
}
.trip-card__link svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-out); }
.trip-card__link:hover { color: var(--cyan-300); }
.trip-card__link:hover svg { transform: translateX(4px); }
html[dir="rtl"] .trip-card__link svg { transform: scaleX(-1); }
html[dir="rtl"] .trip-card__link:hover svg { transform: scaleX(-1) translateX(4px); }

/* Distance pill over the card image */
.place-badge {
  position: absolute; top: 14px; inset-inline-start: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: #fff;
  background: rgba(3, 7, 17, 0.66);
  border: 1px solid rgba(148, 163, 184, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Icon feature list (visa cards, hotel meta) */
.trip-card__list { display: grid; gap: 9px; margin-top: 14px; }
.trip-card__list li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-2); font-size: 0.92rem; line-height: 1.55;
}
.trip-card__list li svg {
  width: 16px; height: 16px; flex-shrink: 0;
  margin-top: 4px; color: var(--blue-300);
}
.trip-card__list a { transition: color 0.2s; }
.trip-card__list a:hover { color: var(--blue-300); }

/* Group headings (5 / 4 / 3 star hotels) */
.trip-group {
  display: flex; align-items: center; gap: 14px;
  margin: 56px 0 24px;
}
.trip-group:first-of-type { margin-top: 0; }
.trip-group__title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; white-space: nowrap;
}
.trip-group__stars { display: inline-flex; gap: 3px; color: var(--gold-400); }
.trip-group__stars svg { width: 15px; height: 15px; }
.trip-group::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
html[dir="rtl"] .trip-group::after { background: linear-gradient(-90deg, var(--border-strong), transparent); }

/* ---------- Practical info tiles ---------- */
.info-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.info-tile {
  padding: 24px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2), rgba(255, 255, 255, 0.02));
  transition: transform 0.25s var(--ease-out), border-color 0.25s;
}
.info-tile:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.info-tile__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--blue-300);
  margin-bottom: 16px;
}
.info-tile__icon svg { width: 22px; height: 22px; }
.info-tile h3 {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; margin-bottom: 6px;
}
.info-tile p { color: var(--text-2); font-size: 0.92rem; line-height: 1.65; }

/* ---------- Logo tiles (airlines / ride-hailing apps) ---------- */
.logo-tile {
  display: grid; place-items: center;
  padding: 22px 26px; min-height: 128px;
  border-radius: var(--radius-md);
  background: #F2F5FB;
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.logo-tile img { height: 68px; width: auto; max-width: 190px; object-fit: contain; }
a.logo-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-blue); }

.apps-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.airline-card__logo {
  display: grid; place-items: center;
  min-height: 172px; padding: 30px 24px;
  background: linear-gradient(160deg, #FFFFFF, #E9EEF7);
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.airline-card__logo img {
  height: 92px; width: auto; max-width: 86%; object-fit: contain;
  transition: transform 0.35s var(--ease-out);
}
.airline-card:hover .airline-card__logo img { transform: scale(1.07); }

/* ---------- Decorative plane divider ---------- */
.plane-banner {
  position: relative;
  margin: clamp(40px, 7vw, 72px) 0 0;
  padding-block: 52px 86px;
  display: flex; justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.plane-banner img.plane {
  width: min(560px, 78%); height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
  will-change: transform;
}
.plane-banner img.cloud {
  position: absolute; width: 200px; opacity: 0.16;
  will-change: transform;
}
.plane-banner img.cloud--1 { left: 6%; top: 8%; }
.plane-banner img.cloud--2 { right: 5%; bottom: 4%; width: 260px; }
/* Front cloud — layered above the plane, crossing it as you scroll */
.plane-banner img.cloud--3 { left: 42%; top: 34%; width: 300px; opacity: 0.28; z-index: 2; }
@media (max-width: 640px) {
  .plane-banner img.cloud { width: 130px; }
  .plane-banner img.cloud--2 { width: 160px; }
  .plane-banner img.cloud--3 { width: 190px; }
}

/* ---------- Callout (visa help / delegate transfer) ---------- */
.trip-callout {
  margin-top: 48px;
  padding: 26px 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--blue-500);
  background: var(--surface);
}
.trip-callout h2, .trip-callout h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600; margin-bottom: 8px;
}
.trip-callout p { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; }
.trip-callout p + p { margin-top: 6px; }
.trip-callout a { color: var(--blue-300); text-decoration: underline; text-underline-offset: 3px; }
.trip-callout a:hover { color: var(--cyan-300); }
.trip-callout ul { display: grid; gap: 8px; margin-top: 12px; }
.trip-callout li {
  position: relative; padding-inline-start: 20px;
  color: var(--text-2); font-size: 0.95rem;
}
.trip-callout li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-400), var(--cyan-400));
}

/* Emails & phones stay LTR inside RTL flow */
html[dir="rtl"] .trip-card__list a[href^="mailto"],
html[dir="rtl"] .trip-card__list a[href^="tel"],
html[dir="rtl"] .trip-callout a[href^="mailto"] { direction: ltr; unicode-bidi: embed; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .trip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-split { grid-template-columns: 1fr; }
  .trip-split__img { order: -1; }
}
@media (max-width: 640px) {
  .trip-cards, .trip-cards--2 { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .apps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-menu__group { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Theme toggle (control)
   ============================================================ */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--blue-400); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle__icon {
  grid-area: 1 / 1;
  width: 19px; height: 19px;
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}
.theme-toggle__icon--sun { color: var(--gold-400); opacity: 1; transform: none; }
.theme-toggle__icon--moon { color: var(--blue-400); opacity: 0; transform: rotate(-60deg) scale(0.6); }
html[data-theme="light"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
html[data-theme="light"] .theme-toggle__icon--moon { opacity: 1; transform: none; }

/* ============================================================
   Light theme — html[data-theme="light"]
   Dark is the default; every rule below re-tunes a value that was
   authored for the dark canvas.
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --bg-0: #FFFFFF;
  --bg-1: #F4F7FC;
  --bg-2: #E9EFF8;
  --surface: rgba(12, 26, 56, 0.035);
  --surface-2: rgba(12, 26, 56, 0.06);
  --border: rgba(12, 26, 56, 0.14);
  --border-strong: rgba(12, 26, 56, 0.26);

  --text-1: #0A1428;
  --text-2: #42516B;
  --text-3: #64748B;

  /* Accents pulled down so they clear 4.5:1 on a white canvas */
  --blue-300: #1D4ED8;
  --blue-400: #2563EB;
  --cyan-400: #0E7490;
  --cyan-300: #0E7490;
  --green-400: #4B8C22;
  --green-300: #2F6B12;
  --red-400: #D32F2F;
  --red-300: #B3261E;

  --shadow-glow-blue: 0 14px 34px rgba(37, 99, 235, 0.18);
  --shadow-glow-gold: 0 14px 34px rgba(245, 158, 11, 0.22);

  background: var(--bg-0);
  scrollbar-color: #C4CFDF #FFFFFF;
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: #FFFFFF; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #C4CFDF; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #A9B7CB; }
html[data-theme="light"] ::selection { background: rgba(37, 99, 235, 0.22); color: var(--text-1); }
/* The grain overlay only exists to hide banding on the dark gradients */
html[data-theme="light"] body::after { display: none; }

/* ---------- Buttons ---------- */
html[data-theme="light"] .btn--primary { border-color: rgba(29, 78, 216, 0.5); }
html[data-theme="light"] .btn--ghost { background: #FFFFFF; border-color: var(--border-strong); }
html[data-theme="light"] .btn--ghost:hover { background: #F1F5FC; }
html[data-theme="light"] .btn--soft { background: #FFFFFF; }
html[data-theme="light"] .btn--soft:hover { background: #F1F5FC; color: var(--text-1); }
html[data-theme="light"] .lang-toggle { background: #FFFFFF; }
html[data-theme="light"] .lang-toggle:hover { background: #F1F5FC; color: var(--text-1); }
html[data-theme="light"] .theme-toggle { background: #FFFFFF; }
html[data-theme="light"] .theme-toggle:hover { background: #F1F5FC; }

/* ---------- Navigation ---------- */
html[data-theme="light"] .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 24px rgba(12, 26, 56, 0.07);
}
html[data-theme="light"] .nav__burger { background: #FFFFFF; }
html[data-theme="light"] .mobile-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.98));
}
html[data-theme="light"] .nav__drop-menu {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 44px rgba(12, 26, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Unscrolled over the dark hero the nav runs on the dark palette, so its
   dropdown has to stay dark glass — the light panel above would put near-white
   links on a near-white surface. */
html[data-theme="light"] .has-dark-hero .nav:not(.is-scrolled):not(.is-menu-open) .nav__drop-menu {
  background: rgba(6, 11, 26, 0.94);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- Hero — deliberately stays dark in light mode ----------
   globe.png is a night-side Earth and the starfield only reads against a night
   sky, so the hero keeps the dark canvas in both themes. Re-declaring the dark
   palette on .hero is enough: every descendant — and .hero's own background —
   already resolves through these same var() names, so no per-element override
   is needed and nothing drifts when the palette is retuned. */
html[data-theme="light"] .hero {
  color-scheme: dark;

  --bg-0: #030711;
  --bg-1: #060B1A;
  --bg-2: #0A1226;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.3);

  --text-1: #EEF2FA;
  --text-2: #A8B3C7;
  --text-3: #7C879C;

  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --cyan-400: #00B8D9;
  --cyan-300: #3DD6F0;
  --green-400: #7EB942;
  --green-300: #9CD063;
  --red-400: #EF3E3D;
  --red-300: #FF837C;

  --shadow-glow-blue: 0 0 40px rgba(59, 130, 246, 0.35);
  --shadow-glow-gold: 0 0 40px rgba(245, 158, 11, 0.3);

  /* Inheritance passes the resolved colour, not the variable, so body's light
     ink would leak in unless the hero restates it against its own palette. */
  color: var(--text-1);
}
/* These skins hard-code white for the light canvas; inside the hero they have
   to fall back to the var-driven surfaces again. */
html[data-theme="light"] .hero .btn--ghost { background: var(--surface); }
html[data-theme="light"] .hero .btn--ghost:hover { background: var(--surface-2); }
html[data-theme="light"] .hero .btn--soft { background: var(--surface-2); }
html[data-theme="light"] .hero .btn--soft:hover { background: var(--surface); color: #fff; }
/* The logo files are swapped to their dark-ink twins by script.js in light
   mode; over the dark hero they have to read white again. */
/* Nav chrome is transparent until scrolled, so on the pages that keep a dark
   hero it sits on that hero and needs the dark-theme palette too. Sub-pages
   have a light hero, so they must keep the light nav. */
html[data-theme="light"] .has-dark-hero .nav:not(.is-scrolled):not(.is-menu-open) {
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.3);
  --text-1: #EEF2FA;
  --text-2: #A8B3C7;
  --text-3: #7C879C;
  --blue-400: #60A5FA;
  --cyan-400: #00B8D9;
}
html[data-theme="light"] .has-dark-hero .nav:not(.is-scrolled):not(.is-menu-open) .lang-toggle,
html[data-theme="light"] .has-dark-hero .nav:not(.is-scrolled):not(.is-menu-open) .theme-toggle,
html[data-theme="light"] .has-dark-hero .nav:not(.is-scrolled):not(.is-menu-open) .nav__burger {
  background: var(--surface);
}
html[data-theme="light"] .text-gradient-cyan {
  background: linear-gradient(100deg, #12306E 15%, var(--cyan-400));
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .text-gradient-gold {
  background: linear-gradient(100deg, #B45309, #92400E);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- Sections & cards ---------- */
html[data-theme="light"] .section-divide::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.35), transparent);
}
html[data-theme="light"] .section-divide::after {
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.07), transparent 70%);
}
html[data-theme="light"] .about { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
html[data-theme="light"] .themes {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(37, 99, 235, 0.07), transparent 60%),
    var(--bg-0);
}
html[data-theme="light"] .legacy-card,
html[data-theme="light"] .theme-card,
html[data-theme="light"] .trip-card,
html[data-theme="light"] .contact__form-wrap {
  background:
    linear-gradient(165deg, #FFFFFF, #F5F8FD) padding-box,
    linear-gradient(180deg, rgba(12, 26, 56, 0.16), rgba(12, 26, 56, 0.07) 60%) border-box;
  box-shadow: 0 2px 12px rgba(12, 26, 56, 0.05);
}
html[data-theme="light"] .legacy-card:hover,
html[data-theme="light"] .trip-card:hover { box-shadow: var(--shadow-glow-blue); }
html[data-theme="light"] .theme-card:hover { box-shadow: 0 18px 40px rgba(12, 26, 56, 0.14); }
html[data-theme="light"] .contact-card,
html[data-theme="light"] .info-tile {
  background: linear-gradient(165deg, #FFFFFF, #F5F8FD);
  box-shadow: 0 2px 12px rgba(12, 26, 56, 0.05);
}
html[data-theme="light"] .theme-card__media { background: #EDF1F8; }
html[data-theme="light"] .theme-acc { background: #FFFFFF; }
html[data-theme="light"] .trip-split__img { box-shadow: 0 20px 46px rgba(12, 26, 56, 0.14); }
html[data-theme="light"] .logo-tile { background: #FFFFFF; border-color: var(--border); }
html[data-theme="light"] .airline-card__logo { background: linear-gradient(160deg, #FFFFFF, #F2F6FC); }
/* The plane and the clouds are white artwork, so on a white page they have
   nothing to sit against — the banner carries its own daylight sky instead.
   The fade sits on the banner rather than on the sky alone, so the clouds
   dissolve into the page as well instead of ending on the clipped edge — the
   banner's vertical padding keeps that fade clear of the plane. */
html[data-theme="light"] .plane-banner {
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent),
    linear-gradient(180deg, transparent, #000 11%, #000 80%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent),
    linear-gradient(180deg, transparent, #000 11%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html[data-theme="light"] .plane-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #A9D0F2 0%, #C6E1F9 48%, #E4F1FD 100%);
  z-index: 0;
}
/* Only the plane needs lifting — the clouds are already positioned, and making
   them relative would drop them back into the flex flow. */
html[data-theme="light"] .plane-banner img.plane { position: relative; z-index: 1; filter: drop-shadow(0 26px 42px rgba(12, 26, 56, 0.28)); }
/* Against the sky the clouds can stay white — they only needed dimming on white */
html[data-theme="light"] .plane-banner img.cloud { opacity: 0.85; filter: none; }
html[data-theme="light"] .plane-banner img.cloud--3 { opacity: 0.75; z-index: 2; }
html[data-theme="light"] .trip-callout,
html[data-theme="light"] .legal__callout { background: #F4F7FC; }

/* ---------- IEEE competition ---------- */
html[data-theme="light"] .ieee__bg {
  background:
    radial-gradient(ellipse 60% 60% at 85% 30%, rgba(245, 166, 35, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(37, 99, 235, 0.08), transparent 60%);
}
html[data-theme="light"] .ieee__card {
  background: linear-gradient(150deg, #FFFFFF, #F3F7FD);
  border-color: rgba(180, 83, 9, 0.28);
  box-shadow: 0 24px 60px rgba(12, 26, 56, 0.10);
}
html[data-theme="light"] .ieee__card::before {
  background:
    radial-gradient(ellipse 50% 70% at 90% 20%, rgba(245, 166, 35, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(37, 99, 235, 0.10), transparent 55%);
}
html[data-theme="light"] .ieee__eyebrow {
  background: linear-gradient(100deg, #B45309, #92400E);
  -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .ieee__note { color: #A65A05; }
html[data-theme="light"] .ieee__aims li::before { background: linear-gradient(90deg, #B45309, #D97706); }
html[data-theme="light"] .ieee__winners {
  box-shadow: 0 18px 46px rgba(12, 26, 56, 0.14);
}
html[data-theme="light"] .ieee__winners figcaption { background: #F4F7FC; }
html[data-theme="light"] .trip-group__stars { color: #D97706; }

/* ---------- Register ---------- */
html[data-theme="light"] .register {
  /* Flat wash, no bottom glow: the skyline overlay is opaque where it starts,
     and any tint underneath would show up as a seam along its top edge. */
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 42%);
}
/* Daytime skyline: fade the photo into the page instead of into the night */
html[data-theme="light"] .register__skyline::after {
  background:
    linear-gradient(180deg, var(--bg-1) 4%, rgba(244, 247, 252, 0.7) 34%, rgba(244, 247, 252, 0.12) 66%, rgba(244, 247, 252, 0.55) 88%, var(--bg-1) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
}
html[data-theme="light"] .register__stars { display: none; }
html[data-theme="light"] .register__date { color: #A65A05; }
html[data-theme="light"] .register__group input,
html[data-theme="light"] .contact__form textarea {
  background:
    linear-gradient(180deg, #FFFFFF, #FBFCFE) padding-box,
    linear-gradient(180deg, rgba(12, 26, 56, 0.24), rgba(12, 26, 56, 0.12)) border-box;
  box-shadow: inset 0 1px 2px rgba(12, 26, 56, 0.04);
}
html[data-theme="light"] .register__group select { box-shadow: inset 0 1px 2px rgba(12, 26, 56, 0.04); }
html[data-theme="light"] .register__group input:focus,
html[data-theme="light"] .register__group select:focus,
html[data-theme="light"] .contact__form textarea:focus {
  box-shadow: inset 0 1px 2px rgba(12, 26, 56, 0.04), 0 0 0 4px rgba(37, 99, 235, 0.18);
}
html[data-theme="light"] .register__group input[aria-invalid="true"],
html[data-theme="light"] .contact__form textarea[aria-invalid="true"] {
  background:
    linear-gradient(180deg, #FFFFFF, #FEF6F6) padding-box,
    linear-gradient(180deg, rgba(211, 47, 47, 0.7), rgba(211, 47, 47, 0.3)) border-box;
}
html[data-theme="light"] .register__group select[aria-invalid="true"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2342516b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #FFFFFF, #FEF6F6),
    linear-gradient(180deg, rgba(211, 47, 47, 0.7), rgba(211, 47, 47, 0.3));
}
/* Keeps the layer order of the base rule: chevron, face, border */
html[data-theme="light"] .register__group select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2342516b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #FFFFFF, #FBFCFE),
    linear-gradient(180deg, rgba(12, 26, 56, 0.24), rgba(12, 26, 56, 0.12));
}
html[data-theme="light"] .register__group select option { background: #FFFFFF; color: var(--text-1); }
html[data-theme="light"] .register__hint:not(:empty) {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(47, 107, 18, 0.5);
  box-shadow: 0 6px 22px rgba(12, 26, 56, 0.12);
}
html[data-theme="light"] .register__hint.is-error { border-color: rgba(179, 38, 30, 0.55); }

/* ---------- Sub-page hero / legal / footer / cookie ---------- */
html[data-theme="light"] .page-hero { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
html[data-theme="light"] .page-hero::before {
  background: radial-gradient(ellipse 60% 80% at 50% -10%, rgba(37, 99, 235, 0.12), transparent 60%);
}
html[data-theme="light"] .footer { background: var(--bg-1); }
html[data-theme="light"] .footer__org-img { opacity: 1; }
html[data-theme="light"] .footer__sponsor-img { opacity: 1; }
html[data-theme="light"] .cookie__inner {
  background:
    linear-gradient(160deg, #FFFFFF, #F5F8FD) padding-box,
    linear-gradient(180deg, rgba(12, 26, 56, 0.18), rgba(12, 26, 56, 0.08)) border-box;
  box-shadow: 0 18px 44px rgba(12, 26, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .cookie__icon { background: #F1F5FC; }

/* ---------- Mobile: opaque sticky theme cards ---------- */
@media (max-width: 768px) {
  html[data-theme="light"] .theme-card {
    background:
      linear-gradient(170deg, #FFFFFF, #EEF3FA) padding-box,
      linear-gradient(180deg, rgba(12, 26, 56, 0.18), rgba(12, 26, 56, 0.08) 60%) border-box;
    box-shadow: 0 -12px 30px rgba(12, 26, 56, 0.12);
  }
}