/* UI kit — Awwwards-inspired light theme */

/* ════════════════════════════════════════════════════════════
   LIGHT MODE — flip all d30.css dark variables to white/black
   ════════════════════════════════════════════════════════════ */
:root {
  --bg:      #ffffff;
  --bg2:     #f5f5f3;
  --bg3:     #ebebea;
  --bg4:     #e0e0de;
  --border:  rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);
  --text:    #111111;
  --muted:   #666666;
  --muted2:  #aaaaaa;
  --purple:  #111111;
  --purple2: #111111;
  --purple3: #333333;
  --danger:  #ef4444;
  --success: #22c55e;
}

body {
  background: #fff !important;
  color: #111 !important;
}

.kit-shell { position: relative; }

/* Disable the `cursor: none` body rule from d30.css inside this kit.
   We still render the custom cursor visually; this keeps the OS arrow
   visible underneath so users don't get stranded if the JS fails. */
body { cursor: default !important; }
body[data-cursor-mode="ghost"] { cursor: none !important; }
body[data-cursor-mode="ghost"] *,
body[data-cursor-mode="ghost"] *::before,
body[data-cursor-mode="ghost"] *::after { cursor: none !important; }

#root { min-height: 100vh; }

/* hero-badge / hero-desc not rendered in this kit — silence their d30.css animations */
.hero-badge, .hero-desc { opacity: 1; transform: none; animation: none; }
/* .letter — not used in this kit (manifest text is plain) */
.letter { opacity: 1; transform: none; animation: none; }
/* .reveal — driven by IntersectionObserver in motion.js */

/* ── HERO MANIFEST ENTRANCE — spring overshoot (antigravity) ── */
.hero-manifest-lead {
  opacity: 0;
  transform: translateY(36px);
  animation: fadeUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards .15s;
}
.hero-manifest-sub {
  opacity: 0;
  transform: translateY(32px);
  animation: fadeUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards .45s;
}
.hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards .78s;
}
.hero-stats {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.0s;
}

/* ── SCROLL-DRIVEN ENTRANCE — spring overshoot ── */
@keyframes fadeUpItem {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Feature cards — staggered */
.about-features .feature-item,
.features-grid .feature-item {
  opacity: 0;
  animation: fadeUpItem .7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-play-state: paused;
}
.about-features .feature-item.visible,
.features-grid .feature-item.visible { animation-play-state: running; }
.about-features .feature-item:nth-child(2),
.features-grid .feature-item:nth-child(2) { animation-delay: 90ms; }
.about-features .feature-item:nth-child(3),
.features-grid .feature-item:nth-child(3) { animation-delay: 180ms; }
.about-features .feature-item:nth-child(4),
.features-grid .feature-item:nth-child(4) { animation-delay: 270ms; }

/* Roadmap phases — staggered */
.rm-phase {
  opacity: 0;
  animation: fadeUpItem .75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-play-state: paused;
}
.rm-phase.visible { animation-play-state: running; }
.rm-phase:nth-child(2) { animation-delay: 120ms; }
.rm-phase:nth-child(3) { animation-delay: 240ms; }
.rm-phase:nth-child(4) { animation-delay: 360ms; }

/* Palestra / talk cards */
.talk-card {
  opacity: 0;
  animation: fadeUpItem .7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-play-state: paused;
}
.talk-card.visible { animation-play-state: running; }
.talk-card:nth-child(2) { animation-delay: 80ms; }
.talk-card:nth-child(3) { animation-delay: 160ms; }
.talk-card:nth-child(4) { animation-delay: 240ms; }

/* Profile + story cards */
.profile-card {
  opacity: 0;
  animation: fadeUpItem .75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-play-state: paused;
}
.profile-card.visible { animation-play-state: running; }

/* .reveal generic — spring float up */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .6s ease, transform .7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   FULLPAGE SCROLL — snap no html, seções 100vh
   ════════════════════════════════════════════════════════════ */
.fp-section {
  scroll-snap-align: start;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Hero seção: alinha conteúdo ao centro */
.fp-section .home-hero {
  height: 100%;
  display: flex !important;
  align-items: center !important;
  min-height: unset !important;
  border-bottom: none !important;
}

/* About: deixa fp-section centralizar verticalmente */
.fp-section .about-features {
  width: 100%;
}

/* ── Founder section (fp-founder) ── */
.founder-section {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5rem;
  gap: 5rem;
}

.founder-col {
  display: flex;
  flex-direction: column;
}

.founder-col--id { gap: 0.4rem; }

.founder-col--bio {
  gap: 0;
  justify-content: center;
}

.founder-col--photo {
  align-items: center;
}

.founder-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.founder-eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--border2);
}

.founder-name {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
  margin: 0;
}

.founder-role {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted2);
  letter-spacing: 0.2px;
  margin: 0;
}

.founder-bio {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 1.2rem;
}

.founder-social-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.founder-social-row .social-link {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 7px;
  gap: 6px;
}
.founder-social-row .social-link .social-handle { display: none; }
.founder-social-row .social-link svg { width: 13px; height: 13px; }

