/* ============================================================
   飞天择时 · 肖淳心 讲师页
   设计基准：1440 宽 / 内容区 1280 / 左右留白 80
   ============================================================ */

:root{
  --bg:          #FFFFFF;
  --surface:     #F7F8FA;
  --ink:         #1C1C1E;
  --ink-2:       #55606F;
  --ink-3:       #8E91A0;
  --ink-4:       #6B6F7E;
  --line:        #E0E2E8;
  --line-soft:   #C7CAD5;
  --line-dark:   #2C2C34;

  --yellow:      #FFD02F;
  --yellow-pale: #FFF4C4;
  --yellow-ink:  #746019;
  --yellow-dot:  #C99A00;
  --yellow-deep: #6B5A12;

  --font-sans: "Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-num:  "Geist","Inter",-apple-system,"SF Pro Display",system-ui,sans-serif;

  --pad: 80px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; }

h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
a{ color:inherit; text-decoration:none; }

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--line-soft); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:12px 24px; font-size:14px; }

/* ---------- 页头 ---------- */
.site-header{
  display:flex;
  align-items:center;
  gap:40px;
  padding:20px var(--pad);
  background:#fff;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
}
.brand-mark{ width:28px; height:28px; flex:none; }
.brand-word{
  font-size:17px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}
.brand-div{ width:1px; height:15px; background:var(--line); }
.brand-name{ font-size:14px; color:var(--ink-2); }

.nav{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:auto;
}
.nav a{
  font-size:14px;
  color:var(--ink-2);
  transition:color .16s ease;
}
.nav a:hover{ color:var(--ink); }

.hairline{ height:1px; background:var(--line); }

/* ---------- 首屏 ---------- */
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:80px;
  padding:84px var(--pad);
  background:#fff;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:24px;
  flex:1;
  min-width:0;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  background:var(--yellow-pale);
  color:var(--yellow-ink);
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
}
.badge i{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--yellow-dot);
}

.hero-copy h1{
  font-size:76px;
  line-height:96px;
  letter-spacing:2px;
  font-weight:500;
  color:var(--ink);
}
.lead{
  font-size:28px;
  line-height:42px;
  font-weight:500;
  color:var(--ink);
}
.sub{
  font-size:17px;
  line-height:32px;
  color:var(--ink-2);
  max-width:632px;
}
.cta-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px;
}
.trust{
  font-size:13px;
  color:var(--ink-3);
}

/* 肖像 */
.portrait{
  position:relative;
  width:476px;
  height:556px;
  flex:none;
}
.portrait-block{
  position:absolute;
  left:36px; top:36px;
  width:440px; height:520px;
  border-radius:28px;
  background:var(--yellow);
}
.portrait-photo{
  position:relative;
  width:440px; height:520px;
  object-fit:cover;
  border-radius:28px;
  z-index:1;
}
.portrait-chip{
  position:absolute;
  left:24px; top:448px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px;
}

/* ---------- 数据条 ---------- */
.stats{
  display:flex;
  align-items:center;
  padding:38px var(--pad);
  background:var(--surface);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  padding:0 24px;
}
.stat:first-child{ padding-left:0; }
.stat:last-child{ padding-right:0; }
.stat-value{
  font-family:var(--font-num);
  font-size:32px;
  font-weight:500;
  letter-spacing:-.8px;
  color:var(--ink);
}
.stat-label{ font-size:13px; color:var(--ink-4); }
.stat-div{ width:1px; height:34px; background:var(--line); flex:none; }

/* ---------- 区块通用 ---------- */
.section{
  display:flex;
  padding:96px var(--pad);
}
.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:1.6px;
  color:var(--ink-3);
}
.section-label{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:180px;
  flex:none;
}
.section-label span:first-child{
  font-size:12px;
  font-weight:600;
  letter-spacing:1.6px;
  color:var(--ink-3);
}
.label-rule{ width:28px; height:2px; background:var(--yellow); }

/* ---------- 讲师简介 ---------- */
.about{
  gap:56px;
  background:#fff;
}
.about-copy{
  display:flex;
  flex-direction:column;
  gap:26px;
  flex:1;
  min-width:0;
}
.about-copy h2{
  font-size:40px;
  line-height:58px;
  font-weight:500;
  color:var(--ink);
}
.about-copy p{
  font-size:16px;
  line-height:32px;
  color:var(--ink-2);
}
.signature{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:20px;
}
.signature-rule{ width:40px; height:1px; background:var(--line-soft); }
.signature-name{ font-size:17px; font-weight:500; color:var(--ink); }
.signature-role{ font-size:13px; color:var(--ink-3); }

