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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================
   VARIABLES
========================================== */

:root{

    --dark:#111111;
    --dark-secondary:#171717;

    --text:#F4F4F4;
    --text-light:#B8B8B8;

    --accent:#8C7A4F;

    --card:rgba(255,255,255,.03);

    --border:rgba(255,255,255,.07);

    --shadow:
        0 20px 60px rgba(0,0,0,.35);

}

/* ==========================================
   BASE
========================================== */

html{
    scroll-behavior:smooth;
}

body{

    background:var(--dark);

    color:var(--text);

    font-family:'Inter',sans-serif;

    overflow-x:hidden;
}

a{
    text-decoration:none;
}

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

.content{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 10%;
}

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

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 10%;

    background:rgba(17,17,17,.9);

    backdrop-filter:blur(20px);

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

    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    color:white;
}

.menu{

    display:flex;

    gap:30px;
}

.menu a{

    color:var(--text-light);

    transition:.3s ease;
}

.menu a:hover,
.menu a.active{

    color:var(--accent);
}

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

.free-hero{

    min-height:75vh;

    display:flex;

    align-items:center;

    position:relative;
}

.free-hero::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(140,122,79,.16),
            transparent 65%
        );

    pointer-events:none;
}

.free-hero .content{

    position:relative;
    z-index:2;
}

.eyebrow{

    display:inline-block;

    margin-bottom:24px;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;
}

.free-hero h1{

    max-width:900px;

    font-family:'Cormorant Garamond',serif;

    font-size:5rem;

    line-height:.95;

    margin-bottom:30px;
}

.free-hero p{

    max-width:700px;

    color:var(--text-light);

    font-size:1.15rem;

    line-height:1.9;
}

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

.section{

    padding:120px 0;
}

.dark{

    background:var(--dark);
}

.light{

    background:var(--dark-secondary);
}

.section-header{

    margin-bottom:60px;
}

.section-header h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3.6rem;

    margin-bottom:20px;
}

.section-header p{

    max-width:700px;

    color:var(--text-light);

    line-height:1.9;
}

/* ==========================================
   MATERIALS
========================================== */

.free-materials-grid,
.materials-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,380px));
    justify-content:start;
    gap:28px;
}

.free-materials-library__content{
    max-width:1280px;
    padding-right:clamp(24px,5vw,64px);
    padding-left:clamp(24px,5vw,64px);
}

.free-materials-library .section-header{
    margin-bottom:48px;
}

.free-material-card,
.material-card{
    position:relative;
    display:flex;
    width:100%;
    min-width:0;
    max-width:420px;
    flex-direction:column;
    background:
        radial-gradient(circle at 100% 100%, rgba(140,122,79,.09), transparent 42%),
        #191919;
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    box-shadow:0 18px 48px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    overflow:hidden;
}

.free-material-card:only-child{
    width:min(100%,380px);
}

.free-material-card:hover,
.material-card:hover{
    transform:translateY(-6px);
    border-color:rgba(194,171,114,.42);
    box-shadow:0 26px 64px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

.free-material-preview{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    flex:none;
    overflow:hidden;
    background:#0b0b0b;
    border-bottom:1px solid rgba(255,255,255,.08);
    isolation:isolate;
}

.free-material-preview::after{
    content:'';
    position:absolute;
    z-index:2;
    inset:0;
    background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.72) 100%);
    pointer-events:none;
}

.free-material-preview-media{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.01);
    transition:transform .45s ease, filter .45s ease;
}

.free-material-card:hover .free-material-preview-media{
    filter:saturate(1.08) contrast(1.04);
    transform:scale(1.045);
}

.free-material-preview-shade{
    position:absolute;
    z-index:1;
    inset:0;
    background:rgba(0,0,0,.18);
}

