/* ============ DREAM SLEEP KNOWLEDGE BASE — Styles ============ */
:root {
  --navy: #0a0e2e;
  --navy-2: #161b48;
  --purple: #6b4ee6;
  --purple-2: #9b7ef5;
  --lavender: #c5b8f5;
  --pink: #ff7eb6;
  --cyan: #4dd0e1;
  --yellow: #ffd93d;
  --cream: #fff8e7;
  --white: #ffffff;
  --text: #e8e4f3;
  --text-dim: #a8a4c0;
  --card: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.12);
  --glow: 0 8px 32px rgba(107, 78, 230, 0.35);

  /* Kids palette */
  --kid-sky: #87ceeb;
  --kid-pink: #ffb6c1;
  --kid-mint: #b5ead7;
  --kid-yellow: #ffe66d;
  --kid-purple: #c5a3ff;
  --kid-orange: #ffaa7a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Animated starfield background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(107, 78, 230, 0.25), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(155, 126, 245, 0.20), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(77, 208, 225, 0.15), transparent 50%),
    linear-gradient(180deg, #050822 0%, #0a0e2e 50%, #161b48 100%);
  z-index: -2;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.stars::before, .stars::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow:
    50px 80px white, 120px 30px white, 200px 150px white, 300px 70px rgba(255,255,255,0.6),
    400px 200px white, 500px 50px rgba(255,255,255,0.7), 600px 180px white, 700px 100px white,
    800px 220px rgba(255,255,255,0.6), 900px 40px white, 1000px 160px white, 1100px 90px white,
    1200px 240px rgba(255,255,255,0.5), 100px 300px white, 250px 400px white, 350px 350px rgba(255,255,255,0.7),
    450px 450px white, 550px 380px white, 650px 480px rgba(255,255,255,0.6), 750px 320px white,
    850px 420px white, 950px 470px rgba(255,255,255,0.7), 1050px 360px white, 1150px 440px white,
    80px 550px white, 180px 600px rgba(255,255,255,0.6), 280px 580px white, 380px 650px white,
    480px 620px rgba(255,255,255,0.7), 580px 680px white, 680px 600px white, 780px 660px rgba(255,255,255,0.5),
    880px 620px white, 980px 690px white, 1080px 580px white, 1180px 660px rgba(255,255,255,0.7);
  animation: twinkle 4s ease-in-out infinite;
}
.stars::after {
  animation-delay: 2s;
  transform: translate(150px, 50px);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Floating moon */
.moon {
  position: fixed;
  top: 8%;
  right: 7%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8e7, #d4c9f7 80%);
  box-shadow: 0 0 60px rgba(255, 248, 231, 0.4), 0 0 100px rgba(155, 126, 245, 0.3);
  z-index: -1;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ============ NAVIGATION ============ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  background: rgba(10, 14, 46, 0.7);
  border-bottom: 1px solid var(--card-border);
  padding: 1rem 2rem;
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.logo {
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-2), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}
.logo::before {
  content: '🌙 ';
  -webkit-text-fill-color: initial;
}
nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  flex-wrap: wrap;
}
nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  font-size: 0.95rem;
}
nav a:hover { color: var(--purple-2); }
nav a.active { color: var(--purple-2); }

/* Hamburger toggle — hidden on desktop, shown in mobile media query */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ LAYOUT ============ */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  text-align: center;
  padding: 5rem 1rem 4rem;
  position: relative;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--purple-2) 50%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--text-dim);
  max-width: 700px;
  margin: 0 auto 2.5rem;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 3rem auto 0;
}
.stat {
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--purple-2), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

/* ============ SECTIONS ============ */
section {
  padding: 4rem 0;
  scroll-margin-top: 80px;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff, var(--purple-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-sub {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  max-width: 800px;
}

/* ============ CARDS GRID ============ */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow);
  border-color: rgba(155, 126, 245, 0.4);
}
.card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: var(--white);
}
.card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.card p { color: var(--text-dim); font-size: 0.95rem; }

/* ============ CHART CONTAINERS ============ */
.chart-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
}
.chart-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: white;
}
.chart-card .chart-desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.chart-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}