.profile-card{
  width:300px;
  flex:none;
  align-self:flex-start;
  padding:10px 22px;
  border-radius:20px;
  background:var(--surface);
}
.profile-head{
  padding:14px 0;
}
.profile-head span{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  color:var(--ink-3);
}
.profile-line{ height:1px; background:var(--line); }
.profile-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 0;
}
.profile-row span{ font-size:13px; color:var(--ink-3); }
.profile-row b{ font-size:14px; font-weight:500; color:var(--ink); text-align:right; }

/* ---------- 产品理念 ---------- */
.principles{
  flex-direction:column;
  gap:44px;
  background:var(--surface);
}
.section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.section-head h3{
  font-size:40px;
  line-height:56px;
  font-weight:500;
  color:var(--ink);
}
.head-desc{ font-size:16px; line-height:30px; color:var(--ink-2); }

.rule{ height:1px; background:var(--line); }

.principle{
  display:flex;
  align-items:flex-start;
  gap:48px;
  padding:30px 0;
}
.principle-index{
  width:48px;
  flex:none;
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--yellow-dot);
  padding-top:6px;
}
.principle h4{
  width:300px;
  flex:none;
  font-size:22px;
  line-height:32px;
  font-weight:500;
  color:var(--ink);
}
.principle p{
  flex:1;
  font-size:16px;
  line-height:32px;
  color:var(--ink-2);
}

/* ---------- 讲授方向 ---------- */
.courses{
  flex-direction:column;
  gap:44px;
  background:var(--ink);
}
.courses .eyebrow{ color:var(--yellow); }
.courses-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:64px;
}
.courses-head-copy{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.courses-head h3{
  font-size:40px;
  line-height:56px;
  font-weight:500;
  color:#fff;
}
.courses-head-copy p{
  font-size:16px;
  line-height:30px;
  color:#A5A8B5;
  max-width:660px;
}
.courses-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:none;
  text-align:right;
}
.courses-meta-title{ font-size:15px; font-weight:500; color:#fff; }
.courses-meta-sub{ font-size:12px; color:var(--ink-4); }
.courses-rule{ height:1px; background:var(--line-dark); }

.course-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}
.course{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:20px;
}
.course-no{
  font-size:12px;
  font-weight:600;
  letter-spacing:1.4px;
  color:var(--yellow);
}
.course h5{
  font-size:21px;
  line-height:32px;
  font-weight:500;
  color:#fff;
}
.course p{
  font-size:15px;
  line-height:28px;
  color:#A5A8B5;
}

.note-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.note-text{ font-size:16px; color:#E6E7EB; }
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:2px;
  transition:border-color .16s ease;
}
.link-arrow:hover{ border-color:#fff; }
.link-arrow svg{ width:16px; height:16px; }

/* ---------- 学员反馈 ---------- */
.voices{
  flex-direction:column;
  gap:48px;
  background:#fff;
}
.quote-row{
  display:flex;
  align-items:stretch;
  gap:0;
}
.quote{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
  padding-right:32px;
}
.quote:nth-of-type(2){ padding:0 32px; }
.quote:nth-of-type(3){ padding-right:0; padding-left:32px; }
.quote blockquote{
  font-size:16px;
  line-height:30px;
  color:var(--ink);
}
.quote-rule{ width:24px; height:2px; background:var(--yellow); }
.quote figcaption{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:auto;
}
.quote figcaption b{ font-size:14px; font-weight:500; color:var(--ink); }
.quote figcaption span{ font-size:12px; color:var(--ink-3); }
.quote-div{ width:1px; background:var(--line); flex:none; }

/* ---------- 预约 ---------- */
.cta-wrap{
  padding:0 var(--pad) 96px;
  background:#fff;
}
.cta-band{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  padding:52px 56px;
  border-radius:32px;
  background:var(--yellow);
}
.cta-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.cta-copy h3{
  font-size:34px;
  line-height:46px;
  font-weight:500;
  color:var(--ink);
}
.cta-copy p{
  font-size:15px;
  line-height:26px;
  color:var(--yellow-deep);
}
.cta-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex:none;
}
.cta-action .btn{ padding:17px 30px; }
.cta-note{ font-size:12px; color:var(--yellow-deep); }

