/* /public_html/new.habeshacute.online/assets/css/landing.css
 * ─────────────────────────────────────────────────────────
 * UPGRADED: Visual depth · Motion · Dark mode · Typography · Mobile
 * ─────────────────────────────────────────────────────────
 */

/* ============================================================
 0. ANIMATION KEYFRAMES
 ============================================================ */

@keyframes hc-fade-up {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes hc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes hc-pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@keyframes hc-shimmer {
0% { background-position: -200% center; }
100% { background-position:200% center; }
}

@keyframes hc-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}

@keyframes hc-spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* ============================================================
 1. HERO
 ============================================================ */

.hero {
padding: 80px 0 40px;
animation: hc-fade-in .45s ease both;
}

.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
gap: 24px;
align-items: stretch;
}

/* ── Panels ── */
.hero__content,
.hero__card {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px;
box-shadow:
var(--shadow-lg),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.08) inset;
transition: box-shadow .3s ease, border-color .3s ease;
}

/* subtle noise texture */
.hero__content::before,
.hero__card::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
pointer-events: none;
border-radius: inherit;
z-index: 0;
}

.hero__content > *,
.hero__card > * {
position: relative;
z-index: 1;
}

/* ── Eyebrow ── */
.hero__eyebrow {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
background: rgba(139, 92, 246, .13);
color: var(--brand);
font-size: .84rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid rgba(139, 92, 246, .22);
box-shadow: 0 2px 8px rgba(139, 92, 246, .12);
animation: hc-fade-up .5s .1s ease both;
}

/* ── Title ── */
.hero__title {
margin: 20px 0 16px;
font-size: clamp(2.1rem, 4.5vw, 4.1rem);
line-height: 1.02;
letter-spacing: -.035em;
color: var(--heading);
max-width: 13ch;
animation: hc-fade-up .5s .18s ease both;
}

/* ── Body copy ── */
.hero__text {
margin: 0;
max-width: 62ch;
color: var(--muted);
font-size: 1.06rem;
line-height: 1.7;
animation: hc-fade-up .5s .24s ease both;
}

/* ── Actions ── */
.hero__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
animation: hc-fade-up .5s .3s ease both;
}

.hero__actions .btn {
min-width: 178px;
min-height: 50px;
font-size: 1rem;
transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.hero__actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(139, 92, 246, .28);
}

.hero__actions .btn:active {
transform: translateY(0);
}

/* ── Microcopy ── */
.hero__microcopy {
margin-top: 14px;
color: var(--muted);
font-size: .9rem;
line-height: 1.6;
animation: hc-fade-up .5s .36s ease both;
}

.hero__microcopy a {
color: var(--brand);
font-weight: 900;
text-decoration: none;
border-bottom: 1px solid rgba(139, 92, 246, .3);
transition: border-color .18s ease, color .18s ease;
}

.hero__microcopy a:hover {
border-color: var(--brand);
}

/* ── Trust chips ── */
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
animation: hc-fade-up .5s .42s ease both;
}

.hero__trust span {
padding: 9px 14px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-weight: 700;
font-size: .88rem;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.hero__trust span:hover {
transform: translateY(-1px);
border-color: rgba(139, 92, 246, .3);
background: rgba(139, 92, 246, .07);
}

/* ── Right card ── */
.hero__card {
display: grid;
gap: 14px;
align-content: start;
}

/* ============================================================
 2. HERO LIVE BOX
 ============================================================ */

.hero__livebox {
margin-top: 24px;
padding: 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: box-shadow .25s ease;
}

.hero__livebox:hover {
box-shadow: var(--shadow-lg);
}

.hero__livehead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}

.hero__livetext strong {
display: block;
color: var(--heading);
font-size: 1rem;
font-weight: 800;
}

.hero__livetext small {
display: block;
color: var(--muted);
margin-top: 4px;
font-size: .84rem;
}

.hero__avatars {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}

.hero__avatars img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,.8);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform .2s ease;
}

