/* ============================================================
   文公教育 · Playful Bold v3（斑马风 × 高对比）
   高饱和色块 × 白色粗体大标题 × 圆润卡片 × 深色正文不灰不淡
   ============================================================ */
:root {
  --ink: #17181c;          /* 标题近黑 */
  --body: #333a45;         /* 正文深灰蓝，可读性强 */
  --brand: #2456f0;        /* 品牌亮蓝 */
  --brand-deep: #0e1c40;
  --orange: #e60012;         /* 品牌红（源自文公 logo），作全站点缀色 */
  --orange-deep: #b5000e;
  --cream: #fff6e9;
  --mint: #eafaf0;
  --sky: #edf3ff;
  --pink: #fdeef3;
  --sand: #f6f0e2;
  --line: #e8e2d6;
  --sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --r-lg: 26px;
  --r-md: 16px;
  --tex: url("../img/card-pattern.jpg") center / 360px auto repeat;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
/* 锚点跳转时避开固定导航；详解卡内部排版 */
.b-card[id] { scroll-margin-top: 108px; }
.b-card .d-row { margin-top: 10px; }
.b-card .d-row b { color: var(--ink); }
.b-card .d-row span { display: block; font-size: 14.5px; font-weight: 600; color: var(--body); line-height: 1.8; margin-top: 2px; }
body {
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- 悬浮胶囊导航 ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 300; display: flex; justify-content: center; padding: 0 16px; }
.nav-pill {
  display: flex; align-items: center; gap: 20px; max-width: 1180px; width: 100%;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(120, 140, 190, 0.35); border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow:
    0 10px 30px rgba(23, 42, 105, 0.16),
    0 3px 8px rgba(23, 42, 105, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: 1px; color: var(--ink); }
.brand-logo {
  width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(120, 140, 190, 0.35),
    0 4px 10px rgba(23, 42, 105, 0.22);
}
.brand small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--brand); }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.nav-links a {
  font-size: 15px; font-weight: 600; color: var(--ink); padding: 8px 13px; border-radius: 999px; transition: 0.2s;
}
.nav-links a:hover { color: var(--brand); background: var(--sky); }
.nav-links a.active { background: var(--brand); color: #fff; }
.nav-cta { background: var(--orange); color: #fff !important; font-weight: 800; }
.nav-cta:hover { background: var(--orange-deep); color: #fff !important; }

/* ---------- Hero：插画背景大色块 ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    linear-gradient(95deg, rgba(20, 44, 140, 0.94) 0%, rgba(26, 58, 190, 0.86) 30%, rgba(40, 88, 226, 0.45) 58%, rgba(47, 99, 242, 0.12) 100%),
    url('../img/hero-bg.jpg') center / cover no-repeat;
  padding: 160px 0 54px;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 62%, #fff 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff;
  font-size: 14.5px; font-weight: 800; letter-spacing: 3px;
  border-radius: 999px; padding: 8px 20px; margin-bottom: 26px;
  box-shadow: 0 7px 18px rgba(217, 79, 15, 0.35);
}
.hero-title { font-size: clamp(40px, 5.2vw, 62px); line-height: 1.22; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.hero-title .hl { color: #ffd44d; }
.hero-sub { margin-top: 24px; max-width: 560px; font-size: 18px; line-height: 1.9; color: #ffffff; font-weight: 500; }
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 15px 34px; border-radius: 999px; font-size: 16.5px; font-weight: 800; transition: 0.15s; }
.btn-primary { background: #ffd44d; color: var(--ink); box-shadow: 0 7px 18px rgba(217, 169, 22, 0.4); }
.btn-primary:hover { transform: translateY(2px); box-shadow: 0 5px 12px rgba(217, 169, 22, 0.4); }
.btn-ghost { background: #fff; color: var(--brand); box-shadow: 0 7px 18px rgba(14, 28, 64, 0.2); }
.btn-ghost:hover { transform: translateY(2px); box-shadow: 0 5px 12px rgba(14, 28, 64, 0.2); }

/* Hero 右侧：吉祥物 + 漂浮徽章贴纸 */
.hero-visual {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  min-height: 340px; padding-bottom: 6px;
}
.hero-mascot {
  width: auto; height: 300px; object-fit: contain;
  filter: drop-shadow(0 20px 32px rgba(9, 20, 50, 0.42));
  position: relative; z-index: 3;
  animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--tilt, 0deg)); } }
