/* ==========================================================================
   饭盟 · 大学生竞赛培训官网
   配色：蛋炒饭灵感 —— 蛋黄金 / 番茄红 / 暖米白
   ========================================================================== */

:root{
  --yolk:#FFAA1F; --yolk-deep:#F08C00; --yolk-soft:#FFF3DC;
  --tomato:#E5484D; --tomato-deep:#C93438;
  --ink:#221C15; --muted:#7A6F63;
  --bg:#FFFBF4; --card:#FFFFFF; --line:#F0E4D2;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
     color:var(--ink);background:var(--bg);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ============ 导航 ============ */
header{position:sticky;top:0;z-index:50;background:rgba(255,251,244,.88);backdrop-filter:blur(12px);
       border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:.5px}
.logo .bowl{width:34px;height:34px;flex:none}
.logo small{font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line);
            border-radius:20px;padding:2px 10px;letter-spacing:1px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px}
.nav-links a{color:var(--ink);font-weight:500;position:relative}
.nav-links a:hover{color:var(--tomato)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--tomato);color:#fff;font-weight:700;
     padding:12px 24px;border-radius:999px;font-size:15px;border:none;cursor:pointer;
     box-shadow:0 4px 0 var(--tomato-deep);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tomato-deep)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tomato-deep)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--tomato);color:var(--tomato)}
.btn.sm{padding:9px 18px;font-size:14px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ============ Hero ============ */
.hero{padding:72px 0 56px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--yolk-soft);
            border:1.5px dashed var(--yolk-deep);color:#8a5a00;font-weight:600;font-size:13px;
            padding:6px 14px;border-radius:999px;margin-bottom:22px;transform:rotate(-1.5deg)}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.18;font-weight:900;letter-spacing:-.5px}
.hero h1 .hl{position:relative;white-space:nowrap;color:var(--yolk-deep)}
.hero h1 .hl::after{content:"";position:absolute;left:-2%;bottom:6px;width:104%;height:.32em;
                    background:var(--yolk);z-index:-1;border-radius:4px;transform:rotate(-1deg)}
.hero p.sub{margin:20px 0 30px;font-size:17px;color:var(--muted);max-width:34em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap}
.stat b{font-size:30px;font-weight:900;color:var(--tomato);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.hero-visual{position:relative}
.hero-visual img{border-radius:24px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--yolk)}
.sticker{position:absolute;background:#fff;border:1.5px solid var(--ink);border-radius:12px;
         padding:8px 14px;font-size:13px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.sticker.s1{top:-16px;right:24px;transform:rotate(4deg)}
.sticker.s2{bottom:-14px;left:-10px;transform:rotate(-3deg)}
.sticker .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tomato);margin-right:6px}

/* ============ 跑马灯 ============ */
.marquee{background:var(--tomato);color:#fff;overflow:hidden;padding:14px 0;
         transform:rotate(-1deg) scale(1.02);margin:24px 0 8px}
.marquee-track{display:flex;gap:48px;white-space:nowrap;font-weight:800;font-size:16px;
               letter-spacing:2px;width:max-content;animation:scroll 22s linear infinite}
.marquee-track span::before{content:"✦";margin-right:48px;opacity:.7}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ 通用 section ============ */
section{padding:clamp(56px,8vw,84px) 0}
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:3px;color:var(--tomato);
        text-transform:uppercase;margin-bottom:10px}
.section-title{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.5px;line-height:1.25}
.section-sub{color:var(--muted);margin-top:10px;max-width:44em}
.demo-tag{display:inline-block;font-size:11px;font-weight:600;color:#8a5a00;background:var(--yolk-soft);
          border:1px dashed var(--yolk-deep);border-radius:6px;padding:1px 8px;margin-left:8px;
          vertical-align:middle;transform:translateY(-2px)}

/* ============ 滚动进度条 / 回顶按钮 ============ */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
              background:linear-gradient(90deg,var(--yolk),var(--tomato))}
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;
        background:var(--ink);color:#fff;border:none;cursor:pointer;font-size:18px;z-index:55;
        box-shadow:0 6px 18px rgba(34,28,21,.3);opacity:0;pointer-events:none;
        transform:translateY(12px);transition:opacity .25s,transform .25s,background .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--tomato)}