.hero__avatars img:hover {
transform: scale(1.1) translateY(-2px);
z-index: 2;
}

.hero__livegrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}

.hero__liveitem {
padding: 14px;
border-radius: 16px;
background: var(--chip-bg);
border: 1px solid var(--line);
transition: background .2s ease, transform .2s ease;
}

.hero__liveitem:hover {
background: rgba(139, 92, 246, .07);
transform: translateY(-1px);
}

.hero__liveitem span {
display: block;
color: var(--muted);
font-size: .84rem;
margin-bottom: 6px;
}

.hero__liveitem strong {
display: block;
color: var(--heading);
font-size: 1.25rem;
line-height: 1.1;
font-weight: 800;
}

.hero__livechips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}

.hero__livechips span {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-size: .88rem;
transition: background .18s ease, border-color .18s ease;
}

.hero__livechips span:hover {
background: rgba(139, 92, 246, .07);
border-color: rgba(139, 92, 246, .25);
}

.hero__livechips strong {
color: var(--heading);
}

/* ============================================================
 3. VISUAL HERO VARIANT
 ============================================================ */

.hero--visual {
position: relative;
overflow: hidden;
}

.hero--visual::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 8%12%, rgba(139, 92, 246, .22), transparent 32%),
radial-gradient(circle at 92%8%, rgba(34, 197, 94, .16),transparent 28%),
radial-gradient(circle at 50% 85%, rgba(139, 92, 246, .10), transparent 40%);
z-index: 0;
}

.hero--visual .site-container {
position: relative;
z-index: 1;
}

.hero__grid--visual {
align-items: center;
gap: 28px;
}

.hero__badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}

.hero__mini-badge {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-weight: 700;
font-size: .84rem;
transition: transform .18s ease;
}

.hero__mini-badge:hover {
transform: translateY(-1px);
}

/* ── Visual card (image frame) ── */
.hero__card--visual {
position: relative;
overflow: visible;
padding: 14px;
border-radius: 28px;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.13);
box-shadow:
0 24px 60px rgba(0,0,0,.24),
0 8px20px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.14);
backdrop-filter: blur(12px);
animation: hc-float 6s ease-in-out infinite;
}

.hero__image-wrap {
position: relative;
overflow: hidden;
border-radius: 22px;
background: rgba(255,255,255,.06);
min-height: 320px;
}

.hero__image-wrap::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(255,255,255,.04),
transparent 18%,
transparent 75%,
rgba(0,0,0,.12));
pointer-events: none;
}

.hero__image {
display: block;
width: 100%;
height: auto;
max-height: 560px;
object-fit: cover;
object-position: center top;
transition: transform .6s ease;
}

.hero__card--visual:hover .hero__image {
transform: scale(1.02);
}

/* ── Floating overlay cards ── */
.hero__overlay-card {
position: absolute;
z-index: 3;
width: min(230px, 72%);
padding: 14px 16px;
border-radius: 18px;
background: rgba(10, 16, 36, .86);
border: 1px solid rgba(255,255,255,.13);
box-shadow:
0 16px 40px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(14px);
transition: transform .25s ease, box-shadow .25s ease;
}

.hero__overlay-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(0,0,0,.3);
}

.hero__overlay-card strong {
display: block;
margin-bottom: 6px;
color: #fff;
font-size: .95rem;
line-height: 1.3;
font-weight: 800;
}

.hero__overlay-card span {
display: block;
color: rgba(255,255,255,.76);
font-size: .84rem;
line-height: 1.55;
}

.hero__overlay-card--top{ top: 54px; left: -12px; }
.hero__overlay-card--bottom { right: -12px; bottom: 146px; }

/* ── Stats list ── */
.hero__stats-list {
margin-top: 16px;
display: grid;
gap: 12px;
}

.hero__stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
padding: 18px;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}

.hero__stat:hover {
transform: translateX(3px);
box-shadow: var(--shadow-lg);
}

.hero__stat strong {
display: block;
margin-bottom: 6px;
font-size: 1.15rem;
color: var(--heading);
}

