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

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-width:320px;
    background:var(--surface-1);
    color:var(--text-secondary);
    font-family:var(--font-main);
    line-height:1.6;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

[hidden]{
    display:none !important;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0 0 .5em;
    color:var(--text-primary);
    font-family:var(--font-heading);
    font-weight:700;
    line-height:1.15;
}

h1{
    font-size:clamp(2.4rem,5vw,3.8rem);
}

h2{
    font-size:clamp(1.8rem,3vw,2.6rem);
}

h3{
    font-size:1.5rem;
}

h4{
    font-size:1.15rem;
}

p{
    margin:0 0 1rem;
    color:var(--text-secondary);
}

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

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

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

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

main{
    width:100%;
}

.page-section{
    width:100%;
    padding:80px 24px;
    background:var(--surface-1);
}

.container{
    width:min(100%,var(--content-width));
    margin-inline:auto;
}

section{
    width:100%;
}

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

.hero{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:620px;

    padding:110px 24px 100px;

    background:var(--surface-1);

    color:var(--text-primary);

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

.hero.compact{
    min-height:auto;
    padding:80px 24px;
}

.hero-content{
    width:min(100%,900px);
    margin:auto;
    text-align:center;
}

.hero h1{
    color:var(--text-primary);
    margin-bottom:20px;
}

.hero p{
    max-width:720px;
    margin:0 auto 36px;
    color:var(--text-muted);
    font-size:1.15rem;
}

.hero-actions{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

/* ==========================================================
   GRIDS
========================================================== */

.grid{
    display:grid;
    gap:24px;
}

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

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

.grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

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

#footer{
    padding:42px 24px;

    background:var(--surface-2);

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

#footer p{
    margin:0;
    color:var(--text-muted);
}

.footer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;

    max-width:1200px;
    margin:0 auto;
}

.footer-credit{
    display:grid;
    gap:4px;

    text-align:left;
}

.footer-policies{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;

    text-align:right;
}

.footer-policies-label{
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.footer-policies a{
    color:var(--gold-light);
    font-weight:700;
    text-decoration:none;
}

.footer-policies a:hover{
    text-decoration:underline;
}

@media(max-width:700px){
    .footer-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-policies{
        text-align:left;
    }
}

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

@media(max-width:900px){

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-3{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:700px){

    .hero{
        min-height:auto;
        padding:90px 20px 70px;
    }

    .page-section{
        padding:64px 20px;
    }

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

}

.home-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            ellipse 900px 500px at 50% -10%,
            color-mix(in srgb, var(--gold) 22%, transparent),
            transparent 70%
        ),
        var(--surface-1);
}

.home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--gold-light) 35%, transparent) 1px,
            transparent 1px
        );
    background-size:28px 28px;
    opacity:0.12;
    pointer-events:none;
    z-index:0;
}

.home-hero .hero-content{
    position:relative;
    z-index:1;
}

.home-hero-logo{
    position:absolute;
    top:24px;
    right:24px;
    width:clamp(56px,8vw,88px);
    height:clamp(56px,8vw,88px);
    margin:0;
    border-radius:50%;
    object-fit:cover;
    object-position:top center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

.home-hero-title span{
    display:block;
}

.home-hero-title span:last-child{
    margin-top:10px;
    color:var(--gold-light);
    font-family:var(--font-body);
    font-size:clamp(1.15rem,2.4vw,1.7rem);
    font-weight:700;
    line-height:1.35;
}

.daily-quote{
    max-width:720px;
    margin:0 auto 36px;
    color:var(--text-muted);
}

.daily-quote blockquote{
    margin:0;
    font-size:1.08rem;
    font-style:italic;
    line-height:1.65;
}

.daily-quote figcaption{
    margin-top:8px;
    color:var(--text-secondary);
    font-size:.9rem;
    font-weight:700;
}