/* ================= HSCBS Website · Tokens from VI Manual 2025 ================= */
:root{
  --teal:#1E4D47;
  --teal-dark:#0F2E2A;
  --teal-light:#2C6E65;
  --teal-soft:#3E7870;
  --cream:#F5F0E8;
  --cream-dark:#ECE7DE;
  --cream-border:#D9CCB5;
  --red:#B84A3E;
  --red-dark:#8C382F;
  --ink:#2C2C2A;
  --ink-soft:#5C5045;
  --ink-muted:#8C7F6F;
  --gold:#C9902A;

  --font-song:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-latin:"DM Sans","Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:15px;line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ================ SHELL ================ */
.site{min-height:100vh;display:flex;flex-direction:column}
.container{max-width:1280px;margin:0 auto;padding:0 40px;width:100%}
@media(max-width:720px){.container{padding:0 20px}}

/* ================ TOP BAR ================ */
.announce{
  background:var(--teal-dark);color:var(--cream);
  font-family:var(--font-latin);font-size:12px;
  letter-spacing:2px;
  padding:8px 40px;
  display:flex;justify-content:space-between;align-items:center;
}
.announce .dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;margin-right:8px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.announce-left{display:flex;align-items:center;gap:16px;opacity:.85}
.announce-right{opacity:.55;font-size:11px}
@media(max-width:720px){.announce-right{display:none}.announce{padding:8px 20px}}

/* ================ NAV ================ */
.nav{
  background:var(--cream);
  border-bottom:.5px solid var(--cream-border);
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
}
.nav-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;
}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-seal{
  width:40px;height:40px;background:var(--teal);color:var(--cream);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-song);font-size:26px;font-weight:500;
}
.nav-wordmark{display:flex;flex-direction:column;line-height:1}
.nav-wordmark .cn{font-family:var(--font-song);font-size:18px;font-weight:500;letter-spacing:3px;color:var(--teal)}
.nav-wordmark .en{font-family:var(--font-latin);font-size:9px;letter-spacing:3px;color:var(--red);margin-top:4px}

.nav-links{display:flex;gap:4px}
.nav-link{
  font-size:14px;
  padding:10px 16px;
  border-radius:6px;
  color:var(--teal);
  position:relative;
  transition:color .15s;
}
.nav-link:hover{color:var(--red)}
.nav-link.active{color:var(--red)}
.nav-link.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;
  height:2px;background:var(--red);border-radius:2px;
}
.nav-cta{
  font-size:13px;font-weight:500;letter-spacing:1px;
  background:var(--teal);color:var(--cream);
  padding:10px 20px;border-radius:30px;
  display:flex;align-items:center;gap:8px;
  transition:background .15s;
}
.nav-cta:hover{background:var(--red)}
.nav-cta .arrow{font-family:var(--font-latin);font-weight:400}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta{font-size:12px;padding:8px 14px}
}

/* ================ HERO ================ */
.hero{
  background:var(--teal);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  padding:80px 0 120px;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(245,240,232,.07) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.6;
  pointer-events:none;
}
.hero-path{position:absolute;inset:0;pointer-events:none}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
}
.hero-eyebrow{
  font-family:var(--font-latin);font-size:12px;
  letter-spacing:4px;color:var(--red);
  margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.hero-eyebrow .line{width:40px;height:.5px;background:var(--red)}
.hero h1{
  font-family:var(--font-song);
  font-size:72px;font-weight:500;
  letter-spacing:4px;
  line-height:1.15;
  margin-bottom:24px;
}
.hero h1 .accent{color:var(--red);font-style:normal}
.hero-sub{
  font-family:var(--font-song);
  font-size:20px;
  line-height:1.75;
  opacity:.75;
  margin-bottom:40px;
  max-width:520px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:30px;
  font-size:14px;font-weight:500;letter-spacing:1px;
  transition:transform .2s, background .2s, color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:var(--cream)}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:transparent;color:var(--cream);border:.5px solid rgba(245,240,232,.3)}
