:root{
  --brown:#8B4A2B; --brown-dark:#5E3018; --caramel:#C98B4E; --caramel-light:#E4B583;
  --umber:#3E2016; --charcoal:#3B3B3B; --cream:#FBF6EF; --cream-deep:#F3E9DB;
  --white:#FFFFFF; --line:#E8DCC8; --shadow:0 10px 30px rgba(62,32,22,0.12); --radius:18px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter',sans-serif; color:var(--charcoal); background:var(--cream); -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Baloo 2',sans-serif; color:var(--brown); margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.btn{ appearance:none; border:none; cursor:pointer; font-family:'Inter'; font-weight:700; font-size:.98rem; border-radius:13px; padding:14px 26px; display:inline-block; text-decoration:none; transition:transform .15s ease, background .15s ease; }
.btn-primary{ background:var(--brown); color:var(--white); box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--brown-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--brown); border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--brown); }

.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--white) 0%, var(--cream) 100%); padding:56px 24px 30px; text-align:center; }
.hero .arch{ position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:900px; max-width:220vw; opacity:.4; pointer-events:none; }
.hero-inner{ position:relative; max-width:720px; margin:0 auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--cream-deep); border:1px solid var(--line); color:var(--brown-dark); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 16px; border-radius:999px; margin-bottom:18px; }
.hero h1{ font-size:clamp(1.9rem,4.4vw,2.7rem); line-height:1.15; }
.hero p.sub{ font-size:1.02rem; opacity:.85; max-width:600px; margin:14px auto 0; line-height:1.6; }

.wrap{ max-width:900px; margin:0 auto; padding:20px 22px 90px; }
.step{ margin-top:8px; }
.step-label{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--caramel); margin-bottom:14px; }
.step h2{ font-size:1.3rem; margin-bottom:4px; }

.subject-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.subject-card{
  background:var(--white); border:2px solid var(--line); border-radius:14px; padding:16px 18px;
  cursor:pointer; text-align:left; font-family:'Inter'; appearance:none; transition:border-color .15s ease, transform .1s ease;
  display:flex; align-items:center; gap:10px;
}
.subject-card:hover{ border-color:var(--caramel); transform:translateY(-1px); }
.subject-card.active{ border-color:var(--brown); background:var(--cream-deep); box-shadow:var(--shadow); }
.subject-card .tag{ font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--caramel); background:var(--cream-deep); padding:3px 8px; border-radius:999px; flex-shrink:0; }
.subject-card.active .tag{ background:var(--brown); color:var(--white); }
.subject-card .nm{ font-weight:700; font-size:.92rem; color:var(--umber); }
.subject-card .grp{ font-size:.74rem; opacity:.6; display:block; margin-top:1px; }