.hero-chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 11px 20px; font-size: 16px;
  box-shadow: 0 8px 22px rgba(23, 42, 105, 0.14), 0 2px 6px rgba(23, 42, 105, 0.08);
  animation: floaty2 4.2s ease-in-out infinite;
}
.hero-chip b { font-weight: 800; color: var(--ink); letter-spacing: 0.05em; }
.hc-1 { top: 4%; left: 2%; --tilt: -7deg; }
.hc-2 { top: 14%; right: 0%; --tilt: 6deg; animation-delay: 0.8s; }
.hc-3 { bottom: 24%; right: 4%; --tilt: -4deg; animation-delay: 1.6s; }
.hero-stats {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px;
}
.hstat {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 20px;
  padding: 22px 10px 20px; text-align: center; box-shadow: 0 8px 22px rgba(23, 42, 105, 0.14), 0 2px 6px rgba(23, 42, 105, 0.08);
}
.hstat b { font-size: 34px; font-weight: 800; color: var(--brand); display: block; line-height: 1.25; }
.hstat span { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* ---------- 区块骨架 ---------- */
.section { padding: 62px 0; }
.section.tight { padding: 48px 0; }
.sec-head { max-width: 760px; margin-bottom: 34px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  display: inline-block; background: var(--ink); color: #ffd44d;
  font-size: 13.5px; font-weight: 800; letter-spacing: 3px;
  border-radius: 999px; padding: 7px 18px; margin-bottom: 18px;
}
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: 0.02em; line-height: 1.3; font-weight: 800; color: var(--ink); }
.sec-head p { margin-top: 16px; color: var(--body); font-size: 17px; font-weight: 500; }