/* ============ SLEEP CYCLE VIZ ============ */
.cycle-viz {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
}
.cycle-svg-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
}
.phase-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.phase-card {
  padding: 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,0.2);
}
.phase-card:hover, .phase-card.active {
  border-color: var(--purple-2);
  background: rgba(107, 78, 230, 0.15);
  transform: translateY(-2px);
}
.phase-card .phase-name {
  font-weight: 700;
  color: white;
  font-size: 1.05rem;
}
.phase-card .phase-pct {
  color: var(--purple-2);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
.phase-card .phase-detail {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ============ CIRCADIAN CLOCK ============ */
.clock-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.clock-svg-container {
  flex: 0 0 auto;
}
.clock-info {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}
.clock-time-info {
  background: rgba(0,0,0,0.3);
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  min-height: 180px;
}
.clock-time-info h4 {
  color: var(--yellow);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.clock-time-info p {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* ============ HYGIENE CHECKLIST ============ */
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.check-item:hover { border-color: var(--purple-2); }
.check-item.checked {
  background: rgba(107, 78, 230, 0.15);
  border-color: var(--purple-2);
}
.check-item.checked .check-text { color: white; text-decoration: line-through; opacity: 0.8; }
.check-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--purple-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.check-item.checked .check-box {
  background: var(--purple);
  color: white;
}
.check-text { color: var(--text); font-size: 0.95rem; }

/* ============ CAFFEINE CALCULATOR ============ */
.caffeine-tool {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(12px);
}
.caffeine-input {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.caffeine-input label { color: var(--text-dim); font-size: 0.95rem; }
.caffeine-input input {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: white;
  font-size: 1rem;
  width: 100px;
}
.caffeine-input input[type="time"] { width: 140px; }
.caffeine-input input:focus { outline: none; border-color: var(--purple-2); }
.caffeine-result {
  padding: 1.2rem;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  margin-top: 1rem;
}
.caffeine-result strong { color: var(--yellow); }

/* ============ TABS ============ */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.5rem;
}
.tab {
  padding: 0.7rem 1.4rem;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s;
}
.tab:hover { color: white; border-color: var(--purple-2); }
.tab.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: white;
  border-color: var(--purple-2);
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ AGE CARDS (Kids) ============ */
.age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.age-card {
  position: relative;
  padding: 2.5rem 2rem;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  text-decoration: none;
  color: white;
  display: block;
}
.age-card:hover { transform: translateY(-6px) scale(1.02); }
.age-3 { background: linear-gradient(135deg, #ff7eb6, #ffaa7a); }
.age-6 { background: linear-gradient(135deg, #87ceeb, #b5ead7); }
.age-9 { background: linear-gradient(135deg, #c5a3ff, #6b4ee6); }
.age-card .age-num {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}
.age-card .age-label { font-size: 1.2rem; margin-top: 0.5rem; }
.age-card .age-hours {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.25);
  border-radius: 100px;
  display: inline-block;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* ============ KIDS SECTION ============ */
.kids-hero {
  text-align: center;
  padding: 3rem 1rem;
  background: linear-gradient(135deg, rgba(255, 126, 182, 0.1), rgba(135, 206, 235, 0.1));
  border-radius: 24px;
  margin-bottom: 2rem;
  border: 1px solid var(--card-border);
}

.bedtime-routine {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
}
.routine-step {
  flex: 0 0 200px;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--kid-pink), var(--kid-yellow));
  color: #4a2f6e;
  border-radius: 20px;
  text-align: center;
  scroll-snap-align: start;
  font-weight: 600;
}
.routine-step .step-emoji { font-size: 3rem; margin-bottom: 0.5rem; display: block; }
.routine-step:nth-child(2) { background: linear-gradient(135deg, var(--kid-sky), var(--kid-mint)); }
.routine-step:nth-child(3) { background: linear-gradient(135deg, var(--kid-purple), var(--kid-pink)); }
.routine-step:nth-child(4) { background: linear-gradient(135deg, var(--kid-yellow), var(--kid-orange)); }
.routine-step:nth-child(5) { background: linear-gradient(135deg, var(--kid-mint), var(--kid-sky)); }
.routine-step:nth-child(6) { background: linear-gradient(135deg, var(--kid-orange), var(--kid-purple)); }

/* ============ FACT CARDS ============ */
.fact-card {
  background: linear-gradient(135deg, rgba(107, 78, 230, 0.2), rgba(255, 126, 182, 0.15));
  border: 1px solid var(--purple-2);
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
}
.fact-card::before {
  content: '💡';
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--navy);
  padding: 0 0.5rem;
  font-size: 1.5rem;
}
.fact-card h4 {
  color: var(--yellow);
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

/* ============ DISORDERS LIST ============ */
.disorder-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}
.disorder-card {
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.disorder-card:hover { border-color: var(--pink); }
.disorder-card h4 {
  color: var(--pink);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.disorder-card .prevalence {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: rgba(255, 126, 182, 0.2);
  color: var(--pink);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

/* ============ FOOTER ============ */
footer {
  margin-top: 6rem;
  padding: 3rem 2rem;
  text-align: center;
  border-top: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 0.9rem;
}
footer a { color: var(--purple-2); text-decoration: none; }

/* ============ KIDS-SPECIFIC ANIMATIONS ============ */
.sleepy-character {
  display: inline-block;
  font-size: 5rem;
  animation: sleepy 3s ease-in-out infinite;
}
@keyframes sleepy {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.zzz {
  display: inline-block;
  animation: zzz 2s ease-in-out infinite;
  color: var(--cyan);
}
@keyframes zzz {
  0% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* SVG dynamic styles */
.phase-region { cursor: pointer; transition: opacity 0.2s; }
.phase-region:hover { opacity: 0.85; }

.clock-segment { cursor: pointer; transition: opacity 0.2s; }
.clock-segment:hover { opacity: 0.8; }
.clock-segment.active { stroke: white; stroke-width: 2; }

/* ============ RESPONSIVE ============ */

/* Smoother momentum scrolling for horizontal carousels on touch */
.cycle-svg-wrap, .bedtime-routine { -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  main { padding: 1rem; }
  nav { padding: 0.7rem 1rem; }

  /* Mobile navigation: collapse links behind the hamburger */
  .nav-toggle { display: flex; }
  .nav-inner { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
  .logo { flex: 1; font-size: 1.25rem; }
  nav ul {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.2rem;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.35s ease, margin-top 0.35s ease;
  }
  nav ul.open {
    max-height: 460px;
    margin-top: 0.6rem;
  }
  nav li { width: 100%; }
  nav ul a {
    display: block;
    padding: 0.85rem 0.75rem;
    border-radius: 10px;
    font-size: 1rem;
  }
  nav ul a:hover,
  nav ul a.active {
    background: rgba(107, 78, 230, 0.18);
    color: var(--purple-2);
  }

  .hero { padding: 3rem 0.5rem 2rem; }
  .moon { width: 50px; height: 50px; top: 4%; right: 5%; }
  .chart-wrap { height: 260px; }

  /* Circadian clock fills the column instead of overflowing */
  .clock-wrap { gap: 1.2rem; }
  .clock-svg-container { flex: 1 1 auto; width: 100%; max-width: 360px; }
  #circadian-clock { width: 100%; height: auto; }
  .clock-info { min-width: 0; width: 100%; }
  .clock-time-info { min-height: 0; }

  /* Caffeine calculator inputs stack full-width */
  .caffeine-input { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .caffeine-input label { display: flex; flex-direction: column; gap: 0.4rem; }
  .caffeine-input input,
  .caffeine-input input[type="time"] { width: 100%; }
}

@media (max-width: 480px) {
  main { padding: 0.85rem; }
  section { padding: 2.5rem 0; }
  .card, .chart-card, .cycle-viz, .caffeine-tool, .clock-time-info { padding: 1.3rem; border-radius: 16px; }
  .hero { padding: 2rem 0.5rem 1.5rem; }

  /* 2×2 stat grid reads better than a single tall column */
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-top: 2rem; }
  .stat { padding: 1.1rem; }
  .stat-num { font-size: 1.7rem; }

  /* Stacked, full-width call-to-action buttons for thumbs */
  .hero .btn { width: 100%; }

  .section-sub { font-size: 1rem; margin-bottom: 1.8rem; }
  .age-card { padding: 2rem 1.5rem; }
  .age-card .age-num { font-size: 3.2rem; }
  .routine-step { flex-basis: 165px; }

  /* Tabs split the row evenly instead of wrapping awkwardly */
  .tabs { gap: 0.4rem; }
  .tab { flex: 1; padding: 0.7rem 0.5rem; font-size: 0.85rem; text-align: center; }
}

/* ============ UTILITY ============ */
.highlight {
  background: linear-gradient(135deg, var(--purple-2), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(107, 78, 230, 0.2);
  color: var(--purple-2);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.2rem;
}
.note {
  background: rgba(255, 217, 61, 0.1);
  border-left: 3px solid var(--yellow);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin: 1rem 0;
  color: var(--text);
  font-size: 0.95rem;
}
ul.bullet { margin-left: 1.5rem; }
ul.bullet li { margin: 0.4rem 0; color: var(--text-dim); }
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: white;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--purple-2);
  color: var(--purple-2);
}