.btn-ghost:hover{background:rgba(245,240,232,.08);border-color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--teal)}
.btn-cream:hover{background:#fff}
.btn-arrow{font-family:var(--font-latin);opacity:.85}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding-top:32px;
  border-top:.5px solid rgba(245,240,232,.18);
  max-width:600px;
}
.hero-stat .num{
  font-family:var(--font-song);font-size:36px;font-weight:500;
  line-height:1;letter-spacing:1px;
}
.hero-stat .num small{font-size:16px;opacity:.6;margin-left:2px;font-weight:400}
.hero-stat .lbl{font-size:11px;opacity:.55;margin-top:8px;letter-spacing:1px}

/* Hero right — floating seal + stamped card */
.hero-card{
  position:relative;
  background:var(--cream);color:var(--teal);
  border-radius:12px;
  padding:36px 32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.hero-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.hero-card-label{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;color:var(--red)}
.hero-card-year{font-family:var(--font-latin);font-size:10px;letter-spacing:2px;color:var(--ink-muted)}
.hero-card-title{
  font-family:var(--font-song);font-size:28px;font-weight:500;
  line-height:1.3;margin-bottom:8px;letter-spacing:1px;
}
.hero-card-sub{font-size:13px;color:var(--ink-soft);margin-bottom:28px;line-height:1.7}
.hero-card-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.hero-card-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;background:#fff;border-radius:8px;
  border:.5px solid var(--cream-border);
}
.hero-card-row .idx{
  font-family:var(--font-latin);font-size:11px;color:var(--red);width:18px;flex-shrink:0;letter-spacing:1px;
}
.hero-card-row .nm{font-size:13px;font-weight:500;color:var(--teal);flex:1}
.hero-card-row .meta{font-size:11px;color:var(--ink-muted);font-family:var(--font-latin);letter-spacing:1px}

.hero-seal-circle{
  position:absolute;top:-28px;right:-28px;
  width:88px;height:88px;border-radius:50%;
  background:var(--red);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-song);
  box-shadow:0 10px 30px rgba(184,74,62,.4);
  transform:rotate(8deg);
}
.hero-seal-circle .top{font-size:9px;letter-spacing:2px;opacity:.8;font-family:var(--font-latin);margin-bottom:-2px}
.hero-seal-circle .mid{font-size:36px;font-weight:500;line-height:1}
.hero-seal-circle .bot{font-size:8px;letter-spacing:2px;opacity:.8;font-family:var(--font-latin);margin-top:2px}

@media(max-width:900px){
  .hero{padding:60px 0 80px}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:44px;letter-spacing:2px}
  .hero-sub{font-size:17px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}

