/* ================================================================
   3KPop.com — Application Styles
   All colors, fonts, and spacing use tokens from design-system.css.
   No raw hex values or font names appear in this file.
   ================================================================ */

body {
  display:        flex;
  flex-direction: column;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }

/* ----------------------------------------------------------------
   SKIP TO CONTENT (accessibility)
   ---------------------------------------------------------------- */
.skip-to-content {
  position:      absolute;
  top:           var(--space-2);
  left:          var(--space-3);
  z-index:       calc(var(--z-toast) + 10);
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background:    var(--color-fandom);
  color:         var(--surface-0);
  font-size:     var(--text-sm);
  font-weight:   700;
  transform:     translateY(-200%);
  transition:    transform var(--duration-fast) var(--ease-out);
}
.skip-to-content:focus { transform: translateY(0); }

/* ----------------------------------------------------------------
   NAVBAR — desktop: 3-column (brand | links | actions)
   ---------------------------------------------------------------- */
.navbar {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         var(--z-nav);
  background:      rgba(10, 0, 16, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:   1px solid var(--border-default);
}

.nav-container {
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 var(--space-5);
  display:     grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap:         var(--space-5);
  height:      62px;
}

/* Logo */
.nav-brand {
  font-size:      1.45rem;
  font-weight:    900;
  letter-spacing: -0.5px;
  flex-shrink:    0;
  line-height:    1;
}
.brand-3k   { color: var(--color-music);  }
.brand-pop  { color: var(--color-dance);  }
.brand-dot  { color: var(--color-fandom); font-size: 0.85em; }

/* Center links */
.nav-links {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  flex-wrap:       nowrap;
  overflow:        hidden;
}

.nav-link {
  position:      relative;
  display:       inline-flex;
  align-items:   center;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size:     var(--text-sm);
  font-weight:   500;
  color:         var(--text-muted);
  white-space:   nowrap;
  transition:    color var(--duration-fast) var(--ease-out),
                 background var(--duration-fast) var(--ease-out);
}
.nav-link::after {
  content:          '';
  position:         absolute;
  bottom:           -1px;
  left:             var(--space-3);
  right:            var(--space-3);
  height:           2px;
  border-radius:    2px;
  background:       currentColor;
  opacity:          0;
  transform:        scaleX(0);
  transform-origin: center;
  transition:       opacity var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out);
}
.nav-link:hover { color: var(--text-primary); background: rgba(131, 56, 236, 0.12); }

/* Active state — pillar color underline */
.nav-link--active                    { color: var(--text-primary); }
.nav-link--active::after             { opacity: 1; transform: scaleX(1); }
.nav-link--active.nl-music           { color: var(--color-music); }
.nav-link--active.nl-music::after    { background: var(--color-music); }
.nav-link--active.nl-dance           { color: var(--color-dance); }
.nav-link--active.nl-dance::after    { background: var(--color-dance); }
.nav-link--active.nl-fandom          { color: var(--color-fandom); }
.nav-link--active.nl-fandom::after   { background: var(--color-fandom); }

/* Ask AI special style */
.nav-link-ai {
  color:      var(--color-fandom);
  background: rgba(6, 214, 160, 0.08);
  border:     1px solid rgba(6, 214, 160, 0.20);
  border-radius: var(--radius-pill);
}
.nav-link-ai:hover { background: rgba(6, 214, 160, 0.18); color: var(--color-fandom); }

/* Right actions */
.nav-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}
.nav-icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  color:           var(--text-muted);
  transition:      color var(--duration-fast) var(--ease-out),
                   background var(--duration-fast) var(--ease-out);
}
.nav-icon-btn:hover { color: var(--text-primary); background: rgba(131, 56, 236, 0.15); }

