/* =============================================================================
   MYCRED — HOME PREMIUM LAYER
   Pure-monochrome, editorial elevation for the landing page only (body.home).
   Loaded AFTER styles.css; only index.html links it, and every selector is
   scoped to .home, so the other pages are completely untouched.

   The whole idea: on a monochrome page, TYPOGRAPHY + RHYTHM + STRUCTURE do the
   work colour normally would. Big lowercase serif display, uppercase mono
   metadata, hairline rules, generous air, one editorial system end to end.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TYPE FOUNDATION
   Display headings: lowercase serif, tight, balanced. Metadata: uppercase mono.
   -------------------------------------------------------------------------- */
.home { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.home h1,
.home h2,
.home .section-title,
.home .cta-card h2,
.home .value-prop h2 {
    letter-spacing: -0.022em;
    text-wrap: balance;
}

/* serif emphasis inside display headings — a subtle shade shift, no italic */
.home .text-gradient,
.home .hero-em {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--ink-2);
}

.home p { text-wrap: pretty; }

/* -----------------------------------------------------------------------------
   2. RHYTHM — more air between ideas reads as "premium" more than anything
   -------------------------------------------------------------------------- */
.home .section { padding: 138px 0; }
.home .value-prop { padding: 138px 0; }

/* -----------------------------------------------------------------------------
   3. EDITORIAL KICKER + SECTION HEADER
   A wide-tracked mono label with an index number and a hairline rule.
   -------------------------------------------------------------------------- */
.home .section-header { max-width: 720px; margin-bottom: 76px; }

.home .section-tag {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}

/* leading hairline rule on every kicker */
.home .section-tag::before {
    content: "";
    width: 26px;
    height: 1px;
    margin-right: 16px;
    background: var(--line-2);
    flex-shrink: 0;
}

/* centered headers get a trailing rule too, and center themselves */
.home .section-header .section-tag { justify-content: center; }
.home .section-header .section-tag::after {
    content: "";
    width: 26px;
    height: 1px;
    margin-left: 16px;
    background: var(--line-2);
    flex-shrink: 0;
}

/* mono index numeral: "01 / label" */
.home .kicker-num { color: var(--ink-2); }
.home .kicker-num::after {
    content: "/";
    margin: 0 10px;
    color: var(--line-2);
}

/* retire the old Font Awesome icons in kickers for a cleaner mono look */
.home .section-tag > i { display: none; }

.home .section-title {
    font-size: clamp(2.15rem, 4vw, 3.4rem);
    line-height: 1.05;
    margin-bottom: 20px;
}

.home .section-subtitle {
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--body);
}

/* -----------------------------------------------------------------------------
   4. HERO — quieter, bigger, more confident
   -------------------------------------------------------------------------- */
.home .hero-content { max-width: 920px; }

.home .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 30px;
}
.home .hero-eyebrow::before,
.home .hero-eyebrow::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, .28);
}
.home .hero-eyebrow::before { margin-right: 16px; }
.home .hero-eyebrow::after { margin-left: 16px; }

.home .hero h1 {
    text-transform: none;   /* keep the sentence-case capital in the markup */
    font-size: clamp(3rem, 6.4vw, 5.4rem);
    line-height: 1.0;
    letter-spacing: -0.032em;
    margin-bottom: 26px;
}
.home .hero-em { color: rgba(255, 255, 255, .8); }

.home .hero-subtitle {
    font-size: 1.12rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .72);
    max-width: 588px;
    margin-bottom: 42px;
}

