/* =========================================================
   青囊本草 · 中药医调性独立站
   配色：墨 / 艾绿 / 陶土 / 朱砂 / 暖金 / 米纸
   ========================================================= */

:root{
  --ink:        #2b2823;   /* 墨 */
  --ink-soft:   #4a443c;   /* 淡墨 */
  --paper:      #f3ede0;   /* 米纸 */
  --paper-2:    #ebe2d2;   /* 纸二 */
  --herb:       #6b7a5a;   /* 艾绿 */
  --herb-deep:  #3f4a36;   /* 深草 */
  --clay:       #a9744f;   /* 陶土 */
  --cinnabar:   #b23a2e;   /* 朱砂 */
  --gold:       #c2a36b;   /* 暖金 */
  --line:       rgba(43,40,35,.14);
  --shadow:     0 18px 50px -28px rgba(43,40,35,.55);
  --serif:      "Noto Serif SC", "Songti SC", "STSong", serif;
  --brush:      "Ma Shan Zheng", "Noto Serif SC", cursive;
  --maxw:       1140px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* 纸纹质感 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #f7f2e8 0%, var(--paper) 45%, var(--paper-2) 100%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- 飘落草本 ---------- */
.leaf-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.leaf-field span{
  position:absolute; top:-8%;
  font-size:18px; opacity:.35;
  animation:fall linear infinite;
  color:var(--herb);
}
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0); opacity:0; }
  10%{ opacity:.4; }
  100%{ transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.is-stuck{
  background:rgba(243,237,224,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding:12px clamp(20px,5vw,56px);
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__seal{
  display:grid; place-items:center;
  width:38px; height:38px;
  background:var(--cinnabar); color:var(--paper);
  border-radius:8px;
  font-family:var(--brush); font-size:22px;
  box-shadow:0 6px 16px -8px rgba(178,58,46,.8);
}
.nav__name{ font-weight:600; letter-spacing:.18em; font-size:18px; }
.nav__links{ display:flex; gap:clamp(18px,3vw,40px); }
.nav__links a{
  position:relative; font-size:15px; letter-spacing:.16em; color:var(--ink-soft);
  padding:4px 0; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:-2px; width:0; height:1.5px;
  background:var(--cinnabar); transition:width .35s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-size:14px; letter-spacing:.14em;
  padding:10px 22px; border:1px solid var(--herb-deep);
  border-radius:999px; color:var(--herb-deep);
  transition:all .3s ease; white-space:nowrap;
}
.nav__cta:hover{ background:var(--herb-deep); color:var(--paper); }
.nav__right{ display:flex; align-items:center; gap:14px; }
.lang{ display:flex; gap:6px; align-items:center; }
.lang button{
  font-family:var(--serif); font-size:13px; font-weight:500; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  min-width:34px; height:34px; padding:0 6px; border-radius:8px;
  transition:all .25s ease;
}
.lang button:hover{ border-color:var(--herb); color:var(--ink); }
.lang button.is-active{
  background:var(--cinnabar); color:var(--paper); border-color:var(--cinnabar);
  font-weight:600; box-shadow:0 0 0 3px rgba(178,58,46,.20);
}
.lang button:focus-visible{ outline:2px solid var(--herb); outline-offset:2px; }
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
}

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--serif); font-size:15px; letter-spacing:.14em;
  padding:14px 34px; border-radius:999px;
  transition:all .3s ease; border:1px solid transparent;
}
.btn--solid{ background:var(--herb-deep); color:var(--paper); box-shadow:var(--shadow); }
.btn--solid:hover{ background:var(--herb); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--ink-soft); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--full{ width:100%; text-align:center; }

