/* 2026-10-26 店主：太小孩子气 → 改成设计工作室风格：衬线大标题 + 干净无衬线正文，白底 + 石灰色块，粉色只留在 logo */
:root{
  --bg:#FFFFFF;--stone:#F1F1EF;--stone-2:#E7E7E3;--ink:#18191D;--ink-2:#2B2D33;--muted:#6A6C73;--line:#E3E3E0;
  --serif:"Instrument Serif","Noto Serif SC",Georgia,serif;
  --sans:"Geist","Noto Sans SC","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,56px);--max:1200px;--r-lg:24px;--r-md:16px;--r-sm:12px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
:lang(ar) body{font-family:"Noto Kufi Arabic",var(--sans);line-height:1.8}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0;overflow-wrap:break-word}
h1,h2,h3{hyphens:auto}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:8px;transform:translateY(-300%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:20}
.skip:focus{transform:none}

/* 顶栏 */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;max-width:calc(var(--max) + 2*var(--gut));margin:auto;padding:14px var(--gut);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
.brand img{height:40px;width:auto}
.links{display:flex;gap:30px;margin-inline-start:auto;font-size:15px}
.links a{text-decoration:none;color:var(--muted);transition:color .2s ease}
.links a:hover{color:var(--ink)}
.tools{display:flex;align-items:center;gap:10px}
.lang select{appearance:none;font:inherit;font-size:14px;color:var(--ink);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2318191D' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:999px;padding:8px 30px 8px 14px;min-height:40px;cursor:pointer;transition:border-color .2s ease}
.lang select:hover{border-color:var(--ink)}
:lang(ar) .lang select{background-position:left 12px center;padding:8px 14px 8px 30px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;background:var(--ink);color:#fff;transition:transform .15s ease,background-color .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn:hover{background:var(--ink-2)}
.btn:active{transform:scale(.97)}
.btn.small{min-height:40px;padding:0 18px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:var(--stone)}

/* 标题字 */
h1,h2,.final .big{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
:lang(zh) h1,:lang(zh) h2,:lang(zh) .final .big{font-weight:500;letter-spacing:.01em}
.nb{display:inline-block}
:lang(ar) h1,:lang(ar) h2,:lang(ar) .final .big{font-family:"Noto Kufi Arabic",var(--sans);font-weight:500;letter-spacing:0}

/* 首屏：只有文字（2026-10-26 店主：示例图太像 AI，先去掉，等实物照片） */
.hero{max-width:calc(var(--max) + 2*var(--gut));margin:auto;padding:clamp(40px,8vw,120px) var(--gut) 0}
h1{font-size:clamp(54px,9vw,132px);line-height:.98;max-width:13ch}
:lang(zh) h1,:lang(ar) h1{line-height:1.2;font-size:clamp(40px,6vw,88px);max-width:none}
.hero-foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:28px 48px;margin-top:clamp(36px,5vw,64px);padding-top:28px;border-top:1px solid var(--line)}
.hero-foot>div:first-child{min-width:0;flex:1 1 320px}
.sub{font-size:clamp(18px,1.6vw,22px);white-space:nowrap;overflow:hidden}
.note{margin-top:8px;font-size:15px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
@media (prefers-reduced-motion:no-preference){.js h1,.js .hero-foot{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}.js .hero-foot{animation-delay:.12s}@keyframes rise{from{opacity:0;transform:translateY(14px)}}}

/* 区块 */
.sec{max-width:calc(var(--max) + 2*var(--gut));margin:auto;padding:clamp(72px,10vw,140px) var(--gut) 0}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px 48px;margin-bottom:clamp(28px,3.5vw,48px)}
h2{font-size:clamp(36px,4.4vw,60px);line-height:1.04;max-width:16ch}
:lang(zh) h2,:lang(ar) h2{line-height:1.3;font-size:clamp(30px,3.4vw,46px)}
.head p{color:var(--muted);max-width:42ch}

/* 产品目录：一行一种，像精品店目录 */
.index{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr);align-items:baseline;gap:8px 32px;padding:26px 0;border-top:1px solid var(--line);text-decoration:none}
.index li:first-child a{border-top-color:var(--ink)}
.index .nm{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.index a:hover .nm{transform:translateX(8px)}
:lang(ar) .index a:hover .nm{transform:translateX(-8px)}
.index .nm{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.01em}
:lang(zh) .index .nm{font-weight:500;font-size:clamp(24px,2.4vw,32px)}
:lang(ar) .index .nm{font-family:"Noto Kufi Arabic",var(--sans);font-weight:500;font-size:clamp(22px,2.2vw,28px)}
.index .ds{color:var(--muted)}
.index .sz{justify-self:end;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;unicode-bidi:isolate;direction:ltr}

/* 系列：五个文字块 */
.series{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.series li{background:var(--stone);border-radius:var(--r-md);padding:24px 22px 26px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.series h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.1}
:lang(zh) .series h3{font-weight:500;font-size:24px}
:lang(ar) .series h3{font-family:"Noto Kufi Arabic",var(--sans);font-weight:500;font-size:22px}
.series p{color:var(--muted);font-size:15px}

/* 步骤 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.steps li{border-top:1px solid var(--ink);padding-top:22px}
.steps .n{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--muted);margin-bottom:22px}
.steps h3{font-size:19px;font-weight:500}
.steps p{color:var(--muted);margin-top:6px;max-width:30ch}

/* 门店 + 收尾 */
.visit{padding-bottom:clamp(72px,10vw,140px)}
.card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
.where{background:var(--stone);border-radius:var(--r-lg);padding:clamp(28px,4vw,56px)}
.addr{margin-top:20px;font-size:18px}
dl{margin:22px 0 0}dt{font-size:14px;color:var(--muted)}dd{margin:2px 0 0;white-space:pre-line}
.contacts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;font-weight:500}
.contacts a{text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--muted);transition:text-decoration-color .2s ease}
.contacts a:hover{text-decoration-color:var(--ink)}
.contacts a[hidden]{display:none}
.final{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.final .big{font-size:clamp(36px,3.8vw,52px);line-height:1.04;max-width:12ch}
:lang(zh) .final .big,:lang(ar) .final .big{line-height:1.3;font-size:clamp(28px,3vw,40px)}
.final .btn{align-self:flex-start}
.foot{max-width:calc(var(--max) + 2*var(--gut));margin:auto;padding:26px var(--gut) 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:14px;color:var(--muted)}
.legal{display:flex;gap:22px}
.legal a{text-decoration:none;transition:color .2s ease}.legal a:hover{color:var(--ink)}

/* 平板 */
@media (max-width:980px){
  .links{display:none}
  .tools{margin-inline-start:auto}
  .index a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm sz" "ds ds"}
  .index .nm{grid-area:nm}.index .ds{grid-area:ds}.index .sz{grid-area:sz}
  .series{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 手机 */
@media (max-width:560px){
  body{font-size:16px}
  .bar{padding-block:10px;gap:10px}
  .brand img{height:36px}
  .tools .order{display:none}
  .hero{padding-top:28px}
  h1{font-size:clamp(46px,13vw,60px)}
  :lang(zh) h1,:lang(ar) h1{font-size:clamp(28px,8.6vw,40px)}
  .sub{margin-top:14px}
  .hero-foot{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .hero-foot>div:first-child{flex:none}
  .actions{flex-direction:column;align-items:stretch}
  .btn{min-height:54px;font-size:17px}
  .index a{padding:22px 0}
  .index .sz{font-size:14px}
  .series{grid-template-columns:1fr;gap:10px}
  .series li{min-height:0}
  .steps{grid-template-columns:1fr;gap:30px}
  .card{grid-template-columns:1fr}
  .final .btn{align-self:stretch}
}