/*
Theme Name: Coursart
Theme URI: https://coursart.framer.website
Author: Things We Make
Description: A dark, cinematic landing page theme for AI design courses. Replicates the Coursart Framer template with scroll animations, parallax gallery, and sticky navigation.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: coursart
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --bg:          #ffffff;
  --bg-light:    #ffffff;
  --surface:     #f7f7f5;
  --surface-2:   #f0f0ee;
  --border:      rgba(0,0,0,0.1);
  --accent:      #111111;
  --accent-2:    #333333;
  --text:        #111111;
  --text-muted:  rgba(17,17,17,0.55);
  --text-dim:    rgba(17,17,17,0.25);
  --radius:      18px;
  --radius-sm:   10px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h:       64px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ============================================================
   PAGE STACK — sections pin in place while the next one
   scrolls up to cover them, so scrolling reads as one section
   at a time rather than a continuous document scroll.
   ============================================================ */
.page-section {
  position: relative;
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   STARS BACKGROUND
   ============================================================ */
.stars-bg {
  display: none;
}

.stars-bg::before,
.stars-bg::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 75%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 30%, rgba(255,255,255,0.4) 0%, transparent 100%);
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: starDrift 120s linear infinite;
  opacity: 0.5;
}
.stars-bg::after {
  background-size: 500px 500px;
  animation-duration: 200s;
  animation-direction: reverse;
  opacity: 0.3;
}

@keyframes starDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(33.33%); }
}

/* ============================================================
   TOP BANNER
   ============================================================ */
.top-banner {
  position: relative;
  z-index: 10;
  background: transparent;
  text-align: center;
  padding: 14px 20px;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.top-banner a { color: var(--text); font-weight: 500; }
.top-banner .sep { margin: 0 12px; opacity: 0.3; }

/* ============================================================
   CONTACT BAR — always-visible, one click away
   ============================================================ */
.contact-bar {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-bar a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
}
.contact-bar a:hover { color: var(--text); }

@media (max-width: 768px) {
  .contact-bar a:last-child { display: none; }
  .contact-bar { top: 14px; right: 16px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
}

.hero__headline {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 720px;
  margin: 0 auto 28px;
  opacity: 0;
  transform: translateY(24px);
}

.hero__headline span { display: block; }

.hero__sub {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(16px);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 50px;
  transition: transform 0.2s, box-shadow 0.2s;
  opacity: 0;
  transform: translateY(16px);
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

/* ============================================================
   LOGOS MARQUEE
   ============================================================ */
.logos {
  position: relative;
  z-index: 2;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}

.logos__track {
  display: flex;
  gap: 64px;
  align-items: center;
  width: max-content;
  animation: marquee 28s linear infinite;
}

@media (hover: hover) {
  .logos__track:hover { animation-play-state: paused; }
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.logo-item .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   COURSE CARDS
   ============================================================ */
.cards-section {
  position: relative;
  z-index: 2;
  padding: 100px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
}

.course-card__img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.course-card:hover .course-card__img {
  transform: scale(1.04);
}

.course-card__body {
  padding: 24px;
}

.course-card__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.course-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

.focus-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
}

.focus-card__icon {
  font-size: 24px;
  margin-bottom: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
}

.focus-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.focus-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   FOR WHO SECTION
   ============================================================ */
.for-who {
  position: relative;
  z-index: 2;
  padding: 120px 24px;
  text-align: center;
}

.for-who__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.for-who__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.for-who__item {
  font-size: clamp(28px, 5.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-dim);
  line-height: 1.15;
  transition: color 0.4s;
  cursor: default;
}

.for-who__item.active { color: var(--text); }
.for-who__item.near   { color: var(--text-muted); }

/* ============================================================
   GALLERY SECTION
   ============================================================ */
.gallery {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0;
}

.gallery__track {
  display: flex;
  gap: 12px;
  padding: 12px;
  width: max-content;
  animation: marquee 26s linear infinite;
}

@media (hover: hover) {
  .gallery__track:hover { animation-play-state: paused; }
}

.gallery__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.gallery__img {
  border-radius: var(--radius);
  object-fit: cover;
  display: block;
  width: 380px;
  height: 300px;
}

/* ============================================================
   IS THIS YOU CARDS
   ============================================================ */
.is-you {
  position: relative;
  z-index: 2;
  padding: 60px 24px 120px;
  max-width: 960px;
  margin: 0 auto;
}

.is-you__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}

.is-you h2 {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 60px;
  opacity: 0;
}
.is-you h2.tw-ready { opacity: 1; }

.is-you__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 640px) {
  .is-you__grid { grid-template-columns: 1fr; }
}

.is-you__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 160px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
}