/* ---------- 首屏 ---------- */
.hero{
  position:relative; min-height:100vh;
  display:grid; place-items:center; text-align:center;
  padding:120px 20px 80px;
  z-index:1;
}
.hero__ink{
  position:absolute; z-index:-1; top:50%; left:50%;
  width:min(78vw,720px); aspect-ratio:1; transform:translate(-50%,-52%);
  background:radial-gradient(closest-side, rgba(107,122,90,.30), rgba(107,122,90,.10) 55%, transparent 72%);
  filter:blur(6px);
  border-radius:50%;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-52%) scale(1);} 50%{ transform:translate(-50%,-52%) scale(1.06);} }
.hero__inner{ max-width:760px; }
.hero__eyebrow{
  font-size:14px; letter-spacing:.5em; color:var(--clay);
  margin-bottom:26px; text-indent:.5em;
}
.hero__title{
  font-weight:600; line-height:1.18;
  font-size:clamp(46px,9vw,104px);
  letter-spacing:.08em;
}
.hero__title span{ display:block; }
.hero__title--accent{ color:var(--herb-deep); position:relative; }
.hero__title--accent::after{
  content:""; display:block; width:64px; height:3px; margin:22px auto 0;
  background:var(--cinnabar); border-radius:2px;
}
.hero__sub{
  margin:34px auto 0; max-width:560px;
  font-size:clamp(15px,2.4vw,18px); color:var(--ink-soft); font-weight:300;
}
.hero__actions{ margin-top:42px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero__seal{
  margin:54px auto 0; width:84px; height:84px;
  border:1.5px solid var(--cinnabar); border-radius:10px;
  display:grid; place-items:center;
  font-family:var(--brush); font-size:34px; color:var(--cinnabar);
  background:rgba(178,58,46,.05);
  transform:rotate(-3deg);
}
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:26px; height:44px; border:1.5px solid var(--ink-soft);
  border-radius:14px; opacity:.6;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:var(--ink-soft);
  animation:scroll 1.8s ease-in-out infinite;
}
@keyframes scroll{ 0%{ opacity:0; top:8px;} 40%{ opacity:1;} 100%{ opacity:0; top:26px;} }

/* ---------- 区块通用 ---------- */
.section{ position:relative; z-index:1; padding:clamp(80px,12vw,140px) clamp(20px,5vw,56px); }
.section__head{ max-width:var(--maxw); margin:0 auto 60px; text-align:center; }
.section__kicker{
  font-size:13px; letter-spacing:.6em; color:var(--clay);
  text-indent:.6em; margin-bottom:16px;
}
.section__title{
  font-size:clamp(30px,5vw,46px); font-weight:600; letter-spacing:.06em;
}
.section__lead{
  margin:18px auto 0; max-width:580px; color:var(--ink-soft);
  font-weight:300; font-size:clamp(15px,2.2vw,17px);
}