.nav-profile-wrap { position: relative; }
.nav-xp-badge {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  font-size:   9px;
  font-weight: 900;
  padding:     1px 4px;
  border-radius: var(--radius-pill);
  background:  var(--color-highlight);
  color:       var(--surface-0);
  line-height: 1.4;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Hamburger (mobile only) */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           36px;
  height:          36px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         var(--space-2);
  border-radius:   var(--radius-sm);
  transition:      background var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { background: rgba(131, 56, 236, 0.15); }
.hamburger-line {
  display:      block;
  width:        100%;
  height:       2px;
  background:   var(--text-primary);
  border-radius: 2px;
  transition:   transform var(--duration-base) var(--ease-out),
                opacity   var(--duration-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------
   MOBILE OVERLAY
   ---------------------------------------------------------------- */
.nav-overlay {
  position:   fixed;
  inset:      0;
  z-index:    calc(var(--z-nav) - 1);
  background: rgba(0, 0, 0, 0.65);
  opacity:    0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.nav-overlay.open {
  opacity:        1;
  pointer-events: auto;
}

/* ----------------------------------------------------------------
   SLIDE-IN DRAWER (from the right)
   ---------------------------------------------------------------- */
.nav-drawer {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  z-index:    var(--z-nav);
  width:      min(320px, 88vw);
  background: var(--surface-1);
  border-left: 1px solid var(--border-default);
  display:    flex;
  flex-direction: column;
  transform:  translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.drawer-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.drawer-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  color:           var(--text-muted);
  transition:      color var(--duration-fast), background var(--duration-fast);
}
.drawer-close:hover { color: var(--text-primary); background: rgba(131, 56, 236, 0.15); }

.drawer-links {
  flex:    1;
  padding: var(--space-3) var(--space-3);
}
.drawer-link {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  font-size:     var(--text-body);
  font-weight:   500;
  color:         var(--text-muted);
  margin-bottom: var(--space-1);
  transition:    color var(--duration-fast), background var(--duration-fast);
  border-left:   3px solid transparent;
}
.drawer-link:hover       { color: var(--text-primary); background: rgba(131, 56, 236, 0.12); }
.drawer-link--active     { color: var(--text-primary); background: rgba(131, 56, 236, 0.10); }
.drawer-link--active.dl-music  { color: var(--color-music);  border-left-color: var(--color-music);  background: rgba(255, 0, 110, 0.08); }
.drawer-link--active.dl-dance  { color: var(--color-dance);  border-left-color: var(--color-dance);  background: rgba(131, 56, 236, 0.12); }
.drawer-link--active.dl-fandom { color: var(--color-fandom); border-left-color: var(--color-fandom); background: rgba(6, 214, 160, 0.08); }
.drawer-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }

.drawer-link-ai { color: var(--color-fandom); }

.drawer-footer {
  padding:      var(--space-5);
  border-top:   1px solid var(--border-default);
  flex-shrink:  0;
}
.drawer-tagline {
  text-align:     center;
  font-size:      var(--text-xs);
  color:          var(--text-muted);
  letter-spacing: var(--ls-wide);
  margin-top:     var(--space-3);
}

/* ----------------------------------------------------------------
   BODY TOP PADDING — accounts for fixed navbar height
   ---------------------------------------------------------------- */
body { padding-top: 62px; }

/* ----------------------------------------------------------------
   MAIN CONTENT
   ---------------------------------------------------------------- */
.main-content { flex: 1; width: 100%; }

.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--space-5);
}

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
.hero {
  position:        relative;
  min-height:      90vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
  padding:         var(--space-8) var(--space-5);
}

.hero-bg {
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    rgba(131, 56, 236, 0.25) 0%,
    rgba(255,  0, 110, 0.12) 50%,
    transparent 80%);
  pointer-events: none;
}
.hero-bg::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 40% 40% at 80% 20%,
    rgba(6, 214, 160, 0.12) 0%, transparent 60%);
}
.hero-bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 30% 30% at 20% 70%,
    rgba(255, 0, 110, 0.10) 0%, transparent 60%);
}

.hero-content { position: relative; z-index: 1; max-width: 800px; }

.hero-kicker {
  display:        inline-block;
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-fandom);
  background:     rgba(6, 214, 160, 0.10);
  border:         1px solid rgba(6, 214, 160, 0.30);
  padding:        var(--space-1) var(--space-4);
  border-radius:  var(--radius-pill);
  margin-bottom:  var(--space-5);
}

.hero-title {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom:  var(--space-5);
}
.hero-title .t-pink   { color: var(--color-music);  }
.hero-title .t-purple { color: var(--color-dance);  }
.hero-title .t-cyan   { color: var(--color-fandom); }

.hero-sub {
  font-size:     clamp(1rem, 2.5vw, 1.25rem);
  color:         var(--text-muted);
  margin-bottom: var(--space-6);
  max-width:     560px;
  margin-left:   auto;
  margin-right:  auto;
}

.hero-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size:   0.95rem;
  font-weight: 700;
  cursor:      pointer;
  border:      none;
  transition:  transform var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-pink {
  background:  var(--color-music);
  color:       var(--color-white);
  box-shadow:  var(--glow-music-md);
}
.btn-pink:hover { box-shadow: var(--glow-music-lg); }

