@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* High-contrast accessible palette — all text/bg combos meet WCAG AA (4.5:1) */
  --coral: #C44A1E;        /* darkened from D85A30 → passes on white */
  --coral-hover: #A33A12;
  --coral-light: #FDF0EB;
  --ink: #111111;
  --ink-soft: #2E2E2E;
  --muted: #595959;        /* 7:1 on white — WCAG AAA */
  --on-coral: #FFFFFF;     /* white on --coral passes AA */
  --border: rgba(0,0,0,0.14);
  --bg: #FFFFFF;
  --bg-warm: #F7F4F0;
  --bg-card: #FFFFFF;
  --bg-dark: #111111;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --focus-ring: 0 0 0 3px #C44A1E, 0 0 0 5px #fff;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--font-body); }
ul { list-style: none; }

/* ── FOCUS (accessibility) ── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--coral); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); font-weight: 600; z-index: 999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem; height: 70px;
}
.nav-brand { display: flex; align-items: baseline; gap: 10px; }
.nav-logo { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.nav-logo span { color: var(--coral); }
.nav-tagline { font-size: 11px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.nav-links a.active { color: var(--coral); border-bottom-color: var(--coral); }
.nav-cta { background: var(--coral); color: #fff; border: none; padding: 11px 22px; border-radius: 100px; font-size: 14px; font-weight: 600; transition: background 0.2s; letter-spacing: 0.1px; }
.nav-cta:hover { background: var(--coral-hover); }
.nav-burger { display: none; background: none; border: 2px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 18px; color: var(--ink); line-height: 1; }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none; position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 99;
  flex-direction: column; padding: 2rem; gap: 1.25rem;
  border-top: 1px solid var(--border);
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--border); }
.mobile-menu a:hover { color: var(--coral); }
.mobile-cta { display: inline-block; background: var(--coral) !important; color: #fff !important; padding: 14px 28px; border-radius: 100px; font-size: 16px !important; text-align: center; margin-top: 1rem; border: none !important; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-size: 15px; font-weight: 600; transition: all 0.2s; border: 2px solid transparent; cursor: pointer; font-family: var(--font-body); letter-spacing: 0.1px; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-hover); transform: translateY(-2px); }
.btn-secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { border-color: var(--coral); color: var(--coral); }
.btn-white { background: #fff; color: var(--coral); }
.btn-white:hover { background: rgba(255,255,255,0.88); }
.btn-outline-white { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-outline-white:hover { border-color: #fff; }

/* ── HERO ── */
.hero {
  min-height: 90vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; padding: 5rem 2.5rem; gap: 5rem;
  position: relative; overflow: hidden;
}
.hero-bg-shape {
  position: absolute; top: -120px; right: -120px;
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(196,74,30,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 1.25rem; }
.hero-label::before { content: ''; width: 28px; height: 2px; background: var(--coral); flex-shrink: 0; }
.hero h1 { font-family: var(--font-display); font-size: clamp(42px, 5vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -2px; margin-bottom: 1.25rem; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--coral); }
.hero-desc { font-size: 18px; color: var(--muted); line-height: 1.75; max-width: 460px; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero illustration panel */
.hero-visual { display: flex; flex-direction: column; gap: 16px; }
.hero-illustration {
  width: 100%; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-warm);
}
.hero-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.hc-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; font-weight: 600; }
.hc-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; color: var(--ink); }
.hc-meta { font-size: 12px; color: var(--muted); }
.hc-play-thumb { height: 72px; background: var(--bg-dark); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.play-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; }
.play-circle svg { width: 11px; fill: #fff; margin-left: 2px; }

/* ── STATS ── */
.stats { background: var(--bg-dark); display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 2.5rem 2rem; border-right: 1px solid rgba(255,255,255,0.08); }
.stat:last-child { border-right: none; }
.stat-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--coral); line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 14px; color: rgba(255,255,255,0.65); }

