/* CSS Reset */
body { background: #03030a; color: var(--off-white); font-family: 'Clash Display', 'Space Grotesk', sans-serif; overflow-x: hidden; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  background: #000000;
  color:#fff;
  overflow-x:hidden;
  cursor:none;
}

/* CUSTOM CURSOR */
#cur-dot{
  position:fixed; top:0; left:0; width:6px;height:6px;border-radius:50%;
  background:var(--teal);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:transform .1s;
}
#cur-ring{
  position:fixed;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(183,148,244,.4);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);transition:all .25s cubic-bezier(.16,1,.3,1);
}

/* HERO — full viewport */
#hero{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height: 700px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

/* BACKGROUND */
#bg-img {
  position: absolute;
  inset: -5%; /* slightly larger for parallax */
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  z-index: 2; /* beneath starfield */
  pointer-events: none;
  opacity: 0.8;
  /* We will animate this via GSAP */
}
#bg-overlay{
  position:absolute;inset:0;z-index:1;
  background: #000000;
}

/* LOGO top-left */
#logo-wrap{
  position:absolute;top:28px;left:40px;z-index:10;
  display:flex;align-items:center;
  opacity:0;animation:fadeUp .7s .2s ease forwards;
}
#logo-svg-wrap{
  /* no background, no border, no box */
  display:flex;align-items:center;justify-content:center;
}
#logo-svg-wrap svg{width:72px;height:72px;}
#logo-name{
  display:none; /* removed */
}

/* NAV top-right */
#hamburger-btn, #mobile-menu-overlay { display: none; }
#nav-links{
  position:absolute;top:40px;right:44px;z-index:10;
  display:flex;align-items:center;gap:36px;
  opacity:0;animation:fadeUp .7s .3s ease forwards;
}
#nav-links a{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(192,192,192,.55);text-decoration:none;
  transition:color .2s;
}
#nav-links a:hover{color:rgba(183,148,244,.9);}
#nav-register{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 24px;border:1px solid rgba(183,148,244,.35);
  border-radius:2px;color:rgba(183,148,244,.85);text-decoration:none;
  transition:all .25s;background:rgba(74,32,112,.15);
  backdrop-filter:blur(8px);
}
#nav-register:hover{background:rgba(183,148,244,.18);border-color:rgba(183,148,244,.7);}

.nav-countdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-family: 'Space Mono', ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 20px;
  border: 1px solid rgba(183, 148, 244, 0.2);
  border-radius: 4px;
  background: rgba(10, 10, 15, 0.4);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s;
}
.nav-countdown-btn:hover {
  border-color: rgba(183, 148, 244, 0.6);
  background: rgba(183, 148, 244, 0.1);
  color: #fff;
}
.nav-countdown-btn .pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--copper);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--copper);
  animation: navPulse 1s infinite alternate;
}
.nav-countdown-btn .unit {
  color: var(--copper);
  font-size: 9px;
  margin-left: 2px;
}
@keyframes navPulse {
  0% { opacity: 0.4; }
  100% { opacity: 1; box-shadow: 0 0 10px var(--copper); }
}

/* CONTENT CENTER */
#center{
  position:relative;z-index:5;
  display:flex;flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding-left: clamp(32px, 5vw, 80px);
  padding-right: clamp(32px, 5vw, 80px);
  max-width: 94vw;
  box-sizing: border-box;
  /* +1.6rem keeps the title where it sat when a hidden 25.6px div above it was still in the flow */
  margin-top:calc(-2vh + 1.6rem);
  overflow: visible;
}

/* MAIN TITLE — DATAVERSE */
/* ── Title alive effects ── */
#title-wrap{
  position:relative;
  padding-bottom:.14em;
  /* Halo glow sous le titre */
  
}
#title-line{
  display:block;
  white-space:nowrap;
  line-height:.88;
}

/* ═══ LETTER REVEAL — chaque lettre apparaît avec délai en cascade ═══ */
.letter{
  display:inline-block;
  opacity:0;
}

.t-d,.t-ata,.t-verse, .t-ata, .t-d {
  display:inline-flex;
  align-items:center;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size:clamp(65px,13vw,200px);
  font-weight:900;
  letter-spacing:.06em;
  line-height:.88;
}
.t-d{
  color:#D4B8F0;
  display:inline-flex;
  align-items:center;
}
.t-d svg {
  height: 0.88em;       /* taller to match ATA cap height */
  width: auto;
  fill: url(#logoGrad);
  
  margin-right: 0.01em;
  transform: translateY(0.04em);
}
/* Letters inherit color from parent */
.t-ata .letter{
  color:#FFFFFF;
  text-shadow: 0 0 60px rgba(255,255,255,0.25);
}
.t-verse .letter{
  color: var(--violet-glow);
  text-shadow: 0 0 50px rgba(183,148,244,0.4);
}

/* EDITION 5.0 */
/* ── EDITION with planet dot ── */
#edition{
  margin-top:1.5vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.15em;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size:clamp(26px,7.8vw,118px);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  line-height:1;
  /* Indent to align with A of DATAVERSE — D logo is ~1.06× the DATAVERSE font-size */
  padding-left: clamp(69px, 13.8vw, 212px);
  /* Don't exceed DATAVERSE width */
  box-sizing: border-box;
}
/* "Edition" - Bright white outline and spacing */
#edition span:first-child {
  -webkit-text-stroke: 2px var(--off-white);
  color: transparent;
  letter-spacing: .05em;
  margin-right: 0.15em;
}
/* "5" and "0" — copper outline */
#edition span:nth-child(2),
#edition span:nth-child(4) {
  -webkit-text-stroke: 2px var(--copper);
  color: transparent;
  letter-spacing: .05em;
}

/* HERO NEBULA — right-side glow */
#hero-nebula {
  position:absolute;
  top:0; right:0;
  width:55vw; height:100%;
  background: radial-gradient(ellipse at 70% 50%, rgba(109,40,217,0.07) 0%, rgba(183,148,244,0.04) 40%, transparent 70%);
  pointer-events:none;
  z-index:2;
}

/* HERO INFO BAR — terminal line at bottom */
#hero-info-bar {
  position:absolute;
  bottom: 3.5vh;
  left:0; right:0;
  padding: 0 clamp(24px, 5vw, 80px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size: clamp(9px, 0.85vw, 13px);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.22);
  z-index:6;
  pointer-events:none;
}

/* THE DATA GALAXY */
#tagline{
  margin-top:2vh;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size:clamp(55px,11vw,165px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  text-indent:0;
  line-height:1;
  /* Stretch to right edge of screen */
  width: 100vw;
  margin-left: calc(-1 * clamp(32px, 5vw, 80px));
  padding-right: clamp(32px, 5vw, 80px);
  text-align: right;
  box-sizing: border-box;
}
.tl-the, .tl-data {
  color: var(--violet-glow);
  text-shadow: 0 0 40px rgba(183,148,244,0.5);
}
.tl-galaxy {
  color: rgba(240,238,235,.9);
  text-shadow: 0 0 60px rgba(255,255,255,0.12);
}

/* CTA BUTTON — in flow, centered */

#cta-wrap{
  margin-top: 4vh;
  opacity:0;
  position: relative;
  /* Full width so justify-content:center truly centers the button on screen */
  width: 100vw;
  margin-left: calc(-1 * clamp(32px, 5vw, 80px));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* ── Button shell ── */
#cta-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:22px 44px;
  border-radius:40px;
  background:linear-gradient(180deg, #0b0716, #050309);
  border:1px solid rgba(183,148,244,.12);
  color:#fff;
  text-decoration:none;
  cursor:none;
  
  /* width animated by JS between two measured px values */
  transition:width .55s cubic-bezier(.4,0,.2,1),
             border-color .35s,
             box-shadow .35s;
  position:relative;
  /* NO overflow:hidden — lets content breathe */
}
/* Comet border: two streaks of light (white head, violet / mauve tail) chase each other around the pill.
   ::before is the crisp 1.5px ring (masked to the border); ::after is the same light, blurred, sitting behind
   the button so only the halo spilling past the edge shows. */
@property --cta-angle{
  syntax:'<angle>';
  inherits:true;
  initial-value:0deg;
}
#cta-btn{
  --cta-comets: conic-gradient(from var(--cta-angle),
    transparent 0deg 70deg,
    rgba(109,40,217,.0) 70deg, rgba(109,40,217,.9) 125deg, #B794F4 160deg, #fff 174deg, transparent 178deg,
    transparent 250deg,
    rgba(139,92,246,.0) 250deg, rgba(139,92,246,.85) 305deg, #D4B8F0 340deg, #fff 354deg, transparent 358deg);
  animation:ctaOrbit 3.6s linear infinite;
}
@keyframes ctaOrbit{ to{ --cta-angle:360deg; } }
#cta-btn::before,
#cta-btn::after{
  content:'';
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  background:var(--cta-comets);
  pointer-events:none;
  transition:opacity .35s, filter .35s;
}
#cta-btn::before{
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#cta-btn::after{
  inset:-3px;
  z-index:-1;          /* behind the button's own background → only the halo outside the edge shows */
  filter:blur(9px);
  opacity:.95;
}
@media (prefers-reduced-motion: reduce){
  #cta-btn{ animation:none; --cta-angle:200deg; }
}
#cta-btn:focus,
#cta-btn:focus-visible{
  outline: none;
}
#cta-btn:hover::after{ opacity:1; filter:blur(14px); }

/* ── SQL view ── */
#btn-sql-view{
  display:none; /* desktop JS re-enables */
  flex-direction:column;
  max-width: 100%;
  overflow-x: hidden;
  align-items:flex-start;
  gap:0;
  font-family:'Courier New',monospace;
  font-size:clamp(11px,.88vw,13px);
  line-height:1.8;
  white-space:nowrap;
  transition:opacity .35s ease;
}
#btn-sql-view.hidden{ opacity:0; pointer-events:none; }

.sql-kw{ color: #c678dd; font-weight:600; } /* Keywords (Purple) */
.sql-id{ color: #61afef; } /* Identifiers (Blue) */
.sql-op{ color: #abb2bf; } /* Operators (Gray/White) */
.sql-num{ color: #d19a66; } /* Numbers (Orange) */
.sql-str{ color: #98c379; } /* Strings (Green) */
.sql-arr{ color: #8a4baf; margin-right:2px; } /* Arrow (Dark Purple) */
.sql-res{ color: #e5c07b; } /* Result (Yellow) */
.sql-sep{ color: #5c6370; margin:0 4px; } /* Separator */
.sql-line{ display:block; min-height:1.8em; white-space:nowrap; }

.sql-cursor-btn{
  display:inline-block;
  width:7px; height:.95em;
  background:var(--teal);
  margin-left:2px;
  vertical-align:text-bottom;
  border-radius:1px;
  animation:blink .75s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* ── Text view ── */
#btn-text-view{
  /* visible by default — JS hides on desktop */
  display:flex;
  align-items:center;
  gap:12px;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size:clamp(14px,1.15vw,18px);
  font-weight:600;
  letter-spacing:.14em;
  color:#fff;
  white-space:nowrap;
  transition:opacity .35s ease;
}

.cta-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 10px rgba(183,148,244,.9);
  animation:ctaDot 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes ctaDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(1.5);}}

/* FOOTER */
#footer{
  position:absolute;
  bottom:3vh;
  left:50%;transform:translateX(-50%);
  z-index:10;
  font-size:11px;
  letter-spacing:.22em;
  color:rgba(192,192,192,.45);
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  opacity:0;
  animation:fadeUp .8s 2.7s ease forwards;
}

/* CORNER LABELS */

.accent{color:rgba(183,148,244,.95);font-weight:600;}

/* ANIMATIONS */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}to{opacity:1;}
}

/* ══ STAR FIELD CANVAS ══ */
#starfield{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:5;
  pointer-events:none;
  mix-blend-mode: screen;
  /* mix-blend-mode:screen; removed for perf */
}

/* ══ SCAN LINE ══ */
#scanline{
  display: none !important;
}

/* ══ EDITION ANIMATED BAR ══ */
#edition-bar{
  width:0;
  height:2px;
  background:linear-gradient(to right,
    transparent,
    var(--violet-glow) 30%,
    #7B5EA7 70%,
    transparent);
  margin:10px auto 0;
  border-radius:2px;
  opacity:0;
  box-shadow:0 0 12px rgba(183,148,244,.6);
  
}

/* ══ ENHANCED CTA HOVER GLOW ══ */
#cta-btn:hover{
  box-shadow: inset 0 0 30px rgba(183,148,244,.08);
}

/* ── VERSE parent glow pulse (safe — doesn't override letter reveal) ── */
.t-verse{
  animation:verseGlow 3.5s ease-in-out infinite 3.5s;
}
@keyframes verseGlow{
  0%,100%{ text-shadow: 0 0 30px rgba(183,148,244,.4), 0 0 70px rgba(74,32,112,.2); }
  50%{ text-shadow: 0 0 55px rgba(212,184,240,.75), 0 0 110px rgba(123,94,167,.4); }
}

/* ── ATA parent float ── */
.t-ata{
  animation:ataFloat 5s ease-in-out infinite 3.5s;
  display:inline-flex;
}
@keyframes ataFloat{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-4px); }
}

/* ── D logo breathe ── */
.t-d svg{
  /* (dBreathe had empty keyframes: removed, it only ticked) */
}
@keyframes dBreathe{
  0%,100%{
    
  }
  50%{
    
  }
}

/* ══ SCROLL DOWN HINT ══ */
#scroll-hint{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0;
  animation:fadeIn .8s 3.8s ease forwards;
  cursor:default;
}
#scroll-hint-text{
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size:10px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:rgba(212,184,240,.85);
  text-indent:.4em;
  text-shadow:0 0 18px rgba(183,148,244,.4);
  transition:color .3s,text-shadow .3s;
}
#scroll-hint:hover #scroll-hint-text{
  color: var(--off-white);
  text-shadow:0 0 28px rgba(183,148,244,.75);
}
#scroll-line{
  width:2px;
  height:56px;
  background:linear-gradient(to bottom,
    rgba(183,148,244,.9),
    rgba(183,148,244,.08));
  position:relative;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 8px rgba(183,148,244,.3);
}
#scroll-line::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:55%;
  background:linear-gradient(to bottom,
    transparent,
    var(--violet),
    #D4B8F0);
  border-radius:2px;
  animation:scrollDrop 1.6s ease-in-out infinite 3s;
}
/* transform instead of top: the drop slides on the GPU, no layout every frame
   (the drop is 55% of the line's height, so -60% / 120% of the line = -109% / 218% of the drop) */
@keyframes scrollDrop{
  0%{transform:translateY(-109%);opacity:0;}
  15%{opacity:1;}
  85%{opacity:1;}
  100%{transform:translateY(218%);opacity:0;}
}
/* clean SVG arrow */
#scroll-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  animation:arrowFloat 1.8s ease-in-out infinite 3s;
  filter:drop-shadow(0 0 8px rgba(183,148,244,.65));
}
#scroll-arrow svg{
  width:18px;height:18px;
}
@keyframes arrowFloat{
  0%,100%{transform:translateY(0);opacity:.7;}
  50%{transform:translateY(6px);opacity:1;}
}
/* Centred hint can sit over the CTA on laptop screens — never let it swallow the CTA's clicks */
#scroll-hint{ pointer-events:none; }
/* Desktop: keep the hint tucked against the bottom edge, clear of the CTA (which reaches low on laptops) */
html:not(.is-touch) #scroll-hint{ bottom:10px; gap:7px; }
html:not(.is-touch) #scroll-line{ height:30px; }
/* Touch layout: the bottom info bar sits right under the hint; the line alone is enough. */
.is-touch #scroll-arrow{ display:none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px) + Mobile (≤600px)
══════════════════════════════════════════════════════════ */

/* ── TABLET ── */
@media (max-width:600px){
  #footer { display: none !important; }
  /* ─── Title: scales via 0.88em SVG, no override needed for D ─── */
  .t-verse, .t-ata, .t-d { font-size:clamp(34px,11.5vw,68px);letter-spacing:.03em; }

  /* ─── Nav ─── */
  #nav-links { gap: 12px; right: 15px; top: 15px; align-items: center; }
  #nav-links > a:not(#nav-register) { display: none; }
  #nav-register { 
    padding: 10px 18px; /* MOOOORE BIGGER */
    font-size: 11px; 
    font-weight: 700;
  }
  .nav-countdown-btn { 
    padding: 10px 16px; /* MOOOORE BIGGER */
    font-size: 11px; 
    gap: 8px; 
    white-space: nowrap; 
  }
  .nav-countdown-btn .unit { font-size: 9px; }

  /* ─── Logo ─── */
  #logo-wrap{ left:15px;top:35px; }

  /* ─── Hide HUD corners ─── */

  /* ─── Hero re-center on mobile ─── */
  #hero { align-items: center; }

  /* ─── Content area — back to centered stacked on mobile ─── */
  #center{
    width:92vw;
    max-width:92vw;
    padding-left: 0;
    align-items: center;
    text-align: center;
  }

  /* ─── Hide nebula and info bar on mobile ─── */
  #hero-nebula { display:none; }
  #hero-info-bar { display:flex !important; font-size: 9px; line-height: 1.5; padding-bottom: 2vh; }

  /* ─── Edition ─── */
  #edition{ font-size:clamp(12px,4vw,20px);letter-spacing:.25em;gap:.2em;margin-top:6vh;justify-content:center; }
  #edition-bar{ width:60px;margin-top:7px; }

  /* ─── Tagline ─── */
  #tagline{ font-size:clamp(14px,4.5vw,22px);letter-spacing:.2em;text-indent:0;margin-top:4vh;text-align:center; }

  /* ─── CTA ─── */
  #cta-wrap{ margin-top:5vh; width:100vw; margin-left:0; }
  #cta-btn{ 
    max-width: 90vw; /* Keep it from hitting borders */
  }
  #btn-sql-view {
    font-size: clamp(6.5px, 2.2vw, 10px); /* Make SQL text fit perfectly on phones */
    white-space: nowrap;
    line-height: 1.4;
  }

  /* ─── Scroll hint ─── */
  #scroll-hint{ bottom:16px;gap:8px; }
  #scroll-line{ height:38px; }
  #scroll-hint-text{ font-size:8.5px;letter-spacing:.3em; }
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px) + Mobile (≤600px)
══════════════════════════════════════════════════════════ */

/* ── TABLET ── */

/* ── MOBILE ── */

/* ── TOUCH DEVICES FIX ── */
@media (pointer: coarse) {
  body, a, button { cursor: auto !important; }
  #cta-btn { cursor: pointer !important; }
  #cur-dot, #cur-ring { display: none !important; }
  #scanline { display: none !important; } /* Save battery on mobile */
}

/* ── PRELOADER ── */
#preloader {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
/* Returning visitor: intro is skipped — one large "ACCESSING DATAVERSE..." line, centred */
.dv-returning #pl-track,
.dv-returning .pl-meta { display: none; }
.dv-returning .preloader-content { width: auto; }
.dv-returning .pl-log {
  min-height: 0;
  font-size: clamp(16px, 1vw, 20px);
  letter-spacing: 0.15em;
}
.dv-returning .pl-line { gap: 0.7em; }
.dv-returning .pl-cursor { margin-left: 0.2em; }
.is-touch.dv-returning .pl-log { font-size: 32px; }
.pl-dots { display: none; }
.dv-returning .pl-dots { display: inline; color: var(--mauve); }
.pl-dots i { font-style: normal; animation: plDot 1.2s ease-in-out infinite; }
.pl-dots i:nth-child(2) { animation-delay: 0.2s; }
.pl-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes plDot {
  0%, 100% { opacity: 0.2; }
  40% { opacity: 1; text-shadow: 0 0 10px rgba(183, 148, 244, 0.8); }
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ── Preloader: boot log + orbit track ── */
.preloader-content {
  --pl-dim: rgba(237, 235, 230, 0.36);
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: min(440px, 84vw);
  font-family: 'Space Mono', ui-monospace, monospace;
}
.pl-log {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 7.4em;          /* room for all four lines, so the track never jumps */
  justify-content: flex-end;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.pl-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--off-white);
  white-space: nowrap;
  transition: color 0.35s ease;
}
.pl-line[hidden] { display: none; }
.pl-prompt { color: var(--teal); text-shadow: 0 0 8px rgba(78, 201, 176, 0.6); }
.pl-key { color: var(--mauve); text-shadow: 0 0 10px rgba(183, 148, 244, 0.55); }
.pl-glyph { color: var(--violet-glow); opacity: 0.75; }
.pl-cursor {
  display: none;
  width: 0.62em;
  height: 1.05em;
  margin-left: -6px;
  background: var(--mauve);
  box-shadow: 0 0 10px rgba(183, 148, 244, 0.7);
  animation: blink 0.9s step-end infinite;
}
.pl-line.is-active .pl-cursor { display: inline-block; }
.pl-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--teal);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pl-line.has-status .pl-status { opacity: 1; }
.pl-line.is-done { color: var(--pl-dim); }
.pl-line.is-done .pl-key { color: rgba(183, 148, 244, 0.5); text-shadow: none; }
.pl-line.is-done .pl-prompt { color: rgba(78, 201, 176, 0.45); text-shadow: none; }
.pl-line.is-granted {
  color: var(--copper);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-shadow: 0 0 14px rgba(232, 165, 89, 0.55);
}
.pl-line.is-granted .pl-prompt { color: var(--copper); text-shadow: inherit; }
.pl-line.is-granted .pl-cursor { background: var(--copper); box-shadow: 0 0 10px rgba(232, 165, 89, 0.8); }

.pl-track { position: relative; height: 16px; }
.pl-rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(183, 148, 244, 0.28) 0 4px, transparent 4px 8px);
}
.pl-trail {
  position: absolute;
  left: 0; top: 50%;
  width: 0%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(109, 40, 217, 0), var(--violet) 45%, var(--mauve));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.55);
  /* No CSS transition — JS drives this at 60fps */
}
.pl-tick {
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  border: 1px solid rgba(183, 148, 244, 0.35);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.pl-tick.is-lit {
  background: var(--c);
  border-color: var(--c);
  box-shadow: 0 0 10px var(--c);
  transform: translate(-50%, -50%) scale(1.25);
}
.pl-planet {
  position: absolute;
  top: 50%; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #fff 0 12%, var(--mauve) 45%, var(--violet));
  box-shadow: 0 0 16px 4px rgba(183, 148, 244, 0.55);
  z-index: 1;
}
/* a thin tilted ring around the travelling planet */
.pl-planet::after {
  content: '';
  position: absolute;
  inset: -5px -9px;
  border: 1px solid rgba(232, 165, 89, 0.7);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.pl-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pl-dim);
}
#pl-domain.is-online { color: var(--teal); }
#preloader-pct {
  color: var(--copper);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

