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

:root{
    --linen:#f7f2e9;
    --sand:#ece2cd;
    --sage-deep:#3f4f3a;
    --sage:#6f8261;
    --sage-soft:#9bab8c;
    --clay:#bd7350;
    --clay-soft:#e3b79a;
    --ink:#2c3326;
    --ink-soft:#6b7263;
    --paper:#fffdf8;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
}

h1,h2,.session-title,.brand-title{
    font-family:'Fraunces',serif;
}

a{
    color:inherit;
}

::selection{
    background:var(--clay-soft);
}

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

.home-body{
    min-height:100vh;
    position:relative;

    background:var(--linen);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(111,130,97,0.10), transparent 45%),
        radial-gradient(circle at 88% 82%, rgba(189,115,80,0.10), transparent 50%);

    overflow:hidden;
}

.background-blur{
    position:fixed;

    width:560px;
    height:560px;

    background:radial-gradient(circle, var(--sage-soft), transparent 70%);

    filter:blur(90px);

    opacity:0.4;

    border-radius:50%;

    top:-160px;
    right:-160px;

    pointer-events:none;
}

.background-blur::after{
    content:"";
    position:fixed;
    width:420px;
    height:420px;
    left:-140px;
    bottom:-140px;
    background:radial-gradient(circle, var(--clay-soft), transparent 70%);
    filter:blur(100px);
    opacity:0.35;
    border-radius:50%;
}

.top-nav{
    width:100%;
    padding:36px 8%;
    position:relative;
    z-index:2;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:16px;
}

.brand-icon{
    font-size:38px;
    line-height:1;
}

.brand-title{
    font-size:24px;
    font-weight:600;
    letter-spacing:0.2px;
    color:var(--sage-deep);
}

.brand-subtitle{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:2px;
}

.practice-button{
    padding:14px 28px;

    text-decoration:none;
    font-size:14px;
    font-weight:500;

    color:var(--paper);

    background:var(--sage-deep);

    border-radius:999px;

    transition:0.3s ease;
    box-shadow:0 8px 20px rgba(63,79,58,0.18);
}

.practice-button:hover{
    transform:translateY(-2px);
    background:var(--sage);
    box-shadow:0 12px 26px rgba(63,79,58,0.24);
}

.main-container{
    position:relative;
    z-index:2;

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

    min-height:75vh;
    padding:20px;
}

.session-card{
    width:90%;
    max-width:580px;

    background:rgba(255,253,248,0.78);

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,0.7);

    border-radius:32px;

    padding:64px 54px;

    text-align:center;

    box-shadow:
        0 25px 60px rgba(63,79,58,0.10),
        0 2px 8px rgba(63,79,58,0.06);
}

.session-label{
    color:var(--clay);

    font-size:11px;
    font-weight:600;

    letter-spacing:5px;
    text-transform:uppercase;

    margin-bottom:20px;
}

.session-title{
    font-size:44px;
    font-weight:600;

    color:var(--sage-deep);

    margin-bottom:20px;
    line-height:1.15;
}

.session-info{
    color:var(--ink-soft);

    line-height:1.8;

    font-size:16px;

    margin-bottom:44px;

    max-width:420px;
    margin-left:auto;
    margin-right:auto;
}

/* Breathing ring — signature element */
.countdown-circle{
    width:158px;
    height:158px;

    margin:auto;

    border-radius:50%;

    background:radial-gradient(circle, rgba(189,115,80,0.08), transparent 65%);

    border:1.5px solid var(--clay-soft);

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

    margin-bottom:30px;

    position:relative;

    animation:breathe 4s ease-in-out infinite;
}

.countdown-circle::before{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    border:1px solid rgba(111,130,97,0.35);
}

@keyframes breathe{
    0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(189,115,80,0); }
    50%{ transform:scale(1.045); box-shadow:0 0 30px 0 rgba(189,115,80,0.12); }
}

.countdown-circle span{
    font-family:'Fraunces',serif;
    font-size:56px;
    font-weight:400;

    color:var(--sage-deep);
}

.redirect-text{
    color:var(--ink-soft);
    font-size:13px;
    letter-spacing:0.5px;
    margin-bottom:34px;
}

.open-button{
    border:none;

    padding:17px 40px;

    background:var(--clay);

    color:var(--paper);

    border-radius:999px;

    font-size:15px;
    font-weight:500;
    font-family:'Inter',sans-serif;

    cursor:pointer;

    transition:0.3s ease;
    box-shadow:0 10px 24px rgba(189,115,80,0.25);
}

.open-button:hover{
    transform:translateY(-2px);

    background:#a8623f;
    box-shadow:0 14px 30px rgba(189,115,80,0.32);
}

@media(prefers-reduced-motion:reduce){
    .countdown-circle{ animation:none; }
}

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

.practice-body{
    background:var(--linen);
    background-image:
        radial-gradient(circle at 90% 0%, rgba(111,130,97,0.08), transparent 40%);

    min-height:100vh;
}

.practice-wrapper{
    width:min(1200px,92%);
    margin:auto;

    padding-top:56px;
    padding-bottom:70px;
}

.practice-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    margin-bottom:54px;

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

.practice-header h1{
    color:var(--sage-deep);
    font-weight:600;

    font-size:46px;

    margin-bottom:10px;
}

.practice-header p{
    color:var(--ink-soft);
    font-size:15px;
}

.back-button{
    text-decoration:none;

    color:var(--sage-deep);

    background:transparent;
    border:1.5px solid var(--sage-deep);

    padding:13px 24px;
    font-size:14px;
    font-weight:500;

    border-radius:999px;

    transition:0.3s ease;
    white-space:nowrap;
}

.back-button:hover{
    background:var(--sage-deep);
    color:var(--paper);
}

.video-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:32px;
}

.video-card{
    background:var(--paper);

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    transition:0.3s ease;

    border:1px solid rgba(63,79,58,0.06);

    box-shadow:
        0 8px 24px rgba(63,79,58,0.06);
}

.video-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 40px rgba(63,79,58,0.12);

    border-color:rgba(189,115,80,0.25);
}

.video-card img{
    width:100%;
    height:210px;

    object-fit:cover;
}

.details{
    padding:26px;
}

.details h2{
    color:var(--sage-deep);
    font-weight:600;

    margin-bottom:12px;

    font-size:21px;
}

.details p{
    color:var(--ink-soft);

    line-height:1.7;
    font-size:14px;
}

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

@media(max-width:768px){

    .top-nav{
        padding:24px;
    }

    .brand-title{
        font-size:19px;
    }

    .practice-button{
        padding:12px 20px;
        font-size:13px;
    }

    .session-card{
        padding:46px 28px;
    }

    .session-title{
        font-size:30px;
    }

    .countdown-circle{
        width:124px;
        height:124px;
    }

    .countdown-circle span{
        font-size:42px;
    }

    .practice-header{
        flex-direction:column;
        align-items:flex-start;
        gap:22px;
    }

    .practice-header h1{
        font-size:34px;
    }

    .back-button{
        align-self:flex-start;
    }
}