.hero__stat span {
color: var(--muted);
font-size: .92rem;
}

.hero__card--visual .hero__stat {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 14px 16px;
}

/* ============================================================
 4. CONVERSION PROOF STRIP
 ============================================================ */

.home-proof-strip {
padding: 20px 0 14px;
}

.home-proof-strip .site-container {
width: min(1180px, calc(100% - 32px));
max-width: 1180px;
margin: 0 auto;
}

.home-proof-strip__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}

.home-proof-strip__grid div {
padding: 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-proof-strip__grid div:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(139, 92, 246, .25);
}

.home-proof-strip__grid strong {
display: block;
color: var(--heading);
font-size: 1.4rem;
line-height: 1.1;
margin-bottom: 6px;
font-weight: 900;
/* shimmer on numbers */
background: linear-gradient(
90deg,
var(--heading) 25%,
var(--brand) 50%,
var(--heading) 75%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: hc-shimmer 4s linear infinite;
}

.home-proof-strip__grid span {
display: block;
color: var(--muted);
font-weight: 700;
font-size: .88rem;
}

/* ============================================================
 5. HOME CREATOR SHOWCASE
 ============================================================ */

.home-creators-section {
padding: 56px 0 32px;
overflow: hidden;
}

.home-creators-section .site-container {
width: min(1180px, calc(100% - 32px));
max-width: 1180px;
margin: 0 auto;
}

.home-creators-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 26px;
}

.home-creators-kicker {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--brand);
font-size: .84rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-creators-head h2 {
margin: 14px 0 10px;
color: var(--heading);
font-size: clamp(1.75rem, 2.4vw, 2.3rem);
line-height: 1.1;
letter-spacing: -.02em;
}

.home-creators-head p {
margin: 0;
max-width: 70ch;
color: var(--muted);
font-size: 1rem;
line-height: 1.65;
}

.home-creators-all {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 16px;
border-radius: 999px;
background: var(--surface);
color: var(--brand);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
text-decoration: none;
font-size: .86rem;
font-weight: 800;
white-space: nowrap;
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-creators-all:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
background: rgba(139, 92, 246, .06);
}

.home-creators-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
align-items: stretch;
}

/* ── Creator card ── */
.home-creator-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
padding: 16px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-creator-card::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(139,92,246,.06), transparent 60%);
transition: opacity .22s ease;
pointer-events: none;
}

.home-creator-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(15,23,42,.10);
border-color: rgba(139, 92, 246, .3);
}

.home-creator-card:hover::after {
opacity: 1;
}

.home-creator-card.is-placeholder {
background:
linear-gradient(180deg, rgba(139,92,246,.045), rgba(255,255,255,.04)),
var(--surface);
border-style: dashed;
}

