/* =========================
   HOMEPAGE REBUILD
========================= */

.homepage{
    background:#f5f1f1;
    color:#111;
    overflow-x:hidden;
    position:relative;
}

/* =========================
   AMBIENT BLOBS
========================= */

.ambient{
    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    opacity:.22;
    z-index:0;
    pointer-events:none;
}

.ambient-1{
    width:340px;
    height:340px;
    background:#ff2d2d;
    top:-100px;
    left:-100px;
    animation:floatBlob 12s ease-in-out infinite;
}

.ambient-2{
    width:420px;
    height:420px;
    background:#ff5c5c;
    top:160px;
    right:-140px;
    animation:floatBlob 16s ease-in-out infinite alternate;
}

.ambient-3{
    width:300px;
    height:300px;
    background:#ffb5b5;
    bottom:120px;
    right:120px;
    animation:floatBlob 14s ease-in-out infinite;
}

@keyframes floatBlob{
    0%{
        transform:translateY(0px) translateX(0px);
    }

    50%{
        transform:translateY(30px) translateX(15px);
    }

    100%{
        transform:translateY(0px) translateX(0px);
    }
}

/* =========================
   TOPBAR
========================= */

.topbar{
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(18px);
    background:rgba(0,0,0,.92);
    border-bottom:1px solid rgba(255,255,255,.04);
}

.topbar-inner{
    max-width:1280px;
    margin:auto;
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    color:#fff;
    text-decoration:none;
    font-size:34px;
    font-weight:900;
    letter-spacing:-1px;
}

.brand span{
    color:#ff2d2d;
}

.nav{
    display:flex;
    align-items:center;
    gap:28px;
}

.nav a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

.join-btn{
    background:#ff2d2d;
    padding:12px 18px;
    border-radius:12px;
}

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

.hero-section{
    position:relative;
    z-index:2;

    overflow:hidden;

    padding:90px 28px 80px;

    background:#f6f1f1;
}

.hero-section::before{
    content:"";
    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,60,60,.12) 0%,
        rgba(255,60,60,0) 70%
    );

    top:-220px;
    left:-220px;

    pointer-events:none;
}

.hero-section::after{
    content:"";
    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,60,60,.10) 0%,
        rgba(255,60,60,0) 70%
    );

    bottom:-260px;
    right:-260px;

    pointer-events:none;
}

.hero-inner{
    max-width:1280px;
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:center;
}

.hero-copy{
    max-width:700px;
}

.hero-pill{
    display:inline-flex;
    align-items:center;
    padding:12px 20px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,45,45,.12);
    color:#ff2d2d;
    font-size:12px;
    font-weight:700;
    margin-bottom:28px;
}

.hero-title{
    font-size:70px;
    line-height:.9;
    letter-spacing:-4px;
    font-weight:900;
    max-width:750px;
    margin-bottom:28px;
}

.hero-title span{
    color:#ff2d2d;
}

.hero-text{
    font-size:21px;
    line-height:1.8;
    color:#5d5d5d;
    max-width:620px;
}

.hero-actions{
    display:flex;
    gap:16px;
    margin-top:42px;
}

.hero-btn{
    text-decoration:none;
    padding:18px 28px;
    border-radius:18px;
    font-size:15px;
    font-weight:700;
    transition:.25s ease;
}

.hero-btn-primary{
    background:#ff2d2d;
    color:#fff;
    box-shadow:0 14px 40px rgba(255,45,45,.35);
}

.hero-btn-primary:hover{
    transform:translateY(-3px);
}

.hero-btn-secondary{
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,.08);
}

.hero-features{
    display:flex;
    gap:14px;
    margin-top:36px;
    flex-wrap:wrap;
}