/* ── SECTIONS ── */
.section { padding: 5rem 2.5rem; }
.section-alt { background: var(--bg-warm); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.5rem; }
.section-head h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); }
.view-all { font-size: 14px; color: var(--coral); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.view-all:hover { color: var(--coral-hover); }

/* ── ARTICLE CARDS ── */
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.09); }
.article-thumb { height: 180px; display: flex; align-items: center; justify-content: center; }
.thumb-orange { background: #FDEEE8; }
.thumb-blue   { background: #E8F0FD; }
.thumb-green  { background: #E8F5E9; }
.thumb-purple { background: #EDE8FD; }
.thumb-teal   { background: #E8F5F0; }
.thumb-pink   { background: #FDE8F0; }
.article-thumb svg { width: 72px; height: 72px; }
.article-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.article-tag { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 8px; }
.article-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 12px; flex: 1; color: var(--ink); }
.article-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: auto; }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.av-coral  { background: #FDEEE8; color: #7A2A08; }
.av-blue   { background: #E8F0FD; color: #0D3A8A; }
.av-green  { background: #E8F5E9; color: #1B5E20; }
.av-purple { background: #EDE8FD; color: #3A1D8A; }
.av-teal   { background: #E8F5F0; color: #0A5540; }
.av-pink   { background: #FDE8F0; color: #8A0D3A; }
.article-byline { font-size: 12px; color: var(--muted); }
.article-byline strong { color: var(--ink-soft); font-weight: 600; font-size: 13px; display: block; }

/* ── VIDEO CARDS ── */
.videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s; }
.video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.09); }
.video-thumb { height: 170px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; position: relative; }
.play-btn-lg { width: 54px; height: 54px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
.video-card:hover .play-btn-lg { transform: scale(1.1); background: var(--coral-hover); }
.play-btn-lg svg { width: 18px; fill: #fff; margin-left: 3px; }
.video-body { padding: 1rem 1.25rem 1.25rem; }
.video-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; color: var(--ink); }
.video-meta { font-size: 12px; color: var(--muted); }

/* ── CREATOR CARDS ── */
.creators-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.creator-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s, border-color 0.2s; }
.creator-card:hover { transform: translateY(-4px); border-color: var(--coral); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.creator-banner { height: 100px; display: flex; align-items: flex-end; padding: 0 1.5rem 0; }
.banner-coral  { background: linear-gradient(135deg, #C44A1E 0%, #E8693A 100%); }
.banner-dark   { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.banner-teal   { background: linear-gradient(135deg, #0A5540 0%, #0F8060 100%); }
.creator-avatar-lg {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  border: 3px solid #fff; transform: translateY(36px);
  flex-shrink: 0;
}
.creator-body { padding: 2.5rem 1.5rem 1.5rem; }
.creator-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.creator-role { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.creator-location { font-size: 12px; color: var(--coral); font-weight: 500; margin-bottom: 12px; }
.creator-bio { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.creator-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.creator-link:hover { color: var(--coral-hover); }
.creator-link svg { width: 14px; height: 14px; }

/* ── PODCAST ── */
.podcast-list { display: flex; flex-direction: column; gap: 14px; }
.podcast-ep { display: flex; align-items: center; gap: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; transition: border-color 0.2s, transform 0.2s; }
.podcast-ep:hover { border-color: var(--coral); transform: translateX(4px); }
.ep-cover { width: 56px; height: 56px; border-radius: 10px; background: var(--bg-dark); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ep-num-badge { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--coral); }
.ep-info { flex: 1; min-width: 0; }
.ep-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.ep-meta { font-size: 13px; color: var(--muted); }
.ep-play { width: 44px; height: 44px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.ep-play:hover { background: var(--coral-hover); }
.ep-play svg { width: 14px; fill: #fff; margin-left: 3px; }

/* ── CTA BAND ── */
.cta-band { background: var(--coral); padding: 5rem 2.5rem; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: '360'; position: absolute; right: -10px; top: -30px; font-family: var(--font-display); font-size: 240px; font-weight: 900; color: rgba(255,255,255,0.07); line-height: 1; pointer-events: none; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 1rem; position: relative; }
.cta-band p { font-size: 17px; color: rgba(255,255,255,0.88); margin-bottom: 2rem; position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── PAGE HERO ── */
.page-hero { padding: 5rem 2.5rem 4rem; position: relative; overflow: hidden; }
.page-hero-warm { background: var(--bg-warm); border-bottom: 1px solid var(--border); }
.page-hero-dark { background: var(--bg-dark); }
.page-hero-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 1rem; display: block; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 54px); font-weight: 800; letter-spacing: -1.5px; margin-bottom: 1rem; color: var(--ink); }
.page-hero-dark h1 { color: #fff; }
.page-hero p { font-size: 18px; color: var(--muted); max-width: 520px; line-height: 1.7; }
.page-hero-dark p { color: rgba(255,255,255,0.7); }
.page-hero-illustration { position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); opacity: 0.12; pointer-events: none; }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 70px; z-index: 50; }
.filter-btn { padding: 9px 20px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--bg-card); font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: all 0.2s; cursor: pointer; font-family: var(--font-body); }
.filter-btn:hover { border-color: var(--coral); color: var(--coral); }
.filter-btn.active { background: var(--coral); color: #fff; border-color: var(--coral); }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.about-text h2 { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 1.25rem; color: var(--ink); }
.about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 16px; line-height: 1.75; }
.about-values { display: flex; flex-direction: column; gap: 22px; }
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--coral-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.value-icon svg { width: 22px; height: 22px; color: var(--coral); }
.value-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.value-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ── FORM ── */
.submit-wrap { max-width: 680px; margin: 0 auto; }
.submit-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--bg); transition: border-color 0.2s; outline: none; appearance: none; -webkit-appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(196,74,30,0.12); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit { width: 100%; padding: 16px; background: var(--coral); color: #fff; border: none; border-radius: 100px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: var(--font-body); }
.form-submit:hover { background: var(--coral-hover); }
.form-note { text-align: center; margin-top: 1.5rem; font-size: 14px; color: var(--muted); }
.form-note a { color: var(--coral); text-decoration: underline; }

/* ── FOOTER ── */
.footer { background: var(--bg-dark); padding: 4rem 2.5rem 2rem; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-logo { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 12px; display: block; }
.footer-logo span { color: var(--coral); }
.footer-brand p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 260px; }
.footer-social { display: flex; gap: 12px; margin-top: 1.5rem; }
.social-icon { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.social-icon:hover { border-color: var(--coral); color: var(--coral); }
.social-icon svg { width: 17px; height: 17px; }
.footer-col h4 { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 1.1rem; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color 0.2s; }
.footer-col a:hover { color: var(--coral); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: var(--coral); text-decoration: underline; }

/* ── HERO IMAGE ── */
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.page-hero-img-wrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.page-hero-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.38);
}
.page-hero-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(196,74,30,0.25) 100%);
}
.page-hero.has-image {
  position: relative; color: #fff;
}
.page-hero.has-image .page-hero-label { color: #ffb89a; }
.page-hero.has-image h1 { color: #fff; }
.page-hero.has-image p { color: rgba(255,255,255,0.82); }
.page-hero-content { position: relative; z-index: 1; }

/* ── COMMUNITY ── */
.community-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; padding: 3rem 2.5rem; max-width: 1200px; margin: 0 auto; }
.community-main { display: flex; flex-direction: column; gap: 1.5rem; }
.community-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.thread-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; transition: border-color 0.2s, transform 0.2s; }
.thread-card:hover { border-color: var(--coral); transform: translateX(3px); }
.thread-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.thread-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.thread-meta { flex: 1; }
.thread-author { font-size: 13px; font-weight: 600; color: var(--ink); }
.thread-time { font-size: 12px; color: var(--muted); }
.thread-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.4; }
.thread-excerpt { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.thread-footer { display: flex; align-items: center; gap: 16px; }
.thread-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--coral); font-weight: 600; background: var(--coral-light); padding: 3px 10px; border-radius: 100px; }
.thread-stat { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.thread-stat svg { width: 13px; height: 13px; }

.new-thread-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: var(--coral); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: background 0.2s; }
.new-thread-btn:hover { background: var(--coral-hover); }

.sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.sidebar-card h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 1rem; color: var(--ink); }
.online-creator { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0; box-shadow: 0 0 0 2px #dcfce7; }
.online-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.online-role { font-size: 12px; color: var(--muted); }
.dm-btn { font-size: 12px; color: var(--coral); font-weight: 600; border: 1px solid var(--coral); border-radius: 100px; padding: 4px 12px; background: transparent; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; white-space: nowrap; margin-left: auto; }
.dm-btn:hover { background: var(--coral); color: #fff; }

.community-cats { display: flex; flex-direction: column; gap: 6px; }
.cat-btn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; font-size: 13px; color: var(--ink-soft); cursor: pointer; font-family: var(--font-body); transition: all 0.2s; text-align: left; }
.cat-btn:hover, .cat-btn.active { background: var(--coral-light); color: var(--coral); border-color: rgba(196,74,30,0.15); }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── FULL CREATOR PROFILE ── */
.profile-hero { background: var(--bg-dark); padding: 4rem 2.5rem 0; position: relative; overflow: hidden; }
.profile-hero-bg { position: absolute; inset: 0; opacity: 0.15; background-size: cover; background-position: center; }
.profile-hero-content { position: relative; z-index: 1; max-width: 900px; }
.profile-avatar-wrap { display: flex; align-items: flex-end; gap: 2rem; margin-bottom: 0; }
.profile-avatar-lg { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 36px; font-weight: 800; flex-shrink: 0; transform: translateY(40px); }
.profile-name-block { padding-bottom: 1rem; color: #fff; }
.profile-name { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; }
.profile-title { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.profile-location { font-size: 13px; color: rgba(255,255,255,0.5); }

.profile-body { max-width: 900px; margin: 0 auto; padding: 3rem 2.5rem; }
.profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
.profile-main h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 1rem; color: var(--ink); }
.profile-main p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 1rem; }
.profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.profile-link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--ink); transition: all 0.2s; }
.profile-link-btn:hover { border-color: var(--coral); color: var(--coral); }
.profile-link-btn svg { width: 16px; height: 16px; }

.profile-sidebar-card { background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; }
.profile-sidebar-card h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.profile-stat-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.profile-stat-label { font-size: 13px; color: var(--muted); }
.profile-stat-val { font-size: 13px; font-weight: 600; color: var(--ink); }
.hire-btn { width: 100%; padding: 14px; background: var(--coral); color: #fff; border: none; border-radius: 100px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: background 0.2s; }
.hire-btn:hover { background: var(--coral-hover); }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1rem; }
.work-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.work-thumb { height: 90px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; }
.work-thumb svg { width: 28px; height: 28px; }
.work-label { padding: 8px 10px; font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.3; }

/* ── ARTICLE FULL PAGE ── */
.article-hero { padding: 5rem 2.5rem 4rem; position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.article-hero-bg { position: absolute; inset: 0; z-index: 0; }
.article-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.32); }
.article-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); }
.article-hero-content { position: relative; z-index: 1; max-width: 720px; color: #fff; }
.article-hero-tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #ffb89a; font-weight: 600; margin-bottom: 1rem; display: block; }
.article-hero-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin-bottom: 1.25rem; }
.article-hero-byline { display: flex; align-items: center; gap: 12px; }
.article-hero-byline .avatar-sm { border: 2px solid rgba(255,255,255,0.4); }
.article-hero-meta { font-size: 14px; color: rgba(255,255,255,0.75); }
.article-hero-meta strong { color: #fff; }

.article-content { max-width: 720px; margin: 0 auto; padding: 3.5rem 2.5rem; }
.article-content h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 2rem 0 1rem; color: var(--ink); }
.article-content p { font-size: 17px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 1.5rem; }
.article-content blockquote { border-left: 4px solid var(--coral); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--coral-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.article-content blockquote p { font-size: 18px; font-style: italic; color: var(--ink); margin: 0; line-height: 1.7; }
.article-footer { max-width: 720px; margin: 0 auto; padding: 0 2.5rem 4rem; border-top: 1px solid var(--border); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.article-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--coral); }
.article-back:hover { text-decoration: underline; }

/* ── UTILS ── */
.text-center { text-align: center; }
.mt-3 { margin-top: 3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 3.5rem 1.5rem; gap: 2.5rem; }
  .hero-visual { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .articles-grid, .videos-grid { grid-template-columns: 1fr 1fr; }
  .creators-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 1.5rem; }
  .page-hero { padding: 3rem 1.5rem 2.5rem; }
  .filter-bar { padding: 1rem 1.5rem; top: 70px; }
  .cta-band { padding: 4rem 1.5rem; }
  .footer { padding: 3rem 1.5rem 1.5rem; }
  .page-hero-illustration { display: none; }
}
@media (max-width: 600px) {
  .nav { padding: 0 1.25rem; }
  .articles-grid, .videos-grid, .creators-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .podcast-ep { flex-wrap: wrap; }
  .hero h1 { letter-spacing: -1px; }
}

/* ── NEW LAYOUT RESPONSIVE ── */
@media (max-width: 960px) {
  .community-layout { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .community-sidebar { order: -1; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-hero { padding: 3rem 1.5rem 0; }
  .profile-body { padding: 2rem 1.5rem; }
  .profile-avatar-lg { width: 90px; height: 90px; font-size: 26px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .article-hero { padding: 3rem 1.5rem 3rem; min-height: 320px; }
  .article-content { padding: 2.5rem 1.5rem; }
  .article-footer { padding: 0 1.5rem 3rem; padding-top: 1.5rem; }
}

/* ══════════════════════════════════════════
   V4 ADDITIONS
   ══════════════════════════════════════════ */

/* ── HERO IMAGE ── */
.hero-img-wrap {
  position: relative; border-radius: var(--radius);
  overflow: hidden; height: 420px;
}
.hero-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,74,30,0.18) 0%, transparent 60%);
}
.page-hero-img {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.page-hero-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(247,244,240,0.97) 45%, rgba(247,244,240,0.5) 100%);
}
.page-hero { position: relative; }
.page-hero .page-hero-label,
.page-hero h1,
.page-hero p { position: relative; z-index: 1; }

/* ── FULL ARTICLE PAGE ── */
.article-hero {
  position: relative; height: 420px; overflow: hidden;
  background: var(--bg-dark);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.article-hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 3rem 2.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%);
}
.article-hero-tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 12px; }
.article-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; }
.article-hero-meta { font-size: 14px; color: rgba(255,255,255,0.75); }

