/* =========================================================
   HAHU YOUTH TECHNOLOGY
   PUBLIC LANDING PAGE
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --navy: #173d62;
    --navy-dark: #102f4d;

    --blue: #2f80d1;
    --blue-light: #eaf4ff;

    --purple: #7354c7;
    --purple-light: #f0ebff;

    --cyan: #2aa7c8;
    --green: #2c9b62;

    --gold: #e5a51e;

    --text: #344955;
    --muted: #6d7d89;

    --page: #f7f9fc;
    --white: #ffffff;

    --border: #dce5ed;

    --radius: 18px;

    --shadow:
        0 12px 30px
        rgba(34, 59, 84, .09);
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--page) 100%
        );

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}


/* =========================================================
   SHARED HEADER
   ========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background:
        rgba(255,255,255,.96);

    border-bottom:
        1px solid
        rgba(28, 68, 102, .10);

    backdrop-filter:
        blur(12px);
}

.site-header-inner {

    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    min-height: 72px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.site-brand {

    display: flex;

    align-items: center;

    gap: 10px;
}

.site-logo {

    width: 46px;
    height: 46px;

    object-fit: contain;
}

.site-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.14;
}

.site-brand-text strong {

    color: var(--navy);

    font-size: 1.05rem;
    font-weight: 900;
}

.site-brand-text small {

    margin-top: 3px;

    color: var(--muted);

    font-size: .68rem;
    font-weight: 700;
}

.site-nav {

    display: flex;

    align-items: center;

    gap: 23px;
}

.site-nav a {

    color: #506979;

    font-size: .86rem;
    font-weight: 800;
}

.site-nav a:hover,
.site-nav a.active {

    color: var(--purple);
}


/* =========================================================
   HERO
   ========================================================= */

.youth-hero {

    padding:
        54px 18px 50px;

    background:

        radial-gradient(
            circle at 82% 14%,
            rgba(115,84,199,.13),
            transparent 29%
        ),

        radial-gradient(
            circle at 10% 10%,
            rgba(47,128,209,.11),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fd 100%
        );
}

.youth-hero-inner {

    width:
        min(
            1180px,
            100%
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(420px, 1.1fr);

    gap: 42px;

    align-items: center;
}

.hero-eyebrow,
.section-eyebrow {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--purple);

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.youth-hero h1 {

    max-width: 610px;

    margin-bottom: 15px;

    color: var(--navy);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.4rem
        );

    font-weight: 900;

    line-height: .96;

    letter-spacing: -.045em;
}

.youth-hero h1 span {

    color: var(--purple);
}

.hero-lead {

    max-width: 610px;

    margin-bottom: 20px;

    color: #586f7e;

    font-size: 1rem;

    line-height: 1.68;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.hero-button {

    min-height: 44px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        9px 16px;

    border-radius: 11px;

    font-size: .82rem;

    font-weight: 850;
}

.hero-button-primary {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color: #ffffff;

    box-shadow:
        0 7px 16px
        rgba(89, 75, 190, .20);
}

.hero-button-secondary {

    background: #ffffff;

    color: var(--navy);

    border:
        1px solid
        #cbd8e3;
}


/* =========================================================
   HERO VALUES
   ========================================================= */

.hero-values {

    display: flex;

    flex-wrap: wrap;

    gap:
        7px 14px;

    margin-top: 16px;
}

.hero-values span {

    color: #587163;

    font-size: .72rem;

    font-weight: 750;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.youth-hero-visual {

    min-width: 0;
}

.hero-image-card {

    overflow: hidden;

    border:
        1px solid
        #dce5ec;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        var(--shadow);
}

.hero-image-card img {

    width: 100%;

    aspect-ratio:
        16 / 10;

    object-fit: cover;

    object-position:
        center 42%;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.youth-pathway,
.learning-model,
.youth-audience,
.youth-cta {

    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin:
        0 auto;
}

.youth-pathway,
.learning-model {

    padding:
        64px 0;
}

.section-heading {

    max-width: 760px;

    margin:
        0 auto 28px;

    text-align: center;
}

.section-heading h2,
.learning-model-content h2,
.youth-audience h2,
.youth-cta h2 {

    margin-bottom: 9px;

    color: var(--navy);

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.45rem
        );

    line-height: 1.15;
}

.section-heading p,
.learning-model-content p,
.youth-audience p,
.youth-cta p {

    color: #647785;
}


/* =========================================================
   LEARNING PATHWAY GRID
   ========================================================= */

.pathway-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.pathway-card {

    position: relative;

    min-width: 0;

    padding: 21px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 6px 16px
        rgba(42, 63, 83, .05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.pathway-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #c8d7e5;

    box-shadow:
        0 11px 24px
        rgba(42, 63, 83, .09);
}

.pathway-number {

    position: absolute;

    top: 14px;
    right: 15px;

    color:
        rgba(115, 84, 199, .32);

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .07em;
}

.pathway-icon {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 13px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--blue-light),
            var(--purple-light)
        );

    color: var(--purple);

    font-size: 1.35rem;

    font-weight: 900;
}

.pathway-card h3 {

    margin-bottom: 6px;

    color: var(--navy);

    font-size: 1.05rem;
}

.pathway-card p {

    margin-bottom: 0;

    color: #6a7c89;

    font-size: .82rem;

    line-height: 1.55;
}


/* =========================================================
   HOW LEARNING WORKS
   ========================================================= */

.learning-model {

    display: grid;

    grid-template-columns:
        minmax(0, .78fr)
        minmax(0, 1.22fr);

    gap: 42px;

    align-items: center;

    border-top:
        1px solid
        #e2e9ef;
}

.learning-model-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.learning-model-card {

    padding: 18px;

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    background: #ffffff;
}

.learning-model-card > span {

    display: block;

    margin-bottom: 8px;

    font-size: 1.35rem;
}

.learning-model-card h3 {

    margin-bottom: 5px;

    color: var(--navy);

    font-size: 1rem;
}

.learning-model-card p {

    margin-bottom: 0;

    color: #6b7d89;

    font-size: .79rem;
}


/* =========================================================
   AUDIENCE SECTION
   ========================================================= */

.youth-audience {

    margin-top: 8px;
    margin-bottom: 56px;

    padding: 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .6fr);

    gap: 28px;

    align-items: center;

    border:
        1px solid
        #d9e3eb;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f8f5ff
        );
}