/* ============ 品牌元素：IP 形象 / 时间轴 / 水印 ============ */
.brand-strip{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;
             margin-top:56px;background:var(--card);border:1.5px solid var(--line);
             border-radius:24px;padding:36px;position:relative;overflow:hidden}
.brand-strip::after{content:"饭盟";position:absolute;right:-10px;bottom:-38px;font-size:120px;
                    font-weight:900;color:var(--yolk-soft);z-index:0;pointer-events:none;letter-spacing:8px}
.mascot{position:relative;z-index:1;text-align:center}
.mascot img{width:200px;height:200px;border-radius:24px;border:2px solid var(--ink);
            box-shadow:6px 6px 0 var(--yolk);object-fit:cover;margin:0 auto 14px}
.mascot b{font-size:15px}
.mascot span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.timeline{position:relative;z-index:1;list-style:none}
.timeline h3{font-size:18px;font-weight:800;margin-bottom:16px}
.timeline li{position:relative;padding:0 0 20px 28px;border-left:2px dashed var(--yolk)}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;
                     border-radius:50%;background:var(--yolk);border:2.5px solid var(--ink)}
.timeline .year{font-weight:900;color:var(--tomato);font-size:15px;margin-right:8px;
                font-variant-numeric:tabular-nums}
.timeline p{font-size:14px;color:var(--muted);margin-top:2px}

.culture{background:var(--ink);border-radius:28px;padding:52px 40px;margin-top:56px;
         display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;overflow:hidden}
.culture::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;
                 border:40px solid rgba(255,170,31,.12);top:-120px;left:-80px}
.culture .value{position:relative;z-index:1}
.culture .value .emoji{font-size:26px}
.culture h4{color:var(--yolk);font-size:17px;font-weight:800;margin:10px 0 6px}
.culture p{color:#cfc4b4;font-size:14px}

/* ============ 数据带 ============ */
.proof{background:var(--ink);color:#fff;border-radius:28px;padding:52px 40px;
       display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.proof b{display:block;font-size:clamp(30px,4vw,44px);font-weight:900;color:var(--yolk);
         font-variant-numeric:tabular-nums;line-height:1.1}
.proof span{font-size:14px;color:#cfc4b4}

/* ============ 关于我们 ============ */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-top:40px;align-items:start}
.about-text p{margin-bottom:16px;font-size:16px}
.about-text p b{color:var(--tomato)}
.about-points{display:grid;gap:16px}
.point{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
       padding:20px 22px;display:flex;gap:16px;align-items:flex-start;transition:transform .2s,border-color .2s}
.point:hover{transform:translateX(6px);border-color:var(--yolk)}
.point .no{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yolk);color:var(--ink);
           font-weight:900;display:grid;place-items:center;font-size:15px}
.point h4{font-size:16px;margin-bottom:2px}
.point p{font-size:14px;color:var(--muted)}

/* ============ 服务卡片 ============ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:44px}
.svc{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:26px 22px;
     transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.svc:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:6px 6px 0 var(--yolk)}
.svc .icon{width:46px;height:46px;border-radius:12px;background:var(--yolk-soft);display:grid;
           place-items:center;margin-bottom:16px}
.svc h3{font-size:18px;font-weight:800;margin-bottom:6px}
.svc p{font-size:14px;color:var(--muted)}
.svc .go{position:absolute;top:18px;right:18px;color:var(--line);transition:color .2s;font-weight:900}
.svc:hover .go{color:var(--tomato)}

/* ============ 案例 ============ */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:44px}
.case{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;
      transition:transform .2s,box-shadow .2s}
.case:hover{transform:translateY(-6px);box-shadow:0 16px 32px -16px rgba(34,28,21,.25)}
.case .thumb{aspect-ratio:4/3;overflow:hidden;border-bottom:1.5px solid var(--line)}
.case .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.case:hover .thumb img{transform:scale(1.05)}
.case .body{padding:20px 22px}
.case .medal{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--yolk-deep);
             border-radius:6px;padding:2px 10px;margin-bottom:10px}
.case .medal.gold{background:var(--tomato)}
.case h3{font-size:17px;font-weight:800;margin-bottom:6px}
.case p{font-size:14px;color:var(--muted)}

/* ============ 师资 ============ */
.tch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:44px}
.tch{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:28px 24px;
     text-align:center;transition:transform .2s,border-color .2s}
