/* ============================================================================
   DataClub AI Hub — custom reveal.js theme
   Palette: cyan #29bdef · magenta #d82cf6 · orange #ff8e4e · navy #190058
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --dc-cyan: #29bdef;
  --dc-magenta: #d82cf6;
  --dc-orange: #ff8e4e;
  --dc-navy: #190058;
  --dc-bg-0: #070218;
  --dc-bg-1: #0e0530;
  --dc-bg-2: #170a44;
  --dc-fg: #e9e6fb;
  --dc-fg-muted: #a99fd6;
  --dc-fg-dim: #6f64a6;
  --dc-border: #2c1d63;
  --dc-grad: linear-gradient(100deg, #29bdef 0%, #6f6bf5 38%, #d82cf6 70%, #ff8e4e 100%);
  --r-main-font: "Inter", system-ui, sans-serif;
  --r-heading-font: "Inter", system-ui, sans-serif;
}

.reveal-viewport {
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(216, 44, 246, 0.16), transparent 60%),
    radial-gradient(1100px 800px at 8% 110%, rgba(41, 189, 239, 0.16), transparent 55%),
    linear-gradient(160deg, var(--dc-bg-0) 0%, var(--dc-bg-1) 55%, var(--dc-bg-2) 100%);
}

.reveal {
  font-family: var(--r-main-font);
  font-size: 32px;
  font-weight: 400;
  color: var(--dc-fg);
  letter-spacing: -0.01em;
}

.reveal .slides {
  text-align: left;
}
.reveal .slides section {
  height: 100%;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--r-heading-font);
  font-weight: 800;
  color: #ffffff;
  text-transform: none;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.4em;
  text-shadow: none;
}
.reveal h1 { font-size: 2.5em; }
.reveal h2 { font-size: 1.55em; }
.reveal h3 { font-size: 1.05em; }
.reveal p { line-height: 1.4; margin: 0 0 0.6em; }

.reveal a { color: var(--dc-cyan); text-decoration: none; }
.reveal strong { color: #fff; font-weight: 700; }
.reveal em { color: var(--dc-cyan); font-style: normal; font-weight: 600; }

/* Gradient text accent */
.grad {
  background: var(--dc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cyan { color: var(--dc-cyan); }
.magenta { color: var(--dc-magenta); }
.orange { color: var(--dc-orange); }
.muted { color: var(--dc-fg-muted); }
.dim { color: var(--dc-fg-dim); }

/* Eyebrow / kicker label above a heading */
.kicker {
  display: inline-block;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dc-cyan);
  margin-bottom: 0.6em;
  padding: 0.25em 0.8em;
  border: 1px solid var(--dc-border);
  border-radius: 999px;
  background: rgba(41, 189, 239, 0.06);
}

/* Lists */
.reveal ul,
.reveal ol { margin-left: 1em; }
.reveal li { margin: 0.32em 0; line-height: 1.35; }
.reveal ul li::marker { color: var(--dc-cyan); }
.reveal .check { list-style: none; margin-left: 0; }
.reveal .check li { position: relative; padding-left: 1.6em; }
.reveal .check li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--dc-cyan);
  font-weight: 800;
}

/* Slide padding */
.reveal .slides section.pad {
  padding: 10px 24px;
}

/* Cards / panels */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--dc-border);
  border-radius: 16px;
  padding: 0.85em 1em;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.card h3 { color: var(--dc-cyan); font-size: 0.92em; margin-bottom: 0.3em; }
.card p { font-size: 0.74em; color: var(--dc-fg-muted); margin: 0; line-height: 1.35; }

.grid {
  display: grid;
  gap: 0.7em;
}
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.two-col {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.4em;
  align-items: center;
}
.two-col.wide-right { grid-template-columns: 0.9fr 1.15fr; }