.youth-audience p {

    margin-bottom: 0;
}

.audience-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    justify-content: center;
}

.audience-tags span {

    padding:
        8px 11px;

    border:
        1px solid
        #d6e0ea;

    border-radius:
        999px;

    background: #ffffff;

    color: #536a7a;

    font-size: .74rem;

    font-weight: 800;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.youth-cta {

    margin-bottom: 58px;

    padding: 30px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            #493f97
        );

    color: #ffffff;
}

.youth-cta .section-eyebrow {

    color: #9dcfff;
}

.youth-cta h2 {

    color: #ffffff;
}

.youth-cta p {

    margin-bottom: 0;

    color: #cfdaea;
}

.youth-cta-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    justify-content: flex-end;
}

.youth-cta-actions a {

    min-height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        8px 12px;

    border-radius: 10px;

    font-size: .76rem;

    font-weight: 850;
}

.youth-cta-primary {

    background: #ffffff;

    color: var(--purple);
}

.youth-cta-secondary {

    border:
        1px solid
        rgba(255,255,255,.24);

    background:
        rgba(255,255,255,.08);

    color: #ffffff;
}


/* =========================================================
   SHARED FOOTER
   ========================================================= */

.site-footer {

    border-top:
        1px solid
        #dce4ea;

    background:
        #ffffff;
}

.site-footer-inner {

    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin:
        0 auto;

    padding:
        26px 0;

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items: center;

    gap: 22px;
}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 9px;
}

.footer-logo {

    width: 40px;
    height: 40px;

    object-fit: contain;
}

.site-footer strong {
    color: var(--navy);
}

.site-footer p {

    margin:
        3px 0 0;

    color: #75848e;

    font-size: .72rem;
}

.footer-links {

    display: flex;

    gap: 15px;
}

.footer-links a {

    color: #647784;

    font-size: .76rem;

    font-weight: 750;
}

.footer-copy {

    margin:
        0 !important;

    text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .site-nav {
        display: none;
    }

    .youth-hero-inner {

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .hero-image-card img {

        aspect-ratio:
            16 / 8;
    }

    .pathway-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .learning-model {

        grid-template-columns:
            1fr;
    }

    .youth-audience {

        grid-template-columns:
            1fr;
    }

    .youth-cta {

        flex-direction: column;

        align-items: flex-start;
    }

    .youth-cta-actions {

        justify-content: flex-start;
    }

    .site-footer-inner {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-brand {

        justify-content: center;
    }

    .footer-links {

        justify-content: center;
    }

    .footer-copy {

        text-align: center;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .site-header-inner {

        width:
            calc(100% - 26px);
    }

    .site-logo {

        width: 42px;
        height: 42px;
    }

    .youth-hero {

        padding:
            42px 15px;
    }

    .youth-hero h1 {

        font-size: 2.6rem;
    }

    .hero-actions {

        flex-direction: column;
    }

    .hero-button {

        width: 100%;
    }

    .hero-values {

        flex-direction: column;

        gap: 5px;
    }

    .hero-image-card img {

        aspect-ratio:
            16 / 10;
    }

    .youth-pathway,
    .learning-model {

        padding:
            44px 0;
    }

    .pathway-grid {

        grid-template-columns:
            1fr;
    }

    .learning-model-grid {

        grid-template-columns:
            1fr;
    }

    .youth-audience,
    .youth-cta {

        width:
            calc(100% - 28px);

        padding: 21px;
    }

    .audience-tags {

        justify-content: flex-start;
    }

    .youth-cta-actions {

        width: 100%;

        flex-direction: column;
    }

    .youth-cta-actions a {

        width: 100%;

        text-align: center;
    }

}