.tch:hover{transform:translateY(-6px);border-color:var(--yolk)}
.tch img{width:108px;height:108px;border-radius:50%;object-fit:cover;margin:0 auto 16px;
         border:3px solid var(--yolk);box-shadow:0 0 0 3px var(--yolk-soft)}
.tch .role{display:inline-block;font-size:12px;font-weight:700;color:var(--tomato);
           background:#fdecec;border-radius:20px;padding:2px 12px;margin-bottom:10px}
.tch h3{font-size:19px;font-weight:800}
.tch .bio{font-size:14px;color:var(--muted);margin-top:8px}
.tch .tags{margin-top:14px}
.tag{display:inline-block;background:var(--yolk-soft);color:#8a5a00;font-size:12px;font-weight:600;
     padding:3px 12px;border-radius:20px;margin:3px}

/* ============ 报名咨询 ============ */
#contact{background:linear-gradient(180deg,var(--bg) 0%,var(--yolk-soft) 100%)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin-top:44px}
.panel{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:28px}
.panel h3{font-size:18px;font-weight:800;margin-bottom:6px}
.panel .hint{font-size:13px;color:var(--muted);margin-bottom:18px}
form input,form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;
     margin-bottom:12px;font-size:15px;font-family:inherit;background:#fff;transition:border-color .2s}
form input:focus,form textarea:focus{outline:none;border-color:var(--yolk-deep)}
form button{width:100%;justify-content:center}
.side-stack{display:grid;gap:22px}
.qr-box{display:flex;gap:20px;align-items:center}
.qr-placeholder{flex:none;width:120px;height:120px;border:2px dashed var(--yolk-deep);border-radius:14px;
                display:grid;place-items:center;text-align:center;font-size:12px;color:#8a5a00;
                background:var(--yolk-soft);padding:8px;font-weight:600}
.price-list{list-style:none}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
               padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px}
.price-list li:last-child{border-bottom:none}
.price-list b{font-weight:800;color:var(--tomato);font-variant-numeric:tabular-nums;white-space:nowrap}
.price-note{margin-top:12px;font-size:12.5px;color:var(--muted);background:var(--yolk-soft);
            border-radius:10px;padding:10px 14px}

/* ============ 收尾 CTA / 页脚 ============ */
.final{background:var(--ink);color:#fff;text-align:center;padding:88px 24px;border-radius:32px;
       margin-bottom:84px;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
               background:var(--yolk);opacity:.14;top:-140px;right:-100px}
.final::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
              background:var(--tomato);opacity:.18;bottom:-100px;left:-60px}
.final h2{font-size:clamp(26px,3.6vw,40px);font-weight:900;margin-bottom:14px}
.final p{color:#cfc4b4;margin-bottom:32px}
.final .btn{background:var(--yolk);color:var(--ink);box-shadow:0 4px 0 #b97a00}
.final .btn:hover{box-shadow:0 6px 0 #b97a00}
footer{background:var(--ink);color:#a89e8e;font-size:13px;padding:36px 0;border-top:1px solid #3a332a}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--yolk)}
footer a:hover{text-decoration:underline}

/* ============ 动效（JS 失败时内容照常可见） ============ */
.will-reveal{opacity:0;transform:translateY(24px)}
.revealed{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-grid>*{animation:heroIn .7s cubic-bezier(.22,1,.36,1) both}
.hero-grid>*:nth-child(2){animation-delay:.12s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .will-reveal{opacity:1;transform:none}
}

/* ============ 响应式：平板 ============ */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:520px}
  .about-grid,.contact-grid,.brand-strip{grid-template-columns:1fr}
  .proof{grid-template-columns:repeat(2,1fr);padding:40px 30px}
  .culture{grid-template-columns:1fr;gap:24px;padding:40px 30px}
}

/* ============ 响应式：手机 ============ */
@media(max-width:900px){
  .hero-visual{max-width:420px;margin:0 auto}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);
             flex-direction:column;align-items:flex-start;padding:16px 24px 20px;gap:16px;
             border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .hamburger{display:block}
  .brand-strip{padding:26px}
  .brand-strip::after{font-size:84px;bottom:-28px}
  .proof{padding:32px 24px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .hero{padding:48px 0 40px}
  .hero-stats{gap:22px}
  .stat b{font-size:24px}
  .sticker{font-size:11px;padding:6px 10px}
  .logo small{display:none}
  .proof,.culture{border-radius:20px}
  .final{border-radius:24px;padding:64px 20px}
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
}