.founder-photo {
  width: min(220px, 22vw);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 860px) {
  .founder-section {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    padding: 2rem 2rem;
    gap: 2rem;
  }
  .founder-col--photo {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  .founder-photo { width: min(180px, 45vw); }
}

.fp-section .about-hero {
  padding: 2rem 2rem !important;
}

/* ── Dots de navegação lateral ── */
.fp-dots {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  border: none;
  padding: 0;
  cursor: none;
  transition: background .3s, transform .3s, height .3s;
}
.fp-dot.active {
  background: #111;
  height: 24px;
  border-radius: 4px;
}
[data-theme="dark"] .fp-dot         { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .fp-dot.active  { background: #fff; }

/* ── PAGE FADE TRANSITION ── */
.page-shell {
  transition: opacity .18s ease;
  will-change: opacity;
}

/* ════════════════════════════════════════════════════════════
   PRELOADER — full-screen intro: mountain + climber + 0→100%
   ════════════════════════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #050505;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 2rem;
  gap: 0;
  transition: opacity .6s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
}
.preloader.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.preloader-top {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 60px);
  letter-spacing: -2px;
  line-height: 1;
  color: var(--purple);
  opacity: 0;
  transform: translateY(8px);
  margin-bottom: 1.5rem;
  animation: dreamShow 0.9s cubic-bezier(.2,.7,.2,1) forwards 2.4s;
  text-shadow: 0 0 32px rgba(124, 146, 248, 0.5);
}
.preloader-top span { display: inline-block; }

.preloader-svg {
  width: min(700px, 80vw);
  height: auto;
  max-height: 38vh;
}

.preloader .stars circle {
  fill: rgba(255,255,255, 0.5);
  opacity: 0;
  animation: starsIn 1.5s ease forwards 0.6s;
}
.preloader .m-fill {
  fill: rgba(255,255,255, 0.025);
}
.preloader .m-line {
  fill: none;
  stroke: rgba(255,255,255, 0.18);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawLine 1.6s cubic-bezier(.4,0,.2,1) forwards 0.1s;
}
.preloader .m-trail {
  fill: none;
  stroke: var(--purple);
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
  opacity: 0;
  animation: trailIn 1s ease forwards 0.4s;
}
.preloader .climber-group {
  opacity: 0;
  animation: climberIn 0.4s ease forwards 0.4s;
}
.preloader .climber {
  fill: var(--purple);
  filter: drop-shadow(0 0 6px rgba(124,146,248, 0.9));
}
.preloader .climber-halo {
  fill: var(--purple);
  opacity: 0.18;
}
.preloader .peak-marker {
  fill: var(--purple);
  opacity: 0;
  animation: peakPulse 1.2s ease forwards 2.6s;
}

/* Progress meter */
.preloader-meter {
  margin-top: 2rem;
  width: min(360px, 70vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.preloader-bar {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.preloader-bar-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(124, 146, 248, 0.7);
  transition: width .08s linear;
}
.preloader-pct {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.preloader-pct-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

/* Foot label — "zero" */
.preloader-bottom {
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255, 0.35);
  opacity: 0;
  animation: zeroShow 0.8s ease forwards 0.2s;
}

.preloader-skip {
  position: absolute;
  bottom: 18px; right: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255, 0.25);
  opacity: 0;
  animation: zeroShow 0.8s ease forwards 2.2s;
}

@keyframes drawLine  { to { stroke-dashoffset: 0; } }
@keyframes trailIn   { to { opacity: 1; } }
@keyframes climberIn { to { opacity: 1; } }
@keyframes dreamShow { to { opacity: 1; transform: translateY(0); } }
@keyframes zeroShow  { to { opacity: 1; } }
@keyframes starsIn   { to { opacity: 1; } }
@keyframes peakPulse {
  0%   { opacity: 0; }
  40%  { opacity: 1; r: 9; }
  100% { opacity: 0.5; r: 4; }
}

/* ════════════════════════════════════════════════════════════
   NAV — black on both fixed and floating states
   ════════════════════════════════════════════════════════════ */
nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw;
  background: #111 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.nav-logo       { color: #fff !important; }
.nav-logo span  { color: #fff !important; }
.nav-link       { color: rgba(255,255,255,0.55) !important; }
.nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.07) !important; }
.nav-cta        { background: #fff !important; color: #111 !important; }
.nav-cta:hover  { background: #e0e0e0 !important; }
.nav-cta.ghost  { background: transparent !important; color: rgba(255,255,255,0.6) !important; border: 1px solid rgba(255,255,255,0.2) !important; }
.nav-cta.ghost:hover { color: #fff !important; border-color: rgba(255,255,255,0.5) !important; background: rgba(255,255,255,0.06) !important; }

/* Teto fixo atrás do pill — D30 pattern em diagonal */
.nav-ceiling {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  z-index: 99;
  pointer-events: none;
  overflow: hidden;
  animation: ceilingIn .5s cubic-bezier(.4,0,.2,1) forwards;
}
.nav-ceiling::after {
  content: 'D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30  D30';
  position: absolute;
  top: -60px;
  left: -120px;
  right: -120px;
  bottom: -60px;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: rgba(0,0,0,0.22);
  letter-spacing: 4px;
  word-spacing: 28px;
  line-height: 2.5;
  transform: rotate(-12deg);
  pointer-events: none;
}
@keyframes ceilingIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Cursor: black on light */
.cursor-dot  { background: #111 !important; }
.cursor-ring { border-color: rgba(0,0,0,0.25) !important; }
.cursor-ring.hovering { background: rgba(0,0,0,0.06) !important; border-color: #111 !important; }
.nav-slot { display: flex; align-items: center; }
.nav-slot--left   { justify-content: flex-start; }
.nav-slot--center { justify-content: center; }
.nav-slot--right  { justify-content: flex-end; }

/* When floating: ditch the 1fr columns so the pill hugs its content
   instead of stretching to leave huge gaps between logo / links / CTAs. */
nav.nav--floating {
  grid-template-columns: auto auto auto !important;
  column-gap: 20px;
}

/* Anchor offset so jumps don't hide behind the fixed nav */
#sobre, #valores, #augusto { scroll-margin-top: 80px; }

/* Hide center anchors on very small viewports — keep logo + CTAs */
@media (max-width: 720px) {
  .nav-slot--center .nav-links { display: none; }
}

/* ════════════════════════════════════════════════════════════
   HERO — Awwwards-style editorial: full-width, massive type
   ════════════════════════════════════════════════════════════ */
.home-hero {
  min-height: 92vh !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.hero-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 10rem 2.5rem 4rem;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
  display: block;
  animation: fadeUp .7s cubic-bezier(0.34,1.56,0.64,1) forwards .05s;
  opacity: 0;
}

.hero-manifest-lead {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(46px, 6vw, 88px) !important;
  line-height: 1.05 !important;
  letter-spacing: -3.5px !important;
  color: #111 !important;
  margin: 0 0 2.5rem !important;
  max-width: none !important;
}
.hero-manifest-lead em {
  font-style: italic;
  color: var(--muted2);
}

.hero-manifest-sub {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.2px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  max-width: 480px;
}
.hero-manifest-sub strong { color: #111; font-weight: 600; }

.hero-actions {
  margin: 0 !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-shrink: 0;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  width: 100% !important;
  text-align: center !important;
}

/* Awwwards-style buttons: filled black + ghost */
.btn-primary, button.btn-primary {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
  padding: 13px 26px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  cursor: none;
  transition: background .2s, transform .2s !important;
}
.btn-primary:hover { background: #333 !important; transform: translateY(-1px) !important; }

.btn-ghost, button.btn-ghost {
  background: transparent !important;
  color: #555 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: none;
  transition: color .2s, border-color .2s, background .2s !important;
}
.btn-ghost:hover { color: #111 !important; border-color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.03) !important; }

.hero-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 3.5rem;
}

.hero-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-left: 2px solid rgba(0,0,0,0.1);
  padding-left: 1.5rem;
}
[data-theme="dark"] .hero-stats { border-left-color: rgba(255,255,255,0.12) !important; }

.stat { display: flex; align-items: center; }
.stat-num {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  color: #111 !important;
  line-height: 1 !important;
}
.stat-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  line-height: 1.3 !important;
}

.hero-desc { display: none !important; }
.hero-bg, .hero-grid { display: none !important; }

@media (max-width: 768px) {
  .hero-manifest-lead { font-size: clamp(40px, 10vw, 64px) !important; letter-spacing: -2.5px !important; }
  .hero-inner { padding: 7rem 1.5rem 4rem; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT + FEATURES — stacked physical folders: scroll to reveal
   ════════════════════════════════════════════════════════════ */
.about-features {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 2rem 3rem !important;
}

.folders-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2.5rem;
  width: 100%;
  max-width: 1100px;
  height: min(580px, calc(100vh - 56px - 3rem));
}

/* ── Folders nav (left column) ── */
.folders-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  width: 190px;
}

.folders-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: 'Inter', sans-serif;
  cursor: none;
  transition: background .18s, color .18s;
  width: 100%;
}
.folders-nav-item:hover { background: rgba(0,0,0,0.05); }
.folders-nav-item.active { background: rgba(0,0,0,0.07); }

.folders-nav-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted2);
  min-width: 22px;
  flex-shrink: 0;
  transition: color .18s;
}
.folders-nav-item.active .folders-nav-num { color: #111; }

.folders-nav-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color .18s, font-weight .18s;
  white-space: nowrap;
}
.folders-nav-item.active .folders-nav-title {
  color: var(--text);
  font-weight: 700;
}

/* dark mode nav */
[data-theme="dark"] .folders-nav-item:hover  { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .folders-nav-item.active { background: rgba(255,255,255,0.07); }
[data-theme="dark"] .folders-nav-item.active .folders-nav-num { color: #f0f0f0; }

.folders-stack {
  position: relative;
  flex: 1;
  min-height: 0;
}

.folder-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.28s ease,
    box-shadow 0.28s ease;
  transform-origin: center bottom;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  will-change: transform, opacity;
}

.folder-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}

.folder-card-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted2);
  font-family: 'Inter', sans-serif;
  min-width: 24px;
}

.folder-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  flex: 1;
}

.folder-card-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted2);
  letter-spacing: 0.5px;
  margin-left: auto;
  flex-shrink: 0;
}

.folder-card-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 22px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.folder-card-body::-webkit-scrollbar { width: 4px; }
.folder-card-body::-webkit-scrollbar-track { background: transparent; }
.folder-card-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 999px; }

.feature-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: panelIn .22s ease;
}
.founder-story-inline { animation: panelIn .22s ease; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .folder-card {
  background: #111;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .folder-card-header {
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .folder-card-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

.story-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  animation: panelIn .22s ease;
}

.story-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--border2);
  flex-shrink: 0;
}

