/* ==========================================================================
   pc.css — 桌面端样式（2027考研大纲专题.html）
   依赖 base.css
   ========================================================================== */

/* ==================== Hero ==================== */
.hero{
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1e40af 100%);
  color:#fff;position:relative;overflow:hidden;padding:60px 0 50px;
}
.hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(249,115,22,.15) 0%,transparent 60%);
  border-radius:50%;
}
.hero::after{
  content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(59,130,246,.2) 0%,transparent 60%);
  border-radius:50%;
}
.hero .container{position:relative;z-index:2}
.hero-content{text-align:center;max-width:760px;margin:0 auto}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.4);
  color:#fdba74;padding:6px 18px;border-radius:30px;font-size:13px;font-weight:600;
  margin-bottom:20px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.3;margin-bottom:16px}
.hero h1 .highlight{
  background:linear-gradient(90deg,#fb923c,#fdba74);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:clamp(15px,2.5vw,18px);color:#bfdbfe;margin-bottom:36px;line-height:1.8}
.hero-cta-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:40px;font-size:16px;font-weight:600;
  cursor:pointer;border:none;transition:all .3s;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(249,115,22,.45)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ==================== Section 通用 ==================== */
.section{padding:70px 0}
.section-head{text-align:center;margin-bottom:50px}
.section-tag{
  display:inline-block;padding:5px 16px;border-radius:20px;
  background:rgba(37,99,235,.08);color:var(--primary-light);
  font-size:13px;font-weight:600;margin-bottom:14px;
}
.section-title{font-size:clamp(24px,4vw,34px);font-weight:900;color:var(--text);margin-bottom:12px}
.section-desc{font-size:16px;color:var(--text-light);max-width:600px;margin:0 auto}

/* ==================== Comparison Table ==================== */
.compare-section{background:var(--bg)}
.compare-table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.compare-table{width:100%;border-collapse:collapse;background:#fff;min-width:680px}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.compare-table th{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;font-weight:700;white-space:nowrap;
}
.compare-table tbody tr{transition:background .2s}
.compare-table tbody tr:hover{background:#f8fafc}
.compare-table .arrow{color:var(--text-lighter);text-align:center;width:50px}
.compare-table .before{color:var(--text-light)}
.compare-table .after{color:var(--danger);font-weight:600}
.compare-table .subject-tag{font-weight:700;color:var(--primary)}

.tag-new{background:#fef2f2;color:#dc2626}
.tag-adjust{background:#fffbeb;color:#d97706}
.tag-stable{background:#f0fdf4;color:#16a34a}

/* ==================== Tabs ==================== */
.tabs-section{background:#fff}
.tabs-nav{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;
}
.tab-btn{
  padding:12px 26px;border-radius:30px;font-size:15px;font-weight:600;
  background:var(--bg);color:var(--text-light);border:2px solid transparent;
  cursor:pointer;transition:all .25s;
}
.tab-btn:hover{color:var(--primary-light)}
.tab-btn.active{
  background:#fff;color:var(--primary-light);border-color:var(--primary-light);
  box-shadow:var(--shadow-sm);
}
.tab-content{display:none;animation:fadeIn .4s}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.tab-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.tab-info-card{
  background:var(--bg);border-radius:var(--radius);padding:28px;
  border:1px solid var(--border);
}
.tab-info-card h4{font-size:17px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.tab-info-card h4 .icon{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;flex-shrink:0;
}
.info-list li{font-size:14px;padding:8px 0;border-bottom:1px dashed var(--border);display:flex;gap:8px}
.info-list li:last-child{border-bottom:none}
.info-list li .key{color:var(--text-light);white-space:nowrap;flex-shrink:0}
.info-list li .val{font-weight:600}
.advice-box{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  border-radius:var(--radius);padding:28px;border-left:4px solid var(--primary-light);
}
.advice-box h4{font-size:16px;color:var(--primary);margin-bottom:12px}
.advice-box ul li{font-size:14px;padding:6px 0;padding-left:22px;position:relative}
.advice-box ul li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700}

/* ==================== Teachers ==================== */
.teacher-section{background:#fff}
.teacher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.teacher-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);transition:transform .3s,box-shadow .3s;
}
.teacher-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.teacher-avatar{
  height:200px;display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:900;color:#fff;overflow:hidden;position:relative;
}
/* 竖版证件照铺满横条会只剩中间一条，改成居中圆形头像，渐变底当背景 */
.teacher-avatar img{
  width:132px;height:132px;border-radius:50%;
  border:4px solid rgba(255,255,255,.92);background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.22);
}
.teacher-card:nth-child(1) .teacher-avatar{background:linear-gradient(135deg,#1e40af,#3b82f6)}
.teacher-card:nth-child(2) .teacher-avatar{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.teacher-card:nth-child(3) .teacher-avatar{background:linear-gradient(135deg,#dc2626,#f87171)}
.teacher-card:nth-child(4) .teacher-avatar{background:linear-gradient(135deg,#ea580c,#fb923c)}
.teacher-info{padding:22px;text-align:center}
.teacher-info h4{font-size:18px;margin-bottom:4px}
.teacher-info .title{font-size:13px;color:var(--primary-light);font-weight:600;margin-bottom:10px}
.teacher-info p{font-size:13px;color:var(--text-light);line-height:1.6}

/* ==================== Study Plan ==================== */
.plan-section{background:var(--bg)}
.plan-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:0 auto}
.plan-timeline::before{
  content:'';position:absolute;top:30px;left:8%;right:8%;height:3px;
  background:linear-gradient(90deg,var(--primary-light),var(--accent));border-radius:2px;
}
.plan-step{text-align:center;position:relative;padding:0 12px}
.plan-step-icon{
  width:60px;height:60px;border-radius:50%;margin:0 auto 16px;
  background:#fff;border:3px solid var(--primary-light);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:var(--primary);
  position:relative;z-index:2;
}
.plan-step:nth-child(2) .plan-step-icon{border-color:#7c3aed;color:#7c3aed}
.plan-step:nth-child(3) .plan-step-icon{border-color:var(--accent);color:var(--accent)}
.plan-step:nth-child(4) .plan-step-icon{border-color:var(--danger);color:var(--danger)}
.plan-step h4{font-size:16px;margin-bottom:6px}
.plan-step .date{font-size:13px;color:var(--accent-dark);font-weight:600;margin-bottom:8px}
.plan-step p{font-size:13px;color:var(--text-light);line-height:1.6}

/* ==================== Courses ==================== */
.course-section{background:#fff}
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:1000px;margin:0 auto}
.course-card{
  background:#fff;border-radius:var(--radius-lg);padding:34px 28px;
  border:2px solid var(--border);transition:all .3s;position:relative;
}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.course-card.featured{border-color:var(--accent);transform:scale(1.03)}
.course-card.featured:hover{transform:scale(1.03) translateY(-6px)}
.course-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-size:12px;padding:4px 16px;border-radius:20px;font-weight:600;white-space:nowrap;
}
.course-name{font-size:20px;font-weight:800;margin-bottom:6px}
.course-desc{font-size:13px;color:var(--text-light);margin-bottom:18px}
.course-price{display:flex;align-items:baseline;gap:6px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.course-price .current{font-size:34px;font-weight:900;color:var(--danger)}
.course-price .currency{font-size:16px;color:var(--danger);font-weight:700}
.course-price .original{font-size:15px;color:var(--text-lighter);text-decoration:line-through}
.course-features{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.course-features li{font-size:14px;display:flex;gap:8px;align-items:flex-start}
.course-features li::before{content:'✓';color:var(--success);font-weight:700;flex-shrink:0}
.course-btn{
  display:block;text-align:center;padding:13px;border-radius:30px;
  font-size:15px;font-weight:600;transition:all .3s;cursor:pointer;
}
.course-card:not(.featured) .course-btn{background:var(--bg);color:var(--primary)}
.course-card:not(.featured) .course-btn:hover{background:var(--primary);color:#fff}
.course-card.featured .course-btn{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}
.course-card.featured .course-btn:hover{box-shadow:0 6px 20px rgba(249,115,22,.4)}

/* ==================== FAQ ==================== */
.faq-section{background:#fff}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;transition:box-shadow .3s;
  background:#fff;
}
.faq-item.active{box-shadow:var(--shadow)}
.faq-q{
  width:100%;text-align:left;
  padding:18px 24px;font-size:15px;font-weight:600;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:background .2s;background:transparent;border:0;color:inherit;
}
.faq-q:hover{background:var(--bg)}
.faq-q .faq-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-light);color:#fff;border-radius:50%;font-size:16px;transition:transform .3s}
.faq-item.active .faq-q .faq-icon{transform:rotate(45deg);background:var(--accent)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
  padding:0 24px;font-size:14px;color:var(--text-light);line-height:1.8;
}
.faq-item.active .faq-a{padding:0 24px 18px}

/* 站点公共页脚已改用 jixun.iqihang.com 线上 footer，原自定义 footer 样式已移除 */

/* ==================== Back to Top ==================== */
.back-top{
  position:fixed;bottom:30px;right:30px;width:46px;height:46px;
  border-radius:50%;background:var(--primary-light);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  cursor:pointer;opacity:0;pointer-events:none;transition:all .3s;z-index:999;
  border:none;box-shadow:var(--shadow);
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:var(--primary);transform:translateY(-3px)}

/* ==================== Scroll Reveal ==================== */
/* 纯 CSS 动画触发：页面打开 0.8s 内全部淡入到位，零 JS 依赖，避免 headless/爬虫/慢 JS 出现大片空白 */
.reveal{opacity:0;transform:translateY(40px);animation:revealUp .8s ease-out .1s forwards}
.reveal.visible{opacity:1;transform:none;animation:none}
@keyframes revealUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.visible{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.visible{opacity:1!important;transform:none!important;transition:none!important}
}


/* ==================== 底部 CTA 大按钮 ==================== */
.text-center-cta{text-align:center;margin-top:40px}
.btn-cta-large{
  display:inline-block;padding:14px 44px;
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;font-size:16px;font-weight:700;border-radius:50px;
  box-shadow:0 6px 20px rgba(249,115,22,.35);
  text-decoration:none;transition:transform .2s,box-shadow .2s;
}
.btn-cta-large:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(249,115,22,.5)}

/* ==================== Responsive ==================== */
@media(max-width:768px){
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;top:var(--header-h);left:0;right:0;
    background:#fff;padding:20px;gap:16px;box-shadow:var(--shadow);
  }
  .tab-grid{grid-template-columns:1fr}
  .plan-timeline{grid-template-columns:1fr 1fr;gap:30px 12px}
  .plan-timeline::before{display:none}
  .course-card.featured{transform:none}
  .course-card.featured:hover{transform:translateY(-6px)}
}
@media(max-width:480px){
  .plan-timeline{grid-template-columns:1fr}
}