.btn-purple {
  background:  var(--color-dance);
  color:       var(--color-white);
  box-shadow:  var(--glow-dance-md);
}
.btn-purple:hover { box-shadow: var(--glow-dance-lg); }

.btn-outline {
  background:  transparent;
  color:       var(--text-primary);
  border:      1px solid var(--border-default);
}
.btn-outline:hover {
  border-color: var(--color-dance);
  background:   rgba(131, 56, 236, 0.10);
}

.btn-cyan {
  background:  var(--color-fandom);
  color:       var(--surface-0);
}
.btn-cyan:hover { box-shadow: var(--glow-fandom-md); }

/* ----------------------------------------------------------------
   SECTION HEADERS
   ---------------------------------------------------------------- */
.section    { padding: var(--space-8) var(--space-5); }
.section-sm { padding: var(--space-6) var(--space-5); }

.section-header { text-align: center; margin-bottom: var(--space-7); }

.section-label {
  display:        inline-block;
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-music);
  margin-bottom:  var(--space-2);
}
.section-title {
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  font-weight:    900;
  letter-spacing: -1px;
  line-height:    var(--lh-snug);
}
.section-sub { color: var(--text-muted); font-size: 1.05rem; margin-top: var(--space-3); }

/* ----------------------------------------------------------------
   CARDS
   ---------------------------------------------------------------- */
.card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  transition:    transform var(--duration-base) var(--ease-out),
                 border-color var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}
.card:hover {
  transform:    translateY(-4px);
  border-color: var(--color-dance);
  box-shadow:   var(--glow-dance-md);
}
.card-img {
  width:         100%;
  aspect-ratio:  1;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  background:    var(--surface-2);
  margin-bottom: var(--space-4);
}
.card-title   { font-size: var(--text-h3); font-weight: 700; margin-bottom: var(--space-1); }
.card-sub     { font-size: var(--text-sm); color: var(--text-muted); }
.card-badge {
  display:        inline-block;
  font-size:      var(--text-xs);
  font-weight:    700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding:        2px var(--space-2);
  border-radius:  var(--radius-pill);
  margin-bottom:  var(--space-3);
}
.badge-pink   { background: rgba(255,  0, 110, 0.15); color: var(--color-music);     }
.badge-purple { background: rgba(131, 56, 236, 0.15); color: var(--color-dance);     }
.badge-cyan   { background: rgba(6,  214, 160, 0.15); color: var(--color-fandom);    }
.badge-yellow { background: rgba(255,209, 102, 0.15); color: var(--color-highlight); }

/* ----------------------------------------------------------------
   GRID LAYOUTS
   ---------------------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--space-5); }

/* ----------------------------------------------------------------
   PAGE HEADER
   ---------------------------------------------------------------- */
.page-header {
  padding:       var(--space-8) var(--space-5) var(--space-6);
  text-align:    center;
  background:    linear-gradient(180deg, rgba(131, 56, 236, 0.12) 0%, transparent 100%);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-7);
}
.page-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, 3.5rem);
  letter-spacing: var(--ls-tight);
  margin-bottom:  var(--space-2);
}
.page-sub { color: var(--text-muted); font-size: 1.05rem; }

/* ----------------------------------------------------------------
   FEATURE GRID
   ---------------------------------------------------------------- */
.feature-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-5);
  max-width:             1200px;
  margin:                0 auto;
}
.feature-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  transition:    border-color var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out),
                 transform var(--duration-base) var(--ease-out);
}
.feature-card:hover {
  border-color: var(--color-music);
  box-shadow:   var(--glow-music-sm);
  transform:    translateY(-3px);
}
.feature-icon  { font-size: 2.5rem; line-height: 1; }
.feature-title { font-size: var(--text-h3); font-weight: 700; }
.feature-desc  { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-normal); }

/* ----------------------------------------------------------------
   CATEGORY BAR
   ---------------------------------------------------------------- */
.cat-bar {
  display:         flex;
  gap:             var(--space-2);
  flex-wrap:       wrap;
  justify-content: center;
  margin-bottom:   var(--space-6);
}
.cat-btn {
  padding:       var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size:     var(--text-sm);
  font-weight:   600;
  border:        1px solid var(--border-default);
  background:    transparent;
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    all var(--duration-fast) var(--ease-out);
}
.cat-btn:hover,
.cat-btn.active {
  background:   var(--color-dance);
  border-color: var(--color-dance);
  color:        var(--color-white);
}