.home-creator-badge {
display: inline-flex;
align-self: flex-start;
width: fit-content;
max-width: 100%;
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-creator-top {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-width: 0;
margin-bottom: 10px;
}

.home-creator-avatar {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(139, 92, 246, .12);
color: var(--brand);
border: 1px solid rgba(139, 92, 246, .18);
font-size: 1rem;
font-weight: 900;
transition: transform .2s ease;
}

.home-creator-card:hover .home-creator-avatar {
transform: scale(1.06);
}

.home-creator-card.is-placeholder .home-creator-avatar {
background: var(--chip-bg);
}

.home-creator-category {
color: var(--brand);
font-size: .72rem;
font-weight: 800;
margin-bottom: 3px;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-creator-card h3 {
margin: 0;
color: var(--heading);
font-size: .98rem;
line-height: 1.25;
font-weight: 800;
}

.home-creator-location {
margin-top: 4px;
color: var(--muted);
font-size: .78rem;
font-weight: 700;
}

.home-creator-card p {
flex: 1;
min-height: 54px;
margin: 0 0 10px;
color: var(--muted);
line-height: 1.5;
font-size: .86rem;
}

.home-creator-meta {
display: inline-flex;
align-self: flex-start;
max-width: 100%;
margin-top: auto;
margin-bottom: 10px;
padding: 6px 10px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-size: .72rem;
font-weight: 800;
}

.home-creator-link {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 12px;
border-radius: 14px;
background: var(--brand);
color: #fff;
font-size: .84rem;
font-weight: 900;
text-decoration: none;
text-align: center;
box-shadow: 0 4px 14px rgba(139, 92, 246, .3);
transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.home-creator-link:hover {
opacity: .94;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(139, 92, 246, .4);
}

.home-creator-link:active {
transform: translateY(0);
}

.home-creator-card h3,
.home-creator-card p,
.home-creator-category,
.home-creator-location,
.home-creator-meta,
.home-creator-link {
overflow-wrap: anywhere;
word-break: break-word;
}

/* ── Creator extras ── */
.creator-pressure {
margin: 10px 0 0;
color: #705bb4;
font-weight: 900;
line-height: 1.5;
}

.home-creator-card.is-placeholder .home-creator-badge {
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
border-color: transparent;
}

.creator-timer {
margin-top: 6px;
font-size: .75rem;
font-weight: 700;
color: #f59e0b;
}

.creator-meta-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

/* ============================================================
 6. LOWER HOME SECTIONS
 ============================================================ */

.home-strip {
padding: 36px 0 44px;
}

.home-strip h2 {
margin: 0 0 14px;
font-size: clamp(1.75rem, 2.4vw, 2.3rem);
line-height: 1.08;
color: var(--heading);
letter-spacing: -.02em;
}

.home-strip p {
margin: 0;
max-width: 70ch;
color: var(--muted);
font-size: 1rem;
line-height: 1.65;
}

.home-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}

.home-block-title {
margin: 0 0 14px;
color: var(--heading);
font-size: 1.25rem;
font-weight: 800;
}

.home-step-row {
margin-bottom: 14px;
}

.home-step-row strong {
display: block;
color: var(--heading);
font-weight: 800;
}

.home-step-row p {
margin: 6px 0 0;
color: var(--muted);
}

.home-quote,
.home-faq-line {
margin: 0 0 10px;
color: var(--muted);
}

/* ── Info cards ── */
.home-cards-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}

.home-info-card {
padding: 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-info-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: rgba(139, 92, 246, .22);
}

.home-info-card__icon {
font-size: 1.7rem;
margin-bottom: 12px;
transition: transform .3s ease;
}

.home-info-card:hover .home-info-card__icon {
transform: scale(1.15) rotate(-4deg);
}

.home-info-card__title {
color: var(--heading);
font-weight: 800;
margin-bottom: 8px;
font-size: 1rem;
}

.home-info-card__text {
color: var(--muted);
font-size: .94rem;
line-height: 1.6;
}

.home-info-card__action {
margin-top: 14px;
}

/* ============================================================
 7. ANNOUNCEMENT SECTION
 ============================================================ */

.home-announcement-section {
padding-bottom: 0;
}

.home-announcement-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}

/* ============================================================
 8. FEATURED MEMBERS
 ============================================================ */

.home-featured-members {
padding: 48px 0 20px;
}

.home-featured-members .site-container {
width: min(1180px, calc(100% - 32px));
max-width: 1180px;
margin: 0 auto;
}

.home-featured-members__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}

.home-featured-members__kicker {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--brand);
font-weight: 900;
font-size: .84rem;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-featured-members__head h2 {
margin: 12px 0 8px;
color: var(--heading);
font-size: clamp(1.75rem, 2.4vw, 2.3rem);
line-height: 1.1;
letter-spacing: -.02em;
}

.home-featured-members__head p {
margin: 0;
max-width: 68ch;
color: var(--muted);
font-size: 1rem;
line-height: 1.65;
}

.home-featured-members__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
}

/* ── Featured member card ── */
.home-featured-member {
position: relative;
padding: 15px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
text-align: center;
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-featured-member:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: rgba(139, 92, 246, .28);
}