.article-content-wrap { max-width: 720px; margin: 0 auto; padding: 4rem 2.5rem; }
.article-content-wrap h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 2rem 0 1rem; color: var(--ink); }
.article-content-wrap p { font-size: 17px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 1.25rem; }
.article-content-wrap blockquote {
  border-left: 4px solid var(--coral); margin: 2rem 0;
  padding: 1rem 1.5rem; background: var(--coral-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-content-wrap blockquote p { font-size: 18px; font-style: italic; color: var(--coral-dark, #7A2A08); margin: 0; font-weight: 500; }
.article-author-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-warm); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin-bottom: 3rem;
  border: 1px solid var(--border);
}
.author-avatar-lg {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.author-info strong { font-family: var(--font-display); font-size: 15px; font-weight: 700; display: block; margin-bottom: 2px; }
.author-info span { font-size: 13px; color: var(--muted); }

/* ── FULL CREATOR PROFILE PAGE ── */
.profile-header {
  position: relative; background: var(--bg-dark);
  overflow: hidden;
}
.profile-header-img {
  position: absolute; inset: 0; z-index: 0;
}
.profile-header-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.profile-header-content {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 2rem;
  padding: 5rem 2.5rem 3rem;
}
.profile-avatar {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  border: 4px solid rgba(255,255,255,0.2); flex-shrink: 0;
}
.profile-header-info { flex: 1; }
.profile-name { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 6px; }
.profile-role { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.profile-location { font-size: 14px; color: var(--coral); font-weight: 500; }
.profile-actions { display: flex; gap: 12px; margin-top: 1.5rem; flex-wrap: wrap; }
.profile-body { max-width: 960px; margin: 0 auto; padding: 3rem 2.5rem; }
.profile-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
.profile-section { margin-bottom: 3rem; }
.profile-section h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: 10px; border-bottom: 2px solid var(--coral-light); color: var(--ink); }
.profile-bio { font-size: 16px; color: var(--muted); line-height: 1.85; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.work-card { background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.work-thumb { height: 110px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; }
.work-info { padding: 10px 12px; }
.work-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 3px; color: var(--ink); }
.work-meta { font-size: 11px; color: var(--muted); }
.profile-sidebar { position: sticky; top: 90px; }
.sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.sidebar-card h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 1rem; color: var(--ink); }
.contact-btn { display: block; width: 100%; text-align: center; background: var(--coral); color: #fff; padding: 13px; border-radius: 100px; font-size: 14px; font-weight: 600; margin-bottom: 10px; transition: background 0.2s; }
.contact-btn:hover { background: var(--coral-hover); }
.share-btn { display: block; width: 100%; text-align: center; background: transparent; border: 1.5px solid var(--border); color: var(--ink); padding: 11px; border-radius: 100px; font-size: 14px; font-weight: 500; transition: border-color 0.2s; }
.share-btn:hover { border-color: var(--coral); color: var(--coral); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--coral-light); color: var(--coral); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 100px; }
.social-links-list { display: flex; flex-direction: column; gap: 10px; }
.social-link-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--border); transition: color 0.2s; }
.social-link-item:last-child { border-bottom: none; }
.social-link-item:hover { color: var(--coral); }
.social-link-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--coral); }