/* ----------------------------------------------------------------
   SEARCH BAR
   ---------------------------------------------------------------- */
.search-bar {
  display:       flex;
  gap:           var(--space-3);
  max-width:     640px;
  margin:        0 auto var(--space-7);
}
.search-input {
  flex:          1;
  padding:       var(--space-3) var(--space-5);
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md);
  color:         var(--text-primary);
  font-size:     var(--text-body);
  font-family:   var(--font-sans);
  outline:       none;
  transition:    border-color var(--duration-fast) var(--ease-out),
                 box-shadow   var(--duration-fast) var(--ease-out);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
  border-color: var(--color-dance);
  box-shadow:   0 0 0 3px rgba(131, 56, 236, 0.20);
}

/* ----------------------------------------------------------------
   DIVIDER & ACCENT LINES
   ---------------------------------------------------------------- */
.divider {
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin:     var(--space-6) 0;
}
.accent-line   { width: 60px; height: 3px; border-radius: 2px; margin: var(--space-3) auto 0; }
.accent-pink   { background: var(--color-music);  }
.accent-purple { background: var(--color-dance);  }
.accent-cyan   { background: var(--color-fandom); }

/* ----------------------------------------------------------------
   TAGS
   ---------------------------------------------------------------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  display:       inline-block;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size:     var(--text-sm);
  font-weight:   600;
  border:        1px solid var(--border-default);
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    all var(--duration-fast) var(--ease-out);
}
.tag:hover { border-color: var(--color-music); color: var(--color-music); }

/* ----------------------------------------------------------------
   PLACEHOLDER
   ---------------------------------------------------------------- */
.img-placeholder {
  background:      linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  color:           var(--text-muted);
  aspect-ratio:    1;
  width:           100%;
}

/* ----------------------------------------------------------------
   STATS ROW
   ---------------------------------------------------------------- */
.stats-row {
  display:         flex;
  gap:             var(--space-6);
  justify-content: center;
  flex-wrap:       wrap;
  padding:         var(--space-6) 0;
}
.stat-item   { text-align: center; }
.stat-number { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: var(--lh-tight); }
.stat-label  { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin-top: var(--space-1); }

/* ----------------------------------------------------------------
   DETAIL PAGE LAYOUT
   ---------------------------------------------------------------- */
.detail-layout {
  display:               grid;
  grid-template-columns: 300px 1fr;
  gap:                   var(--space-8);
  max-width:             1100px;
  margin:                0 auto;
  padding:               var(--space-7) var(--space-5);
  align-items:           start;
}
.detail-sidebar { position: sticky; top: 80px; }
.detail-image {
  width:         100%;
  aspect-ratio:  3/4;
  object-fit:    cover;
  border-radius: var(--radius-lg);
  background:    var(--surface-2);
  border:        1px solid var(--border-default);
}
.detail-img-placeholder {
  width:           100%;
  aspect-ratio:    3/4;
  background:      linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border-radius:   var(--radius-lg);
  border:          1px solid var(--border-default);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       5rem;
}
.detail-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--ls-tight);
  margin-bottom:  var(--space-2);
}
.detail-subtitle { font-size: var(--text-body); font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-5); }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.meta-tag {
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size:     var(--text-sm);
  font-weight:   600;
  background:    var(--surface-2);
  border:        1px solid var(--border-default);
}
.detail-section-title { font-size: var(--text-h3); font-weight: 700; margin: var(--space-6) 0 var(--space-4); color: var(--color-dance); }
.detail-body     { line-height: var(--lh-relaxed); color: var(--text-primary); }
.detail-body p   { margin-bottom: var(--space-4); }
.related-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }

/* ----------------------------------------------------------------
   POLL CARD
   ---------------------------------------------------------------- */