.home-featured-member__badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
padding: 5px 10px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--chip-text);
font-size: .72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-featured-member__avatar {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
object-fit: cover;
background: var(--chip-bg);
border: 1px solid var(--line);
margin-bottom: 12px;
transition: transform .3s ease;
}

.home-featured-member:hover .home-featured-member__avatar {
transform: scale(1.02);
}

.home-featured-member h3 {
margin: 0;
color: var(--heading);
font-size: 1rem;
line-height: 1.25;
font-weight: 800;
}

.home-featured-member__location {
margin-top: 6px;
color: var(--muted);
font-size: .84rem;
font-weight: 700;
}

.home-featured-member__link {
display: flex;
justify-content: center;
margin-top: 12px;
padding: 10px 12px;
border-radius: 14px;
background: var(--brand);
color: #fff;
font-weight: 900;
font-size: .84rem;
text-decoration: none;
box-shadow: 0 4px 14px rgba(139, 92, 246, .28);
transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.home-featured-member__link:hover {
opacity: .94;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(139, 92, 246, .38);
}

.home-featured-members__cta {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}

/* ============================================================
 9. CONVERSION SECTION
 ============================================================ */

.home-conversion-section {
padding: 36px 0 28px;
}

.home-conversion-card {
padding: 32px;
border-radius: 28px;
background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
border: 1px solid var(--line);
box-shadow:
var(--shadow-lg),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.07) inset;
}

.home-conversion-kicker {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--brand);
font-size: .84rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-conversion-card h2 {
margin: 16px 0 12px;
color: var(--heading);
font-size: clamp(1.85rem, 3vw, 2.8rem);
line-height: 1.04;
letter-spacing: -.025em;
}

.home-conversion-card p {
margin: 0;
max-width: 72ch;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.65;
}

.home-conversion-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 22px;
}

.home-conversion-grid div {
padding: 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.home-conversion-grid div:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(139, 92, 246, .22);
}

.home-conversion-grid strong {
display: block;
margin-bottom: 8px;
color: var(--heading);
font-weight: 800;
}

.home-conversion-grid span {
display: block;
color: var(--muted);
line-height: 1.55;
font-size: .93rem;
}

.home-conversion-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}

/* ============================================================
 10. EARN / REFERRAL SECTION
 ============================================================ */

.home-earn-section {
padding: 32px 0 36px;
}

.home-earn-card {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
gap: 24px;
align-items: center;
padding: 32px;
border-radius: 28px;
background:
linear-gradient(135deg, rgba(139, 92, 246, .13), rgba(34, 197, 94, .10)),
var(--surface);
border: 1px solid var(--line);
box-shadow:
var(--shadow-lg),
inset 0 1px 0 rgba(255,255,255,.06);
}

.home-earn-kicker {
display: inline-flex;
width: fit-content;
padding: 7px 13px;
border-radius: 999px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--brand);
font-size: .84rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-earn-copy h2 {
margin: 16px 0 12px;
max-width: 13ch;
color: var(--heading);
font-size: clamp(1.95rem, 3vw, 3.1rem);
line-height: 1.03;
letter-spacing: -.03em;
}

.home-earn-copy p {
margin: 0;
max-width: 68ch;
color: var(--muted);
font-size: 1.02rem;
line-height: 1.7;
}

.home-earn-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}

.home-earn-grid {
display: grid;
gap: 14px;
}

.home-earn-grid div {
padding: 20px;
border-radius: 20px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}

.home-earn-grid div:hover {
transform: translateX(3px);
box-shadow: var(--shadow-lg);
}

.home-earn-grid strong {
display: block;
margin-bottom: 8px;
color: var(--heading);
font-size: 1rem;
font-weight: 800;
}

.home-earn-grid span {
display: block;
color: var(--muted);
line-height: 1.55;
font-size: .93rem;
}

/* ============================================================
 11. MEMBER PREVIEW SECTION
 ============================================================ */

.home-member-preview-section {
padding: 32px 0 38px;
}

.home-member-preview-section .site-container {
width: min(1180px, calc(100% - 32px));
max-width: 1180px;
margin: 0 auto;
}

