/* ==========================================================================
   CTM PATH™ MILLIONAIRES™

   FILE:
   css/page02.css


   VERSION:
   1.0


   PAGE:
   PAGE 02 — FINANCIAL CONFIDENCE DISCOVERY™


   PURPOSE:

   Premium financial awareness experience.

========================================================================== */





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


.page02 {


    min-height:

        100vh;



    width:

        100%;



    position:

        relative;



    overflow:

        hidden;



    background:


        linear-gradient(

            180deg,

            #081C3A 0%,

            #101820 55%,

            #0B1118 100%

        );



    color:

        #F8F5ED;


}









/* ==========================================================================
   PAGE CONTAINER
========================================================================== */


.page02-container {


    width:

        min(1200px,92%);



    margin:

        0 auto;



    padding:


        clamp(3rem,8vw,6rem) 0;



}









/* ==========================================================================
   JOURNEY INDICATOR
========================================================================== */


.page02 .journey-indicator {


    display:

        flex;



    justify-content:

        space-between;



    align-items:

        center;



    margin-bottom:


        3rem;



    padding:


        1rem 1.5rem;



    border:


        1px solid rgba(216,180,90,.3);



    border-radius:


        999px;



    background:


        rgba(255,255,255,.03);



    backdrop-filter:

        blur(10px);



}









.page02 .journey-title {


    color:

        #D8B45A;



    font-size:

        .85rem;



    font-weight:

        900;



    letter-spacing:

        .22em;



}









.page02 .journey-number {


    color:

        #23D4C8;



    font-weight:

        900;



}









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


.page02 .welcome-section {


    text-align:

        center;



    margin-bottom:


        4rem;



}









.page02 .welcome-section h1 {


    font-family:

        "Noto Sans Tamil",

        sans-serif;



    font-size:


        clamp(

            2rem,

            5vw,

            3.5rem

        );



    line-height:

        1.5;



    font-weight:

        900;



    color:

        #F8F5ED;



}









.page02 .english-subtitle {


    margin-top:

        1.2rem;



    color:

        #23D4C8;



    font-family:

        "Cinzel",

        serif;



    font-size:


        clamp(

            .9rem,

            2vw,

            1.2rem

        );



    letter-spacing:

        .15em;



}

/* ==========================================================================
   TRANSFORMATION / DISCOVERY MESSAGE
========================================================================== */


.page02 .transformation-section {


    max-width:

        900px;



    margin:

        0 auto 4rem;



    text-align:

        center;



    padding:

        0 1rem;



}









.page02 .transformation-section h2 {


    margin:

        0;



    font-family:

        "Noto Sans Tamil",

        sans-serif;



    font-size:


        clamp(

            1.8rem,

            5vw,

            3rem

        );



    line-height:

        1.5;



    font-weight:

        900;



    color:

        #F8F5ED;



}









.page02 .transformation-section h3 {


    margin-top:

        1.5rem;



    font-family:

        "Cinzel",

        serif;



    font-size:


        clamp(

            1.3rem,

            4vw,

            2.2rem

        );



    line-height:

        1.5;



    letter-spacing:

        .15em;



    color:

        #D8B45A;



}









.page02 .tamil-description {


    margin-top:

        2rem;



    color:

        rgba(248,245,237,.85);



    font-family:

        "Noto Sans Tamil",

        sans-serif;



    font-size:

        1.1rem;



    line-height:

        1.9;



}









.page02 .english-description {


    margin-top:

        1rem;



    color:

        #23D4C8;



    font-family:

        "Cinzel",

        serif;



    letter-spacing:

        .08em;



}









/* ==========================================================================
   DISCOVERY CARDS
========================================================================== */


.page02 .discovery-cards {


    display:

        grid;



    grid-template-columns:

        repeat(

            3,

            1fr

        );



    gap:


        1.8rem;



    margin:


        4rem 0;



}









.page02 .discovery-card {


    position:

        relative;



    min-height:

        190px;



    display:

        flex;



    flex-direction:

        column;



    align-items:

        center;



    justify-content:

        center;



    text-align:

        center;



    padding:


        2.5rem 1.5rem;



    border-radius:

        24px;



    background:


        linear-gradient(

            145deg,

            rgba(255,255,255,.06),

            rgba(255,255,255,.015)

        );



    border:


        1px solid rgba(216,180,90,.35);



    box-shadow:


        0 18px 50px rgba(0,0,0,.25);



    overflow:

        hidden;



    transition:


        transform .35s ease,

        border-color .35s ease;



}









.page02 .discovery-card::before {


    content:"";



    position:

        absolute;



    inset:

        8px;



    border-radius:

        18px;



    border:


        1px solid rgba(35,212,200,.2);



    pointer-events:

        none;



}









.page02 .discovery-card h3 {


    position:

        relative;



    z-index:

        1;



    margin:

        0 0 1rem;



    color:

        #F8F5ED;



    font-family:

        "Noto Sans Tamil",

        sans-serif;



    font-size:

        1.35rem;



    font-weight:

        900;



}









