/* ============================================================
   DARESNI — REUSABLE COMPONENTS
   ============================================================ */

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font);
  font-size: var(--tx-sm);
  font-weight: var(--w7);
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease),
              border-color var(--t-base) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Primary — maroon */
.btn--primary {
  background: var(--maroon);
  color: var(--white);
  border-color: var(--maroon);
}
.btn--primary:hover {
  background: var(--maroon-dark);
  border-color: var(--maroon-dark);
  box-shadow: var(--shadow-maroon);
  transform: translateY(-1px);
  color: var(--white);
}
.btn--primary:active { transform: translateY(0); }

/* Ghost — for dark/navy backgrounds */
.btn--ghost {
  background: var(--ov-card);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.50);
  color: var(--white);
  transform: translateY(-1px);
}

/* Outline — maroon */
.btn--outline {
  background: transparent;
  color: var(--maroon);
  border-color: var(--maroon);
}
.btn--outline:hover {
  background: var(--maroon-pale);
  color: var(--maroon-dark);
  border-color: var(--maroon-dark);
}

/* Secondary — navy outline */
.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover {
  background: var(--navy);
  color: var(--white);
}

/* Gold accent button */
.btn--gold {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn--gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--navy);
  transform: translateY(-1px);
}

/* Sizes */
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--tx-xs); }
.btn--lg { padding: 1rem 2.25rem; font-size: var(--tx-base); }
.btn--xl { padding: 1.125rem 2.75rem; font-size: var(--tx-md); }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-solid);
  padding: var(--s6);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Category card */
.card--category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  padding: var(--s10) var(--s6);
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}
.card--category:hover { color: var(--navy); }

.cat-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: var(--s2);
  transition: transform var(--t-base) var(--ease);
}
.card--category:hover .cat-icon { transform: scale(1.08); }

.cat-icon--maroon { background: var(--maroon-pale); }
.cat-icon--navy   { background: var(--navy-pale); }
.cat-icon--gold   { background: rgba(255, 209, 102, 0.12); }
.cat-icon--green  { background: rgba(34, 197, 94, 0.10); }

.cat-title {
  font-size: var(--tx-md);
  font-weight: var(--w7);
  color: var(--navy);
}
.cat-desc {
  font-size: var(--tx-sm);
  color: var(--text-light);
  line-height: var(--lh-snug);
}

/* Feature card */
.card--feature {
  border: none;
  background: transparent;
  padding: var(--s6) var(--s4);
}
.card--feature:hover { transform: none; box-shadow: none; }

.feat-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--s4);
}
.feat-icon--maroon { background: var(--maroon-pale); }
.feat-icon--navy   { background: var(--navy-pale); }
.feat-icon--gold   { background: rgba(255, 209, 102, 0.12); }
.feat-icon--green  { background: rgba(34, 197, 94, 0.10); }

.feat-title {
  font-size: var(--tx-lg);
  font-weight: var(--w7);
  color: var(--navy);
  margin-bottom: var(--s2);
}
.feat-desc {
  font-size: var(--tx-sm);
  color: var(--text-sec);
  line-height: var(--lh-base);
}

/* Educator card */
.card--educator { gap: var(--s4); display: flex; flex-direction: column; }