/* ── COMMUNITY AREA ── */
.community-hero {
  background: var(--bg-dark); padding: 5rem 2.5rem; position: relative; overflow: hidden;
}
.community-hero::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(196,74,30,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.community-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 4vw, 54px); font-weight: 800; color: #fff; letter-spacing: -1.5px; margin-bottom: 1rem; position: relative; }
.community-hero h1 span { color: var(--coral); }
.community-hero p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 540px; position: relative; }
.community-hero-actions { display: flex; gap: 14px; margin-top: 2rem; flex-wrap: wrap; position: relative; }
.community-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; padding: 2.5rem; max-width: 1200px; margin: 0 auto; }
.community-sidebar { position: sticky; top: 90px; align-self: start; }
.community-nav { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.community-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--ink-soft); border-bottom: 1px solid var(--border); transition: background 0.2s, color 0.2s; cursor: pointer; }
.community-nav-item:last-child { border-bottom: none; }
.community-nav-item:hover, .community-nav-item.active { background: var(--coral-light); color: var(--coral); }
.community-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.community-nav-badge { margin-left: auto; background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
.online-creators { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.online-creators h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.online-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.online-name { font-size: 13px; font-weight: 500; }
.online-role { font-size: 11px; color: var(--muted); }

.community-main { min-height: 600px; }
.community-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.community-tab { padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.2s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-body); }
.community-tab.active { color: var(--coral); border-bottom-color: var(--coral); }
.community-tab:hover { color: var(--ink); }

.new-post-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; display: flex; gap: 12px; align-items: flex-start; }
.new-post-input { flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: 14px; resize: none; height: 60px; transition: border-color 0.2s; outline: none; color: var(--ink); background: var(--bg); }
.new-post-input:focus { border-color: var(--coral); }
.post-btn { background: var(--coral); color: #fff; border: none; padding: 10px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: var(--font-body); align-self: flex-end; }
.post-btn:hover { background: var(--coral-hover); }

.thread-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 14px; transition: border-color 0.2s; }
.thread-card:hover { border-color: var(--coral); }
.thread-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.thread-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.thread-meta { flex: 1; }
.thread-author { font-size: 14px; font-weight: 600; color: var(--ink); }
.thread-time { font-size: 12px; color: var(--muted); }
.thread-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; background: var(--coral-light); color: var(--coral); padding: 2px 8px; border-radius: 100px; margin-left: 8px; }
.thread-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; cursor: pointer; }
.thread-title:hover { color: var(--coral); }
.thread-body { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.thread-footer { display: flex; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.thread-action { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; transition: color 0.2s; background: none; border: none; font-family: var(--font-body); padding: 0; }
.thread-action:hover { color: var(--coral); }
.thread-action svg { width: 14px; height: 14px; }
.thread-tag { font-size: 11px; font-weight: 500; color: var(--coral); background: var(--coral-light); padding: 3px 10px; border-radius: 100px; margin-left: auto; }

.dm-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dm-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.dm-header h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.dm-list { }
.dm-item { display: flex; align-items: center; gap: 12px; padding: 14px 1.5rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.dm-item:hover { background: var(--bg-warm); }
.dm-item:last-child { border-bottom: none; }
.dm-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.dm-info { flex: 1; min-width: 0; }
.dm-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.dm-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.dm-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }

@media (max-width: 960px) {
  .community-layout { grid-template-columns: 1fr; padding: 1.5rem; }
  .community-sidebar { position: static; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-sidebar { position: static; }
  .profile-header-content { flex-direction: column; align-items: flex-start; padding: 3rem 1.5rem 2rem; }
  .work-grid { grid-template-columns: 1fr; }
  .article-content-wrap { padding: 2rem 1.5rem; }
  .article-hero { height: 300px; }
  .article-hero-content { padding: 2rem 1.5rem; }
  .hero-img-wrap { height: 280px; }
}

/* ── REAL PHOTO AVATARS ── */
.avatar-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 50%;
  display: block;
}
.profile-avatar-lg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 50%;
}
.creator-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 50%;
}
.creator-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.55;
}
.creator-banner { position: relative; overflow: hidden; }