.is-you__card p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================================
   LIGHT SECTION (video / transition)
   ============================================================ */
.light-section {
  position: relative;
  z-index: 2;
  background: var(--bg-light);
  padding: 120px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.light-section__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.light-section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 20px;
}

.light-section h2 {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 48px;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(24px);
}

.video-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #222;
}

.video-wrap video,
.video-wrap iframe,
.video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   PROGRAM / MODULES
   ============================================================ */
.program {
  position: relative;
  z-index: 2;
  padding: 160px 24px;
  /* No overflow:hidden here — position:sticky on .module-card-slot needs
     an unclipped path up to the scrolling viewport, and this was only
     ever guarding .program__blob, which is already display:none. */
}

.program__blob { display: none; }

.program__header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 80px;
}

.program__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.program__title {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(24px);
}

/* Cards stack via plain CSS position:sticky — no ScrollTrigger pin, no
   manual scroll-budget spacer. Studied how kora.framer.media does this:
   each card is a normal-flow sibling, position:sticky + top:0 + rising
   z-index, inside one tall parent. The browser handles the entire
   pin-and-cover sequence natively from that alone — every GSAP-pin bug
   hit earlier this session (spacer-height doubling, the next section's
   z-index outranking a still-active pin, dead gaps from budget
   mismatches) was really just the cost of hand-rolling what sticky
   positioning already does correctly for free. */
.modules {
  position: relative;
  z-index: 2;
  width: min(960px, 100%);
  margin: 0 auto;
}

/* Each slot is its own sticky card — natural document height (one slot
   per card, min-height below), so .modules's total height is just the
   sum of all of them with no inflation or JS-computed budget needed.
   Rising z-index (set in main.js) makes each new card cover the last
   as it reaches the top and sticks. */
.module-card-slot {
  position: sticky;
  top: 0;
  /* Not min-height:100vh — on any viewport where the actual card content
     is meaningfully shorter than the full viewport (common on tall/large
     displays), centering it in a 100vh slot leaves a big empty gap above
     and below during that card's whole dwell. main.js sets the real
     height to fit the tallest actual card instead, matching how Kora's
     cards stay close to filling their sticky slot rather than floating
     in one sized for content nobody has. */
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  /* Top-aligned, not centered — cards vary a lot in natural height (the
     two-column layout no longer normalizes them the way the old fixed-
     height image on top did), and centering each one independently made
     shorter cards peek at BOTH the top and bottom by a different amount
     per card, reading as randomly-sized panels rather than a stack. Top-
     aligning means every card starts at the same point and any peek from
     the card underneath only ever shows at the bottom, consistently. */
  justify-content: flex-start;
  /* Transparent on purpose: a shorter card's bottom margin lets the
     still-stuck card underneath peek through instead of masking that
     space with a flat opaque block. Safe against ghosting/illegible
     overlap because the stack is a hard z-index cut with no fade — the
     active card's own content always fully covers whatever's behind it
     at every pixel it actually occupies, so only the margin strip below
     it (where the active card has nothing to show anyway) reveals the
     peek. */
}

/* Text-left / image-right, matching kora.framer.media's service cards.
   Below 768px this reverts to the original stacked (image-top) layout —
   two columns don't have room to breathe on a phone. */
