/* LearnLoop — Online Course Platform © KodTree */
:root{
    --ll-bg:#ffffff;
    --ll-bg-soft:#f8f7fd;
    --ll-bg-purple:#1a1438;
    --ll-text:#0f0a1f;
    --ll-text-soft:#5b5876;
    --ll-border:#e8e5f3;
    --ll-accent:#7c3aed;
    --ll-accent-2:#22d3ee;
    --ll-success:#10b981;
    --ll-warning:#f59e0b;
    --ll-radius:8px;
    --bs-body-font-family:'Inter','Pretendard',-apple-system,sans-serif;
    --ll-display:'Plus Jakarta Sans','Inter',sans-serif;
}
*{-webkit-font-smoothing:antialiased;}
body{font-family:var(--bs-body-font-family);color:var(--ll-text);background:var(--ll-bg);line-height:1.55;}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--ll-accent),var(--ll-accent-2));color:#fff;text-align:center;padding:.5rem 0;font-size:.8125rem;font-weight:500;}

/* Navbar */
.navbar{background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;padding:1rem 0;transition:.25s;}
.navbar.scrolled{border-bottom-color:var(--ll-border);box-shadow:0 1px 4px rgba(15,10,31,.04);}
.navbar-brand{font-family:var(--ll-display);font-size:1.375rem;font-weight:800;color:var(--ll-text)!important;letter-spacing:-.02em;}
.navbar-brand::before{content:"";display:inline-block;width:24px;height:24px;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));border-radius:6px;margin-right:.5rem;vertical-align:middle;}
.nav-link{font-weight:500;color:var(--ll-text)!important;font-size:.9375rem;}
.nav-link:hover,.nav-link.active{color:var(--ll-accent)!important;}