/* ── V6 UPDATES ── */

/* 1. Tagline under logo */
.nav-brand {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  line-height: 1.2;
}
.nav-tagline {
  font-size: 10px;
  letter-spacing: 1.2px;
  margin-top: 1px;
}

/* 2. LinkedIn/Facebook style profile — cover fills banner, avatar overlaps bottom */
.profile-hero {
  padding-bottom: 0 !important;
}
.profile-hero-inner {
  position: relative;
}
.profile-cover-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.profile-avatar-overlap {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 0 2.5rem;
  margin-top: -52px;
  margin-bottom: 0;
  z-index: 2;
}
.profile-avatar-overlap .profile-avatar-lg {
  transform: none;
  border: 4px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.profile-name-below {
  padding-bottom: 0.75rem;
  color: var(--ink);
}
.profile-name-below .profile-name { color: var(--ink); }
.profile-name-below .profile-title { color: var(--muted); font-size:14px; }
.profile-name-below .profile-location { color: var(--coral); }

/* Creator card — LinkedIn style */
.creator-card-v6 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.creator-card-v6:hover { transform: translateY(-4px); border-color: var(--coral); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.creator-cover {
  width: 100%; height: 110px;
  object-fit: cover; object-position: center;
  display: block;
}
.creator-avatar-overlap {
  display: flex;
  align-items: flex-end;
  padding: 0 1.25rem;
  margin-top: -36px;
  margin-bottom: 0.75rem;
}
.creator-avatar-overlap .creator-avatar-lg {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
}
.creator-card-v6-body { padding: 0 1.25rem 1.5rem; }
.creator-card-v6 .creator-name { font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:3px; color:var(--ink); }
.creator-card-v6 .creator-role { font-size:13px; color:var(--muted); margin-bottom:3px; }
.creator-card-v6 .creator-location { font-size:12px; color:var(--coral); font-weight:500; margin-bottom:12px; }
.creator-card-v6 .creator-bio { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.creator-card-v6 .creator-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--coral); text-decoration:underline; text-underline-offset:3px; margin-bottom:6px; }
.creator-card-v6 .creator-link:hover { color:var(--coral-hover); }

/* 3. Video cards with real photo thumbnails */
.video-thumb-img {
  width: 100%; height: 170px;
  object-fit: cover; object-position: center top;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.3s;
}
.video-card:hover .video-thumb-img { filter: brightness(0.5); }
.video-thumb {
  position: relative;
}
.video-thumb-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* 4. Community — real photo avatars for creators, generic SVG for others */
.community-avatar-img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block; flex-shrink: 0;
}