.mode-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.mode-card{
  background:var(--white); border:2px solid var(--line); border-radius:14px; padding:20px 14px;
  cursor:pointer; text-align:center; font-family:'Inter'; appearance:none; transition:border-color .15s ease, transform .1s ease;
}
.mode-card:hover{ border-color:var(--caramel); transform:translateY(-2px); }
.mode-card.active{ border-color:var(--brown); background:var(--cream-deep); box-shadow:var(--shadow); }
.mode-card .ic{ font-size:1.6rem; display:block; margin-bottom:8px; }
.mode-card .mode-img{ width:100%; height:70px; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.mode-card .nm{ font-weight:700; font-size:.88rem; color:var(--umber); display:block; }
.mode-card .ds{ font-size:.74rem; opacity:.65; margin-top:5px; line-height:1.4; display:block; }
.mode-card .ext{ font-size:.68rem; color:var(--caramel); font-weight:700; margin-top:6px; display:block; }

.batch-panel{ display:none; margin-top:26px; }
.batch-panel.active{ display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.batch-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-top:16px; }
.batch-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.batch-card-img{ width:100%; height:110px; object-fit:cover; border-radius:10px; margin-bottom:12px; }
.batch-card h4{ font-family:'Baloo 2'; color:var(--umber); font-size:1rem; }
.batch-card h4 .batch-label{ font-family:'Inter'; font-weight:600; font-size:.78rem; color:var(--caramel); }
.batch-meta{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.batch-meta div{ font-size:.79rem; line-height:1.4; color:var(--charcoal); opacity:.88; }
.batch-meta b{ color:var(--brown-dark); font-weight:700; }
.batch-card .note{ font-size:.72rem; opacity:.55; margin-top:10px; }
.batch-card .btn{ margin-top:14px; width:100%; text-align:center; font-size:.88rem; padding:12px 16px; }
.batch-empty{ grid-column:1/-1; text-align:center; padding:30px 20px; opacity:.65; font-size:.88rem; background:var(--cream-deep); border:1px dashed var(--line); border-radius:14px; }
.batch-card p{ font-size:.84rem; opacity:.8; line-height:1.55; margin-top:8px; flex:1; }
.batch-card .note{ font-size:.72rem; opacity:.55; margin-top:10px; }
.batch-card .btn{ margin-top:14px; width:100%; text-align:center; font-size:.88rem; padding:12px 16px; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--umber); color:var(--white); padding:14px 22px; border-radius:12px; font-size:.88rem; font-weight:600;
  box-shadow:var(--shadow); max-width:90vw; text-align:center; transition:opacity .25s ease, transform .25s ease; z-index:500;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ---------- FAQ accordion ---------- */
.faq{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq-item summary{ cursor:pointer; font-weight:700; padding:16px 18px; color:var(--brown-dark); list-style:none; display:flex; justify-content:space-between; align-items:center; font-size:.94rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.2rem; color:var(--caramel); flex-shrink:0; margin-left:10px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-body{ padding:0 18px 16px; line-height:1.6; font-size:.88rem; opacity:.88; }

/* ---------- Demo video carousel ---------- */
.demo-carousel{ position:relative; max-width:640px; margin:18px auto 0; }
.demo-carousel .carousel-viewport{ overflow:hidden; border-radius:14px; box-shadow:var(--shadow); }
.demo-carousel .carousel-track{ display:flex; transition:transform .4s ease; }
.demo-carousel .carousel-slide{ flex:0 0 100%; padding:0 2px; }
.demo-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.demo-card iframe{ width:100%; aspect-ratio:16/9; border:none; display:block; }
.demo-card .vt{ padding:14px 18px; }
.demo-card .vt h4{ font-family:'Baloo 2'; color:var(--umber); font-size:.98rem; }
.demo-card .vt p{ font-size:.8rem; opacity:.7; margin-top:2px; }
.demo-carousel .carousel-arrow{
  position:absolute; top:38%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.05rem; color:var(--brown-dark);
  z-index:2; appearance:none;
}
.demo-carousel .carousel-arrow:hover{ background:var(--white); }
.demo-carousel .carousel-arrow.prev{ left:-14px; }
.demo-carousel .carousel-arrow.next{ right:-14px; }
.demo-carousel .carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.demo-carousel .carousel-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; }
.demo-carousel .carousel-dot.active{ background:var(--brown); width:20px; border-radius:4px; transition:width .2s ease; }
.demo-empty{ text-align:center; padding:34px 20px; opacity:.6; font-size:.88rem; background:var(--white); border:1px dashed var(--line); border-radius:14px; margin-top:18px; }

footer{ background:var(--umber); border-top:1px solid rgba(255,255,255,0.08); padding:36px 22px 26px; color:var(--cream-deep); }
.footer-inner{ max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:center; }
.footer-inner h4{ font-family:'Baloo 2'; color:var(--caramel-light); font-size:1rem; margin-bottom:6px; }
.footer-inner p{ font-size:.85rem; opacity:.85; margin:2px 0; }
.footer-contact{ max-width:900px; margin:26px auto 0; text-align:center; font-size:.9rem; border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; }
.footer-contact a{ color:var(--caramel-light); font-weight:600; }
.footer-bottom{ text-align:center; font-size:.78rem; opacity:.55; margin-top:26px; }

@media (max-width:760px){
  .mode-grid{ grid-template-columns:1fr 1fr; }
  .batch-grid{ grid-template-columns:1fr; }
  .subject-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .demo-carousel .carousel-arrow.prev{ left:2px; }
  .demo-carousel .carousel-arrow.next{ right:2px; }
}