:root {
  color-scheme: dark;

  --void: #000000;
  --void-deep: #000000;
  --off-white: #EDEBE6;
  --offwhite: #EDEBE6;
  --gray: #8A8894;
  --gray-dim: #55535E;
  --violet: #6D28D9;
  --mauve: #B794F4;
  --violet-glow: #8B5CF6;
  --copper: #E8A559;
  --teal: #4EC9B0;
  
  --bg: var(--void);
  --text: var(--off-white);
  --muted: var(--gray);
  --dimmer: var(--gray-dim);
  --darkest: var(--void-deep);
  --border: var(--gray-dim);
  --font: 'Clash Display', 'Space Grotesk', sans-serif;
}

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #000000;
    color: var(--off-white);
    font-family: var(--font);
    overflow-x: hidden;
    line-height: 1.6;
  }

  /* ─── TICKER ─── */
  .ticker-wrap {
    background: #000000;
    border-top: 0.5px solid var(--gray-dim);
    border-bottom: 0.5px solid var(--gray-dim);
    overflow: hidden;
    padding: 13px 0;
    width: 100%;
    display: flex;
    white-space: nowrap;
  }
  .ticker-track {
    display: flex;
    flex-shrink: 0;
    min-width: 100%;
    align-items: center;
    justify-content: space-around;
    animation: ticker 35s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
  }
  @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

  /* ─── iOS ONLY MARQUEE FIX ─── */
  html.is-ios .ticker-track {
    animation: none !important; /* Disable CSS animation so GSAP can take over */
  }

  .ticker-item { display: flex; align-items: center; white-space: nowrap; }
  .ticker-text {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray);
    font-weight: 500;
    padding: 0 1.5rem;
  }
  .ticker-text.hi { color: #d4d0f5; }
  .ticker-dot { color: var(--gray); font-size: 10px; flex-shrink: 0; }

  /* ─── CONCEPT SECTION ─── */
  .concept {
    background: #000000;
    padding: 6rem 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 600px;
    position: relative;
    overflow: hidden;
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gray-dim);
    margin-bottom: 1rem;
  }
  .concept-headline {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--off-white);
    letter-spacing: -0.02em;
    margin-bottom: 3.5rem;
  }
  .concept-headline .purple { color: var(--violet-glow); }
  .concept-body {
    font-size: 18px;
    line-height: 1.8;
    color: var(--gray);
    max-width: 600px;
    margin-bottom: 1.25rem;
  }
  .glow-word {
    color: #d4d0f5;
    background: rgba(127,119,221,0.15);
    padding: 1px 6px;
    border-radius: 4px;
    font-style: normal;
  }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
  .tag {
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-dim);
    border: 0.5px solid rgba(107,100,144,0.35);
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .tag:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--off-white);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
  }
  .concept-right {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .orbit-label {
    position: absolute;
    bottom: 16px;
    right: 0;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--void-deep);
  }

  /* ─── STATS SECTION ─── */
  .stats-outer { background: #000000; position: relative; }
  .sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #000000;
    padding: 3rem 5rem 3rem;
  }
  .sticky-header .eyebrow { margin-bottom: 0.5rem; }
  .sticky-h2 {
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    color: var(--off-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .sticky-h2 span { color: var(--violet-glow); }
  .progress-bar {
    height: 1px;
    background: rgba(127,119,221,0.12);
    margin-top: 1.25rem;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: var(--copper);
    width: 0%;

  }
  .scroll-zone {
    min-height: 700px;
    padding: 3rem 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  .stat-row {
    display: grid;
    grid-template-columns: 200px 1px 1fr;
    gap: 0 3rem;
    align-items: center;
    padding: 2.25rem 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .stat-row.visible { opacity: 1; transform: translateY(0); }
  .stat-number { text-align: right; }
  .stat-num-val {
    font-size: clamp(44px, 6vw, 82px);
    font-weight: 700;
    color: var(--off-white);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .stat-num-val .unit { font-size: 0.38em; color: var(--copper); font-weight: 500; vertical-align: super; margin-left: 2px; }
  .stat-suffix { font-size: 11px; color: var(--gray-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
  .stat-line { background: rgba(127,119,221,0.65); height: 100%; min-height: 64px; border-radius: 1px; }
  .stat-info { display: flex; flex-direction: column; gap: 6px; }
  
  .stat-desc { font-size: 13px; color: var(--gray-dim); line-height: 1.65; max-width: 380px; }
  .float-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--violet);
    pointer-events: none;
    animation: floatup linear infinite;
  }
  @keyframes floatup {
    0% { transform: translateY(0) scale(1); opacity: 0.5; }
    100% { transform: translateY(-160px) scale(0.2); opacity: 0; }
  }

  /* ─── DOMAINS SECTION ─── */
  .domains-wrap {
    background: #000000;
    padding: 5rem;
  }
  .domains-top { margin-bottom: 6rem; }
  .domains-headline {
    font-size: clamp(42px, 7vw, 80px);
    font-weight: 700;
    color: var(--off-white);
    line-height: 1.0;
    letter-spacing: -0.03em;
  }

  .d-card.visible { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0% 0); }

    .d-planet-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; border-radius: 16px; }
.d-num, .d-name, .d-desc { position: relative; z-index: 1; pointer-events: none; }
  .d-card { position: relative; }

  /* ─── PORTAL SECTION ─── */

  /* The outer scroll track — tall so there's enough scroll room */
  .pin-outer {
    height: 250vh;
    position: relative;
  }

  /* Sticky viewport: stays fixed while user scrolls through pin-outer */
  .pin-scene {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #000000;
  }

  /* Starfield canvas */

  /* ── Corner labels ──
     These are NOT sticky. They live ABOVE the pin-outer in normal flow,
     so they naturally scroll off the top as the user scrolls. */
  .portal-pre-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 3.5vw;
    background: #000000;
    box-sizing: border-box;
    min-height: 100vh;
    position: relative;
    z-index: 2;
  }
  /* DATA GALAXY — top left */

  /* ARE YOU READY — bottom right */

  /* ── PORTAL: FULL-SCREEN SCROLL-DRIVEN WORD ZOOM (matches reference site) ── */
  /* Override old flex layout — make it a scroll container */
  #portalLabels {
    display: block !important;
    min-height: unset !important;
    padding: 0 !important;
    height: 420vh;   /* enough scroll space for all 5 words */
  }
  /* Sticky inner scene */
  .portal-words-scene {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
  }
  /* Each word is absolutely positioned, full-screen centered */
  .pw-item {
    color: var(--off-white);
    position: absolute;
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(72px, 14vw, 200px);
    letter-spacing: -0.04em;
    line-height: 0.85;
    text-align: center;
    opacity: 0;
    transform: scale(0.06);
    will-change: transform, opacity;
    transform-origin: center center;
  }
  /* Individual word colors (reuse existing palette) */

  .pw-are   { color: #e8e4ff; }

  /* ── ENTER NOW ── centered inside the sticky scene */
  .portal-enter-wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
  }
  .portal-enter-text {
    font-size: clamp(70px, 15vw, 220px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.82;
    text-align: center;
    color: var(--off-white);  /* near-white — matches reference video */
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0.15);
  }

  /* White flash overlay — PERMANENTLY DISABLED */

  @media (max-width: 768px) {
    .concept { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
    .concept-right { height: 260px; }
    .scroll-zone, .sticky-header, .domains-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
    .stat-row { grid-template-columns: 120px 1px 1fr; gap: 0 1rem; }
    
    .domains-headline { font-size: clamp(36px, 10vw, 60px); }
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #000000;
    color: var(--offwhite);
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    cursor: default;
  }

  /* ── CUSTOM CURSOR ── */

  /* ── CURSOR TRAIL ── */
  .cursor-trail-dot {
  top:0; left:0;
    position: fixed;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    mix-blend-mode: screen;
    /* transform handled by GSAP */
    will-change: left, top, opacity;
  }

  /* ── PRELOADER ── */

  /* ── PLANET LABELS (CSS2D) ── */
  /* Names stay visible but quiet; the selected planet's name lights up as a pill */
  .planet-label {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(237, 235, 230, 0.62);
    background: transparent;
    padding: 5px 12px;
    border-radius: 30px;
    border: 0.5px solid transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 1;
    margin-top: -58px;              /* sit above the planet on screen */
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .planet-label.active {
    color: #FFFFFF;
    background: rgba(10, 10, 15, 0.7);
    border-color: rgba(183,148,244,0.55);
    box-shadow: 0 0 12px rgba(183,148,244,0.25);
  }

  /* ── EXPLORE BUTTON ── */
  @keyframes explorePulse {
    0% { box-shadow: 0 0 0 0 rgba(183,148,244,0.5); border-color: rgba(183,148,244,0.8); }
    70% { box-shadow: 0 0 0 20px rgba(183,148,244,0); border-color: rgba(183,148,244,0.2); }
    100% { box-shadow: 0 0 0 0 rgba(183,148,244,0); border-color: rgba(183,148,244,0.5); }
  }

  /* ── EXPLORE BUTTON ── */
  .explore-btn {
    pointer-events: all;
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 30px;
    border: 0.5px solid var(--violet-glow);
    background: rgba(109, 40, 217, 0.35); /* Dark Violet */
    backdrop-filter: blur(6px);
    color: var(--off-white);
    cursor: pointer;
    margin-top: 30px;
    animation: explorePulse 2.5s infinite;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  .explore-btn:hover {
    background: var(--pulsar);
    color: var(--offwhite);
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(183,148,244,0.4);
  }
  .explore-btn.explored { opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; }
  .explore-hint { margin-top: 14px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mauve); transition: opacity 0.4s; }
  .explore-hint.explored { opacity: 0; }

  /* ── SHOOTING STAR CAPTION ── */
  #shooter-caption {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stardust);
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    white-space: nowrap;
    text-shadow: 0 0 18px rgba(183,148,244,0.8);
    transition: opacity 0.4s;
  }
  #shooter-caption.visible { opacity: 1; }

  /* ── NAVBAR ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px;
    transition: background 0.4s;
  }

  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a { font-size: 11px; letter-spacing: 0.1em; color: var(--steel); text-decoration: none; text-transform: uppercase; transition: color 0.2s; }
  .nav-links a:hover { color: var(--stardust); }

  /* ── GALAXY HERO ── */
  #galaxy-hero { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 1; overflow: hidden; }
  #galaxy-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

  .hero-center.hero-hidden { opacity: 0 !important; pointer-events: none !important; }
  .hero-center {
    position: absolute;
    top: 50%; left: 50%;
    /* transform handled by GSAP */
    text-align: center;
    pointer-events: none;
    transition: opacity 0.6s;
  }
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--mauve);        /* was --pulsar which was too dark */
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .hero-title-split {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: clamp(42px,7vw,80px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--offwhite);
    perspective: 600px;
  }
  .title-row { display: block; overflow: hidden; }
  .title-char {
    display: inline-block;
    transform: translateY(110%) rotateX(40deg);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
    will-change: transform, opacity;
  }
  .title-char.space { width: 0.28em; }
  .title-char.revealed {
    transform: translateY(0) rotateX(0deg);
    opacity: 1;
  }
  .title-char.accent { color: var(--stardust); }
  .title-char:hover {
    transform: translateY(-6px) rotateX(-10deg) scale(1.08);
    color: var(--stardust);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  /* legacy fallback — keep for mobile media query */

  /* Scroll cue */
  .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: fadeup 2.5s infinite; }
  .scroll-cue span { font-size: 9px; letter-spacing: 0.2em; color: var(--silver); opacity: 0.65; text-transform: uppercase; }
  .scroll-cue-line { width: 0.5px; height: 32px; background: linear-gradient(to bottom, var(--mauve), transparent); }
  @keyframes fadeup {
    0%,100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
  }

  /* ── DOMAIN HUD ── */
  .domain-hud { position: absolute; bottom: 40px; left: 48px; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
  .domain-hud.visible { opacity: 1; }
  .hud-label { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 5px; transition: color 0.4s; }
  .hud-name { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 600; color: var(--offwhite); line-height: 1; margin-bottom: 5px; }
  .hud-desc { font-size: 11px; color: var(--steel); letter-spacing: 0.05em; }

  /* ── PROGRESS COUNTER ── */
  .progress-counter {
    position: absolute;
    bottom: 40px;
    right: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
    text-align: right;
  }
  .progress-counter.visible { opacity: 1; }
  .pc-current {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--stardust);
    line-height: 1;
  }
  .pc-total {
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--steel);
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* ── PLANET PIPS ── */
  .planet-pips { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; pointer-events: all; }
  .ppip { width: 6px; height: 6px; border-radius: 50%; background: var(--anthracite); cursor: pointer; transition: all 0.25s; border: none; }
  .ppip.active { background: var(--stardust); transform: scale(1.6); box-shadow: 0 0 8px rgba(183,148,244,0.5); }

  /* ── PLANET HOVER RING (canvas overlay) ── */
  #planet-hover-ring {
  top:0; left:0;
    position: absolute;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.2s;
    /* transform handled by GSAP */
  }
  #planet-hover-ring.visible { opacity: 1; }

  /* ── SCROLL CONTAINER ── */
  #scroll-container { position: relative; z-index: 2; display: none; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }

  .domain-scroll-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 60px 0 45%;
    background: transparent;
    pointer-events: none; /* Allows clicking through the empty space */
  }

  .domain-card { width: 100%; max-width: 600px; opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: auto; /* Restores interactivity to the card itself */ }
  .domain-card.visible { opacity: 1; transform: translateY(0); }

  .dc-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; border: 0.5px solid; margin-bottom: 20px; }
  .dc-dot { width: 5px; height: 5px; border-radius: 50%; }
  .dc-title { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(32px,4.5vw,56px); font-weight: 700; line-height: 1.05; color: var(--offwhite); margin-bottom: 18px; }
  .dc-desc { font-size: 16px; color: var(--steel); line-height: 1.7; margin-bottom: 32px; max-width: 100%; }
  .dc-events { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .dc-event { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: var(--abyss); border: 0.5px solid var(--anthracite); border-radius: 10px; transition: border-color 0.2s; cursor: default; }
  .dc-event:hover { border-color: var(--pulsar); }
  .dc-event-type { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; flex-shrink: 0; }
  .type-conf { background: rgba(74,32,112,0.35); color: var(--stardust); }
  .type-ws   { background: rgba(44,44,44,0.6);   color: var(--silver); }
  .dc-event-name { font-size: 14px; color: var(--silver); line-height: 1.4; }
  .dc-more { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 8px; 
    font-size: 13px; 
    letter-spacing: 0.1em; 
    color: var(--off-white); 
    background: rgba(183, 148, 244, 0.1);
    border: 1px solid rgba(183, 148, 244, 0.4);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer; 
    text-decoration: none; 
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
  }
  .dc-more:hover { 
    background: rgba(183, 148, 244, 0.2);
    border-color: rgba(183, 148, 244, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(183, 148, 244, 0.2);
  }
  .dc-more-arrow { font-size: 14px; transition: transform 0.2s; }
  .dc-more:hover .dc-more-arrow { transform: translateX(4px); }

  /* ── SESSIONS MODAL ── */
  .sessions-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  .sessions-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .sessions-modal {
    background: #0a0a10;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    width: min(600px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .sessions-modal-overlay.active .sessions-modal {
    transform: translateY(0) scale(1);
  }
  .sessions-modal-header {
    padding: 36px 36px 24px;
    position: sticky;
    top: 0;
    background: #0a0a10;
    z-index: 2;
    border-radius: 20px 20px 0 0;
  }
  .sessions-modal-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.7;
  }
  .sessions-modal-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .sessions-modal-title {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--offwhite);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .sessions-modal-desc {
    font-size: 14px;
    color: var(--steel);
    line-height: 1.6;
  }
  .sessions-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--silver);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
  }
  .sessions-modal-close:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
  }
  .sessions-modal-body {
    padding: 24px 36px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .session-item {
    padding: 24px 26px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    transition: border-color 0.2s, background 0.2s;
  }
  .session-item:hover {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }
  .session-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .session-type-badge {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .session-type-badge.talk { background: rgba(74,32,112,0.35); color: var(--stardust); }
  .session-type-badge.workshop { background: rgba(232,165,89,0.2); color: #E8A559; }
  .session-item-name {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--offwhite);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .session-item-desc {
    font-size: 14px;
    color: var(--steel);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .session-speaker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    margin-bottom: 16px;
  }
  .session-speaker-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .session-speaker-info {
    display: flex;
    flex-direction: column;
  }
  .session-speaker-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--offwhite);
  }
  .session-speaker-role {
    font-size: 12px;
    color: var(--steel);
  }
  .session-item-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--steel);
    letter-spacing: 0.04em;
  }
  .session-item-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Mobile modal */
  .is-touch .sessions-modal {
    width: 95vw !important;
    max-height: 85vh !important;
    border-radius: 16px !important;
  }
  .is-touch .sessions-modal-header {
    padding: 30px 28px 20px !important;
  }
  .is-touch .sessions-modal-title {
    font-size: 42px !important;
  }
  .is-touch .sessions-modal-desc {
    font-size: 22px !important;
  }
  .is-touch .sessions-modal-tag {
    font-size: 18px !important;
  }
  .is-touch .sessions-modal-close {
    width: 56px !important;
    height: 56px !important;
    font-size: 28px !important;
  }
  .is-touch .sessions-modal-body {
    padding: 20px 28px 30px !important;
    gap: 14px !important;
  }
  .is-touch .session-item {
    padding: 22px 20px !important;
  }
  .is-touch .session-type-badge {
    font-size: 16px !important;
    padding: 6px 14px !important;
  }
  .is-touch .session-item-name {
    font-size: 26px !important;
  }
  .is-touch .session-item-meta {
    font-size: 20px !important;
    gap: 16px !important;
    margin-top: 12px !important;
  }

  /* ── SCHEDULE SECTION ── */
  .schedule-section {
    position: relative;
    padding: 120px 5vw;
    background: transparent;   /* the Cosmic White page behind (warp-void) shows through */
    z-index: 3;
  }
  .schedule-container {
    max-width: 1400px;
    margin: 0 auto;
  }
  .schedule-intro {
    margin-bottom: 100px;
  }
  .schedule-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 80px;
    align-items: start;
  }

  /* Tabs */
  .schedule-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
    position: sticky;
    top: 120px;
  }
  .schedule-tab {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 40px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .schedule-tab.active {
    background: rgba(183, 148, 244, 0.05);
    border-color: rgba(183, 148, 244, 0.3);
    box-shadow: 0 0 20px rgba(183, 148, 244, 0.1);
  }
  .tab-top {
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--violet-glow);
    opacity: 0.5;
    margin-bottom: 8px;
    transition: opacity 0.3s ease;
  }
  .schedule-tab.active .tab-top {
    color: var(--violet-glow);
    opacity: 1;
  }
  .tab-bottom {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--silver);
  }
  .schedule-tab.active .tab-bottom {
    color: var(--offwhite);
  }
  .tab-date {
    color: var(--steel);
    white-space: nowrap;
    transition: color 0.3s ease;
  }
  .schedule-tab.active .tab-date {
    color: #E8A559;
  }

  /* Timeline Wrapper */
  .schedule-timeline-wrapper {
    position: relative;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 24px;
    padding: 40px 40px 0px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  }
  .schedule-query {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: #E8A559;
    margin-bottom: 40px;
    min-height: 20px; /* prevent height collapse when empty */
  }
  .schedule-cursor {
    animation: schedBlink 1s step-end infinite;
  }
  @keyframes schedBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  .schedule-day {
    display: none;
    position: relative;
    padding-bottom: 40px;
  }
  .schedule-day.active {
    display: block;
    animation: fadeInDay 0.5s ease forwards;
  }
  @keyframes fadeInDay {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    width: 2px;
    background: linear-gradient(to bottom, #E8A559, #6D28D9, #4EC9B0);
    z-index: 1;
    opacity: 0.7;
  }

  /* Rows */
  .schedule-row {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 30px;
    z-index: 2;
  }
  .break-row {
    margin-bottom: 30px;
  }
  .row-meta {
    width: 70px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
  }
  .row-index {
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    color: var(--anthracite);
    margin-bottom: 4px;
  }
  .row-time {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: var(--silver);
  }
  
  /* Node */
  .timeline-node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #03030a;
    border: 2px solid var(--anthracite);
    position: absolute;
    left: 70px;
    top: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .timeline-node::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--anthracite);
  }
  .node-highlight { border-color: #E8A559; box-shadow: 0 0 10px rgba(232, 165, 89, 0.4); }
  .node-highlight::after { background: #E8A559; }
  
  .node-normal { border-color: var(--pulsar); }
  .node-normal::after { background: var(--pulsar); }
  
  .node-dim { border-color: transparent; background: transparent; }
  .node-dim::after { background: var(--anthracite); width: 6px; height: 6px; }

  /* Card */
  .schedule-card {
    flex-grow: 1;
    margin-left: 40px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 24px 30px;
    position: relative;
    transition: all 0.3s ease;
  }
  .schedule-card:hover {
    background: rgba(183,148,244,0.08);
    border-color: rgba(183,148,244,0.4);
    box-shadow: 0 8px 32px rgba(183,148,244,0.1), 0 0 20px rgba(183,148,244,0.15);
    transform: translateY(-2px);
  }
  .highlight-card {
    background: linear-gradient(135deg, rgba(183,148,244,0.08) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(183,148,244,0.2);
  }
  .card-cell-ref {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: 'Fira Code', monospace;
    font-size: 10px;
    color: var(--anthracite);
  }
  .card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding-right: 30px; /* Space for cell ref */
  }
  .session-badge {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .badge-access { color: var(--silver); background: rgba(255,255,255,0.1); }
  .badge-keynote { color: #E8A559; border-color: rgba(232,165,89,0.3); background: rgba(232,165,89,0.1); }
  .badge-talk { color: var(--mauve); border-color: rgba(183,148,244,0.3); background: rgba(183,148,244,0.1); }
  .badge-workshop { color: #4EC9B0; border-color: rgba(78,201,176,0.3); background: rgba(78,201,176,0.1); }
  .badge-panel { color: #FFBB55; border-color: rgba(255,187,85,0.3); background: rgba(255,187,85,0.1); }
  .badge-networking { color: #6D28D9; border-color: rgba(109,40,217,0.4); background: rgba(109,40,217,0.2); }
  
  .session-domain {
    font-size: 12px;
    color: var(--steel);
  }
  .session-title {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--offwhite);
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .session-speaker {
    font-size: 14px;
    color: var(--steel);
  }
  .speaker-name {
    color: var(--mauve);
    font-weight: 500;
  }

  /* Breaks */
  .break-card {
    background: transparent !important;
    border: 1px dashed rgba(255,255,255,0.1) !important;
    padding: 16px 30px;
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: var(--steel);
    display: flex;
    align-items: center;
  }

  .schedule-footer {
    padding-top: 20px;
    padding-left: 110px;
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: var(--mauve);
  }

  /* Mobile tweaks */
  .is-touch .schedule-section {
    padding: 100px 5vw;
  }

.is-touch .schedule-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .is-touch .schedule-tabs {
    position: relative;
    top: 0;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
  }
  .is-touch .schedule-tab {
    padding: 24px;
  }
  .is-touch .tab-top {
    font-size: 20px !important;
  }
  .is-touch .tab-bottom {
    font-size: 36px !important;
  }
  .is-touch .schedule-timeline-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .is-touch .schedule-query {
    font-size: 16px !important;
    margin-bottom: 60px;
  }
  .is-touch .timeline-line {
    left: 100px;
  }
  .is-touch .row-meta {
    width: 90px;
    padding-right: 20px;
  }
  .is-touch .row-index { display: none; }
  .is-touch .row-time {
    font-size: 26px !important;
  }
  .is-touch .timeline-node {
    left: 88px;
    width: 26px;
    height: 26px;
  }
  .is-touch .timeline-node::after {
    width: 12px; height: 12px;
  }
  .is-touch .schedule-card {
    margin-left: 20px;
    padding: 30px 24px;
  }
  .is-touch .card-cell-ref {
    display: none;
  }
  .is-touch .session-badge {
    font-size: 16px !important;
    padding: 8px 12px !important;
  }
  .is-touch .session-domain {
    font-size: 20px !important;
  }
  .is-touch .session-title {
    font-size: 34px !important;
    margin-bottom: 16px !important;
  }
  .is-touch .session-speaker {
    font-size: 24px !important;
  }
  .is-touch .break-card {
    font-size: 28px !important;
    padding: 24px 24px !important;
  }
  .is-touch .schedule-footer {
    padding-left: 0;
    text-align: center;
    margin-top: 40px;
    font-size: 20px !important;
  }

  /* ── FOOTER ── */
  footer { position: relative; z-index: 3; background: #000000; border-top: 0.5px solid var(--anthracite); padding: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }

  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: #000000; }
  ::-webkit-scrollbar-thumb { background: var(--pulsar); border-radius: 2px; }

  /* ── DOMAIN BG TEXT ── */
  #domain-bg-text {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  #domain-bg-text.visible { opacity: 1; }
  .bg-text-row {
    will-change: transform;
    display: block;
    white-space: nowrap;
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: clamp(80px, 14vw, 200px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(183,148,244,0.18);
    line-height: 1;
    user-select: none;
  }
  .bg-text-row.row-left  { animation: marqueeL 18s linear infinite; }
  .bg-text-row.row-right { animation: marqueeR 22s linear infinite; }
  @keyframes marqueeL {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes marqueeR {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  @media (max-width: 768px) {
    nav { padding: 16px 20px; }
    .nav-links { display: none; }
    .domain-scroll-section { padding: 0 20px; justify-content: center; }
    .domain-card { max-width: 100%; }
    
    .domain-hud { left: 20px; }
    .progress-counter { right: 20px; }
  }

/* Ensure galaxy-hero sticks to the top of galaxy-visualization */
#galaxy-visualization {
    position: relative;
}

/* Ensure part2 doesn't overlap index_final sticky container */

  /* ══════════════════════════════════════════
     PERFORMANCE OPTIMIZATIONS
     ══════════════════════════════════════════ */

  /* Prevent layout shift + enable GPU layers on animated elements */
  html {
    overscroll-behavior-y: contain;   /* kills scroll chaining / bounce jank */
  }

  /* GPU compositing layers for all scroll-driven animated sections */
  .portal-words-scene,
  .pin-scene,
  .pw-item,
  #enterNow,
  .portal-enter-wrap {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* CSS containment on static/rarely-changing sections
     — tells the browser these can be repainted independently */
  .concept,
  .stats-outer,
  .domains-wrap,
  footer {
    contain: layout style paint;
  }

  /* --- Grain & Vignette --- */
  #grain-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: overlay;
    opacity: 0.08; /* Slightly more visible for confirmation */
  }
  .vignette {
    background: transparent;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 998;
  }

  /* --- Technique 2: Mask Reveal --- */
  .mask-reveal-title .line {
    display: block;
    overflow: hidden;
  }
  .mask-reveal-title .line-inner {
    display: block;
    transform: translateY(100%);
    transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }
  .mask-reveal-title.revealed .line-inner {
    transform: translateY(0%);
  }
  /* Stagger the second line */
  .mask-reveal-title .line:nth-child(2) .line-inner {
    transition-delay: 0.1s;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .mask-reveal-title .line-inner {
      transform: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .mask-reveal-title.revealed .line-inner {
      opacity: 1;
    }
  }
  /* --- Technique: Card Tilt & Magnetic Glow --- */
  
  .card-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,119,221,0.65), transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* transform handled by GSAP */
  }
  
  .card-content {
    position: relative;
    z-index: 1;
    pointer-events: none; /* Let tilt capture events */
  }
  .card-content a, .card-content .dc-tag {
    pointer-events: auto; /* Restores links/tags */
  }
  /* --- Correct Technique 2: Tilt on d-card --- */
  .card-tilt {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    overflow: hidden; /* Contains the glow */
  }
  .card-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,119,221,0.45), transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* transform handled by GSAP */
  }
  .card-tilt:hover .card-glow {
    opacity: 1;
  }
  .card-tilt > *:not(.card-glow) {
    position: relative;
    z-index: 1;
    pointer-events: none; /* Pass events to card */
  }
  .card-tilt > a, .card-tilt > button {
    pointer-events: auto; /* Re-enable for links */
  }
  /* --- Technique 3: Bento Grid (Clean) --- */
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(260px, auto); /* Gives cards enough room to breathe natively */
    gap: 24px; /* Slightly larger gap for premium feel */
    width: 100%;
  }

  .bento-item {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    clip-path: inset(0 0 15% 0);
    transition: opacity 0.8s ease, transform 0.8s ease, clip-path 0.8s ease;
  }

  /* Make sure the native card expands to fill the grid cell perfectly */
  .d-card.bento-item {
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .span-2-row-2 { grid-row: span 2; grid-column: span 2; }
  /* Four domains → a 2 × 2 grid of tall cards, so each planet has room above its description */
  #domainsGrid { grid-auto-rows: minmax(380px, auto); }
  .span-2-col { grid-column: span 2; }
  
  /* On wide cards, we can do a very subtle adjustment if needed, but flex-col works fine */
  
  @media (max-width: 768px) {
    .bento-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .bento-grid {
      grid-template-columns: 1fr;
    }
    .span-2-row-2, .span-2-col {
      grid-row: auto;
      grid-column: span 1;
    }
  }

  /* RE-INJECTED CSS FOR COLOR TOKENS */

  .stat-num-val {
    font-size: 56px;
    font-weight: 700;
    color: var(--copper);
    margin-bottom: 5px;
    line-height: 1;
    letter-spacing: -1px;
  }
  .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray);
  }

  .d-card {
    background: var(--void-deep);
    border: 1px solid rgba(237,235,230,0.08);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: opacity 0.8s ease, transform 0.8s ease, clip-path 0.8s ease, border-color 0.4s ease;
    min-height: 280px;
    opacity: 0;
    transform: translateY(30px);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(30px);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transform: translateY(30px);
    clip-path: inset(0 0 100% 0);
  }
  .d-card {
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.6s ease, opacity 0.8s ease, clip-path 0.8s ease !important;
  }
  .d-card:hover {
    background: rgba(183,148,244,0.08);
    border-color: rgba(183,148,244,0.4);
    box-shadow: 0 8px 32px rgba(183,148,244,0.1), 0 0 20px rgba(183,148,244,0.15);
    transform: translateY(-4px) !important;
  }
  .d-num {
    font-family: monospace;
    color: var(--gray-dim);
    font-size: 13px;
    margin-bottom: 4px;
  }
  .d-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--off-white);
  }
  .d-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray);
    margin-top: auto;
  }

/* OLD FIX */

@media (max-width: 768px) {
  /* iOS CRASH FIX: Native horizontal scroll for cards */

  .domain-card {
    scroll-snap-align: center;
    margin-right: 20px;
  }

  #big-bang-flash {
    filter: none !important;
    box-shadow: 0 0 40px 40px #fff !important;
  }

  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #center {
    backdrop-filter: none !important;
    background: transparent !important;
  }

  #edition span:first-child {
    color: var(--off-white) !important;
  }
  #edition span:nth-child(2),
  #edition span:nth-child(4) {
    color: var(--copper) !important;
  }
}