/* 5. Bold hero landing page */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,74,30,0.1); border: 1px solid rgba(196,74,30,0.25);
  color: var(--coral); padding: 6px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.hero-stat-pills {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2rem;
}
.hero-stat-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-warm); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 14px; font-size: 13px;
}
.hero-stat-pill strong { font-weight: 700; color: var(--ink); }
.hero-stat-pill span { color: var(--muted); }

/* Advertise page */
.advert-hero { background: var(--bg-dark); padding: 5rem 2.5rem; position: relative; overflow: hidden; }
.advert-hero h1 { font-family:var(--font-display); font-size:clamp(36px,4vw,56px); font-weight:800; color:#fff; letter-spacing:-1.5px; margin-bottom:1rem; }
.advert-hero p { font-size:18px; color:rgba(255,255,255,0.72); max-width:540px; }
.advert-hero::before { content:'360'; position:absolute; right:-20px; top:-40px; font-family:var(--font-display); font-size:260px; font-weight:900; color:rgba(255,255,255,0.04); line-height:1; pointer-events:none; }

.reach-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.reach-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; text-align:center; }
.reach-card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.reach-card-icon svg { width:24px; height:24px; }
.reach-num { font-family:var(--font-display); font-size:36px; font-weight:800; color:var(--ink); line-height:1; margin-bottom:4px; }
.reach-label { font-size:13px; color:var(--muted); }

.creator-reach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.creator-reach-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.creator-reach-head { display:flex; align-items:center; gap:12px; padding:1.25rem; border-bottom:1px solid var(--border); }
.creator-reach-head img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center top; }
.creator-reach-name { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); }
.creator-reach-role { font-size:12px; color:var(--muted); }
.creator-reach-stats { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.creator-reach-stat { padding:1rem 1.25rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.creator-reach-stat:nth-child(even) { border-right:none; }
.creator-reach-stat:last-child, .creator-reach-stat:nth-last-child(2):nth-child(odd) { border-bottom:none; }
.creator-reach-stat-num { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--coral); }
.creator-reach-stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; margin-top:2px; }