/* ---------- 页脚 ---------- */
.site-footer{
  display:flex;
  flex-direction:column;
  gap:44px;
  padding:64px var(--pad) 32px;
  background:var(--ink);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:64px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:492px;
  flex:none;
}
.footer-lockup{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-mark{ width:24px; height:24px; flex:none; }
.footer-word{
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
  color:#fff;
}
.footer-div{ width:1px; height:14px; background:#3A3C42; }
.footer-name{ font-size:13px; font-weight:500; color:#A5A8B5; }
.footer-desc{ font-size:14px; line-height:26px; color:var(--ink-3); }
.footer-disclaimer{ font-size:12px; line-height:22px; color:#5C5F66; }

.footer-cols{
  display:flex;
  gap:64px;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:96px;
}
.footer-col-title{
  font-size:12px;
  color:var(--ink-3);
  margin-bottom:2px;
}
.footer-col a,
.footer-col span:not(.footer-col-title){
  font-size:14px;
  color:#C9CBD3;
  transition:color .16s ease;
}
.footer-col a:hover{ color:#fff; }

.footer-bottom{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.footer-rule{ height:1px; background:var(--line-dark); }
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:var(--ink-4);
}
.footer-legal{ display:flex; align-items:center; gap:24px; }
.footer-legal a{ transition:color .16s ease; }
.footer-legal a:hover{ color:#C9CBD3; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1360px){
  :root{ --pad:64px; }
  .hero{ gap:56px; }
  .portrait{ width:420px; height:492px; }
  .portrait-block{ left:32px; top:32px; width:388px; height:460px; }
  .portrait-photo{ width:388px; height:460px; }
  .portrait-chip{ top:392px; }
  .principle h4{ width:260px; }
}

@media (max-width:1180px){
  :root{ --pad:48px; }
  .hero-copy h1{ font-size:64px; line-height:80px; }
  .lead{ font-size:24px; line-height:36px; }
  .about{ flex-wrap:wrap; }
  .about-copy{ order:1; width:100%; flex:1 1 100%; }
  .profile-card{ order:2; width:100%; max-width:520px; }
  .section-label{ width:100%; flex-direction:row; align-items:center; gap:12px; }
  .footer-brand{ width:380px; }
  .footer-cols{ gap:48px; }
}

@media (max-width:980px){
  :root{ --pad:40px; }
  .nav{ display:none; }
  .site-header > .btn{ margin-left:auto; }
  .hero{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:48px;
    padding:56px var(--pad) 64px;
  }
  .hero-copy{ max-width:none; padding-top:0; }
  .portrait{
    width:100%;
    max-width:440px;
    height:auto;
    aspect-ratio:476 / 556;
  }
  .portrait-block,
  .portrait-photo{
    width:88%;
    height:88%;
  }
  .portrait-block{ left:9%; top:9%; }
  .portrait-chip{ left:5%; top:auto; bottom:6%; }

  .stats{ flex-wrap:wrap; gap:24px 0; }
  .stat{ flex:1 1 44%; padding:0 16px; }
  .stat:first-child{ padding-left:0; }
  .stat-div{ display:none; }

  .section{ padding:72px var(--pad); }
  .principle{ flex-wrap:wrap; gap:12px 24px; }
  .principle h4{ width:auto; flex:1; }
  .principle p{ flex:1 1 100%; }
  .course-grid{ grid-template-columns:1fr; gap:32px; }
  .courses-head{ flex-direction:column; align-items:flex-start; gap:24px; }
  .courses-meta{ text-align:left; }
  .quote-row{ flex-direction:column; gap:32px; }
  .quote,
  .quote:nth-of-type(3){ padding:0; }
  .quote-div{ width:100%; height:1px; }
  .cta-band{ flex-direction:column; align-items:flex-start; gap:32px; padding:40px 36px; }
  .cta-action{ align-items:flex-start; }
  .footer-top{ flex-direction:column; gap:40px; }
  .footer-brand{ width:100%; }
  .footer-bar{ flex-wrap:wrap; }
}

@media (max-width:680px){
  :root{ --pad:24px; }
  .site-header{ gap:20px; padding:16px var(--pad); }
  .brand-word{ font-size:16px; }
  .hero{ padding:40px var(--pad) 56px; gap:36px; }
  .hero-copy h1{ font-size:48px; line-height:60px; letter-spacing:1px; }
  .lead{ font-size:21px; line-height:32px; }
  .sub{ font-size:16px; line-height:30px; }
  .cta-row{ flex-wrap:wrap; }
  .btn{ padding:14px 24px; font-size:14px; }
  .section{ padding:56px var(--pad); }
  .section-head h3,
  .courses-head h3,
  .about-copy h2{ font-size:29px; line-height:42px; }
  .principle-index{ width:100%; padding-top:0; }
  .note-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .cta-copy h3{ font-size:26px; line-height:36px; }
  .cta-band{ padding:32px 24px; border-radius:24px; }
  .cta-wrap{ padding:0 var(--pad) 64px; }
  .footer-cols{ flex-direction:column; gap:28px; }
  .footer-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer-legal{ flex-wrap:wrap; gap:16px; }
}