/* 色带区块 */
.band-cream { background: var(--cream); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.band-sky { background: var(--sky); }
.band-mint { background: var(--mint); }

/* ---------- Bento 不对称网格 ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.b-card {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: var(--r-lg);
  padding: 30px; min-height: 216px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(23, 42, 105, 0.14), 0 2px 7px rgba(23, 42, 105, 0.08);
}
.b-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(23, 42, 105, 0.2), 0 5px 12px rgba(23, 42, 105, 0.12); }
.b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; } .b-5 { grid-column: span 5; }
.b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; } .b-8 { grid-column: span 8; }
.b-12 { grid-column: span 12; min-height: 0; }
.t-blue   { background: linear-gradient(rgba(237,243,255,0.9), rgba(237,243,255,0.9)), var(--tex); }
.t-orange { background: linear-gradient(rgba(253,234,234,0.9), rgba(253,234,234,0.9)), var(--tex); }
.t-green  { background: linear-gradient(rgba(234,250,240,0.9), rgba(234,250,240,0.9)), var(--tex); }
.t-pink   { background: linear-gradient(rgba(253,238,243,0.9), rgba(253,238,243,0.9)), var(--tex); }
.t-sand   { background: linear-gradient(rgba(246,240,226,0.9), rgba(246,240,226,0.9)), var(--tex); }
.t-grey   { background: linear-gradient(rgba(240,242,246,0.9), rgba(240,242,246,0.9)), var(--tex); }
.b-ink {
  background:
    linear-gradient(135deg, rgba(36,86,240,0.96) 0%, rgba(18,42,140,0.97) 100%),
    var(--tex);
  color: #fff;
}
.b-ink::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255, 212, 77, 0.22); pointer-events: none;
}
.b-icon {
  width: 50px; height: 50px; border-radius: 14px; background: #fff; display: grid; place-items: center;
  font-size: 24px; border: 1px solid rgba(120, 140, 190, 0.4);
}
.b-card h3 { font-size: 21px; font-weight: 800; letter-spacing: 0.03em; margin: 18px 0 8px; color: var(--ink); }
.b-card p { font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.75; }
@media (min-width: 1200px) { .b-card p { white-space: nowrap; } }
.b-ink h3 { color: #fff; }
.b-ink p { color: #ffffff; }
.b-card .b-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; }
.b-foot .b-link { font-size: 14.5px; font-weight: 800; color: var(--brand); }
.b-ink .b-link { color: #ffd44d; }
.b-arrow {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; border: 1px solid rgba(120, 140, 190, 0.4);
  transition: 0.2s;
}
.b-card:hover .b-arrow { background: var(--orange); border-color: var(--ink); color: #fff; transform: translateX(4px); }
.b-card .b-num {
  position: absolute; right: 22px; top: 12px; font-size: 64px;
  color: rgba(23, 24, 28, 0.08); font-weight: 800; line-height: 1;
}
.b-ink .b-num { color: rgba(255, 255, 255, 0.18); }

/* ---------- 编号式优势 ---------- */
.adv-row {
  display: grid; grid-template-columns: 130px 1fr 300px; gap: 40px; align-items: start;
  padding: 38px 0; border-top: 2px solid var(--ink);
}
.adv-row:last-child { border-bottom: 2px solid var(--ink); }
.adv-num {
  width: 84px; height: 84px; border-radius: 24px; background: var(--orange);
  border: 1px solid rgba(120, 140, 190, 0.4); box-shadow: 0 6px 18px rgba(23, 42, 105, 0.13), 0 2px 6px rgba(23, 42, 105, 0.08);
  display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff;
}
.adv-row h3 { font-size: 25px; font-weight: 800; letter-spacing: 0.03em; margin-bottom: 10px; color: var(--ink); }
.adv-row p { color: var(--body); font-size: 16.5px; font-weight: 500; max-width: 640px; }
.adv-tag {
  justify-self: end; align-self: center; font-size: 14px; font-weight: 800;
  color: var(--brand); background: var(--sky); border: 1px solid rgba(120, 140, 190, 0.4);
  border-radius: 999px; padding: 8px 18px; white-space: nowrap;
}

/* ---------- 课程卡片 ---------- */
.courses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.course {
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(120, 140, 190, 0.4); transition: 0.2s; display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(23, 42, 105, 0.14), 0 2px 7px rgba(23, 42, 105, 0.08);
}
.course:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(23, 42, 105, 0.2), 0 5px 12px rgba(23, 42, 105, 0.12); }
.course-top { position: relative; padding: 28px 26px 20px; overflow: hidden; }
.course-top::before { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.course-top .emoji { font-size: 42px; position: relative; }
.course-chip {
  display: inline-block; position: relative; font-size: 12.5px; font-weight: 800;
  background: var(--ink); color: #ffd44d; padding: 5px 14px; border-radius: 999px; margin-top: 12px; letter-spacing: 1px;
}
.course-body { padding: 20px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.course-body h3 { font-size: 19.5px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 8px; color: var(--ink); }
.course-body p { font-size: 14.5px; font-weight: 500; color: var(--body); flex: 1; line-height: 1.75; }
.course-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line); }
.price { font-size: 26px; font-weight: 800; color: var(--orange); }
.price small { font-size: 13px; font-weight: 600; color: var(--body); margin-left: 2px; }
.course-meta .mode { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* ---------- 案例墙（奶油底，深色文字） ---------- */
.quotes {
  background:
    linear-gradient(rgba(255, 246, 233, 0.9), rgba(255, 246, 233, 0.9)),
    var(--tex);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.quotes .sec-head h2 { color: var(--ink); }
.quotes .sec-head p { color: var(--body); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--tex);
  border: 1px solid rgba(120, 140, 190, 0.4); border-radius: var(--r-lg);
  padding: 30px; transition: 0.2s; box-shadow: 0 8px 24px rgba(23, 42, 105, 0.14), 0 2px 7px rgba(23, 42, 105, 0.08);
}
.quote:nth-child(3n+2) { background: linear-gradient(rgba(237, 243, 255, 0.9), rgba(237, 243, 255, 0.9)), var(--tex); }
.quote:nth-child(3n)   { background: linear-gradient(rgba(246, 240, 226, 0.92), rgba(246, 240, 226, 0.92)), var(--tex); }
.quote:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--shc, 23, 42, 105), 0.22), 0 4px 11px rgba(var(--shc, 23, 42, 105), 0.12); }
.q-mark { font-size: 56px; line-height: 0.6; color: var(--orange); font-weight: 800; display: block; margin-bottom: 20px; }
.q-result { font-size: 33px; font-weight: 800; color: var(--brand); letter-spacing: 0.02em; }
.quote h4 { font-size: 17px; font-weight: 800; margin: 10px 0 8px; color: var(--ink); }
.quote p { font-size: 14.5px; font-weight: 500; color: var(--body); }
.q-who {
  display: inline-block; margin-top: 18px; font-size: 13.5px; font-weight: 700;
  color: var(--ink); background: var(--sky); border: 1px solid rgba(120, 140, 190, 0.4);
  border-radius: 999px; padding: 5px 15px;
}