.advert-package { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.advert-package h3 { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:4px; }
.advert-package p { font-size:14px; color:var(--muted); line-height:1.6; max-width:480px; }
.advert-package-cta { flex-shrink:0; }

@media (max-width:960px) {
  .reach-grid { grid-template-columns:1fr 1fr; }
  .creator-reach-grid { grid-template-columns:1fr; }
  .profile-avatar-overlap { padding:0 1.5rem; }
  .profile-cover-img { height:160px; }
}
@media (max-width:600px) {
  .reach-grid { grid-template-columns:1fr 1fr; }
  .hero-stat-pills { gap:8px; }
}

/* ══════════════════════════════════════
   V7 FIXES
   ══════════════════════════════════════ */

/* ── SLIDESHOW HERO ── */
.hero-v7 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #111;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(196,74,30,0.15) 100%
  );
}
.hero-v7-content {
  position: relative; z-index: 2;
  padding: 7rem 3.5rem 5rem;
  max-width: 720px;
  color: #fff;
}
.hero-v7-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196,74,30,0.2);
  border: 1px solid rgba(196,74,30,0.4);
  color: #ffb89a; padding: 6px 16px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero-v7-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); flex-shrink: 0;
}
.hero-v7 h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 800; line-height: 1.03;
  letter-spacing: -2px; margin-bottom: 1.25rem;
  color: #fff;
}
.hero-v7 h1 em { font-style: normal; color: var(--coral); }
.hero-v7-desc {
  font-size: 18px; color: rgba(255,255,255,0.78);
  line-height: 1.75; max-width: 520px; margin-bottom: 2rem;
}
.hero-v7-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-v7-stats {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.hero-v7-stat {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--coral);
  padding-left: 12px;
}
.hero-v7-stat-num {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 800; color: #fff; line-height: 1;
}
.hero-v7-stat-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* Slide indicators */
.hero-slide-dots {
  position: absolute; bottom: 2rem; left: 3.5rem;
  display: flex; gap: 8px; z-index: 3;
}
.hero-slide-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.3); border: none; cursor: pointer;
  transition: background 0.3s, transform 0.3s; padding: 0;
}
.hero-slide-dot.active {
  background: var(--coral); transform: scale(1.3);
}

/* Creator strip at bottom of hero */
.hero-creator-strip {
  position: absolute; bottom: 0; right: 0;
  display: flex; gap: 0; z-index: 3;
}
.hero-creator-chip {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-left: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: background 0.2s;
}
.hero-creator-chip:hover { background: rgba(196,74,30,0.4); }
.hero-creator-chip img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid rgba(255,255,255,0.4); flex-shrink: 0;
}
.hero-creator-chip-name { font-size: 13px; font-weight: 600; color: #fff; }
.hero-creator-chip-role { font-size: 11px; color: rgba(255,255,255,0.55); }

/* ── MOBILE GLOBAL FIX ── */
@media (max-width: 960px) {
  /* Nav */
  .nav { padding: 0 1.25rem; height: 60px; }
  .nav-logo { font-size: 18px; }
  .nav-tagline { font-size: 9px; }

  /* Hero slideshow */
  .hero-v7-content { padding: 5rem 1.5rem 6rem; max-width: 100%; }
  .hero-v7 h1 { font-size: clamp(36px, 9vw, 54px); letter-spacing: -1px; }
  .hero-v7-desc { font-size: 16px; }
  .hero-v7-stats { gap: 1rem; }
  .hero-slide-dots { left: 1.5rem; bottom: 7rem; }
  .hero-creator-strip { display: none; }

  /* Stats bar */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1.5rem 1.25rem; }
  .stat-num { font-size: 30px; }

  /* Sections */
  .section { padding: 2.5rem 1.25rem; }
  .section-alt { padding: 2.5rem 1.25rem; }
  .section-head h2 { font-size: 22px; }

  /* Grids — force single column on mobile */
  .articles-grid { grid-template-columns: 1fr; gap: 16px; }
  .videos-grid { grid-template-columns: 1fr; gap: 16px; }
  .creators-grid { grid-template-columns: 1fr; gap: 16px; }
  .reach-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .creator-reach-grid { grid-template-columns: 1fr; gap: 16px; }
  .community-layout { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; gap: 1.5rem; }
  .profile-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Creator cards v6 */
  .creator-card-v6 { max-width: 100%; }
  .creator-cover { height: 90px; }
  .creator-avatar-overlap { margin-top: -30px; }
  .creator-avatar-overlap .creator-avatar-lg { width: 60px; height: 60px; font-size: 16px; }

  /* Profile pages */
  .profile-cover-img { height: 140px; }
  .profile-avatar-overlap { padding: 0 1.25rem; margin-top: -44px; }
  .profile-avatar-lg { width: 88px !important; height: 88px !important; font-size: 24px !important; }
  .profile-name-below .profile-name { font-size: 22px; }
  .profile-body { padding: 2rem 1.25rem; }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Article pages */
  .article-hero { min-height: 280px; padding: 2.5rem 1.25rem 2rem; }
  .article-hero-title { font-size: clamp(22px, 6vw, 34px); }
  .article-content { padding: 2rem 1.25rem; }
  .article-footer { padding: 1rem 1.25rem 2.5rem; flex-direction: column; align-items: flex-start; }

  /* Podcast eps */
  .podcast-ep { padding: 1rem 1.1rem; gap: 12px; }
  .ep-title { font-size: 14px; }

  /* Community */
  .thread-card { padding: 1rem 1.1rem; }
  .sidebar-card { padding: 1rem; }

  /* Advertise */
  .advert-hero { padding: 3rem 1.25rem; }
  .advert-package { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: 3rem 1.25rem; }
  .cta-actions { flex-direction: column; align-items: center; }
  .btn { width: 100%; justify-content: center; }

  /* Page heroes */
  .page-hero { padding: 3rem 1.25rem 2.5rem !important; }
  .filter-bar { padding: 0.75rem 1.25rem; top: 60px; gap: 8px; }
  .filter-btn { padding: 6px 14px; font-size: 12px; }
}