/* =========================================
   PURE PC LOOK ON MOBILE (980px VIRTUAL WIDTH)
   ========================================= */

/* Exact typographical alignment: D under H, Y under T */

/* Fix overlaps */

/* Ensure domains are visible without GSAP opacity bugs */

/* Fix Safari translate(-50%) lag bug while preserving the scaling oval animation */

@keyframes mobileSafariRing {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Mobile Layout Overrides for Concept and Stats (since virtual width is 980px) */

/* ── CENTER GALAXY HERO TEXT ON MOBILE ── */

/* ── CENTER DOMAIN POPUP ON MOBILE ── */

/* removed old dc-event */

/* ══════════════════════════════════════════════
   GALAXY HERO — text inside the 3D visualization
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   DOMAIN POPUP — inside the galaxy visualization
   ══════════════════════════════════════════════ */

/* removed old dc-event */

/* ── GALAXY HUD panel (text inside 3D visualization) ── */

/* Stats (Restored to PC side-by-side layout, just scaled up for readability) */

/* Ticker / Marquee Typography for Mobile */

/* Mobile Domains Grid */

/* Force cards to show unconditionally on mobile */

/* Guarantee text stays on top of planets */

/* ── GALAXY SECTION MOBILE ── */

.is-touch .dc-event {
  width: 95% !important;
  max-width: 650px !important;
  display: flex !important;
  flex-direction: row !important; /* Side-by-side */
  align-items: center !important; /* Vertically center badge and text */
  justify-content: flex-start !important; /* Align content to the left */
  text-align: left !important;
  margin: 0 auto 16px auto !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}

.is-touch .dc-event-type {
  font-size: 16px !important;
  padding: 6px 16px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important; /* Prevent badge from squishing */
}

/* ── FIX OFFCENTER CARDS (REMOVE DESKTOP 48% PADDING) ── */
.is-touch .domain-scroll-section {
  padding: 0 20px !important;
  justify-content: center !important;
}

/* ── MOBILE DOMAIN CARD (LEFT ALIGNED LIKE PC) ── */
.is-touch .domain-card {
  text-align: left !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}

.is-touch .dc-desc {
  font-size: 26px !important;
  line-height: 1.6 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px 0 !important;
  text-align: left !important;
}

.is-touch .dc-events {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.is-touch .dc-event {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 0 16px 0 !important;
  padding: 18px 20px !important;
  gap: 16px !important;
}

.is-touch .dc-event-type {
  font-size: 14px !important;
  padding: 6px 14px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.is-touch .dc-event-name {
  font-size: 22px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.is-touch .dc-more {

  margin-top: 10px !important;
}

/* PRELOADER MOBILE */
/* Touch layout renders at ~980px wide, so the preloader is scaled up to stay legible */
.is-touch .preloader-content { width: 82vw; gap: 40px; }
.is-touch .pl-log { font-size: 26px; gap: 16px; }
.is-touch .pl-status, .is-touch .pl-meta { font-size: 20px; }
.is-touch #preloader-pct { font-size: 24px; }
.is-touch .pl-track { height: 28px; }
.is-touch .pl-tick { width: 11px; height: 11px; }
.is-touch .pl-planet { width: 20px; height: 20px; }
.is-touch .pl-trail { height: 3px; }

  /* --- SPEAKERS SECTION --- */
/* --- SPEAKERS MOBILE REDESIGN (.is-touch) --- */
.is-touch .speakers-section {
  height: auto !important; 
  padding-top: 60px !important; 
  padding-bottom: 100px !important;
}
.is-touch .speakers-sticky { 
  position: relative !important; 
  height: auto !important; 
  padding: 0 30px !important; 
}
.is-touch .speakers-track {
    will-change: transform; 
  flex-direction: column !important; 
  width: 100% !important; 
  padding-right: 0 !important; 
  gap: 50px !important; 
  margin-top: 50px !important;
}
.is-touch .speakers-h2-anim {
  font-size: 85px !important;
}

/* --- Mobile Card Layout --- */
.is-touch .speaker-card {
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(15, 15, 20, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}
.is-touch .card-left-edge {
  display: none !important;
}

/* --- Mobile Photo --- */
.is-touch .speaker-photo-wrap { 
  width: 100% !important; 
  height: 650px !important; 
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.is-touch .speaker-photo-wrap img {
  object-position: center 20% !important;
  filter: grayscale(0%) brightness(0.9) !important;
}

/* --- Mobile Text Content --- */
.is-touch .speaker-data { 
  padding: 30px 35px 35px !important; 
}
.is-touch .sql-query-wrap { 
  font-size: 20px !important; 
  padding: 14px 18px !important; 
  margin-bottom: 20px !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 8px !important;
}
.is-touch .spk-terminal-meta {
  font-size: 20px !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.05em !important;
}
.is-touch .spk-name { 
  font-size: 52px !important; 
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}
.is-touch .spk-badge {
  font-size: 22px !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.15em !important;
}
.is-touch .spk-bio { 
  font-size: 28px !important; 
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
  opacity: 0.85 !important;
}
.is-touch .spk-socials a {
  font-size: 24px !important;
  padding: 8px 0 !important;
}
.is-touch .speaker-details {
  opacity: 1 !important;
}

  .speakers-section {
    position: relative;
    background: transparent;
    z-index: 2;
    pointer-events: auto;
  }
  .speakers-sticky {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-left: 10vw;
  }
  
  .speakers-track {
    will-change: transform;
    display: flex;
    flex-wrap: nowrap;
    gap: 250px;
    width: max-content;
    padding-right: 30vw;
    will-change: transform;
    transform: translateZ(0);
  }
  .speaker-card {
    display: flex;
    transform: translateZ(0);
    will-change: transform;
    width: 900px; 
    height: 480px; 
    background: rgba(10, 10, 15, 0.95); 
    
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px; 
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  }
  .card-left-edge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom, var(--copper), var(--violet-glow));
    z-index: 10;
  }
  .speaker-photo-wrap {
    width: 320px; 
    height: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
  }
  .speaker-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: grayscale(20%) brightness(0.85);
    transition: filter 0.5s, opacity 0.5s, transform 0.8s;
  }
  .speaker-card:hover .speaker-photo-wrap img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.03);
  }
  .speaker-scan-line { display: none !important; }

  /* Placeholder art until speakers are announced (SVG injected by post-intro.js) */
  .spk-mystery {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 50% 40%, color-mix(in srgb, currentColor 22%, transparent), transparent 65%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
      #05040a;
  }
  .spk-mystery svg { width: 100%; height: 100%; max-height: 520px; }
  .spk-orbit {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.45;
    stroke-dasharray: 4 6;
  }
  .spk-planet { filter: drop-shadow(0 0 6px currentColor); }
  .spk-qmark {
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    fill: currentColor;
    fill-opacity: 0.85;
    animation: spkFlicker 4s steps(1, end) infinite;
  }
  .spk-classified {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.4em;
    fill: var(--copper);
    fill-opacity: 0.8;
  }
  @keyframes spkFlicker {
    0%, 100% { fill-opacity: 0.85; }
    46% { fill-opacity: 0.3; }
    48% { fill-opacity: 0.85; }
    50% { fill-opacity: 0.45; }
  }
  .session-speaker-tba {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Clash Display', 'Space Grotesk', sans-serif;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 15%, #05040a);
    border-color: color-mix(in srgb, currentColor 45%, transparent) !important;
  }

  .speaker-data {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
  }
  .sql-query-wrap {
    font-family: monospace;
    color: var(--violet-glow);
    font-size: 13px;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
  }
  .sql-query-wrap .blink {
    color: var(--stardust);
  }
  .speaker-details { opacity: 0; transition: opacity 0.8s ease; }
  .speaker-details.revealed { opacity: 1; }
  
  .spk-terminal-meta {
    font-family: monospace;
    font-size: 13px;
    color: var(--stardust);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    letter-spacing: 0.05em;
  }
  .meta-gold { color: var(--copper); font-family: monospace; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
  
  .spk-name { font-size: 42px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 8px; font-family: 'Clash Display', 'Space Grotesk', sans-serif; color: #fff; }
  .spk-badge { 
    font-family: monospace; 
    font-size: 14px; 
    letter-spacing: 0.15em; 
    color: var(--gray); 
    text-transform: uppercase;
    margin-bottom: 30px; 
  }
  .spk-bio { font-size: 16px; line-height: 1.7; color: var(--stardust); margin-bottom: 40px; }
  
  .spk-socials { display: flex; gap: 20px; font-family: monospace; font-size: 14px; }
  .spk-socials a { 
    color: var(--violet-glow); 
    text-decoration: none; 
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.3s; 
  }
  .spk-socials a:hover { 
    color: var(--copper); 
    border-bottom-color: var(--copper);
  }

  @media (max-width: 768px) {
    .speakers-section {
      height: auto; 
      padding-top: 50px; 
      padding-bottom: 100px;
    }
    .speakers-sticky { 
      position: relative; /* Disable sticky for mobile */
      height: auto; 
      padding: 0 20px; 
    }
    .speakers-track {
    will-change: transform; 
      flex-direction: column; /* Stack vertically */
      width: 100%; 
      padding-right: 0; 
      gap: 50px; 
    }
    .speaker-card { 
      flex-direction: column; 
      width: 100%; 
      height: auto; 
      box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }
    .speaker-photo-wrap { width: 100%; height: 300px; }
    .speaker-data { padding: 30px 20px; }
    
    .spk-name { font-size: 28px; }
    .spk-bio { font-size: 14px; margin-bottom: 20px; }
    .sql-query-wrap { font-size: 11px; padding: 10px; margin-bottom: 25px; }
  }

/* NAV TWEAKS FOR MOBILE */
.is-touch #nav-links { gap: 14px !important; right: 15px !important; top: 35px !important; align-items: center !important; }
.is-touch #nav-links > a:not(#nav-register) { display: none !important; }
.is-touch #nav-register { 
  height: 75px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 32px !important; 
  font-size: 20px !important; 
  font-weight: 700 !important;
}
.is-touch .nav-countdown-btn { 
  height: 75px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 32px !important; 
  font-size: 20px !important; 
  gap: 12px !important; 
  white-space: nowrap !important; 
}
.is-touch .nav-countdown-btn .unit { font-size: 14px !important; }

/* Hamburger Icon - Massive */
.is-touch #hamburger-btn {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 14px !important;
  width: 75px !important; 
  height: 75px !important;
  cursor: pointer;
  z-index: 1000;
}
.is-touch #hamburger-btn span {
  display: block;
  width: 100%;
  height: 6px !important;
  background-color: var(--violet-glow);
  border-radius: 3px;
}

/* Make D Logo bigger to match */
.is-touch #logo-svg-wrap {
  width: 75px !important;
  height: 75px !important;
}
.is-touch #logo-svg-wrap svg {
  width: 100% !important;
  height: 100% !important;
}

.is-touch #hamburger-btn span {
  transition: all 0.3s ease-in-out !important;
}
.is-touch #hamburger-btn span:nth-child(2) {
  background-color: var(--copper) !important;
}
.is-touch #hamburger-btn.active span:nth-child(1) {
  transform: translateY(20px) rotate(45deg) !important;
  background-color: var(--copper) !important;
}
.is-touch #hamburger-btn.active span:nth-child(2) {
  opacity: 0 !important;
}
.is-touch #hamburger-btn.active span:nth-child(3) {
  transform: translateY(-20px) rotate(-45deg) !important;
  background-color: var(--copper) !important;
}

/* Dropdown Menu Style */
.is-touch #mobile-menu-overlay {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  position: absolute !important;
  top: 130px !important; /* Below the nav bar */
  right: 15px !important;
  width: 550px !important;
  background: rgba(10, 5, 20, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--copper) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 30px rgba(139, 92, 246, 0.15) !important;
  overflow: hidden;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-10px);
  padding: 0 !important;

  backdrop-filter: none !important;
}
.is-touch #mobile-menu-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.is-touch #mobile-menu-overlay a {
  color: rgba(237, 235, 230, 0.9) !important;
  font-size: 30px !important;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  text-decoration: none;
  padding: 30px 40px !important;
  margin: 0 !important;
  letter-spacing: 0.1em;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.is-touch #mobile-menu-overlay a:last-child {
  border-bottom: none !important;
}

/* ═══ MOBILE / TOUCH OVERRIDES ═══ */

.is-touch #domain-bg-text {
    display: none !important;
  display: none !important;
}
.is-touch #grain-overlay {
  display: none !important;
}
.is-touch #big-bang-flash {
  display: none !important;
}

.is-touch * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .is-touch #big-bang-flash {
    filter: none !important;
    box-shadow: 0 0 40px 40px #fff !important;
  }

/* =========================================
   PURE PC LOOK ON MOBILE (980px VIRTUAL WIDTH)
   ========================================= */

.is-touch .t-verse, .is-touch .t-ata, .is-touch .t-d {
  font-size: 155px !important; /* Exact match with tagline */
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
}
.is-touch .t-d svg {
  width: 155px !important;
  height: 155px !important;
}

.is-touch #edition {
  font-size: 100px !important; /* Larger text */
  letter-spacing: 0.1em !important;
}

.is-touch #tagline {
  font-size: 155px !important;
  text-align: left !important; /* Manual alignment base */
  width: 100vw !important;
  display: block !important;
  line-height: 0.9 !important;
  margin-top: 1vh !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Exact typographical alignment: D under H, Y under T */
.is-touch .tl-the {
  display: block !important; 
  margin-left: 2.3em !important;
}
.is-touch .tl-data {
  display: block !important; 
  margin-left: 3.0em !important;
}
.is-touch .tl-galaxy {
  display: block !important; 
  margin-left: 0.9em !important;
}

.is-touch #cta-wrap {
  margin-top: 9vh !important;
}
.is-touch #cta-btn {
  transform: none !important;
  position: relative !important; 
  max-width: 95vw !important; /* Let content and JS dictate width */
  padding: 40px 60px !important;
  border-radius: 60px !important;
}
.is-touch #btn-sql-view {
  font-size: 24px !important; 
  line-height: 1.6 !important;
  white-space: nowrap !important; 
  text-align: left !important;
}
.is-touch #btn-text-view {
  font-size: 32px !important; /* Make 'Join the galaxy' crisp and legible */
}

/* Fix overlaps */
.is-touch #scroll-hint {
  bottom: -60px !important;
}

/* Ensure domains are visible without GSAP opacity bugs */
.is-touch .d-card {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.is-touch .mask-reveal-title .line-inner {
  transform: none !important;
}
.is-touch #cinematic-spacer {
  height: 10vh !important;
}
.is-touch .pin-outer {
  height: 300vh !important;
}
.is-touch .pin-scene {
  height: 100dvh !important;
  position: sticky !important;
  top: 0 !important;
}
.is-touch .portal-enter-wrap {
  display: flex !important;
  position: relative !important;
  height: 100dvh !important;
}

/* Touch layout is rendered at ~980px wide, so the comet ring is drawn thicker to read the same */
.is-touch #cta-btn::before { inset: -3px; padding: 3px; }
.is-touch #cta-btn::after { inset: -6px; filter: blur(18px); }

.is-touch #hero-info-bar {
  font-size: 18px !important; /* Slightly smaller */
  justify-content: flex-end !important; 
  letter-spacing: 0.2em !important;
  bottom: 1.5vh !important; /* Move it closer to the bottom edge */
  padding-right: 5vw !important; 
}

.is-touch #scroll-hint {
  transform: translateX(-50%) scale(1.5) !important;
  bottom: 3.5vh !important; /* Translated downwards */ /* Lift it up a bit so it sits perfectly above the info bar */
}

/* Mobile Layout Overrides for Concept and Stats (since virtual width is 980px) */
.is-touch .concept {
  grid-template-columns: 1fr !important;
  padding: 80px 40px !important;
  gap: 2rem !important;
}
.is-touch .concept-headline {
  font-size: 105px !important;
  line-height: 1.1 !important;
  margin-bottom: 35px !important;
}
.is-touch .concept-body {
  font-size: 38px !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
  margin-bottom: 40px !important;
}
.is-touch .eyebrow {
  font-size: 26px !important;
  margin-bottom: 20px !important;
}
.is-touch .tags {
  gap: 15px !important;
  margin-top: 30px !important;
}
.is-touch .tag {
  font-size: 22px !important;
  padding: 12px 24px !important;
  border-radius: 50px !important;
}
.is-touch .concept-right {
  height: 600px !important; /* Lots of space for the animation */
  margin-top: 40px !important;
}
.is-touch .orbit-label {
  font-size: 32px !important;
  bottom: 0px !important;
}
.is-touch .planet-label {
  margin-top: -80px;
  font-size: 17px !important;
  padding: 6px 14px !important;
}
/* ── CENTER GALAXY HERO TEXT ON MOBILE ── */
.is-touch .hero-center {
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: 90% !important;
  left: 50% !important;
  top: auto !important;
  bottom: 10% !important; /* Move text to bottom */
}
.is-touch .hero-center.hero-hidden { 
  opacity: 0 !important; 
  pointer-events: none !important; 
}

/* ── CENTER DOMAIN POPUP ON MOBILE ── */
.is-touch #scroll-container {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: 90% !important;
}