.free-material-preview-fallback{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.free-material-preview-fallback::before,
.free-material-preview-fallback::after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.free-material-preview-fallback::before{
    width:220px;
    height:220px;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 0 0 36px rgba(255,255,255,.025), 0 0 0 72px rgba(255,255,255,.015);
}

.free-material-preview-fallback::after{
    width:120px;
    height:120px;
    background:rgba(255,255,255,.035);
    filter:blur(2px);
}

.free-material-preview-fallback--video{
    background:radial-gradient(circle at 50% 45%, rgba(177,154,99,.28), transparent 35%), linear-gradient(135deg,#282319,#0b0b0b 72%);
}

.free-material-preview-fallback--pdf{
    background:radial-gradient(circle at 36% 30%, rgba(149,65,60,.28), transparent 42%), linear-gradient(145deg,#2a1c1b,#100d0d 70%);
}

.free-material-preview-fallback--audio{
    background:radial-gradient(circle at 50% 45%, rgba(177,154,99,.3), transparent 40%), linear-gradient(145deg,#262318,#0d0d0c 72%);
}

.free-material-preview-fallback--material{
    background:radial-gradient(circle at 30% 28%, rgba(92,107,117,.3), transparent 43%), linear-gradient(145deg,#1b2429,#0b0d0e 72%);
}

.free-material-document-icon{
    position:relative;
    z-index:1;
    display:grid;
    width:68px;
    height:86px;
    place-items:end center;
    padding-bottom:14px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:8px 16px 8px 8px;
    background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
    box-shadow:0 14px 30px rgba(0,0,0,.28);
    transform:rotate(-3deg);
}

.free-material-document-icon::before{
    content:'';
    position:absolute;
    top:-1px;
    right:-1px;
    width:22px;
    height:22px;
    border-bottom:1px solid rgba(255,255,255,.35);
    border-left:1px solid rgba(255,255,255,.35);
    border-radius:0 14px 0 5px;
    background:#3e2624;
}

.free-material-document-icon span{
    color:#f2d4cf;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:1.6px;
}

.free-material-audio-wave{
    position:relative;
    z-index:1;
    display:flex;
    width:58%;
    height:72px;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.free-material-audio-wave i{
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,#d0b875,#756541);
    box-shadow:0 0 14px rgba(194,171,114,.18);
}

.free-material-audio-wave i:nth-child(1),
.free-material-audio-wave i:nth-child(11){height:34%}
.free-material-audio-wave i:nth-child(2),
.free-material-audio-wave i:nth-child(10){height:58%}
.free-material-audio-wave i:nth-child(3),
.free-material-audio-wave i:nth-child(9){height:84%}
.free-material-audio-wave i:nth-child(4),
.free-material-audio-wave i:nth-child(8){height:48%}
.free-material-audio-wave i:nth-child(5),
.free-material-audio-wave i:nth-child(7){height:72%}
.free-material-audio-wave i:nth-child(6){height:94%}

.free-material-preview-symbol{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.9);
    font-family:'Cormorant Garamond',serif;
    font-size:3.2rem;
    font-weight:600;
    text-shadow:0 12px 28px rgba(0,0,0,.35);
}

.free-material-play-icon{
    position:absolute;
    z-index:4;
    top:50%;
    left:50%;
    display:grid;
    width:62px;
    height:62px;
    place-items:center;
    border:1px solid rgba(255,255,255,.6);
    border-radius:50%;
    background:rgba(10,10,10,.7);
    box-shadow:0 12px 32px rgba(0,0,0,.36);
    backdrop-filter:blur(5px);
    transform:translate(-50%,-50%);
}

.free-material-play-icon::after{
    content:'';
    width:0;
    height:0;
    margin-left:4px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:13px solid #f4f4f4;
}

.free-material-preview-label{
    position:absolute;
    z-index:4;
    bottom:14px;
    left:16px;
    color:rgba(255,255,255,.88);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:1.7px;
}

.free-material-body{
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    padding:26px 26px 24px;
}

.free-material-badge{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    min-height:26px;
    margin-bottom:16px;
    padding:5px 9px;
    border:1px solid rgba(177,154,99,.26);
    border-radius:999px;
    background:rgba(140,122,79,.1);
    color:#c2ab72;
    font-size:.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.3px;
}

.free-material-title{
    display:-webkit-box;
    overflow:hidden;
    margin-bottom:14px;
    font-family:'Cormorant Garamond',serif;
    font-size:1.9rem;
    font-weight:600;
    line-height:1.06;
    text-wrap:balance;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.free-material-description{
    display:-webkit-box;
    overflow:hidden;
    color:var(--text-light);
    font-size:.92rem;
    line-height:1.65;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.free-material-footer{
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.08);
}

.material-card button{

    border:none;

    cursor:pointer;

    padding:14px 22px;

    border-radius:12px;

    background:var(--accent);

    color:white;

    transition:.3s ease;
}

.material-card button:hover{

    transform:translateY(-3px);
}

/* ==========================================
   METRONOME
========================================== */

.metronome-card{

    max-width:700px;

    margin:0 auto;

    padding:50px;

    background:var(--card);

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

    border-radius:24px;

    text-align:center;
}

.metronome-display{

    margin-bottom:30px;
}

.metronome-display span{

    display:block;

    font-size:5rem;

    font-weight:600;

    color:white;
}

.metronome-display p{

    color:var(--text-light);
}

#bpmSlider{

    width:100%;

    margin-bottom:30px;
}

.metronome-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:30px;
}

.metronome-actions button{

    border:none;

    cursor:pointer;

    min-width:120px;

    padding:14px 20px;

    border-radius:12px;

    background:var(--accent);

    color:white;

    transition:.3s ease;
}

.metronome-actions button:hover{

    transform:translateY(-3px);
}

.beat-indicator{

    width:22px;

    height:22px;

    border-radius:50%;

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

    margin:0 auto;

    transition:.08s ease;
}

.beat-indicator.active{

    transform:scale(1.5);

    background:var(--accent);
}

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

.cta-block{

    text-align:center;
}

.cta-block h2{

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    margin-bottom:20px;
}

.cta-block p{

    max-width:700px;

    margin:0 auto 35px;

    color:var(--text-light);

    line-height:1.9;
}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 32px;

    border-radius:12px;

    background:var(--accent);

    color:white;

    transition:.35s ease;
}

.btn-primary:hover{

    transform:translateY(-4px);
}

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

.footer{

    padding:50px 0;

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

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-content p{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;
}

.footer-content span{

    color:var(--text-light);
}

.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.revealed{
    opacity:1;
    transform:translateY(0);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .content{
        padding:0 5%;
    }

    .site-header{
        padding:24px 5%;
    }

    .free-hero h1{
        font-size:4rem;
    }

    .section-header h2{
        font-size:3rem;
    }

    .free-material-detail__hero h1{
        font-size:3.8rem;
    }

    .free-material-detail__cta{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(max-width:768px){

    .menu{
        display:none;
    }

    .free-materials-grid,
    .materials-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .free-material-card:only-child{
        width:100%;
    }

    .free-material-card,
    .material-card{
        max-width:none;
    }

    .free-material-title{
        font-size:2rem;
    }

    .free-hero{
        min-height:auto;
        padding:100px 0;
    }

    .free-hero h1{
        font-size:3rem;
    }

    .section-header h2{
        font-size:2.4rem;
    }

    .cta-block h2{
        font-size:2.8rem;
    }

    .free-material-detail__hero{
        padding:72px 0 40px;
    }

    .free-material-detail__hero h1{
        font-size:3rem;
    }

    .free-material-detail__content{
        padding-bottom:80px;
    }

    .free-material-detail__media-panel,
    .free-material-detail__resource-panel,
    .free-material-detail__cta{
        padding:26px;
    }

    .free-material-detail__resource-panel h2,
    .free-material-detail__cta h2{
        font-size:2.2rem;
    }

    .footer-content{

        flex-direction:column;

        gap:20px;

        text-align:center;
    }

}

@media(max-width:480px){

    .free-materials-library__content{
        padding-right:20px;
        padding-left:20px;
    }

    .free-materials-library .section-header{
        margin-bottom:36px;
    }

    .free-material-card,
    .material-card{
        border-radius:18px;
    }

    .free-material-body{
        padding:22px 20px 20px;
    }

    .free-material-badge{
        margin-bottom:14px;
    }

    .free-material-title{
        font-size:1.8rem;
    }

    .free-material-footer{
        padding-top:20px;
    }

    .free-material-play-icon{
        width:54px;
        height:54px;
    }

    .metronome-card{
        padding:30px 20px;
    }

    .metronome-display span{
        font-size:4rem;
    }

    .metronome-actions{

        flex-direction:column;
    }

    .free-material-detail__hero h1{
        font-size:2.45rem;
    }

    .free-material-detail__button,
    .free-material-detail__cta a{
        width:100%;
    }

}

.free-material-cta,
.material-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:14px 20px;
    border:1px solid rgba(208,184,125,.22);
    border-radius:12px;
    background:linear-gradient(135deg, #8c7a4f, #756541);
    color:white;
    font-size:.92rem;
    font-weight:600;
    letter-spacing:.15px;
    box-shadow:0 10px 26px rgba(0,0,0,.16);
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.free-material-cta::after,
.material-action::after{
    content:'\2192';
    margin-left:10px;
    font-size:1.05rem;
    line-height:1;
    transition:transform .25s ease;
}

.free-material-cta:hover,
.material-action:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, #9a8756, #806f47);
    box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.free-material-cta:hover::after,
.material-action:hover::after{
    transform:translateX(3px);
}

.free-material-cta:focus-visible,
.material-action:focus-visible{
    outline:2px solid #c2ab72;
    outline-offset:3px;
}

.video-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    background:#050505;
}

.video-frame iframe{
    width:100%;
    height:100%;
    border:0;
}

.materials-empty{
    padding:32px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    color:var(--text-light);
    text-align:center;
}

/* ==========================================
   FREE MATERIAL DETAIL
========================================== */

.free-material-detail{
    background:var(--dark);
}

.free-material-detail__hero{
    padding:96px 0 56px;
    background:
        linear-gradient(180deg, rgba(140,122,79,.14), rgba(17,17,17,0) 72%),
        var(--dark);
}

.free-material-detail__back{
    display:inline-flex;
    margin-bottom:34px;
    color:var(--text-light);
    font-size:.95rem;
    transition:.25s ease;
}

.free-material-detail__back:hover{
    color:white;
}

.free-material-detail__meta{
    display:inline-flex;
    width:fit-content;
    margin-bottom:20px;
    padding:9px 13px;
    border:1px solid rgba(140,122,79,.35);
    border-radius:999px;
    color:var(--accent);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}

.free-material-detail__hero h1{
    max-width:980px;
    margin-bottom:24px;
    font-family:'Cormorant Garamond',serif;
    font-size:4.8rem;
    line-height:1;
}

.free-material-detail__hero p{
    max-width:760px;
    color:var(--text-light);
    font-size:1.12rem;
    line-height:1.9;
}

.free-material-detail__content{
    padding:40px 0 110px;
}

.free-material-detail__player{
    width:100%;
    max-width:1040px;
    margin:0 auto;
    aspect-ratio:16/9;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#050505;
    box-shadow:0 28px 90px rgba(0,0,0,.45);
}

.free-material-detail__player iframe{
    width:100%;
    height:100%;
    border:0;
}

.free-material-detail__media-panel,
.free-material-detail__resource-panel{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:44px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    box-shadow:0 24px 70px rgba(0,0,0,.32);
}

.free-material-detail__media-panel audio{
    width:100%;
    margin-bottom:24px;
}

.free-material-detail__resource-panel span{
    display:inline-block;
    margin-bottom:18px;
    color:var(--accent);
    font-size:.8rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
}

.free-material-detail__resource-panel h2{
    margin-bottom:14px;
    font-family:'Cormorant Garamond',serif;
    font-size:2.7rem;
}

.free-material-detail__resource-panel p{
    max-width:620px;
    margin-bottom:28px;
    color:var(--text-light);
    line-height:1.8;
}

.free-material-detail__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:13px 20px;
    border-radius:10px;
    background:var(--accent);
    color:white;
    font-weight:600;
    transition:.3s ease;
}

.free-material-detail__button:hover{
    transform:translateY(-3px);
    background:#a18d5c;
}

.free-material-detail__actions{
    max-width:1040px;
    margin:30px auto 0;
}

.free-material-detail__actions a{
    color:var(--text-light);
    transition:.25s ease;
}

.free-material-detail__actions a:hover{
    color:white;
}

.free-material-detail__cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    max-width:1040px;
    margin:72px auto 0;
    padding:34px;
    border:1px solid rgba(140,122,79,.28);
    border-radius:18px;
    background:rgba(140,122,79,.1);
}

.free-material-detail__cta h2{
    margin-bottom:8px;
    font-family:'Cormorant Garamond',serif;
    font-size:2.5rem;
}

.free-material-detail__cta p{
    color:var(--text-light);
    line-height:1.7;
}

.free-material-detail__cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:48px;
    padding:13px 20px;
    border-radius:10px;
    background:white;
    color:#111;
    font-weight:700;
}