.edu-avatar {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--navy-pale);
  flex-shrink: 0;
}
.edu-name  {
  font-size: var(--tx-base);
  font-weight: var(--w7);
  color: var(--navy);
}
.edu-role  { font-size: var(--tx-sm); color: var(--text-light); }
.edu-stars {
  display: flex; align-items: center; gap: var(--s1);
  font-size: var(--tx-sm);
  font-weight: var(--w6);
  color: var(--gold-dark);
}
.edu-tags  { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Stat card (dark background) */
.card--stat {
  background: var(--ov-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-align: center;
  backdrop-filter: blur(8px);
}
.card--stat:hover { transform: none; box-shadow: none; }

.stat-n {
  font-size: var(--tx-4xl);
  font-weight: var(--w8);
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--s2);
  letter-spacing: var(--ls-tight);
}
.stat-l {
  font-size: var(--tx-sm);
  color: var(--ov-text);
  font-weight: var(--w5);
}

/* ── BADGE / TAG ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.2rem 0.65rem;
  font-size: var(--tx-xs);
  font-weight: var(--w6);
  border-radius: var(--r-full);
}
.badge--maroon { background: var(--maroon-pale); color: var(--maroon); }
.badge--navy   { background: var(--navy-pale); color: var(--navy); }
.badge--gold   { background: rgba(255,209,102,0.15); color: #8A6500; }
.badge--green  { background: rgba(34,197,94,0.10); color: #15803D; }

/* ── PILL (subject tags) ──────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: var(--r-full);
  font-size: var(--tx-sm);
  font-weight: var(--w5);
  color: var(--text-mid);
  background: var(--white);
  border: 1px solid var(--border-solid);
  transition: all var(--t-fast) var(--ease);
  text-decoration: none;
}
.pill:hover {
  background: var(--maroon-pale);
  border-color: var(--maroon);
  color: var(--maroon-dark);
}

/* ── SEARCH BOX ───────────────────────────────────────────── */
.search-box {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg), 0 0 0 0 rgba(155, 27, 43, 0);
  border: 2px solid transparent;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  overflow: hidden;
}
.search-box:focus-within {
  border-color: var(--maroon);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(155, 27, 43, 0.12);
}
.search-box__input {
  flex: 1;
  padding: var(--s4) var(--s6);
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: var(--tx-base);
  color: var(--text);
  background: transparent;
}
.search-box__input::placeholder { color: var(--text-light); }
.search-box__btn {
  margin: var(--s2);
  padding: 0.65rem 1.5rem;
  background: var(--maroon);
  color: var(--white);
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: var(--tx-sm);
  font-weight: var(--w7);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.search-box__btn:hover { background: var(--maroon-dark); }

/* ── APP STORE BUTTONS ────────────────────────────────────── */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.7rem 1.5rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-md);
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  transition: all var(--t-base) var(--ease);
}
.store-btn:hover {
  background: var(--navy-mid);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.store-btn__icon { font-size: 22px; line-height: 1; }
.store-btn__text { display: flex; flex-direction: column; line-height: 1.25; }
.store-btn__small { font-size: var(--tx-xs); opacity: 0.65; }
.store-btn__name  { font-size: var(--tx-base); font-weight: var(--w6); }

/* ── STEP LIST ────────────────────────────────────────────── */
.step-list { display: flex; flex-direction: column; gap: var(--s8); }
.step-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--s4); align-items: start; }
.step-num {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--maroon);
  color: var(--white);
  font-size: var(--tx-lg);
  font-weight: var(--w8);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-maroon);
}
.step-title {
  font-size: var(--tx-md);
  font-weight: var(--w7);
  color: var(--navy);
  margin-bottom: var(--s1);
}
.step-desc { font-size: var(--tx-sm); color: var(--text-sec); line-height: var(--lh-base); }

/* ── QUOTE CARD ───────────────────────────────────────────── */
.quote-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--s10);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.quote-card__mark {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--maroon);
  opacity: 0.2;
  font-weight: var(--w8);
  margin-bottom: var(--s2);
}
.quote-card__text {
  font-size: var(--tx-xl);
  font-weight: var(--w6);
  font-style: italic;
  color: var(--navy);
  line-height: var(--lh-snug);
  margin-bottom: var(--s4);
}
.quote-card__credit { font-size: var(--tx-sm); color: var(--text-light); }

/* ── AVATAR STACK ─────────────────────────────────────────── */
.avatar-stack { display: flex; }
.avatar-stack .av {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 2px solid var(--navy);
  margin-left: -9px;
  background: var(--navy-pale);
  overflow: hidden;
}
.avatar-stack .av:first-child { margin-left: 0; }

/* ── LOGO STRIP ───────────────────────────────────────────── */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s10);
}
.logo-strip__item {
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--t-base), filter var(--t-base);
  cursor: default;
}
.logo-strip__item:hover { opacity: 0.75; filter: grayscale(0); }