/* ==========================================================
   GLOBAL
========================================================== */

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,sans-serif;

    background:
            radial-gradient(circle at 72% 18%,rgba(0,180,170,.16),transparent 28rem),
            radial-gradient(circle at 84% 36%,rgba(255,178,46,.08),transparent 24rem),
            linear-gradient(135deg,#02070d 0%,#03101b 45%,#02070d 100%);

    min-height:100vh;
}


/* ==========================================================
   PANELS
========================================================== */

.glass-panel{

    background:
            linear-gradient(
                    145deg,
                    rgba(10,27,42,.86),
                    rgba(5,14,24,.82)
            );

    border:1px solid rgba(114,145,168,.23);

    box-shadow:0 22px 70px rgba(0,0,0,.28);

    backdrop-filter:blur(16px);
}


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

.page-shell{

    padding:clamp(1rem,4vw,3.5rem);
}


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

.home-header{

    gap:clamp(.75rem,3vw,1.5rem);
}

.logo-link{

    min-width:0;
}

.logo-image{

    width:clamp(12.5rem,58vw,25rem);

    max-width:calc(100vw - 6rem);

    height:auto;

    display:block;
}

.menu-button{

    width:clamp(3.25rem,13vw,4rem);

    height:clamp(3.25rem,13vw,4rem);

    border-radius:clamp(.9rem,3vw,1rem);
}


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

.hero-section{

    padding-top:clamp(2rem,8vw,4rem);

    padding-bottom:clamp(1rem,4vw,1.5rem);
}

.hero-title{

    font-size:clamp(2rem,9vw,3.4rem);

    line-height:1.08;
}

.section-title{

    font-size:clamp(1.6rem,6vw,2.15rem);

    line-height:1.15;
}


/* ==========================================================
   ICONS
========================================================== */

.menu-button .lucide{

    width:clamp(1.8rem,7vw,2.15rem);

    height:clamp(1.8rem,7vw,2.15rem);
}

.cta-button .lucide{

    width:clamp(1.6rem,6vw,2rem);

    height:clamp(1.6rem,6vw,2rem);
}

.step-icon .lucide{

    width:clamp(1.5rem,6vw,1.8rem);

    height:clamp(1.5rem,6vw,1.8rem);
}

.sample-link .lucide{

    width:clamp(1.6rem,6vw,2rem);

    height:clamp(1.6rem,6vw,2rem);
}


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

.home-footer{

    font-size:clamp(.95rem,4vw,1.05rem);
}


/* ==========================================================
   READING PROGRESS
========================================================== */

#reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:
            linear-gradient(
                    90deg,
                    #10d8c4,
                    #ffb22e
            );

    z-index:9999;

    transition:width .08s linear;
}


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

@media (max-width:767px){

    .home-header{

        align-items:center;
    }

}

.eyebrow{
    margin-bottom:clamp(1.25rem,6vw,2rem);
    padding:clamp(.6rem,2.4vw,.75rem) clamp(.85rem,4vw,1.25rem);
    font-size:clamp(.72rem,3.5vw,.875rem);
    max-width:100%;
}

.hero-copy{
    margin-top:clamp(1.25rem,5vw,2rem);
    font-size:clamp(1rem,4.8vw,1.375rem);
    line-height:1.55;
}

.cta-stack{
    margin-top:clamp(1.75rem,7vw,2.5rem);
}

.cta-button{
    min-height:clamp(3.5rem,14vw,4.5rem);
    padding-inline:clamp(1rem,5vw,2rem);
    font-size:clamp(1.05rem,5vw,1.375rem);
    gap:clamp(.75rem,4vw,1.5rem);
}

.cta-label{
    min-width:0;
}

.section-panel{
    border-radius:clamp(1rem,5vw,1.5rem);
    padding:clamp(1.1rem,5vw,2.5rem);
}

.lucide{
    width:1.25rem;
    height:1.25rem;
    stroke-width:2;
    flex-shrink:0;
}