.hero-feature{
    background:#fff;
    padding:14px 18px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

/* =========================
   HERO COURSE CAROUSEL
========================= */

/* =========================
   HERO COURSE CAROUSEL
========================= */

.hero-cards{
    position:relative;
    height:640px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-carousel{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-course-card{
    position:absolute;

    width:360px;
    height:540px;

    border-radius:36px;

    overflow:hidden;

    background:#fff;

    text-decoration:none;

    display:flex;
    flex-direction:column;

    box-shadow:
    0 50px 120px rgba(0,0,0,.16),
    0 20px 40px rgba(255,60,60,.10),
    0 0 0 1px rgba(255,255,255,.8);

    transition:
    transform .6s ease,
    opacity .6s ease,
    filter .6s ease,
    box-shadow .6s ease;

    transform-origin:center center;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transform: scale(0.8);
}

/* IMAGE AREA */

.hero-course-image-wrap{
    width:100%;
    height:58%;
    padding:18px 18px 0;
    background:#fff;

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

.hero-course-image{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:18px;
    background:#f5f5f5;
}

/* CONTENT AREA */

.hero-course-content{
    flex:1;
    padding:24px 28px 30px;
    background:#fff;
    color:#111;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

/* BADGE */

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

    width:max-content;

    padding:7px 14px;

    border-radius:999px;

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

    font-size:.72rem;
    font-weight:700;

    margin-bottom:18px;
}

/* TITLE */

.hero-course-title{
    font-size:2rem;
    line-height:1.02;
    font-weight:800;
    letter-spacing:-0.05em;
    margin:18px 0 14px;

    color:#111;
}

/* PRICE */

.hero-course-price{
    font-size:1.15rem;
    font-weight:800;
    color:#ff3131;
}

/* ACTIVE CARD */

.hero-course-card.active{
    left:210px;
    top:20px;

    z-index:5;

    transform:
    scale(1)
    rotate(0deg);

    opacity:1;
    pointer-events: auto;

    box-shadow:
    0 60px 140px rgba(0,0,0,.18),
    0 25px 60px rgba(255,60,60,.16);
}

/* PREVIOUS CARD */

.hero-course-card.prev{
    left:40px;
    top:80px;

    z-index:2;

    transform:
    rotate(-12deg)
    scale(.86);

    opacity:.45;
    pointer-events: auto;

    filter:blur(1px) brightness(.92);
}

/* NEXT CARD */

.hero-course-card.next{
    left:390px;
    top:80px;

    z-index:1;

    transform:
    rotate(12deg)
    scale(.86);

    opacity:.45;
    pointer-events: auto;

    filter:blur(1px) brightness(.92);
}

/* ARROWS */

.hero-arrow{
    position:absolute;
    top:50%;

    transform:translateY(-50%);

    width:64px;
    height:64px;

    border:none;
    border-radius:50%;

    background:#ff2d2d;
    color:#fff;

    font-size:1.7rem;
    font-weight:700;

    cursor:pointer;

    z-index:10;

    box-shadow:
    0 10px 30px rgba(255,45,45,.35);

    transition:.25s ease;
}

.hero-arrow:hover{
    transform:
    translateY(-50%)
    scale(1.08);
}

.hero-arrow-left{
    left:-70px;
    top:50%;
    transform:translateY(-50%);
}

.hero-arrow-right{
    right:-70px;
    top:50%;
    transform:translateY(-50%);
}
/* =========================
   SECTIONS
========================= */

section{
    padding:110px 0;
}

.hero-section{
    padding-top:90px;
    padding-bottom:80px;
}

.trending-section,
.latest-section,
.membership-section{
    position:relative;
    z-index:2;
    padding:110px 28px;
}

.section-inner,
.membership-inner{
    max-width:1280px;
    margin:auto;
}

.section-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:44px;
}

.section-kicker{
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ff2d2d;
    margin-bottom:14px;
}

.section-title{
    font-size:64px;
    line-height:.95;
    letter-spacing:-3px;
    margin:0;
    font-weight:950;
}

.section-link{
    color:#111;
    text-decoration:none;
    font-weight:700;
}

/* =========================
   COURSE GRID
========================= */

.featured-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.course-card{
    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.course-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.10),
    0 10px 25px rgba(255,60,60,.08);
}

.course-card-large{
    /* no longer spans extra columns — all cards are equal */
}

.course-image-wrap{
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 — full image, no crop */
    overflow: hidden;
    background: #111;
}

.course-card-large .course-image-wrap{
    /* same as regular card — even grid */
    padding-top: 56.25%;
}

.course-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;  /* show full image, never cropped */
    object-position: center;
    background: #111;
}

.course-image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,0)
    );
}

.course-body{
    padding:26px;
}