.module-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  max-height: calc(100vh - 120px);
  /* Height is set explicitly in main.js (to the tallest actual card),
     not via flex-grow — flex:1 uses flex-basis:0%, which broke the JS
     measurement step (resetting a slot to auto height to read each
     card's natural size doesn't work when the flex item ignores its own
     content size as a starting point in the first place; every card
     measured as the shortest one instead of its true height). An
     explicit pixel height sidesteps that entirely. .module-card__content
     's existing justify-content:space-between spreads text/button to
     fill the extra room in shorter cards. */
}

.module-card__content {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.module-card__tag {
  display: inline-block;
  background: rgba(0,0,0,0.06);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 16px;
  width: fit-content;
}

.module-card__title {
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
}

.module-card__desc {
  font-size: 14px;
  color: rgba(0,0,0,0.5);
  margin-bottom: 28px;
  line-height: 1.7;
}

.module-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}

.module-card__list li {
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  padding-left: 20px;
  position: relative;
}

.module-card__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(0,0,0,0.3);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 50px;
  transition: background 0.2s;
  width: fit-content;
}
.btn-dark:hover { background: #333; }

.module-card__media {
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Parallax mover, added by main.js around the <img> — kept as a separate
   element from the <img> itself specifically so GSAP's scroll-linked
   translateY (set as an inline style) doesn't fight the CSS hover-scale
   transform below; inline styles always win over stylesheet rules for
   the same property, so if both lived on the <img> the hover effect
   would just stop working once GSAP touched transform. Taller than its
   parent (see the top/height math) so panning it up during scroll never
   reveals blank space at the top or bottom edge of the crop window. */
.module-card__media-parallax {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: calc(100% + 60px);
}

.module-card__media-parallax img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.module-card:hover .module-card__media-parallax img { transform: scale(1.04); }

@media (max-width: 768px) {
  .module-card { grid-template-columns: 1fr; }
  .module-card__content { max-height: calc(100vh - 360px); }
  .module-card__media { height: 240px; order: -1; }
}

/* ============================================================
   MENTOR SECTION
   ============================================================ */
.mentor {
  position: relative;
  z-index: 2;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 120px 24px 100px;
  box-sizing: border-box;
  overflow: hidden;
}

.mentor__inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.mentor__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.mentor__headline {
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 700px;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(24px);
}

.mentor__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  flex: 1;
  min-width: 180px;
  opacity: 0;
  transform: translateY(20px);
}

.stat-card__num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text);
}

.stat-card__label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.mentor__name {
  font-size: clamp(80px, 18vw, 220px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--text-dim);
  user-select: none;
  margin: 0 -24px;
  white-space: nowrap;
  overflow: hidden;
}

.mentor__photo-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 420px;
  pointer-events: none;
}

.mentor__photo-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  position: relative;
  z-index: 2;
  padding: 140px 24px;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.pricing__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.pricing h2 {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(24px);
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  text-align: left;
}

.price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  opacity: 0;
  transform: translateY(24px);
  position: relative;
  overflow: hidden;
}

.price-card--featured {
  background: var(--surface);
  border-color: var(--accent);
}

.price-card__badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.price-card__name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.price-card__price {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.price-card__price sup {
  font-size: 24px;
  vertical-align: super;
  font-weight: 600;
}

.price-card__period {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.price-card__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.price-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.price-card__features li {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.price-card__features li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 50px;
  width: 100%;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }

.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 50px;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.03); }

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  position: relative;
  z-index: 2;
  padding: 100px 24px 140px;
  max-width: 760px;
  margin: 0 auto;
}

.faq__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  text-align: center;
}

.faq h2 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 60px;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: transform 0.3s;
}

.faq__item.open .faq__icon { transform: rotate(45deg); }

.faq__answer {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq__item.open .faq__answer {
  max-height: 400px;
  padding-bottom: 24px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: 48px 24px 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.footer__brand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer__copy {
  font-size: 13px;
  color: var(--text-muted);
}

.footer__links {
  display: flex;
  gap: 24px;
}

.footer__links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--text); }

