/* ============================================================
   西麦科技发展有限公司 · Magic Factory Cocoa Works
   Design tokens, reset, typography, layout primitives
   ============================================================ */

:root{
  /* — Magic Factory 品牌色板（取自品牌手册 P03/P08/P13 像素取样） — */
  /* Empire Yellow · 主品牌色 */
  --magic-200:#FCF2BA;
  --magic-300:#FAE87C;
  --magic-400:#F8DE3F;
  --magic-500:#F5D511;      /* Empire Yellow · 徽标/按钮/小元素 */
  --magic-display:#F8EC94;  /* Butter Yellow · 官方P13，用于大号标题与数字 */
  --magic-600:#D6BE0C;
  --magic-700:#9C8608;
  /* Flying Choco Brown · 辅助色 */
  --cocoa-300:#D08A57;
  --cocoa-400:#B4561F;
  --cocoa-500:#944014;
  --cocoa-600:#78330F;
  --cocoa-700:#5A250A;
  /* 风味辅助色板 · brand P13 */
  --fl-cherry:#882018;
  --fl-butter:#F8EC94;
  --fl-indigo:#505CB4;
  --fl-dill:#54741C;
  --fl-orange:#CC741C;
  --fl-maroon:#7C2C34;

  /* — 中性色：魔法黑 + 奶油白 — */
  --ink-900:#120C06;
  --ink-800:#1A1209;
  --ink-700:#231808;
  --ink-600:#2C1E0C;
  --ink-500:#382610;
  --ink-400:#4A351A;

  --cream-50:#FFFCF1;
  --cream-100:#F8F3E2;
  --cream-200:#ECE3CB;
  --cream-300:#D8CCAE;
  --cream-400:#B6A888;

  /* — Semantic — */
  --bg:#120C06;
  --bg-soft:#1A1209;
  --bg-card:#231808;
  --line:rgba(245,213,17,.13);
  --line-strong:rgba(245,213,17,.26);
  --fg:#F5F2E8;
  --fg-dim:#C2BAA7;
  --fg-mute:#968D7A;
  --accent:var(--magic-500);

  --bg-light:#FBF8EA;
  --bg-light-2:#F4EEDA;
  --fg-on-light:#16130F;
  --fg-on-light-dim:#6A6152;
  --line-on-light:rgba(22,19,15,.13);

  /* — Type — */
  --f-display:"Cormorant Garamond","Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --f-serif-cn:"Noto Serif SC","Songti SC","Source Han Serif SC",serif;
  --f-sans:"Manrope","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* — Space / rhythm — */
  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  --sec-y:clamp(76px,10vw,150px);
  --radius:2px;
  --radius-lg:4px;

  --ease:cubic-bezier(.22,.68,.31,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-sans);font-size:16px;line-height:1.75;
  font-weight:350;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:400;line-height:1.18;letter-spacing:-.01em}