/* ---------- 横向时间轴 ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.timeline.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.timeline.six .tl-step { padding: 0 10px; }
.timeline.six .tl-step p { white-space: normal; }
.timeline::before { content: ""; position: absolute; top: 25px; left: 8%; right: 8%; border-top: 3px dashed #d9d2c2; }
.tl-step { text-align: center; padding: 0 16px; position: relative; }
.tl-dot {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--brand); border: 1px solid rgba(120, 140, 190, 0.4); box-shadow: 0 5px 14px rgba(23, 42, 105, 0.12), 0 2px 5px rgba(23, 42, 105, 0.07);
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff;
  transition: 0.2s; position: relative; z-index: 2;
}
.tl-step:hover .tl-dot { background: var(--orange); transform: scale(1.12); }
.tl-step h4 { font-size: 16.5px; font-weight: 800; margin-bottom: 4px; color: var(--ink); }
.tl-step .tl-time { display: block; font-size: 13px; font-weight: 800; color: var(--orange); letter-spacing: 1px; margin-bottom: 8px; }
.tl-step p { font-size: 14px; font-weight: 500; color: var(--body); white-space: nowrap; }
@media (max-width: 1024px) { .tl-step p { white-space: normal; } }

/* ---------- FAQ：左题右列 ---------- */
.faq-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side h2 { font-size: 36px; font-weight: 800; letter-spacing: 0.03em; margin: 0 0 14px; color: var(--ink); }
.faq-side p { color: var(--body); font-size: 15.5px; font-weight: 600; margin-bottom: 26px; }
.faq-list details { border-bottom: 2px solid var(--ink); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 24px 4px; font-size: 17px; font-weight: 800; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-size: 26px; font-weight: 800; color: var(--orange); transition: 0.2s; flex-shrink: 0;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 4px 24px; color: var(--body); font-size: 15.5px; font-weight: 500; max-width: 720px; }

