/* 1:1 from Pencil Desktop w2467q (1440) / Mobile R5KTO (390) · 蓝狐官网.pen */
:root{
  --bg:#FFFFFF;--ink:#1E1C1A;--ink-2:#5E5954;
  --dark:#211D19;--dark-2:#2D2926;
  --gold:#7D6B3D;--gold-light:#EDE6D3;
  --brand:#4030E0;--accent:#F08020;--cinnabar:#4030E0;
  --line:#E4E0DA;--mist:#F4F2EF;
  /* system-font stack only (no webfont download, per user choice);
     display serif first so headings match Noto Serif SC look on all OSes */
  --font-display:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,sans-serif;
  --font-mono:"SF Mono",Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.7;overflow-x:hidden}
img{max-width:100%}
.container{max-width:1312px;margin:0 auto;padding:0}
/* Desktop稿：内容定宽1312，body背景#fff；段落左右64px内边距由各section自己承担 */
.section{padding:80px 64px}
.section-dark{background:var(--dark);color:#fff}
.section-mist{background:var(--mist)}
h2{font-family:var(--font-display)}
.reveal{opacity:1}
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- buttons (r=4, no pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:4px;font-family:var(--font-body);transition:transform .35s var(--ease),opacity .35s var(--ease),background .35s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-dark{background:var(--ink);color:#fff}
.btn-brand{background:var(--brand);color:#fff}
.btn-nav{padding:10px 20px;font-size:13px}
.btn-lg{padding:14px 32px;font-size:15px}
.btn-white{background:#fff;color:var(--ink);padding:12px 24px;font-size:13px}
.btn-outline-light{border-color:var(--gold-light);color:#fff;padding:12px 24px;font-size:13px;font-weight:400}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}
.btn-submit{width:100%;padding:14px;font-size:14px}
.btn-dl{padding:10px 18px;font-size:13px}
.btn-dl-dis{background:var(--ink-2);color:#fff;padding:10px 18px;font-size:13px;font-weight:400;cursor:default}

/* ---------- Nav: pad[16,48] gap24 ---------- */
.nav{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.nav-inner{max-width:1312px;margin:0 auto;padding:16px 48px;display:flex;align-items:center;gap:24px}
.logo img{width:197px;height:36px;object-fit:contain;display:block}
.nav-menu{display:flex;gap:28px}
.nav-link{font-size:14px;color:var(--ink-2);text-decoration:none}
.nav-link:first-child{color:var(--ink);font-weight:700}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink);font-weight:700}
.nav-spacer{flex:1;min-height:10px}
.nav-phone{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);white-space:nowrap}
.nav-toggle{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .5s var(--ease)}
.nav-toggle span:first-child{top:17px}.nav-toggle span:last-child{bottom:17px}
.nav-toggle.open span:first-child{transform:translateY(5px) rotate(45deg)}
.nav-toggle.open span:last-child{transform:translateY(-5px) rotate(-45deg)}
/* login entry: desktop uses .btn-nav, mobile-only link lives inside .nav-menu */
.nav-login{display:none}

/* ---------- Hero: dark, kicker11/mono/orange, title68/serif900 ---------- */
.hero{background:var(--dark);color:#fff}
.hero-main{padding:52px 64px 32px}
.hero-main .container{max-width:1312px;text-align:center}
.kicker{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-bottom:16px}
.hero h1{font-size:68px;font-weight:900;color:#fff;letter-spacing:.02em;line-height:1.25}
.hero-sub{font-size:16px;color:var(--gold-light);margin-top:16px}
.hero-actions{display:flex;gap:16px;margin-top:16px;justify-content:center}
.hero-imagewrap{padding:8px 64px 32px}
.hero-imagewrap .container{max-width:1312px}
/* photo frame: h460 pad28 r4, badge top-left, caption bottom-left */
.ph{position:relative;overflow:hidden;border-radius:4px;background-size:cover;background-position:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .badge{position:absolute;top:28px;left:28px;color:#fff;font-size:12px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ph figcaption{position:relative;color:#fff;font-family:var(--font-display);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ph .flex-sp{flex:1}
/* hero photo: r24 card, 1px light border, deep shadow, bottom gradient + stacked copy */
.hero-photo{height:520px;padding:32px;border-radius:24px;border:1px solid rgba(255,255,255,.15);box-shadow:0 24px 64px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,29,25,.3) 0%,rgba(33,29,25,0) 30%,rgba(33,29,25,0) 50%,rgba(33,29,25,.9) 100%),rgba(30,22,16,.4);pointer-events:none}
.hero-photo>*:not(img){position:relative;z-index:1}
.hero-badge{display:flex;align-items:center;gap:8px;background:var(--accent);border-radius:100px;padding:7px 14px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:1px;color:#fff}
.hero-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.hero-cap{margin:0;font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.3;color:#fff}
.hero-meta{margin:0;font-size:12px;color:rgba(255,255,255,.7)}
.hero-stats{background:var(--dark-2);padding:20px 64px}
.stats-row{max-width:1312px;display:flex}
.hstat{flex:1;display:flex;flex-direction:column;gap:4px;text-align:center}
.hstat b{font-family:var(--font-display);font-weight:700;font-size:28px;color:#fff}
.hstat span{font-size:12px;color:var(--gold-light)}

/* ---------- strip: brand, pad[12,0], serif13 white ---------- */
.strip{background:var(--brand);color:#fff;padding:12px 0;overflow:hidden;white-space:nowrap}
.strip .container{max-width:1312px;font-family:var(--font-display);font-size:13px}

/* ---------- 01 brand: pad[80,64] gap48, text<>visual(420) ---------- */
.brand-grid{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start;max-width:1312px;margin:0 auto}
.brand-text{display:flex;flex-direction:column;gap:20px}
.eyebrow{font-family:var(--font-mono);font-size:11px;color:var(--gold)}
.eyebrow-light{color:var(--gold-light)}
.brand-text h2,#masters h2,#courses h2,.yaji-text h2,#coop h2,.cta-text h2,.app-text h2{font-size:42px;font-weight:700;line-height:1.3}
#masters h2{font-size:40px}
#courses h2{font-size:40px}
#courses .sub{color:var(--ink-2)}
#coop h2{font-size:36px}
.app-text h2{font-size:36px}
.body{font-size:15px;color:var(--ink-2)}
.points{display:flex;gap:12px}
.point{flex:1;background:var(--mist);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:6px}
.point b{font-size:14px}
.point span{font-size:12px;color:var(--ink-2)}
.brand-visual{width:420px;display:flex;flex-direction:column;gap:12px}
.brand-photo{width:420px;height:460px;padding:24px;display:flex;flex-direction:column;align-items:flex-start}
.brand-photo figcaption{font-size:20px}
.mini-row{display:flex;gap:12px}
.mini{flex:1;height:110px;border-radius:4px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.mini-gold{background:var(--gold-light)}
.mini-dark{background:var(--ink)}
.mini-icon{width:32px;height:32px;flex:none}
.mini-gold .mini-icon{color:var(--ink)}
.mini-dark .mini-icon{color:var(--gold-light)}
.mini b{display:block;font-size:13px}
.mini span{font-size:12px;color:var(--ink-2)}
.mini-dark b{color:#fff}
.mini-dark span{color:var(--gold-light)}

/* ---------- 02 masters: dark pad[80,64] gap24, 2 rows x 3, card dark-2 pad20 ---------- */
#masters .container{max-width:1312px;text-align:center}
.sub{font-size:14px;color:var(--gold-light);margin-top:24px}
.master-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.master{background:var(--dark-2);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:8px;text-align:left}
.master-photo{width:100%;height:280px;object-fit:cover;object-position:top center;border-radius:4px}
.master .role{font-size:12px;color:var(--gold-light)}
.master .say{font-family:var(--font-display);font-size:15px;color:#fff}
.master .teach{font-size:13px;color:var(--gold-light)}

/* ---------- 03 courses: mist pad[80,64] gap32 ---------- */
#courses .container{max-width:1312px;text-align:center}
#courses .sub{color:var(--ink-2)}
.tabs{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.tab{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:20px;padding:8px 20px;font-size:13px;font-family:var(--font-body);cursor:pointer}
.tab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
#courseGrid .course[data-extra]{display:none}
.course{background:#fff;border-radius:4px;overflow:hidden;text-align:left;transition:transform .4s var(--ease)}
.course:hover{transform:translateY(-3px)}
.cover{position:relative;height:180px;background:#ddd}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-blank{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--ink) 0%,#3B3530 60%,var(--brand) 190%)}
.cover-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.02em;color:#fff;opacity:.92}
.tag{position:absolute;top:12px;left:12px;background:#fff;border-radius:20px;padding:4px 10px;font-size:11px;color:var(--ink)}
.course-body{padding:20px;display:flex;flex-direction:column;gap:8px}
.course-body h3{font-family:var(--font-display);font-size:19px;font-weight:700}
.course-body .meta{font-family:var(--font-mono);font-size:11px;color:var(--gold)}
.course-body .desc{font-size:13px;color:var(--ink-2)}
.course-body .price{font-size:12px;color:var(--ink)}
.course-more{background:var(--ink);padding:28px;display:flex;flex-direction:column;justify-content:center;gap:10px;text-decoration:none;color:#fff}
.course-more b{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.35;color:#fff}
.course-more span{font-size:13px;line-height:1.7;color:rgba(255,255,255,.72)}
.course-more i{font-style:normal;font-size:13px;font-weight:700;color:var(--gold-light)}
/* modes: dark cards pad20 */
.modes{display:flex;gap:16px;margin-top:32px}
.mode{flex:1;background:var(--ink);border-radius:4px;padding:20px;display:flex;gap:12px}
.mode-mark{color:var(--gold-light);font-size:16px}
.mode b{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.mode p{font-size:12px;color:var(--gold-light)}

/* ---------- 04 yaji: head pad[80,64,40,64] gap40, feats pad[0,64,56,64] ---------- */
.yaji-head{padding:80px 64px 40px;display:grid;grid-template-columns:1fr 440px;gap:40px;align-items:center;max-width:1440px;margin:0 auto}
.yaji-text{display:flex;flex-direction:column;gap:16px}
.yaji-body{font-size:14px;color:var(--gold-light)}
.yaji-btns{display:flex;gap:12px;flex-wrap:wrap}
.yaji-photo{width:440px;height:320px;padding:24px;display:flex;flex-direction:column;align-items:flex-start}
.yaji-photo .badge{font-family:var(--font-mono);font-size:11px}
.yaji-photo figcaption{font-size:22px}
.yaji-feats{padding:0 64px 56px;display:flex;gap:16px;max-width:1440px;margin:0 auto}
.feat{flex:1;background:var(--dark-2);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:8px}
.feat b{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff}
.feat span{font-size:12px;color:var(--gold-light)}

/* ---------- 05 coop: pad[80,64] gap48, cases w520 ---------- */
.coop-grid{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:start;max-width:1312px;margin:0 auto}
.coop-left{display:flex;flex-direction:column;gap:16px}
.scenes{display:flex;flex-direction:column;gap:12px}
.scenes-label{font-size:13px;color:var(--ink-2)}
.scene-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scene{border:1px solid var(--line);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:8px}
.scene b{font-family:var(--font-display);font-size:16px;font-weight:700}
.scene p{font-size:13px;color:var(--ink-2)}
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--mist)}
.step:last-child{border-bottom:0}
.step-no{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--brand)}
.step b{display:block;font-size:14px}
.step p{font-size:12px;color:var(--ink-2)}
.coop-cases{width:520px;display:flex;flex-direction:column;gap:16px}
.cases-title{font-size:13px;font-weight:700}
.quote{border:1px solid var(--line);border-radius:4px;background:var(--mist);padding:20px;display:flex;flex-direction:column;gap:8px}
.quote p{font-family:var(--font-display);font-size:15px}
.quote cite{font-style:normal;font-size:12px;color:var(--gold)}
.case-facts{display:flex;flex-direction:column;gap:10px}
.case-fact{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-2);line-height:1.6}
.case-fact b{font-size:12px;font-weight:700;color:var(--ink)}

/* ---------- FAQ ---------- */
#faq h2{font-size:40px;font-weight:700;line-height:1.3}
.faq-lead{margin-top:16px;max-width:760px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin-top:32px;border-top:1px solid var(--line)}
.faq-item{padding:22px 0;border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.5}
.faq-a{font-size:14px;color:var(--ink-2);line-height:1.8;margin-top:8px}

/* ---------- CTA: brand pad[56,64] gap32, form w380 white pad24 ---------- */
.cta{background:var(--brand);color:#fff;padding:56px 64px}
.cta-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:center;max-width:1312px;margin:0 auto}
.cta-text{display:flex;flex-direction:column;gap:8px}
.cta-text h2{font-size:30px;font-weight:700;color:#fff}
.cta-text p{font-size:13px;color:#fff}
.cta-form{background:#fff;border-radius:4px;width:380px;max-width:100%;padding:24px;display:flex;flex-direction:column;gap:12px}
.cta-form input,.cta-form select{width:100%;border:1px solid var(--line);border-radius:4px;padding:12px 14px;font-size:13px;font-family:var(--font-body);color:var(--ink);background:#fff}
.cta-form input::placeholder{color:var(--ink-2)}
.cta-form input:focus,.cta-form select:focus{outline:none;border-color:var(--brand)}
.cta-form .btn-submit:disabled{opacity:.65;cursor:wait}
.form-tip{font-size:12px;min-height:20px;color:var(--ink-2)}

/* ---------- App: dark pad64 gap48, visual w360 dark-2 ---------- */
.app{padding:64px}
.app-grid{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:center;max-width:1312px;margin:0 auto}
.app-text{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.app-desc{font-size:14px;color:var(--gold-light)}
.app-visual{width:360px;background:var(--dark-2);border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:12px}
.app-mark{width:72px;height:72px;object-fit:contain}
.app-name{font-size:16px;font-weight:700;color:#fff}
.app-meta{font-family:var(--font-mono);font-size:11px;color:var(--gold-light)}
.dl-row{width:100%;border-radius:4px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dl-info{display:flex;align-items:center;gap:12px}
.dl-icon{width:28px;height:28px;flex:none}
.dl-android{background:#fff;color:var(--ink)}
.dl-android .dl-icon{color:var(--ink)}
.dl-android span{color:var(--ink-2)}
.dl-ios .dl-icon{color:var(--gold-light)}
.dl-row b{display:block;font-size:14px}
.dl-row span{font-size:12px;color:var(--ink-2)}
.dl-ios{border:1px solid var(--gold-light)}
.dl-ios b{color:#fff}
.dl-ios span{color:var(--gold-light)}

/* ---------- Footer: #1E1C1A pad[48,64,32,64] ---------- */
.footer{background:var(--ink);color:var(--gold-light);padding:48px 64px 32px;font-size:12px}
.footer .container{max-width:1312px}
.foot-grid{display:flex;gap:32px;margin-bottom:32px}
.foot-brand{width:320px;display:flex;flex-direction:column;gap:12px;flex:none}
.foot-logo{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff}
.footer a{color:var(--gold-light)}
.foot-col{flex:1;display:flex;flex-direction:column;gap:10px}
.foot-h{font-size:13px;font-weight:700;color:#fff}
.copy{font-family:var(--font-mono);font-size:10px;color:var(--ink-2);text-align:center}
.backtop{position:fixed;right:26px;bottom:26px;z-index:20;width:48px;height:48px;border-radius:4px;border:1px solid var(--line);background:#fff;cursor:pointer;display:none;font-size:18px;color:var(--ink)}
.backtop.show{display:block}

/* ---------- Mobile R5KTO (390): pad20/16, stack ---------- */
@media(max-width:820px){
  .section{padding:48px 20px}
  .nav-inner{padding:12px 16px;gap:12px;justify-content:space-between}
  .nav-menu{position:fixed;left:16px;right:16px;top:70px;background:#fff;flex-direction:column;text-align:center;padding:20px;border-radius:4px;border:1px solid var(--line);opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:30}
  .nav-menu.active{opacity:1;transform:none;pointer-events:auto}
  .nav-menu .nav-link{font-size:16px;padding:10px}
  .nav-toggle{display:block}
  .nav-login{display:block;margin-top:6px;padding:14px 10px 10px;border-top:1px solid var(--line);color:var(--brand);font-weight:700}
  .nav-spacer{display:none}
  .nav-phone{display:none}
  .nav-inner .btn-nav{display:none}
  .hero-main{padding:48px 20px 32px}
  .hero h1{font-size:44px}
  .hero-imagewrap{padding:8px 20px 24px}
  .hero-photo{height:340px;padding:20px;border-radius:16px;gap:10px}
  .hero-photo .hero-cap{font-size:18px}
  .hero-stats{padding:16px 20px}
  .stats-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .strip .container{font-size:12px}
  .brand-grid,.coop-grid,.cta-grid,.app-grid,.yaji-head{grid-template-columns:1fr}
  .brand-visual{width:100%}
  .brand-photo{width:100%;height:340px}
  .points{flex-direction:column}
  .master-grid,.course-grid{grid-template-columns:1fr}
  .faq-list{grid-template-columns:1fr}
  .modes{flex-direction:column}
  .yaji-head{padding:48px 20px 32px}
  .yaji-photo{width:100%;height:280px}
  .yaji-feats{padding:0 20px 48px;flex-direction:column}
  .scene-row{grid-template-columns:1fr}
  .coop-cases{width:100%}
  .cta{padding:48px 20px}
  .cta-form{width:100%}
  .app{padding:48px 20px}
  .app-visual{width:100%}
  .footer{padding:40px 20px 24px}
  .foot-grid{flex-direction:column}
  .foot-brand{width:100%}
}
@media(max-width:1020px) and (min-width:821px){
  .brand-grid,.coop-grid,.cta-grid,.app-grid{grid-template-columns:1fr}
  .brand-visual{width:100%}
  .brand-photo{width:100%}
  .coop-cases{width:100%}
  .cta-form{width:100%}
  .app-visual{width:100%}
  .course-grid{grid-template-columns:1fr 1fr}
  .master-grid{grid-template-columns:1fr 1fr}
  .scene-row{grid-template-columns:1fr 1fr}
}

/* ---------- 无障碍：减少动态效果 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
}