/* ============================================================
   SITE LOGO — sits at the top of the document (not viewport-fixed),
   so it's visible on landing and scrolls away with the hero rather
   than staying pinned over every section. Scales fluidly with
   viewport width via clamp() rather than snapping at breakpoints.
   ============================================================ */
.site-logo {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 100000;
  display: block;
  line-height: 0;
}

.site-logo__img {
  width: clamp(200px, 18vw, 340px);
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .site-logo { top: 16px; left: 16px; }
  .site-logo__img { width: clamp(160px, 44vw, 240px); }
}

/* ============================================================
   STICKY BOTTOM NAV
   ============================================================ */
.sticky-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.sticky-nav__home {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  margin-right: 4px;
  flex-shrink: 0;
  transition: background 0.2s;
}
.sticky-nav__home:hover { background: rgba(0,0,0,0.09); }

.sticky-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sticky-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 50px;
  transition: color 0.2s, background 0.2s;
}
.sticky-nav a:hover { color: var(--text); background: rgba(0,0,0,0.05); }

.sticky-nav .btn-cta {
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 50px;
  margin-left: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sticky-nav .btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Toggle button — hidden unless the full pill can't fit (see the
   max-width:768px block below), so it never competes with the link
   list for space above that breakpoint. */
.sticky-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}
.sticky-nav__toggle:hover { background: rgba(0,0,0,0.05); }

/* Full-link sheet that opens above the collapsed pill on narrow
   screens — same links as .sticky-nav__links, stacked, with generous
   touch targets, so nothing that fits in the desktop pill is ever
   unreachable on mobile. */
.mobile-menu {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 99;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 12px 14px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
}
.mobile-menu a:hover { color: var(--text); background: rgba(0,0,0,0.05); }

.mobile-menu .btn-cta {
  background: var(--text);
  color: var(--bg);
  text-align: center;
  font-weight: 600;
  margin-top: 4px;
}

/* ============================================================
   ANIMATION UTILITIES
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
  .mentor__photo-wrap { display: none; }
  .mentor__stats { flex-direction: column; }
  .sticky-nav { bottom: 12px; }
}

/* ============================================================
   STICKY NAV — PRIORITY OVERFLOW
   The pill keeps Home and the "Get in touch" CTA visible at every
   width (they're small and/or the most important action). The middle
   links drop into the hamburger one at a time, in ascending order of
   importance, only once the pill genuinely runs out of room for them —
   each threshold below is the measured width where that link's own
   text plus the rest of the pill's content would otherwise overflow.
   The overflow sheet (.mobile-menu) always lists all five regardless
   of tier, so nothing shown only in the pill is ever missing from it.
   ============================================================ */
@media (max-width: 660px) {
  .sticky-nav__toggle { display: flex; }
  .sticky-nav__links a:nth-child(5) { display: none; } /* FAQ */
}
@media (max-width: 540px) {
  .sticky-nav__links a:nth-child(4) { display: none; } /* How we work */
}
@media (max-width: 470px) {
  .sticky-nav__links a:nth-child(3) { display: none; } /* Why us */
}
@media (max-width: 390px) {
  .sticky-nav__links a:nth-child(2) { display: none; } /* Services */
}
@media (max-width: 360px) {
  .sticky-nav__links a:nth-child(1) { display: none; } /* Who we help */
}
@media (max-width: 660px) {
  .mobile-menu { bottom: 68px; }
}

/* ============================================================
   LEGAL PAGES (Privacy, Terms, etc.)
   ============================================================ */
.legal-page {
  padding: 160px 24px 200px;
}

.legal-page__inner {
  max-width: 700px;
  margin: 0 auto;
}

.legal-page__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.legal-page__content h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
}

.legal-page__content h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 12px;
}

.legal-page__content p,
.legal-page__content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal-page__content ul,
.legal-page__content ol {
  margin: 12px 0 20px 20px;
}

.legal-page__content a {
  color: var(--text);
  text-decoration: underline;
}