/* ================ SECTION ================ */
section.block{padding:100px 0;position:relative}
.block-head{
  margin-bottom:56px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
}
.block-eye{
  font-family:var(--font-latin);font-size:11px;
  letter-spacing:4px;color:var(--red);
  margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.block-eye .line{width:30px;height:.5px;background:var(--red)}
.block-title{
  font-family:var(--font-song);
  font-size:48px;font-weight:500;
  color:var(--teal);
  letter-spacing:2px;line-height:1.2;
}
.block-title .emph{color:var(--red)}
.block-sub{
  font-family:var(--font-song);
  font-size:16px;color:var(--ink-soft);
  max-width:360px;line-height:1.8;
  text-align:right;
}
@media(max-width:720px){
  section.block{padding:64px 0}
  .block-head{grid-template-columns:1fr;gap:16px}
  .block-title{font-size:34px}
  .block-sub{text-align:left;max-width:none}
}

/* ================ PAIN POINTS ================ */
.pain{background:var(--cream)}
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pain-card{
  background:#fff;
  border-left:2px solid var(--red);
  border-radius:0 10px 10px 0;
  padding:28px 32px;
  position:relative;
}
.pain-card .q{
  font-family:var(--font-song);font-size:18px;color:var(--teal);
  line-height:1.5;margin-bottom:10px;letter-spacing:.5px;
}
.pain-card .a{font-size:13px;color:var(--ink-soft);line-height:1.7}
.pain-card .mark{
  position:absolute;top:18px;right:20px;
  font-family:var(--font-song);font-size:32px;color:var(--cream-border);
  line-height:1;
}
.pain-quote{
  grid-column:1/-1;
  background:var(--teal);color:var(--cream);
  padding:32px 36px;border-radius:10px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:14px;
}
.pain-quote .txt{font-family:var(--font-song);font-size:22px;letter-spacing:1px;line-height:1.5}
.pain-quote .sig{font-family:var(--font-latin);font-size:11px;letter-spacing:2px;opacity:.55;white-space:nowrap}
@media(max-width:720px){
  .pain-grid{grid-template-columns:1fr}
  .pain-quote{flex-direction:column;align-items:flex-start}
  .pain-quote .txt{font-size:18px}
}

/* ================ DIFFERENTIATION TABLE ================ */
.diff{background:#fff;border-top:.5px solid var(--cream-border);border-bottom:.5px solid var(--cream-border)}
.diff-table{
  border-radius:14px;overflow:hidden;
  border:.5px solid var(--cream-border);
  background:var(--cream);
}
.diff-row{
  display:grid;grid-template-columns:1.5fr 1.5fr 1.2fr;
  border-bottom:.5px solid var(--cream-border);
}
.diff-row:last-child{border-bottom:none}
.diff-row.head{background:var(--teal);color:var(--cream)}
.diff-row.head .cell{padding:18px 24px;font-size:12px;letter-spacing:3px;font-family:var(--font-latin)}
.diff-row.head .cell.us{color:var(--red);position:relative}
.diff-row.head .cell.us::before{content:"★ ";color:var(--red)}
.diff-row .cell{padding:22px 24px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.diff-row .topic{font-family:var(--font-song);font-size:16px;color:var(--teal);font-weight:500;letter-spacing:1px}
.diff-row .topic small{display:block;font-family:var(--font-sans);font-size:11px;color:var(--ink-muted);font-weight:400;margin-top:4px;letter-spacing:0}
.diff-row .us{background:#fff;border-left:2px solid var(--red)}
.diff-row .us .nm{font-size:14px;color:var(--teal);font-weight:500;margin-bottom:4px}
.diff-row .us .desc{font-size:12px;color:var(--ink-soft);line-height:1.6}
.diff-row .them .nm{font-size:13px;color:var(--ink-muted);margin-bottom:4px}
.diff-row .them .desc{font-size:12px;color:var(--ink-muted);line-height:1.6;opacity:.85}
@media(max-width:720px){
  .diff-row{grid-template-columns:1fr}
  .diff-row .cell{padding:16px 20px}
  .diff-row.head{display:none}
}

/* ================ XIAOYUAN (LEAD TEACHER) ================ */
.lead{background:var(--teal-dark);color:var(--cream);position:relative;overflow:hidden}
.lead .block-title{color:var(--cream)}
.lead .block-eye{color:var(--red)}
.lead .block-sub{color:rgba(245,240,232,.6)}
.lead-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:48px;align-items:stretch}

.lead-portrait{
  background:var(--teal);
  border-radius:14px;
  padding:40px 32px;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.portrait-frame{
  aspect-ratio:3/4;
  background:
    linear-gradient(135deg, rgba(184,74,62,.15), transparent 60%),
    repeating-linear-gradient(0deg, rgba(245,240,232,.04) 0 1px, transparent 1px 20px),
    var(--teal-light);
  border-radius:10px;
  border:.5px solid rgba(245,240,232,.18);
  margin-bottom:20px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.portrait-frame::after{
  content:"PORTRAIT · 小元老师";
  position:absolute;bottom:14px;left:16px;
  font-family:var(--font-latin);font-size:9px;
  letter-spacing:2px;opacity:.5;
}
.portrait-silhouette{
  width:60%;aspect-ratio:1;position:relative;
  background:radial-gradient(circle at 50% 45%, rgba(245,240,232,.18), transparent 55%);
  border-radius:50%;
}
.portrait-silhouette svg{width:100%;height:100%;opacity:.5}
.portrait-name{
  font-family:var(--font-song);font-size:24px;font-weight:500;
  letter-spacing:3px;color:var(--cream);margin-bottom:6px;
}
.portrait-title{font-size:12px;color:rgba(245,240,232,.6);letter-spacing:1px;line-height:1.7}
.portrait-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:20px;
  background:var(--red);color:var(--cream);
  font-size:11px;letter-spacing:1px;
  margin-top:16px;align-self:flex-start;
}

.lead-info{display:flex;flex-direction:column;gap:24px}
.lead-quote{
  font-family:var(--font-song);
  font-size:26px;line-height:1.55;letter-spacing:1px;
  color:var(--cream);
  border-left:2px solid var(--red);
  padding-left:24px;
}
.lead-quote .big{font-size:32px;color:var(--red)}
.lead-bio{font-size:14px;line-height:1.9;color:rgba(245,240,232,.78)}
.lead-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-top:28px;border-top:.5px solid rgba(245,240,232,.18);
}
.lead-stat .num{
  font-family:var(--font-song);font-size:38px;line-height:1;letter-spacing:1px;color:var(--cream);
}
.lead-stat .num small{font-size:15px;opacity:.55;margin-left:3px;font-weight:400}
.lead-stat .lbl{font-size:11px;color:rgba(245,240,232,.55);margin-top:10px;letter-spacing:1px}

.lead-creds{
  display:flex;flex-wrap:wrap;gap:8px;
}
.cred{
  background:rgba(245,240,232,.06);
  border:.5px solid rgba(245,240,232,.14);
  border-radius:30px;
  padding:7px 14px;font-size:11px;letter-spacing:1px;color:rgba(245,240,232,.85);
}
.cred.hi{background:var(--red);border-color:var(--red);color:var(--cream)}

@media(max-width:900px){
  .lead-grid{grid-template-columns:1fr;gap:32px}
  .portrait-frame{max-width:280px;aspect-ratio:1}
}

/* ================ CONTENT ASSETS (教材+真题+AI) ================ */
.assets{background:var(--cream)}
.assets-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;grid-auto-rows:1fr}
.asset{
  border-radius:14px;padding:36px 32px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:380px;
}
.asset .eye{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;margin-bottom:12px}
.asset h3{
  font-family:var(--font-song);font-size:28px;font-weight:500;
  letter-spacing:1px;line-height:1.3;margin-bottom:12px;
}
.asset p{font-size:13px;line-height:1.8;margin-bottom:16px}
.asset .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.asset .tag{font-family:var(--font-latin);font-size:10px;letter-spacing:2px;opacity:.7}
.asset .num{font-family:var(--font-song);font-size:56px;line-height:.9;font-weight:500;letter-spacing:1px}

.asset.book{
  background:var(--teal);color:var(--cream);
  grid-row:span 1;
}
.asset.book .eye{color:var(--red)}
.asset.book .visual{
  margin:14px -8px;
  display:flex;justify-content:center;perspective:800px;
}
.book-3d{
  width:150px;height:200px;position:relative;transform:rotateY(-18deg);
  transform-style:preserve-3d;
}
.book-cover{
  position:absolute;inset:0;
  background:var(--red);
  border-radius:2px 6px 6px 2px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.5);
  padding:20px 16px;
  display:flex;flex-direction:column;
  border-left:6px solid var(--red-dark);
}
.book-cover .eyebrow{font-family:var(--font-latin);font-size:8px;letter-spacing:2px;color:rgba(245,240,232,.6);margin-bottom:12px}
.book-cover .title{font-family:var(--font-song);font-size:15px;font-weight:500;letter-spacing:2px;line-height:1.3;color:var(--cream);margin-bottom:6px}
.book-cover .sub{font-family:var(--font-latin);font-size:8px;letter-spacing:2px;color:rgba(245,240,232,.5)}
.book-cover .seal{
  margin-top:auto;width:32px;height:32px;border-radius:50%;
  border:.5px solid var(--cream);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-song);font-size:16px;color:var(--cream);align-self:flex-end;
}
.book-cover .isbn{font-family:var(--font-latin);font-size:7px;letter-spacing:1px;opacity:.55;margin-top:8px}

