/* ─── tokens ─────────────────────────────────────────────────── */
:root {
  --bg:           #f5f7fb;
  --bg-glow-1:    rgba(109, 92, 255, 0.08);
  --bg-glow-2:    rgba(16, 185, 129, 0.06);
  --text:         #0f1320;
  --muted:        #667085;
  --line:         rgba(15, 19, 32, 0.08);
  --line-strong:  rgba(15, 19, 32, 0.12);
  --surface:      rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --shadow:       0 20px 50px rgba(15, 19, 32, 0.07);
  --shadow-soft:  0 12px 28px rgba(15, 19, 32, 0.05);
  --radius:       30px;
  --radius-md:    24px;
  --radius-sm:    18px;
  --max:          1180px;

  --violet:       #6d5cff;
  --violet-soft:  rgba(109, 92, 255, 0.12);
  --teal:         #0f9f8f;
  --teal-soft:    rgba(15, 159, 143, 0.14);
  --ink-soft:     rgba(15, 19, 32, 0.07);

  --life-overlay: linear-gradient(to bottom, rgba(15,19,32,0) 0%, rgba(15,19,32,0.08) 35%, rgba(15,19,32,0.55) 62%, rgba(15,19,32,0.88) 100%);
  --sauna-bg:     linear-gradient(135deg, #04081A 0%, #141C52 100%);
  --sauna-accent: #EC2FE5;
  --sauna-off-white: #F5F5F8;
  --ig-bg:        linear-gradient(135deg, #705cff 0%, #9c4dff 26%, #ff4f97 58%, #ff9b44 82%, #ffd85f 100%);
  --li-bg:        linear-gradient(135deg, #eef5ff 0%, #dfeaff 100%);
  --tt-bg:        linear-gradient(135deg, #0f1117 0%, #1a1f2b 100%);
  --yt-bg:        linear-gradient(135deg, #fff3f3 0%, #ffe6e6 60%, #ffd8d8 100%);
  --faq-bg:       linear-gradient(135deg, #ffffff 0%, #f5f7ff 100%);
}

/* ─── reset + base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 8%,  var(--bg-glow-1), transparent 30%),
    radial-gradient(circle at 88% 12%, var(--bg-glow-2), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── layout ─────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 28px 80px;
}

/* ─── topbar ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 24px rgba(15, 19, 32, 0.04);
  transition: transform .35s ease-out, background .3s ease, border-color .3s ease, box-shadow .35s ease-out;
}

.icon-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
  box-shadow: 0 12px 26px rgba(15, 19, 32, 0.09);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── hero ───────────────────────────────────────────────────── */
.hero {
  padding-top: 12px;
  margin-bottom: 16px;
}

.hero-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.hero-avatar {
  width: 212px;
  height: 212px;
  flex: 0 0 auto;
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 68px rgba(15, 19, 32, 0.12);
  background: rgba(255, 255, 255, 0.6);
  position: relative;
  cursor: pointer;
  transition: transform .45s ease-out, box-shadow .45s ease-out;
}

.hero-avatar:hover {
  transform: scale(1.025);
  box-shadow: 0 38px 80px rgba(15, 19, 32, 0.18);
}

.hero-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-copy {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.headline {
  margin: 0;
  max-width: 980px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: clamp(2.4rem, 4.0vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.044em;
  font-weight: 320;
  text-wrap: balance;
  animation: fadeUp .72s cubic-bezier(.22, 1, .36, 1) both;
}

.anchor-link {
  text-decoration: none;
  color: inherit;
}

.headline .name  { color: #151a26; font-weight: 560; }
.headline .violet,
.headline .teal,
.headline .ink {
  position: relative;
  display: inline-block;
  padding: 0 .02em;
  font-weight: 500;
}

.headline .violet { color: var(--violet); }
.headline .teal   { color: var(--teal); }
.headline .ink    { color: var(--text); }

.headline .violet::after,
.headline .teal::after,
.headline .ink::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0.06em;
  height: 0.26em;
  border-radius: 999px;
  z-index: -1;
}

.headline .violet::after { background: var(--violet-soft); }
.headline .teal::after   { background: var(--teal-soft); }
.headline .ink::after    { background: var(--ink-soft); }

/* ─── grid ───────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  align-items: stretch;
}

.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.h-sm  { min-height: 228px; }
.h-md  { min-height: 278px; }
.h-lg  { min-height: 336px; }
.h-xl  { min-height: 390px; }
.h-2xl { min-height: 540px; }

/* editorial stagger — micro-rotations only, no Y shifts */
.editorial-grid .card:nth-child(1) { transform: rotate(-0.18deg); }
.editorial-grid .card:nth-child(3) { transform: rotate(0.15deg); }
.editorial-grid .card:nth-child(7) { transform: rotate(-0.2deg); }

/* ─── card base ──────────────────────────────────────────────── */
.card {
  position: relative;
  min-height: 238px;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .45s ease-out,
              box-shadow .45s ease-out,
              border-color .3s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(109, 92, 255, 0.05), transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.card:hover {
  transform: scale(1.012) rotate(0deg);
  box-shadow: 0 28px 64px rgba(15, 19, 32, 0.11);
  border-color: rgba(255, 255, 255, 1);
}

.inner {
  position: relative;
  z-index: 2;
  padding: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ─── card typography ────────────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #80869a;
  display: inline-block;
  flex: 0 0 auto;
}

.card h3 {
  margin: 12px 0 0;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.9vw, 1.82rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.card p {
  margin: 12px 0 0;
  color: #4e5565;
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 38ch;
}

/* ─── image cards ────────────────────────────────────────────── */
.image-card {
  color: white;
}

.image-card::before {
  background: var(--life-overlay);
  z-index: 1;
}

.image-card .kicker,
.image-card p { color: rgba(255, 255, 255, 0.88); }
.image-card .kicker-dot { background: rgba(255, 255, 255, 0.9); }
.image-card h3 { color: white; }

.bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform .7s ease-out;
  will-change: transform;
}

.image-card:hover .bg-media img {
  transform: scale(1.035);
}

/* ─── life / travel card ─────────────────────────────────────── */
.life-card .inner {
  justify-content: flex-end;
}

.life-card .bg-media img {
  object-position: center 55%;
}

.life-card::before {
  background: linear-gradient(to bottom, rgba(15,19,32,0) 0%, rgba(15,19,32,0.14) 32%, rgba(15,19,32,0.68) 60%, rgba(15,19,32,0.93) 100%);
}

/* ─── data / work card ───────────────────────────────────────── */
.data-card {
  background: var(--sauna-bg);
  color: white;
}

.data-card::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 42%);
}

.data-card .kicker,
.data-card p { color: rgba(245, 245, 248, 0.8); }
.data-card .kicker-dot { background: var(--sauna-accent); }
.data-card h3 { color: var(--sauna-off-white); }

.data-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.data-logo {
  display: flex;
  align-items: center;
}

.data-logo img {
  height: 80px;
  width: auto;
  display: block;
  opacity: 0.95;
}

/* ─── instagram / creator card ───────────────────────────────── */
.ig-card {
  background: var(--ig-bg);
  color: white;
}

.ig-card::before {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 42%);
}

.ig-card .kicker,
.ig-card p { color: rgba(255, 255, 255, 0.9); }
.ig-card .kicker-dot { background: white; }
.ig-card h3 { color: white; }

/* ─── personal IG + AI projects: forced taller row ──────────── */
.personal-card,
.podcast-card {
  min-height: 540px;
  height: 540px;
}

/* ─── personal IG card (image) ───────────────────────────────── */
.personal-card .bg-media img {
  object-position: center 30%;
}

.personal-card::before {
  background: linear-gradient(to bottom, rgba(15,19,32,0) 0%, rgba(15,19,32,0.14) 32%, rgba(15,19,32,0.68) 60%, rgba(15,19,32,0.93) 100%);
}

.personal-card .inner {
  justify-content: flex-end;
}

/* ─── podcast / AI card (image) ─────────────────────────────── */
.podcast-card .bg-media img {
  object-position: center 20%;
}

.podcast-card::before {
  background: linear-gradient(to bottom, rgba(15,19,32,0) 0%, rgba(15,19,32,0.14) 32%, rgba(15,19,32,0.68) 60%, rgba(15,19,32,0.93) 100%);
}

.podcast-card .inner {
  justify-content: flex-end;
}

/* ─── linkedin card ──────────────────────────────────────────── */
.linkedin-card { background: var(--li-bg); }

/* ─── tiktok card ────────────────────────────────────────────── */
.tt-card {
  background: var(--tt-bg);
  color: white;
}

.tt-card::before {
  background: radial-gradient(circle at top right, rgba(77, 232, 244, 0.1), transparent 42%);
}

.tt-card .kicker,
.tt-card p { color: rgba(255, 255, 255, 0.82); }
.tt-card .kicker-dot { background: #4de8f4; }
.tt-card h3 { color: white; }

/* ─── youtube card ───────────────────────────────────────────── */
.yt-card { background: var(--yt-bg); }
.yt-card .kicker { color: #c00; }
.yt-card .kicker-dot { background: #ff0302; }

/* ─── retreats bazaar card ───────────────────────────────────── */
.rb-card {
  background: #1a1a14; /* dark fallback while image loads */
}

.rb-card::before {
  background: linear-gradient(to bottom, rgba(15,19,32,0) 0%, rgba(15,19,32,0.14) 32%, rgba(15,19,32,0.68) 60%, rgba(15,19,32,0.93) 100%);
}

.rb-card .kicker,
.rb-card p { color: rgba(255, 255, 255, 0.88); }
.rb-card .kicker-dot { background: rgba(255, 255, 255, 0.9); }
.rb-card h3 { color: white; }
.rb-card .inner { justify-content: flex-end; }

/* ─── faq card ───────────────────────────────────────────────── */
.faq-card {
  background: var(--faq-bg);
  min-height: auto;
}

.faq-list {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-item {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 19, 32, 0.06);
  box-shadow: 0 8px 18px rgba(15, 19, 32, 0.04);
}

.faq-item strong {
  display: block;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.faq-item span {
  display: block;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── section label ──────────────────────────────────────────── */
.section-title {
  margin: 38px 0 16px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── bottom links ───────────────────────────────────────────── */
.bottom-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.bottom-link {
  text-decoration: none;
  color: var(--text);
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 24px rgba(15, 19, 32, 0.04);
  transition: transform .35s ease-out, background .3s ease, box-shadow .35s ease-out, border-color .3s ease;
}

.bottom-link:hover {
  transform: translateY(-1px) scale(1.008);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line-strong);
  box-shadow: 0 16px 32px rgba(15, 19, 32, 0.08);
}

.icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(15, 19, 32, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bottom-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* logo variant for Data Sauna in bottom links */
.icon-wrap--logo {
  background: rgba(15, 19, 32, 0.03);
  overflow: hidden;
  padding: 4px;
}

.bottom-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* avatar variant for profile photos in bottom links */
.icon-wrap--avatar {
  overflow: hidden;
  padding: 0;
  background: transparent;
}

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

.meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.meta strong {
  font-size: 0.97rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.meta span {
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── footer ─────────────────────────────────────────────────── */
.footer {
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ─── card button ─────────────────────────────────────────────── */
.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* default: glass on dark / image backgrounds */
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .2s ease;
}

.card-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  color: white;
}

/* ─── brand icon image system ────────────────────────────────── */
.brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* topbar + bottom links: show brand colors on light glass */
.icon-btn .brand-icon    { width: 20px; height: 20px; }
.icon-wrap .brand-icon   { width: 20px; height: 20px; }

/* card-btn on dark/image cards: invert to white */
.card-btn .brand-icon {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
}

/* card-btn on light cards: natural brand colors */
.card-btn--dark .brand-icon { filter: none; }

/* dark variant — for light-background cards */
.card-btn--dark {
  color: var(--text);
  background: rgba(15, 19, 32, 0.06);
  border-color: rgba(15, 19, 32, 0.12);
  box-shadow: 0 4px 14px rgba(15, 19, 32, 0.05);
}

.card-btn--dark:hover {
  background: rgba(15, 19, 32, 0.1);
  border-color: rgba(15, 19, 32, 0.18);
  box-shadow: 0 8px 22px rgba(15, 19, 32, 0.08);
  color: var(--text);
}

/* data-sauna specific accent */
.data-card .card-btn {
  color: var(--sauna-off-white);
  background: rgba(236, 47, 229, 0.14);
  border-color: rgba(236, 47, 229, 0.3);
}

.data-card .card-btn:hover {
  background: rgba(236, 47, 229, 0.24);
  border-color: rgba(236, 47, 229, 0.5);
  color: white;
}

/* ─── focus-visible (keyboard nav) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.card:focus-visible,
.bottom-link:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ─── animation ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-media img { transition: none; }
  .image-card:hover .bg-media img { transform: none; }
  html { scroll-behavior: auto; }
}

/* ─── responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .span-3,
  .span-4,
  .span-5,
  .span-6,
  .span-8,
  .span-12  { grid-column: span 12; }
  .bottom-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-list     { grid-template-columns: 1fr; }

  /* match life card height to personal/podcast when stacked */
  .life-card { height: 540px; }

  .hero-avatar {
    width: 168px;
    height: 168px;
    border-radius: 30px;
  }

  .headline {
    max-width: 900px;
    font-size: clamp(3rem, 6.4vw, 4.95rem);
  }
}

@media (max-width: 720px) {
  .wrap   { padding: 20px 16px 52px; }
  .topbar { margin-bottom: 16px; }

  /* hero: avatar above headline */
  .hero-row {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .hero-avatar {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    /* disable hover transform on touch */
    transition: none;
  }
  .hero-avatar:hover { transform: none; box-shadow: 0 28px 68px rgba(15,19,32,0.12); }

  .headline {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
    line-height: 1.04;
  }

  /* card titles slightly larger on mobile */
  .card h3 {
    font-size: clamp(1.55rem, 5.5vw, 1.82rem);
    margin-top: 10px;
  }

  .card p { font-size: 0.93rem; }

  /* tighter grid */
  .grid { gap: 14px; margin-top: 36px; }

  .bottom-links { grid-template-columns: 1fr; }

  /* cap tall cards on mobile */
  .h-2xl { min-height: 380px; }
  .personal-card,
  .podcast-card,
  .life-card { height: 380px; min-height: 380px; }

  .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .social-icons { gap: 8px; }

  /* faq full-width on mobile */
  .faq-list { grid-template-columns: 1fr; }

  /* remove editorial offsets on mobile */
  .editorial-grid .card:nth-child(1),
  .editorial-grid .card:nth-child(3),
  .editorial-grid .card:nth-child(7) { transform: none; }

  /* disable parallax on mobile */
  .image-card:hover .bg-media img { transform: none; }
}