/* ===== ChinesewithShyanne · shared brand system (restyle v2) ===== */
:root{
  --accent:#5b4bd6; --accent2:#7a5cf0; --title:#4a32b0; --ink:#2a2a3c; --muted:#7a7a90;
  --bg:#f5f4fc; --card:#ffffff; --border:#ece9fb; --tint:#f3f1fd;
  --gold:#FFD23F; --seal:#6d5be0;
  --shadow:0 8px 28px rgba(74,50,176,.10);
  --shadow-sm:0 3px 12px rgba(74,50,176,.07);
  --rad:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC",sans-serif;
  background:var(--bg); color:var(--ink); font-size:17px; line-height:1.7;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:920px; margin:0 auto; padding:0 20px 64px;}

/* ---------- icon base ---------- */
.ico{width:1em; height:1em; fill:currentColor; color:var(--accent); flex:0 0 auto;}
.ico.use{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(135deg,var(--accent),var(--title)); color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  box-shadow:0 2px 16px rgba(74,50,176,.25);
}
.hbar{max-width:920px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:flex; align-items:center; gap:12px; line-height:1; align-self:flex-end; margin-bottom:-14px; margin-left:24px;}
.logo img{height:134px; width:auto; display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.28));}
.hbar .sp{display:none;}

/* desktop nav */
nav.main{display:flex; align-items:center; gap:8px;}
nav.main .navitem{position:relative;}
nav.main .navlink{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; font-size:19px; font-weight:700; padding:12px 18px; border-radius:12px;
  white-space:nowrap; cursor:pointer;
}
nav.main .navlink:hover{background:rgba(255,255,255,.14);}
nav.main .navlink .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,.85); margin-left:2px;}
.drop{
  position:absolute; top:100%; left:0; min-width:228px;
  background:#fff; color:var(--ink); border-radius:13px; box-shadow:var(--shadow);
  border:1px solid var(--border); padding:7px; display:none; z-index:60;
}
nav.main .navitem:hover .drop{display:block;}
.drop a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink);
}
.drop a:hover{background:var(--tint);}
.drop a .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px;}
.drop a b{display:block; font-size:14.5px; color:var(--title);}
.drop a span{display:block; font-size:12px; color:var(--muted); font-weight:400;}

