/* ==========================================================================
   Homepage — premium dark overrides. Loaded AFTER home.css, homepage only.
   Converts the remaining light sections (why / achievements / nad / benefits /
   how / certs / partners) to the dark premium look used across the site.
   Hero, product showcase and the become_partner CTA are already dark.
   ========================================================================== */

:root { --hp-bg: #0a0d14; --hp-bg2: #0e131c; --hp-ink: #eaf1fb; --hp-muted: #93a3bd; --hp-acc: #1ed5c1; --hp-acc2: #38bdf8; --hp-line: rgba(255,255,255,.08); --hp-card: rgba(255,255,255,.035); }

body { background: var(--hp-bg); }

/* shared tokens for the restyled sections */
.tm-why, .tm-achievements, .tm-nad, .tm-benefits, .tm-how, .tm-certs, .tm-partners {
    color: var(--hp-ink);
}
.tm-why h2, .tm-achievements h2, .tm-nad h2, .tm-benefits h2, .tm-how h2, .tm-certs h2, .tm-partners h2 { color: var(--hp-ink); }
.tm-why .hl, .tm-achievements .hl, .tm-nad .hl, .tm-benefits .hl, .tm-how .hl, .tm-certs .hl, .tm-partners .hl {
    background: linear-gradient(120deg, var(--hp-acc), var(--hp-acc2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tm-why .kicker, .tm-nad .kicker, .tm-benefits .tm-benefits-subtitle, .tm-certs-subtitle { color: var(--hp-acc); }

/* WHY */
.tm-why { background: var(--hp-bg); min-height: auto; padding: clamp(64px,8vw,104px) 0; }
.tm-why-text h2 { color: var(--hp-ink); }
.tm-why-text .rich-text { color: var(--hp-muted); }
/* premium dark glass frame instead of the flat teal block; no negative-margin overlap */
.tm-why-card {
    aspect-ratio: 4 / 5;
    max-width: 380px;
    margin-left: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(30, 213, 193, 0.22);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 70px rgba(30, 213, 193, 0.10);
    background: radial-gradient(120% 120% at 50% 35%, rgba(30, 213, 193, 0.10), transparent 60%);
}
.tm-why-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none; mix-blend-mode: normal; }

/* ACHIEVEMENTS */
.tm-achievements { background: var(--hp-bg2); }
.tm-achievements .stat { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 18px; }
.tm-achievements .stat .number { background: linear-gradient(120deg, var(--hp-acc), var(--hp-acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-achievements .stat .label { color: var(--hp-muted); }

/* NAD LEADERS */
.tm-nad { background: var(--hp-bg); }
.tm-nad, .tm-nad p, .tm-nad li, .tm-nad .rich-text { color: var(--hp-muted); }
.tm-nad h2, .tm-nad h3 { color: var(--hp-ink); }
.tm-nad-media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(30, 213, 193, 0.22);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 70px rgba(30, 213, 193, 0.10);
    background: radial-gradient(120% 120% at 50% 35%, rgba(30, 213, 193, 0.10), transparent 60%);
}
.tm-nad-media img { display: block; width: 100%; height: auto; }

/* BENEFITS */
.tm-benefits { background: var(--hp-bg2); }
.tm-benefits-subtitle { color: var(--hp-muted); }
.tm-benefit-card { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 18px; transition: transform .25s ease, border-color .25s ease; }
.tm-benefit-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hp-acc) 45%, transparent); }
.tm-benefit-card h3 { color: var(--hp-ink); }
.tm-benefit-card p { color: var(--hp-muted); }
.tm-benefit-icon { background: color-mix(in srgb, var(--hp-acc) 12%, transparent); border-radius: 14px; }

/* HOW IT WORKS */
.tm-how { background: var(--hp-bg); }
.tm-how-content h2 { color: var(--hp-ink); }
/* numbered steps instead of plain lines */
.tm-how-list { counter-reset: how-step; gap: 16px; }
.tm-how-list li { color: var(--hp-ink); align-items: center; gap: 14px; }
.tm-how-list li::before {
    counter-increment: how-step;
    content: counter(how-step);
    width: 30px; height: 30px; border-radius: 999px;
    background: color-mix(in srgb, var(--hp-acc) 16%, transparent);
    border: 1px solid rgba(30, 213, 193, 0.5);
    color: var(--hp-acc);
    font-size: 14px; font-weight: 800;
    display: grid; place-items: center; flex: 0 0 auto; margin-top: 0;
}
/* real product photo as an intentional spotlight; inner vignette feathers the white edges into the dark theme */
.tm-how-media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.tm-how-media img { border-radius: 24px; border: none; }
.tm-how-media::after { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; box-shadow: inset 0 0 70px 22px rgba(10, 13, 20, 0.5); }

/* CERTIFICATIONS */
.tm-certs { background: var(--hp-bg2); }
.tm-certs-subtitle, .tm-certs-logos-title { color: var(--hp-muted); }
.tm-cert-card { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 18px; }
.tm-cert-card h3 { color: var(--hp-ink); }
.tm-cert-card p { color: var(--hp-muted); }
.tm-cert-icon { background: color-mix(in srgb, var(--hp-acc) 12%, transparent); border-radius: 14px; }
/* dark glass chips with readable light text (text labels); teal edge on hover */
.tm-cert-logo {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(30, 213, 193, 0.22);
    border-radius: 12px;
    padding: 16px 18px;
    display: grid;
    place-items: center;
    color: var(--hp-ink);
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.tm-cert-logo:hover { border-color: rgba(30, 213, 193, 0.5); background: rgba(30, 213, 193, 0.06); transform: translateY(-2px); }

/* PARTNERS */
.tm-partners { background: var(--hp-bg); }
.tm-partners .partner { background: rgba(255,255,255,.92); border-radius: 12px; padding: 12px 18px; display: grid; place-items: center; }
.tm-partners .partner span { color: #0f172a; }

/* section rhythm: subtle top hairline between dark bands */
.tm-achievements, .tm-benefits, .tm-certs { border-top: 1px solid var(--hp-line); }