.is-touch .dc-events {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
/* removed old dc-event */

/* ══════════════════════════════════════════════
   GALAXY HERO — text inside the 3D visualization
   ══════════════════════════════════════════════ */
.is-touch .hero-eyebrow {
  font-size: 15px !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 20px !important;
  white-space: nowrap !important;
}
.is-touch .hero-title-split {
  font-size: clamp(40px, 12vw, 130px) !important;
}

.is-touch .explore-btn {
  font-size: 22px !important;
  padding: 18px 40px !important;
  margin-top: 30px !important;
}
.is-touch .scroll-cue span {
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
}

/* ══════════════════════════════════════════════
   DOMAIN POPUP — inside the galaxy visualization
   ══════════════════════════════════════════════ */
.is-touch .dc-tag {
  font-size: 18px !important;
  padding: 8px 20px !important;
  margin-bottom: 18px !important;
}
.is-touch .dc-title {
  font-size: clamp(36px, 10vw, 60px) !important;
  margin-bottom: 16px !important;
}

/* removed old dc-event */
.is-touch .dc-event-type {
  font-size: 14px !important;
  padding: 5px 12px !important;
}
.is-touch .dc-event-name {
  font-size: 20px !important;
  line-height: 1.4 !important;
}
.is-touch .dc-more {
  font-size: 20px !important;
  gap: 10px !important;
}

/* ── GALAXY HUD panel (text inside 3D visualization) ── */
.is-touch .hud-label {
  font-size: 22px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 10px !important;
}
.is-touch .hud-name {
  font-size: 56px !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
}
.is-touch .hud-desc {
  font-size: 28px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
}
.is-touch .domain-hud {
  bottom: 60px !important;
  left: 40px !important;
  right: 40px !important;
}

/* Stats (Restored to PC side-by-side layout, just scaled up for readability) */
.is-touch .sticky-header {
  padding: 80px 40px 40px 40px !important;
}
.is-touch .sticky-h2 {
  font-size: 85px !important;
}
.is-touch .scroll-zone {
  padding: 0 40px 80px 40px !important;
}
.is-touch .stat-row {
  grid-template-columns: 350px 2px 1fr !important; /* PC Layout restored! */
  gap: 0 40px !important;
  padding: 60px 0 !important;
}

.is-touch .stat-num-val {
  font-size: 120px !important;
}
.is-touch .stat-suffix {
  font-size: 22px !important;
}
.is-touch .stat-line {
  display: block !important;
  width: 2px !important; /* Force it to remain a thin line */
}
.is-touch .stat-label {
  font-size: 38px !important;
  margin-bottom: 10px !important;
}
.is-touch .stat-desc {
  font-size: 26px !important;
  line-height: 1.5 !important;
}

/* Ticker / Marquee Typography for Mobile */
.is-touch .ticker-wrap { padding: 30px 0 !important; pointer-events: none !important; }
.is-touch .ticker-text { font-size: 18px !important; }
.is-touch .ticker-dot { font-size: 14px !important; margin: 0 10px !important; }
/* Mobile Domains Grid */
.is-touch .d-planet-wrap {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  min-height: 300px !important;
}
.is-touch .d-card {
  padding: 40px 40px 40px 40px !important;
  min-height: 850px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.is-touch .domains-wrap {
  padding: 80px 40px !important;
}
.is-touch .domains-headline {
  font-size: 85px !important;
  line-height: 1.1 !important;
  margin-bottom: 50px !important;
}
.is-touch .bento-grid {
  grid-template-columns: 1fr !important; /* Stack all cards into a single tall column */
  gap: 30px !important;
}
.is-touch .bento-item {
  grid-column: span 1 !important;
  grid-row: auto !important;
  min-height: 850px !important;
  padding: 40px !important;
}
.is-touch .d-num {
  font-size: 26px !important;
}
.is-touch .d-name {
  font-size: 42px !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  line-height: 1.2 !important;
}
.is-touch .d-desc {
  font-size: 28px !important;
  line-height: 1.5 !important;
}

/* Force cards to show unconditionally on mobile */
.is-touch .bento-item, .is-touch .d-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  display: flex !important;
}

/* Guarantee text stays on top of planets */
.is-touch .d-num, .is-touch .d-name, .is-touch .d-desc {
  position: relative !important;
  z-index: 10 !important;
}
.is-touch .d-planet-wrap {
  z-index: 1 !important;
}

/* ── GALAXY SECTION MOBILE ── */
.is-touch .pw-item {
  white-space: nowrap !important;
  font-size: clamp(80px, 26vw, 200px) !important;
  /* NO opacity/transform override — let GSAP control animation */
}
.is-touch .portal-enter-text {
  font-size: clamp(90px, 22vw, 220px) !important;
  /* NO opacity/transform override — GSAP animates from scale(0.1) to scale(150) */
}
.is-touch #pwWord2 {
  font-size: clamp(72px, 22vw, 180px) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT ZONE — speakers & schedule, after the dive into the sun.
   Palette light mode: Cosmic White #FAF8FF, Haze #EDE0FF, Lavender #D4B8F0; ink #141414
   ══════════════════════════════════════════════════════════════ */
.light-zone { color: #141414; }
.light-zone .eyebrow { color: #7B5EA7; }
.light-zone .sticky-h2 { color: #141414; }
.light-zone .sticky-h2 span { color: #6D28D9; }

/* Speakers: white cards, the placeholder art stays a dark "photo" panel */
.light-zone .speaker-card {
  background: #FFFFFF;
  border: 1px solid #E6DDF6;
  box-shadow: 0 18px 50px rgba(74, 32, 112, 0.10);
}
.light-zone .speaker-photo-wrap { border-right-color: #EDE6F8; }
.light-zone .sql-query-wrap,
.light-zone .sql-query-wrap .blink { color: #6D28D9; }
.light-zone .spk-terminal-meta { color: #555555; }
.light-zone .meta-gold { color: #B26A1E; }
.light-zone .spk-name { color: #141414; }
.light-zone .spk-badge { color: #555555; }
.light-zone .spk-bio { color: #444444; }

/* Schedule */
.light-zone .schedule-tab { background: #FFFFFF; border-color: #E6DDF6; }
.light-zone .schedule-tab.active { background: #F4EEFF; border-color: #B794F4; box-shadow: 0 8px 30px rgba(109, 40, 217, 0.12); }
.light-zone .tab-top,
.light-zone .schedule-tab.active .tab-top { color: #6D28D9; }
.light-zone .tab-bottom { color: #555555; }
.light-zone .schedule-tab.active .tab-bottom { color: #141414; }
.light-zone .tab-date { color: #7A7A86; }
.light-zone .schedule-tab.active .tab-date { color: #B26A1E; }
.light-zone .schedule-timeline-wrapper { background: #FFFFFF; border-color: #E6DDF6; box-shadow: 0 20px 60px rgba(74, 32, 112, 0.08); }
.light-zone .schedule-query { color: #B26A1E; }
.light-zone .row-index { color: #A39EB3; }
.light-zone .row-time { color: #2C2C2C; }
.light-zone .timeline-node { background: #FAF8FF; }
.light-zone .schedule-card { background: #FBF9FF; border-color: #EDE6F8; }
.light-zone .schedule-card:hover { background: #F4EEFF; border-color: #B794F4; }
.light-zone .highlight-card { background: linear-gradient(135deg, #F1E9FF 0%, #FBF9FF 100%); border-color: #D4B8F0; }
.light-zone .card-cell-ref { color: #A39EB3; }
.light-zone .session-domain,
.light-zone .session-speaker { color: #555555; }
.light-zone .session-title { color: #141414; }
.light-zone .badge-access { color: #444444; background: #EEEAF5; border-color: #DDD6EA; }
.light-zone .badge-talk { color: #6D28D9; }
.light-zone .badge-keynote,
.light-zone .badge-panel { color: #B26A1E; }
.light-zone .badge-workshop { color: #1F8F7A; }
.light-zone .break-card { border-color: #DDD6EA !important; color: #7A7A86; }
.light-zone .schedule-footer { color: #6D28D9; }

/* Touch layout forces dark panels with !important — re-light them */
html.is-touch .light-zone .speaker-card {
  background: #FFFFFF !important;
  border: 1px solid #E6DDF6 !important;
  box-shadow: 0 12px 40px rgba(74, 32, 112, 0.10) !important;
}
html.is-touch .light-zone .speaker-photo-wrap { border-bottom: 1px solid #EDE6F8 !important; }
html.is-touch .light-zone .speaker-data { background: #FFFFFF !important; }
html.is-touch .light-zone .sql-query-wrap { background: #F4EEFF !important; }

/* ══════════════════════════════════════════════════════════════
   THE EVENT IN NUMBERS — figures riding a giant arc (title inside the half-disc)
   ══════════════════════════════════════════════════════════════ */
.impact { position: relative; z-index: 2; background: #000; }
.impact-stage { position: relative; height: 100vh; height: 100dvh; overflow: hidden; color: #F5F3EF; }
.impact-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.impact-arc circle { fill: rgba(139, 92, 246, 0.05); stroke: rgba(212, 184, 240, 0.32); stroke-width: 1; }
.impact-title {
  position: absolute; left: clamp(24px, 4vw, 64px); top: 50%; z-index: 1;
  transform: translateY(-50%);
  max-width: 22vw;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; line-height: 1.15;
  color: #F5F3EF;
}
.impact-title span { color: #B794F4; }

.impact-wheel { position: absolute; inset: 0; pointer-events: none; }
.impact-item {
  --front: 0;
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.impact-tick {                              /* the dot sits exactly on the arc; grows and glows at the front */
  position: absolute; width: 8px; height: 8px; left: -4px; top: -4px;
  border-radius: 50%; background: rgba(212, 184, 240, 0.5);
  transform: scale(calc(0.9 + var(--front) * 0.5));
  transition: background 0.3s, box-shadow 0.3s;
}
.impact-item.is-front .impact-tick { background: #F5F3EF; box-shadow: 0 0 14px rgba(183, 148, 244, 0.8); }
.impact-row {                              /* figure + label on one line, vertically centred on the arc */
  position: absolute; left: 36px; top: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 40px;
}
.impact-num {
  font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700;
  font-size: clamp(64px, 7.5vw, 120px); line-height: 1; white-space: nowrap;
  color: #F5F3EF;
  opacity: calc(0.4 + var(--front) * 0.6);
}
html:not(.is-touch) .impact-item.is-front .impact-num { text-shadow: 0 0 40px rgba(183, 148, 244, 0.25); }
.impact-num sup { font-size: 0.34em; vertical-align: 1.3em; margin-left: 0.04em; color: #B794F4; }
.impact-text { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; opacity: calc(0.15 + var(--front) * 0.85); }
.impact-label { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: #F5F3EF; }
.impact-desc { font-size: 15px; line-height: 1.55; color: rgba(245, 243, 239, 0.62); }

/* Touch layout (~980px wide): title on top, figures down the left */
.is-touch .impact-title { top: 5%; left: 50%; transform: translateX(-50%); max-width: none; text-align: center; font-size: 46px; }
.is-touch .impact-row { left: 34px; gap: 32px; }
.is-touch .impact-num { font-size: 130px; }
.is-touch .impact-label { font-size: 38px; }
.is-touch .impact-desc { font-size: 26px; white-space: normal; width: 440px; }
.is-touch .impact-tick { width: 14px; height: 14px; left: -7px; top: -7px; }

/* ── Concept: the D with four hairline orbits (domain colours), streaks of light sliding along them ── */
.concept-orbit { width: min(100%, 540px); height: auto; overflow: visible; }
.concept-orbit .orbit-line { fill: none; stroke: var(--c); stroke-width: 1.1; stroke-opacity: 0.5; }
.concept-orbit .orbit-line.is-over { stroke: #F5F3EF; stroke-opacity: 0.1; }
.concept-orbit .orbit-streak {
  fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-opacity: 0.95;
  filter: drop-shadow(0 0 4px var(--c));
}
.concept-orbit .orbit-streak.is-over { stroke: #F5F3EF; stroke-opacity: 0.18; stroke-width: 2; filter: none; }
.concept-orbit .orbit-ring { fill: #000; stroke: var(--c); stroke-width: 2; }
.concept-orbit .orbit-dot { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
#concept-core { filter: drop-shadow(0 12px 30px rgba(91, 33, 182, 0.35)); }
.is-touch .concept-orbit { width: 600px; }

/* ── The travelling D (fixed copy that flies from the concept core into the numbers title) ── */
#d-traveller {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 100px; aspect-ratio: 885 / 735;          /* scaled by JS (transform) to the size it flies between */
  visibility: hidden; pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
  filter: drop-shadow(0 18px 30px rgba(109, 40, 217, 0.45));
}
.is-touch #d-traveller { filter: none; }
#d-traveller svg, .impact-d-svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.impact-d {                                   /* the D as the first letter of "Dataverse" */
  display: inline-block;
  width: 0.86em; height: 0.72em;
  margin-right: 0.04em;
  vertical-align: -0.02em;
  color: #8B5CF6;
}
#concept-core { transition: opacity 0.2s ease; }

/* ══════════════════════════════════════════════════════════════
   DOMAINS — a deck of planet cards, dealt with the arrows or a drag / swipe
   ══════════════════════════════════════════════════════════════ */
.domains-deck { position: relative; z-index: 2; background: #000; }
.deck-stage {
  position: relative; height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 0 clamp(24px, 6vw, 110px);
}
.deck-glow {                                   /* ambient light that takes the front card's colour */
  --glow: #B794F4;
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 72% 52%, color-mix(in srgb, var(--glow) 32%, transparent), transparent 70%),
    radial-gradient(30% 40% at 78% 80%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%);
}
.deck-side { position: relative; z-index: 1; }
.deck-headline { font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; color: #F5F3EF; }
.deck-headline span { color: #8B5CF6; }
.deck-list { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.deck-list li {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid rgba(245, 243, 239, 0.08);
  cursor: pointer; color: rgba(245, 243, 239, 0.35);
  transition: color 0.35s ease, padding-left 0.35s ease;
}
.deck-list li.on { color: #F5F3EF; padding-left: 14px; }
.deck-li-num { font-family: 'Space Mono', monospace; font-size: 12px; color: inherit; }
.deck-list li.on .deck-li-num { color: var(--c); }
.deck-li-name { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; }
.deck-count { margin-top: 28px; font-family: 'Space Mono', monospace; font-size: 13px; color: #8A8894; }
.deck-count span { color: #F5F3EF; }

.deck { position: relative; justify-self: center; width: min(380px, 30vw); aspect-ratio: 0.72; z-index: 1; }
.deck-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, #17121F 0%, #0C0A12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform-origin: 50% 85%;
  will-change: transform, opacity;
}
.deck-top { display: flex; justify-content: space-between; align-items: center; }
.deck-num { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--c); letter-spacing: 0.1em; }
.deck-go {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: #F5F3EF; text-decoration: none; font-size: 15px;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.deck-go:hover { background: var(--c); color: #0C0A12; transform: rotate(45deg); }
.deck-title {
  margin: 18px 0 16px;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600;
  line-height: 1.05; text-transform: uppercase; text-align: center; letter-spacing: 0.01em; color: #F5F3EF;
}
.deck-frame {
  position: relative; flex: 1; min-height: 0;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%),
    radial-gradient(120% 90% at 20% 0%, #241638, #0A0812);
}
.deck-frame::before {                          /* a sprinkle of stars behind the planet */
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, #fff7, transparent), radial-gradient(1px 1px at 35% 80%, #fff5, transparent),
    radial-gradient(1px 1px at 55% 55%, #fff4, transparent);
}
.deck-badge {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.04em; color: #F5F3EF;
  background: rgba(10, 8, 18, 0.65); border: 1px solid rgba(255, 255, 255, 0.12);
}
.deck-desc { margin-top: 16px; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(245, 243, 239, 0.6); }

/* Touch layout (~980px wide): heading on top, the deck below */
.is-touch .deck-stage { grid-template-columns: 1fr; align-content: center; gap: 70px; padding: 0 60px; }
.is-touch .deck-list { display: none; }
.is-touch .deck-count { font-size: 24px; }
.is-touch .deck-headline { font-size: 80px; }
.is-touch .deck { width: 560px; }
.is-touch .deck-card { padding: 32px; border-radius: 40px; }
.is-touch .deck-num { font-size: 22px; }
.is-touch .deck-go { width: 56px; height: 56px; font-size: 26px; }
.is-touch .deck-title { font-size: 46px; margin: 26px 0 22px; }
.is-touch .deck-badge { font-size: 20px; padding: 10px 20px; bottom: 20px; }
.is-touch .deck-desc { font-size: 22px; }
.deck-frame .d-planet-wrap > div { position: absolute; inset: 0; }
.deck-frame .d-planet-wrap canvas { display: block; width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════
   SESSIONS DOSSIER — identity panel + programme timeline
   ══════════════════════════════════════════════════════════════ */
.dossier-overlay {
  position: fixed; inset: 0; z-index: 10050;
  display: grid; place-items: center; padding: 24px;
  background: rgba(3, 2, 8, 0.72); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.dossier-overlay.active { opacity: 1; visibility: visible; }
.dossier {
  --c: #B794F4;
  position: relative;
  width: min(980px, 100%); max-height: min(640px, calc(100dvh - 48px));
  display: grid; grid-template-columns: 0.9fr 1.3fr;
  border-radius: 28px; overflow: hidden;
  background: #0C0A12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 120px color-mix(in srgb, var(--c) 14%, transparent);
  transform: translateY(30px) scale(0.96); opacity: 0;
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease;
}
.dossier-overlay.active .dossier { transform: none; opacity: 1; }

/* identity */
.dossier-id {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  padding: 36px;
  background:
    radial-gradient(70% 55% at 50% 30%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
    linear-gradient(160deg, #1A1228 0%, #0C0A12 75%);
  transform: translateX(-24px); opacity: 0;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1) 0.12s, opacity 0.5s ease 0.12s;
}
.dossier-overlay.active .dossier-id { transform: none; opacity: 1; }
.dossier-orbit { display: block; width: 88%; margin: 0 auto auto; overflow: visible; }   /* sits above the text, never under it */
.dossier-orbit ellipse { fill: none; stroke: var(--c); stroke-opacity: 0.35; stroke-width: 1; }
.dossier-planet {
  fill: var(--c);
  filter: drop-shadow(0 0 24px var(--c));
  animation: dossierBreathe 4s ease-in-out infinite;
  transform-origin: 150px 150px;
}
.dossier-moon { fill: #F5F3EF; filter: drop-shadow(0 0 6px #fff); }
@keyframes dossierBreathe { 50% { transform: scale(1.06); } }
.dossier-num {
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 84px; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--c) 70%, transparent);
}
.dossier-name { margin: 10px 0 12px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; color: #F5F3EF; }
.dossier-tag { font-size: 14px; line-height: 1.6; color: rgba(245, 243, 239, 0.66); max-width: 34ch; }
.dossier-stats { list-style: none; margin: 26px 0 0; padding: 18px 0 0; display: flex; gap: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dossier-stats li { display: flex; flex-direction: column; gap: 2px; }
.dossier-stats strong { font-family: 'Space Mono', monospace; font-size: 24px; color: var(--c); }
.dossier-stats span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8894; }

/* programme */
.dossier-prog { display: flex; flex-direction: column; min-height: 0; padding: 32px 36px 28px; }
.dossier-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dossier-kicker { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #8A8894; }
.dossier-close {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #F5F3EF;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.dossier-close:hover, .dossier-close:focus-visible { background: var(--c); color: #0C0A12; border-color: var(--c); transform: rotate(90deg); outline: none; }
.dossier-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; position: relative; }
.dossier-list::before {                        /* the timeline spine */
  content: ''; position: absolute; left: 76px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(var(--c), transparent);
  opacity: 0.4;
}
.dossier-row {
  position: relative;
  display: grid; grid-template-columns: 60px 32px 1fr; align-items: start;
  padding: 18px 14px 18px 0; border-radius: 16px;
  transform: translateY(14px); opacity: 0;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.4s ease, background 0.3s;
}
.dossier-overlay.active .dossier-row { transform: none; opacity: 1; transition-delay: calc(0.25s + var(--k) * 0.08s), calc(0.25s + var(--k) * 0.08s), 0s; }
.dossier-row:hover { background: color-mix(in srgb, var(--c) 9%, transparent); }
.dossier-time { padding-top: 2px; font-family: 'Space Mono', monospace; font-size: 14px; color: #F5F3EF; }
.dossier-node {
  justify-self: center; margin-top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #0C0A12; border: 2px solid var(--c);
  transition: background 0.3s, box-shadow 0.3s;
}
.dossier-row:hover .dossier-node { background: var(--c); box-shadow: 0 0 12px var(--c); }
.dossier-type { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.dossier-type.is-talk { color: var(--c); }
.dossier-type.is-ws { color: #E8A559; }
.dossier-title { margin: 6px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; color: #F5F3EF; }
.dossier-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #8A8894; }
.dossier-meta span + span::before { content: '·'; margin-right: 16px; color: #55535E; }
.dossier-note { margin-top: 14px; font-size: 11px; color: #55535E; }

/* phones: bottom sheet, identity on top */
@media (max-width: 760px) {
  .dossier-overlay { padding: 0; place-items: end center; }
  .dossier { grid-template-columns: 1fr; border-radius: 26px 26px 0 0; max-height: 92dvh; overflow-y: auto; transform: translateY(100%); }
  .dossier-id { min-height: 260px; padding: 28px; }
  .dossier-orbit { width: 70%; margin-bottom: 18px; }
}
.is-touch .dossier-overlay { padding: 0; place-items: end center; }
.is-touch .dossier { grid-template-columns: 1fr; width: 100%; border-radius: 48px 48px 0 0; max-height: 90dvh; overflow-y: auto; transform: translateY(100%); }
.is-touch .dossier-overlay.active .dossier { transform: none; }
.is-touch .dossier-id { min-height: 520px; padding: 56px; }
.is-touch .dossier-orbit { width: 64%; margin-bottom: 30px; }
.is-touch .dossier-num { font-size: 150px; }
.is-touch .dossier-name { font-size: 76px; }
.is-touch .dossier-tag { font-size: 28px; max-width: none; }
.is-touch .dossier-stats strong { font-size: 44px; }
.is-touch .dossier-stats span { font-size: 20px; }
.is-touch .dossier-prog { padding: 48px 56px 56px; }
.is-touch .dossier-kicker { font-size: 20px; }
.is-touch .dossier-close { width: 76px; height: 76px; font-size: 28px; }
.is-touch .dossier-list { overflow: visible; }
.is-touch .dossier-list::before { left: 128px; }
.is-touch .dossier-row { grid-template-columns: 100px 56px 1fr; padding: 30px 20px 30px 0; }
.is-touch .dossier-time { font-size: 26px; }
.is-touch .dossier-node { width: 16px; height: 16px; }
.is-touch .dossier-type { font-size: 18px; }
.is-touch .dossier-title { font-size: 34px; }
.is-touch .dossier-meta { font-size: 22px; }
.is-touch .dossier-note { font-size: 20px; }

/* ── The D's landing spot in the deck: a pool of violet, a thin ripple and three impact strokes ── */
.deck-burst { position: absolute; width: 0; height: 0; z-index: 0; pointer-events: none; }   /* behind the cards */
.deck-core {                                   /* the D arrives as a small drop */
  position: absolute; left: -22px; top: -18px; width: 44px; height: 37px; z-index: 2;
  color: #8B5CF6;
}
.deck-core svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.deck-puddle {
  position: absolute; left: -130px; top: -24px; width: 260px; height: 48px; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 38%, #B9A2F2 0%, #8E6FDB 45%, #6D48C4 80%, #5B3AAE 100%);
}
.deck-ripple {
  position: absolute; left: -170px; top: -36px; width: 340px; height: 72px; border-radius: 50%; opacity: 0;
  border: 1px solid rgba(212, 184, 240, 0.55);
}
.deck-splash {
  position: absolute; left: -20px; top: -58px; width: 40px; height: 24px; opacity: 0; overflow: visible;
  fill: none; stroke: rgba(245, 243, 239, 0.85); stroke-width: 1.4; stroke-linecap: round;
}
.is-touch .deck-core { left: -40px; top: -33px; width: 80px; height: 67px; }
.is-touch .deck-puddle { left: -230px; top: -42px; width: 460px; height: 84px; }
.is-touch .deck-ripple { left: -300px; top: -62px; width: 600px; height: 124px; border-width: 2px; }
.is-touch .deck-splash { left: -36px; top: -100px; width: 72px; height: 43px; stroke-width: 1.6; }

/* ── Deck controls, like the reference: a hint bottom-left, two round arrows bottom-right ── */
.deck { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.deck-card { -webkit-user-drag: none; }
.deck-controls {
  position: absolute; left: clamp(24px, 6vw, 110px); right: clamp(24px, 6vw, 110px); bottom: clamp(22px, 4vh, 44px); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.deck-hint { margin: 0; font-size: 12px; letter-spacing: 0.02em; color: rgba(245, 243, 239, 0.45); }
.deck-hint .hint-touch { display: none; }
.deck-arrows { display: flex; gap: 10px; }
.deck-arrow {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 243, 239, 0.18); color: #F5F3EF;
  cursor: none; transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.deck-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.deck-arrow:hover { background: rgba(139, 92, 246, 0.25); border-color: rgba(183, 148, 244, 0.7); }
.deck-arrow:active { transform: scale(0.94); }
.deck-arrow:focus-visible { outline: 2px solid #B794F4; outline-offset: 3px; }
/* phones (~980px wide page): bigger, finger-sized */
.is-touch .deck-controls { bottom: 56px; left: 60px; right: 60px; }
.is-touch .deck-hint { font-size: 22px; }
.is-touch .deck-hint .hint-pc { display: none; }
.is-touch .deck-hint .hint-touch { display: inline; }
.is-touch .deck-arrows { gap: 22px; }
.is-touch .deck-arrow { width: 110px; height: 110px; border-width: 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.is-touch .deck-arrow svg { width: 38px; height: 38px; stroke-width: 1.6; }

/* phones: lighter card shadows while the deck is being dealt */
.is-touch .deck-card { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }

/* ══════════════════════════════════════════════════════════════
   SCHEDULE on the light page — an editorial timetable
   ══════════════════════════════════════════════════════════════ */
.light-zone.schedule-section { padding: 120px clamp(20px, 6vw, 96px) 140px; }
.light-zone .schedule-container { max-width: 1120px; }
.light-zone .schedule-intro { margin-bottom: 0; }
.light-zone .schedule-intro .eyebrow { color: #7B5EA7; margin-bottom: 10px; }
.light-zone .schedule-h2 { margin: 0; font-size: clamp(56px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.04em; color: #141414; }
.light-zone .schedule-h2 span { color: #6D28D9; }

/* day switch: a pill control under the title */
.light-zone .schedule-grid { display: block; }
.light-zone .schedule-tabs {
  position: static; flex-direction: row; gap: 0; margin: 36px 0 28px;
  display: inline-flex; padding: 5px; border-radius: 999px;
  background: #EFEAF8; border: 1px solid #E2D9F3;
}
.light-zone .schedule-tab {
  padding: 12px 26px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  display: flex; align-items: baseline; gap: 12px; text-align: left;
  transition: background 0.35s ease, color 0.35s ease;
}
.light-zone .schedule-tab .tab-top { margin: 0; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #7B5EA7; opacity: 1; }
.light-zone .schedule-tab .tab-bottom { font-size: 18px; font-weight: 600; color: #3A3644; }
.light-zone .schedule-tab .tab-date { color: inherit; }
.light-zone .schedule-tab.active { background: #141414; box-shadow: 0 8px 24px rgba(20, 20, 20, 0.18); }
.light-zone .schedule-tab.active .tab-top { color: #B794F4; }
.light-zone .schedule-tab.active .tab-bottom, .light-zone .schedule-tab.active .tab-date { color: #FAF8FF; }

/* the board */
.light-zone .schedule-timeline-wrapper { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.light-zone .schedule-query {
  display: inline-block; margin-bottom: 18px; padding: 8px 14px; border-radius: 10px;
  background: #F1EBFC; color: #6D28D9; font-size: 12px;
}
.light-zone .timeline-line, .light-zone .timeline-node, .light-zone .row-index, .light-zone .card-cell-ref { display: none; }
.light-zone .schedule-day { border-top: 1px solid #1414141f; }
.light-zone .schedule-row {
  position: relative;
  display: grid; grid-template-columns: 130px 1fr; align-items: start;
  margin: 0; padding: 0; border-bottom: 1px solid #1414141a;
}
.light-zone .schedule-day.active .schedule-row { animation: schedRow 0.6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 0.05s); }
@keyframes schedRow { from { opacity: 0; transform: translateY(14px); } }
.light-zone .row-meta { display: block; padding: 26px 0; text-align: left; }
.light-zone .row-time { font-family: 'Space Mono', monospace; font-size: 22px; font-weight: 700; color: #141414; line-height: 1; }
.light-zone .row-time span { display: block; margin-top: 6px; font-size: 11px !important; font-weight: 400; color: #8A8894 !important; }
.light-zone .schedule-card {
  position: relative; margin: 0; padding: 22px 56px 22px 22px;
  background: transparent; border: 0; border-radius: 14px;
  transition: background 0.3s ease;
}
.light-zone .schedule-card::before {          /* accent bar that appears on hover */
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--type, #6D28D9); transform: scaleY(0); transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.light-zone .schedule-card::after {           /* arrow that slides in */
  content: '→'; position: absolute; right: 18px; top: 50%; font-size: 20px; color: var(--type, #6D28D9);
  transform: translate(-10px, -50%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease;
}
.light-zone .schedule-row:not(.break-row):hover .schedule-card { background: #F4EEFF; }
.light-zone .schedule-row:hover .schedule-card::before { transform: scaleY(1); }
.light-zone .schedule-row:not(.break-row):hover .schedule-card::after { transform: translate(0, -50%); opacity: 1; }
.light-zone .highlight-card { background: linear-gradient(90deg, #F4EEFF, transparent 70%); }
.light-zone .card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.light-zone .session-badge {
  padding: 4px 10px; border-radius: 999px; border: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: #fff; background: var(--type, #6D28D9);
}
.light-zone .badge-access     { --type: #555555; }
.light-zone .badge-keynote    { --type: #B26A1E; }
.light-zone .badge-talk       { --type: #6D28D9; }
.light-zone .badge-workshop   { --type: #1F8F7A; }
.light-zone .badge-panel      { --type: #C0306A; }
.light-zone .badge-networking { --type: #4A2070; }
.light-zone .schedule-card:has(.badge-access)     { --type: #555555; }
.light-zone .schedule-card:has(.badge-keynote)    { --type: #B26A1E; }
.light-zone .schedule-card:has(.badge-workshop)   { --type: #1F8F7A; }
.light-zone .schedule-card:has(.badge-panel)      { --type: #C0306A; }
.light-zone .schedule-card:has(.badge-networking) { --type: #4A2070; }
.light-zone .session-domain { font-size: 13px; color: #6E6A7A; }
.light-zone .session-title { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.2; color: #141414; }
.light-zone .session-speaker { font-size: 14px; color: #6E6A7A; }
.light-zone .break-row .row-meta { padding: 16px 0; }
.light-zone .break-row .row-time { font-size: 15px; color: #8A8894; }
.light-zone .break-card {
  margin: 10px 0; padding: 12px 22px !important; border: 1px dashed #D6CFE4 !important; border-radius: 12px;
  font-size: 14px; font-style: italic; color: #8A8894; background: repeating-linear-gradient(-45deg, transparent 0 8px, #F4F1FA 8px 16px) !important;
}
.light-zone .schedule-footer { margin-top: 18px; font-family: 'Space Mono', monospace; font-size: 12px; color: #7B5EA7; }

/* Touch layout (~980px wide) */
html.is-touch .light-zone.schedule-section { padding: 120px 48px 140px !important; }
html.is-touch .light-zone .schedule-h2 { font-size: 120px !important; }
html.is-touch .light-zone .schedule-intro .eyebrow { font-size: 24px !important; }
html.is-touch .light-zone .schedule-tabs { display: flex !important; flex-direction: row !important; width: 100%; margin: 48px 0 36px !important; }
html.is-touch .light-zone .schedule-tab { flex: 1; justify-content: center; padding: 26px 20px !important; }
html.is-touch .light-zone .schedule-tab .tab-top { font-size: 20px !important; }
html.is-touch .light-zone .schedule-tab .tab-bottom { font-size: 32px !important; }
html.is-touch .light-zone .schedule-query { font-size: 20px !important; padding: 14px 20px !important; }
html.is-touch .light-zone .schedule-row { grid-template-columns: 170px 1fr !important; }
html.is-touch .light-zone .row-meta { padding: 36px 0 !important; }
html.is-touch .light-zone .row-time { font-size: 34px !important; }
html.is-touch .light-zone .schedule-card { padding: 32px 24px !important; margin: 0 !important; }
html.is-touch .light-zone .session-badge { font-size: 18px !important; padding: 8px 16px !important; }
html.is-touch .light-zone .session-domain { font-size: 22px !important; }
html.is-touch .light-zone .session-title { font-size: 38px !important; }
html.is-touch .light-zone .session-speaker { font-size: 24px !important; }
html.is-touch .light-zone .break-card { font-size: 24px !important; padding: 20px 28px !important; }
html.is-touch .light-zone .schedule-footer { font-size: 20px !important; }

/* Desktop: sticky day switch on the left, the timetable inside a container on the right */
html:not(.is-touch) .light-zone .schedule-container { max-width: 1280px; }
html:not(.is-touch) .light-zone .schedule-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; margin-top: 44px;
}
html:not(.is-touch) .light-zone .schedule-tabs {
  position: sticky; top: 110px; margin: 0;
  flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-radius: 22px;
}
html:not(.is-touch) .light-zone .schedule-tab {
  flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 22px; border-radius: 16px;
}
html:not(.is-touch) .light-zone .schedule-tab .tab-bottom { font-size: 22px; }
html:not(.is-touch) .light-zone .schedule-timeline-wrapper {
  background: #FFFFFF; border: 1px solid #E8E1F4; border-radius: 28px;
  padding: 32px 36px 28px;
  box-shadow: 0 24px 70px rgba(74, 32, 112, 0.08);
}
html:not(.is-touch) .light-zone .schedule-row { grid-template-columns: 110px 1fr; }

/* day buttons: full names, large, on desktop; short names in the phone pills */
.tab-long { display: none; }
html:not(.is-touch) .light-zone .tab-long { display: inline; }
html:not(.is-touch) .light-zone .tab-short { display: none; }
html:not(.is-touch) .light-zone .schedule-grid { grid-template-columns: 400px 1fr; gap: 56px; }
html:not(.is-touch) .light-zone .schedule-tabs { gap: 10px; padding: 8px; border-radius: 26px; }
html:not(.is-touch) .light-zone .schedule-tab { padding: 34px 36px; gap: 10px; border-radius: 20px; }
html:not(.is-touch) .light-zone .schedule-tab .tab-top { font-size: 15px; letter-spacing: 0.12em; }
html:not(.is-touch) .light-zone .schedule-tab .tab-bottom { font-size: 32px; line-height: 1.15; }
html:not(.is-touch) .light-zone .schedule-tab .tab-date { color: #B26A1E; }
html:not(.is-touch) .light-zone .schedule-tab.active .tab-date { color: #E8A559; }

/* desktop day buttons: two separate cards as in the original design (active = lavender, violet border) */
html:not(.is-touch) .light-zone .schedule-grid { grid-template-columns: 470px 1fr; gap: 80px; }
html:not(.is-touch) .light-zone .schedule-tabs {
  background: transparent; border: 0; padding: 0; border-radius: 0; gap: 18px;
}
html:not(.is-touch) .light-zone .schedule-tab {
  padding: 42px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid #E6DDF6; box-shadow: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
html:not(.is-touch) .light-zone .schedule-tab:hover { border-color: #D4B8F0; }
html:not(.is-touch) .light-zone .schedule-tab.active {
  background: #F4EEFF; border-color: #B794F4; box-shadow: 0 8px 30px rgba(109, 40, 217, 0.12);
}
html:not(.is-touch) .light-zone .schedule-tab .tab-top { font-size: 16px; letter-spacing: 0.12em; color: #A78BFA; }
html:not(.is-touch) .light-zone .schedule-tab.active .tab-top { color: #6D28D9; }
html:not(.is-touch) .light-zone .schedule-tab .tab-bottom { font-size: 34px; color: #555555; }
html:not(.is-touch) .light-zone .schedule-tab.active .tab-bottom { color: #141414; }
html:not(.is-touch) .light-zone .schedule-tab .tab-date { color: #7A7A86; }
html:not(.is-touch) .light-zone .schedule-tab.active .tab-date { color: #B26A1E; }

/* desktop: the schedule uses the full width of the screen */
html:not(.is-touch) .light-zone.schedule-section { padding-left: clamp(24px, 4vw, 72px); padding-right: clamp(24px, 4vw, 72px); }
html:not(.is-touch) .light-zone .schedule-container { max-width: none; width: 100%; }
html:not(.is-touch) .light-zone .schedule-grid { grid-template-columns: minmax(380px, 30%) 1fr; gap: clamp(40px, 4vw, 80px); }

/* ── Clash Display tuning: it is already tight and wide, so headings need their spaces back ── */
.concept-headline, .deck-headline, .schedule-h2, .sticky-h2, .impact-title, .domains-headline,
.dossier-name, .hero-title-split, .sessions-modal-title, .spk-name, .session-title, .deck-title {
  letter-spacing: -0.005em !important;
  word-spacing: 0.06em;
}

/* Hero title (DATAVERSE / EDITION 5.0 / THE DATA GALAXY) and the portal words keep their original Space Grotesk */
.t-d, .t-ata, .t-verse, #edition, #edition span, #tagline, #tagline span,
.pw-item, .portal-enter-text, #enterNow, #enterNow div { font-family: 'Space Grotesk', sans-serif !important; }
.pw-item { white-space: nowrap; }

/* "Schedule." matches the "Guest speakers." heading */
.light-zone .schedule-h2 { font-size: clamp(42px, 6vw, 72px); line-height: 1.1; color: #6D28D9; }
.light-zone .schedule-h2 span { color: inherit; }
html.is-touch .light-zone .schedule-h2 { font-size: 85px !important; }
/* same left margin as the speakers section */
html:not(.is-touch) .light-zone.schedule-section { padding-left: 10vw; padding-right: 4vw; }

.deck-go svg { display: block; }
.is-touch .deck-go svg { width: 24px; height: 24px; }

/* ── Smoothness ── */
#hero:not(.in-view) #cta-btn,
#hero:not(.in-view) #cta-btn::before,
#hero:not(.in-view) #cta-btn::after { animation-play-state: paused; }
#d-traveller, .deck-card, .impact-item, #domainsGrid { backface-visibility: hidden; }

/* low-end devices: same motion, none of the expensive paint work */
.low-end #cta-btn::after { display: none; }                         /* blurred, rotating halo */
.low-end #d-traveller, .low-end #concept-core { filter: none !important; }
.low-end .dossier-overlay, .low-end #nav-links, .low-end .nav-countdown-btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.low-end .deck-card { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45) !important; }
.low-end .concept-orbit .orbit-streak, .low-end .concept-orbit .orbit-dot { filter: none; }
.low-end .impact-item.is-front .impact-num { text-shadow: none !important; }
.low-end #grain-overlay, .low-end .vignette { display: none; }

.dossier-overlay:not(.active) * { animation-play-state: paused !important; }

/* heavy infinite effects stop while their section is off-screen */
#hero:not(.in-view) *, #hero:not(.in-view) *::before, #hero:not(.in-view) *::after { animation-play-state: paused !important; }
.low-end .t-verse { animation: none !important; }
#galaxy-hero:not(.in-view) .explore-btn { animation-play-state: paused !important; }

/* ── Speakers (desktop): a row of portrait cards with generous gaps, gliding left with the scroll ── */
.speakers-track.is-row {
  display: flex !important; flex-direction: row !important; align-items: stretch;
  gap: clamp(64px, 6.5vw, 120px) !important;
  width: max-content !important; padding: 0 12vw 0 0 !important;
  will-change: transform;
}
.speakers-track.is-row .speaker-card {
  flex: 0 0 auto;
  width: clamp(300px, 21vw, 380px) !important; height: auto !important;
  flex-direction: column !important;
}
.speakers-track.is-row .speaker-photo-wrap { width: 100% !important; height: clamp(220px, 17vw, 290px) !important; border-right: 0 !important; border-bottom: 1px solid #EDE6F8; }
.speakers-track.is-row .speaker-data { padding: 22px 24px 26px !important; justify-content: flex-start !important; }
.speakers-track.is-row .sql-query-wrap { font-size: 11px; margin-bottom: 14px; white-space: nowrap; overflow: hidden; }
.speakers-track.is-row .spk-terminal-meta { margin-bottom: 14px; gap: 6px; }
.speakers-track.is-row .meta-gold { font-size: 11px; }
.speakers-track.is-row .spk-name { font-size: 26px; margin-bottom: 6px; }
.speakers-track.is-row .spk-badge { font-size: 11px; margin-bottom: 14px; }
.speakers-track.is-row .spk-bio { font-size: 13px; line-height: 1.55; margin-bottom: 0; }
html:not(.is-touch) .speakers-sticky { overflow: hidden; }

/* desktop speaker cards: square */
.speakers-track.is-row .speaker-card {
  width: clamp(320px, 24vw, 420px) !important; aspect-ratio: 1 / 1; height: auto !important; overflow: hidden;
}
.speakers-track.is-row .speaker-photo-wrap { height: 50% !important; flex: 0 0 50%; }
.speakers-track.is-row .speaker-data { flex: 1 1 auto; min-height: 0; padding: 16px 22px 18px !important; }
.speakers-track.is-row .sql-query-wrap { margin-bottom: 8px; }
.speakers-track.is-row .spk-terminal-meta { margin-bottom: 8px; gap: 3px; }
.speakers-track.is-row .spk-name { font-size: 22px; margin-bottom: 4px; }
.speakers-track.is-row .spk-badge { margin-bottom: 8px; }
.speakers-track.is-row .spk-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* desktop speaker cards: big squares like the reference — art fills the card, text over its lower part */
.speakers-track.is-row { gap: clamp(100px, 9vw, 180px) !important; }
.speakers-track.is-row .speaker-card {
  position: relative !important;
  width: clamp(380px, 30vw, 560px) !important; aspect-ratio: 1 / 1; height: auto !important;
  background: #07050D !important; border: 1px solid rgba(183, 148, 244, 0.25) !important; border-radius: 18px !important;
}
.speakers-track.is-row .speaker-photo-wrap {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; flex: none; border: 0 !important;
}
.speakers-track.is-row .spk-classified { display: none; }
.speakers-track.is-row .speaker-data {
  position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 70px 26px 24px !important; background: linear-gradient(to top, rgba(7, 5, 13, 0.96) 55%, rgba(7, 5, 13, 0)) !important;
}
.speakers-track.is-row .sql-query-wrap { color: #B794F4 !important; margin-bottom: 10px; }
.speakers-track.is-row .spk-terminal-meta { flex-direction: row; gap: 16px; margin-bottom: 8px; }
.speakers-track.is-row .meta-gold { color: #E8A559 !important; }
.speakers-track.is-row .spk-name { color: #F5F3EF !important; font-size: clamp(24px, 2vw, 32px); }
.speakers-track.is-row .spk-badge { color: #8A8894 !important; margin-bottom: 0; }
.speakers-track.is-row .spk-bio { display: none; }

.speakers-track.is-row { will-change: auto; }
.speakers-track.is-row .speaker-card { will-change: transform; }

/* every D logo uses the brand gradient: darkest purple on the left to lightest on the right */
#d-traveller svg, .impact-d-svg, .deck-core svg, #logo-svg-wrap svg path, #concept-core path { fill: url(#dBrand) !important; }

/* Explore: the same comet border as "Join the galaxy" — two streaks of light chasing around the pill */
.explore-btn {
  position: relative;
  border: 1px solid rgba(183,148,244,.12) !important;
  backdrop-filter: none;
  background: linear-gradient(rgba(109, 40, 217, 0.35), rgba(109, 40, 217, 0.35)), #07040f;   /* same violet, opaque so the halo stays outside */
  --cta-comets: conic-gradient(from var(--cta-angle),
    transparent 0deg 70deg,
    rgba(109,40,217,.0) 70deg, rgba(109,40,217,.9) 125deg, #B794F4 160deg, #fff 174deg, transparent 178deg,
    transparent 250deg,
    rgba(139,92,246,.0) 250deg, rgba(139,92,246,.85) 305deg, #D4B8F0 340deg, #fff 354deg, transparent 358deg);
  animation: ctaOrbit 3.6s linear infinite;
}
.explore-btn::before,
.explore-btn::after {
  content: ''; position: absolute; inset: -1.5px; border-radius: inherit;
  background: var(--cta-comets); pointer-events: none; transition: opacity .35s, filter .35s;
}
.explore-btn::before {
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.explore-btn::after { inset: -3px; z-index: -1; filter: blur(9px); opacity: .95; }
.explore-btn:hover::after { opacity: 1; filter: blur(14px); }
@media (prefers-reduced-motion: reduce) { .explore-btn { animation: none; --cta-angle: 200deg; } }

/* ══════════════════════════════════════════════════════════════
   HERO — the original title, over a rising planet: the planet's violet atmosphere along the curve and data lights
   turning on its surface; the button centred just above the horizon; date and countdown in the bottom corners.
   ══════════════════════════════════════════════════════════════ */
#hero { --planet-d: 230vw; --planet-top: 86%; }
#hero-planet {
  position: absolute; z-index: 3; pointer-events: none; will-change: transform;
  width: var(--planet-d); height: var(--planet-d); left: 50%; margin-left: calc(var(--planet-d) * -0.5);
  top: var(--planet-top); border-radius: 50%;
  background:
    radial-gradient(ellipse 55% 14% at 50% 0%, rgba(132, 94, 222, 0.5), rgba(48, 22, 96, 0.28) 45%, transparent 75%),
    radial-gradient(circle at 50% 20%, #0d0820 0%, #05030b 40%, #000 65%);
  box-shadow: 0 0 0 1.5px rgba(228, 214, 251, 0.8), 0 -4px 18px rgba(212, 184, 240, 0.5), 0 -30px 120px rgba(139, 92, 246, 0.4), inset 0 20px 60px rgba(139, 92, 246, 0.4);
}
#planet-dots { position: absolute; left: 0; z-index: 4; pointer-events: none; will-change: transform; }
#hero #starfield { z-index: 2; }                 /* the stars sit behind the planet, which hides them */
#hero-flare {                                    /* a soft light where the sun comes up behind the edge */
  position: absolute; z-index: 4; pointer-events: none; will-change: transform;
  left: 50%; top: var(--planet-top); width: 46vw; height: 14vw; margin: -7vw 0 0 -23vw;
  background: radial-gradient(ellipse at center, rgba(250, 248, 255, 0.4) 0%, rgba(183, 148, 244, 0.2) 24%, transparent 65%);
}
.low-end #hero-planet { box-shadow: 0 0 0 1.5px rgba(228, 214, 251, 0.8), 0 -20px 80px rgba(139, 92, 246, 0.4); }
/* the button just above the horizon: anchored at its bottom, so its SQL phase grows upwards */
#hero #cta-wrap {
  position: absolute; z-index: 6; left: 0; right: 0; width: auto; margin: 0;
  bottom: calc(100% - var(--planet-top) + 16px); display: flex; justify-content: center; align-items: flex-end;
}
/* date and countdown in the bottom corners, over the planet; they replace the typewriter strip and the menu's timer */
#hero .hero-when, #hero .hero-countdown {
  position: absolute; z-index: 6; bottom: 4.5vh; margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(250, 248, 255, 0.72); white-space: nowrap;
}
#hero .hero-when { left: clamp(32px, 5vw, 80px); }
#hero .hero-when span { margin: 0 0.5em; }
#hero .hero-countdown { right: clamp(32px, 5vw, 80px); font-variant-numeric: tabular-nums; }
#hero .hc-label { margin-right: 0.6em; }
#hero .hc-time b { font-weight: 500; color: #FAF8FF; }
#hero .hc-time i { font-style: normal; margin: 0 0.9em 0 0.15em; opacity: 0.7; }
#hero .hc-time i:last-child { margin-right: 0; }
#hero #hero-info-bar, #hero .nav-countdown-btn, #hero #scroll-hint { display: none !important; }

/* phones (980px layout) */
.is-touch #hero { --planet-d: 270vw; --planet-top: 76%; }
.is-touch #hero-flare { width: 80vw; height: 30vw; margin: -15vw 0 0 -40vw; }
.is-touch #hero #cta-wrap { margin: 0 !important; bottom: calc(100% - var(--planet-top) + 30px); }
.is-touch #hero .hero-when, .is-touch #hero .hero-countdown { left: 64px; right: auto; font-size: 20px; letter-spacing: 0.16em; }
.is-touch #hero .hero-countdown { bottom: calc(4.5vh + 40px); }

/* ══════════════════════════════════════════════════════════════
   MENU ON PC TOO — like the phones: Register and the three-bar button; the links live in the drop-down panel.
   Register is a clear, solid violet pill everywhere.
   ══════════════════════════════════════════════════════════════ */
#nav-register {
  background: #7C3AED !important; border: 0 !important; color: #FFFFFF !important; border-radius: 999px !important;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-weight: 700 !important; letter-spacing: 0.12em !important;
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45); backdrop-filter: none !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
#nav-register:hover { background: #8B5CF6 !important; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6); }
#nav-register:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 4px; }
html:not(.is-touch) #nav-links { gap: 22px; top: 32px; }
html:not(.is-touch) #nav-links > a:not(#nav-register) { display: none; }
html:not(.is-touch) #nav-register { font-size: 12px; padding: 13px 28px; }
html:not(.is-touch) #hamburger-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 34px; height: 34px; cursor: none; z-index: 1000;
}
html:not(.is-touch) #hamburger-btn span { display: block; width: 100%; height: 2.5px; border-radius: 2px; background: var(--violet-glow); transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; }
html:not(.is-touch) #hamburger-btn span:nth-child(2) { background: var(--copper); }
html:not(.is-touch) #hamburger-btn.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); background: var(--copper); }
html:not(.is-touch) #hamburger-btn.active span:nth-child(2) { opacity: 0; }
html:not(.is-touch) #hamburger-btn.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); background: var(--copper); }
html:not(.is-touch) #mobile-menu-overlay {
  display: flex; flex-direction: column; position: absolute; top: 92px; right: 44px; width: 300px; z-index: 999;
  background: rgba(10, 5, 20, 0.92); border: 1px solid var(--copper); border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(139, 92, 246, 0.15);
  opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease;
}
html:not(.is-touch) #mobile-menu-overlay.active { opacity: 1; pointer-events: auto; transform: none; }
html:not(.is-touch) #mobile-menu-overlay .mobile-menu-header { font-size: 12px !important; padding: 16px 24px !important; }
html:not(.is-touch) #mobile-menu-overlay a {
  color: rgba(237, 235, 230, 0.9); font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s, color 0.2s;
}
html:not(.is-touch) #mobile-menu-overlay a:last-child { border-bottom: 0; }
html:not(.is-touch) #mobile-menu-overlay a:hover { background: rgba(139, 92, 246, 0.14); color: #FFFFFF; }
.is-touch #mobile-menu-overlay { background: rgba(10, 5, 20, 0.96) !important; }   /* opaque: the title must not show through the links */
/* PC: the still deep sky behind the twinkling stars (drawn once by post-intro.js) */
#star-deep { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.is-touch #star-deep { display: none; }
/* PC depth: the near star layer, a subtle vignette, a fine static film grain */
#star-near { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); z-index: 2; pointer-events: none; }
#star-deep { inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); }
#hero-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
#hero-grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-touch #star-near, .is-touch #hero-vignette, .is-touch #hero-grain { display: none; }

/* letters of EDITION / THE DATA GALAXY split for the cursor effect */
#hero i.wl { font-style: inherit; display: inline-block; }
#hero #tagline > span, #hero #edition > span { white-space: nowrap; }   /* split into letters: words must not break */
#hero .hero-when i.wl, #hero .hero-when .wl, #hero .hc-time b, #hero .hc-time i { display: inline-block; font-style: normal; }

/* ATAVERSE: white to dark purple, like the D's own gradient run backwards — the purple gathers in VERSE */
#hero .t-ata, #hero .t-verse { animation: none; }
#hero #tagline i.wl { font-style: inherit; display: inline-block; }
#hero #tagline > span { white-space: nowrap; }
#hero .t-ata .letter:nth-child(1) { color: #FFFFFF; text-shadow: 0 0 50px rgba(255, 255, 255, 0.22); }
#hero .t-ata .letter:nth-child(2) { color: #F1EAFF; text-shadow: 0 0 50px rgba(241, 234, 255, 0.22); }
#hero .t-ata .letter:nth-child(3) { color: #DCCBFA; text-shadow: 0 0 50px rgba(220, 203, 250, 0.25); }
#hero .t-verse .letter:nth-child(1) { color: #B794F4; text-shadow: 0 0 50px rgba(183, 148, 244, 0.4); }
#hero .t-verse .letter:nth-child(2) { color: #9D74E8; text-shadow: 0 0 50px rgba(157, 116, 232, 0.4); }
#hero .t-verse .letter:nth-child(3) { color: #8656D8; text-shadow: 0 0 50px rgba(134, 86, 216, 0.4); }
#hero .t-verse .letter:nth-child(4) { color: #6F43A8; text-shadow: 0 0 50px rgba(111, 67, 168, 0.45); }
#hero .t-verse .letter:nth-child(5) { color: #5B2A9A; text-shadow: 0 0 50px rgba(91, 42, 154, 0.5); }

/* "5.0" reads as one number: the 5, the point and the 0 set close together */
#hero #edition { gap: 0; }
#hero #edition span:first-child { margin-right: 0.32em; }
#hero #edition span:nth-child(2), #hero #edition span:nth-child(4) { letter-spacing: 0 !important; }
#hero #hero-saturn { margin: 0 0.04em !important; }

/* a thin scroll cue under the horizon: a line with a light running down it */
.hero-scroll-cue {
  position: absolute; z-index: 6; left: 50%; bottom: 3.2vh; width: 22px; height: 46px; margin-left: -11px;
  display: flex; justify-content: center; cursor: none;
}
.hero-scroll-cue::before { content: ''; width: 1px; height: 100%; background: rgba(212, 184, 240, 0.25); }
.hero-scroll-cue span {
  position: absolute; left: 50%; top: 0; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px;
  background: #E8DEFF; box-shadow: 0 0 8px rgba(212, 184, 240, 0.9);
  animation: cueRun 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes cueRun { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue span { animation: none; top: 17px; } }
/* phones: beside the two corner lines, on the right */
.is-touch .hero-scroll-cue { left: auto; right: 64px; margin: 0; bottom: 4.5vh; width: 30px; height: 84px; }
.is-touch .hero-scroll-cue::before { width: 2px; }
.is-touch .hero-scroll-cue span { width: 5px; height: 20px; margin-left: -2.5px; }
@keyframes cueRunTouch { 0% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(64px); opacity: 0; } }
.is-touch .hero-scroll-cue span { animation-name: cueRunTouch; }
#hero #hero-saturn { letter-spacing: 0 !important; }   /* no tracking after the point: equal gaps 5 · 0 */

/* the two corner lines read clearly: a little larger and brighter, numbers stronger, and a dark halo so the planet's
   rim line passes behind the letters without cutting through them */
#hero .hero-when, #hero .hero-countdown {
  font-size: 13px; color: rgba(250, 248, 255, 0.88); letter-spacing: 0.18em;
  text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 2px #000;
}
#hero .hc-time b { font-weight: 700; color: #FFFFFF; }
#hero .hc-time i { opacity: 0.8; }
.is-touch #hero .hero-when, .is-touch #hero .hero-countdown { font-size: 22px; }
#hero .hc-time i { margin-left: 0.4em; }

/* ══════════════════════════════════════════════════════════════
   TEAM — the committee as a small solar system (left) and the picked member's card (right), on the light page
   ══════════════════════════════════════════════════════════════ */
.team-section { position: relative; z-index: 3; padding: 40px clamp(24px, 4vw, 72px) 160px; color: #141414; }
.team-container { max-width: 1400px; margin: 0 auto; }
.team-intro { margin-bottom: 64px; max-width: 640px; }
.team-lede { margin-top: 18px; font-size: 17px; line-height: 1.6; color: #5A5566; }
.team-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }

/* the map */
.team-map { position: relative; width: min(100%, 640px); aspect-ratio: 1; justify-self: center; }
.team-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-orbit { fill: none; stroke: #D9CCF2; stroke-width: 0.25; stroke-dasharray: 1 1.2; vector-effect: non-scaling-stroke; }
.tl-ray { stroke: #E4DAF6; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.tl-ray.is-on { stroke: #8B5CF6; stroke-width: 1.5; }
.tm-core, .tm-cell { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.tm-core { left: 50%; top: 50%; }
.tm-core .is-president { width: 112px; height: 112px; }
.tm-core .is-vp { width: 64px; height: 64px; position: absolute; right: -46px; bottom: 6px; }
.tm-core-label, .tm-cell-label {
  margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #3B3546; text-align: center;
  max-width: 120px; line-height: 1.25; background: rgba(250, 248, 255, 0.92); padding: 2px 6px; border-radius: 6px;
}
.tm-pair { display: flex; align-items: flex-end; }
.tm-pair .is-head { width: 62px; height: 62px; position: relative; z-index: 2; }
.tm-pair .is-cohead { width: 46px; height: 46px; margin-left: -12px; }
.tm-node {
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: none; display: block;
  box-shadow: 0 0 0 3px #FAF8FF, 0 8px 22px rgba(74, 32, 112, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tm-node:hover { transform: scale(1.08); }
.tm-node.is-on { box-shadow: 0 0 0 3px #FAF8FF, 0 0 0 5.5px #7C3AED, 0 10px 28px rgba(109, 40, 217, 0.35); z-index: 3; }
.tm-node:focus-visible { outline: 2px solid #7C3AED; outline-offset: 5px; }
.tm-face { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.tm-face.is-empty, .tc-img.is-empty, .tc-mini.is-empty {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(140deg, #3E0A77 0%, #6F43A8 60%, #A98AE0 100%);
}
.tm-face.is-empty svg, .tc-mini.is-empty svg { position: absolute; width: 74%; bottom: -8%; fill: rgba(232, 222, 255, 0.28); }
.tm-face.is-empty b, .tc-mini.is-empty b { position: relative; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.82rem; color: #FFFFFF; letter-spacing: 0.04em; }
.is-president .tm-face.is-empty b { font-size: 1.5rem; }
.is-cohead .tm-face.is-empty b { font-size: 0.68rem; opacity: 0.85; }
.tm-pair .is-cohead .tm-face.is-empty { background: linear-gradient(140deg, #6F43A8 0%, #A98AE0 70%, #D4C4F5 100%); }
/* entrance: the crew appears around the bureau, once */
.team-map .tm-core, .team-map .tm-cell, .team-lines { opacity: 0; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1); }
.team-map .tm-cell { transform: translate(-50%, -50%) scale(0.6); transition-delay: calc(0.15s + var(--d) * 0.07s); }
.team-map.is-in .tm-core, .team-map.is-in .tm-cell, .team-map.is-in .team-lines { opacity: 1; }
.team-map.is-in .tm-cell { transform: translate(-50%, -50%); }

/* the card */
.team-card {
  background: #FFFFFF; border: 1px solid #EDE6F8; border-radius: 28px; padding: 22px;
  box-shadow: 0 30px 70px rgba(74, 32, 112, 0.12); min-height: 560px;
}
.team-card.is-in .tc-inner { animation: tcIn 0.4s ease both; }
@keyframes tcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tc-inner { display: grid; grid-template-columns: 0.9fr 1fr; gap: 26px; align-items: stretch; }
.tc-photo { aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; }
.tc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-img.is-empty svg { position: absolute; width: 78%; bottom: -6%; left: 11%; fill: rgba(232, 222, 255, 0.3); }
.tc-img.is-empty b { position: absolute; top: 18px; left: 20px; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.08em; }
.tc-body { display: flex; flex-direction: column; padding: 8px 4px 4px 0; min-width: 0; }
.tc-team { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #7B5EA7; }
.tc-name { margin-top: 14px; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(26px, 2.3vw, 36px); font-weight: 600; line-height: 1.08; color: #141414; }
.tc-name.is-empty { color: #B9AFC9; }
.tc-role { margin-top: 8px; font-size: 16px; font-weight: 600; color: #6D28D9; }
.tc-desc { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #5A5566; }
.tc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tc-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid #E4DAF6; font-size: 13px; font-weight: 600; color: #3B3546; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tc-link svg { width: 15px; height: 15px; fill: currentColor; }
a.tc-link:hover { background: #6D28D9; border-color: #6D28D9; color: #FFFFFF; }
.tc-link.is-off { color: #B9AFC9; border-style: dashed; }
.tc-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #F1ECF9; }
.tc-partner { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: none; text-align: left; color: #141414; font-size: 14px; font-weight: 600; }
.tc-partner small { display: block; font-size: 11px; font-weight: 500; color: #8A8396; }
.tc-mini { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.tc-mini.is-empty b { font-size: 0.62rem; }
.tc-partner:hover .tc-mini { box-shadow: 0 0 0 2px #7C3AED; }
.tc-nav { display: flex; align-items: center; gap: 8px; }
.tc-count { font-family: 'Space Mono', monospace; font-size: 12px; color: #8A8396; min-width: 54px; text-align: center; }
.tc-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E4DAF6; background: #FFFFFF; display: grid; place-items: center; padding: 0; cursor: none; color: #3B3546; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.tc-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-arrow:hover { background: #6D28D9; border-color: #6D28D9; color: #FFFFFF; }
.tc-partner:focus-visible, .tc-arrow:focus-visible, .tc-link:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; }
@media (max-width: 1180px) and (min-width: 700px) { .tc-inner { grid-template-columns: 1fr; } .tc-photo { aspect-ratio: 16 / 10; } }

/* phones (980px layout): map on top, card under it, everything sized up */
.is-touch .team-section { padding: 60px 48px 160px !important; }
.is-touch .team-lede { font-size: 28px; }
.is-touch .team-intro { margin-bottom: 70px; max-width: none; }
.is-touch .team-grid { grid-template-columns: 1fr; gap: 60px; }
.is-touch .team-map { width: 880px; }
.is-touch .tm-core .is-president { width: 150px; height: 150px; }
.is-touch .tm-core .is-vp { width: 88px; height: 88px; right: -64px; }
.is-touch .tm-pair .is-head { width: 92px; height: 92px; }
.is-touch .tm-pair .is-cohead { width: 70px; height: 70px; margin-left: -16px; }
.is-touch .tm-core-label, .is-touch .tm-cell-label { font-size: 20px; max-width: 190px; margin-top: 14px; }
.is-touch .tm-face.is-empty b { font-size: 1.3rem; }
.is-touch .is-president .tm-face.is-empty b { font-size: 2.2rem; }
.is-touch .team-card { padding: 30px; border-radius: 40px; min-height: 0; }
.is-touch .tc-inner { grid-template-columns: 1fr 1.1fr; gap: 34px; }
.is-touch .tc-team { font-size: 20px; }
.is-touch .tc-name { font-size: 50px; }
.is-touch .tc-role { font-size: 26px; }
.is-touch .tc-desc { font-size: 24px; }
.is-touch .tc-link { font-size: 20px; padding: 14px 20px; }
.is-touch .tc-link svg { width: 22px; height: 22px; }
.is-touch .tc-partner { font-size: 22px; }
.is-touch .tc-partner small { font-size: 17px; }
.is-touch .tc-mini { width: 58px; height: 58px; }
.is-touch .tc-arrow { width: 64px; height: 64px; }
.is-touch .tc-arrow svg { width: 24px; height: 24px; }
.is-touch .tc-count { font-size: 20px; min-width: 90px; }
.is-touch .tc-foot { flex-wrap: wrap; }
/* card: the photo keeps to its column (it was stretched to the text's height and spilled over it) */
.tc-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
.tc-photo { width: 100%; align-self: start; }
.team-card { min-height: 0; }
.tc-body { min-height: 100%; align-self: stretch; }
/* map nodes: initials only (no silhouette); the co-head is the lighter, smaller twin without a label */
.tm-face.is-empty svg { display: none; }
.is-cohead .tm-face.is-empty b { display: none; }
.tc-mini.is-empty svg { display: none; }
.is-touch .tc-photo { aspect-ratio: 4 / 5; }
.tc-partner, .tc-arrow, .tm-node { font-family: inherit; }   /* buttons do not inherit the page font by default */

/* team card v2: the photo fills the card's height, outline icons at the bottom, arrows under the card */
.team-side { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: 0; }
.team-side .team-card { width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tc-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: stretch; min-height: 440px; }
.tc-photo { aspect-ratio: auto; height: 100%; min-height: 100%; align-self: stretch; }
.tc-photo .tc-img { height: 100%; }
.tc-body { padding: 10px 6px 6px 0; }
.tc-icons { margin-top: auto; padding-top: 26px; display: flex; gap: 18px; }
.tc-icon { color: #7C3AED; display: inline-flex; transition: color 0.2s, transform 0.2s; }
.tc-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.tc-icon:hover { color: #4C1D95; transform: translateY(-2px); }
.tc-icon.is-off { color: #C9B8EC; }
a.tc-icon:focus-visible { outline: 2px solid #7C3AED; outline-offset: 4px; border-radius: 6px; }
.team-side .tc-nav { display: flex; align-items: center; gap: 14px; }
.team-side .tc-arrow { width: 44px; height: 44px; }
@media (max-width: 1180px) and (min-width: 700px) { .tc-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); } .tc-photo { aspect-ratio: auto; } }
/* phones (980px layout) */
.is-touch .tc-inner { min-height: 560px; }
.is-touch .tc-photo { aspect-ratio: auto; }
.is-touch .tc-icon svg { width: 46px; height: 46px; }
.is-touch .tc-icons { gap: 30px; }
.is-touch .team-side { gap: 34px; }
.is-touch .team-side .tc-arrow { width: 84px; height: 84px; }
/* a shorter card */
.tc-inner { min-height: 320px; }
.tc-body { padding-top: 4px; }
.tc-icons { padding-top: 18px; }
.is-touch .tc-inner { min-height: 440px; }
.tc-icons { justify-content: center; }   /* the social icons centred in the text column */

/* jump screen: the loader's terminal line, shown for a moment while a menu link jumps to its section */
#jump-screen {
  position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: clamp(16px, 1vw, 20px); letter-spacing: 0.15em;
}
#jump-screen.is-on { visibility: visible; pointer-events: auto; transition: none; animation: jumpShow 0.85s linear both; }
@keyframes jumpShow { 0% { opacity: 0; } 14% { opacity: 1; } 73% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
#jump-screen .jump-line { gap: 0.7em; }
#jump-screen .pl-cursor { margin-left: 0.2em; }
.jump-dots { color: var(--mauve); }
.jump-dots i { font-style: normal; animation: plDot 1.2s ease-in-out infinite; }
.jump-dots i:nth-child(2) { animation-delay: 0.2s; }
.jump-dots i:nth-child(3) { animation-delay: 0.4s; }
.is-touch #jump-screen { font-size: 32px; }
#jump-screen.is-on .pl-key { animation: jumpKey 0.3s steps(14, end) both; display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
@keyframes jumpKey { from { max-width: 0; } to { max-width: 20em; } }   /* types itself, without timers */
/* on refresh, "DATAVERSE" types itself like the jump screen's lines */
.dv-returning #preloader .pl-line.is-active .pl-key {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  animation: jumpKey 0.3s steps(14, end) 0.12s both;
}
/* typing calibrated to the word: one step per letter (--n = number of letters; 1ch + the line's 0.15em tracking each) */
@keyframes typeKey { from { max-width: 0; } to { max-width: calc(var(--n, 9) * (1ch + 0.15em) + 0.1em); } }
#jump-screen.is-on .pl-key { animation: typeKey 0.32s steps(var(--n, 9), end) both; }
.dv-returning #preloader .pl-line.is-active .pl-key { --n: 9; animation: typeKey 0.45s steps(9, end) 0.1s both; }
/* the word is revealed letter by letter with a mask, so the centred line keeps its place while it types */
@keyframes typeReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#jump-screen.is-on .pl-key { max-width: none; animation: typeReveal 0.32s steps(var(--n, 9), end) both; }
.dv-returning #preloader .pl-line.is-active .pl-key { max-width: none; animation: typeReveal 0.45s steps(9, end) 0.1s both; }
.is-touch.dv-returning .preloader-content { width: auto; }   /* refresh line centred like the jump screen (the phone rule widened its box to 82vw) */

/* ══════════════════════════════════════════════════════════════
   COMPETITIONS — two dark "mission" cards on the light page; each art tells its format: a path found through a grid
   of data points (one day of problem solving), an elimination bracket ending on the Dataverse stage
   ══════════════════════════════════════════════════════════════ */
.comp-section { position: relative; z-index: 3; padding: 40px clamp(24px, 4vw, 72px) 140px; color: #141414; }
.comp-container { max-width: 1400px; margin: 0 auto; }
.comp-intro { margin-bottom: 56px; max-width: 680px; }
.comp-lede { margin-top: 18px; font-size: 17px; line-height: 1.6; color: #5A5566; }
.comp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); }
.comp-card {
  --mx: 50%; --my: 30%;
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 520px;
  padding: 28px 30px 32px; border-radius: 28px; color: #F5F3EF;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(139, 92, 246, 0.22), transparent 60%),
    linear-gradient(160deg, #17102B 0%, #0C0916 70%);
  border: 1px solid rgba(183, 148, 244, 0.16);
  box-shadow: 0 30px 70px rgba(43, 18, 82, 0.28);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.comp-card:hover { transform: translateY(-4px); box-shadow: 0 38px 80px rgba(43, 18, 82, 0.36); }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212, 184, 240, 0.7); }
.comp-card .cl-status, .hack-card .cl-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(183, 148, 244, 0.12); color: #D4B8F0; font-size: 12px; font-weight: 600;
}
.comp-card .cl-status::before, .hack-card .cl-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #E8A559; box-shadow: 0 0 8px #E8A559; }
.cc-art { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px 0 8px; }
.cc-svg { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.ps-grid circle { fill: rgba(212, 184, 240, 0.22); }
.ps-on circle { fill: #B794F4; opacity: 0; transition: opacity 0.3s ease; }
.cc-path { fill: none; stroke: #A78BFA; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, .1, .25, 1); filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6)); }
.cc-goal { fill: #E8A559; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.4s ease 1.4s, transform 0.5s cubic-bezier(.3, 1.6, .5, 1) 1.4s; filter: drop-shadow(0 0 10px rgba(232, 165, 89, 0.8)); }
.br-lines path { fill: none; stroke: rgba(212, 184, 240, 0.18); stroke-width: 1.4; }
.br-nodes circle { fill: rgba(212, 184, 240, 0.35); }
.br-nodes circle.is-hot { fill: #B794F4; }
.br-stage { fill: none; stroke: rgba(232, 165, 89, 0.55); stroke-width: 2; stroke-linecap: round; }
.br-label { fill: rgba(232, 165, 89, 0.9); font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; }
.comp-cards.is-in .cc-path { stroke-dashoffset: 0; }
.comp-cards.is-in .cc-goal { opacity: 1; transform: scale(1); }
.comp-cards.is-in .ps-on circle { opacity: 1; transition-delay: 0.9s; }
.cc-title { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(32px, 3vw, 48px); font-weight: 600; line-height: 1.02; color: #FFFFFF; }
.cc-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chips li { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(212, 184, 240, 0.22); font-size: 13px; font-weight: 500; color: rgba(245, 243, 239, 0.85); }
.cc-route { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-route span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: rgba(245, 243, 239, 0.6); }
.cc-route b { font-size: 15px; font-weight: 600; color: #FFFFFF; }
.cc-route .is-final b { color: #F0B878; }
.cc-arrow { width: 26px; height: 13px; fill: none; stroke: rgba(212, 184, 240, 0.6); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (prefers-reduced-motion: reduce) { .cc-path, .cc-goal, .ps-on circle { transition: none; } }

/* phones (980px layout): the cards stacked, sized up */
.is-touch .comp-section { padding: 60px 48px 140px !important; }
.is-touch .comp-intro { max-width: none; margin-bottom: 60px; }
.is-touch .comp-lede { font-size: 28px; }
.is-touch .comp-cards { grid-template-columns: 1fr; gap: 44px; }
.is-touch .comp-card { min-height: 0; padding: 40px 44px 46px; border-radius: 40px; }
.is-touch .cc-kicker { font-size: 20px; }
.is-touch .comp-card .cl-status, .is-touch .hack-card .cl-status { font-size: 20px; padding: 10px 18px; }
.is-touch .cc-art { padding: 34px 0 24px; }
.is-touch .cc-title { font-size: 64px; }
.is-touch .cc-chips li { font-size: 22px; padding: 12px 20px; }
.is-touch .cc-route span { font-size: 21px; }
.is-touch .cc-route b { font-size: 25px; }
.is-touch .cc-arrow { width: 40px; height: 20px; }

/* competition cards: the register button */
.cc-actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cc-register {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 0; border-radius: 999px; cursor: none;
  background: #7C3AED; color: #FFFFFF; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 8px 26px rgba(124, 58, 237, 0.45); transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cc-register svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.cc-register:hover { background: #8B5CF6; transform: translateY(-1px); box-shadow: 0 10px 32px rgba(139, 92, 246, 0.6); }
.cc-register:hover svg { transform: translateX(3px); }
.cc-register:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 4px; }
.cc-note { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(245, 243, 239, 0.75); max-width: 300px; }
.cc-note.is-on { animation: ccNote 0.35s ease both; }
@keyframes ccNote { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.is-touch .cc-actions { margin-top: 36px; gap: 22px; }
.is-touch .cc-register { font-size: 22px; padding: 22px 38px; touch-action: manipulation; }
.is-touch .cc-register svg { width: 24px; height: 24px; }
.is-touch .cc-note { font-size: 21px; max-width: 520px; }


/* ══════════════════════════════════════════════════════════════
   HACKATHON — one wide dark card in the competitions' family, built on its two days: kick-off on day 1, the
   competition on day 2, a comet running from one to the other
   ══════════════════════════════════════════════════════════════ */
.hack-section { position: relative; z-index: 3; padding: 20px clamp(24px, 4vw, 72px) 140px; color: #141414; }
.hack-card {
  --mx: 70%; --my: 40%;
  position: relative; overflow: hidden; padding: 28px 34px 34px; border-radius: 28px; color: #F5F3EF;
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(139, 92, 246, 0.2), transparent 60%),
    radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 72%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 34% 82%, rgba(255,255,255,.35), transparent),
    linear-gradient(160deg, #17102B 0%, #0C0916 70%);
  border: 1px solid rgba(183, 148, 244, 0.16); box-shadow: 0 30px 70px rgba(43, 18, 82, 0.28);
}
.hk-days { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 30px; border-radius: 20px; overflow: hidden; }
.hk-day { position: relative; padding: 26px 30px 34px; background: rgba(183, 148, 244, 0.05); }
.hk-day.is-final { background: rgba(232, 165, 89, 0.06); border-left: 1px dashed rgba(212, 184, 240, 0.25); }
.hk-date { margin: 0; font-size: 13px; color: rgba(245, 243, 239, 0.6); display: flex; flex-direction: column; gap: 4px; }
.hk-date b { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(30px, 3vw, 44px); font-weight: 600; line-height: 1; color: #FFFFFF; }
.hk-step { position: relative; z-index: 2; margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hk-step span { font-size: 16px; font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em; }
.is-final .hk-step span { color: #F0B878; }
.hk-node { width: 22px; height: 22px; border-radius: 50%; background: #B794F4; box-shadow: 0 0 0 6px rgba(183, 148, 244, 0.18), 0 0 18px rgba(183, 148, 244, 0.6); }
.is-final .hk-node { width: 26px; height: 26px; background: #E8A559; box-shadow: 0 0 0 7px rgba(232, 165, 89, 0.2), 0 0 22px rgba(232, 165, 89, 0.7); }
/* the line from one node to the other (the nodes sit at the centre of each half: 25% and 75%) */
.hk-line { position: absolute; z-index: 1; left: 25%; right: 25%; top: calc(100% - 34px - 12px - 16px * 1.2 - 13px); height: 2px;
  background: linear-gradient(90deg, #B794F4, #E8A559); opacity: 0.55; }
/* the comet travels by transform only (no layout per frame): a carrier as wide as the line slides by its own width,
   the 70px streak rides on it, starting just left of the line */
.hk-comet { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; margin-top: -2px; opacity: 0; will-change: transform, opacity; }
.hk-comet::before {
  content: ''; position: absolute; top: 0; left: -70px; width: 70px; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #FFFFFF); box-shadow: 0 0 12px #fff, 0 0 24px rgba(212, 184, 240, 0.9);
}
.hack-card.is-live .hk-comet { animation: hkComet 2.8s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes hkComet { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .hack-card.is-live .hk-comet { animation: none; } }
.hk-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hk-foot .cc-chips { margin: 0; }
.hk-foot .cc-actions { margin-top: 0; flex-direction: row-reverse; }

/* phones (980px layout) */
.is-touch .hack-section { padding: 30px 48px 140px !important; }
.is-touch .hack-card { padding: 40px 40px 46px; border-radius: 40px; }
.is-touch .hk-days { margin: 40px 0 36px; }
.is-touch .hk-day { padding: 30px 28px 40px; }
.is-touch .hk-date { font-size: 21px; }
.is-touch .hk-date b { font-size: 58px; }
.is-touch .hk-step { margin-top: 70px; }
.is-touch .hk-step span { font-size: 24px; }
.is-touch .hk-node { width: 30px; height: 30px; }
.is-touch .is-final .hk-node { width: 34px; height: 34px; }
.is-touch .hk-line { top: calc(100% - 40px - 12px - 24px * 1.2 - 17px); height: 3px; }
.is-touch .hk-foot { flex-direction: column; align-items: flex-start; gap: 30px; }
.is-touch .hk-foot .cc-actions { flex-direction: row; }
/* the line's height is set from the nodes' real centres (post-intro.js) */
.hk-line { top: var(--hk-y, 50%); margin-top: -1px; }
.is-touch .hk-line { top: var(--hk-y, 50%); margin-top: -1.5px; }


/* ══════════════════════════════════════════════════════════════
   PARTNERS — the logo wall first, then "Become a partner" as the last, dashed tile centred under it
   ══════════════════════════════════════════════════════════════ */
.partners-section { position: relative; z-index: 3; padding: 20px clamp(24px, 4vw, 72px) 140px; color: #141414; }
.pt-wall { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pt-slot { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 18px; background: #FFFFFF; border: 1px solid #EDE6F8; box-shadow: 0 14px 34px rgba(74, 32, 112, 0.08); }
.pt-slot span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: #C3B6DA; }
.pt-invite {
  margin: 18px auto 0; width: calc((min(100%, 980px) - 36px) / 3); aspect-ratio: 16 / 10; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
  border-radius: 18px; border: 1.5px dashed #A98AE0; background: #F4EEFF;
}
.pt-ask { margin: 0; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: #141414; }
.pt-cta { text-decoration: none; }
/* phones (980px layout) */
.is-touch .partners-section { padding: 30px 48px 140px !important; }
.is-touch .pt-wall { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: none; }
.is-touch .pt-slot { border-radius: 26px; }
.is-touch .pt-slot span { font-size: 21px; }
.is-touch .pt-invite { width: 100%; aspect-ratio: auto; padding: 50px 30px; margin-top: 22px; border-radius: 26px; border-width: 2px; gap: 26px; }
.is-touch .pt-ask { font-size: 34px; }
/* sponsors: the heading aligned like the other sections, the wall spanning the same width */
html:not(.is-touch) .pt-wall { max-width: none; }
html:not(.is-touch) .pt-invite { width: calc((100% - 36px) / 3); }


/* ══════════════════════════════════════════════════════════════
   FOOTER — flat and simple: brand, event links, contact, the last line
   ══════════════════════════════════════════════════════════════ */
footer.site-footer { position: relative; z-index: 3; display: block; color: #F5F3EF; background: #0A0812; border-top: 1px solid rgba(212, 184, 240, 0.12); padding: 70px clamp(24px, 4vw, 72px) 30px; }
.sf-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; align-items: start; }
.sf-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #FFFFFF; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; }
.sf-logo svg { width: 40px; height: auto; fill: url(#dBrand); }
.sf-about { margin: 18px 0 0; max-width: 340px; font-size: 15px; line-height: 1.65; color: rgba(245, 243, 239, 0.62); }
.sf-icon { display: inline-flex; margin-top: 20px; color: #B794F4; transition: color 0.2s, transform 0.2s; }
.sf-icon svg, .sf-contact svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon:hover { color: #FFFFFF; transform: translateY(-2px); }
.site-footer nav.sf-col { position: static; display: block; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; z-index: auto; }
.sf-head { margin: 4px 0 20px; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #B794F4; }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sf-col a { color: rgba(245, 243, 239, 0.82); text-decoration: none; font-size: 15px; transition: color 0.2s; }
.sf-col a:hover { color: #FFFFFF; }
.sf-contact li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(245, 243, 239, 0.82); }
.sf-contact svg { width: 20px; height: 20px; color: #B794F4; flex: none; }
.site-footer a:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 3px; border-radius: 4px; }
.sf-bottom { max-width: 1280px; margin: 50px auto 0; padding-top: 22px; border-top: 1px solid rgba(212, 184, 240, 0.12); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(245, 243, 239, 0.5); }
.sf-bottom a { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 243, 239, 0.7); text-decoration: none; }
.sf-bottom a:hover { color: #FFFFFF; }
.sf-bottom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* phones (980px layout) */
.is-touch footer.site-footer { padding: 90px 48px 40px; }
.is-touch .sf-inner { grid-template-columns: 1fr 1fr; gap: 60px 40px; }
.is-touch .sf-brand { grid-column: 1 / -1; }
.is-touch .sf-logo { font-size: 36px; gap: 18px; }
.is-touch .sf-logo svg { width: 64px; }
.is-touch .sf-about { font-size: 25px; max-width: none; }
.is-touch .sf-icon svg { width: 40px; height: 40px; }
.is-touch .sf-head { font-size: 28px; margin-bottom: 28px; }
.is-touch .sf-col ul { gap: 24px; }
.is-touch .sf-col a, .is-touch .sf-contact li { font-size: 25px; }
.is-touch .sf-contact svg { width: 30px; height: 30px; }
.is-touch .sf-bottom { font-size: 20px; margin-top: 70px; }
.is-touch .sf-bottom svg { width: 22px; height: 22px; }
.sf-icons { display: flex; gap: 16px; margin-top: 20px; }
.sf-icons .sf-icon { margin-top: 0; }
.is-touch .sf-icons { gap: 26px; }


/* ══════════════════════════════════════════════════════════════
   FORUM — a dark card in the competitions' family
   ══════════════════════════════════════════════════════════════ */
.forum-section { position: relative; z-index: 3; padding: 20px clamp(24px, 4vw, 72px) 140px; color: #141414; }
.fo-card {
  position: relative; overflow: hidden; padding: 28px 34px 34px; border-radius: 28px; color: #F5F3EF;
  background: radial-gradient(70% 120% at 90% 0%, rgba(139, 92, 246, 0.22), transparent 60%), linear-gradient(160deg, #17102B 0%, #0C0916 70%);
  border: 1px solid rgba(183, 148, 244, 0.16); box-shadow: 0 30px 70px rgba(43, 18, 82, 0.28);
}
.fo-card .cl-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(183, 148, 244, 0.12); color: #D4B8F0; font-size: 12px; font-weight: 600; }
.fo-card .cl-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #E8A559; box-shadow: 0 0 8px #E8A559; }
.fo-card .cc-actions { margin-top: 34px; }
.cc-register { text-decoration: none; }
/* forum: a small network converging on a hub */
.fo-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
.fo-art { width: 100%; height: auto; overflow: visible; }
.fo-links path { fill: none; stroke: rgba(212, 184, 240, 0.28); stroke-width: 1.4; }
.fo-nodes circle { fill: #B794F4; }
.fo-hub { fill: #E8A559; filter: drop-shadow(0 0 10px rgba(232, 165, 89, 0.8)); }
.fo-body .cc-title { margin-top: 26px; }
/* phones (980px layout) */
.is-touch .forum-section { padding: 30px 48px 140px !important; }
.is-touch .fo-card { padding: 40px 40px 46px; border-radius: 40px; }
.is-touch .fo-card .cl-status { font-size: 20px; padding: 10px 18px; }
.is-touch .fo-card { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════
   REGISTER MENU — the top bar's Register opens the five registrations
   ══════════════════════════════════════════════════════════════ */
.reg-menu { position: relative; }
#nav-register { cursor: none; font-family: 'Clash Display', 'Space Grotesk', sans-serif; text-transform: uppercase; }
.reg-pop {
  position: absolute; right: 0; top: calc(100% + 12px); width: 300px; padding: 10px; border-radius: 18px; z-index: 1001;
  background: rgba(12, 8, 22, 0.97); border: 1px solid rgba(183, 148, 244, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}
.reg-menu.is-open .reg-pop { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }
.reg-pop-head { margin: 6px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(212, 184, 240, 0.6); }
#nav-links .reg-pop a, .reg-pop a { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 12px; text-decoration: none; text-transform: none; letter-spacing: 0; transition: background 0.2s; }
.reg-pop a b { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; }
.reg-pop a span { font-size: 12px; color: rgba(245, 243, 239, 0.55); }
.reg-pop a:hover, .reg-pop a:focus-visible { background: rgba(124, 58, 237, 0.28); outline: none; }
.is-touch .reg-pop { width: 560px; padding: 16px; border-radius: 28px; top: calc(100% + 18px); }
.is-touch .reg-pop-head { font-size: 19px; margin: 10px 18px 14px; }
.is-touch .reg-pop a { padding: 20px 18px; border-radius: 18px; }
.is-touch .reg-pop a b { font-size: 28px; }
.is-touch .reg-pop a span { font-size: 21px; }

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE — endless animations only run where they can be seen
   ══════════════════════════════════════════════════════════════ */
/* (sections scrolled away have their endless animations paused by post-intro.js) */
/* the jump screen's dots and cursor tick only while it is shown */
#jump-screen:not(.is-on) * { animation-play-state: paused !important; }

/* Comet border of "Join the galaxy" and "Explore", turned by the GPU: the light is a fixed conic gradient on a square
   (.cta-spin, 1.5× the button's width, centred) that rotates with transform — the ring mask and the halo's blur stay
   still around it. Same look as the animated --cta-angle it replaces, without a style recalc and repaint per frame. */
#cta-btn::before, #cta-btn::after, .explore-btn::before, .explore-btn::after { content: none !important; }
#cta-btn, .explore-btn { animation: none !important; }
.cta-ring, .cta-halo { position: absolute; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cta-ring {
  inset: -1.5px; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cta-halo { inset: -3px; z-index: -1; filter: blur(9px); opacity: .95; transition: opacity .35s, filter .35s; }
#cta-btn:hover .cta-halo, .explore-btn:hover .cta-halo { opacity: 1; filter: blur(14px); }
.cta-spin {
  position: absolute; left: -25%; top: 50%; width: 150%; height: 0; padding-bottom: 150%; margin-top: -75%;
  background: conic-gradient(from 0deg,
    transparent 0deg 70deg,
    rgba(109,40,217,.0) 70deg, rgba(109,40,217,.9) 125deg, #B794F4 160deg, #fff 174deg, transparent 178deg,
    transparent 250deg,
    rgba(139,92,246,.0) 250deg, rgba(139,92,246,.85) 305deg, #D4B8F0 340deg, #fff 354deg, transparent 358deg);
  animation: ctaSpin 3.6s linear infinite;
  will-change: transform;
}
@keyframes ctaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta-spin { animation: none; transform: rotate(200deg); } }
.is-touch #cta-btn .cta-ring { inset: -3px; padding: 3px; }
.is-touch #cta-btn .cta-halo { inset: -6px; filter: blur(18px); }
.low-end #cta-btn .cta-halo { display: none; }
#galaxy-hero:not(.in-view) .explore-btn .cta-spin { animation-play-state: paused !important; }
/* the galaxy title's letters are GPU layers only while they rise in */
.title-char.revealed { will-change: auto; }
/* no mouse on phones: the cursor and its trail are never shown, so they are not even laid out */
.is-touch .cursor-trail-dot, .is-touch #cur-dot, .is-touch #cur-ring { display: none !important; }
/* #grain-overlay is an empty canvas (nothing draws into it) and .vignette is transparent: both covered the whole screen,
   and the canvas's mix-blend-mode made the GPU blend the entire page on every frame — for no visible effect */
#grain-overlay, .vignette { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   FINALE — the white page ends on the curved horizon of a dark planet (the hero's planet, seen again): a violet
   rim glowing on the white, faint stars inside, and the five ways to register. It runs straight into the footer.
   ══════════════════════════════════════════════════════════════ */
.finale { position: relative; z-index: 3; overflow: hidden; padding: 330px clamp(24px, 4vw, 72px) 120px; text-align: center; color: #F5F3EF; }
.finale::before {
  content: ''; position: absolute; left: 50%; top: 230px; width: 280vw; height: 280vw; margin-left: -140vw; border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 5% at 50% 0%, rgba(132, 94, 222, 0.42), transparent 70%),
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, 0.6), transparent 70%) 0 0 / 137px 151px,
    radial-gradient(1px 1px at 101px 17px, rgba(212, 196, 255, 0.5), transparent 70%) 0 0 / 211px 173px,
    radial-gradient(1.4px 1.4px at 57px 163px, rgba(255, 255, 255, 0.45), transparent 70%) 0 0 / 293px 241px,
    radial-gradient(1px 1px at 181px 99px, rgba(255, 255, 255, 0.4), transparent 70%) 0 0 / 239px 313px,
    radial-gradient(1.8px 1.8px at 131px 211px, rgba(220, 205, 255, 0.5), transparent 70%) 0 0 / 397px 359px,
    #0A0812;
  box-shadow: 0 0 0 1.5px rgba(196, 170, 245, 0.9), 0 -6px 26px rgba(139, 92, 246, 0.38), 0 -30px 120px rgba(139, 92, 246, 0.26);
}
.fin-inner { position: relative; max-width: 900px; margin: 0 auto; }
.fin-eyebrow { margin: 0 0 22px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #B794F4; }
.fin-title { margin: 0; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(48px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.02em; color: #FAF8FF; }
.fin-title span { color: #E8A559; }
.fin-sub { margin: 26px 0 0; font-size: 16px; color: rgba(245, 243, 239, 0.62); }
.fin-sub b { color: #FAF8FF; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-links { position: static; background: none; border: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.fin-links a {
  padding: 13px 22px; border-radius: 999px; border: 1px solid rgba(212, 184, 240, 0.28); color: #EDE6FA; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fin-links a:first-child { background: #7C3AED; border-color: #7C3AED; color: #FFFFFF; }
.fin-links a:hover { background: rgba(124, 58, 237, 0.22); border-color: rgba(183, 148, 244, 0.7); }
.fin-links a:first-child:hover { background: #8B5CF6; }
.fin-links a:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 3px; }
.finale + footer.site-footer { border-top-color: transparent; }
/* phones (980px layout) */
.is-touch .finale { padding: 380px 48px 140px; }
.is-touch .finale::before { top: 250px; width: 360vw; height: 360vw; margin-left: -180vw; }
.is-touch .fin-eyebrow { font-size: 20px; }
.is-touch .fin-title { font-size: 112px; }
.is-touch .fin-sub { font-size: 28px; }
.is-touch .fin-links { gap: 18px; margin-top: 56px; }
.is-touch .fin-links a { padding: 22px 34px; font-size: 24px; }
#finale + footer.site-footer, .is-touch #finale + footer.site-footer { border-top: 0 !important; }
/* solid under the planet (well below its curve): no half-covered pixel row where the band meets the footer */
.finale { background: linear-gradient(transparent 0 560px, #0A0812 560px); }

/* Footer signature: "Crafted with </> by Iliass El Fadili" — the name in a white-to-violet gradient over a soft violet
   glow that breathes (opacity only, on its own blurred layer: no repaint), brighter with an underline sweep on hover */
.sf-bottom { flex-wrap: wrap; }
.sf-copy { display: inline-flex; align-items: center; gap: 12px; }
.sf-copy i { font-style: normal; opacity: 0.4; }
.sf-credit { display: inline-flex; align-items: center; gap: 7px; }
.sf-credit code { font-family: 'Space Mono', monospace; font-size: 0.95em; color: #E8A559; }
.sf-bottom a.sf-author { position: relative; gap: 4px; color: #FFFFFF; }
.sf-author b {
  position: relative; z-index: 1; font-weight: 600; letter-spacing: 0.02em;
  background: linear-gradient(90deg, #FFFFFF 0%, #E4D6FB 45%, #B794F4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-author::before {
  content: ''; position: absolute; z-index: 0; inset: -6px -12px; border-radius: 999px;
  transition: opacity 0.3s;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.9), rgba(139, 92, 246, 0) 72%);
  filter: blur(8px); opacity: 0.45; animation: sfGlow 2.8s ease-in-out infinite alternate; pointer-events: none;
}
.sf-author::after {
  content: ''; position: absolute; left: 0; right: 18px; bottom: -3px; height: 1px; background: linear-gradient(90deg, #E4D6FB, #8B5CF6);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
}
.sf-author svg { position: relative; z-index: 1; color: #B794F4; transition: transform 0.25s ease; }
.sf-author:hover::before { animation: none; opacity: 1; }
.sf-author:hover::after { transform: scaleX(1); }
.sf-author:hover svg { transform: translate(2px, -2px); }
@keyframes sfGlow { from { opacity: 0.5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-author::before { animation: none; opacity: 0.55; } }
.is-touch .sf-copy { gap: 18px; }
.is-touch .sf-author::before { inset: -10px -18px; filter: blur(12px); }

/* PC: the glow follows the mouse over the name, and the letters light up where it passes (post-intro.js sets --glow-x/y) */
html:not(.is-touch) .sf-author::before {
  inset: auto; left: var(--glow-x, 50%); top: var(--glow-y, 50%); width: 120px; height: 58px; margin: -29px 0 0 -60px;
  transition: left 0.16s ease-out, top 0.16s ease-out, opacity 0.3s;
}
html:not(.is-touch) .sf-author.is-lit b {
  background: radial-gradient(circle 46px at var(--glow-x, 50%) var(--glow-y, 50%), #FFFFFF 0%, #F1E9FF 35%, #C4A7F7 70%, #9B6FEA 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* the last line, readable: brighter text, a touch larger */
.sf-bottom { font-size: 14px; color: rgba(245, 243, 239, 0.78); }
.sf-bottom a { color: rgba(245, 243, 239, 0.92); }
.sf-copy i { opacity: 0.55; }
.is-touch .sf-bottom { font-size: 22px; }

/* PC: the hero is exactly the window's height. Its old 700px minimum pushed the planet's horizon, the date and the
   countdown below the fold on 14" laptops (browser windows ~600–650px tall); the title already scales itself to fit. */
html:not(.is-touch) #hero { min-height: 460px; }

/* Domains deck on short PC windows (14"/15" laptops, ~540–820px tall): the card is capped by the window's height, the
   headline and the list breathe with it, and the content is centred above the controls instead of running into them */
@media (max-height: 820px) {
  html:not(.is-touch) .deck-stage { padding-bottom: 64px; }
  html:not(.is-touch) .deck { width: min(380px, 30vw, 46vh); }
  html:not(.is-touch) .deck-headline { font-size: min(clamp(40px, 5.2vw, 76px), 8.4vh); }
  html:not(.is-touch) .deck-list { margin-top: 3.4vh; gap: 2px; }
  html:not(.is-touch) .deck-list li { padding: 1vh 0; }
  html:not(.is-touch) .deck-count { margin-top: 2.2vh; }
}

/* PC hero title: one composition on every screen. Each line is sized in proportion to the window — the proportions
   it has on a wide screen (where it was designed) — instead of px caps that only some screens reach. On 1280–1500px
   windows (14" laptops at 125–150% zoom) the caps weren't reached, THE DATA GALAXY wrapped onto two lines and the
   whole block was shrunk into the middle. The hero fit (post-intro.js) still scales the block down if a window is short. */
html:not(.is-touch) #hero #center { padding-left: 4vw; padding-right: 4vw; }
html:not(.is-touch) #hero .t-d, html:not(.is-touch) #hero .t-ata, html:not(.is-touch) #hero .t-verse { font-size: 10vw; }
html:not(.is-touch) #hero #edition { font-size: 5.9vw; padding-left: 10.6vw; }
html:not(.is-touch) #hero #tagline { font-size: 8.25vw; margin-left: -4vw; padding-right: 4vw; }

/* PC menu panel: the links' spacing follows the window's height, so all ten fit on short laptop windows (it used to
   run off the bottom of a 650px-tall screen); below ~500px tall the panel scrolls rather than being cut */
html:not(.is-touch) #mobile-menu-overlay { max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
html:not(.is-touch) #mobile-menu-overlay .mobile-menu-header { padding: clamp(10px, 2vh, 16px) 24px !important; }
html:not(.is-touch) #mobile-menu-overlay a { padding: clamp(7px, 1.75vh, 16px) 24px; font-size: clamp(13px, 2vh, 15px); flex-shrink: 0; }

/* Speakers on short PC windows (14"/15" laptops): the square cards are capped by the window's height and the heading
   breathes with it, so the pinned row is never cut at the bottom */
@media (max-height: 860px) {
  html:not(.is-touch) #speakers .speakers-h2-anim { font-size: min(clamp(42px, 6vw, 72px), 9vh); margin-bottom: 5vh !important; }
  html:not(.is-touch) .speakers-track.is-row .speaker-card { width: min(clamp(380px, 30vw, 560px), calc(100vh - 290px)) !important; }
}

/* Schedule on narrower PC windows: the day column (30% of the width, as before) may go below its old 380px minimum,
   and its padding and names scale with the window — identical from ~1600px up — so the programme keeps its room on
   1280–1440px laptops instead of wrapping every title */
html:not(.is-touch) .light-zone .schedule-grid { grid-template-columns: minmax(270px, 30%) 1fr; }
html:not(.is-touch) .light-zone .schedule-tab { padding: clamp(26px, 2.6vw, 42px); }
html:not(.is-touch) .light-zone .schedule-tab .tab-bottom { font-size: clamp(24px, 2.2vw, 34px); }

/* the SQL lines in the hero button stay readable on laptops and at 125–150% zoom (they went down to ~9px) */
html:not(.is-touch) #btn-sql-view { font-size: clamp(13.5px, 0.95vw, 15px); }

/* ══════════════════════════════════════════════════════════════
   TEAM CARD — one card per cell, as a small stage: the duo (cut out of its background) on the violet light, and
   under each person their own name plate (name, role, links) with a tick pointing up at them. Pointing at a person,
   in the photo or at their plate, lights them and dims the other one.
   ══════════════════════════════════════════════════════════════ */
html:not(.is-touch) .team-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.team-card.is-in .tg-inner { animation: tcIn 0.4s ease both; }
.ts { display: flex; flex-direction: column; }
.ts-head { padding: 6px 6px 18px; }
.tg-team { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #7B5EA7; }
.tg-name { margin: 8px 0 0; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; line-height: 1.08; color: #141414; }
.ts-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #5A5566; }
.ts-stage {
  position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(55% 62% at 50% 78%, rgba(183, 148, 244, 0.55), rgba(183, 148, 244, 0) 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(232, 165, 89, 0.16), rgba(232, 165, 89, 0) 70%),
    linear-gradient(165deg, #1E0B3E 0%, #3B1876 52%, #5B2E9C 100%);
}
.ts-duo { position: absolute; left: 50%; bottom: 0; height: 94%; transform: translateX(-50%); }
.ts-duo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; transition: filter 0.3s ease; }
.ts-stage.is-duo::after {                                   /* the person not pointed at, dimmed */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.ts-stage.is-duo[data-focus="0"]::after { opacity: 1; background: linear-gradient(90deg, transparent 48%, rgba(14, 6, 30, 0.6) 58%); }
.ts-stage.is-duo[data-focus="1"]::after { opacity: 1; background: linear-gradient(270deg, transparent 48%, rgba(14, 6, 30, 0.6) 58%); }
.ts-empty { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.ts-empty svg { width: 30%; margin: 0 -2%; fill: rgba(232, 222, 255, 0.28); transform: translateY(8%); }
.ts-empty b { position: absolute; top: 18px; left: 20px; font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.ts-plates { position: relative; list-style: none; margin: 0; padding: 0; height: 128px; }
.ts-plate {
  position: absolute; top: 18px; width: 31%; transform: translateX(-50%); text-align: center;
  display: flex; flex-direction: column; align-items: center; transition: opacity 0.3s ease;
}
.ts-plates.is-solo .ts-plate { width: 60%; }
.ts-plate::before {                                         /* the tick pointing up at the person */
  content: ''; position: absolute; top: -12px; left: 50%; width: 1px; height: 9px; background: #C9B8EC; transition: background 0.3s;
}
.ts-plates[data-focus="0"] .ts-plate[data-k="1"], .ts-plates[data-focus="1"] .ts-plate[data-k="0"] { opacity: 0.4; }
.ts-plates[data-focus="0"] .ts-plate[data-k="0"]::before, .ts-plates[data-focus="1"] .ts-plate[data-k="1"]::before { background: #7C3AED; }
.tg-pname { display: block; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: #141414; }
.tg-pname.is-empty { color: #B9AFC9; }
.tg-role { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: #6D28D9; }
.tg-icons { display: flex; justify-content: center; gap: 12px; margin-top: 9px; }
.tg-icons .tc-icon svg { width: 21px; height: 21px; }
.tm-face.has-photo { background-color: #4A1F8C; background-repeat: no-repeat; }
/* phones (980px layout) */
.is-touch .ts-head { padding: 8px 8px 26px; }
.is-touch .tg-team { font-size: 20px; }
.is-touch .tg-name { font-size: 46px; }
.is-touch .ts-desc { font-size: 23px; }
.is-touch .ts-plates { height: 196px; }
.is-touch .ts-plate { top: 26px; }
.is-touch .ts-plate::before { top: -18px; height: 13px; }
.is-touch .tg-pname { font-size: 27px; }
.is-touch .tg-role { font-size: 20px; }
.is-touch .tg-icons { gap: 22px; margin-top: 14px; }
.is-touch .tg-icons .tc-icon svg { width: 36px; height: 36px; }
.is-touch .ts-empty b { font-size: 18px; top: 26px; left: 28px; }
/* plates of equal height, icons on one line even when a name takes two */
.ts-plate { height: 104px; }
.ts-plate .tg-icons { margin-top: auto; }
.is-touch .ts-plate { height: 166px; }
/* card header: only the cell's name, centred; names, roles and links a little larger */
.ts-head { padding: 4px 6px 16px; text-align: center; }
.ts-head .tg-name { margin: 0; }
.tg-pname { font-size: 19.5px; }
.tg-role { font-size: 14.5px; margin-top: 4px; }
.tg-icons { gap: 14px; margin-top: 10px; }
.tg-icons .tc-icon svg { width: 24px; height: 24px; }
.ts-plates { height: 142px; }
.ts-plate { height: 118px; }
.is-touch .ts-head { padding: 6px 8px 24px; }
.is-touch .tg-pname { font-size: 31px; }
.is-touch .tg-role { font-size: 23px; }
.is-touch .tg-icons { gap: 26px; }
.is-touch .tg-icons .tc-icon svg { width: 42px; height: 42px; }
.is-touch .ts-plates { height: 214px; }
.is-touch .ts-plate { height: 184px; }
/* map pairs: the deputy's circle barely overlaps the head's, so both faces show whole */
.tm-pair .is-cohead { margin-left: -4px; }
.is-touch .tm-pair .is-cohead { margin-left: -6px; }
.tm-face.has-photo { object-fit: cover; }

/* ══════════════════════════════════════════════════════════════
   TEAM ORBIT — still and quiet: leadership at the centre, the eight cells on one fine ring, each a small tile of its
   duo photo on the violet stage (the card's language, in miniature), a hairline to the centre. No animation but the
   hover lift; the picked tile gets a violet outline and its line turns violet.
   ══════════════════════════════════════════════════════════════ */
html:not(.is-touch) .team-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr); align-items: center; }
.team-orbit { position: relative; width: min(100%, 620px); aspect-ratio: 1; justify-self: center; }
.team-orbit::before {                                         /* a faint light behind the centre */
  content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0) 70%); pointer-events: none;
}
.to-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.to-ring { fill: none; stroke: #DCCFF3; stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.to-ray { stroke: #E6DCF6; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.to-ray.is-on { stroke: #8B5CF6; stroke-width: 1.5; }
.to-node {
  position: absolute; z-index: 1; --w: 112px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0; margin: 0; border: 0; background: none; font-family: inherit; cursor: pointer;
  transform: translate(-50%, calc(-1 * var(--w) * 0.4));
}
.to-node.is-center { --w: 168px; z-index: 2; }
.to-tile {
  position: relative; display: block; width: var(--w); aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 85%, rgba(183, 148, 244, 0.55), rgba(183, 148, 244, 0) 70%), linear-gradient(165deg, #1E0B3E 0%, #3B1876 55%, #5B2E9C 100%);
  box-shadow: 0 10px 26px rgba(74, 32, 112, 0.16);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s ease;
}
.to-tile img { position: absolute; left: 50%; bottom: 0; height: 92%; max-width: 96%; object-fit: contain; object-position: bottom; transform: translateX(-50%); }
.to-tile b { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font-size: 15px; }
.to-label { font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; color: #4A4458; transition: color 0.3s; }
.is-center .to-label { font-size: 15px; color: #141414; }
.to-node:hover .to-tile { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74, 32, 112, 0.22); }
.to-node.is-on .to-tile { box-shadow: 0 0 0 2.5px #FAF8FF, 0 0 0 4.5px #7C3AED, 0 16px 34px rgba(109, 40, 217, 0.28); }
.to-node.is-on .to-label { color: #6D28D9; }
.to-node:focus-visible { outline: none; }
.to-node:focus-visible .to-tile { box-shadow: 0 0 0 2.5px #FAF8FF, 0 0 0 4.5px #A78BFA; }
/* entrance: the tiles fade in one after another, once */
.team-orbit .to-node, .team-orbit .to-lines { opacity: 0; transition: opacity 0.6s ease; transition-delay: calc(0.05s + var(--d, 0) * 0.06s); }
.team-orbit.is-in .to-node, .team-orbit.is-in .to-lines { opacity: 1; }
/* phones (980px layout) */
.is-touch .team-orbit { width: 900px; }
.is-touch .to-node { --w: 170px; gap: 12px; }
.is-touch .to-node.is-center { --w: 250px; }
.is-touch .to-label { font-size: 21px; }
.is-touch .is-center .to-label { font-size: 24px; }
.is-touch .to-tile { border-radius: 22px; }
/* the tiles become circles: the duo fills the disc (cropped by its edge), both faces kept clear of the curve */
.to-node { --w: 118px; transform: translate(-50%, calc(-1 * var(--w) / 2)); }
.to-node.is-center { --w: 178px; }
.to-tile { aspect-ratio: 1; border-radius: 50%; }
.to-tile img { height: 90%; max-width: none; }
.is-touch .to-node { --w: 180px; }
.is-touch .to-node.is-center { --w: 262px; }
.is-touch .to-tile { border-radius: 50%; }
/* circles v2: each a portrait framed on the faces (team/thumbs, cut by face detection), a white ring and a soft shadow */
.to-node { --w: 112px; gap: 12px; }
.to-node.is-center { --w: 166px; }
.to-tile { box-shadow: 0 0 0 3px #FFFFFF, 0 12px 28px rgba(74, 32, 112, 0.18); }
.to-tile img { position: static; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; }
.to-node:hover .to-tile { transform: translateY(-3px); box-shadow: 0 0 0 3px #FFFFFF, 0 18px 36px rgba(74, 32, 112, 0.24); }
.to-node.is-on .to-tile { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #7C3AED, 0 18px 36px rgba(109, 40, 217, 0.3); }
.to-label { font-size: 13.5px; color: #3B3546; letter-spacing: 0.01em; }
.is-center .to-label { font-size: 15.5px; }
.to-ring { stroke: #D9CCF2; stroke-dasharray: 1.5 5; }
.team-orbit::before { inset: 26%; background: radial-gradient(circle, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0) 70%); }
.is-touch .to-node { --w: 168px; gap: 14px; }
.is-touch .to-node.is-center { --w: 246px; }
.is-touch .to-tile { box-shadow: 0 0 0 5px #FFFFFF, 0 16px 34px rgba(74, 32, 112, 0.18); }
.is-touch .to-node.is-on .to-tile { box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 8px #7C3AED, 0 18px 36px rgba(109, 40, 217, 0.3); }
.is-touch .to-label { font-size: 22px; }
.is-touch .is-center .to-label { font-size: 25px; }
.to-node { --w: 122px; }
.to-node.is-center { --w: 172px; }
.is-touch .to-node { --w: 180px; }
.is-touch .to-node.is-center { --w: 254px; }

/* ══════════════════════════════════════════════════════════════
   TEAM ORBIT — the photos in their own rectangular frame: each cell's whole duo photo, small, in its real proportions,
   on the violet stage, with a white border and a soft shadow; the picked one gets a violet outline.
   ══════════════════════════════════════════════════════════════ */
.to-node { --h: 88px; gap: 10px; transform: translate(-50%, -60%); }
.to-node.is-center { --h: 126px; }
.to-tile { width: auto; height: var(--h); aspect-ratio: auto; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 3px #FFFFFF, 0 12px 28px rgba(74, 32, 112, 0.18); }
.to-tile img { display: block; position: static; width: auto; height: 100%; max-width: none; object-fit: contain; transform: none; }
.to-node.is-on .to-tile { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #7C3AED, 0 18px 36px rgba(109, 40, 217, 0.3); }
.to-node:hover .to-tile { box-shadow: 0 0 0 3px #FFFFFF, 0 18px 36px rgba(74, 32, 112, 0.24); }
.to-node.is-on:hover .to-tile { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #7C3AED, 0 18px 36px rgba(109, 40, 217, 0.3); }
.is-touch .to-node { --h: 132px; }
.is-touch .to-node.is-center { --h: 190px; }
.is-touch .to-tile { border-radius: 16px; box-shadow: 0 0 0 5px #FFFFFF, 0 16px 34px rgba(74, 32, 112, 0.18); }
.is-touch .to-node.is-on .to-tile { box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 8px #7C3AED, 0 18px 36px rgba(109, 40, 217, 0.3); }
/* every frame the same size (leadership included): the photo whole inside, standing on the bottom of the violet stage */
.to-node, .to-node.is-center { --fw: 132px; }
.to-tile { width: var(--fw); height: auto; aspect-ratio: 4 / 3; }
.to-tile img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.is-touch .to-node, .is-touch .to-node.is-center { --fw: 196px; }
.to-node, .to-node.is-center { --fw: 108px; }
.is-touch .to-node, .is-touch .to-node.is-center { --fw: 160px; }

/* ══════════════════════════════════════════════════════════════
   PROGRAMME — the real program on its own piece of space, in the event program's look: a starry violet board, the
   days as big slanted Orbitron titles, times in white and session titles in cyan (Orbitron), the details in Space
   Mono, ring bullets, and domain pills in each domain's colour.
   ══════════════════════════════════════════════════════════════ */
#schedule { --pg-cyan: #37D7EC; }
#schedule .pg-board {
  position: relative; overflow: hidden; margin-top: 44px; padding: clamp(36px, 4vw, 64px) clamp(28px, 5vw, 84px) clamp(40px, 4vw, 64px);
  border-radius: 36px; color: #EDE6FA;
  background:
    url('stars-program.svg') 0 0 / 1600px 1600px,             /* a random sky, drawn once: no pattern shows */
    radial-gradient(60% 50% at 85% 8%, rgba(109, 40, 217, 0.55), transparent 70%),
    linear-gradient(160deg, #1A0B3A 0%, #2A1060 45%, #160A30 100%);
  box-shadow: 0 40px 90px rgba(40, 12, 90, 0.25);
}
#schedule .pg-deco { position: absolute; right: -60px; bottom: -40px; width: 46%; height: 62%; pointer-events: none; }   /* the program's rounded bars */
#schedule .pg-deco i { position: absolute; right: 0; height: 26%; border-radius: 999px 0 0 999px; background: rgba(255, 255, 255, 0.045); }
#schedule .pg-deco i:nth-child(1) { top: 0; width: 82%; }
#schedule .pg-deco i:nth-child(2) { top: 34%; width: 100%; }
#schedule .pg-deco i:nth-child(3) { top: 68%; width: 70%; }
#schedule .pg-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#schedule .pg-kicker { margin: 0; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: #A98AE0; }
#schedule .pg-tabs { position: static; display: flex; flex-direction: row; gap: 10px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
#schedule .pg-tab {
  display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 11px 20px; margin: 0;
  border-radius: 999px; border: 1px solid rgba(169, 138, 224, 0.45); background: transparent; color: #CDBDF0; box-shadow: none; cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
#schedule .pg-tab b { font-family: 'Orbitron', sans-serif; font-weight: 700; font-style: italic; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
#schedule .pg-tab span { font-family: 'Space Mono', monospace; font-size: 12px; opacity: 0.8; }
#schedule .pg-tab:hover { border-color: rgba(55, 215, 236, 0.7); color: #FFFFFF; }
#schedule .pg-tab.active { background: var(--pg-cyan); border-color: var(--pg-cyan); color: #120826; }
#schedule .pg-tab:focus-visible { outline: 2px solid var(--pg-cyan); outline-offset: 3px; }
#schedule .pg-query { position: relative; display: block; margin: 26px 0 0; padding: 0; background: none; border-radius: 0; font-family: 'Space Mono', monospace; font-size: 13px; color: #A98AE0; }
#schedule .pg-day { position: relative; border: 0; padding: 0; }
#schedule .pg-day-title {
  margin: 18px 0 30px; font-family: 'Orbitron', sans-serif; font-weight: 800; font-style: italic; font-size: clamp(56px, 6.4vw, 92px);
  line-height: 1; text-transform: uppercase; color: var(--pg-cyan); text-shadow: 0 0 40px rgba(55, 215, 236, 0.25);
}
#schedule .pg-day-title span { display: block; margin-top: 12px; font-family: 'Space Mono', monospace; font-weight: 400; font-style: normal; font-size: 14px; letter-spacing: 0.04em; text-transform: none; color: #CDBDF0; text-shadow: none; }
#schedule .pg-list { list-style: none; margin: 0; padding: 0; max-width: 880px; display: grid; gap: 24px; }
#schedule .pg-item { position: relative; padding-left: 38px; }
#schedule .pg-item::before {                                  /* the ring bullet */
  content: ''; position: absolute; left: 0; top: 0.32em; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #FFFFFF;
}
#schedule .pg-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
#schedule .pg-line time { font-family: 'Orbitron', sans-serif; font-weight: 800; font-style: italic; font-size: 18px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
#schedule .pg-title { font-family: 'Orbitron', sans-serif; font-weight: 600; font-style: italic; font-size: 18px; text-transform: uppercase; color: var(--pg-cyan); letter-spacing: 0.02em; }
#schedule .pg-tag {
  --c: #B794F4; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  font-family: 'Space Mono', monospace; font-size: 12px; font-style: italic; color: #F1EAFF;
}
#schedule .pg-tag.is-cyber { --c: #4EC9B0; }
#schedule .pg-tag.is-gov { --c: #D4B8F0; }
#schedule .pg-tag.is-industry { --c: #E8A559; }
#schedule .pg-tag.is-gaming { --c: #B794F4; }
#schedule .pg-tag.is-career { --c: #9AA8FF; }
#schedule .pg-desc { margin: 7px 0 0; font-family: 'Space Mono', monospace; font-size: 14.5px; line-height: 1.6; color: #E4DAF6; }
#schedule .pg-day.active .pg-item { animation: pgIn 0.55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 0.04s); }
@keyframes pgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* phones (980px layout) */
.is-touch #schedule .pg-board { border-radius: 44px; padding: 56px 44px 64px; }
.is-touch #schedule .pg-kicker { font-size: 19px; letter-spacing: 0.24em; }
.is-touch #schedule .pg-tabs { width: 100%; margin: 28px 0 0 !important; display: flex !important; flex-direction: row !important; }
.is-touch #schedule .pg-tab { flex: 1; justify-content: center; padding: 22px 20px !important; }
.is-touch #schedule .pg-tab b { font-size: 24px; }
.is-touch #schedule .pg-tab span { font-size: 19px; }
.is-touch #schedule .pg-query { font-size: 18px !important; padding: 0 !important; margin-top: 32px; }
.is-touch #schedule .pg-day-title { font-size: 110px; margin: 24px 0 40px; }
.is-touch #schedule .pg-day-title span { font-size: 22px; }
.is-touch #schedule .pg-list { gap: 36px; }
.is-touch #schedule .pg-item { padding-left: 52px; }
.is-touch #schedule .pg-item::before { width: 20px; height: 20px; border-width: 3.5px; }
.is-touch #schedule .pg-line time, .is-touch #schedule .pg-title { font-size: 28px; }
.is-touch #schedule .pg-tag { font-size: 19px; padding: 5px 16px; }
.is-touch #schedule .pg-desc { font-size: 23px; }
/* PC: the two days as cards in a sticky column on the left of the programme, as before */
#schedule .pg-board { overflow: clip; }                       /* clip, not hidden: lets the day column stay sticky */
#schedule .pg-tab-long { display: none; }
html:not(.is-touch) #schedule .pg-grid { position: relative; display: grid; grid-template-columns: minmax(250px, 26%) 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: 28px; }
html:not(.is-touch) #schedule .pg-tabs { position: sticky; top: 110px; flex-direction: column; gap: 14px; }
html:not(.is-touch) #schedule .pg-tab {
  flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(22px, 2.2vw, 32px); border-radius: 18px; text-align: left;
  background: rgba(255, 255, 255, 0.04); border-color: rgba(169, 138, 224, 0.35);
}
html:not(.is-touch) #schedule .pg-tab b { font-size: clamp(22px, 2vw, 30px); }
html:not(.is-touch) #schedule .pg-tab .pg-tab-long { display: block; font-size: 14px; opacity: 1; }
html:not(.is-touch) #schedule .pg-tab .pg-tab-short { display: none; }
html:not(.is-touch) #schedule .pg-tab.active { background: rgba(55, 215, 236, 0.12); border-color: var(--pg-cyan); color: var(--pg-cyan); box-shadow: 0 0 30px rgba(55, 215, 236, 0.15); }
html:not(.is-touch) #schedule .pg-tab.active .pg-tab-long { color: #EDE6FA; }
html:not(.is-touch) #schedule .pg-query { margin-top: 0; }
html:not(.is-touch) #schedule .pg-day-title { margin-top: 14px; }

/* programme: the watermark is the D logo, huge, faint, running off the bottom-right corner as in the event program */
#schedule .pg-deco { right: -14%; bottom: -9%; width: 62%; height: auto; aspect-ratio: 885 / 735; fill: rgba(255, 255, 255, 0.05); }
#schedule .pg-grid, #schedule .pg-main { position: relative; }
html:not(.is-touch) #schedule .pg-grid { margin-top: 0; }
/* the query and its response, in the same cyan as the day's title */
#schedule .pg-query { color: var(--pg-cyan); font-size: 14px; }
#schedule .pg-result { position: relative; margin: 30px 0 0; font-family: 'Space Mono', monospace; font-size: 14px; color: var(--pg-cyan); }
#schedule .pg-result span { margin-right: 6px; }
.is-touch #schedule .pg-deco { right: -26%; bottom: -3%; width: 104%; }
.is-touch #schedule .pg-tabs { margin: 0 !important; }
.is-touch #schedule .pg-query { font-size: 20px !important; }
.is-touch #schedule .pg-result { margin-top: 44px; font-size: 22px; }

/* programme rows on PC: pointing at one slides it slightly and lights a band of cyan across the row, out to the board's
   edge (the board clips it). The band fills half of each gap, so moving down the list never flickers. Transform and
   opacity only. */
@media (hover: hover) {
  html:not(.is-touch) #schedule .pg-item { isolation: isolate; }
  html:not(.is-touch) #schedule .pg-item::after {
    content: ''; position: absolute; z-index: -1; left: -16px; right: -100vw; top: -12px; bottom: -12px; border-radius: 10px 0 0 10px;
    background: rgba(55, 215, 236, 0.11); box-shadow: inset 2px 0 0 rgba(55, 215, 236, 0.55); opacity: 0; transition: opacity 0.22s ease;
  }
  html:not(.is-touch) #schedule .pg-item::before { transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), border-color 0.2s; }
  html:not(.is-touch) #schedule .pg-line, html:not(.is-touch) #schedule .pg-desc { transition: transform 0.25s cubic-bezier(.2, .8, .2, 1); }
  html:not(.is-touch) #schedule .pg-item:hover::after { opacity: 1; }
  html:not(.is-touch) #schedule .pg-item:hover::before { transform: translateX(9px); border-color: var(--pg-cyan); }
  html:not(.is-touch) #schedule .pg-item:hover .pg-line, html:not(.is-touch) #schedule .pg-item:hover .pg-desc { transform: translateX(9px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.is-touch) #schedule .pg-item:hover::before, html:not(.is-touch) #schedule .pg-item:hover .pg-line, html:not(.is-touch) #schedule .pg-item:hover .pg-desc { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   CONTACT — location, phone, email and the map, in the dark space between the finale and the footer
   ══════════════════════════════════════════════════════════════ */
.contact-section { position: relative; z-index: 3; padding: 50px clamp(24px, 4vw, 72px) 120px; background: #0A0812; color: #F5F3EF; }
.ct-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ct-title { margin: 0; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; color: #FAF8FF; }
.ct-title span { color: #E8A559; }
.ct-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 26px; }
.ct-list li { display: flex; align-items: flex-start; gap: 18px; }
.ct-list svg { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: #B794F4; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ct-list b { display: block; margin-bottom: 5px; font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #B794F4; }
.ct-list a, .ct-list span { display: block; font-size: 16px; line-height: 1.55; color: rgba(245, 243, 239, 0.86); text-decoration: none; }
.ct-list a { transition: color 0.2s; }
.ct-list a:hover { color: #FFFFFF; }
.ct-list a:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 3px; border-radius: 4px; }
.ct-map { margin: 0; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; background: #1A1426; box-shadow: 0 0 0 1px rgba(212, 184, 240, 0.18), 0 30px 70px rgba(0, 0, 0, 0.5); }
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* phones (980px layout): stacked; the map's page is drawn at phone size and scaled up, or its labels would be tiny */
.is-touch .contact-section { padding: 40px 48px 130px; }
.is-touch .ct-inner { grid-template-columns: 1fr; gap: 64px; }
.is-touch .ct-title { font-size: 92px; }
.is-touch .ct-list { margin-top: 56px; gap: 40px; }
.is-touch .ct-list li { gap: 26px; }
.is-touch .ct-list svg { width: 44px; height: 44px; }
.is-touch .ct-list b { font-size: 28px; margin-bottom: 8px; }
.is-touch .ct-list a, .is-touch .ct-list span { font-size: 27px; }
.is-touch .ct-map { aspect-ratio: 4 / 3; border-radius: 36px; }
.is-touch .ct-map iframe { width: 44.45%; height: 44.45%; transform: scale(2.25); transform-origin: 0 0; }

/* FOOTER, lightened: one line — the logo, the links, the two icons — then the last line. The details live in Contact */
#contact + footer.site-footer, .is-touch #contact + footer.site-footer { border-top: 0 !important; padding-top: 0; }
.sf-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; padding-top: 36px; border-top: 1px solid rgba(212, 184, 240, 0.12); }
.site-footer nav.sf-links ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.sf-icons { margin-top: 0; }
.sf-logo svg { width: 34px; }
.sf-bottom { margin-top: 26px; border-top: 0; padding-top: 0; }
.is-touch .sf-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 44px; padding-top: 70px; }
.is-touch .site-footer nav.sf-links ul { justify-content: flex-start; gap: 22px 40px; }
.is-touch .sf-bottom { margin-top: 56px; gap: 22px; }
/* the menu panel on PC: room for its eleven links */
html:not(.is-touch) #mobile-menu-overlay { max-height: calc(100vh - 104px); }
html:not(.is-touch) #mobile-menu-overlay a { padding-top: clamp(6px, 1.5vh, 16px); padding-bottom: clamp(6px, 1.5vh, 16px); }
/* footer brand: the D logo is the D of "Dataverse" — capital height, on the same baseline, tight against "ataverse" */
.site-footer .sf-logo { align-items: baseline; gap: 0.1em; }
.site-footer .sf-logo svg { width: auto; height: 0.74em; flex: none; }
/* phones (980px layout): the same sky, drawn larger so the stars keep their size on the screen */
.is-touch #schedule .pg-board { background-size: 2800px 2800px, auto, auto; }
/* domain pills: the domain's colour is clear at a glance — coloured text, a stronger border, a tiny planet before the name */
#schedule .pg-tag { display: inline-flex; align-items: center; gap: 7px; border-color: color-mix(in srgb, var(--c) 80%, transparent); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 700; }
#schedule .pg-tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.is-touch #schedule .pg-tag { gap: 10px; }
.is-touch #schedule .pg-tag::before { width: 11px; height: 11px; }

/* sponsor logos in the small cards; ISIC's card is dark because its text is white */
.pt-slot.has-logo a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.pt-slot.has-logo img { display: block; width: 64%; height: auto; }
.pt-slot.is-dark { background: linear-gradient(150deg, #1A0B3A 0%, #2A1060 60%, #1A0B3A 100%); border-color: #2A1060; }
.pt-slot.has-logo a:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; }
/* the two logo cards: a thin orbit in the corner (clear of the logo) carrying a planet in the sponsor's colour; on hover
   the card lifts and lights up in that colour, and the planet slides along its orbit. Transform only; still until then. */
.pt-slot.has-logo { --brand: #03EF62; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease; }
.pt-slot.is-dark { --brand: #40B9B9; background: url('stars-program.svg') 0 0 / 1000px 1000px, radial-gradient(70% 90% at 90% 100%, rgba(64, 185, 185, 0.2), transparent 70%), linear-gradient(150deg, #1A0B3A 0%, #2A1060 60%, #1A0B3A 100%); }
.pt-slot.has-logo a { position: relative; overflow: hidden; }
.pt-slot.has-logo img { position: relative; z-index: 1; }
.pt-orbit { position: absolute; right: -26.9%; bottom: -47%; width: 50%; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); transition: transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.pt-orbit::after { content: ''; position: absolute; left: 14.6%; top: 14.6%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 14px var(--brand); }
@media (hover: hover) {
  html:not(.is-touch) .pt-slot.has-logo:hover { transform: translateY(-5px); box-shadow: 0 0 0 1.5px var(--brand), 0 26px 60px color-mix(in srgb, var(--brand) 32%, transparent); }
  html:not(.is-touch) .pt-slot.has-logo:hover .pt-orbit { transform: rotate(38deg); }
}
@media (prefers-reduced-motion: reduce) { .pt-orbit { transition: none; } }
.is-touch .pt-slot.is-dark { background-size: 1800px 1800px, auto, auto; }
.is-touch .pt-orbit { border-width: 2px; }
.is-touch .pt-orbit::after { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
/* "Visit website" badge on the logo cards: appears on hover at the top right, on PC only (phones have no hover) */
.pt-visit {
  position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: var(--brand); color: #0A0812; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
}
.pt-visit svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-slot.has-logo a:focus-visible .pt-visit { opacity: 1; transform: none; }
@media (hover: hover) {
  html:not(.is-touch) .pt-slot.has-logo:hover .pt-visit { opacity: 1; transform: none; }
}
.is-touch .pt-visit { display: none; }
.pt-slot .pt-visit { color: #0A0812; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════════
   HEADER — fixed over the whole page: the logo (back to top), Register and the menu, with no visible container. After
   the first bit of scrolling the logo shrinks and they move up a little. `translate`/`scale`, apart from the entrance's transform.
   ══════════════════════════════════════════════════════════════ */
#logo-wrap { position: fixed; z-index: 1001; text-decoration: none; transform-origin: 0 0; transition: translate 0.3s ease, scale 0.3s ease; }
#logo-wrap:focus-visible { outline: 2px solid #D4B8F0; outline-offset: 4px; border-radius: 8px; }
#nav-links { position: fixed; z-index: 1001; transition: translate 0.3s ease; }
#nav-countdown-btn { display: none !important; }
html:not(.is-touch) #mobile-menu-overlay { position: fixed; z-index: 1000; transition: opacity 0.2s ease, transform 0.2s ease, translate 0.3s ease; }
.is-touch #mobile-menu-overlay { position: fixed !important; z-index: 1000; }
/* the container is invisible but real: it catches clicks in the empty space between the logo and Register, so they never
   reach a link or card passing underneath. Scrolling (wheel or finger) still goes through to the page. */
#dv-bar { position: fixed; z-index: 990; left: 0; right: 0; top: 0; height: 68px; }
.dv-scrolled #logo-wrap { translate: 0 -16px; scale: 0.62; }
.dv-scrolled #nav-links { translate: 0 -18px; }
html.dv-scrolled:not(.is-touch) #mobile-menu-overlay { translate: 0 -18px; }
html.dv-scrolled:not(.is-touch) #mobile-menu-overlay { max-height: calc(100vh - 88px); }
/* phones (980px layout) */
.is-touch #dv-bar { height: 105px; }
.is-touch.dv-scrolled #logo-wrap { translate: 0 -6px; scale: 0.8; }
.is-touch.dv-scrolled #nav-links { translate: 0 -20px; }
.is-touch.dv-scrolled #mobile-menu-overlay { translate: 0 -20px; }