/* ================================================================
   HCRL 2026 — FANCY variant (original elegant style)
   Human-Centered Robot Learning and Interaction
   Restrained, premium: subtle ambient gradient, gradient text,
   glassmorphism cards, soft hover + scroll reveal. No countdowns,
   scanlines, or progress bars — tasteful, not maximal.
   ================================================================ */

:root {
  --bg: #0b0d12;
  --bg-soft: #11141c;
  --bg-card: rgba(255,255,255,0.035);
  --bg-card-hover: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #e8eaf0;
  --text-soft: #a6acbd;
  --text-faint: #6b7285;
  --accent: #7c8cff;
  --accent-2: #57e6c9;
  --accent-3: #ff8fb1;
  --grad: linear-gradient(120deg,#7c8cff 0%,#57e6c9 55%,#ffd479 100%);
  --grad-text: linear-gradient(100deg,#9aa6ff 0%,#6ff0d4 60%,#ffd479 100%);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1120px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  --font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display: "Space Grotesk",var(--font);
}
[data-theme="light"] {
  --bg:#f7f8fc; --bg-soft:#ffffff; --bg-card:rgba(20,24,40,.025); --bg-card-hover:rgba(20,24,40,.05);
  --border:rgba(20,24,40,.10); --border-strong:rgba(20,24,40,.18);
  --text:#14182a; --text-soft:#4a5168; --text-faint:#828aa3; --shadow:0 20px 50px -24px rgba(40,50,90,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { margin:0; font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* subtle, static ambient gradient (no animation) */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -5%, rgba(124,140,255,.18), transparent 60%),
    radial-gradient(50vw 50vw at 95% 8%, rgba(87,230,201,.14), transparent 55%),
    radial-gradient(45vw 45vw at 50% 110%, rgba(255,143,177,.12), transparent 55%);
}
[data-theme="light"] body::before { opacity:.55; }

a { color:var(--accent); text-decoration:none; transition:color .18s; }
a:hover { color:var(--accent-2); }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-.02em; margin:0; }
code { font-family:ui-monospace,monospace; font-size:.85em; background:var(--bg-card); padding:2px 6px; border-radius:6px; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap.narrow { max-width:760px; }
.muted { color:var(--text-soft); }
.gradient-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* nav */
.nav { position:sticky; top:0; z-index:100; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; gap:18px; height:66px; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--text); font-size:1.05rem; white-space:nowrap; flex:none; }
.brand .dot { width:26px; height:26px; border-radius:8px; background:var(--grad); box-shadow:0 4px 14px -2px rgba(124,140,255,.6); }
.brand span { color:var(--accent-2); }
.nav-links { display:flex; gap:4px; margin-left:auto; align-items:center; }
.nav-links a { color:var(--text-soft); padding:8px 13px; border-radius:10px; font-size:.9rem; font-weight:500; white-space:nowrap; transition:background .18s,color .18s; }
.nav-links a:hover, .nav-links a.active { color:var(--text); background:var(--bg-card-hover); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-soft); cursor:pointer; transition:.18s; }
.icon-btn:hover { color:var(--text); border-color:var(--border-strong); }
.nav-toggle { display:none; }
[data-theme="dark"] .i-sun { display:none; }
[data-theme="light"] .i-moon { display:none; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px; font-weight:600; font-size:.94rem; font-family:var(--font); border:1px solid var(--border-strong); color:var(--text); background:var(--bg-card); cursor:pointer; white-space:nowrap; transition:transform .15s,background .18s,border-color .18s; }
.nav-actions { flex:none; }
.btn:hover { transform:translateY(-2px); color:var(--text); background:var(--bg-card-hover); }
.btn-sm { padding:8px 15px; font-size:.86rem; border-radius:10px; }
.btn-primary { background:var(--grad); color:#0b0d12; border:none; box-shadow:0 10px 30px -8px rgba(124,140,255,.55); }
.btn-primary:hover { color:#0b0d12; filter:brightness(1.05); }

/* hero */
.hero { padding:92px 0 40px; position:relative; }
/* hero: title/text left, theme image alongside on the right */
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.hero-media img { width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); }
@media (max-width:820px){
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-media img { max-width:480px; margin:0 auto; }
}
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--border); border-radius:999px; background:var(--bg-card); font-size:.82rem; font-weight:500; color:var(--text-soft); }
.eyebrow .pulse { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 0 rgba(87,230,201,.6); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(87,230,201,.55);} 70%{box-shadow:0 0 0 9px rgba(87,230,201,0);} 100%{box-shadow:0 0 0 0 rgba(87,230,201,0);} }
.hero h1 { font-size:clamp(2.3rem,5.4vw,3.9rem); margin:24px 0 8px; max-width:20ch; }
.hero .acronym { font-family:var(--font-display); font-weight:600; color:var(--text-soft); font-size:1.05rem; margin:0 0 18px; line-height:1.5; }
.hero .lede { font-size:clamp(1.05rem,2vw,1.24rem); color:var(--text-soft); max-width:60ch; margin:0 0 28px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 24px; margin:0 0 30px; color:var(--text-soft); font-size:.96rem; list-style:none; padding:0; }
.hero-meta li { display:flex; align-items:center; gap:9px; }
.hero-meta svg { width:18px; height:18px; color:var(--accent); flex:none; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; border:1px solid var(--border); background:var(--bg-card); font-size:.86rem; color:var(--text-soft); }
.pill .d { width:6px; height:6px; border-radius:50%; background:var(--grad); }