/* ---------- CTA 大横幅 ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: 30px; color: #fff;
  background:
    radial-gradient(500px 260px at 88% 0%, rgba(255, 212, 77, 0.4), transparent 60%),
    linear-gradient(130deg, var(--orange) 0%, #ff4d3d 100%);
  border: 1px solid rgba(120, 140, 190, 0.4); box-shadow: 0 10px 26px rgba(23, 42, 105, 0.16), 0 3px 8px rgba(23, 42, 105, 0.09);
  padding: 60px 60px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta h2 { font-size: clamp(25px, 3vw, 36px); font-weight: 800; letter-spacing: 0.03em; color: #fff; }
.cta p { color: #ffffff; margin-top: 10px; font-size: 16.5px; font-weight: 600; }
.cta-right { text-align: right; display: flex; align-items: center; gap: 22px; }
.cta-info { text-align: right; }
.cta-qr {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 18px;
  padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); flex-shrink: 0;
}
.cta-qr img { display: block; width: 108px; height: 108px; border-radius: 10px; }
.cta-qr figcaption { font-size: 12.5px; font-weight: 800; color: var(--ink); text-align: center; padding-top: 5px; }
.cta-tel { font-size: 36px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.cta-right .note { font-size: 14px; font-weight: 700; color: #fff; margin: 8px 0 18px; }
.cta .btn-primary { background: var(--ink); color: #ffd44d; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25); }

/* ---------- 频道页 Hero ---------- */
.page-hero {
  padding: 160px 0 54px; position: relative; overflow: hidden;
  background: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.88)), var(--tex);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(460px 240px at 92% 6%, rgba(36, 86, 240, 0.12), transparent 65%),
    radial-gradient(380px 220px at 4% 88%, rgba(255, 106, 43, 0.12), transparent 65%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.crumb { font-size: 14px; font-weight: 700; color: var(--body); letter-spacing: 1px; margin-bottom: 22px; }
.crumb a:hover { color: var(--orange); }
.ph-meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.page-hero h1 { font-size: clamp(38px, 4.8vw, 58px); letter-spacing: 0.04em; line-height: 1.2; font-weight: 800; color: var(--ink); }
.ph-index {
  width: 92px; height: 92px; border-radius: 26px; background: var(--orange);
  border: 1px solid rgba(120, 140, 190, 0.4); box-shadow: 0 8px 22px rgba(23, 42, 105, 0.14), 0 2px 6px rgba(23, 42, 105, 0.08);
  display: grid; place-items: center; font-size: 44px; font-weight: 800; color: #fff;
}
.page-hero .lede { margin-top: 24px; max-width: 700px; font-size: 17.5px; font-weight: 500; color: var(--body); line-height: 1.9; }
.ph-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ph-chips span {
  font-size: 14px; font-weight: 700; background: #fff; border: 1px solid rgba(120, 140, 190, 0.4);
  border-radius: 999px; padding: 8px 18px; color: var(--ink); box-shadow: 0 5px 14px rgba(23, 42, 105, 0.12), 0 2px 5px rgba(23, 42, 105, 0.07);
}
.ph-stats { display: flex; gap: 52px; margin-top: 44px; flex-wrap: wrap; }
.ph-stat { background: var(--sky); border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 20px; padding: 18px 28px; box-shadow: 0 6px 18px rgba(60, 110, 230, 0.16), 0 2px 6px rgba(60, 110, 230, 0.08); }
.ph-stat b { font-size: 32px; font-weight: 800; color: var(--brand); display: block; }
.ph-stat span { font-size: 14px; font-weight: 700; color: var(--ink); }

/* k12 频道页 · 1对1 招生海报 */
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; }
.ph-promo {
  position: relative;
  background: linear-gradient(165deg, #eef4ff 0%, #ffffff 52%, #fff8ec 100%);
  border: 1px solid rgba(120, 140, 190, 0.45); border-radius: 26px;
  padding: 30px 28px 26px;
  box-shadow: 0 20px 44px rgba(36, 86, 240, 0.16), 0 6px 16px rgba(36, 86, 240, 0.08);
}
.pp-ribbon {
  position: absolute; top: -15px; left: 24px;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 13.5px;
  letter-spacing: 3px; padding: 7px 18px; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(230, 0, 18, 0.3);
}
.pp-mascot { position: absolute; top: -52px; right: -6px; height: 122px; transform: rotate(6deg); filter: drop-shadow(0 12px 16px rgba(23, 42, 105, 0.2)); }
.pp-title { font-size: 42px; font-weight: 900; letter-spacing: 2px; color: var(--brand); line-height: 1.15; }
.pp-sub { margin-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.pp-list { margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.pp-list li { display: flex; align-items: center; gap: 10px; list-style: none; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pp-list .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); border: 1px solid rgba(120, 140, 190, 0.4); color: var(--brand); font-size: 12.5px; display: grid; place-items: center; }
.pp-foot { margin-top: 20px; padding-top: 18px; border-top: 1.5px dashed rgba(120, 140, 190, 0.5); display: flex; align-items: center; gap: 14px; }
.pp-foot img { flex: none; width: 84px; height: 84px; border-radius: 14px; border: 1px solid rgba(120, 140, 190, 0.45); }
.pp-foot-txt b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.pp-foot-txt span { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--body); }
.pp-btn { margin-top: 18px; width: 100%; text-align: center; }
@media (max-width: 1020px) {
  .ph-grid { grid-template-columns: 1fr; gap: 0; }
  .ph-promo { max-width: 420px; margin: 46px auto 0; }
  .pp-mascot { top: -46px; height: 104px; }
}

/* ---------- 页脚 ---------- */
.footer { background: var(--brand-deep); color: #d4dced; padding: 76px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.footer .brand { color: #fff; }
.footer .brand small { color: #ffd44d; }
.footer p.desc { font-size: 14.5px; font-weight: 500; margin-top: 16px; max-width: 320px; color: #d4dced; }
.footer h4 { color: #fff; font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; font-weight: 800; }
.footer li { margin-bottom: 11px; font-size: 14.5px; font-weight: 500; color: #d4dced; }
.footer a:hover { color: #ffd44d; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; font-size: 13.5px; font-weight: 500; color: #9dabc7; }

/* ---------- 动效 ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.7s ease both; }
.rise.d1 { animation-delay: 0.1s; } .rise.d2 { animation-delay: 0.2s; } .rise.d3 { animation-delay: 0.3s; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .b-3, .b-4, .b-5, .b-6, .b-7, .b-8 { grid-column: span 6; }
  .b-12 { grid-column: span 6; }
  .adv-row { grid-template-columns: 90px 1fr; }
  .adv-tag { display: none; }
  .courses { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .timeline.six { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }
  .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  .faq-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 620px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .courses { grid-template-columns: 1fr; }
  .cta { padding: 44px 30px; }
  .cta-right { text-align: left; flex-direction: column-reverse; align-items: flex-start; }
  .cta-info { text-align: left; }
}

/* ============================================================
   H5 移动端增强
   ============================================================ */
@media (max-width: 1024px) {
  .nav-pill { flex-wrap: wrap; row-gap: 6px; }
  .nav-links {
    display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%;
    order: 3; margin-left: 0; padding: 2px 2px 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; flex: 0 0 auto; }
  .hero { padding: 150px 0 50px; }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 16.5px; }
  .ph-index { width: 72px; height: 72px; font-size: 34px; border-radius: 20px; }
}
@media (max-width: 620px) {
  html { font-size: 15.5px; }
  .hero { padding: 140px 0 44px; }
  .hero-title { font-size: 32px; }
  .hero-mascot { height: 220px; }
  .hero-visual { min-height: 260px; }
  .hero-chip { padding: 8px 15px; font-size: 13.5px; }
  .hc-1 { left: 0; } .hc-2 { right: -6px; } .hc-3 { right: 0; bottom: 6%; }
  .hstat b { font-size: 26px; }
  .hstat span { font-size: 13px; }
  .sec-head h2 { font-size: 27px; }
  .sec-head p { font-size: 15.5px; }
  .adv-row { gap: 20px; padding: 28px 0; }
  .adv-num { width: 62px; height: 62px; font-size: 26px; border-radius: 18px; }
  .adv-row h3 { font-size: 20px; }
  .adv-row p { font-size: 15px; }
  .page-hero { padding: 140px 0 50px; }
  .page-hero h1 { font-size: 33px; }
  .page-hero .lede { font-size: 16px; }
  .ph-stats { gap: 12px; }
  .ph-stat { padding: 12px 18px; }
  .ph-stat b { font-size: 25px; }
  .b-card { min-height: 0; padding: 22px; }
  .b-card h3 { font-size: 18.5px; }
  .quote { padding: 22px; }
  .q-result { font-size: 26px; }
  .tl-dot { width: 44px; height: 44px; font-size: 17px; }
  .cta { padding: 40px 26px; }
  .cta h2 { font-size: 23px; }
  .cta-tel { font-size: 27px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { padding: 14px 24px; font-size: 15.5px; text-align: center; }
}

/* 页脚二维码条 */
.footer-qr {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 26px 0; margin-top: 36px; border-top: 1px solid rgba(255,255,255,0.16);
}
.f-qr {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 16px;
  padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); margin: 0;
}
.f-qr img { display: block; width: 96px; height: 96px; border-radius: 10px; }
.f-qr figcaption { font-size: 12.5px; font-weight: 800; color: var(--ink); text-align: center; padding-top: 5px; line-height: 1.45; }
.f-qr figcaption b { font-size: 13.5px; }
.f-contact { margin-left: auto; text-align: right; color: #fff; }
.f-tel { display: block; font-size: 32px; font-weight: 800; letter-spacing: 1px; }
.f-contact small { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #ffd44d; }
@media (max-width: 620px) {
  .footer-qr { justify-content: center; text-align: center; }
  .f-contact { margin-left: 0; text-align: center; width: 100%; }
  .f-tel { font-size: 27px; }
}

/* 真实工具卡（已上线）+ 频道页工具横幅 */
.b-card.live .b-qr {
  position: absolute; top: 18px; right: 18px; width: 62px; height: 62px;
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 10px; padding: 3px;
}
.b-card.live .b-qr img { width: 100%; height: 100%; border-radius: 6px; display: block; }
.b-card.live::after {
  content: "已上线"; position: absolute; left: 18px; bottom: 64px;
  background: #18a058; color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 1px;
}
.tool-callout {
  display: flex; align-items: center; gap: 34px;
  background:
    linear-gradient(115deg, rgba(237, 243, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 246, 233, 0.92) 100%),
    var(--tex);
  border: 2.5px solid var(--ink); border-radius: 26px;
  padding: 32px 40px; color: var(--ink); box-shadow: 0 10px 26px rgba(23, 42, 105, 0.15), 0 3px 8px rgba(23, 42, 105, 0.08);
}
.tc-tag {
  display: inline-block; background: var(--orange); color: #fff;
  font-weight: 800; font-size: 12.5px; padding: 5px 14px; border-radius: 999px;
  letter-spacing: 1px; margin-bottom: 12px;
}
.tool-callout h3 { font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.tool-callout p { font-size: 15px; font-weight: 600; color: var(--body); margin-bottom: 14px; max-width: 560px; }
.tc-link {
  display: inline-block; font-weight: 800; font-size: 16px; color: #fff;
  background: var(--brand); border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 999px;
  padding: 9px 22px; box-shadow: 0 5px 14px rgba(23, 42, 105, 0.12), 0 2px 5px rgba(23, 42, 105, 0.07);
}
.tool-callout:hover .tc-link { background: var(--orange); }
.tc-qr {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: 16px;
  padding: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); flex-shrink: 0; margin: 0;
}
.tc-qr img { display: block; width: 112px; height: 112px; border-radius: 10px; }
.tc-qr figcaption { font-size: 12.5px; font-weight: 800; color: var(--ink); text-align: center; padding-top: 5px; }
/* 双工具卡并排 */
.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.tc-grid .tool-callout { padding: 26px 28px; gap: 20px; height: 100%; box-sizing: border-box; }
.tc-grid .tool-callout h3 { font-size: 21px; }
.tc-grid .tool-callout p { font-size: 14px; max-width: none; }
.tc-grid .tc-qr img { width: 92px; height: 92px; }
@media (max-width: 1020px) {
  .tc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tool-callout { flex-direction: column; text-align: center; padding: 26px 22px; }
  .tool-callout p { max-width: none; }
  .b-card.live .b-qr { width: 54px; height: 54px; top: 14px; right: 14px; }
}

.footer-bottom .beian { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom .beian a { color: #c6d2ea; font-weight: 700; text-decoration: none; }
.footer-bottom .beian a:hover { color: #fff; text-decoration: underline; }


/* ---------- 主题色阴影：投影颜色跟随卡片底色 ---------- */
.b-card { box-shadow: 0 8px 24px rgba(var(--shc, 23, 42, 105), 0.16), 0 2px 7px rgba(var(--shc, 23, 42, 105), 0.08); }
.b-card:hover { box-shadow: 0 18px 36px rgba(var(--shc, 23, 42, 105), 0.26), 0 5px 12px rgba(var(--shc, 23, 42, 105), 0.13); }
.t-blue   { --shc: 60, 110, 230; }   /* 蓝 */
.t-orange { --shc: 230, 55, 45; }    /* 品牌红 */
.t-green  { --shc: 34, 160, 88; }    /* 绿 */
.t-pink   { --shc: 224, 90, 145; }   /* 粉 */
.t-sand   { --shc: 196, 144, 44; }   /* 沙金 */
.t-grey   { --shc: 100, 112, 134; }  /* 石灰 */
.b-ink    { --shc: 18, 42, 140; }    /* 深蓝 */
.quote { box-shadow: 0 8px 24px rgba(var(--shc, 23, 42, 105), 0.15), 0 2px 7px rgba(var(--shc, 23, 42, 105), 0.08); }
.quote:nth-child(3n+2) { --shc: 60, 110, 230; }
.quote:nth-child(3n)   { --shc: 196, 144, 44; }

/* 六大保障网格 */
.g-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.g-card {
  background: #fff; border: 1px solid rgba(120, 140, 190, 0.4); border-radius: var(--r-lg);
  padding: 26px 12px; text-align: center;
  box-shadow: 0 8px 24px rgba(60, 110, 230, 0.12), 0 2px 7px rgba(60, 110, 230, 0.07);
}
.g-card b { display: block; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%;
  background: linear-gradient(150deg, #4d6ef2, #2b3fd8); color: #fff;
  display: grid; place-items: center; font-size: 21px; font-weight: 800; }
.g-card span { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.g-card small { font-size: 12.5px; font-weight: 600; color: var(--body); }
@media (max-width: 1024px) { .g-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .g-grid { grid-template-columns: repeat(2, 1fr); } .g-card b { width: 72px; height: 72px; font-size: 18px; } }

/* ===== 留资弹窗 ===== */
.lead-mask { position: fixed; inset: 0; background: rgba(20,28,52,.55); backdrop-filter: blur(3px); z-index: 999; display: grid; place-items: center; padding: 20px; }
.lead-mask[hidden] { display: none; }
.lead-modal { position: relative; width: min(420px, 100%); background: #fffdf9; border-radius: 22px; padding: 30px 28px 24px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(20,28,52,.28); animation: leadPop .22s ease; }
@keyframes leadPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.lead-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f1ede2; font-size: 16px; cursor: pointer; color: var(--ink); }
.lead-close:hover { background: #e8e2d2; }
.lead-tag { display: inline-block; background: var(--orange); color: #fff; font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 999px; }
.lead-modal h3 { font-size: 24px; margin: 12px 0 6px; color: var(--ink); }
.lead-sub { font-size: 14px; color: var(--body); margin-bottom: 8px; line-height: 1.6; }
.lead-modal label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.lead-modal input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--ink); }
.lead-modal input:focus { outline: none; border-color: var(--brand); }
.lead-btn { width: 100%; margin-top: 18px; border: none; background: var(--orange); color: #fff; font-size: 17px; font-weight: 800; padding: 14px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 16px rgba(230,0,18,.22); transition: .15s; }
.lead-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(230,0,18,.28); }
.lead-privacy { text-align: center; font-size: 12.5px; color: var(--body); margin-top: 10px; }
.lead-ok { text-align: center; padding: 6px 0 2px; }
.lead-ok-ico { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: #12b76a; color: #fff; font-size: 28px; font-weight: 800; display: grid; place-items: center; }
.lead-ok img { width: 148px; height: 148px; margin: 12px auto 6px; display: block; border-radius: 14px; border: 1.5px solid var(--line); }
.lead-hotline { font-size: 15px; color: var(--ink); margin-top: 8px; }
.lead-hotline b { color: var(--orange); }
.lead-warn { font-size: 13.5px; font-weight: 700; color: #d92d20; background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; padding: 8px 10px; margin-top: 10px; }
.lead-ver { position: absolute; left: 18px; bottom: 10px; font-size: 11px; font-weight: 700; color: #c4bca9; letter-spacing: .04em; }