/* Buttons */
.btn{font-weight:600;padding:.75rem 1.5rem;border-radius:var(--ll-radius);font-size:.9375rem;transition:.2s;border:1.5px solid transparent;}
.btn-accent{background:linear-gradient(135deg,var(--ll-accent),#9b59f5);color:#fff;border:none;box-shadow:0 8px 20px -8px rgba(124,58,237,.5);}
.btn-accent:hover{transform:translateY(-1px);color:#fff;box-shadow:0 12px 24px -8px rgba(124,58,237,.6);}
.btn-outline-dark{border-color:var(--ll-text);color:var(--ll-text);background:transparent;}
.btn-outline-dark:hover{background:var(--ll-text);color:#fff;}
.btn-light-purple{background:rgba(124,58,237,.1);color:var(--ll-accent);border-color:transparent;}
.btn-light-purple:hover{background:rgba(124,58,237,.2);color:var(--ll-accent);}
.btn-lg{padding:.875rem 1.75rem;font-size:1rem;}

/* Hero */
.hero{padding:5rem 0;background:linear-gradient(135deg,var(--ll-bg-soft),#fff);position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(124,58,237,.1),transparent 60%);border-radius:50%;}
.hero__pill{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;background:#fff;border:1px solid var(--ll-border);border-radius:99px;font-size:.8125rem;font-weight:500;margin-bottom:1.25rem;box-shadow:0 4px 12px -4px rgba(15,10,31,.06);}
.hero__pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ll-success);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero__title{font-family:var(--ll-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:1.5rem;}
.hero__title em{font-style:normal;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero__subtitle{font-size:1.0625rem;color:var(--ll-text-soft);max-width:560px;margin-bottom:2rem;}
.hero__search{background:#fff;border:1px solid var(--ll-border);border-radius:99px;padding:.5rem .5rem .5rem 1.25rem;box-shadow:0 12px 24px -8px rgba(15,10,31,.08);display:flex;align-items:center;gap:.5rem;max-width:520px;}
.hero__search input{border:none;outline:none;flex:1;font-size:.9375rem;background:transparent;}

/* Sections */
section{padding:5rem 0;}
.section-eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ll-accent);margin-bottom:.75rem;}
.section-title{font-family:var(--ll-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem;}
.section-title em{font-style:normal;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.section-lead{font-size:1.0625rem;color:var(--ll-text-soft);max-width:600px;}

/* Course card */
.course-card{background:#fff;border:1px solid var(--ll-border);border-radius:var(--ll-radius);overflow:hidden;height:100%;transition:.25s;}
.course-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -12px rgba(15,10,31,.12);}
.course-card__cover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-family:var(--ll-display);font-size:1.5rem;font-weight:800;color:rgba(255,255,255,.4);position:relative;}
.course-card__cover--1{background:linear-gradient(135deg,#7c3aed,#22d3ee);}
.course-card__cover--2{background:linear-gradient(135deg,#f59e0b,#ef4444);}
.course-card__cover--3{background:linear-gradient(135deg,#10b981,#06b6d4);}
.course-card__cover--4{background:linear-gradient(135deg,#ec4899,#7c3aed);}
.course-card__cover--5{background:linear-gradient(135deg,#3b82f6,#1e40af);}
.course-card__cover--6{background:linear-gradient(135deg,#0f0a1f,#3b0764);}
.course-card__badge{position:absolute;top:.75rem;left:.75rem;padding:.25rem .625rem;background:rgba(0,0,0,.55);color:#fff;font-size:.6875rem;font-weight:600;border-radius:99px;letter-spacing:.05em;}
.course-card__bookmark{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ll-text);border:none;}
.course-card__body{padding:1.25rem;}
.course-card__cat{font-size:.75rem;letter-spacing:.05em;color:var(--ll-accent);font-weight:600;text-transform:uppercase;margin-bottom:.375rem;}
.course-card__title{font-family:var(--ll-display);font-size:1.0625rem;font-weight:700;line-height:1.3;margin-bottom:.5rem;}
.course-card__instructor{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.8125rem;color:var(--ll-text-soft);}
.course-card__avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;}
.course-card__meta{display:flex;gap:1rem;font-size:.75rem;color:var(--ll-text-soft);padding-top:.75rem;border-top:1px solid var(--ll-border);align-items:center;}
.course-card__meta i{color:var(--ll-warning);}
.course-card__price{font-family:var(--ll-display);font-weight:800;color:var(--ll-text);font-size:1rem;}
.course-card__price-old{text-decoration:line-through;color:var(--ll-text-soft);font-size:.8125rem;margin-left:.25rem;}

/* Category pill */
.category-pill{padding:1.25rem 1rem;background:#fff;border:1px solid var(--ll-border);border-radius:var(--ll-radius);text-align:center;transition:.2s;cursor:pointer;}
.category-pill:hover{border-color:var(--ll-accent);transform:translateY(-2px);}
.category-pill__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto .625rem;color:#fff;}
.category-pill__title{font-family:var(--ll-display);font-size:.9375rem;font-weight:700;margin:0;}
.category-pill__count{font-size:.75rem;color:var(--ll-text-soft);margin-top:.25rem;}

/* Instructor card */
.instructor-card{background:#fff;border:1px solid var(--ll-border);border-radius:var(--ll-radius);padding:1.5rem;text-align:center;transition:.25s;height:100%;}
.instructor-card:hover{border-color:var(--ll-accent);}
.instructor-card__avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ll-display);font-size:2rem;font-weight:800;}
.instructor-card__name{font-family:var(--ll-display);font-size:1.125rem;font-weight:700;margin-bottom:.25rem;}
.instructor-card__role{font-size:.8125rem;color:var(--ll-accent);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;}
.instructor-card__bio{font-size:.875rem;color:var(--ll-text-soft);margin-bottom:1rem;}
.instructor-card__stats{display:flex;justify-content:center;gap:1rem;font-size:.75rem;color:var(--ll-text-soft);padding-top:.75rem;border-top:1px solid var(--ll-border);}
.instructor-card__stats strong{color:var(--ll-text);font-family:var(--ll-display);font-size:1rem;display:block;}

/* Lesson row */
.lesson-row{display:grid;grid-template-columns:40px 1fr auto auto;gap:1rem;padding:1rem;border:1px solid var(--ll-border);border-radius:var(--ll-radius);margin-bottom:.5rem;align-items:center;transition:.15s;background:#fff;}
.lesson-row:hover{border-color:var(--ll-accent);}
.lesson-row__icon{color:var(--ll-accent);font-size:1.25rem;}
.lesson-row__title{font-weight:500;font-size:.9375rem;margin:0;}
.lesson-row__meta{font-size:.8125rem;color:var(--ll-text-soft);}
.lesson-row__duration{font-size:.8125rem;color:var(--ll-text-soft);font-variant-numeric:tabular-nums;}
.lesson-row__badge{font-size:.6875rem;font-weight:600;padding:.125rem .5rem;border-radius:99px;text-transform:uppercase;letter-spacing:.05em;}
.lesson-row__badge--preview{background:rgba(16,185,129,.1);color:var(--ll-success);}
.lesson-row__badge--locked{background:rgba(91,88,118,.1);color:var(--ll-text-soft);}

/* Pricing */
.price-card{background:#fff;border:2px solid var(--ll-border);border-radius:var(--ll-radius);padding:2rem;height:100%;display:flex;flex-direction:column;}
.price-card.featured{border-color:var(--ll-accent);position:relative;}
.price-card.featured::before{content:"Best value";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ll-accent);color:#fff;padding:.25rem .875rem;border-radius:99px;font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.price-card__name{font-family:var(--ll-display);font-size:1rem;color:var(--ll-text-soft);font-weight:600;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em;}
.price-card__price{font-family:var(--ll-display);font-size:2.5rem;font-weight:800;line-height:1;margin-bottom:.25rem;}
.price-card__features{list-style:none;padding:0;margin:1.5rem 0;flex:1;}
.price-card__features li{padding:.5rem 0;font-size:.9375rem;display:flex;align-items:center;gap:.5rem;}
.price-card__features li::before{content:"✓";color:var(--ll-success);font-weight:700;}

/* Stats */
.stat-grid{padding:3rem 0;background:linear-gradient(135deg,var(--ll-bg-purple),#2a1f5a);color:#fff;border-radius:var(--ll-radius);}
.stat-block{text-align:center;}
.stat-block__num{font-family:var(--ll-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stat-block__label{font-size:.875rem;opacity:.8;margin-top:.5rem;}

/* Form */
.form-control,.form-select{border-radius:var(--ll-radius);border:1.5px solid var(--ll-border);padding:.75rem 1rem;font-size:.9375rem;}
.form-control:focus,.form-select:focus{border-color:var(--ll-accent);box-shadow:0 0 0 3px rgba(124,58,237,.12);}
.form-label{font-weight:600;font-size:.8125rem;margin-bottom:.375rem;}

/* Footer */
.footer{background:var(--ll-bg-purple);color:#cbc6e0;padding:4rem 0 1.5rem;}
.footer__brand{font-family:var(--ll-display);font-size:1.75rem;font-weight:800;color:#fff;margin-bottom:1rem;}
.footer__brand::before{content:"";display:inline-block;width:24px;height:24px;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));border-radius:6px;margin-right:.5rem;vertical-align:middle;}
.footer h6{color:#fff;font-weight:600;margin-bottom:1rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;}
.footer a{color:#cbc6e0;text-decoration:none;}
.footer a:hover{color:var(--ll-accent-2);}
.footer ul{list-style:none;padding:0;}
.footer ul li{padding:.25rem 0;font-size:.9375rem;}
.footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.875rem;color:#94908b;}

/* Page hero */
.page-hero{padding:6rem 0 3rem;background:linear-gradient(135deg,var(--ll-bg-soft),#fff);}
.page-hero__title{font-family:var(--ll-display);font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.page-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Player */
.player-wrap{aspect-ratio:16/9;background:linear-gradient(135deg,#0f0a1f,#3b0764);border-radius:var(--ll-radius);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-family:var(--ll-display);font-size:1.25rem;position:relative;overflow:hidden;}
.player-wrap::after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#fff;color:var(--ll-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;}

/* Curriculum accordion */
.curriculum-section{border:1px solid var(--ll-border);border-radius:var(--ll-radius);margin-bottom:.75rem;overflow:hidden;}
.curriculum-section__head{padding:1rem 1.25rem;background:var(--ll-bg-soft);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--ll-display);font-weight:700;}
.curriculum-section__head small{font-family:var(--bs-body-font-family);font-weight:400;color:var(--ll-text-soft);}
.curriculum-section__body{padding:1rem;}

@media(max-width:767.98px){
    section{padding:3.5rem 0;}
    .hero{padding:3rem 0;}
    .lesson-row{grid-template-columns:30px 1fr;gap:.5rem;}
    .lesson-row__duration,.lesson-row__badge{grid-column:span 2;justify-self:start;}
}