/* hamburger (mobile) */
.burger{display:none; width:40px; height:40px; border:0; background:rgba(255,255,255,.16); border-radius:10px; cursor:pointer; position:relative;}
.burger span{position:absolute; left:10px; right:10px; height:2.4px; background:#fff; border-radius:2px; transition:.2s;}
.burger span:nth-child(1){top:13px;} .burger span:nth-child(2){top:19px;} .burger span:nth-child(3){top:25px;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; color:#fff; padding:30px 16px 0;
  background:url("classroom-v2.jpg") center/cover no-repeat #2a1d5e;}
.hero .frost{position:absolute; inset:0; z-index:0;
  -webkit-backdrop-filter:blur(5px) saturate(.95); backdrop-filter:blur(5px) saturate(.95);
  background:linear-gradient(115deg, rgba(16,15,24,.62), rgba(16,15,24,.34) 50%, rgba(16,15,24,.50));}
.hero .layer{position:relative; z-index:2; display:flex; align-items:flex-end; gap:22px; justify-content:center;
  max-width:840px; margin:0 auto; text-align:left;}
.hero .copy{flex:0 1 auto; max-width:520px; min-width:0; display:flex; flex-direction:column; justify-content:flex-start;}
.hero .ava{position:relative; flex:0 0 auto; width:min(340px,46vw); filter:drop-shadow(0 14px 24px rgba(18,8,48,.5));}
.hero .ava img{width:100%; height:auto;}
.hero h1{margin:0; font-size:31px; font-weight:800; letter-spacing:.3px; text-shadow:0 2px 12px rgba(0,0,0,.45);}
.hero .tag{margin:10px 0 0; max-width:520px; font-size:16.5px; opacity:.96; line-height:1.7; text-shadow:0 1px 8px rgba(0,0,0,.42);}
.hero .badges{margin:16px 0 0; display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap;}
.hero .badges span{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); font-size:13px; padding:5px 12px; border-radius:99px;}
.hero .copy > .btn{align-self:flex-start; width:fit-content; margin:22px 0 40px;}

.btn{display:inline-flex; align-items:center; gap:7px; justify-content:center;
  font-size:15.5px; font-weight:700; line-height:1.2; padding:13px 22px; border-radius:12px; min-height:48px;
  cursor:pointer; border:0; white-space:nowrap;}
.btn.pri{background:var(--gold); color:#3a2c00;}
.btn.sec{background:#fff; color:var(--title);}
.btn.ghost{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35);}

/* ---------- section ---------- */
.sec{padding:36px 0 4px;}
.sec h2{margin:0 0 6px; font-size:24px; font-weight:800; color:var(--title); display:flex; align-items:center; gap:10px;}
.sec h2 .bar{width:5px; height:24px; border-radius:3px; background:linear-gradient(var(--accent2),var(--title));}
.sec .sub{font-size:15px; color:var(--muted); margin:0 0 18px;}
.cloud-div{display:flex; align-items:center; gap:10px; color:var(--accent); margin:0 0 14px;}
.cloud-div svg{width:30px; height:30px;}
.cloud-div .ln{flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent);}

/* ---------- teaser cards (homepage) ---------- */
.tease{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tcard{background:var(--card); border:1px solid var(--border); border-radius:var(--rad); padding:20px 18px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;}
.tcard::before{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,240,.12),transparent 70%);}
.tcard .ti{width:50px; height:50px; border-radius:14px; background:var(--tint); color:var(--accent);
  display:flex; align-items:center; justify-content:center;}