.poll-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
}
.poll-question { font-size: var(--text-h3); font-weight: 700; margin-bottom: var(--space-5); line-height: var(--lh-snug); }
.poll-option   { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.poll-bar {
  flex:          1;
  height:        36px;
  background:    var(--surface-2);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  position:      relative;
  cursor:        pointer;
  border:        1px solid var(--border-default);
}
.poll-fill   { height: 100%; border-radius: var(--radius-sm); transition: width 0.5s ease; }
.poll-label  { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.poll-pct    { font-size: var(--text-sm); font-weight: 700; color: var(--text-muted); min-width: 2.5rem; text-align: right; }

/* ----------------------------------------------------------------
   EVENT CARD
   ---------------------------------------------------------------- */
.event-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-5);
  display:       grid;
  grid-template-columns: 80px 1fr;
  gap:           var(--space-5);
  align-items:   start;
  transition:    border-color var(--duration-base) var(--ease-out),
                 transform var(--duration-base) var(--ease-out);
}
.event-card:hover { border-color: var(--color-fandom); transform: translateX(4px); }
.event-date-box {
  text-align:    center;
  background:    var(--surface-2);
  border-radius: var(--radius-sm);
  padding:       var(--space-3) var(--space-2);
  border:        1px solid var(--border-default);
}
.event-month { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-fandom); font-weight: 700; }
.event-day   { font-family: var(--font-display); font-size: 1.75rem; line-height: var(--lh-tight); }
.event-title { font-size: var(--text-h3); font-weight: 700; margin-bottom: var(--space-1); }
.event-venue { font-size: var(--text-sm); color: var(--text-muted); }

/* ----------------------------------------------------------------
   GAME CARD
   ---------------------------------------------------------------- */
.game-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  text-align:    center;
  transition:    all var(--duration-base) var(--ease-out);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-4);
}
.game-card:hover {
  border-color: var(--color-highlight);
  box-shadow:   var(--glow-yellow-md);
  transform:    translateY(-4px);
}
.game-icon  { font-size: 3.5rem; }
.game-title { font-size: var(--text-h3); font-weight: 700; }
.game-desc  { font-size: var(--text-sm); color: var(--text-muted); }

/* ----------------------------------------------------------------
   LEARN CARDS
   ---------------------------------------------------------------- */
.learn-card       { display: flex; flex-direction: column; gap: var(--space-2); }
.hangeul-example  { font-size: 2rem; font-weight: 700; font-family: var(--font-kr); color: var(--color-music); }
.romanization     { font-size: var(--text-body); color: var(--color-fandom); font-weight: 600; }

/* ----------------------------------------------------------------
   COLLECTION CARD
   ---------------------------------------------------------------- */
