/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== TITLE WORDS ===== */
/* "Teach" — bright sky blue with underline accent */
.word-teach {
  color: #38bdf8; /* sky-400 */
  display: inline-block;
  position: relative;
}
.word-teach::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  opacity: 0.6;
}

/* "Learn" — warm orange with underline accent */
.word-learn {
  color: #fb923c; /* orange-400 */
  display: inline-block;
  position: relative;
}
.word-learn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f97316, #fb923c);
  opacity: 0.6;
}

/* ===== GRADIENT TEXT (stats, CTA) ===== */
.gradient-text {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== GLASS CARD ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s, transform 0.2s;
}
.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.22);
  transform: translateY(-2px);
}

/* ===== GRID BACKGROUND ===== */
.grid-bg {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ===== NAVBAR ===== */
#navbar { background: transparent; }
#navbar.scrolled {
  background: rgba(7, 12, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== SKILL TAGS ===== */
.skill-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #7dd3fc; /* sky-300 */
  font-size: 0.75rem;
  font-weight: 500;
}

/* ===== SKILL CARD ===== */
.skill-card:hover {
  background: rgba(56, 189, 248, 0.07);
  border-color: rgba(56, 189, 248, 0.28);
}

/* ===== STEP CARD ===== */
.step-card {
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.03) 0%, transparent 60%);
  pointer-events: none;
}
.step-card:hover { border-color: rgba(56, 189, 248, 0.28); }

/* Step number watermark */
.step-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(56, 189, 248, 0.07);
  line-height: 1;
  letter-spacing: -0.05em;
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  pointer-events: none;
}

/* ===== MATCH PILLS ===== */
.match-demo { margin-top: 1rem; }
.match-arrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.match-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.match-pill.blue {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}
.match-pill.orange {
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.28);
  color: #fdba74;
}

/* ===== ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.65s ease-out forwards;
}

/* ===== MISC ===== */
html { scroll-behavior: smooth; }

:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #070c14; }
::-webkit-scrollbar-thumb { background: #1e40af; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #38bdf8; }

@media (max-width: 640px) {
  .step-number { font-size: 2.5rem; }
}