/* ============================================================
   Landing page styles — DevBoost
   Depends on: colors_and_type.css (imported before this file)
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: var(--font-sans);
    background: var(--bg-page-alt);
    color: var(--fg-1);
    line-height: 1.55;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   BACKGROUND BLOBS
   ============================================================ */
.page-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
}
.blob-a { left: -8%;  top: 8%;      width: 55%; height: 55%; background: radial-gradient(circle, rgba(156,77,255,0.35), transparent 65%); }
.blob-b { right: -12%; top: 18%;   width: 50%; height: 50%; background: radial-gradient(circle, rgba(156,77,255,0.22), transparent 65%); }
.blob-c { left: 25%;  bottom: -25%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(156,77,255,0.18), transparent 65%); }

.page-wrap { position: relative; z-index: 1; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ============================================================
   HEADER
   ============================================================ */
.top { padding: 36px 0 24px; }
.top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img { height: 64px; width: auto; }
.top-cta { display: flex; gap: 12px; align-items: center; }

.btn-ghost {
    padding: 11px 18px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--r-md);
    color: var(--fg-1);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.45);
}
.btn-signup {
    padding: 12px 20px;
    background: var(--main-purple);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--type-body-sm-size);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(156,77,255,0.32);
    transition: all var(--t-fast), transform var(--t-press);
}
.btn-signup:hover {
    background: var(--main-yellow);
    color: #000;
    box-shadow: 0 8px 22px rgba(255,193,7,0.32);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    padding: 28px 0 60px;
    position: relative;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 48px;
    align-items: center;
}
.hero-left { min-width: 0; }

/* Role pills */
.role-pills {
    display: inline-flex;
    background: #1A1A1A;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px;
    border-radius: var(--r-pill);
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.role-pill {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-size: var(--type-body-sm-size);
    font-weight: 600;
    border-radius: var(--r-pill);
    transition: all var(--t-base);
}
.role-pill.active {
    background: var(--main-purple);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(156,77,255,0.45);
}
.role-pill:not(.active):hover { color: #fff; }

/* Eyebrow */
.hero-eyebrow {
    font-size: var(--type-body-size);
    font-weight: 600;
    color: var(--main-purple);
    margin-bottom: 20px;
    transition: color var(--t-base);
}
[data-role="streamer"] .hero-eyebrow { color: var(--main-yellow); }

/* Hero title — same scale as section titles */
.hero-title {
    font-size: var(--type-display-size); /* 46px — same as feature-text h2 */
    font-weight: var(--type-display-weight);
    line-height: var(--type-display-lh);
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    color: #fff;
}
.hero-title .hero-accent { color: var(--landing-orange); }

/* Lead paragraph */
.hero-lead {
    font-size: var(--type-body-size); /* 15px */
    line-height: 1.6;
    color: rgba(255,255,255,0.72);
    margin-bottom: 32px;
    max-width: 480px;
}
.hero-lead strong { color: var(--main-purple); font-weight: 600; }
[data-role="streamer"] .hero-lead strong { color: var(--main-yellow); }

/* CTA */
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: var(--main-purple);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: var(--type-body-size);
    font-weight: 700;
    box-shadow: 0 10px 32px rgba(156,77,255,0.45), 0 0 48px rgba(156,77,255,0.18);
    transition: all var(--t-base), transform var(--t-press);
    margin-bottom: 32px;
}
.hero-cta:hover {
    background: var(--main-yellow);
    color: #000;
    box-shadow: 0 10px 32px rgba(255,193,7,0.38);
    transform: translateY(-2px);
}
.hero-cta:active { transform: translateY(1px); }
[data-role="streamer"] .hero-cta {
    background: var(--main-yellow);
    color: #000;
    box-shadow: 0 10px 32px rgba(255,193,7,0.42);
}
[data-role="streamer"] .hero-cta:hover {
    background: var(--main-purple);
    color: #fff;
}

/* Status row */
.hero-status {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.60);
    font-size: var(--type-body-sm-size);
}
.status-dots { display: flex; }
.status-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid var(--bg-page-alt);
    margin-left: -8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.status-dot:first-child { margin-left: 0; }