@media (max-width: 480px) {
  .hero-v7 h1 { font-size: 36px; letter-spacing: -0.5px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-social { margin-top: 1rem; }
  .reach-grid { grid-template-columns: 1fr 1fr; }
  .reach-num { font-size: 28px; }
  .hero-v7-stats { gap: 1rem; }
  .hero-v7-stat-num { font-size: 18px; }
  .profile-avatar-overlap { flex-direction: column; align-items: flex-start; margin-top: -44px; }
  .profile-name-below { padding-bottom: 0.5rem; }
  .nav { height: 56px; }
  .mobile-menu { top: 56px; }
  .filter-bar { top: 56px; }
}

/* ══════════════════════════════════════
   V8 FIXES
   ══════════════════════════════════════ */

/* FIX 1 — Creator card name cutoff: push name clear of avatar */
.creator-card-v6-body { padding: 0.5rem 1.25rem 1.5rem; }
.creator-card-v6 .creator-name { font-size: 16px; font-weight: 700; margin-bottom: 3px; }

/* FIX 2 — LinkedIn profile hero: match reference exactly */
.profile-hero-inner { background: var(--bg-dark); }
.profile-cover-img {
  width: 100%; height: 200px;
  object-fit: cover; object-position: center;
  display: block;
}
.profile-avatar-overlap {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 2rem;
  margin-top: -52px;
  padding-bottom: 1rem;
  background: #fff;
}
.profile-avatar-overlap .profile-avatar-lg {
  width: 120px !important; height: 120px !important;
  border-radius: 50% !important;
  border: 4px solid #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  overflow: hidden !important;
  flex-shrink: 0;
  transform: none !important;
  background: #eee;
}
.profile-avatar-overlap .profile-avatar-lg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 50%; display: block;
}
.profile-name-below {
  padding-bottom: 0.5rem;
  padding-top: 3rem; /* push name below avatar overlap */
  color: var(--ink);
}
.profile-name-below .profile-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.profile-name-below .profile-title { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.profile-name-below .profile-location { font-size: 13px; color: var(--coral); }
.profile-body { background: #fff; max-width: 100%; margin: 0; padding: 2rem 2rem 3rem; }
.profile-grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }

/* FIX 3 — Article hero: fix background image rendering */
.article-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.article-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.3);
}
.article-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
}
.article-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2.5rem 3rem;
  color: #fff;
  text-align: center;
}
.article-hero-tag {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #ffb89a; font-weight: 600; margin-bottom: 1rem;
  display: block; text-align: center;
}
.article-hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800; letter-spacing: -1px;
  line-height: 1.1; margin-bottom: 1.5rem;
  text-align: center;
}
.article-hero-byline {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.article-hero-meta { font-size: 14px; color: rgba(255,255,255,0.75); }
.article-hero-meta strong { color: #fff; }

/* FIX 4 — Mobile creator cards: true single column */
@media (max-width: 960px) {
  /* Force creators grid single column */
  .creators-grid,
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Profile avatar on mobile */
  .profile-avatar-overlap {
    margin-top: -40px;
    padding: 0 1.25rem 0.75rem;
  }
  .profile-avatar-overlap .profile-avatar-lg {
    width: 88px !important; height: 88px !important;
  }
  .profile-name-below { padding-top: 2.5rem; }
  .profile-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .profile-body { padding: 1.5rem 1.25rem 2rem; }

  /* Article hero mobile */
  .article-hero { min-height: 300px; }
  .article-hero-content { padding: 3rem 1.25rem 2rem; }
  .article-hero-title { font-size: clamp(22px, 6vw, 32px); }
}

@media (max-width: 480px) {
  .profile-avatar-overlap .profile-avatar-lg {
    width: 72px !important; height: 72px !important;
  }
  .profile-name-below { padding-top: 2rem; }
  .profile-name-below .profile-name { font-size: 20px; }
}

/* V8 — Creator card: ensure name clears avatar */
.creator-avatar-overlap {
  display: flex;
  align-items: flex-end;
  padding: 0 1.25rem;
  margin-top: -36px;
  margin-bottom: 0;
  min-height: 50px;
}
.creator-card-v6-body {
  padding: 0.75rem 1.25rem 1.5rem;
  clear: both;
}
.creator-card-v6 .creator-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
  margin-top: 2px;
  color: var(--ink);
  word-break: break-word;
}