.story-intro {
  font-size: clamp(14px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.story-intro strong { color: var(--text); font-weight: 700; }

.story-section-mid { display: flex; flex-direction: column; gap: 10px; }

.story-decision {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.story-tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 3px 10px;
}

.story-quote {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--text);
  border-left: 3px solid var(--text);
  padding-left: 1rem;
  margin: 0;
}

.story-close {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin: 0;
}
.story-close span { color: var(--text); font-weight: 700; }

[data-theme="dark"] .story-tags span {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #888;
}

.founder-muted { color: var(--muted) !important; }
.founder-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 1px 7px;
  margin: 0 2px 3px 0;
  vertical-align: middle;
}

[data-theme="dark"] .founder-story-inline .founder-story-p { color: #d0d0d0 !important; }
[data-theme="dark"] .founder-story-inline .founder-story-p--em { color: #f0f0f0 !important; border-left-color: #f0f0f0 !important; }
[data-theme="dark"] .founder-story-p--decision { color: #f0f0f0 !important; }
[data-theme="dark"] .founder-tag { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.15) !important; color: #ccc !important; }

@media (max-width: 860px) {
  .folders-layout {
    flex-direction: column;
    height: auto;
    gap: 1rem;
  }
  .folders-nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 4px;
  }
  .folders-nav-item { padding: 6px 10px; }
  .folders-nav-num  { display: none; }
  .folders-nav-title { font-size: 12px; }
  .folders-stack { flex: none; width: 100%; height: min(400px, 55vh); }
}

.features-strip { padding: 3rem 2rem 4rem !important; }
.strip-label { margin-bottom: 2rem !important; }

.forum-wrap { max-width: 1320px !important; padding: 2rem 2rem 4rem !important; }

.forum-page-header { margin-bottom: 2rem; }
.forum-lede { font-size: 14px; color: #888; margin-top: 0.5rem; }

.forum-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.forum-card .forum-toolbar {
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  padding: 0 1rem;
}

.forum-split { min-height: 72vh !important; }
.topics-pane { max-height: 76vh !important; border-right-color: rgba(0,0,0,0.07) !important; }
.thread-pane { max-height: 76vh !important; }

[data-theme="dark"] .forum-card {
  background: #111 !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .forum-card .forum-toolbar { border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .topics-pane { border-right-color: rgba(255,255,255,0.07) !important; }
.fcat.active { border-bottom-color: #111 !important; }
.topic-item.active { border-left-color: #111 !important; }

/* Topic vote buttons */
.topic-meta-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.topic-vote-btns { display: flex; align-items: center; gap: 2px; }
.topic-like-btn,
.topic-dislike-btn {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: #ccc;
  background: none; border: none; cursor: none;
  padding: 2px 5px; border-radius: 4px;
  transition: color .15s;
}
.topic-like-btn:hover    { color: #22c55e; }
.topic-like-btn.liked    { color: #22c55e; }
.topic-dislike-btn:hover { color: #ef4444; }
.topic-dislike-btn.active{ color: #ef4444; }
.topic-hot-badge { font-size: 12px; line-height: 1; }

/* Thread header actions */
.thread-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thread-delete-btn {
  font-size: 11px; font-weight: 500; color: #bbb;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 5px;
  background: none; padding: 3px 10px; cursor: none;
  font-family: 'Inter', sans-serif; transition: color .15s, border-color .15s;
}
.thread-delete-btn:hover { color: #ef4444; border-color: #ef4444; }
.thread-delete-btn.confirming { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.06); }

/* Message actions (votes + block) */
.msg-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.msg-vote-up,
.msg-vote-down {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #bbb;
  background: none; border: none; cursor: none;
  padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.msg-vote-up:hover    { color: #22c55e; background: rgba(34,197,94,0.08); }
.msg-vote-up.active   { color: #22c55e; background: rgba(34,197,94,0.1); }
.msg-vote-down:hover  { color: #ef4444; background: rgba(239,68,68,0.08); }
.msg-vote-down.active { color: #ef4444; background: rgba(239,68,68,0.1); }

[data-theme="dark"] .msg-vote-up,
[data-theme="dark"] .msg-vote-down { color: #555 !important; }
[data-theme="dark"] .msg-vote-up.active   { color: #22c55e !important; background: rgba(34,197,94,0.12) !important; }
[data-theme="dark"] .msg-vote-down.active { color: #ef4444 !important; background: rgba(239,68,68,0.12) !important; }
.msg-block-btn {
  font-size: 11px; font-weight: 500; color: #bbb;
  background: none; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
  padding: 1px 8px; cursor: none; font-family: 'Inter', sans-serif;
  transition: color .15s, border-color .15s;
}
.msg-block-btn:hover { color: #ef4444; border-color: rgba(239,68,68,0.4); }
.msg-block-btn.blocked { color: #888; border-color: rgba(0,0,0,0.08); }
.msg-block-btn.blocked:hover { color: #111; border-color: rgba(0,0,0,0.2); }

/* Blocked message state */
.msg.msg--blocked { opacity: 0.45; }
.msg-blocked-text { font-size: 12px; color: #999; font-style: italic; }
.msg-blocked-badge {
  font-size: 10px; font-weight: 600; color: #ef4444;
  background: rgba(239,68,68,0.08); border-radius: 3px; padding: 1px 5px;
}

/* Dark mode adjustments */
[data-theme="dark"] .thread-delete-btn { border-color: rgba(255,255,255,0.1) !important; color: #666 !important; }
[data-theme="dark"] .thread-delete-btn:hover { color: #ef4444 !important; border-color: #ef4444 !important; }
[data-theme="dark"] .msg-block-btn { border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .msg-block-btn:hover { color: #ef4444 !important; border-color: rgba(239,68,68,0.4) !important; }
[data-theme="dark"] .msg-block-btn.blocked:hover { color: #f0f0f0 !important; border-color: rgba(255,255,255,0.25) !important; }
[data-theme="dark"] .topic-like-btn,
[data-theme="dark"] .topic-dislike-btn { color: #444 !important; }
[data-theme="dark"] .topic-like-btn:hover,
[data-theme="dark"] .topic-like-btn.liked { color: #22c55e !important; }
[data-theme="dark"] .topic-dislike-btn:hover,
[data-theme="dark"] .topic-dislike-btn.active { color: #ef4444 !important; }

.about-hero { padding: 3.5rem 2rem 2.5rem !important; }
.roadmap-wrap { padding: 5.5rem 2rem 4rem !important; max-width: 820px !important; }
.roadmap-wrap .page-title { font-size: clamp(24px, 4vw, 36px) !important; letter-spacing: -1px !important; }
.roadmap-wrap .page-title em { font-style: italic; color: var(--muted2) !important; }
.rm3-lead       { color: #fff !important; }
.rm3-lead--sub  { color: rgba(255,255,255,0.7) !important; }

/* Roadmap v3 — light theme: colored folder cards + ruler */
.rm3-overall-bar   { background: rgba(255,255,255,0.25) !important; overflow: visible !important; }
.rm3-overall-fill  { background: #fff !important; }
.rm3-overall-label { color: #fff !important; }
.rm3-overall-pct   { color: #fff !important; }
.rm3-overall-count { color: rgba(255,255,255,0.6) !important; }

/* Phase cards — light gray / dark gray only */
.rm3-card         { background: #ebebeb !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; }
.rm3-card.locked  { background: #f2f2f2 !important; opacity: 0.5 !important; box-shadow: none !important; }
.rm3-card.all-done { background: #3a3a3a !important; opacity: 1 !important; }

/* Header — padrão (fundo cinza claro) */
.rm3-card-header { border-bottom-color: rgba(0,0,0,0.1) !important; }
.rm3-card-num    { color: rgba(0,0,0,0.45) !important; }
.rm3-card-sep    { color: rgba(0,0,0,0.28) !important; }
.rm3-card-label  { color: #111 !important; }
.rm3-card-count  { color: rgba(0,0,0,0.45) !important; }
.rm3-lock-icon   { color: rgba(0,0,0,0.55) !important; }
.rm3-lock-msg    { color: rgba(0,0,0,0.55) !important; }
.rm3-locked-item { color: rgba(0,0,0,0.45) !important; }

/* Header — card 100% concluído (fundo cinza escuro → texto branco) */
.rm3-card.all-done .rm3-card-num   { color: rgba(255,255,255,0.4) !important; }
.rm3-card.all-done .rm3-card-sep   { color: rgba(255,255,255,0.2) !important; }
.rm3-card.all-done .rm3-card-label { color: rgba(255,255,255,0.9) !important; }
.rm3-card.all-done .rm3-card-count { color: rgba(255,255,255,0.45) !important; }
.rm3-card.all-done .rm3-card-header { border-bottom-color: rgba(255,255,255,0.1) !important; }

/* Courses — sem background individual, separados por borda */
.rm3-course + .rm3-course { border-top-color: rgba(0,0,0,0.1) !important; padding-top: 14px !important; }
.rm3-course-title { color: #888 !important; font-weight: 600 !important; }
.rm3-course-sub   { color: #bbb !important; }
.rm3-course.done .rm3-course-title { color: #333 !important; }
.rm3-course.done .rm3-course-sub   { color: #777 !important; }

/* Curso bloqueado dentro da fase */
.rm3-course.course-locked { opacity: 0.45; pointer-events: none; }
.rm3-course.course-locked .rm3-course-title { color: #aaa !important; }
.rm3-course-lock-msg { font-size: 11px; color: #f59e0b; margin-top: 2px; display: block; }
.rm3-watch--locked { color: #ccc !important; border-color: rgba(0,0,0,0.1) !important; cursor: default; pointer-events: none; font-size: 12px; }

/* Courses dentro do card concluído (fundo escuro) */
.rm3-card.all-done .rm3-course + .rm3-course { border-top-color: rgba(255,255,255,0.1) !important; }
.rm3-card.all-done .rm3-course-title { color: rgba(255,255,255,0.55) !important; }
.rm3-card.all-done .rm3-course-sub   { color: rgba(255,255,255,0.3) !important; }
.rm3-card.all-done .rm3-course.done .rm3-course-title { color: rgba(255,255,255,0.9) !important; }
.rm3-card.all-done .rm3-course.done .rm3-course-sub   { color: rgba(255,255,255,0.55) !important; }

/* Botões padrão */
.rm3-watch { color: rgba(0,0,0,0.72) !important; border-color: rgba(0,0,0,0.25) !important; }
.rm3-watch:hover { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.4) !important; }
.rm3-check { color: rgba(0,0,0,0.45) !important; border-color: rgba(0,0,0,0.18) !important; }
.rm3-check:hover { border-color: rgba(0,0,0,0.38) !important; color: rgba(0,0,0,0.75) !important; }
.rm3-check.done  { color: rgba(0,0,0,0.78) !important; border-color: rgba(0,0,0,0.35) !important; font-weight: 700 !important; }

/* Botões dentro do card concluído (fundo escuro) */
.rm3-card.all-done .rm3-watch { color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.3) !important; }
.rm3-card.all-done .rm3-watch:hover { background: rgba(255,255,255,0.08) !important; }
.rm3-card.all-done .rm3-check { color: rgba(255,255,255,0.4) !important; border-color: rgba(255,255,255,0.2) !important; }
.rm3-card.all-done .rm3-check.done { color: rgba(255,255,255,0.9) !important; border-color: rgba(255,255,255,0.45) !important; font-weight: 700 !important; }

/* Ruler — light theme */
.rm3-ruler-top, .rm3-ruler-bot { color: rgba(0,0,0,0.25) !important; }
.rm3-ruler-track { background: rgba(0,0,0,0.08) !important; }
.rm3-ruler-tick  { background: rgba(0,0,0,0.12) !important; }

/* Ruler fill — cinza neutro */
.rm3-ruler .rm3-ruler-fill { background: #999 !important; }

.rm3-congrats { color: #333 !important; }

/* ════════════════════════════════════════════════════════════
   FEATURES STRIP — un-glue the 4 cards: real gap + individual
   rounded cards instead of a unified panel with 1px hairlines.
   ════════════════════════════════════════════════════════════ */
.features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}
.feature-item {
  background: #f5f5f3 !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 10px !important;
  padding: 26px 22px !important;
  transition: border-color .3s, transform .3s, box-shadow .3s !important;
}
.feature-item:hover {
  background: #ebebea !important;
  border-color: rgba(0,0,0,0.18) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
}

/* ════════════════════════════════════════════════════════════
   HERO DICE — sit the cube where the D30 wordmark used to live.
   ════════════════════════════════════════════════════════════ */
.home-hero .dice-float { margin: 2rem 0 2rem; }

/* ════════════════════════════════════════════════════════════
   VALUES DICE — 3D rotating cube section
   ════════════════════════════════════════════════════════════ */
.dice-section {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.dice-section-text { max-width: 440px; }
.dice-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--text);
  margin: 12px 0 14px;
}
.dice-section-title span { color: var(--purple); }
.dice-section-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   DICE FLOATING ON LAKE — half above, half submerged
   ════════════════════════════════════════════════════════════ */

/* Gentle bob — wrapper outside the stage so events aren't affected */
.dice-float {
  animation: diceFloat 5s ease-in-out infinite;
}
@keyframes diceFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* Interaction container — perspective lives here for top-down 3D view */
.dice-stage {
  perspective: 1400px;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  position: relative;
}

/* Each half clips its 3D scene via overflow:hidden */
.dice-half {
  position: absolute;
  left:  0;
  width: 380px;
  height: 190px;   /* exactly half */
  overflow: hidden;
}
.dice-half--above { top: 0; }
.dice-half--below {
  top: 190px;
  /* underwater: dark, desaturated, slightly blurred */
  filter: blur(1.8px) brightness(0.32) saturate(0.5) hue-rotate(12deg);
}

/* Perspective wrapper — same size as stage, shared origin at waterline */
.dice-persp {
  position: absolute;
  top:  0;
  left: 0;
  width:  380px;
  height: 380px;
  perspective:        1400px;
  perspective-origin: 50% 190px;  /* waterline = centre of stage */
  display:         flex;
  align-items:     center;
  justify-content: center;
}
/* Sub version shifts up so the bottom half is visible through the wrapper */
.dice-persp--sub { top: -190px; }

/* Glowing water-surface line */
.dice-waterline {
  position: absolute;
  top:   190px;
  left:  -70px;
  right: -70px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent                0%,
    rgba(160, 140, 255, 0.55) 15%,
    rgba(220, 210, 255, 1.00) 50%,
    rgba(160, 140, 255, 0.55) 85%,
    transparent               100%
  );
  filter: blur(0.5px);
  animation: wlShimmer 4s ease-in-out infinite;
}
/* Glow beneath the line */
.dice-waterline::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 28px;
  background: linear-gradient(to bottom, rgba(139,92,246,0.2), transparent);
  filter: blur(6px);
}
@keyframes wlShimmer {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1.00; }
}

@media (max-width: 880px) {
  .dice-stage  { width: 320px; height: 320px; }
  .dice-half   { width: 320px; height: 160px; }
  .dice-half--below { top: 160px; }
  .dice-persp  { width: 320px; height: 320px; perspective-origin: 50% 160px; }
  .dice-persp--sub { top: -160px; }
  .dice-waterline  { top: 160px; }
}

/* JS spring + throw physics drives all rotation — zero CSS interference */
.dice {
  position: relative;
  width: 280px;
  height: 280px;
  transform-style: preserve-3d;
  transition: none !important;
  animation: none !important;
}

/* Each face — 280×280, parked 140px off origin */
.dice-face {
  position: absolute;
  inset: 0;
  background: var(--bg2);
  border: 1px solid #000;
  border-radius: 18px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 24px 64px rgba(0,0,0,0.45);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.dice-face::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(124, 146, 248, 0.10), transparent 60%);
}
.dice-face--front  { transform: translateZ(140px); }
.dice-face--back   { transform: rotateY(180deg) translateZ(140px); }
.dice-face--right  { transform: rotateY(90deg)  translateZ(140px); }
.dice-face--left   { transform: rotateY(-90deg) translateZ(140px); }
.dice-face--top    { transform: rotateX(90deg)  translateZ(140px); }
.dice-face--bottom { transform: rotateX(-90deg) translateZ(140px); }

.dice-face-num {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
}
.dice-face-num .dice-face-total { color: var(--muted2); }
.dice-face-title {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.dice-face-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Top + bottom faces — brand moments */
.dice-face--top {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
}
.dice-brand {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 84px;
  letter-spacing: -4px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.dice-brand span { color: var(--purple); }
.dice-brand-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
  position: relative; z-index: 1;
}

.dice-face--bottom {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dice-tagline-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.dice-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1.2;
  position: relative; z-index: 1;
}
.dice-tagline-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted2);
  position: relative; z-index: 1;
}

@media (max-width: 880px) {
  .dice-section { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
  .dice-section-text { text-align: center; }
  .dice-stage { width: 320px; height: 320px; }
  .dice { width: 240px; height: 240px; }
  .dice-face--front, .dice-face--back, .dice-face--right, .dice-face--left { /* keep transform offsets relative to size */ }
  .dice-face--front  { transform: translateZ(120px); }
  .dice-face--back   { transform: rotateY(180deg) translateZ(120px); }
  .dice-face--right  { transform: rotateY(90deg)  translateZ(120px); }
  .dice-face--left   { transform: rotateY(-90deg) translateZ(120px); }
  .dice-face--top    { transform: rotateX(90deg)  translateZ(120px); }
  .dice-face--bottom { transform: rotateX(-90deg) translateZ(120px); }
  .dice-brand { font-size: 64px; }
}

/* ════════════════════════════════════════════════════════════
   SIDE RAIL — vertical floating pill for logged-in users.
   Right edge, vertically centered. Mirrors the white "cloud"
   look of the floating top nav.
   ════════════════════════════════════════════════════════════ */
.side-rail {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(20px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .35s cubic-bezier(.2,.7,.2,1),
    transform .45s cubic-bezier(.2,.7,.2,1);
}
.side-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.side-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.side-rail-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  width: 64px;
  padding: 10px 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #555;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: none;
  transition: background .2s, color .2s, transform .15s;
}
.side-rail-item:hover { background: rgba(0, 0, 0, 0.04); color: #0f0f0f; }
.side-rail-item:hover .side-rail-icon { transform: scale(1.08); }
.side-rail-item.active { background: rgba(139, 124, 248, 0.12); color: var(--purple2); }
.side-rail-icon { display: inline-flex; transition: transform .2s; }
.side-rail-label { white-space: nowrap; }

@media (max-width: 720px) {
  .side-rail { right: 8px; }
  .side-rail-item { width: 52px; padding: 8px 2px; font-size: 9px; }
  .side-rail-icon svg { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════════════════════
   PALESTRAS PAGE
   ════════════════════════════════════════════════════════════ */
.palestras-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 2rem 4rem;
}

.palestras-header {
  margin-bottom: 2.5rem;
}

.palestras-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2.5rem;
  padding-top: 0.5rem;
}

.btn-anunciar {
  padding: 10px 20px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: none;
  cursor: none;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.btn-anunciar:hover { background: #333; transform: translateY(-1px); }

.btn-indicar {
  padding: 10px 20px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--border2);
  cursor: none;
  white-space: nowrap;
  transition: background .2s, border-color .2s, transform .15s;
}
.btn-indicar:hover { background: var(--bg3); border-color: rgba(0,0,0,0.25); transform: translateY(-1px); }

/* Indicações — painel owner */
.indicacoes-wrap {
  margin-bottom: 2.5rem;
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
}
.indicacoes-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg2);
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  cursor: none;
  text-align: left;
  transition: background .15s;
}
.indicacoes-toggle:hover { background: var(--bg3); }
.indicacoes-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
[data-theme="dark"] .indicacoes-badge { background: #fff; color: #111; }
.indicacoes-toggle svg { margin-left: auto; color: var(--muted2); }

.indicacoes-list { display: flex; flex-direction: column; }
.indicacao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  transition: background .15s;
}
.indicacao-item:hover { background: var(--bg2); }
.indicacao-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.indicacao-name { font-size: 14px; font-weight: 700; color: var(--text); }
.indicacao-why  { font-size: 13px; color: var(--muted); line-height: 1.4; }
.indicacao-by   { font-size: 11px; color: var(--muted2); }
.indicacao-actions { display: flex; gap: 6px; flex-shrink: 0; }
.indicacao-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--border2);
  background: transparent;
  cursor: none;
  transition: background .15s, color .15s, border-color .15s;
  color: var(--muted);
}
.indicacao-btn--accept:hover { background: #111; color: #fff; border-color: #111; }
.indicacao-btn--reject:hover { background: rgba(239,68,68,0.08); color: #ef4444; border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .indicacao-btn--accept:hover { background: #fff !important; color: #111 !important; border-color: #fff !important; }

.palestras-lede {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 620px;
  margin-top: 1.25rem;
}
.palestras-section { margin-top: 3rem; }
.palestras-section .strip-label {
  text-align: left;
  margin-bottom: 1.25rem !important;
  letter-spacing: 2px;
  color: var(--muted2);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.palestras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.talk-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: border-color .3s, transform .3s, background .3s;
  position: relative; overflow: hidden;
}
.talk-card:hover {
  border-color: rgba(139, 124, 248, 0.4);
  transform: translateY(-3px);
  background: var(--bg3);
}
.talk-card.is-featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  border-color: rgba(139, 124, 248, 0.3);
  padding: 28px 32px;
}
.talk-card.is-featured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 90% 0%, rgba(139,124,248,0.08), transparent 60%);
}

.talk-when {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--purple);
  padding: 4px 10px;
  background: rgba(139, 124, 248, 0.1);
  border-radius: 999px;
  align-self: flex-start;
}
.talk-guest { display: flex; flex-direction: column; gap: 2px; }
.talk-guest-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.talk-guest-role { font-size: 12px; color: var(--muted); }
.talk-title {
  font-size: 19px; font-weight: 700; color: var(--text);
  letter-spacing: -0.4px; line-height: 1.3; margin: 0;
}
.talk-card.is-featured .talk-title { font-size: 24px; letter-spacing: -0.8px; }
.talk-blurb { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.talk-card.is-featured .talk-blurb { font-size: 14px; }

.talk-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 8px;
  gap: 8px;
}
.talk-foot-left {
  display: flex; align-items: center; gap: 10px;
}
.talk-rsvp { font-size: 12px; color: var(--muted2); }

.avatar-stack {
  display: flex;
  align-items: center;
}
.avatar-stack-item {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  margin-left: -7px;
  flex-shrink: 0;
  transition: transform .2s;
}
.avatar-stack-item:first-child { margin-left: 0; }
.avatar-stack:hover .avatar-stack-item { transform: translateX(-2px); }
.avatar-stack:hover .avatar-stack-item:first-child { transform: none; }
.avatar-stack-extra {
  background: var(--bg4);
  color: var(--muted);
  font-size: 9px;
}
.talk-rsvp-btn {
  padding: 7px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: none;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.talk-rsvp-btn:hover {
  background: var(--purple2);
  border-color: var(--purple2);
  color: #fff;
  transform: translateY(-1px);
}

.palestras-past {
  display: flex; flex-direction: column;
  gap: 1px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
}
.past-talk {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px; align-items: center;
  padding: 14px 20px;
  background: #ebebeb;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: background .2s;
}
.past-talk:last-child { border-bottom: none; }
.past-talk:hover { background: #e0e0e0; }
.past-talk-when {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: #999;
}
.past-talk-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; }
.past-talk-meta { font-size: 12px; color: #777; }
.past-talk-replay {
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--purple);
  font-size: 12px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: none;
  transition: background .2s, border-color .2s;
}
.past-talk-replay:hover {
  background: rgba(139, 124, 248, 0.08);
  border-color: rgba(139, 124, 248, 0.3);
}
@media (max-width: 640px) {
  .past-talk { grid-template-columns: 1fr; gap: 4px; }
  .past-talk-replay { justify-self: start; }
}

/* ════════════════════════════════════════════════════════════
   DATE-TIME PICKER — dropdown style
   ════════════════════════════════════════════════════════════ */
.dtpick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

/* Trigger button */
.dtdrop { position: relative; }

.dtdrop-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px 7px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--bg);
  cursor: none;
  transition: border-color .15s, background .15s;
  text-align: left;
  font-family: 'Inter', sans-serif;
  position: relative;
}
.dtdrop-btn:hover { border-color: rgba(0,0,0,0.25); background: var(--bg2); }
.dtdrop-btn.open  { border-color: #111; }
[data-theme="dark"] .dtdrop-btn.open { border-color: #fff !important; }

.dtdrop-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted2);
  line-height: 1;
}
.dtdrop-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1;
}
.dtdrop-chevron {
  position: absolute;
  right: 8px;
  bottom: 10px;
  color: var(--muted2);
  transition: transform .2s;
}
.dtdrop-btn.open .dtdrop-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.dtdrop-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 500;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 100%;
}
[data-theme="dark"] .dtdrop-panel { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

.dtdrop-grid { display: grid; gap: 3px; }
.dtdrop-grid--7 { grid-template-columns: repeat(7, 1fr); min-width: 224px; }
.dtdrop-grid--4 { grid-template-columns: repeat(4, 1fr); min-width: 160px; }
.dtdrop-grid--3 { grid-template-columns: repeat(3, 1fr); min-width: 126px; }

.dtdrop-opt {
  padding: 6px 4px;
  border-radius: 5px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  cursor: none;
  text-align: center;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.dtdrop-opt:hover { background: var(--bg3); color: var(--text); }
.dtdrop-opt.active {
  background: #111;
  color: #fff;
  font-weight: 700;
}
[data-theme="dark"] .dtdrop-opt.active { background: #fff !important; color: #111 !important; }

/* Ghost "Entrar" button with inline lock icon */
.nav-cta.ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-cta.ghost svg { opacity: 1; transition: color .2s, transform .2s; }
.nav-cta.ghost:hover svg { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════
   About — values horizontal scroll: shorter cards + faster scroll.
   d30.css ships 400vh section + 60vh / 480px tall cards. We trim:
   - cards: 320px tall (was up to 480px), narrower
   - section: ~180vh (was 400vh) → ~2× scroll speed across the track
   ════════════════════════════════════════════════════════════ */
.story-section {
  height: 180vh;
}
.story-card {
  height: auto;
  min-height: 280px;
  max-height: 320px;
  width: min(460px, 82vw);
  padding: 28px 32px;
}
.story-title {
  font-size: clamp(26px, 3.4vw, 38px) !important;
  margin-bottom: 14px;
}
.story-desc {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
}
.story-track { gap: 1.25rem; padding: 0 8vw; }

@media (max-width: 768px) {
  .story-section { height: auto; }
  .story-card { max-height: none; min-height: 200px; }
}

/* ════════════════════════════════════════════════════════════
   Profile card — social links row (LinkedIn / GitHub / Instagram)
   ════════════════════════════════════════════════════════════ */
.profile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: color .2s, background .2s, border-color .2s, transform .15s;
  cursor: none;
}
.social-link:hover {
  color: var(--text);
  background: var(--bg-4);
  border-color: rgba(139, 124, 248, 0.4);
  transform: translateY(-1px);
}
.social-link .social-label { color: inherit; }
.social-link .social-handle {
  color: var(--muted-2);
  font-size: 11px;
  margin-left: 2px;
}
.social-link:hover .social-handle { color: var(--purple); }
.social-link svg { flex-shrink: 0; }

@media (max-width: 480px) {
  .social-link .social-handle { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Nav — smooth morph from full bar → floating pill
   ════════════════════════════════════════════════════════════ */
nav {
  /* numeric values so every prop can tween */
  top: 0px;
  max-width: 100vw;
  border-radius: 0px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  border: 1px solid rgba(255,255,255,0.08);
  transition:
    top            .55s cubic-bezier(.4,0,.2,1),
    max-width      .55s cubic-bezier(.4,0,.2,1),
    width          .55s cubic-bezier(.4,0,.2,1),
    height         .45s cubic-bezier(.4,0,.2,1),
    padding        .45s cubic-bezier(.4,0,.2,1),
    border-radius  .55s cubic-bezier(.4,0,.2,1),
    box-shadow     .45s cubic-bezier(.4,0,.2,1),
    border-color   .4s  ease,
    background-color .4s ease !important;
}

nav.nav--floating {
  top: 14px;
  max-width: 680px;
  height: 48px;
  padding: 0 10px 0 16px;
  background: rgba(17,17,17,0.97) !important;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  gap: 8px;
}

/* Text + control recolouring while floating — stays black/white */
nav.nav--floating .nav-logo { color: #fff !important; }
nav.nav--floating .nav-logo span { color: #fff !important; }

nav.nav--floating .nav-link {
  color: rgba(255,255,255,0.55) !important;
  background: transparent;
  transition: color .2s, background .2s;
}
nav.nav--floating .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.07) !important;
}
nav.nav--floating .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,0.09) !important;
}

nav.nav--floating .nav-cta,
nav.nav--floating .nav-cta:hover,
nav.nav--floating .nav-cta:focus,
nav.nav--floating .nav-cta:active {
  background-color: #fff !important;
  color: #111 !important;
  border: none !important;
  border-radius: 10px;
  padding: 7px 16px;
  white-space: nowrap;
}
nav.nav--floating .nav-cta:hover { background-color: #e8e8e8 !important; }
nav.nav--floating .nav-cta::after { display: none; }

/* Ghost button stays transparent on black */
nav.nav--floating .nav-cta.ghost,
nav.nav--floating .nav-cta.ghost:hover,
nav.nav--floating .nav-cta.ghost:focus {
  background-color: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 10px;
}
nav.nav--floating .nav-cta.ghost:hover {
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* User chip on white */
nav.nav--floating .user-chip {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
nav.nav--floating .user-chip:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.3);
}
nav.nav--floating .user-chip-name { color: #fff; }

/* The user-menu dropdown still drops over dark content — keep it dark for contrast */
nav.nav--floating .user-menu {
  background: var(--bg2);
  border-color: var(--border);
}
nav.nav--floating .user-menu-item       { color: var(--text); }
nav.nav--floating .user-menu-item.danger{ color: var(--danger); }
nav.nav--floating .user-menu-info       { color: var(--muted2); }
nav.nav--floating .user-menu-info strong{ color: var(--text); }

/* Collapse the nav links into a tighter group on small screens */
@media (max-width: 640px) {
  nav.nav--floating { padding: 0 6px 0 14px; gap: 8px; }
  nav.nav--floating .nav-links { display: none; }
}

/* ════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ════════════════════════════════════════════════════════════ */
.nav-theme-toggle {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  flex-shrink: 0;
}
.nav-theme-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}

/* ════════════════════════════════════════════════════════════
   PALETTE LOCK — neutralise every hardcoded purple rgba so all
   pages match the homepage black/white design language.
   (d30.css ships raw rgba(139,124,248,…) that bypass CSS vars)
   ════════════════════════════════════════════════════════════ */

/* Palestras — talk-when badge */
.talk-when { background: rgba(0,0,0,0.06) !important; color: #111 !important; }

/* Palestras — card borders */
.talk-card:hover { border-color: rgba(0,0,0,0.15) !important; }
.talk-card.is-featured { border-color: rgba(0,0,0,0.1) !important; }
.talk-card.is-featured::before { background: rgba(0,0,0,0.015) !important; }

/* Palestras — past talk replay */
.past-talk-replay:hover {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: #111 !important;
}

/* About — story cards in-focus */
.story-card.in-focus { border-color: rgba(0,0,0,0.18) !important; transform: scale(1.01) !important; }
.story-card.in-focus::before { opacity: 0 !important; }

/* Profile card */
.profile-card:hover { border-color: rgba(0,0,0,0.15) !important; }
.profile-card:hover .profile-avatar {
  box-shadow: 0 0 0 2px #111, 0 8px 28px rgba(0,0,0,0.18) !important;
}

/* Forms — focus state */
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: rgba(0,0,0,0.4) !important; background: #fafafa !important; }

/* Thread reply focus */
.thread-reply input:focus { border-bottom-color: #111 !important; }

/* Side rail — active item */
.side-rail-item.active { background: rgba(0,0,0,0.07) !important; color: #111 !important; }

/* Page title — consistent with homepage editorial weight */
.page-title {
  font-size: clamp(36px, 5.5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -2.5px !important;
  color: #111 !important;
  line-height: 1.08 !important;
}
.page-title span { color: #111 !important; }
.page-title em { font-style: italic; color: #aaa !important; }

/* Page label — same as hero-eyebrow */
.page-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  color: #999 !important;
  text-transform: uppercase !important;
  margin-bottom: 1.25rem !important;
}

/* Section lede consistent with hero-manifest-sub */
.palestras-lede { font-size: 14px !important; color: #888 !important; line-height: 1.6 !important; max-width: 540px !important; margin-top: 0.75rem !important; letter-spacing: 0 !important; }
.rm3-lead       { color: #666 !important; font-size: clamp(14px, 1.3vw, 17px) !important; line-height: 1.65 !important; }
.rm3-lead--sub  { color: #999 !important; font-size: 13px !important; }

/* Roadmap page-title: slightly smaller is fine for that page */
.roadmap-wrap .page-title {
  font-size: clamp(28px, 4.5vw, 52px) !important;
  letter-spacing: -2px !important;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES  [data-theme="dark"]
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:      #080808;
  --bg2:     #111111;
  --bg3:     #181818;
  --bg4:     #1f1f1f;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text:    #f0f0f0;
  --muted:   #888;
  --muted2:  #555;
  --purple:  #e0e0e0;
  --purple2: #e0e0e0;
  --purple3: #aaaaaa;
}

[data-theme="dark"] body        { background: #080808 !important; color: #f0f0f0 !important; }
[data-theme="dark"] .home-hero  { background: #080808 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .hero-eyebrow { color: #666 !important; }
[data-theme="dark"] .hero-manifest-lead { color: #f0f0f0 !important; }
[data-theme="dark"] .hero-manifest-lead em { color: #444 !important; }
[data-theme="dark"] .roadmap-wrap .page-title em { color: #444 !important; }
[data-theme="dark"] .hero-manifest-sub  { color: #888 !important; }
[data-theme="dark"] .hero-manifest-sub strong { color: #f0f0f0 !important; }
[data-theme="dark"] .stat-num   { color: #f0f0f0 !important; }
[data-theme="dark"] .stat-label { color: #666 !important; }

[data-theme="dark"] .feature-item,
[data-theme="dark"] .about-features .feature-item {
  background: #111 !important;
  border-color: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] .feature-item:hover,
[data-theme="dark"] .about-features .feature-item:hover {
  background: #181818 !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .btn-primary, [data-theme="dark"] button.btn-primary {
  background: #fff !important; color: #111 !important;
}
[data-theme="dark"] .btn-primary:hover { background: #e0e0e0 !important; }
[data-theme="dark"] .btn-ghost, [data-theme="dark"] button.btn-ghost {
  color: #888 !important; border-color: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .btn-ghost:hover { color: #f0f0f0 !important; border-color: rgba(255,255,255,0.35) !important; background: rgba(255,255,255,0.05) !important; }

[data-theme="dark"] .nav-ceiling { background: #080808 !important; }
[data-theme="dark"] .nav-ceiling::after { color: rgba(255,255,255,0.13) !important; }

[data-theme="dark"] footer { color: #555 !important; }
[data-theme="dark"] footer span { color: #888 !important; }

/* Nav vira branco no dark mode */
[data-theme="dark"] nav                        { background: #fff !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
[data-theme="dark"] .nav-logo                  { color: #111 !important; }
[data-theme="dark"] .nav-logo span             { color: #111 !important; }
[data-theme="dark"] .nav-link                  { color: #666 !important; }
[data-theme="dark"] .nav-link:hover            { color: #111 !important; background: rgba(0,0,0,0.05) !important; }
[data-theme="dark"] .nav-cta                   { background: #111 !important; color: #fff !important; }
[data-theme="dark"] .nav-cta:hover             { background: #333 !important; }
[data-theme="dark"] .nav-cta.ghost             { color: #555 !important; border-color: rgba(0,0,0,0.2) !important; background: transparent !important; }
[data-theme="dark"] .nav-cta.ghost:hover       { color: #111 !important; border-color: rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .nav-theme-toggle          { color: #666 !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="dark"] .nav-theme-toggle:hover    { color: #111 !important; border-color: rgba(0,0,0,0.35) !important; background: rgba(0,0,0,0.05) !important; }

/* Floating pill vira branco no dark mode */
[data-theme="dark"] nav.nav--floating          { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08) !important; }
[data-theme="dark"] nav.nav--floating .nav-logo      { color: #111 !important; }
[data-theme="dark"] nav.nav--floating .nav-logo span { color: #111 !important; }
[data-theme="dark"] nav.nav--floating .nav-link      { color: #666 !important; }
[data-theme="dark"] nav.nav--floating .nav-link:hover { color: #111 !important; background: rgba(0,0,0,0.05) !important; }
[data-theme="dark"] nav.nav--floating .nav-cta       { background: #111 !important; color: #fff !important; }
[data-theme="dark"] nav.nav--floating .nav-cta:hover { background: #333 !important; }
[data-theme="dark"] nav.nav--floating .nav-cta.ghost { color: #555 !important; border-color: rgba(0,0,0,0.2) !important; background: transparent !important; }
[data-theme="dark"] nav.nav--floating .nav-cta.ghost:hover { color: #111 !important; border-color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.04) !important; }
[data-theme="dark"] nav.nav--floating .nav-theme-toggle { color: #666 !important; border-color: rgba(0,0,0,0.15) !important; }
[data-theme="dark"] nav.nav--floating .nav-theme-toggle:hover { color: #111 !important; border-color: rgba(0,0,0,0.35) !important; background: rgba(0,0,0,0.05) !important; }
[data-theme="dark"] nav.nav--floating .user-chip            { background: rgba(0,0,0,0.07) !important; border-color: rgba(0,0,0,0.14) !important; }
[data-theme="dark"] nav.nav--floating .user-chip:hover      { background: rgba(0,0,0,0.12) !important; border-color: rgba(0,0,0,0.25) !important; }
[data-theme="dark"] nav.nav--floating .user-chip-name       { color: #111 !important; }
[data-theme="dark"] nav.nav--floating .user-chip-avatar     { background: #111 !important; color: #fff !important; }
[data-theme="dark"] nav.nav--floating .user-menu            { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="dark"] nav.nav--floating .user-menu-item       { color: #333 !important; }
[data-theme="dark"] nav.nav--floating .user-menu-item:hover { background: rgba(0,0,0,0.05) !important; }
[data-theme="dark"] nav.nav--floating .user-menu-item.danger{ color: #dc2626 !important; }
[data-theme="dark"] nav.nav--floating .user-menu-info       { color: #888 !important; }
[data-theme="dark"] nav.nav--floating .user-menu-info strong{ color: #111 !important; }
[data-theme="dark"] nav.nav--floating .user-menu-divider    { background: rgba(0,0,0,0.08) !important; }


[data-theme="dark"] .cursor-dot  { background: #f0f0f0 !important; }
[data-theme="dark"] .cursor-ring { border-color: rgba(255,255,255,0.3) !important; }
[data-theme="dark"] .cursor-ring.hovering { background: rgba(255,255,255,0.08) !important; border-color: #f0f0f0 !important; }

/* Roadmap — dark mode: mesma cor do folder card (#111) */
[data-theme="dark"] .rm3-card         { background: #111 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .rm3-card.locked  { background: rgba(255,255,255,0.03) !important; opacity: 0.5 !important; }
[data-theme="dark"] .rm3-card.all-done { background: #1d1d1d !important; }

[data-theme="dark"] .rm3-card-header  { border-bottom-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .rm3-card-num     { color: rgba(255,255,255,0.28) !important; }
[data-theme="dark"] .rm3-card-sep     { color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .rm3-card-label   { color: #f0f0f0 !important; }
[data-theme="dark"] .rm3-card-count   { color: rgba(255,255,255,0.35) !important; }
[data-theme="dark"] .rm3-lock-icon    { color: rgba(255,255,255,0.4) !important; }
[data-theme="dark"] .rm3-lock-msg     { color: rgba(255,255,255,0.4) !important; }
[data-theme="dark"] .rm3-locked-item  { color: rgba(255,255,255,0.25) !important; }

[data-theme="dark"] .rm3-course + .rm3-course          { border-top-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .rm3-course-title                  { color: #666 !important; }
[data-theme="dark"] .rm3-course-sub                    { color: #444 !important; }
[data-theme="dark"] .rm3-course.done .rm3-course-title { color: #d0d0d0 !important; }
[data-theme="dark"] .rm3-course.done .rm3-course-sub   { color: #888 !important; }

[data-theme="dark"] .rm3-watch       { color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.18) !important; }
[data-theme="dark"] .rm3-watch:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.35) !important; }
[data-theme="dark"] .rm3-check       { color: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .rm3-check:hover { color: rgba(255,255,255,0.7) !important; border-color: rgba(255,255,255,0.35) !important; }
[data-theme="dark"] .rm3-check.done  { color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.4) !important; }

[data-theme="dark"] .rm3-card.all-done .rm3-card-label   { color: rgba(255,255,255,0.9) !important; }
[data-theme="dark"] .rm3-card.all-done .rm3-course-title { color: rgba(255,255,255,0.5) !important; }
[data-theme="dark"] .rm3-card.all-done .rm3-course.done .rm3-course-title { color: rgba(255,255,255,0.9) !important; }

[data-theme="dark"] .rm3-ruler-top, [data-theme="dark"] .rm3-ruler-bot { color: rgba(255,255,255,0.22) !important; }
[data-theme="dark"] .rm3-ruler-track { background: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .rm3-ruler-tick  { background: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .rm3-ruler .rm3-ruler-fill { background: rgba(255,255,255,0.35) !important; }
[data-theme="dark"] .rm3-congrats { color: #888 !important; }
[data-theme="dark"] .btn-anunciar { background: #fff !important; color: #111 !important; }
[data-theme="dark"] .btn-anunciar:hover { background: #e0e0e0 !important; }
[data-theme="dark"] .btn-indicar { border-color: rgba(255,255,255,0.15) !important; color: #f0f0f0 !important; }
[data-theme="dark"] .btn-indicar:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.3) !important; }

/* Palestras — avatar stack border no dark mode */
[data-theme="dark"] .avatar-stack-item { border-color: #111 !important; }
[data-theme="dark"] .avatar-stack-extra { background: #1f1f1f !important; color: #888 !important; }

/* Palestras — past talks dark mode */
[data-theme="dark"] .palestras-past        { border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .past-talk             { background: #111 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .past-talk:hover       { background: #181818 !important; }
[data-theme="dark"] .past-talk-when        { color: rgba(255,255,255,0.28) !important; }
[data-theme="dark"] .past-talk-title       { color: #f0f0f0 !important; }
[data-theme="dark"] .past-talk-meta        { color: #555 !important; }
[data-theme="dark"] .past-talk-replay      { color: rgba(255,255,255,0.5) !important; border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .past-talk-replay:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.25) !important; color: #f0f0f0 !important; }

/* PALETTE LOCK — dark mode equivalents */
[data-theme="dark"] .talk-when { background: rgba(255,255,255,0.08) !important; color: #f0f0f0 !important; }
[data-theme="dark"] .talk-card:hover { border-color: rgba(255,255,255,0.14) !important; }
[data-theme="dark"] .talk-card.is-featured { border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .past-talk-replay:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.2) !important; color: #f0f0f0 !important; }
[data-theme="dark"] .story-card.in-focus { border-color: rgba(255,255,255,0.18) !important; }
[data-theme="dark"] .story-card.in-focus::before { opacity: 0 !important; }
[data-theme="dark"] .profile-card:hover { border-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .profile-card:hover .profile-avatar { box-shadow: 0 0 0 2px #f0f0f0, 0 8px 28px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus { border-color: rgba(255,255,255,0.3) !important; background: #0f0f0f !important; }
[data-theme="dark"] .thread-reply input:focus { border-bottom-color: #f0f0f0 !important; }
[data-theme="dark"] .side-rail-item.active { background: rgba(255,255,255,0.1) !important; color: #f0f0f0 !important; }
[data-theme="dark"] .page-title { color: #f0f0f0 !important; }
[data-theme="dark"] .page-title span { color: #f0f0f0 !important; }
[data-theme="dark"] .page-title em { color: #555 !important; }
[data-theme="dark"] .page-label { color: #555 !important; }
[data-theme="dark"] .palestras-lede { color: #888 !important; }
[data-theme="dark"] .rm3-lead { color: #888 !important; }
[data-theme="dark"] .rm3-lead--sub { color: #555 !important; }

/* ────────────────────────────────────────────────────────────────
   NOTIFICATIONS BELL
──────────────────────────────────────────────────────────────── */
.notif-wrap {
  position: relative;
  flex-shrink: 0;
}

.notif-bell {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
  animation: notifDrop .15s ease;
}
@keyframes notifDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border2);
}
.notif-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.notif-panel-actions {
  display: flex;
  gap: 8px;
}
.notif-action-btn {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: none;
  border: none;
  cursor: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.notif-action-btn:hover { color: var(--text); background: var(--bg3); }

.notif-list {
  max-height: 380px;
  overflow-y: auto;
}
.notif-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 13px;
  color: #999;
}

.notif-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: none;
  text-align: left;
  border-bottom: 1px solid var(--border2);
  transition: background .12s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg3); }
.notif-item.read { opacity: 0.6; }

.notif-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.notif-icon--talk,
.notif-icon--reply,
.notif-icon--mention,
.notif-icon--reminder { background: rgba(0,0,0,0.05); }

.notif-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notif-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-text {
  font-size: 12px;
  color: #888;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-time {
  font-size: 10px;
  color: #aaa;
  margin-top: 3px;
  font-weight: 500;
}

.notif-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6366f1;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Dark mode */
[data-theme="dark"] .notif-panel {
  background: #181818 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .notif-panel-head { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .notif-item { border-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .notif-icon--talk,
[data-theme="dark"] .notif-icon--reply,
[data-theme="dark"] .notif-icon--mention,
[data-theme="dark"] .notif-icon--reminder { background: rgba(255,255,255,0.07) !important; }

/* ════════════════════════════════════════════════════════════
   Profile Page
   ════════════════════════════════════════════════════════════ */
.profile-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Hero */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 24px;
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.profile-hero-info { display: flex; flex-direction: column; gap: 4px; }
.profile-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.6px;
  margin: 0;
}
.profile-email {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.profile-owner-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: #111;
  color: #fff;
}
[data-theme="dark"] .profile-owner-badge { background: #fff; color: #111; }

/* Sections */
.profile-section { display: flex; flex-direction: column; gap: 12px; }
.profile-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted2);
}

/* Stats */
.profile-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-stat-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: none;
  transition: border-color .2s, background .2s, transform .15s;
}
.profile-stat-card:hover {
  border-color: var(--border2);
  background: var(--bg3);
  transform: translateY(-2px);
}
.profile-stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -1.5px;
  line-height: 1;
}
.profile-stat-key {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
}
.profile-stat-bar {
  height: 3px;
  background: var(--bg4);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.profile-stat-bar-fill {
  height: 100%;
  background: #111;
  border-radius: 2px;
  transition: width .4s;
}
[data-theme="dark"] .profile-stat-bar-fill { background: #fff; }
.profile-stat-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 4px;
}

/* Account card */
.profile-account-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.profile-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 12px;
}
.profile-account-key {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}
.profile-account-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.profile-account-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Sign out */
.profile-signout-btn {
  padding: 11px 24px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.3);
  background: transparent;
  color: #ef4444;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: none;
  transition: background .2s, border-color .2s;
  align-self: flex-start;
}
.profile-signout-btn:hover {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.5);
}

@media (max-width: 480px) {
  .profile-hero { flex-direction: column; align-items: flex-start; }
  .profile-stat-card { min-width: 100%; }
}