/* ---------- 理念 ---------- */
.pillars{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.pillar{
  background:linear-gradient(180deg,#fbf7ee,#f1e9da);
  border:1px solid var(--line); border-radius:16px;
  padding:34px 26px; position:relative; overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.pillar:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.pillar__no{
  font-family:var(--brush); font-size:46px; color:rgba(107,122,90,.28);
  display:block; line-height:1; margin-bottom:14px;
}
.pillar h3{ font-size:21px; letter-spacing:.1em; margin-bottom:12px; }
.pillar p{ font-size:14.5px; color:var(--ink-soft); font-weight:300; }
@media (max-width:900px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- 本草卡片 ---------- */
.herbs{ background:linear-gradient(180deg,transparent, rgba(107,122,90,.06) 50%, transparent); }
.cards{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:34px 26px 30px; text-align:center;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(107,122,90,.4); }
.card__icon{
  width:72px; height:72px; margin:0 auto 20px;
  display:grid; place-items:center; font-size:34px;
  background:radial-gradient(circle at 30% 30%, #fff, #ece3d2);
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--line);
}
.card h3{ font-size:21px; letter-spacing:.08em; margin-bottom:12px; }
.card p{ font-size:14.5px; color:var(--ink-soft); font-weight:300; min-height:66px; }
.card__tag{
  display:inline-block; margin-top:16px; font-size:12.5px; letter-spacing:.2em;
  color:var(--herb-deep); border:1px solid rgba(63,74,54,.35);
  padding:5px 14px; border-radius:999px;
}
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cards{ grid-template-columns:1fr; } }

/* ---------- 道地 ---------- */
.dao__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,80px);
  align-items:center;
}
.dao__p{ color:var(--ink-soft); font-weight:300; margin-bottom:18px; font-size:16px; }
.dao__list{ list-style:none; margin-top:26px; display:grid; gap:12px; }
.dao__list li{
  font-size:15.5px; padding-inline-start:14px; border-inline-start:3px solid var(--gold);
}
.dao__list b{
  display:inline-grid; place-items:center; width:26px; height:26px; margin-inline-end:12px;
  background:var(--herb-deep); color:var(--paper); border-radius:6px; font-size:14px;
  font-family:var(--brush);
}
.dao__visual{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.dao__ring{
  position:absolute; inset:8%; border:1px solid rgba(63,74,54,.3); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(107,122,90,.20), transparent 60%);
  animation:spin 40s linear infinite;
}
.dao__ring::after{
  content:""; position:absolute; inset:14%; border:1px dashed rgba(178,58,46,.3); border-radius:50%;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.dao__leaf{
  font-family:var(--brush); font-size:clamp(54px,9vw,86px); color:var(--herb-deep);
  letter-spacing:.1em;
}
@media (max-width:820px){ .dao__grid{ grid-template-columns:1fr; } .dao__visual{ max-width:340px; margin:10px auto 0; } }

/* ---------- 预约 ---------- */
.book{ background:linear-gradient(180deg, transparent, rgba(169,116,79,.08)); }
.book__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,72px);
  align-items:start;
}
.book__notes{ list-style:none; margin-top:26px; display:grid; gap:12px; color:var(--ink-soft); font-weight:300; }
.book__form{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:34px clamp(22px,4vw,40px); box-shadow:var(--shadow);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:14px; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--serif); font-size:15px; color:var(--ink);
  background:#fbf7ee; border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; transition:border-color .3s, box-shadow .3s; resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--herb); box-shadow:0 0 0 3px rgba(107,122,90,.18);
}
.book__hint{ margin-top:14px; font-size:14px; min-height:20px; color:var(--clay); text-align:center; }
.book__hint.ok{ color:var(--herb-deep); }
@media (max-width:820px){ .book__inner{ grid-template-columns:1fr; } }

/* ---------- 页脚 ---------- */
.footer{ background:var(--ink); color:var(--paper); padding:60px 20px 48px; text-align:center; position:relative; z-index:1; }
.footer__inner{ max-width:680px; margin:0 auto; }
.footer__brand{ display:inline-flex; align-items:center; gap:12px; font-size:20px; letter-spacing:.2em; margin-bottom:18px; }
.footer__brand .nav__seal{ width:34px; height:34px; font-size:18px; }
.footer__line{ color:rgba(243,237,224,.82); font-weight:300; letter-spacing:.08em; }
.footer__fine{ margin-top:14px; font-size:12.5px; color:rgba(243,237,224,.45); font-weight:300; }

/* ---------- 滚动渐显 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__ink,.leaf-field span,.dao__ring,.hero__scroll span{ animation:none; }
}

/* ---------- 阿拉伯语（RTL）与字体 ---------- */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .nav__name,
html[lang="ar"] .section__title{
  font-family:"Noto Serif Arabic","Noto Sans Arabic",serif;
}
html[lang="ar"] .hero__title{ letter-spacing:0; }
html[lang="ar"] .section__kicker{ letter-spacing:.2em; }
/* RTL 下视觉微调 */
html[dir="rtl"] .hero__scroll{ left:auto; right:50%; transform:translateX(50%); }
html[dir="rtl"] .dao__visual{ direction:ltr; } /* 装饰环保持中性 */
@media (max-width:820px){
  .lang button{ min-width:30px; height:30px; font-size:12px; }
}