/* Home page styles — scoped to .home to avoid conflicts with base.css */
.home {
  --pw-bg: #0c0f13;
  --pw-surface: #131820;
  --pw-cyan: #00e5ff;
  --pw-yellow: #ffd400;
  --pw-danger: #ff3b3b;
  --pw-text: #e6f0ff;
  --pw-muted: #9bb0c6;
}

.home .section {
  background: var(--pw-bg);
  color: var(--pw-text);
  padding: clamp(2rem, 4vw, 4rem) 0;
}

.home .section-dark {
  background: linear-gradient(180deg, #0a0d12 0%, #0c0f13 100%);
}

.home .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Hero */
.home .hero { position: relative; background: radial-gradient(60% 80% at 70% 20%, rgba(0,229,255,0.15), transparent 60%), linear-gradient(180deg, #0b0e12 0%, #0c0f13 100%); overflow: clip; }
.home .hero-media { position: absolute; inset: 0; opacity: 0.18; filter: contrast(110%) saturate(110%); }
.home .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.home .hero-content { position: relative; padding: clamp(4rem, 10vw, 8rem) 1rem; text-align: left; }
.home .hero-content .lead { color: var(--pw-muted); max-width: 68ch; }
.home .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Quick nav */
.home .quick-nav ul { display: flex; gap: .75rem 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding: 0; list-style: none; }
.home .quick-nav ul li {padding: 0;}
.home .quick-nav ul li::before { display: none; }
.home .quick-nav a { display: inline-block; padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(0,229,255,.35); color: var(--pw-text); text-decoration: none; font-size: .9rem; background: rgba(19,24,32,.5); box-shadow: inset 0 0 0 1px rgba(0,229,255,.1); }
.home .quick-nav a:hover { box-shadow: 0 0 12px rgba(0,229,255,.35); border-color: rgba(0,229,255,.8); }

/* Grid and cards */
.home .grid { display: grid; gap: 1.25rem; }
.home .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.home .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .home .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .home .grid-3, .home .grid-2{ grid-template-columns: 1fr; } }

.home .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.1rem; box-shadow: 0 2px 16px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.home .card h3 { margin-top: 0; letter-spacing: .3px; }
.home .feature { border-color: rgba(0,229,255,.25); }

/* Buttons — leverage existing .btn styles if present; add neon emphasis here */
.home .btn { text-decoration: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1rem; transition: transform .12s ease, box-shadow .12s ease; }
.home .btn:hover { transform: translateY(-1px); }
.home .btn-primary { background: linear-gradient(90deg, rgba(0,229,255,.15), rgba(0,229,255,.35)); border: 1px solid rgba(0,229,255,.7); color: var(--pw-text); box-shadow: 0 0 24px rgba(0,229,255,.25); }
.home .btn-primary:hover { box-shadow: 0 0 36px rgba(0,229,255,.45); }
.home .btn-secondary { background: linear-gradient(90deg, rgba(255,212,0,.12), rgba(255,212,0,.28)); border: 1px solid rgba(255,212,0,.7); color: var(--pw-text); box-shadow: 0 0 24px rgba(255,212,0,.2); }
.home .btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--pw-text); }
.home .btn-small { padding: .5rem .75rem; font-size: .9rem; }

/* Section header */
.home .section-header { margin-bottom: 1rem; }
.home .section-header p { color: var(--pw-muted); max-width: 80ch; }

/* Figure */
.home .section-figure { margin: 1rem 0 0; text-align: center; }
.home .section-figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); }
.home .section-figure figcaption { color: var(--pw-muted); font-size: .9rem; margin-top: .5rem; }

/* Levels preview */
.home .levels-preview { display: grid; gap: 1rem; margin: .5rem 0 1rem; }
.home .level-item { background: var(--pw-surface); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .9rem; }
.home .level-meta { display:flex; align-items:center; justify-content: space-between; margin-bottom: .6rem; }
.home .badge { display:inline-block; font-size:.8rem; padding:.25rem .5rem; border-radius: 999px; color: #000; }
.home .badge-cyan { background: var(--pw-cyan); }
.home .badge-yellow { background: var(--pw-yellow); }
.home .badge-danger { background: var(--pw-danger); color: #fff; }
.home .progress { height: .6rem; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; position: relative; }
.home .progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pw-cyan), var(--pw-yellow)); box-shadow: 0 0 12px rgba(0,229,255,.45); }

/* Achievements */
.home .achievement { display: flex; flex-direction: column; gap: .5rem; }
.home .achievement.earned { border-color: rgba(0,229,255,.6); box-shadow: 0 0 18px rgba(0,229,255,.25); }
.home .achievement.earned h3::after { content: " ✓"; color: var(--pw-cyan); }

/* FAQ search */
.home .faq-search { margin-top: 1.25rem; background: var(--pw-surface); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1rem; }
.home .faq-search .label { display:block; font-weight: 600; margin-bottom: .35rem; }
.home .faq-search input[type="search"] { width:100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background:#0c1118; color: var(--pw-text); padding:.7rem .9rem; outline: none; box-shadow: inset 0 0 0 1px rgba(0,229,255,.05); }
.home .faq-search .help { color: var(--pw-muted); font-size: .85rem; margin: .4rem 0 .6rem; }
.home .searchable-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.home .searchable-list li { padding:.6rem .7rem; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#0e141c; }
.home .searchable-list a { color: var(--pw-text); text-decoration:none; }
.home .searchable-list li[hidden] { display:none !important; }

/* Section actions */
.home .section-actions { margin-top: 1rem; display:flex; gap:.75rem; flex-wrap: wrap; }