.course-tags{
    display:flex;
    gap:10px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.course-tag{
    background:#f2f2f2;
    color:#444;
    padding:8px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.premium-tag{
    background:#ffe6e6;
    color:#ff2d2d;
}

.course-title-card{
    font-size:20px;
    line-height:1.25;
    letter-spacing:-0.5px;
    margin:0 0 14px;
    font-weight:800;
}

/* Remove the old large-card title override — all cards are now equal */

.course-price{
    font-size:30px;
    font-weight:900;
    color:#ff2d2d;
    margin-bottom:22px;
}

.course-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#ff2d2d;
    color:#fff;
    padding:15px 22px;
    border-radius:14px;
    font-size:14px;
    font-weight:800;
    transition:.25s ease;
}

.course-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(255,45,45,.28);
}

/* =========================
   LATEST
========================= */

.latest-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.latest-card{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    text-decoration:none;
    color:#111;
    box-shadow:0 18px 50px rgba(0,0,0,.05);
}

.latest-card img{
    width:100%;
    height:230px;
    object-fit:cover;
}

.latest-card-body{
    padding:22px;
}

.latest-card h3{
    font-size:24px;
    line-height:1.15;
    margin:0 0 16px;
    font-weight:900;
}

.latest-price{
    color:#ff2d2d;
    font-size:24px;
    font-weight:900;
}

/* =========================
   MEMBERSHIP SECTION
========================= */

.membership-section{
    position:relative;
    padding:140px 0;
}

.membership-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:90px;
    align-items:center;
}

.membership-title{
    font-size:clamp(3rem,5vw,5.5rem);
    line-height:.95;
    letter-spacing:-0.06em;
    margin-bottom:32px;
    max-width:760px;
}

.membership-text{
    font-size:1.22rem;
    line-height:1.9;
    color:#5d5d5d;
    max-width:760px;
    margin-bottom:34px;
}

.membership-features{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding-left:20px;
    color:#333;
    font-size:1.08rem;
}

.membership-plans{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.membership-plan-card{
    position:relative;
    padding:38px;
    border-radius:34px;
    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.92),
        rgba(255,240,240,.78)
    );
    border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(20px);
    box-shadow:
    0 20px 60px rgba(0,0,0,.08),
    0 10px 30px rgba(255,60,60,.06);
}

.featured-plan{
    transform:scale(1.04);
    border:1px solid rgba(255,70,70,.22);
    box-shadow:
    0 30px 80px rgba(255,60,60,.12),
    0 20px 40px rgba(0,0,0,.08);
}

.membership-badge{
    position:absolute;
    top:-12px;
    right:24px;
    padding:10px 16px;
    border-radius:999px;
    background:#ff3131;
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
}

.membership-plan-name{
    display:inline-block;
    font-size:.92rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#777;
    margin-bottom:16px;
}

.membership-plan-price{
    font-size:3.5rem;
    line-height:1;
    letter-spacing:-0.06em;
    margin-bottom:12px;
}

.membership-plan-duration{
    color:#777;
    font-size:1rem;
}

.membership-btn{
    width:100%;
    margin-top:30px;
    text-align:center;
    justify-content:center;
}

@media(max-width:980px){

    .membership-grid{
        grid-template-columns:1fr;
    }

    .membership-plans{
        width:100%;
    }

    .membership-title{
        max-width:100%;
    }

}

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

@media(max-width:1100px){

    .hero-inner{
        grid-template-columns:1fr;
    }

    .hero-cards{
        height:500px;
        margin-top:30px;
    }


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

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

    .membership-inner{
        grid-template-columns:1fr;
    }

    .section-title{
        font-size:48px;
    }

    .membership-title{
        font-size:54px;
    }
}

@media(max-width:768px){

    .hero-title{
        font-size:50px;
        letter-spacing:-2px;
    }

    .hero-text{
        font-size:17px;
    }

    .featured-grid,
    .latest-grid{
        grid-template-columns:1fr;
    }

    .course-card-large{
        grid-column:auto;
    }

    .floating-card{
        width:220px;
        height:300px;
    }

    .floating-card-1{
        left:0;
    }

    .floating-card-2{
        left:70px;
    }

    .floating-card-3{
        right:0;
    }

    .membership-title{
        font-size:44px;
    }

    .section-title{
        font-size:40px;
    }

    .topbar-inner{
        padding:18px;
    }

    .nav{
        gap:14px;
    }

    .nav a{
        font-size:12px;
    }
}