.collection-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    transform var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}
.collection-card:hover { transform: translateY(-4px); box-shadow: var(--glow-dance-md); }
.collection-card-img {
  width:           100%;
  aspect-ratio:    1;
  background:      var(--surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
}
.collection-card-body  { padding: var(--space-4); }
.collection-card-title { font-weight: 700; font-size: var(--text-sm); }
.collection-card-sub   { font-size: var(--text-xs); color: var(--text-muted); }

/* ----------------------------------------------------------------
   MAP
   ---------------------------------------------------------------- */
.map-container {
  background:      var(--surface-1);
  border:          1px solid var(--border-default);
  border-radius:   var(--radius-lg);
  height:          500px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             var(--space-4);
  color:           var(--text-muted);
  font-size:       var(--text-h3);
}
.map-icon { font-size: 5rem; }

/* ----------------------------------------------------------------
   AI CHAT
   ---------------------------------------------------------------- */
.ai-chat-box {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  max-width:     760px;
  margin:        0 auto;
}
.ai-messages { min-height: 300px; margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.ai-bubble {
  padding:       var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size:     0.95rem;
  line-height:   var(--lh-normal);
  max-width:     80%;
}
.ai-bubble-bot  { background: rgba(131, 56, 236, 0.15); border: 1px solid rgba(131, 56, 236, 0.30); border-bottom-left-radius: var(--radius-sm);  align-self: flex-start; }
.ai-bubble-user { background: rgba(255, 0, 110, 0.15);  border: 1px solid rgba(255, 0, 110, 0.25);  border-bottom-right-radius: var(--radius-sm); align-self: flex-end; }
.ai-input-row   { display: flex; gap: var(--space-3); }

/* ----------------------------------------------------------------
   ADMIN
   ---------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 62px); }
.admin-sidebar { background: var(--surface-1); border-right: 1px solid var(--border-default); padding: var(--space-6) var(--space-4); }
.admin-sidebar h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin: var(--space-5) 0 var(--space-2); }
.admin-nav-link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-muted); transition: all var(--duration-fast) var(--ease-out); margin-bottom: 2px; }
.admin-nav-link:hover { background: rgba(131, 56, 236, 0.15); color: var(--text-primary); }
.admin-main     { padding: var(--space-6); }
.admin-stat-card { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; }
.admin-stat-num  { font-family: var(--font-display); font-size: 2rem; }
.admin-stat-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* ----------------------------------------------------------------
   ERROR PAGES
   ---------------------------------------------------------------- */
.error-page {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--space-6);
  background:      var(--bg-primary);
  position:        relative;
  overflow:        hidden;
}
.error-bg { position: absolute; inset: 0; pointer-events: none; }
.error-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(255, 0, 110, 0.15) 0%, transparent 70%); }
.error-bg::after  { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 40% at 80% 70%, rgba(131, 56, 236, 0.12) 0%, transparent 60%); }
.error-bg-500::before { background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(131, 56, 236, 0.20) 0%, transparent 70%); }
.error-content { position: relative; z-index: 1; }
.error-code {
  font-family:   var(--font-display);
  font-size:     clamp(6rem, 20vw, 14rem);
  line-height:   var(--lh-tight);
  margin-bottom: var(--space-2);
}
.error-code-404 { color: var(--color-music); text-shadow: var(--glow-music-lg);  }
.error-code-500 { color: var(--color-dance); text-shadow: var(--glow-dance-lg);  }
.error-title    { font-size: var(--text-h1); font-weight: 700; margin-bottom: var(--space-4); }
.error-msg      { color: var(--text-muted); max-width: 420px; margin: 0 auto var(--space-6); font-size: 1.05rem; line-height: var(--lh-relaxed); }
.error-kpop-text { font-size: var(--text-sm); font-family: var(--font-kr); color: var(--color-fandom); margin-bottom: var(--space-6); }
.error-actions  { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.error-deco     { position: absolute; font-size: 8rem; opacity: 0.04; user-select: none; pointer-events: none; }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.site-footer { background: var(--surface-1); border-top: 1px solid var(--border-default); padding: var(--space-7) var(--space-5) 0; margin-top: auto; }
.footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); padding-bottom: var(--space-6); }
.footer-tagline { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.footer-links   { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.footer-col     { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col h4  { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-music); margin-bottom: var(--space-1); }
.footer-col a   { font-size: var(--text-sm); color: var(--text-muted); transition: color var(--duration-fast) var(--ease-out); }
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom  { border-top: 1px solid var(--border-default); padding: var(--space-5) 0; text-align: center; color: var(--text-muted); font-size: var(--text-sm); max-width: 1200px; margin: 0 auto; }

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   HERO — Q-04 enhanced
   ---------------------------------------------------------------- */
.hero-wordmark {
  display:        block;
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  line-height:    var(--lh-tight);
  letter-spacing: var(--ls-tight);
  background:     linear-gradient(135deg, var(--color-music) 0%, var(--color-dance) 50%, var(--color-fandom) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom:  var(--space-4);
}
.hero-wordmark-dot { opacity: 0.8; }

.hero-tagline {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  flex-wrap:       wrap;
  margin-bottom:   var(--space-2);
}
.tagline-sep   { color: var(--text-muted); font-size: 1.2rem; }
.tagline-pill  {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-4);
  border-radius:  var(--radius-pill);
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: 0.02em;
}
.tagline-music  { background: rgba(255, 0, 110, 0.15); color: var(--color-music);  border: 1px solid rgba(255, 0, 110, 0.30); }
.tagline-dance  { background: rgba(131,56, 236, 0.15); color: var(--color-dance);  border: 1px solid rgba(131,56, 236, 0.30); }
.tagline-fandom { background: rgba(  6,214, 160, 0.12); color: var(--color-fandom); border: 1px solid rgba(  6,214, 160, 0.28); }

.hero-tagline-kr {
  font-family:    var(--font-kr);
  font-size:      var(--text-sm);
  letter-spacing: var(--ls-widest);
  color:          var(--text-muted);
  margin-bottom:  var(--space-5);
}

/* ----------------------------------------------------------------
   STATS BAR
   ---------------------------------------------------------------- */
.stats-bar {
  background:   var(--surface-1);
  border-top:   1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding:      var(--space-5) 0;
}

/* ----------------------------------------------------------------
   THREE PILLARS
   ---------------------------------------------------------------- */
.pillar-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
}

.pillar-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-7) var(--space-6);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--duration-base) var(--ease-out),
                 border-color var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}
.pillar-card:hover     { transform: translateY(-6px); }
.pillar-music:hover    { border-color: var(--color-music);  box-shadow: var(--glow-music-md);  }
.pillar-dance:hover    { border-color: var(--color-dance);  box-shadow: var(--glow-dance-md);  }
.pillar-fandom:hover   { border-color: var(--color-fandom); box-shadow: var(--glow-fandom-md); }