.home-member-preview__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}

.home-member-preview__kicker {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
background: rgba(34, 197, 94, .10);
border: 1px solid rgba(34, 197, 94, .20);
color: #16a34a;
font-size: .82rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}

.home-member-preview__head h2 {
margin: 14px 0 10px;
color: var(--heading);
font-size: clamp(1.85rem, 3vw, 2.6rem);
line-height: 1.04;
letter-spacing: -.03em;
}

.home-member-preview__head p {
margin: 0;
max-width: 78ch;
color: var(--muted);
font-size: 1rem;
line-height: 1.7;
}

.home-member-preview__all {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 16px;
border-radius: 999px;
background: var(--surface);
color: var(--brand);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
text-decoration: none;
font-size: .86rem;
font-weight: 900;
white-space: nowrap;
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.home-member-preview__all:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
background: rgba(139, 92, 246, .06);
}

.home-member-preview__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}

/* ── Member card ── */
.home-member-card {
position: relative;
overflow: hidden;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, .9);
box-shadow:
0 20px 44px rgba(15, 23, 42, .13),
0 6px 16pxrgba(15, 23, 42, .08);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-member-card:hover {
transform: translateY(-4px);
box-shadow:
0 28px 66px rgba(15, 23, 42, .17),
0 10px 24px rgba(220, 38, 38, .09),
0 10px 26px rgba(34, 197, 94, .13);
border-color: rgba(34, 197, 94, .38);
}

/* ── Photo wrap ── */
.home-member-card__photo-wrap {
position: relative;
height: 210px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(circle at 52% 46%, rgba(255, 221, 64, .72), transparent 22%),
linear-gradient(135deg, #16c93a 0%, #c99822 42%, #ef2424 70%, #ff1010 100%);
}

.home-member-card__photo-wrap::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(145deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.28) 16%, rgba(255,255,255,.08) 38%, transparent 72%),
linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 54%, rgba(15,23,42,.10) 100%);
pointer-events: none;
}

.home-member-card__photo-wrap::after {
content: "";
position: absolute;
left: -26px;
top: -36px;
width: 250px;
height: 112px;
border-radius: 999px;
background: rgba(255,255,255,.34);
filter: blur(.5px);
transform: rotate(-8deg);
pointer-events: none;
}

.home-member-card__photo {
position: relative;
z-index: 2;
display: block;
width: 104px;
height: 104px;
border-radius: 50%;
object-fit: cover;
object-position: center;
border: 0;
box-shadow:
0 0 0 2px rgba(255,255,255,.28),
0 0 22px rgba(255, 232, 70, .82),
0 10px 24px rgba(15, 23, 42, .28);
transition: transform .3s ease, box-shadow .3s ease;
}

.home-member-card:hover .home-member-card__photo {
transform: scale(1.06);
box-shadow:
0 0 0 3px rgba(255,255,255,.4),
0 0 30px rgba(255, 232, 70, .9),
0 14px 30px rgba(15, 23, 42, .32);
}

.home-member-card.is-placeholder .home-member-card__photo {
object-fit: contain;
padding: 0;
background: transparent;
border: 0;
}

/* ── Online status badge ── */
.home-member-card__status {
position: absolute;
z-index: 4;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.96);
color: #d71920;
font-size: .75rem;
font-weight: 900;
box-shadow:
0 9px 20px rgba(15, 23, 42, .14),
inset 0 1px 0 rgba(255,255,255,.95);
backdrop-filter: blur(8px);
}

.home-member-card__status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #94a3b8;
flex-shrink: 0;
}

.home-member-card__status.is-online::before {
background: #22c55e;
animation: hc-pulse-dot 2s ease-in-out infinite;
}

/* ── Card body ── */
.home-member-card__body {
position: relative;
z-index: 3;
padding: 16px;
background: #ffffff;
}