.status-dot.red  { background: radial-gradient(circle at 35% 35%, #ff8e8e 0%, #FF4444 55%, #c01a1a 100%); }
.status-dot.gray { background: radial-gradient(circle at 35% 35%, #d4d4d4 0%, #9a9a9a 55%, #5a5a5a 100%); }

/* ============================================================
   HERO RIGHT — два наклонённых PNG
   ============================================================ */
.hero-right {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cards {
    position: relative;
    width: 100%;
    height: 480px;
    aspect-ratio: 460 / 480;
}

.hero-img-card {
    position: absolute;
    width: 74%;
    max-width: 340px;
    border-radius: 20px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.45);
    transition: transform var(--t-base), box-shadow var(--t-base);
    display: block;
}
    
.hero-img-card.card-back {
    left: 0;
    top: 50px;
    transform: rotate(-7deg);
    z-index: 1;
}

.hero-img-card.card-front {
    right: 0;
    top: 10px;
    transform: rotate(5deg);
    z-index: 2;
}

.hero-img-card.card-back:hover {
    transform: rotate(-9deg) scale(1.04);
    box-shadow: 0 36px 80px rgba(0,0,0,0.75);
    z-index: 10;
}
.hero-img-card.card-front:hover {
    transform: rotate(3deg) scale(1.04);
    box-shadow: 0 36px 80px rgba(0,0,0,0.75);
    z-index: 10;
}

/* ============================================================
   PLATFORMS
   ============================================================ */
.platforms {
    padding: 48px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
}
.platforms-title {
    text-align: center;
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    color: #fff;
    margin-bottom: 36px;
}
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
}
.platform-item {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}
.platform-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.platform-icon img {
    width: 52px; height: 52px;
    object-fit: contain;
    border-radius: 14px;
    display: block;
}
.platform-name {
    font-size: var(--type-body-size);
    font-weight: 600;
    color: #fff;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    padding: 100px 0 120px;
    position: relative;
}
.section-num {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--type-micro-size);
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.section-num .num {
    color: var(--main-purple);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.section-num .line {
    flex: 0 0 64px;
    height: 1px;
    background: rgba(255,255,255,0.20);
}
.section-title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    max-width: 940px;
    margin-bottom: 22px;
    text-wrap: balance;
}
.section-title .accent { color: var(--main-purple); }
.section-lead {
    font-size: var(--type-h3-size); /* 19px */
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    max-width: 680px;
    margin-bottom: 56px;
}

/* ============================================================
   BENEFIT CARDS
   ============================================================ */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.benefit-card {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-xl);
    padding: 32px 28px 28px;
    position: relative;
    transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.benefit-card:hover {
    border-color: rgba(156,77,255,0.45);
    transform: translateY(-6px);
    background: linear-gradient(180deg, rgba(156,77,255,0.06), transparent 60%), var(--bg-card);
}
.benefit-card .num {
    position: absolute;
    top: 20px; right: 24px;
    font-size: var(--type-body-sm-size);
    font-weight: 800;
    color: rgba(255,255,255,0.20);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}
.benefit-icon {
    width: 56px; height: 56px;
    background: rgba(156,77,255,0.12);
    border: 1px solid rgba(156,77,255,0.30);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.benefit-icon img { width: 26px; height: 26px; }
.benefit-card h3 {
    font-size: var(--type-h3-size);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.28;
    color: #fff;
}
.benefit-card p {
    font-size: var(--type-body-sm-size);
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
}

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feature-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
    gap: 80px;
    align-items: center;
    padding: 56px 0;
}
.feature-row.flip { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.feature-row.flip .feature-text { order: 2; }
.feature-row.flip .feature-visual { order: 1; }

.feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(156,77,255,0.10);
    border: 1px solid rgba(156,77,255,0.32);
    border-radius: var(--r-pill);
    font-size: var(--type-micro-size);
    font-weight: 600;
    color: var(--main-purple);
    margin-bottom: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.feature-eyebrow.yellow {
    background: rgba(255,193,7,0.10);
    border-color: rgba(255,193,7,0.35);
    color: var(--main-yellow);
}
.feature-text h2 {
    font-size: var(--type-display-size); /* 46px — same as hero */
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    text-wrap: balance;
}
.feature-text > p {
    font-size: 17px;
    color: rgba(255,255,255,0.78);
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 520px;
}
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    list-style: none;
}
.feature-li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
}
.feature-check {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(156,77,255,0.20);
    color: var(--main-purple);
    font-size: var(--type-body-sm-size);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.feature-row.streamer .feature-check {
    background: rgba(255,193,7,0.18);
    color: var(--main-yellow);
}
.feature-li strong {
    display: block;
    font-size: var(--type-body-size);
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}
.feature-li span {
    font-size: var(--type-body-sm-size);
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}
.feature-visual {
    position: relative;
    min-height: 460px;
}

/* ============================================================
   PUB VISUAL
   ============================================================ */
.pub-visual {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-2xl);
    padding: 22px;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.pub-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.pub-visual-head h4 {
    font-size: var(--type-h4-size);
    font-weight: 700;
    color: #fff;
}
.pub-visual-head .tabs { display: flex; gap: 8px; }
.pub-visual-head .tabs .t {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--type-eyebrow-size);
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    background: rgba(0,0,0,0.4);
}
.pub-visual-head .tabs .t.on {
    background: var(--main-purple);
    color: #fff;
    font-weight: 600;
}
.pub-mini-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.pub-mini {
    background: var(--bg-card-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    overflow: hidden;
}
.pub-mini-banner {
    height: 90px;
    position: relative;
}
.pub-mini-banner img { width: 100%; height: 100%; object-fit: cover; }
.pub-mini-banner .b {
    position: absolute; top: 6px; left: 6px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--type-eyebrow-size);
    font-weight: 600;
}
.pub-mini-banner .b.private { background: var(--main-purple); color: #fff; }
.pub-mini-banner .b.public  { background: var(--main-yellow); color: #000; }
.pub-mini-body { padding: 9px 10px 12px; }
.pub-mini-body h5 {
    font-size: var(--type-micro-size);
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}
.pub-mini-body .pm-stats {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,0.65);
}
.pub-mini-body .pm-stats strong { color: var(--main-yellow); }
.pub-visual-bottom {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.frozen-pill {
    background: rgba(156,77,255,0.08);
    border: 1px solid rgba(156,77,255,0.25);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.frozen-pill .lbl { font-size: var(--type-micro-size); color: rgba(255,255,255,0.7); }
.frozen-pill .val {
    font-size: var(--type-body-size);
    font-weight: 700;
    color: var(--main-yellow);
    font-variant-numeric: tabular-nums;
}

/* Floating info cards */
.float-card {
    position: absolute;
    background: rgba(22,22,30,0.94);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
}
.float-card .dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(156,77,255,0.22);
    display: flex; align-items: center; justify-content: center;
    color: var(--main-purple);
    font-size: var(--type-body-sm-size);
    font-weight: 700;
}
.float-card .tx .t { font-size: var(--type-caption-size); font-weight: 700; color: #fff; }
.float-card .tx .s { font-size: var(--type-eyebrow-size); color: rgba(255,255,255,0.6); }
.pub-float-1 { top: -22px; right: -24px; transform: rotate(2deg); }
.pub-float-2 { bottom: -26px; left: -22px; transform: rotate(-2deg); }
.pub-float-2 .dot { background: rgba(255,193,7,0.20); color: var(--main-yellow); }

/* ============================================================
   STR VISUAL
   ============================================================ */
.str-visual {
    background: var(--bg-card);
    border: 1px solid var(--border-1);
    border-radius: var(--r-2xl);
    padding: 22px;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.str-visual-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.str-visual-tabs .tab {
    font-size: var(--type-caption-size);
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    padding-bottom: 10px;
}
.str-visual-tabs .tab.on {
    color: var(--main-yellow);
    border-bottom: 2px solid var(--main-yellow);
    margin-bottom: -13px;
}
.inbox-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row .av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; }
.inbox-row .av img { width: 100%; height: 100%; object-fit: cover; }
.inbox-row .meta .t { font-size: var(--type-caption-size); font-weight: 700; color: #fff; }
.inbox-row .meta .s { font-size: var(--type-eyebrow-size); color: rgba(255,255,255,0.55); }
.inbox-row .amount {
    font-size: var(--type-body-sm-size);
    font-weight: 700;
    color: var(--main-yellow);
    font-variant-numeric: tabular-nums;
}
.inbox-row .tag {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
}
.tag.new { background: var(--main-purple); color: #fff; }
.tag.active {
    background: rgba(123,227,154,0.16);
    color: var(--success);
    border: 1px solid rgba(123,227,154,0.35);
}
.tag.done { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
.str-float-1 { top: -22px; right: -22px; transform: rotate(3deg); }
.str-float-1 .dot { background: rgba(123,227,154,0.22); color: var(--success); }

/* Streamer section warm tint */
.section.streamers { background: linear-gradient(180deg, rgba(255,193,7,0.02), transparent 80%); }
.section.streamers .section-title .accent { color: var(--main-yellow); }
.section.streamers .section-num .num { color: var(--main-yellow); }

/* Inline visual helpers (pub-visual second block) */
.iv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-1);
}
.iv-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.iv-row .iv-info { flex: 1; }
.iv-row .iv-name { font-size: var(--type-body-sm-size); font-weight: 700; color: #fff; }
.iv-row .iv-sub  { font-size: var(--type-micro-size); color: rgba(255,255,255,0.55); }
.iv-badge {
    background: rgba(123,227,154,0.16);
    color: var(--success);
    border: 1px solid rgba(123,227,154,0.35);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: var(--type-eyebrow-size);
    font-weight: 600;
}
.iv-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: var(--type-caption-size);
}
.iv-stat-row .lbl { color: rgba(255,255,255,0.65); }
.iv-stat-row .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.iv-stat-row .val-yellow { color: var(--main-yellow); }
.iv-stat-row .val-white  { color: #fff; }
.iv-proof-box {
    padding: 14px;
    background: rgba(156,77,255,0.08);
    border: 1px solid rgba(156,77,255,0.25);
    border-radius: 10px;
    margin-top: 8px;
}
.iv-proof-label {
    font-size: var(--type-eyebrow-size);
    font-weight: 700;
    color: var(--main-purple);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.iv-proof-text {
    font-size: var(--type-caption-size);
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    margin-bottom: 12px;
}
.iv-actions { display: flex; gap: 8px; }
.iv-btn-accept {
    flex: 1; padding: 10px;
    background: var(--main-purple); color: #fff;
    border: none; border-radius: 6px;
    font-size: var(--type-micro-size); font-weight: 600;
    cursor: pointer;
}
.iv-btn-dispute {
    padding: 10px 14px;
    background: transparent; color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
    font-size: var(--type-micro-size); font-weight: 600;
    cursor: pointer;
}

/* Streamer earnings widget */
.earn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 20px;
}
.earn-label {
    font-size: var(--type-micro-size);
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.earn-amount {
    font-size: 56px;
    font-weight: 800;
    color: var(--main-yellow);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.earn-growth {
    font-size: var(--type-micro-size);
    font-weight: 600;
    color: var(--success);
    margin-top: 8px;
}
.earn-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.earn-cell {
    background: #000;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}
.earn-cell-label { font-size: 10px; color: rgba(255,255,255,0.55); }
.earn-cell-val {
    font-size: var(--type-h3-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.earn-cell-val.success { color: var(--success); }
.earn-cell-val.yellow  { color: var(--main-yellow); }
.earn-cell-val.white   { color: #fff; }
.earn-payout {
    padding: 14px;
    background: rgba(123,227,154,0.08);
    border: 1px solid rgba(123,227,154,0.30);
    border-radius: 10px;
}
.earn-payout-label {
    font-size: var(--type-eyebrow-size);
    font-weight: 700;
    color: var(--success);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.earn-payout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.earn-payout-name { font-size: var(--type-body-sm-size); font-weight: 700; color: #fff; }
.earn-payout-sub  { font-size: var(--type-eyebrow-size); color: rgba(255,255,255,0.5); }
.earn-payout-val  { font-size: var(--type-h3-size); font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0,380px) minmax(0,1fr);
    gap: 80px;
}
.faq-side h2 {
    font-size: clamp(28px, 3.5vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: #fff;
}
.faq-side p {
    font-size: var(--type-body-size);
    color: rgba(255,255,255,0.72);
    margin-bottom: 18px;
}
.faq-side a {
    color: var(--main-purple);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(156,77,255,0.4);
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.10); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
.faq-q {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    width: 100%;
    padding: 24px 0;
    background: transparent;
    border: none;
    color: #fff;
    text-align: left;
    font-size: var(--type-h4-size); /* 16px — body size, clean */
    font-weight: 600;
    align-items: center;
}
.faq-q .qn {
    color: var(--main-purple);
    font-size: var(--type-body-sm-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.faq-toggle {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
.faq-item.open .faq-toggle {
    transform: rotate(45deg);
    background: var(--main-purple);
    color: #fff;
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    color: rgba(255,255,255,0.75);
    font-size: var(--type-body-size);
    line-height: 1.6;
}
.faq-a-inner { padding: 0 0 28px 52px; max-width: 720px; }
.faq-item.open .faq-a { max-height: 400px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
    margin: 40px auto 80px;
    max-width: 1240px;
    background: linear-gradient(135deg, rgba(156,77,255,0.18), rgba(255,153,0,0.08));
    border: 1px solid rgba(156,77,255,0.30);
    border-radius: var(--r-2xl);
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-final::before, .cta-final::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.cta-final::before {
    left: -10%; top: -50%;
    width: 50%; height: 200%;
    background: radial-gradient(circle, rgba(156,77,255,0.40), transparent 70%);
}
.cta-final::after {
    right: -10%; bottom: -50%;
    width: 50%; height: 200%;
    background: radial-gradient(circle, rgba(255,153,0,0.30), transparent 70%);
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 {
    font-size: clamp(28px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    text-wrap: balance;
}
.cta-final p {
    font-size: var(--type-h3-size);
    color: rgba(255,255,255,0.78);
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.cta-final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-final .btn-primary {
    padding: 18px 32px;
    background: var(--main-purple);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--type-body-size);
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(156,77,255,0.36);
    transition: all var(--t-fast);
}
.cta-final .btn-primary:hover { background: var(--main-yellow); color: #000; }
.cta-final .btn-secondary {
    padding: 18px 28px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--r-md);
    font-size: var(--type-body-size);
    font-weight: 600;
    transition: all var(--t-fast);
}
.cta-final .btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 60px 0 36px;
    background: rgba(0,0,0,0.30);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand img { height: 40px; margin-bottom: 18px; }
.footer-brand p {
    font-size: var(--type-body-sm-size);
    color: rgba(255,255,255,0.65);
    max-width: 300px;
    line-height: 1.55;
}
.footer-col h5 {
    font-size: var(--type-eyebrow-size);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
    font-size: var(--type-body-sm-size);
    color: rgba(255,255,255,0.78);
    transition: color var(--t-fast);
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: var(--type-caption-size);
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .container { padding: 0 32px; }
    .hero-title { font-size: clamp(28px, 4vw, 40px); }
    .section-title { font-size: clamp(32px, 4.5vw, 52px); }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-row { gap: 48px; }
    .feature-text h2 { font-size: clamp(26px, 3vw, 36px); }
    .cta-final h2 { font-size: clamp(26px, 3.5vw, 42px); }
    .faq-side h2 { font-size: clamp(26px, 3vw, 36px); }
    .platforms-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 500px; }
    .hero-cards { max-width: 400px; }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 768px) {
    .container { padding: 0 24px; }
    .top { padding: 20px 0 16px; }
    .logo img { height: 48px; }
    .top-cta .btn-ghost { display: none; }
    
    .hero { padding: 16px 0 40px; }
    .hero-grid { 
        grid-template-columns: 1fr; 
        gap: 32px; 
    }
    .hero-right { 
        order: -1; 
        min-height: 280px; 
    }
    .hero-cards { 
        max-width: 340px; 
        aspect-ratio: 340 / 300;
    }
    .hero-img-card { width: 70%; max-width: 260px; }
    .hero-lead { max-width: 100%; }
    .hero-cta { width: 100%; }
    
    .section { padding: 64px 0 80px; }
    .section-title { font-size: clamp(28px, 5vw, 36px); }
    
    .feature-row,
    .feature-row.flip { 
        grid-template-columns: 1fr; 
        gap: 32px; 
        padding: 32px 0; 
    }
    .feature-row.flip .feature-text { order: 1; }
    .feature-row.flip .feature-visual { order: 2; }
    .feature-text h2 { font-size: clamp(24px, 4vw, 28px); }
    .feature-visual { min-height: auto; }
    .pub-float-1, .pub-float-2, .str-float-1 { display: none; }
    
    .faq-grid { 
        grid-template-columns: 1fr; 
        gap: 32px; 
    }
    .faq-side h2 { font-size: clamp(24px, 4vw, 32px); }
    .faq-q { gap: 14px; padding: 20px 0; }
    .faq-a-inner { padding: 0 0 24px 40px; }
    
    .cta-final { 
        padding: 48px 24px; 
        margin: 24px 16px 60px; 
    }
    .cta-final h2 { font-size: clamp(24px, 5vw, 32px); }
    
    .footer-grid { 
        grid-template-columns: 1fr 1fr; 
        gap: 32px; 
    }
    .footer-brand { grid-column: 1 / -1; }
    
    .platforms { padding: 36px 0; }
    .platforms-title { font-size: var(--type-h3-size); margin-bottom: 24px; }
    .platforms-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 420px; }
    .platform-name { font-size: var(--type-body-sm-size); }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .logo img { height: 40px; }
    
    .role-pill { padding: 8px 16px; font-size: var(--type-caption-size); }
    .role-pills { margin-bottom: 18px; }
    
    .hero-right { min-height: 240px; }
    .hero-cards { max-width: 280px; aspect-ratio: 280 / 260; }
    .hero-img-card { width: 72%; max-width: 200px; }
    
    .benefits-grid { grid-template-columns: 1fr; }
    .benefit-card { padding: 24px 20px; }
    
    .platforms-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
        max-width: 100%; 
    }
    .platform-icon, .platform-icon img { width: 44px; height: 44px; border-radius: 12px; }
    .platform-item { gap: 10px; }
    .platform-name { font-size: var(--type-caption-size); }
    
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    
    .cta-final-actions { flex-direction: column; }
    .cta-final .btn-primary,
    .cta-final .btn-secondary { width: 100%; }
    
    .earn-amount { font-size: 42px; }
    .pub-mini-banner { height: 70px; }
}

/* ============================================================
   MISC HELPERS (used in HTML, no inline styles)
   ============================================================ */

/* pub-mini-banner gradient fallbacks */
.pub-mini-banner--gradient-1 {
    background: linear-gradient(135deg, #2a1240, #0d0d12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: var(--type-caption-size);
    font-weight: 700;
    position: relative;
}
.pub-mini-banner--gradient-2 {
    background: linear-gradient(135deg, #3a1428, #0d0d12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: var(--type-caption-size);
    font-weight: 700;
    position: relative;
}

/* inbox-row right side wrapper */
.inbox-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* iv-stat-row lbl alias for pub-visual second block */
.iv-stat-row .lbl { color: rgba(255,255,255,0.65); font-size: var(--type-caption-size); }