/* ==========================================================================
   HOME PAGE: Hero + Features + CTA
   ========================================================================= */

@layer home {

    /* ==========================================================================
       1. HOME HERO – visual semantics only
       ========================================================================= */

    .c-home-hero {
        padding-block: clamp(var(--space-10), 10vh, var(--space-12));
        background: light-dark(
            linear-gradient(135deg, oklch(98% 0.01 210) 0%, oklch(95% 0.01 210) 100%),
            linear-gradient(135deg, oklch(10% 0.01 210) 0%, oklch(5% 0.01 210) 100%)
        );
        /* no layout here; that’s in HTML with o-objects / u-utilities */
    }

    .c-home-hero__title {
        /* already a base typography helper */
        font-size: clamp(2.5rem, 8vw, 5rem);
        font-weight: 900;
        line-height: 1.1;
        margin-block: 0;
        color: var(--color-primary);
    }

    .c-home-hero__lead {
        /* already a base text helper */
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        margin-block: var(--space-8) var(--space-6);
        color: var(--color-fg-2);
    }

    .c-home-hero__server-time {
        opacity: 0.8;
        font-family: ui-monospace, SFMono-Regular, 'Consolas', monospace;
        /* already a base text helper */
        font-size: var(--font-size-sm);
        color: var(--color-fg-3);
    }

    .c-home-hero__actions {
        margin-block: var(--space-4);
        /* no layout here; it’s in HTML: o-cluster / u-justify-*, u-gap-*, etc. */
    }

    /* @layer home – no .u-foo here; keep utilities in @layer utilities */


    /* ==========================================================================
       2. FEATURES SECTION – composition only
       ========================================================================= */

    .c-home-features {
        padding-block: var(--space-10);
        background: var(--color-bg-subtle);
    }

    .c-home-features__header {
        text-align: center;
        margin-block-end: var(--space-10);
    }

    .c-home-features__title {
        /* use existing base heading helper */
        font-size: var(--font-size-4xl);
        color: var(--color-fg-1);
    }


    /* ==========================================================================
       3. FEATURE CARDS (extend c-card, not layout)
       ========================================================================= */

    .c-feature-card {
        /* almost entirely from c-card; only add visual tweaks */
        background: var(--color-bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--space-8);
        min-height: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .c-feature-card:hover {
        transform: translateY(-0.5rem);
        box-shadow: var(--elevation-lg);
    }

    .c-feature-card__title {
        margin-block: 0 var(--space-2);
        /* text‑base heading helper */
        color: var(--color-fg-1);
        font-size: var(--font-size-2xl);
    }

    .c-feature-card__text {
        /* text‑base body helper */
        color: var(--color-fg-2);
        line-height: 1.6;
    }


    /* ==========================================================================
       4. CTA SECTION – composition only
       ========================================================================= */

    .c-home-cta {
        padding-block: clamp(var(--space-10), 8vh, var(--space-12));
        background: light-dark(
            linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%),
            linear-gradient(135deg, oklch(8% 0.01 210) 0%, oklch(3% 0.01 210) 100%)
        );
        text-align: center;
    }

    .c-home-cta__title {
        /* text‑base heading helper */
        font-size: clamp(1.875rem, 5vw, 3.5rem);
        font-weight: 800;
        margin-block: 0 var(--space-6);
        color: var(--color-primary);
    }

    .c-home-cta__text {
        /* text‑base helper */
        font-size: var(--font-size-lg);
        opacity: 0.9;
        color: var(--color-fg-2);
        /* max-width: 60ch is in HTML via layout: o-container + u-max-w‑* */
    }

    .c-home-cta__actions {
        margin-block: var(--space-6);
        /* layout: o-cluster / o-stack / u-justify-*, u-gap-* in HTML */
    }

}