/* top accent bar */
.pillar-music::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-music);  border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pillar-dance::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-dance);  border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pillar-fandom::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-fandom); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.pillar-icon    { font-size: 2.8rem; line-height: 1; }
.pillar-name    { font-family: var(--font-display); font-size: 2rem; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.pillar-name-kr { font-family: var(--font-kr); font-size: var(--text-sm); color: var(--text-muted); margin-top: -var(--space-2); }
.pillar-tagline { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.pillar-features {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
  flex:       1;
}
.pillar-features li { font-size: var(--text-sm); color: var(--text-secondary); }
.pillar-cta {
  display:        inline-flex;
  align-items:    center;
  padding:        var(--space-2) var(--space-4);
  border-radius:  var(--radius-md);
  font-size:      var(--text-sm);
  font-weight:    700;
  margin-top:     var(--space-3);
  border:         1px solid;
  transition:     all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  align-self:     flex-start;
}
.btn-music-outline  { color: var(--color-music);  border-color: rgba(255, 0, 110, 0.40); background: rgba(255, 0, 110, 0.06); }
.btn-music-outline:hover  { background: rgba(255, 0, 110, 0.14); border-color: var(--color-music); }
.btn-dance-outline  { color: var(--color-dance);  border-color: rgba(131,56, 236, 0.40); background: rgba(131,56, 236, 0.08); }
.btn-dance-outline:hover  { background: rgba(131,56, 236, 0.16); border-color: var(--color-dance); }
.btn-fandom-outline { color: var(--color-fandom); border-color: rgba(  6,214, 160, 0.36); background: rgba(  6,214, 160, 0.06); }
.btn-fandom-outline:hover { background: rgba(  6,214, 160, 0.14); border-color: var(--color-fandom); }

/* ----------------------------------------------------------------
   DYNAMIC STRIPS — shared
   ---------------------------------------------------------------- */
.dynamic-strip { padding: var(--space-7) var(--space-5); }

.strip-header {
  display:     flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap:         var(--space-4);
  flex-wrap:   wrap;
}
.strip-title { font-size: var(--text-h2); font-weight: 800; line-height: var(--lh-snug); }
.strip-link  { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); transition: color var(--duration-fast); white-space: nowrap; }
.strip-link:hover { color: var(--text-primary); }

/* Shared placeholder state */
.placeholder-strip {
  background:    var(--surface-1);
  border:        1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       flex;
  align-items:   center;
  gap:           var(--space-5);
}
.placeholder-icon { font-size: 3rem; flex-shrink: 0; opacity: 0.6; }
.placeholder-body { display: flex; flex-direction: column; gap: var(--space-2); }
.placeholder-title { font-size: var(--text-h3); font-weight: 700; }
.placeholder-sub   { font-size: var(--text-sm); color: var(--text-muted); max-width: 520px; }

/* Small button variant */
.btn-sm { padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }

/* ----------------------------------------------------------------
   WORD OF THE DAY card
   ---------------------------------------------------------------- */
.word-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  max-width:     640px;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}
.word-label-row   { display: flex; align-items: center; gap: var(--space-2); }
.word-badge {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: rgba(255, 209, 102, 0.15); color: var(--color-highlight);
}
.word-pos     { font-size: var(--text-xs); color: var(--text-muted); }
.word-hangul  { font-family: var(--font-kr); font-size: 2.5rem; font-weight: 900; color: var(--color-music); line-height: var(--lh-tight); }
.word-romanization { font-size: var(--text-body); font-weight: 600; color: var(--color-fandom); font-style: italic; }
.word-definition { font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--text-primary); }
.word-example    { font-family: var(--font-kr); font-size: var(--text-body); color: var(--color-dance); }
.word-example-en { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
.word-placeholder-note { font-size: var(--text-sm); color: var(--text-muted); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.word-placeholder-note a { color: var(--color-fandom); font-weight: 600; }

/* ----------------------------------------------------------------
   RANDOM GROUP card
   ---------------------------------------------------------------- */
.random-group-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       flex;
  align-items:   center;
  gap:           var(--space-6);
  max-width:     640px;
  transition:    border-color var(--duration-base), box-shadow var(--duration-base);
}
.random-group-card:hover { border-color: var(--color-dance); box-shadow: var(--glow-dance-sm); }
.random-group-emoji { font-size: 4rem; flex-shrink: 0; }
.random-group-info  { display: flex; flex-direction: column; gap: var(--space-2); }
.random-group-name  { font-size: var(--text-h2); font-weight: 900; }
.random-group-hangul { font-family: var(--font-kr); font-size: var(--text-body); color: var(--text-muted); }
.random-group-concept { font-size: var(--text-sm); color: var(--text-secondary); }

/* ----------------------------------------------------------------
   BIRTHDAYS
   ---------------------------------------------------------------- */
.birthday-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.birthday-card {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-4) var(--space-5);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--space-1);
  text-align:    center;
  min-width:     140px;
  transition:    transform var(--duration-fast), border-color var(--duration-fast);
  text-decoration: none;
}
.birthday-card:hover { transform: translateY(-3px); border-color: var(--color-highlight); }
.birthday-emoji { font-size: 2rem; }
.birthday-name  { font-weight: 700; font-size: var(--text-body); }
.birthday-group { font-size: var(--text-sm); color: var(--text-muted); }
.birthday-age   { font-size: var(--text-xs); color: var(--color-highlight); font-weight: 700; letter-spacing: var(--ls-wide); }