/* trust bar → hairline-topped row of mono metadata */
.home .hero-trust-bar {
    gap: 12px 30px;
    margin: 6px auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.home .hero .trust-item {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: .73rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}
.home .hero .trust-item i { color: rgba(255, 255, 255, .5); }

.home .btn { letter-spacing: .14em; }

/* -----------------------------------------------------------------------------
   5. WHY MYCRED — a scroll-revealed storyline
   home.js splits the paragraph into words; each brightens as it rises through
   the viewport. Falls back to fully-lit text if the script never runs.
   -------------------------------------------------------------------------- */
.home .story-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.home .story-inner .section-tag { justify-content: center; margin-bottom: 44px; }
.home .story-inner .section-tag::after {
    content: "";
    width: 26px;
    height: 1px;
    margin-left: 16px;
    background: var(--line-2);
    flex-shrink: 0;
}
.home .story-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.9vw, 2.35rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.home .story-cta { margin-top: 52px; }

/* Each word is its own transformable box so it can physically rise into place
   (transform has no effect on plain inline boxes). Whitespace between words is
   kept as real text nodes by home.js, so wrapping stays natural. */
.home .reveal-text .reveal-word {
    display: inline-block;
    vertical-align: baseline;
}

/* words only start dim + dropped once home.js has taken over
   (keeps text fully legible if the script never runs) */
.home .reveal-text.reveal-ready .reveal-word {
    opacity: .1;
    transform: translateY(0.42em);
}
/* No CSS transition here on purpose: opacity AND transform are scroll-linked and
   updated per-frame by home.js. A transition re-firing on every word each frame
   was what made the reveal lag — the soft edge in the JS gives the smoothness. */

/* -----------------------------------------------------------------------------
   6. COUNTERS — number-forward stat row, hairline dividers, no icon chips
   -------------------------------------------------------------------------- */
.home .counter-section {
    background: var(--bg-deep);
    padding: 100px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.home .counter-section::before { opacity: .16; }
.home .counter-grid { gap: 0; }
.home .counter-item {
    padding: 6px 30px;
    border-left: 1px solid var(--line);
}
.home .counter-item:first-child { border-left: 0; }
.home .counter-icon { display: none; }
.home .counter-number,
.home .counter-suffix {
    font-size: clamp(2.7rem, 4.6vw, 3.7rem);
    letter-spacing: -0.02em;
}
.home .counter-label {
    margin-top: 14px;
    font-size: .67rem;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .46);
}

/* -----------------------------------------------------------------------------
   7. HOW IT WORKS — big serif numerals, hairline columns, no cards/chevrons
   -------------------------------------------------------------------------- */
.home .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.home .step-connector { display: none; }
.home .step-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 4px 32px 0;
    text-align: left;
}
.home .step-card:first-child { border-left: 0; padding-left: 0; }
.home .step-card:hover { transform: none; box-shadow: none; background: transparent; }
.home .step-number {
    position: static;
    transform: none;
    display: block;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 22px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    color: var(--ink);
}
.home .step-icon { display: none; }
.home .step-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.home .step-card p { font-size: .92rem; line-height: 1.62; color: var(--body); }

/* -----------------------------------------------------------------------------
   8. TESTIMONIALS
   The home page deliberately carries NO testimonial overrides: the cards use the
   base .testimonial-card treatment from styles.css, so they match the ones on
   check-eligibility (solid surface, hairline border, left-aligned quote + author).
   The review-video carousel that sits beside them there is NOT used here.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   9. FAQ — a clean hairline-divided list, questions set in serif
   -------------------------------------------------------------------------- */
.home .faq-grid { max-width: 820px; gap: 0; }
.home .faq-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}
.home .faq-item:last-child { border-bottom: 1px solid var(--line); }
.home .faq-item.active { box-shadow: none; }
.home .faq-question {
    padding: 30px 6px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.12rem, 2vw, 1.42rem);
    letter-spacing: -0.01em;
    color: var(--ink);
}
.home .faq-question i {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--ink-2);
    width: 34px;
    height: 34px;
}
.home .faq-item.active .faq-question i { background: var(--chip); border-color: var(--chip); color: var(--on-chip); }
.home .faq-answer p {
    padding: 0 6px 30px;
    font-size: .98rem;
    line-height: 1.72;
    color: var(--body);
    max-width: 640px;
}
.home .faq-item.active .faq-answer { max-height: 420px; }

/* -----------------------------------------------------------------------------
   10. CTA — one oversized serif statement
   -------------------------------------------------------------------------- */
.home .cta-section { padding: 40px 0 138px; }
.home .cta-card {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    padding: 100px 56px;
}
.home .cta-card h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.08; }
.home .cta-card p { font-size: 1.08rem; line-height: 1.7; max-width: 560px; }

/* -----------------------------------------------------------------------------
   11. MARQUEE + FOOTER polish
   -------------------------------------------------------------------------- */
.home .banks-title {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .28em;
}
.home .banks-title i { display: none; }

/* footer column headers as mono kickers */
.home .footer h4 {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* -----------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .home .section { padding: 94px 0; }
    .home .value-prop { padding: 94px 0; }
    .home .value-prop-inner { grid-template-columns: 1fr; gap: 44px; }

    .home .steps-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; column-gap: 40px; }
    .home .step-card { border-left: 0; padding-left: 0; }

    .home .counter-grid { grid-template-columns: 1fr 1fr; row-gap: 52px; }
    .home .counter-item { border-left: 0; padding: 0 16px; }

    .home .cta-card { padding: 72px 32px; }
}

@media (max-width: 768px) {
    /* on a phone the headline carries the hero on its own — the supporting
       paragraph just pushes the CTA below the fold */
    .home .hero-subtitle { display: none; }
}

@media (max-width: 560px) {
    .home .section { padding: 76px 0; }
    .home .value-prop { padding: 76px 0; }
    .home .steps-grid { grid-template-columns: 1fr; row-gap: 40px; }
    .home .counter-grid { grid-template-columns: 1fr 1fr; }
    .home .section-header { margin-bottom: 52px; }
    .home .hero-trust-bar { flex-direction: column; align-items: flex-start; }
}