.tcard .ti svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.tcard h3{margin:0; font-size:18px; font-weight:800; color:var(--title);}
.tcard p{margin:0; font-size:14px; color:#44445e; line-height:1.6; flex:1;}
.tcard .more{display:inline-flex; align-items:center; gap:5px; color:var(--accent); font-weight:700; font-size:14.5px;}
.tcard .more svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- generic content card ---------- */
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--rad); padding:22px; box-shadow:var(--shadow);}
.panel.about{font-size:16.5px; color:#44445e; line-height:1.8;}
.panel.about b{color:var(--title);}

/* video slot */
.vslot{margin-top:14px; border-radius:16px; overflow:hidden; background:#1a1228; border:1px solid var(--border); box-shadow:var(--shadow);}
.intro-video{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000;}

/* ---------- free banner ---------- */
.free{background:linear-gradient(135deg,#6d5be0,#4a32b0); color:#fff; border-radius:18px; padding:24px 18px; text-align:center; box-shadow:var(--shadow);}
.free h3{margin:0 0 6px; font-size:22px; font-weight:800;}
.free p{margin:0 auto 16px; font-size:16px; opacity:.92; max-width:440px; line-height:1.65;}
.free .btn{margin:0 auto; display:block; width:fit-content;}

/* ---------- contact / follow ---------- */
.follow{background:linear-gradient(160deg,#a98eea,#8b6ade); border-radius:20px; padding:26px 22px 22px; box-shadow:var(--shadow); color:#fff;}
.follow .ft{text-align:center; font-size:21px; font-weight:800; margin:0 0 18px; letter-spacing:.3px;}
.follow .fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 10px; text-align:center;}
.follow .cell{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:#fff;}
.follow .badge{width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px rgba(40,20,90,.28);}
.follow .badge svg{display:block; width:30px; height:30px; fill:#fff;}
.follow .pn{font-size:14.5px; font-weight:800;}
.follow .ac{font-size:12.5px; opacity:.92; word-break:break-word;}
.follow .panel{margin-top:20px; background:rgba(255,255,255,.22); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; align-items:center; font-size:15px; font-weight:700;}
.follow .panel a{color:#fff;}

footer{text-align:center; font-size:14px; color:var(--muted); padding:26px 20px 0;}
.totop{display:block; text-align:center; font-size:13px; color:var(--accent); margin:14px 0 0;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .burger{display:block;}
  .logo{margin-left:6px;}
  .logo img{height:96px;}
  .hbar{gap:20px;}
  nav.main{position:absolute; top:100%; left:0; right:0; background:linear-gradient(135deg,var(--accent),var(--title));
    flex-direction:column; align-items:stretch; gap:0; padding:8px 12px 14px; display:none; box-shadow:0 12px 24px rgba(40,20,90,.3);}
  nav.main.open{display:flex;}
  nav.main .navitem{position:static;}
  nav.main .navlink{justify-content:space-between; font-size:17px; padding:13px 12px;}
  .drop{position:static; box-shadow:none; border:0; background:rgba(255,255,255,.08); color:#fff; display:none; padding:4px 0 8px 14px; min-width:0;}
  nav.main .navitem.open .drop{display:block;}
  .drop a{color:#fff; padding:10px 10px;}
  .drop a b{color:#fff;} .drop a span{color:rgba(255,255,255,.8);} .drop a .dot{background:#fff;}
}

/* ===== detail pages (products / courses / study) ===== */
/* ---------- large screens: widen content so it matches the full-bleed hero ---------- */
@media (min-width:1240px){
  .wrap{max-width:1160px;}
  .hbar{max-width:1160px;}
  .hero{padding:44px 24px 0;}
  .hero .layer{max-width:1040px; gap:34px;}
  .hero .copy{max-width:600px;}
  .hero .tag{max-width:600px; font-size:18px;}
  .hero h1{font-size:36px;}
  .hero .ava{width:min(400px,32vw);}
}
@media (min-width:1600px){
  .wrap{max-width:1360px;}
  .hbar{max-width:1360px;}
  .hero{padding:56px 28px 0;}
  .hero .layer{max-width:1240px; gap:40px;}
  .hero .copy{max-width:680px;}
  .hero .tag{max-width:680px; font-size:19px;}
  .hero h1{font-size:42px;}
}
@media (min-width:2000px){
  .wrap{max-width:1600px;}
  .hbar{max-width:1600px;}
}
.pagehero{padding:30px 0 4px;}
.pagehero .crumb{font-size:13.5px; color:var(--muted); margin:0 0 10px;}
.pagehero .crumb a{color:var(--accent); font-weight:600;}
.pagehero h1{margin:0 0 6px; font-size:27px; font-weight:800; color:var(--title); display:flex; align-items:center; gap:10px;}
.pagehero h1 .bar{width:5px; height:26px; border-radius:3px; background:linear-gradient(var(--accent2),var(--title));}
.pagehero .lead{font-size:16px; color:#44445e; line-height:1.7; margin:0 0 4px;}

/* product detail */
.prow{display:grid; grid-template-columns:1.05fr 1fr; gap:18px; align-items:stretch; margin-top:18px;}
.prow .pimg{position:relative; border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); background:#eae7f7; min-height:100%;}
.prow .pimg .ptitle{position:absolute; left:0; right:0; top:0; z-index:2; padding:18px 20px 34px; color:#fff; background:linear-gradient(180deg,rgba(38,24,92,.86),rgba(38,24,92,0));}
.prow .pimg .ptitle .k{font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; opacity:.85;}
.prow .pimg .ptitle h3{margin:6px 0 0; font-size:24px; font-weight:800; line-height:1.16; text-shadow:0 1px 8px rgba(0,0,0,.3);}
.prow .pimg .pic{position:absolute; inset:0;}
.prow .pimg .pic img{width:100%; height:100%; object-fit:cover; display:block;}
.pbox{background:var(--card); border:1px solid var(--border); border-radius:var(--rad); padding:20px; box-shadow:var(--shadow);}
.pbox h2{margin:0 0 10px; font-size:20px; font-weight:800; color:var(--title);}
.pbox ul{margin:0 0 14px; padding-left:20px; font-size:15.5px; color:#44445e; line-height:1.6;}
.pbox ul li{margin-bottom:7px;} .pbox ul li::marker{color:var(--accent); font-weight:700;}
/* symmetric payment blocks */
.price{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 14px;}
.price .blk{border:1px solid var(--border); border-radius:13px; padding:14px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:236px;}
.price .blk.rmb{background:var(--tint);}
.price .blk .lab{font-size:12px; font-weight:700; color:var(--title); letter-spacing:.3px;}
.price .blk .amt{font-size:26px; font-weight:800; color:var(--title); line-height:1.1; margin:4px 0 8px;}
.price .blk .amt small{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px;}
.price .blk .qrs{display:flex; gap:12px; justify-content:center;}
.price .blk .qrs>div{display:flex; flex-direction:column; align-items:center;}
.price .blk img.qr{width:92px; height:92px; object-fit:contain; background:#fff; border-radius:7px; border:1px solid var(--border);}
.price .blk .qcap{font-size:12px; font-weight:700; color:var(--title); margin-top:4px;}
.price .blk .note{font-size:11.5px; color:var(--muted); line-height:1.5; text-align:center;}
.pbox .paynote{font-size:12.5px; color:var(--muted); line-height:1.6; border-top:1px dashed var(--border); padding-top:11px; margin:0;}
.pbox .refund{font-size:12px; color:#9a8fb5; margin:10px 0 0;}

/* course catalogue on detail page */
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.course{background:var(--card); border:1px solid var(--border); border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); display:flex; align-items:stretch;}
.course .ph{width:40%; flex:0 0 40%; object-fit:cover; object-position:center; background:#eae7f7; min-height:180px;}
.course .cb{padding:14px 16px; flex:1; min-width:0; display:flex; flex-direction:column;}
.course .cb .t{font-size:16.5px; font-weight:800; color:var(--title); margin:0 0 5px;}
.course .cb .who{font-size:13.5px; color:var(--muted); margin:0 0 9px;}
.course .cb .hl{margin:0 0 10px; padding-left:18px; flex:1; font-size:13.5px; color:#44445e; line-height:1.5;}
.course .cb .hl li{margin-bottom:4px;} .course .cb .hl li::marker{color:var(--accent);}
.course .cb .bk{text-align:center; background:var(--accent); color:#fff; font-size:14.5px; font-weight:600; padding:10px; border-radius:11px;}

/* login gate */
.gate{max-width:460px; margin:24px auto; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:26px 22px; box-shadow:var(--shadow); text-align:center;}
.gate .sealbig{width:64px; height:64px; border-radius:16px; margin:0 auto 12px; background:linear-gradient(135deg,#fff,#f1ecff); color:var(--title); display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; font-family:"Songti SC","STSong",serif; box-shadow:0 3px 10px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.6);}
.gate h2{margin:0 0 6px; font-size:21px; font-weight:800; color:var(--title);}
.gate p{font-size:14.5px; color:#44445e; margin:0 0 16px; line-height:1.6;}
.gate input{width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:11px; font-size:15px; margin-bottom:10px; box-sizing:border-box; font-family:inherit;}
.gate .msg{font-size:13px; min-height:18px; margin:8px 0 0;}
.gate .msg.err{color:#c0392b;} .gate .msg.ok{color:#2e8b57;}
.gate .alt{font-size:13px; color:var(--muted); margin-top:14px;}
.gate .alt a{color:var(--accent); font-weight:600;}

@media (max-width:680px){
  .prow{grid-template-columns:1fr;}
  .cgrid{grid-template-columns:1fr;}
  .price{grid-template-columns:1fr;}
  .price .blk{min-height:0;}
}

/* ---------- contact chooser modal ---------- */
.cmask{position:fixed; inset:0; z-index:100; background:rgba(20,12,50,.55);
  display:none; align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.cmask.open{display:flex;}
.cbox{background:#fff; border-radius:18px; max-width:360px; width:100%; padding:24px 20px 18px;
  text-align:center; box-shadow:0 18px 50px rgba(20,10,60,.35); position:relative; animation:cpop .18s ease;}
@keyframes cpop{from{transform:scale(.92); opacity:0;} to{transform:scale(1); opacity:1;}}
.cbox h3{margin:0 0 4px; font-size:19px; font-weight:800; color:var(--title);}
.cbox .csub{font-size:13.5px; color:var(--muted); margin:0 0 16px;}
.cbtn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:50px;
  border-radius:13px; font-size:15.5px; font-weight:700; color:#fff; margin-bottom:10px; border:0; cursor:pointer; font-family:inherit;}
.cbtn svg{width:21px; height:21px; fill:#fff; flex:0 0 auto;}
.cbtn.wa{background:#25d366;}
.cbtn.wx{background:#07c160;}
.cbtn:hover{filter:brightness(1.05);}
.cbox .cclose{position:absolute; top:8px; right:12px; border:0; background:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1;}
.cbox .cid{font-size:13px; color:var(--muted); margin:2px 0 0;}
.cbox .cid b{color:var(--title);}

/* what's included (1-on-1 services) */
.svcwrap{background:var(--card); border:1px solid var(--border); border-radius:var(--rad); padding:20px 18px 18px; box-shadow:var(--shadow); margin-top:18px;}
.svcwrap .svchead{font-size:21px; font-weight:800; color:var(--title); text-align:center; padding-bottom:10px; border-bottom:2px solid var(--accent); margin:0 0 8px;}
.svcwrap .svcsub{text-align:center; font-size:14.5px; color:var(--muted); margin:0 0 18px;}
.svcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.svc{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.svc .sh{background:linear-gradient(120deg,#6a8ef5,#5b6ef0); color:#fff; padding:12px 14px;}
.svc .sh .st{font-size:15.5px; font-weight:800; line-height:1.3;}
.svc .sh .ss{font-size:12px; opacity:.93; margin-top:2px;}
.svc .sb{padding:12px 14px 14px; display:flex; flex-direction:column; gap:9px; flex:1;}
.svc .si{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:#44445e; line-height:1.55;}
.svc .tag{flex:0 0 auto; font-size:11.5px; font-weight:700; color:#fff; border-radius:7px; padding:3px 8px; margin-top:1px; white-space:nowrap;}
.svc .tag.b{background:#4f7df0;} .svc .tag.g{background:#3fae6a;} .svc .tag.o{background:#f0952f;}
.svcfoot{text-align:center; font-size:13.5px; color:var(--muted); font-style:italic; margin:16px 0 0;}
@media (max-width:680px){ .svcgrid{grid-template-columns:1fr;} }

@media (max-width:680px){
  /* mobile hero: same visual grammar as desktop — text block, badges row, button left + character right, bottom-flush */
  .hero{padding:22px 14px 0;}
  .hero .layer{flex-wrap:wrap; gap:14px 12px; align-items:flex-end; justify-content:flex-start;}
  .hero .copy{display:contents;}
  .hero .copy > div{flex:1 1 100%;}
  .hero h1{font-size:27px;}
  .hero .tag{font-size:14.5px; margin-top:8px;}
  .hero .badges{flex:1 1 100%; margin:0; gap:6px;}
  .hero .badges span{font-size:11.5px; padding:4px 10px;}
  .hero .copy > .btn{align-self:flex-end; flex:0 1 auto; margin:0 0 12px; padding:11px 14px; font-size:13.5px; min-height:44px;}
  .hero .ava{width:min(44vw,200px); margin-left:auto;}
  .tease{grid-template-columns:1fr;}
  .follow .fgrid{gap:16px 6px;}
  .follow .badge{width:48px; height:48px; border-radius:13px;} .follow .badge svg{width:26px; height:26px;}
  .follow .pn{font-size:13.5px;} .follow .ac{font-size:11px;}
}