.asset.ai{background:#fff;color:var(--teal);border:.5px solid var(--cream-border)}
.asset.ai .eye{color:var(--red)}
.asset.ai .visual{
  margin:16px 0;background:var(--cream);border-radius:8px;padding:16px;
  font-family:var(--font-latin);font-size:10px;color:var(--teal-light);
  line-height:1.8;letter-spacing:.5px;position:relative;overflow:hidden;
}
.ai-line{display:flex;gap:8px}
.ai-line .pr{color:var(--red);opacity:.75}
.ai-line.typing::after{content:"▊";color:var(--red);animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.asset.years{background:var(--red);color:var(--cream)}
.asset.years .eye{color:rgba(245,240,232,.7)}
.asset.years p{opacity:.85}

@media(max-width:900px){
  .assets-grid{grid-template-columns:1fr}
  .asset{min-height:auto}
}

/* ================ JOURNEY TIMELINE ================ */
.journey{background:#fff}
.journey-path{
  margin-top:32px;position:relative;
  padding:80px 0 100px;
}
.journey-svg{width:100%;height:auto;display:block}
.journey-legend{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px;
}
.jl{
  padding:22px 20px;border-radius:10px;
  background:var(--cream);border:.5px solid var(--cream-border);
}
.jl.hi{background:var(--teal);color:var(--cream);border:none}
.jl .m{font-family:var(--font-latin);font-size:10px;letter-spacing:2px;color:var(--red);margin-bottom:8px}
.jl.hi .m{color:rgba(245,240,232,.7)}
.jl .n{font-family:var(--font-song);font-size:18px;font-weight:500;letter-spacing:1px;margin-bottom:6px;color:var(--teal)}
.jl.hi .n{color:var(--cream)}
.jl .d{font-size:12px;line-height:1.65;color:var(--ink-soft)}
.jl.hi .d{color:rgba(245,240,232,.75)}
@media(max-width:900px){.journey-legend{grid-template-columns:repeat(2,1fr)}}

/* ================ COURSES ================ */
.courses{background:var(--cream)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course-card{
  background:#fff;border-radius:14px;
  padding:32px 28px;position:relative;
  border:.5px solid var(--cream-border);
  display:flex;flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.course-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(15,46,42,.25)}
.course-card.hi{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.course-card .tag{
  align-self:flex-start;
  font-family:var(--font-latin);font-size:10px;
  letter-spacing:2px;color:var(--red);
  padding:5px 10px;background:rgba(184,74,62,.08);border-radius:20px;
  margin-bottom:16px;
}
.course-card.hi .tag{background:var(--red);color:var(--cream)}
.course-card h3{
  font-family:var(--font-song);font-size:26px;font-weight:500;
  letter-spacing:1px;margin-bottom:6px;color:var(--teal);
}
.course-card.hi h3{color:var(--cream)}
.course-card .subj{
  font-family:var(--font-latin);font-size:11px;letter-spacing:2px;
  color:var(--ink-muted);margin-bottom:20px;
}
.course-card.hi .subj{color:rgba(245,240,232,.55)}
.course-meta{display:flex;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:.5px solid var(--cream-border)}
.course-card.hi .course-meta{border-color:rgba(245,240,232,.18)}
.course-meta .mm{display:flex;flex-direction:column;gap:3px}
.course-meta .mm .k{font-size:10px;color:var(--ink-muted);letter-spacing:1px}
.course-card.hi .course-meta .mm .k{color:rgba(245,240,232,.55)}
.course-meta .mm .v{font-family:var(--font-song);font-size:18px;color:var(--teal);font-weight:500}
.course-card.hi .course-meta .mm .v{color:var(--cream)}

.course-feats{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.course-feats li{
  font-size:13px;line-height:1.6;color:var(--ink-soft);
  padding-left:20px;position:relative;
}
.course-card.hi .course-feats li{color:rgba(245,240,232,.8)}
.course-feats li::before{
  content:"";position:absolute;left:0;top:9px;
  width:10px;height:1px;background:var(--red);
}
.course-price{
  margin-top:auto;padding-top:16px;
  display:flex;align-items:baseline;justify-content:space-between;
  border-top:.5px solid var(--cream-border);
}
.course-card.hi .course-price{border-color:rgba(245,240,232,.18)}
.course-price .p{font-family:var(--font-song);font-size:26px;color:var(--teal);font-weight:500}
.course-card.hi .course-price .p{color:var(--cream)}
.course-price .p small{font-size:12px;opacity:.55;font-weight:400;margin-left:4px}
.course-price a{
  font-size:12px;color:var(--red);letter-spacing:1px;
  display:inline-flex;align-items:center;gap:6px;
}
.course-card.hi .course-price a{color:var(--cream)}
@media(max-width:900px){.course-grid{grid-template-columns:1fr}}

/* ================ TESTIMONIALS / CASES ================ */
.cases{background:#fff}
.cases-filter{
  display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap;
}
.chip{
  padding:7px 14px;border-radius:20px;
  font-size:12px;letter-spacing:1px;
  background:var(--cream);color:var(--ink-soft);
  border:.5px solid var(--cream-border);
  cursor:pointer;transition:all .15s;
}
.chip.on{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.chip:not(.on):hover{border-color:var(--red);color:var(--red)}

.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case-card{
  background:var(--cream);border-radius:12px;
  padding:28px 26px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;
  min-height:340px;
}
.case-stamp{
  position:absolute;top:18px;right:18px;
  width:58px;height:58px;border-radius:50%;
  background:var(--red);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-song);
  transform:rotate(8deg);
  box-shadow:0 4px 12px rgba(184,74,62,.25);
}
.case-stamp .t{font-size:8px;letter-spacing:1px;opacity:.85;font-family:var(--font-latin);margin-bottom:-1px}
.case-stamp .m{font-size:18px;font-weight:500;line-height:1;letter-spacing:1px}
.case-stamp .b{font-size:7px;letter-spacing:1px;opacity:.85;font-family:var(--font-latin)}

.case-who{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.case-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-song);font-size:18px;font-weight:500;
  border:2px solid var(--cream);
}
.case-who .meta{display:flex;flex-direction:column;gap:2px}
.case-who .name{font-size:14px;font-weight:500;color:var(--teal);font-family:var(--font-song);letter-spacing:1px}
.case-who .from{font-size:11px;color:var(--ink-muted);letter-spacing:.5px}

.case-path{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:#fff;border-radius:8px;
  font-family:var(--font-song);
}
.case-path .frm{font-size:13px;color:var(--ink-soft)}
.case-path .to{font-size:14px;color:var(--teal);font-weight:500}
.case-path .ar{color:var(--red);font-family:var(--font-latin)}

.case-quote{
  font-family:var(--font-song);font-size:15px;line-height:1.7;
  color:var(--teal);letter-spacing:.5px;flex:1;
}

.case-foot{
  padding-top:14px;border-top:.5px solid var(--cream-border);
  display:flex;justify-content:space-between;font-size:11px;
  color:var(--ink-muted);font-family:var(--font-latin);letter-spacing:1px;
}
@media(max-width:900px){.cases-grid{grid-template-columns:1fr}}

/* ================ TIMELINE / NOW ================ */
.nowline{background:var(--cream-dark)}
.nowline-inner{
  background:var(--teal);color:var(--cream);
  border-radius:16px;padding:48px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
}
.nowline-inner::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(245,240,232,.08) 1px, transparent 1px);
  background-size:18px 18px;opacity:.4;pointer-events:none;
}
.nowline h2{
  font-family:var(--font-song);font-size:40px;font-weight:500;
  letter-spacing:2px;line-height:1.25;margin-bottom:14px;
}
.nowline h2 .em{color:var(--red)}
.nowline .sub{font-size:14px;opacity:.75;line-height:1.8;max-width:440px;margin-bottom:24px}
.nowline-countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  background:rgba(15,46,42,.4);border-radius:10px;padding:20px;
}
.cd{text-align:center}
.cd .n{font-family:var(--font-song);font-size:40px;font-weight:500;line-height:1}
.cd .l{font-size:10px;opacity:.55;margin-top:6px;letter-spacing:1px}
@media(max-width:900px){.nowline-inner{grid-template-columns:1fr;padding:32px}.nowline h2{font-size:30px}}

/* ================ FAQ ================ */
.faq{background:#fff}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-item{
  background:var(--cream);border-radius:10px;
  padding:22px 26px;cursor:pointer;
  transition:background .2s;
  border-left:2px solid transparent;
}
.faq-item:hover{background:var(--cream-dark);border-left-color:var(--red)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-song);font-size:16px;color:var(--teal);
  font-weight:500;letter-spacing:.5px;
}
.faq-q .i{
  width:26px;height:26px;border-radius:50%;
  border:.5px solid var(--teal);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal);font-size:14px;flex-shrink:0;
  transition:all .2s;
}
.faq-item.open .i{background:var(--red);color:var(--cream);border-color:var(--red);transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  font-size:13px;color:var(--ink-soft);line-height:1.8;
}
.faq-item.open .faq-a{max-height:400px;padding-top:14px}
@media(max-width:720px){.faq-grid{grid-template-columns:1fr}}

/* ================ CTA BAND ================ */
.cta-band{
  background:var(--cream);
  padding:80px 0;
  position:relative;
}
.cta-inner{
  background:var(--red);color:var(--cream);
  border-radius:16px;padding:64px 56px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-seal-bg{
  position:absolute;
  right:-40px;top:50%;transform:translateY(-50%);
  width:280px;height:280px;border-radius:50%;
  background:var(--red-dark);opacity:.5;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-song);font-size:180px;color:var(--red);
  line-height:1;
}
.cta-inner h2{
  font-family:var(--font-song);font-size:44px;font-weight:500;
  letter-spacing:2px;line-height:1.2;margin-bottom:14px;
  position:relative;z-index:2;
}
.cta-inner p{font-size:14px;opacity:.85;max-width:440px;line-height:1.8;position:relative;z-index:2}
.cta-right{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta-right .btn-cream{align-self:stretch;justify-content:center;padding:18px 28px;font-size:15px}
.cta-right .note{font-size:12px;opacity:.8;line-height:1.7}
@media(max-width:900px){
  .cta-inner{grid-template-columns:1fr;padding:40px 32px}
  .cta-inner h2{font-size:32px}
  .cta-seal-bg{display:none}
}

/* ================ FOOTER ================ */
.foot{background:var(--teal-dark);color:var(--cream);padding:72px 0 32px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.foot-brand .seal{
  width:52px;height:52px;background:var(--cream);color:var(--teal);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-song);font-size:32px;font-weight:500;margin-bottom:16px;
}
.foot-brand .nm{font-family:var(--font-song);font-size:22px;font-weight:500;letter-spacing:3px;margin-bottom:4px}
.foot-brand .en{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;color:var(--red);margin-bottom:20px}
.foot-brand .tag{font-family:var(--font-song);font-size:15px;line-height:1.7;opacity:.7;max-width:280px}

.foot-col h4{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;opacity:.5;margin-bottom:18px}
.foot-col a, .foot-col p{display:block;font-size:13px;opacity:.75;margin-bottom:10px;line-height:1.6;transition:opacity .15s;letter-spacing:.5px}
.foot-col a:hover{opacity:1;color:var(--red)}
.qr-box{
  width:90px;height:90px;background:var(--cream);border-radius:8px;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  position:relative;
}
.qr-box svg{width:70%;height:70%}
.foot-bottom{
  padding-top:28px;border-top:.5px solid rgba(245,240,232,.12);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--font-latin);font-size:11px;letter-spacing:1px;opacity:.5;
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ================ SECONDARY PAGES ================ */
.page-hero{
  background:var(--teal);color:var(--cream);padding:80px 0 64px;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(245,240,232,.06) 1px, transparent 1px);
  background-size:18px 18px;opacity:.5;
}
.page-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.page-hero h1{font-family:var(--font-song);font-size:56px;font-weight:500;letter-spacing:3px;line-height:1.15;margin-bottom:14px}
.page-hero .desc{font-family:var(--font-song);font-size:17px;line-height:1.8;opacity:.78;max-width:520px}
.page-hero .breadcrumb{font-family:var(--font-latin);font-size:11px;letter-spacing:3px;color:var(--red);margin-bottom:20px}
.page-hero .index{
  font-family:var(--font-song);font-size:180px;font-weight:500;
  opacity:.08;position:absolute;right:40px;top:-20px;line-height:.9;
}
@media(max-width:720px){.page-hero h1{font-size:38px}.page-hero .index{display:none}.page-hero-inner{grid-template-columns:1fr}}

/* Teacher page */
.teachers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.teacher-card{
  background:#fff;border:.5px solid var(--cream-border);
  border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.teacher-frame{
  aspect-ratio:4/5;
  background:
    linear-gradient(135deg, rgba(30,77,71,.1), rgba(184,74,62,.08)),
    repeating-linear-gradient(0deg, var(--cream-dark) 0 1px, var(--cream) 1px 24px);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.teacher-frame .initial{
  font-family:var(--font-song);font-size:80px;font-weight:500;
  color:var(--teal);opacity:.5;letter-spacing:4px;
}
.teacher-frame .corner{
  position:absolute;top:14px;left:14px;
  font-family:var(--font-latin);font-size:10px;letter-spacing:2px;color:var(--red);
}
.teacher-frame .corner2{
  position:absolute;bottom:14px;right:14px;
  font-family:var(--font-latin);font-size:10px;letter-spacing:2px;color:var(--teal-light);
}
.teacher-info{padding:24px 22px}
.teacher-name{font-family:var(--font-song);font-size:22px;font-weight:500;color:var(--teal);letter-spacing:2px;margin-bottom:4px}
.teacher-role{font-size:12px;color:var(--red);letter-spacing:1px;margin-bottom:14px}
.teacher-bio{font-size:13px;color:var(--ink-soft);line-height:1.7;min-height:68px}
.teacher-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.teacher-tags .t{font-size:10px;letter-spacing:1px;padding:4px 8px;background:var(--cream);color:var(--teal);border-radius:12px}
@media(max-width:900px){.teachers-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.teachers-grid{grid-template-columns:1fr}}

/* About page - path block */
.about-manifesto{
  background:var(--cream);padding:80px 0;
}
.manifesto-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
.manifesto-title{font-family:var(--font-song);font-size:52px;font-weight:500;color:var(--teal);letter-spacing:2px;line-height:1.2}
.manifesto-body{font-family:var(--font-song);font-size:17px;line-height:1.95;color:var(--ink-soft)}
.manifesto-body p{margin-bottom:16px}
.manifesto-body p strong{color:var(--teal);font-weight:500}
.manifesto-body .highlight{
  background:var(--teal);color:var(--cream);padding:20px 24px;border-radius:10px;
  font-size:18px;line-height:1.7;margin:24px 0;
}
@media(max-width:900px){.manifesto-inner{grid-template-columns:1fr}.manifesto-title{font-size:36px}}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value-card{
  background:#fff;border:.5px solid var(--cream-border);
  border-radius:14px;padding:32px 28px;
  position:relative;overflow:hidden;
}
.value-card .num{
  position:absolute;top:20px;right:24px;
  font-family:var(--font-song);font-size:60px;opacity:.08;color:var(--teal);line-height:.9;
}
.value-card h3{font-family:var(--font-song);font-size:26px;font-weight:500;color:var(--teal);margin-bottom:10px;letter-spacing:2px}
.value-card .en{font-family:var(--font-latin);font-size:10px;letter-spacing:3px;color:var(--red);margin-bottom:16px}
.value-card p{font-size:13px;color:var(--ink-soft);line-height:1.8}
@media(max-width:900px){.values-grid{grid-template-columns:1fr}}

/* ================ TWEAKS PANEL ================ */
.tweaks{
  position:fixed;right:20px;bottom:20px;z-index:99;
  background:#fff;border:.5px solid var(--cream-border);
  border-radius:14px;padding:20px;width:280px;
  box-shadow:0 20px 50px -15px rgba(15,46,42,.3);
  font-size:13px;
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.tweaks h4{font-family:var(--font-song);font-size:15px;color:var(--teal);margin-bottom:12px;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center}
.tweaks h4 .close{cursor:pointer;font-size:18px;color:var(--ink-muted);font-weight:300}
.tweak-row{margin-bottom:14px}
.tweak-row label{font-size:11px;color:var(--ink-muted);letter-spacing:1px;margin-bottom:6px;display:block;text-transform:uppercase}
.tweak-opts{display:flex;gap:6px;flex-wrap:wrap}
.tweak-opt{
  flex:1;min-width:60px;
  padding:7px 10px;border-radius:6px;
  background:var(--cream);font-size:11px;letter-spacing:.5px;text-align:center;
  cursor:pointer;border:.5px solid transparent;
}
.tweak-opt.on{background:var(--teal);color:var(--cream);border-color:var(--teal)}

/* ================ UTILS ================ */
.flow-path{
  position:absolute;inset:0;pointer-events:none;
  overflow:hidden;
}
.texture-lines{
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:repeating-linear-gradient(0deg, var(--teal) 0 1px, transparent 1px 24px);
}

.page{display:none}
.page.active{display:block}

.scroll-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--font-latin);font-size:10px;letter-spacing:3px;color:rgba(245,240,232,.5);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.scroll-hint .bar{width:1px;height:24px;background:rgba(245,240,232,.3)}