/* Stat chips */
.stats { display: flex; gap: 1.6em; flex-wrap: wrap; }
.stat .n {
  font-size: 1.7em;
  font-weight: 900;
  line-height: 1;
  background: var(--dc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .l { font-size: 0.6em; color: var(--dc-fg-muted); margin-top: 0.3em; }

/* Browser frame around screenshots */
.frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  background: #0c0524;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(41, 189, 239, 0.08);
}
.frame .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  background: #140a36;
  border-bottom: 1px solid var(--dc-border);
}
.frame .bar i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
}
.frame .bar i:nth-child(1) { background: #ff5f57; }
.frame .bar i:nth-child(2) { background: #febc2e; }
.frame .bar i:nth-child(3) { background: #28c840; }
.frame .bar .url {
  margin-left: 12px;
  font: 12px "JetBrains Mono", monospace;
  color: var(--dc-fg-dim);
  background: #0c0524;
  border: 1px solid var(--dc-border);
  border-radius: 6px;
  padding: 3px 12px;
  flex: 1;
}
.frame img { display: block; width: 100%; margin: 0; }

/* Code */
.reveal code {
  font-family: "JetBrains Mono", monospace;
  background: rgba(41, 189, 239, 0.1);
  color: #aee9ff;
  padding: 0.08em 0.4em;
  border-radius: 5px;
  font-size: 0.85em;
}
.reveal pre {
  width: 100%;
  box-shadow: 0 20px 50px -30px #000;
  font-size: 0.5em;
  border-radius: 12px;
  border: 1px solid var(--dc-border);
}
.reveal pre code {
  background: #0a0326;
  padding: 1em 1.2em;
  border-radius: 12px;
  max-height: 520px;
}

/* Pills row */
.pills { display: flex; flex-wrap: wrap; gap: 0.5em; }
.pill {
  font-size: 0.62em;
  font-weight: 600;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--dc-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dc-fg-muted);
}
.pill.on { color: #04121a; background: var(--dc-cyan); border-color: var(--dc-cyan); }

/* Architecture stack */
.arch { display: flex; flex-direction: column; gap: 0.5em; }
.layer {
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  padding: 0.6em 0.9em;
  background: rgba(255, 255, 255, 0.025);
  position: relative;
}
.layer .tag {
  font-size: 0.55em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-fg-dim);
  font-weight: 700;
}
.layer .body { font-size: 0.78em; color: var(--dc-fg); margin-top: 0.15em; }
.layer.accent { border-color: var(--dc-cyan); background: rgba(41, 189, 239, 0.08); }
.layer.you { border-color: var(--dc-magenta); background: rgba(216, 44, 246, 0.08); }
.arrow { text-align: center; color: var(--dc-fg-dim); font-size: 0.7em; line-height: 0.4; }

/* Title slide */
.title-wrap { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.title-wrap .logo { height: 64px; margin-bottom: 0.7em; }
.title-wrap .logo img { height: 100%; }
.title-wrap h1 { font-size: 2.9em; margin-bottom: 0.15em; }
.title-wrap .sub { font-size: 0.95em; color: var(--dc-fg-muted); max-width: 20em; line-height: 1.4; }

/* Footer chrome on every slide */
.reveal .slide-footer {
  position: absolute;
  bottom: 14px;
  left: 28px;
  font-size: 13px;
  color: var(--dc-fg-dim);
  letter-spacing: 0.04em;
  z-index: 5;
}
.reveal .slide-footer b { color: var(--dc-fg-muted); font-weight: 700; }
.reveal .slide-footer .ndnf-logo {
  height: 15px;
  width: auto;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* Compact screenshot thumbnails (the admin-tour grid) */
.frame.thumb img {
  height: 196px;
  object-fit: cover;
  object-position: top center;
}

/* Demo buttons (live integration slide) */
.btn-row { display: flex; gap: 0.8em; flex-wrap: wrap; margin-top: 0.4em; }
.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: 600 0.62em/1 "Inter", sans-serif;
  color: #04121a;
  background: var(--dc-cyan);
  border: 0;
  border-radius: 12px;
  padding: 0.85em 1.3em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 14px 34px -18px rgba(41, 189, 239, 0.9);
}
.dc-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(41, 189, 239, 0.95); }
.dc-btn.ghost {
  color: var(--dc-fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dc-border);
  box-shadow: none;
}
.dc-btn.ghost:hover { border-color: var(--dc-cyan); color: #fff; }
.dc-btn .ico { font-size: 1.2em; line-height: 0; }

/* Off-canvas side panel (70% width) overlay */
#dc-sidepanel {
  position: fixed;
  inset: 0 0 0 30%;
  z-index: 9000;
  background: #0c0524;
  border-left: 1px solid var(--dc-cyan);
  box-shadow: -30px 0 80px -20px rgba(0, 0, 0, 0.85);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
#dc-sidepanel.open { transform: translateX(0); }
#dc-scrim {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(4, 2, 14, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#dc-scrim.open { opacity: 1; pointer-events: auto; }

/* Full-page takeover overlay */
#dc-takeover {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #0c0524;
  display: none;
  flex-direction: column;
}
#dc-takeover.open { display: flex; }

.dc-overlay-bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 10px 16px;
  background: #140a36;
  border-bottom: 1px solid var(--dc-border);
  flex: 0 0 auto;
}
.dc-overlay-bar .ttl {
  font: 700 14px "Inter", sans-serif;
  color: var(--dc-fg);
  letter-spacing: 0.02em;
}
.dc-overlay-bar .ttl .cyan { font-weight: 700; }
.dc-overlay-bar .grow { flex: 1; }
.dc-overlay-bar button {
  font: 600 13px "Inter", sans-serif;
  color: #04121a;
  background: var(--dc-cyan);
  border: 0;
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
}
#dc-sidepanel iframe,
#dc-takeover iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #0c0524;
}
.dc-overlay-hint {
  font: 12px "JetBrains Mono", monospace;
  color: var(--dc-fg-dim);
}

/* progress + controls colors */
.reveal .progress { color: var(--dc-cyan); height: 4px; }
.reveal .controls { color: var(--dc-cyan); }
.reveal .slide-number { background: transparent; color: var(--dc-fg-dim); font-size: 13px; }

/* Big quote / statement slide */
.statement {
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  max-width: 18em;
}
.statement .grad { font-weight: 900; }

/* small caption under a frame */
.cap { font-size: 0.6em; color: var(--dc-fg-dim); margin-top: 0.6em; }

/* fragment helper */
.reveal .fragment.grow-in { transition: all 0.3s ease; }

/* table */
.reveal table { font-size: 0.62em; border-collapse: collapse; width: 100%; }
.reveal table th {
  text-align: left; color: var(--dc-cyan); border-bottom: 1px solid var(--dc-border);
  padding: 0.4em 0.6em; font-weight: 700;
}
.reveal table td {
  padding: 0.38em 0.6em; border-bottom: 1px solid rgba(44, 29, 99, 0.5);
  color: var(--dc-fg-muted);
}
.reveal table tr td:first-child { color: #fff; font-weight: 600; }