/* sections */
.section { padding:70px 0; }
.section-head { margin-bottom:40px; max-width:62ch; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head .kicker { text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:600; color:var(--accent-2); }
.section-head h2 { font-size:clamp(1.8rem,4vw,2.6rem); margin:12px 0 14px; }
.section-head p { color:var(--text-soft); font-size:1.05rem; margin:0; }
.prose p { color:var(--text-soft); margin:0 0 16px; }
.prose strong { color:var(--text); }

/* cards / grid */
.grid { display:grid; gap:20px; }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:transform .2s,border-color .2s,background .2s; }
.card:hover { transform:translateY(-4px); border-color:var(--border-strong); background:var(--bg-card-hover); }
.card h3 { font-size:1.15rem; margin:0 0 8px; }
.card p { color:var(--text-soft); margin:0; font-size:.95rem; }
.card .ico { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--bg-soft); border:1px solid var(--border); margin-bottom:14px; font-family:var(--font-display); font-weight:700; color:var(--accent-2); }

/* duo */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px; }
.duo .ico { color:var(--accent); }

/* dates */
.dates { display:grid; }
.date-row { display:grid; grid-template-columns:210px 1fr auto; gap:20px; align-items:center; padding:18px 4px; border-bottom:1px solid var(--border); }
.date-row:first-child { border-top:1px solid var(--border); }
.date-row .d { font-family:var(--font-display); font-weight:600; color:var(--text); }
.date-row .e { color:var(--text-soft); }
.date-row .tag { font-size:.74rem; font-weight:600; letter-spacing:.04em; padding:4px 11px; border-radius:999px; border:1px solid var(--border); color:var(--text-faint); }
.tag.event { color:#0b0d12; background:var(--grad); border:none; }
.date-row.highlight { background:var(--bg-card); border-radius:var(--radius-sm); padding-left:12px; padding-right:12px; }

/* schedule */
.schedule { display:grid; gap:12px; }
.slot { display:grid; grid-template-columns:120px 1fr; gap:22px; padding:18px 22px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); transition:.2s; }
.slot:hover { border-color:var(--border-strong); background:var(--bg-card-hover); }
.slot .time { font-family:var(--font-display); font-weight:600; color:var(--accent); white-space:nowrap; }
.slot .title { font-weight:600; margin:0 0 3px; }
.slot .who { color:var(--text-soft); font-size:.9rem; margin:0; }

/* speakers / organizers */
.person { text-align:center; }
.ava { width:112px; height:112px; border-radius:50%; object-fit:cover; margin:0 auto 16px; background:var(--grad); box-shadow:var(--shadow); position:relative; }
.person h3 { margin:0 0 4px; font-size:1.1rem; }
.person .aff { color:var(--text-soft); font-size:.9rem; margin:0; }
.person .talk { color:var(--text); font-style:italic; font-size:.88rem; margin:8px 0 0; }
.person .role { display:inline-block; margin-top:10px; font-size:.76rem; color:var(--accent-2); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.person .email { font-size:.85rem; margin:8px 0 0; }
.person .bio { color:var(--text-soft); font-size:.85rem; line-height:1.5; margin:8px 0 0; }
.person h3 a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:.15s; }
.person h3 a:hover { color:var(--accent-2); border-bottom-color:currentColor; }

/* callout / CTA */
.callout { border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--bg-card); border-radius:var(--radius-sm); padding:20px 22px; color:var(--text); }
.cta-card { text-align:center; padding:52px 28px; background:var(--bg-card-hover); border:1px solid var(--border); border-radius:var(--radius); }

/* footer */
.footer { border-top:1px solid var(--border); margin-top:30px; padding:50px 0 40px; color:var(--text-faint); }
.footer-grid { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer h4 { font-family:var(--font-display); color:var(--text); margin:0 0 14px; font-size:.95rem; }
.footer a { color:var(--text-soft); display:block; padding:4px 0; font-size:.92rem; }
.footer .copy { margin-top:34px; font-size:.85rem; }
.switch a { color:var(--accent-2); display:inline; }

/* reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* responsive */
@media (max-width:860px){
  .cols-2,.cols-3 { grid-template-columns:1fr 1fr; }
  .duo { grid-template-columns:1fr; }
  .date-row { grid-template-columns:1fr; gap:6px; } .date-row .tag { justify-self:start; }
  .slot { grid-template-columns:1fr; gap:6px; }
}
/* nav collapses to a menu earlier, before the row gets cramped */
@media (max-width:1200px){
  .nav-links { position:fixed; inset:66px 0 auto 0; flex-direction:column; gap:0; background:var(--bg-soft); border-bottom:1px solid var(--border); padding:12px; display:none; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 14px; }
  .nav-toggle { display:grid; }
}
@media (max-width:560px){ .cols-2,.cols-3 { grid-template-columns:1fr; } }