/* ----------------------------------------------------------------
   XP LEADERBOARD
   ---------------------------------------------------------------- */
.leaderboard-list { display: flex; flex-direction: column; gap: var(--space-2); max-width: 600px; }
.leaderboard-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-5);
}
.lb-rank       { font-family: var(--font-display); font-size: 1.3rem; min-width: 40px; line-height: 1; }
.lb-rank-1     { color: var(--color-highlight); }
.lb-rank-2     { color: var(--text-secondary); }
.lb-rank-3     { color: var(--color-music); }
.lb-name       { flex: 1; font-weight: 700; }
.lb-xp         { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }
.lb-badge {
  font-size: var(--text-xs); font-weight: 900; letter-spacing: var(--ls-wide);
  background: rgba(131, 56, 236, 0.15); color: var(--color-dance);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}

.leaderboard-placeholder {
  background:    var(--surface-1);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding:       var(--space-6);
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--space-8);
  align-items:   center;
  max-width:     760px;
}
.lb-placeholder-ranks { display: flex; flex-direction: column; gap: var(--space-3); }
.lb-placeholder-row   { display: flex; align-items: center; gap: var(--space-3); }
.lb-rank-icon  { font-size: 1.3rem; width: 32px; text-align: center; flex-shrink: 0; }
.lb-placeholder-bar {
  height:        10px;
  background:    linear-gradient(90deg, rgba(131, 56, 236, 0.35), rgba(131, 56, 236, 0.08));
  border-radius: var(--radius-pill);
}
.lb-placeholder-xp { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.lb-placeholder-cta { display: flex; flex-direction: column; gap: var(--space-3); }

/* ----------------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------------- */
.breadcrumb {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.breadcrumb .container { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-fandom); }
.breadcrumb .bc-sep { color: var(--border); }
.breadcrumb .bc-cur { color: var(--text-primary); }

/* ----------------------------------------------------------------
   PILLAR SECTION responsive
   ---------------------------------------------------------------- */

/* Tablet: hide some links to avoid overflow */
@media (max-width: 1100px) {
  .nav-link { font-size: 12px; padding: var(--space-1) var(--space-2); }
}

/* Mobile: show hamburger, hide desktop links, show drawer */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links  { display: none; }
  .nav-profile-wrap { display: none; }

  .pillar-grid         { grid-template-columns: 1fr; }
  .leaderboard-placeholder { grid-template-columns: 1fr; }
  .placeholder-strip   { flex-direction: column; text-align: center; }
  .random-group-card   { flex-direction: column; text-align: center; }
  .strip-header        { flex-direction: column; align-items: flex-start; }

  .footer-container { grid-template-columns: 1fr; }
  .footer-links     { gap: var(--space-6); }
  .detail-layout    { grid-template-columns: 1fr; }
  .detail-sidebar   { position: static; }
  .admin-layout     { grid-template-columns: 1fr; }
  .admin-sidebar    { border-right: none; border-bottom: 1px solid var(--border-default); }
  .grid-2           { grid-template-columns: 1fr; }
  .hero             { min-height: 80vh; }
  .stats-row        { gap: var(--space-4); }
}

@media (max-width: 640px) {
  .pillar-card { padding: var(--space-5); }
  .hero-tagline { gap: var(--space-2); }
  .tagline-pill { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); }
}