/* 霁川官网。字体 nvwafont：与 Nvwa 客户端 / 官网同一套（中文 = 文鼎 UKai 改，西文 = Newsreader）。
   中文那份只裁了本站用到的字，改文案后重跑 tools/subset-font.py。授权见 assets/fonts/LICENSE-*.txt。 */
@font-face {
  font-family: "nvwafont";
  src: url("assets/fonts/nvwafont-han.woff2?v=7541e930") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "nvwafont";
  src: url("assets/fonts/nvwafont-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+20AC;
}

:root {
  --font: "nvwafont", "Kaiti SC", "STKaiti", "华文楷体", "KaiTi", "楷体", "Times New Roman", "Noto Serif", Georgia, serif;
  --ivory: #faf9f5;
  --ivory-2: #f0eee6;
  --oat: #e3dacc;
  --slate: #141413;
  --slate-2: #5e5d59;
  --slate-3: #87867f;
  --clay: #d97757;
  --heather: #cbcadb;
  --cactus: #bcd1ca;
  --coral: #ebcece;
  --line: rgba(20, 20, 19, 0.12);
  --wrap: 1240px;
  --gutter: 32px;
  --r: 24px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--slate);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* buttons & links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border-radius: 12px;
  font-size: 17px; white-space: nowrap;
  transition: background .2s, color .2s;
}
.btn--sm { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 16px; }
.btn--dark { background: var(--slate); color: var(--ivory); }
.btn--dark:hover { background: var(--clay); }
.btn--light { background: var(--ivory); color: var(--slate); }
.btn--light:hover { background: var(--clay); color: var(--ivory); }

.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s; }
a.link:hover, a:hover > * > .link, a:hover > .link { color: var(--clay); }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }

.brand, .footer__brand { display: flex; align-items: center; gap: 8px; }
.brand__cn { font-size: 26px; letter-spacing: 0.08em; line-height: 1; }

.nav__links { display: flex; gap: 36px; font-size: 17px; }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--clay); }

.nav__tools { display: flex; align-items: center; gap: 8px; }
.lang { height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 16px; color: var(--slate-2); transition: background .2s; }
.lang:hover { background: var(--ivory-2); }

/* hero */
.hero { padding-top: clamp(56px, 9vw, 128px); }
.hero__in { display: grid; grid-template-columns: 8fr 4fr; gap: 32px 64px; align-items: end; }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 5.4rem); line-height: 1.14; letter-spacing: 0.01em; }
.hero h1 u { white-space: nowrap; text-decoration-color: var(--clay); text-decoration-thickness: 0.06em; text-underline-offset: 0.14em; }
.hero__side p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--slate-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }

/* two businesses */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(56px, 8vw, 112px); }
.tile {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(340px, 34vw, 460px);
  padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r); overflow: hidden;
  transition: transform .3s;
}
.tile:hover { transform: translateY(-4px); }
.tile--oat { background: var(--oat); }
.tile--slate { background: var(--slate); color: var(--ivory); }
.tile__label { font-size: 15px; letter-spacing: 0.12em; opacity: .65; }
.tile h2 { margin-top: 14px; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.15; }
.tile p { margin-top: 14px; max-width: 24em; opacity: .78; }
.tile__marks { display: flex; align-items: center; gap: 22px; margin-top: auto; padding-top: 32px; }
.tile__art { margin-top: auto; width: min(320px, 70%); fill: none; stroke: var(--clay); stroke-width: 3; stroke-linecap: round; overflow: visible; }
.tile__art circle { fill: var(--clay); stroke: none; }
.tile__art--globe { width: min(150px, 40%); stroke-width: 2.5; }
.tile__art--globe .ring { fill: none; stroke: var(--clay); }
.tile__go { position: absolute; right: clamp(28px, 3.4vw, 48px); bottom: clamp(24px, 3vw, 40px); font-size: 28px; line-height: 1; transition: transform .3s; }
.tile:hover .tile__go { transform: translateX(6px); }

/* sections */
.section { padding-top: clamp(96px, 12vw, 176px); }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; align-items: end; }
.head h2, .about > h2 { font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.15; }
.head p { max-width: 26em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--slate-2); }

/* product cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 72px); }
.card { display: flex; flex-direction: column; }
.card__cover { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r); transition: border-radius .3s; }
.card__cover img { transition: transform .4s; }
.card:hover .card__cover img { transform: scale(1.08); }
.card__cover--heather { background: var(--heather); }
.card__cover--cactus { background: var(--cactus); }
.card__cover--coral { background: var(--coral); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 4px 0; }
.card__tag { font-size: 15px; color: var(--slate-3); }
.card h3 { margin-top: 4px; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.2; }
.card p { margin: 10px 0 20px; color: var(--slate-2); }
.card .link { margin-top: auto; align-self: flex-start; }

/* advertising panel */
.panel { background: var(--slate); color: var(--ivory); border-radius: var(--r); padding: clamp(32px, 5.5vw, 88px); }
.head--panel p { color: rgba(250, 249, 245, 0.72); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
.steps li { padding-top: 20px; border-top: 1px solid rgba(250, 249, 245, 0.24); }
.steps__n { font-size: 16px; color: var(--clay); letter-spacing: 0.06em; }
.steps h3 { margin-top: 8px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; }
.steps p { margin-top: 10px; font-size: 17px; color: rgba(250, 249, 245, 0.72); }
.steps--2 { grid-template-columns: 1fr 1fr; gap: 32px 64px; margin-bottom: 0; }
.steps--2 p { max-width: 26em; margin-bottom: 20px; }

/* about */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; }
.about__lead { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.5; }
.facts { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--slate-3); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }

/* cta */
.cta { background: var(--ivory-2); border-radius: var(--r); padding: clamp(48px, 8vw, 120px) clamp(24px, 5vw, 64px); text-align: center; }
.cta h2 { font-size: clamp(2.2rem, 5.4vw, 4.5rem); line-height: 1.15; }
.cta p { margin: 14px 0 32px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--slate-2); }

/* footer */
.footer { margin-top: clamp(96px, 12vw, 176px); background: var(--slate); color: var(--ivory); padding: clamp(48px, 6vw, 88px) 0 32px; }
.footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer__brand { align-self: flex-start; }
.footer .brand__cn { font-size: 34px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 32px clamp(40px, 7vw, 104px); }
.footer__cols h4 { font-size: 15px; color: rgba(250, 249, 245, 0.5); margin-bottom: 12px; }
.footer__cols a { display: block; padding: 4px 0; font-size: 17px; transition: color .2s; }
.footer__cols a:hover { color: var(--clay); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid rgba(250, 249, 245, 0.16); font-size: 15px; color: rgba(250, 249, 245, 0.5); }
.footer__bottom a:hover { color: var(--ivory); }

/* responsive */
@media (max-width: 960px) {
  .hero__in, .head, .about { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; --r: 20px; }
  body { font-size: 17px; }
  .nav__in { height: 64px; }
  .nav__links { display: none; }
  .duo, .cards { grid-template-columns: 1fr; }
  .tile { min-height: 320px; }
  .steps, .steps--2 { grid-template-columns: 1fr; gap: 24px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}