.page02 .discovery-card p {


    position:

        relative;



    z-index:

        1;



    margin:

        0;



    color:

        #23D4C8;



    font-family:

        "Cinzel",

        serif;



    font-size:

        .9rem;



    letter-spacing:

        .1em;



}









.page02 .discovery-card:hover,

.page02 .discovery-card.active {


    transform:

        translateY(-8px);



    border-color:

        rgba(216,180,90,.85);



}

/* ==========================================================================
   PAGE 02 CTA SYSTEM
========================================================================== */


.page02 .journey-cta {


    display:

        flex;



    justify-content:

        center;



    margin-top:


        4rem;



    padding:

        0 1rem;



}









.page02 .journey-button {


    position:

        relative;



    display:

        flex;



    flex-direction:

        column;



    align-items:

        center;



    justify-content:

        center;



    width:

        min(100%,420px);



    min-height:

        92px;



    padding:


        1.4rem 2rem;



    border-radius:

        22px;



    text-decoration:

        none;



    text-align:

        center;



    background:


        linear-gradient(

            135deg,

            #23D4C8,

            #087F8C

        );



    border:


        1px solid rgba(255,255,255,.35);



    box-shadow:


        0 18px 45px rgba(0,0,0,.35);



    transition:


        transform .35s ease,

        box-shadow .35s ease;



    overflow:

        hidden;



}









.page02 .journey-button::before {


    content:"";



    position:

        absolute;



    inset:

        0;



    background:


        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );



    transform:

        translateX(-120%);



    transition:

        transform .6s ease;



}









.page02 .journey-button:hover::before {


    transform:

        translateX(120%);



}









.page02 .journey-button:hover,

.page02 .journey-button:focus {


    transform:

        translateY(-5px);



    box-shadow:


        0 25px 60px rgba(0,0,0,.45);



}









.page02 .button-primary {


    position:

        relative;



    z-index:

        1;



    color:

        #081C3A;



    font-family:

        "Noto Sans Tamil",

        sans-serif;



    font-size:


        clamp(

            1.15rem,

            4vw,

            1.7rem

        );



    font-weight:

        900;



    line-height:

        1.5;



}









.page02 .button-secondary {


    position:

        relative;



    z-index:

        1;



    margin-top:

        .35rem;



    color:

        #081C3A;



    font-family:

        "Cinzel",

        serif;



    font-size:


        clamp(

            .65rem,

            2vw,

            .85rem

        );



    letter-spacing:

        .12em;



    font-weight:

        700;



}









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


@media(max-width:768px){



.page02 {


    width:

        100%;



    overflow-x:

        hidden;



}









.page02-container {


    width:

        calc(100% - 32px);



    padding:


        2.5rem 0 4rem;



}









.page02 .journey-indicator {


    padding:


        .8rem 1rem;



}









.page02 .journey-title {


    font-size:

        .65rem;



    letter-spacing:

        .12em;



}









.page02 .discovery-cards {


    grid-template-columns:

        1fr;



    gap:


        1.2rem;



}









.page02 .discovery-card {


    min-height:

        150px;



    padding:


        2rem 1.2rem;



}









.page02 .journey-button {


    width:

        100%;



    min-height:

        88px;



    padding:


        1.2rem 1rem;



}



}









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


@media(max-width:480px){



.page02-container {


    width:

        calc(100% - 24px);



}









.page02 .welcome-section h1 {


    font-size:

        1.8rem;



}









.page02 .transformation-section h2 {


    font-size:

        2rem;



}









.page02 .button-primary {


    font-size:

        1.05rem;



}



}

/* ==========================================================================
   PAGE 02 FOOTER TRANSITION
========================================================================== */


.page02::after {


    content:"";



    display:

        block;



    height:

        120px;



    background:


        linear-gradient(

            180deg,

            transparent,

            rgba(8,28,58,.45)

        );



}









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


.page02,

.page02 * {


    max-width:

        100%;



}



.page02 {


    overflow-x:

        hidden;



}









/* ==========================================================================
   ACCESSIBILITY FOCUS STATES
========================================================================== */


.page02 .journey-button:focus-visible {


    outline:

        3px solid #D8B45A;



    outline-offset:

        6px;



}









.page02 .discovery-card:focus-visible {


    outline:

        2px solid #23D4C8;



    outline-offset:

        4px;



}









/* ==========================================================================
   REDUCED MOTION
========================================================================== */


@media(prefers-reduced-motion:reduce){



.page02 *,

.page02 *::before,

.page02 *::after {


    animation:

        none !important;



    transition:

        none !important;



}



}









/* ==========================================================================
   VERY SMALL DEVICES
========================================================================== */


@media(max-width:360px){



.page02-container {


    width:

        calc(100% - 20px);



}









.page02 .journey-indicator {


    flex-direction:

        column;



    gap:

        .8rem;



}









.page02 .button-primary {


    font-size:

        1rem;



}



}