p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--magic-500);color:#1E1408}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y);position:relative;overflow-x:clip}
.sec--light{background:var(--bg-light);color:var(--fg-on-light)}
.sec--light h2,.sec--light h3{color:var(--fg-on-light)}
.sec--soft{background:var(--bg-soft);border-top:1px solid var(--line)}
.sec--flat{background:#14100C}
.stack>*+*{margin-top:1.1em}

.grid{display:grid;gap:clamp(20px,2.6vw,40px)}
.grid>*,.split>*,.cgrid>*,.origins>*,.biz>*,.steps>*,.stats>*,.b2b>*{min-width:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

/* ---------- Typographic scale ---------- */
.eyebrow{
  font-size:.71rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--magic-500);font-weight:500;display:flex;align-items:center;gap:.85em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65;flex:none}
.sec--light .eyebrow{color:var(--cocoa-500)}

.h-display{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:1.03;letter-spacing:-.02em}
.h-1{font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,4.7vw,3.85rem);line-height:1.1;letter-spacing:-.015em}
.h-2{font-family:var(--f-display);font-weight:300;font-size:clamp(1.9rem,3.5vw,2.95rem);line-height:1.14}
.h-3{font-size:clamp(1.14rem,1.5vw,1.34rem);font-weight:550;letter-spacing:.005em;line-height:1.35}
.h-4{font-size:1.02rem;font-weight:600;letter-spacing:.02em}
.lede{font-size:clamp(1rem,1.28vw,1.16rem);color:var(--fg-dim);max-width:62ch;line-height:1.85}
.sec--light .lede{color:var(--fg-on-light-dim)}
.small{font-size:.855rem;color:var(--fg-mute);line-height:1.7}
.sec--light .small{color:var(--fg-on-light-dim)}
.cn-serif{font-family:var(--f-serif-cn)}
.lat{font-family:var(--f-display);letter-spacing:.06em}
.mono{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.gold{color:var(--magic-400)}
.num{font-family:var(--f-display);font-weight:300;letter-spacing:-.02em}

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.95em;--pad-x:1.9em;
  display:inline-flex;align-items:center;gap:.7em;
  padding:var(--pad-y) var(--pad-x);
  border:1px solid transparent;border-radius:var(--radius);
  font-size:.83rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.btn .ar{transition:transform .42s var(--ease-out)}
.btn:hover .ar{transform:translateX(5px)}
.btn--gold{background:var(--magic-500);color:#1A1104;border-color:var(--magic-500)}
.btn--gold:hover{background:var(--magic-400);border-color:var(--magic-400)}
.btn--dark{background:#2E1F0C;color:var(--cream-100);border-color:#2E1F0C}
.btn--dark:hover{background:#0F0B08}
.btn--ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.btn--ghost:hover{border-color:var(--magic-500);color:var(--magic-400)}
.sec--light .btn--ghost{border-color:rgba(22,19,15,.25);color:var(--fg-on-light)}
.sec--light .btn--ghost:hover{border-color:var(--cocoa-500);color:var(--cocoa-500)}
.btn--lg{--pad-y:1.14em;--pad-x:2.4em;font-size:.86rem}

.tlink{
  display:inline-flex;align-items:center;gap:.55em;font-size:.8rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--magic-400);
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color .35s,color .35s,gap .35s var(--ease);
}
.tlink:hover{border-color:currentColor;gap:.9em}
.sec--light .tlink{color:var(--cocoa-500)}

/* ---------- Rules & ornaments ---------- */
.hr-brass{height:1px;background:linear-gradient(90deg,var(--magic-600),rgba(245,213,17,0));border:0}
.rule{height:1px;background:var(--line);width:100%}
.sec--light .rule{background:var(--line-on-light)}
.divider-diamond{display:flex;align-items:center;gap:14px;color:var(--magic-600)}
.divider-diamond::before,.divider-diamond::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.45}
.divider-diamond i{width:5px;height:5px;background:currentColor;transform:rotate(45deg)}

/* ---------- Reveal animation ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--magic-500);color:#1A1104;padding:.8em 1.2em;z-index:999}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--magic-500);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============================================================
   Magic Factory · 主题视觉语言
   星光记号 / 帝国黄辉光 / 风味色板映射
   ============================================================ */

/* 风味→色彩映射（依据各区实际风味笔记，非随意配色）
   每个风味同时定义「暗底用色 --fl-rgb」与「浅底用色 --fl-deep-rgb」，
   .sec--light 下自动切换到深色版本，保证对比度。 */
[data-flavor]{--fl-rgb:245,213,17;--fl-deep-rgb:148,64,20}
[data-flavor="cherry"]{--fl-rgb:226,104,79;--fl-deep-rgb:152,45,32}
[data-flavor="butter"]{--fl-rgb:248,236,148;--fl-deep-rgb:150,120,20}
[data-flavor="indigo"]{--fl-rgb:170,180,245;--fl-deep-rgb:56,66,142}
[data-flavor="dill"]{--fl-rgb:159,190,87;--fl-deep-rgb:78,104,30}
[data-flavor="orange"]{--fl-rgb:232,154,69;--fl-deep-rgb:158,88,16}
[data-flavor="cocoa"]{--fl-rgb:199,122,69;--fl-deep-rgb:128,58,16}
[data-flavor="maroon"]{--fl-rgb:194,106,106;--fl-deep-rgb:120,44,50}
.sec--light{--fl-rgb:148,64,20}
.sec--light [data-flavor]{--fl-rgb:var(--fl-deep-rgb)}

/* 星光记号（品牌 logo 中 i 上方的三道光芒） */
:root{--spark:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.9 6.9 4.2 10.2 12 12-7.8 1.8-11.1 5.1-12 12-.9-6.9-4.2-10.2-12-12C7.8 10.2 11.1 6.9 12 0z' fill='%23000'/%3E%3C/svg%3E")}
.spark{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.1em;
  background-color:currentColor;-webkit-mask:no-repeat center/contain var(--spark);mask:no-repeat center/contain var(--spark)}

/* 魔法辉光：帝国黄的环境光 */
.glow{position:relative}
.glow::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(760px,86%);aspect-ratio:1;left:50%;top:-14%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(245,213,17,.16) 0%,rgba(245,213,17,.06) 38%,transparent 68%);
  filter:blur(6px)
}
.glow--left::before{left:6%;top:8%;transform:none;width:min(560px,60%)}
.glow--right::before{left:auto;right:4%;transform:none;width:min(620px,66%)}

/* 品牌图形水印 */
.mark-wm{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.05;
  width:min(150px,15vw);aspect-ratio:86/176;
  background:url("../img/mark_bean.png") center/contain no-repeat}
.mark-wm--right{right:-4%;bottom:-6%}
.mark-wm--left{left:-5%;top:10%}

/* 风味色条与标签 */
.fl-rule{height:2px;background:linear-gradient(90deg,rgba(var(--fl-rgb),.95),rgba(var(--fl-rgb),.05));border:0;width:100%}
.fl-chip{display:inline-flex;align-items:center;gap:.5em;padding:.34em .85em;border-radius:100px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(var(--fl-rgb),1);border:1px solid rgba(var(--fl-rgb),.42);background:rgba(var(--fl-rgb),.1)}
.fl-chip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* 星光分隔线 */
.rule-stars{display:flex;align-items:center;gap:12px;color:var(--magic-600)}
.rule-stars::before,.rule-stars::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(245,213,17,.5),transparent)}
.rule-stars span{width:11px;height:11px;background-color:currentColor;-webkit-mask:no-repeat center/contain var(--spark);mask:no-repeat center/contain var(--spark)}

@media(prefers-reduced-motion:reduce){.glow::before{filter:none}}