.home-member-card__badge {
display: inline-flex;
width: fit-content;
max-width: 100%;
margin-bottom: 9px;
padding: 7px 12px;
border-radius: 999px;
background: #eaffef;
border: 1px solid rgba(18, 190, 80, .18);
color: #10a53a;
font-size: .72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.home-member-card h3 {
margin: 0;
color: #111827;
font-size: 1.08rem;
line-height: 1.2;
font-weight: 800;
overflow-wrap: anywhere;
}

.home-member-card__location {
margin-top: 6px;
color: #6b7280;
font-size: .84rem;
font-weight: 700;
overflow-wrap: anywhere;
}

/* ── CTA link ── */
.home-member-card__link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 14px;
width: 100%;
padding: 12px 14px;
border-radius: 15px;
background: linear-gradient(135deg, #00c93a 0%, #8aa824 32%, #e73122 68%, #ff1010 100%);
color: #fff;
font-size: .86rem;
font-weight: 900;
text-decoration: none;
text-align: center;
overflow: hidden;
box-shadow:
0 12px 24px rgba(25, 190, 58, .26),
0 8px18px rgba(255, 25, 25, .18),
inset 0 2px 0 rgba(255,255,255,.52),
inset 0 -3px 0 rgba(0,0,0,.12);
transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.home-member-card__link::before {
content: "";
position: absolute;
inset: 2px;
height: 46%;
border-radius: 13px 13px 28px 28px;
background: linear-gradient(to bottom, rgba(255,255,255,.42), rgba(255,255,255,.06));
pointer-events: none;
}

.home-member-card__link:hover {
opacity: .96;
transform: translateY(-1px);
box-shadow:
0 16px 30px rgba(25, 190, 58, .32),
0 10px 22px rgba(255, 25, 25, .22),
inset 0 2px 0 rgba(255,255,255,.6);
}

.home-member-card__link:active {
transform: translateY(0);
}

/* ── Privacy note ── */
.home-member-preview__privacy {
margin-top: 14px;
padding: 12px 16px;
border-radius: 16px;
background: var(--chip-bg);
border: 1px solid var(--line);
color: var(--muted);
font-size: .88rem;
line-height: 1.55;
font-weight: 700;
}

.home-member-preview__cta {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}

/* ============================================================
 12. DARK MODE — enhanced
 ============================================================ */

html[data-theme="dark"],
body.theme-dark {

/* member card */
.home-member-card {
background: rgba(15, 23, 42, .88);
border-color: rgba(255,255,255,.10);
box-shadow: 0 18px 48px rgba(0,0,0,.32);
}

.home-member-card:hover {
border-color: rgba(34, 197, 94, .28);
box-shadow:
0 28px 66px rgba(0,0,0,.42),
0 10px 26px rgba(34, 197, 94, .10);
}

.home-member-card__body {
background: rgba(15, 23, 42, .94);
}

.home-member-card h3 {
color: #f9fafb;
}

.home-member-card__location {
color: #a8b0c2;
}

/* surface cards */
.home-info-card,
.home-earn-grid div,
.home-conversion-grid div,
.home-proof-strip__grid div,
.hero__stat,
.hero__liveitem,
.hero__livebox {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}

/* hero panels */
.hero__content,
.hero__card {
background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border-color: rgba(255,255,255,.10);
}

/* shimmer tint on dark */
.home-proof-strip__grid strong {
background: linear-gradient(
90deg,
#f9fafb 25%,
var(--brand) 50%,
#f9fafb 75%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.home-creator-card {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}

.home-creator-card:hover {
background: rgba(139,92,246,.07);
border-color: rgba(139, 92, 246, .28);
}

.home-featured-member {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}
}

/* ============================================================
 13. RESPONSIVE
 ============================================================ */

/* ── 1100px ── */
@media (max-width: 1100px) {
.hero__overlay-card--top{ top: 18px;left: 18px;}
.hero__overlay-card--bottom { right: 18px; bottom: 150px; }

.home-member-preview__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

/* ── 980px ── */
@media (max-width: 980px) {
.home-proof-strip__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hero {
padding-top: 52px;
}

.hero__grid {
grid-template-columns: 1fr;
}

.hero__title {
max-width: none;
}

.home-creators-head {
align-items: flex-start;
flex-direction: column;
}

.home-creators-all {
width: 100%;
white-space: normal;
}

.hero__livegrid,
.home-cards-grid,
.home-two-col {
grid-template-columns: 1fr;
}

.home-featured-members__head {
align-items: flex-start;
flex-direction: column;
}

.home-conversion-grid {
grid-template-columns: 1fr;
}

.home-earn-card {
grid-template-columns: 1fr;
}

.home-earn-copy h2 {
max-width: none;
}

.home-member-preview__head {
flex-direction: column;
align-items: flex-start;
}

.home-member-preview__all {
width: 100%;
}

.home-member-preview__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* ── 860px ── */
@media (max-width: 860px) {
.hero__grid--visual {
grid-template-columns: 1fr;
gap: 18px;
}

.hero__content {
order: 1;
}

.hero__card--visual {
order: 2;
padding: 12px;
border-radius: 22px;
animation: none; /* disable float on touch */
}

.hero__image-wrap {
min-height: unset;
}

.hero__image {
max-height: 320px;
}

.hero__overlay-card {
position: static;
width: 100%;
margin-top: 12px;
}

.hero__overlay-card--top,
.hero__overlay-card--bottom {
top: auto; left: auto; right: auto; bottom: auto;
}

.hero__stats-list {
margin-top: 12px;
gap: 10px;
}

.hero__microcopy {
font-size: .86rem;
}
}

/* ── 640px ── */
@media (max-width: 640px) {
.home-proof-strip__grid {
grid-template-columns: 1fr;
}

.hero__content,
.hero__card {
padding: 22px;
border-radius: 22px;
}

.hero__title {
font-size: clamp(2rem, 10vw, 3rem);
}

.hero__actions {
flex-direction: column;
}

.hero__actions .btn {
width: 100%;
}

.home-creators-section {
padding: 36px 0 24px;
}

.home-creators-section .site-container {
width: min(100% - 24px, 1180px);
}

.home-creators-grid {
grid-template-columns: 1fr;
gap: 12px;
}

.home-creator-card {
padding: 14px;
}

.home-creator-card p {
min-height: 0;
}

.home-creator-meta {
margin-top: 0;
}

.home-featured-members .site-container {
width: min(100% - 24px, 1180px);
}

.home-featured-members__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.home-featured-member {
padding: 12px;
border-radius: 18px;
}

.home-featured-member__avatar {
border-radius: 15px;
}

.home-featured-members__cta,
.home-conversion-actions,
.home-earn-actions {
flex-direction: column;
}

.home-featured-members__cta .btn,
.home-conversion-actions .btn,
.home-earn-actions .btn {
width: 100%;
}

.home-conversion-card,
.home-earn-card {
padding: 22px;
border-radius: 22px;
}

.home-member-preview-section .site-container {
width: min(100% - 24px, 1180px);
}

.home-member-preview__cta .btn {
width: 100%;
}

.home-member-preview__cta {
flex-direction: column;
}
}

/* ── 560px ── */
@media (max-width: 560px) {
.hero__card--visual {
padding: 10px;
border-radius: 18px;
}

.hero__image-wrap {
border-radius: 16px;
}

.hero__image {
max-height: 260px;
}

.hero__overlay-card {
border-radius: 14px;
padding: 12px 14px;
}

.hero__card--visual .hero__stat {
padding: 12px 14px;
border-radius: 14px;
}

.home-member-preview__grid {
grid-template-columns: 1fr;
}

.home-member-card__photo-wrap {
height: 260px;
}
}

/* ── 420px ── */
@media (max-width: 420px) {
.home-featured-members__grid {
grid-template-columns: 1fr;
}

.hero__title {
font-size: clamp(1.85rem, 9.5vw, 2.5rem);
}

.home-proof-strip__grid strong {
font-size: 1.25rem;
}
}

/* ============================================================
 14. REDUCED MOTION
 ============================================================ */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}