@charset "UTF-8";
/* ==========================================================================
   蓉易审 rongyishen.com — 成都汽车年检年审预约
   纯 HTML + CSS 重构版（原站为 React + Tailwind SPA）
   设计令牌与视觉风格严格对齐原站
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", ui-sans-serif,
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 0.75rem;

  /* 语义色（hex 为回退值，oklch 与原站完全一致） */
  --background: #fdfdfe;
  --background: oklch(99% 0.005 250);
  --foreground: #1b2333;
  --foreground: oklch(15% 0.02 260);

  --card: #ffffff;
  --card: oklch(100% 0 0);
  --card-foreground: var(--foreground);

  --primary: #3275b4;
  --primary: oklch(55% 0.12 250);
  --primary-foreground: #f9fcff;
  --primary-foreground: oklch(99% 0.005 250);

  --secondary: #eef3f9;
  --secondary: oklch(95% 0.02 250);
  --secondary-foreground: #3f4c61;
  --secondary-foreground: oklch(35% 0.05 250);

  --accent: #e46212;
  --accent: oklch(65% 0.18 45);
  --accent-foreground: #ffffff;

  --muted: #f2f5f8;
  --muted: oklch(95% 0.01 250);
  --muted-foreground: #67788d;
  --muted-foreground: oklch(55% 0.03 250);

  --destructive: #d02e1e;
  --destructive: oklch(55% 0.22 25);
  --destructive-foreground: #ffffff;

  --border: #dde5ee;
  --border: oklch(90% 0.02 250);
  --input: #dde5ee;
  --input: oklch(90% 0.02 250);
  --ring: #3275b4;
  --ring: oklch(55% 0.12 250);

  /* 品牌色 */
  --brand-blue: #3275b4;
  --brand-blue: oklch(55% 0.12 250);
  --brand-blue-light: #8fb6dd;
  --brand-blue-light: oklch(75% 0.08 250);
  --brand-blue-dark: #1f4e7d;
  --brand-blue-dark: oklch(35% 0.15 250);
  --brand-orange: #e46212;
  --brand-orange: oklch(65% 0.18 45);
  --brand-orange-light: #f0a56a;
  --brand-orange-light: oklch(80% 0.12 45);
  --brand-orange-dark: #a8400a;
  --brand-orange-dark: oklch(50% 0.2 45);

  /* 中性色板（对齐 Tailwind slate / green） */
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --green-100: #dcfce7;
  --green-600: #16a34a;

  /* 透明度派生色 */
  --primary-05: #3275b40d;
  --primary-10: #3275b41a;
  --primary-20: #3275b433;
  --accent-10: #e462121a;
  --secondary-50: #eef3f980;
  --secondary-30: #eef3f94d;
  --muted-30: #f2f5f84d;
  --border-50: #dde5ee80;
  --white-10: #ffffff1a;
  --white-20: #ffffff33;
  --white-70: #ffffffb3;
  --white-90: #ffffffe6;

  /* 阴影 */
  --shadow-brand: 0 4px 20px -4px #3275b440;
  --shadow-brand-lg: 0 8px 40px -8px #3275b44d;
  --shadow-accent: 0 4px 20px -4px #e462124d;
  --shadow-sm: 0 1px 2px 0 #0f172a0f;
  --shadow: 0 1px 3px 0 #0f172a1a, 0 1px 2px -1px #0f172a1a;

  --header-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 80px;
  }
}

/* 深色主题（原站默认浅色，此处保留以备扩展） */
[data-theme="dark"],
.dark {
  --background: #12161f;
  --background: oklch(12% 0.02 260);
  --foreground: #eef3f9;
  --foreground: oklch(95% 0.01 250);
  --card: #1b2333;
  --card: oklch(18% 0.03 260);
  --card-foreground: var(--foreground);
  --primary: #5d97d8;
  --primary: oklch(65% 0.12 250);
  --primary-foreground: #12161f;
  --secondary: #26303f;
  --secondary: oklch(25% 0.03 260);
  --secondary-foreground: #dfe6ee;
  --accent: #ee8b3d;
  --accent: oklch(70% 0.16 45);
  --accent-foreground: #12161f;
  --muted: #242c3a;
  --muted: oklch(25% 0.02 260);
  --muted-foreground: #9aabc0;
  --muted-foreground: oklch(65% 0.03 250);
  --border: #26303f;
  --border: oklch(25% 0.03 260);
  --input: #26303f;
  --ring: #5d97d8;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background: var(--primary-20);
}

/* --------------------------------------------------------------------------
   3. 通用工具类
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}

.container--narrow { max-width: 1024px; }
.container--tight { max-width: 896px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--card);
  color: var(--foreground);
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-brand);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--filled {
  fill: currentColor;
  stroke: currentColor;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 渐变与特效（对齐原站自定义类） */
.gradient-primary {
  background-image: linear-gradient(135deg, #3275b4 0%, #2a5f9e 100%);
  background-image: linear-gradient(135deg, var(--brand-blue) 0%, oklch(45% 0.15 250) 100%);
}

.gradient-accent {
  background-image: linear-gradient(135deg, #e46212 0%, #c25310 100%);
  background-image: linear-gradient(135deg, var(--brand-orange) 0%, oklch(55% 0.2 45) 100%);
}

.gradient-hero {
  background-image: linear-gradient(135deg, #002440, #003c6c, #0e5794 50%, #18386e);
}

.text-gradient {
  background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-orange) 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.border-glow {
  border: 1px solid var(--primary-20);
  box-shadow: 0 0 20px #3275b41a;
}

/* --------------------------------------------------------------------------
   4. 按钮 / 徽章 / 标签
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding-inline: 1rem;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.btn .icon { width: 1rem; height: 1rem; }

.btn--sm { height: 32px; padding-inline: 0.75rem; font-size: 0.8125rem; }
.btn--lg { height: 56px; padding-inline: 1.5rem; font-size: 1.125rem; font-weight: 600; }
.btn--block { width: 100%; }
.btn--pill { border-radius: 9999px; height: auto; padding: 0.75rem 2rem; }
.btn--pill.btn--lg { padding: 1.5rem 2rem; }

.btn--primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn--primary:hover { background-color: var(--primary); opacity: 0.88; }

.btn--accent {
  background-color: var(--accent);
  color: var(--accent-foreground);
  box-shadow: var(--shadow-accent);
}

.btn--accent:hover { opacity: 0.9; }

.btn--secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn--secondary:hover { background-color: var(--secondary); opacity: 0.8; }

.btn--outline {
  border: 1px solid var(--border);
  color: var(--foreground);
  background-color: transparent;
}

.btn--outline:hover { background-color: var(--secondary); }

.btn--ghost { color: var(--foreground); }
.btn--ghost:hover { background-color: var(--secondary); }

.btn--white-outline {
  border: 1px solid var(--white-20);
  color: var(--white-90);
  border-radius: 9999px;
  height: auto;
  padding: 0.75rem 1.5rem;
}

.btn--white-outline:hover {
  color: #fff;
  border-color: var(--white-20);
  background-color: var(--white-10);
}

.btn--on-dark { color: var(--white-90); }
.btn--on-dark:hover { color: #fff; background-color: var(--white-10); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.badge--primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.badge--secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: transparent;
}

.badge--accent {
  background-image: linear-gradient(135deg, #e46212 0%, #c25310 100%);
  background-image: linear-gradient(135deg, var(--brand-orange) 0%, oklch(55% 0.2 45) 100%);
  color: #fff;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1.3;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.chip .icon { width: 0.75rem; height: 0.75rem; }

.chip--primary {
  background-color: var(--primary-10);
  color: var(--primary);
}

/* 章节标题 */
.section {
  padding-block: 5rem;
  background-color: var(--background);
}

.section--muted { background-color: var(--muted-30); }

.section--fade-in {
  background-image: linear-gradient(to bottom, var(--background), var(--secondary-30));
}

.section--fade-out {
  background-image: linear-gradient(to bottom, var(--muted-30), var(--background));
}

.section__head {
  text-align: center;
  margin-bottom: 3rem;
}

.section__head--lg { margin-bottom: 4rem; }

.section__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

@media (min-width: 640px) {
  .section__title { font-size: 2.25rem; }
}

.section__title-accent { color: var(--primary); }

.section__desc {
  color: var(--muted-foreground);
  max-width: 42rem;
  margin-inline: auto;
}

.section__desc--lg { font-size: 1.125rem; }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background-color: var(--primary-10);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.section__eyebrow .icon { width: 1rem; height: 1rem; }

/* 卡片基类 */
.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   5. 页头
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-image: linear-gradient(to bottom, #00000066, transparent);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
  background-color: #fffc;
  background-color: #fffffff2;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-brand);
  border-bottom: 1px solid var(--border-50);
}

.site-header__inner {
  width: 100%;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .site-header__inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .site-header__inner { padding-inline: 2rem; }
}

@media (min-width: 1280px) {
  .site-header__inner { padding-inline: 3rem; }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand);
  flex-shrink: 0;
}

.brand__mark span {
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  color: #fff;
  transition: color 0.3s ease;
}

.brand__slogan {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--white-70);
  transition: color 0.3s ease;
}

.is-scrolled .brand__name { color: var(--foreground); }
.is-scrolled .brand__slogan { color: var(--muted-foreground); }

.site-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white-90);
  transition: color 0.2s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #fff;
  transform: translateX(-50%);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.site-nav a:hover { color: #fff; }
.site-nav a:hover::after { width: 50%; }

.is-scrolled .site-nav a { color: #1b2333cc; }
.is-scrolled .site-nav a:hover { color: var(--primary); }
.is-scrolled .site-nav a::after { background-color: var(--primary); }

.site-header__actions {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white-90);
  transition: color 0.2s ease;
}

.site-header__phone .icon { width: 1rem; height: 1rem; }
.site-header__phone:hover { color: #fff; }

.is-scrolled .site-header__phone { color: #1b2333cc; }
.is-scrolled .site-header__phone:hover { color: var(--primary); }

@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .site-header__actions { display: flex; }
  .nav-toggle,
  .nav-hamburger { display: none; }
}

/* 汉堡按钮 */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: calc(var(--radius) - 4px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-hamburger .icon { width: 24px; height: 24px; }

.nav-hamburger:hover { background-color: var(--white-10); }

.is-scrolled .nav-hamburger { color: var(--foreground); }
.is-scrolled .nav-hamburger:hover { background-color: var(--secondary); }

.nav-toggle:focus-visible + .site-header .nav-hamburger {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 4px);
}

.is-scrolled .nav-toggle:focus-visible + .site-header .nav-hamburger {
  outline-color: var(--ring);
}

/* --------------------------------------------------------------------------
   6. 移动端侧边抽屉
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.3s ease;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: #000000cc;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 300px;
  max-width: 85vw;
  background-color: var(--card);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: -8px 0 40px -8px #0f172a40;
}

@media (min-width: 640px) {
  .drawer__panel { width: 400px; }
}

.nav-toggle:checked ~ .drawer { visibility: visible; pointer-events: auto; }
.nav-toggle:checked ~ .drawer .drawer__overlay { opacity: 1; }
.nav-toggle:checked ~ .drawer .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.drawer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer__brand .brand__mark { width: 32px; height: 32px; }
.drawer__brand .brand__name { color: var(--foreground); font-size: 1.125rem; }

.drawer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: calc(var(--radius) - 4px);
  color: var(--muted-foreground);
  cursor: pointer;
}

.drawer__close .icon { width: 16px; height: 16px; }

.drawer__close:hover { background-color: var(--secondary); color: var(--foreground); }

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
}

.drawer__nav a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1b2333cc;
  border-radius: calc(var(--radius) - 4px);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.drawer__nav a:hover {
  color: var(--primary);
  background-color: var(--secondary);
}

.drawer__foot {
  margin-top: auto;
  padding: 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.drawer__foot .btn { height: 48px; font-size: 1rem; }

.drawer__foot .btn--outline { color: var(--primary); border-color: var(--primary); }
.drawer__foot .btn--outline:hover { background-color: var(--primary-05); }

/* --------------------------------------------------------------------------
   7. 首屏 Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding-block: 8rem 5rem;
}

@media (min-width: 1024px) {
  .hero { min-height: 700px; }
}

/* 满屏深色渐变层（对应原站 absolute inset-0 gradient-hero） */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, #002440, #003c6c, #0e5794 50%, #18386e);
  pointer-events: none;
}

/* 装饰光斑层（对应原站 absolute inset-0 opacity-10） */
.hero__blobs {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
}

.hero__blob--1 {
  top: 5rem;
  left: 2.5rem;
  width: 18rem;
  height: 18rem;
  background-color: var(--white-20);
}

.hero__blob--2 {
  bottom: 5rem;
  right: 2.5rem;
  width: 24rem;
  height: 24rem;
  background-color: var(--primary-20);
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  background-image: linear-gradient(to top, var(--background), transparent);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .hero__inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .hero__inner { padding-inline: 2rem; }
}

/* 轮播（纯 CSS 单选框驱动） */
.slider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider__viewport {
  position: relative;
  width: 100%;
  display: grid;
}

.slide {
  grid-area: 1 / 1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s;
  padding-inline: 3.5rem;
}

.slide__content {
  max-width: 56rem;
  margin-inline: auto;
}

#hero-slide-1:checked ~ .slider__viewport .slide--1,
#hero-slide-2:checked ~ .slider__viewport .slide--2,
#hero-slide-3:checked ~ .slider__viewport .slide--3 {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.slide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background-color: var(--white-10);
  border: 1px solid var(--white-20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.slide__icon .icon { width: 32px; height: 32px; color: #fff; stroke-width: 1.6; }

.slide__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.slide__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white-90);
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

.slide__desc {
  font-size: 1.125rem;
  color: var(--white-70);
  max-width: 42rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .slide__title { font-size: 3rem; }
  .slide__subtitle { font-size: 1.875rem; }
  .slide__desc { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  .slide__title { font-size: 3.75rem; }
  .slide__subtitle { font-size: 2.25rem; }
}

.slide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background-color: var(--white-10);
  border: 1px solid var(--white-20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.slide__arrow .icon { width: 24px; height: 24px; }

.slide__arrow--prev { left: 0; }
.slide__arrow--next { right: 0; }

.slide__arrow:hover { background-color: var(--white-20); }

.slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 3rem;
  border-radius: 9999px;
}

.slider__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #ffffff66;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.slider__dot:hover { background-color: #ffffff99; }

#hero-slide-1:checked ~ .slider__dots .slider__dot:nth-child(1),
#hero-slide-2:checked ~ .slider__dots .slider__dot:nth-child(2),
#hero-slide-3:checked ~ .slider__dots .slider__dot:nth-child(3) {
  width: 32px;
  background-color: #fff;
}

.slider__radio:focus-visible ~ .slider__dots {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; }
}

.hero__cta {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero__cta:hover { transform: scale(1.05); }

.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__phone .icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   8. 数据条
   -------------------------------------------------------------------------- */
.stats {
  padding-block: 4rem;
  background-image: linear-gradient(to bottom, var(--background), var(--secondary-30));
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

.stat {
  text-align: center;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: var(--card);
  border: 1px solid var(--border-50);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
}

.stat:hover { box-shadow: var(--shadow-brand); }

.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  background-color: var(--primary-10);
  color: var(--primary);
  margin-bottom: 1rem;
}

.stat__icon .icon { width: 28px; height: 28px; stroke-width: 1.7; }

.stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.stat__num {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

@media (min-width: 768px) {
  .stat__num { font-size: 3rem; }
}

.stat__suffix {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

@media (min-width: 768px) {
  .stat__suffix { font-size: 1.875rem; }
}

.stat__label {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .stat__label { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   9. 服务项目
   -------------------------------------------------------------------------- */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service {
  padding: 1.5rem;
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--primary-20);
  box-shadow: 0 0 20px #3275b41a;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service:hover {
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-4px);
}

.service__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.service__icon {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.service:hover .service__icon { transform: scale(1.1); }

.service__icon .icon { width: 24px; height: 24px; color: #fff; stroke-width: 1.7; }

.service__content { flex: 1; min-width: 0; }

.service__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.service__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}

.service__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.service__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   10. 审车流程
   -------------------------------------------------------------------------- */
.process__track {
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
}

.process__line {
  display: none;
}

@media (min-width: 768px) {
  .process__line {
    display: block;
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(to right, var(--primary-20), var(--primary), var(--primary-20));
  }
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .process__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__icon-wrap { position: relative; margin-bottom: 1.5rem; }

.step__icon {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #3275b4, #3275b4cc);
  background-image: linear-gradient(135deg, var(--primary), #3275b4cc);
  box-shadow: var(--shadow-brand-lg);
}

.step__icon .icon { width: 24px; height: 24px; color: var(--primary-foreground); stroke-width: 1.7; }

.step__num {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--accent);
  color: var(--accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: var(--shadow-accent);
}

.step__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.step__desc {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.625;
  max-width: 200px;
}

.process__cta { text-align: center; margin-top: 4rem; }

.process__cta .btn {
  border-radius: 0.75rem;
  height: auto;
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   11. 检测站点
   -------------------------------------------------------------------------- */
.region-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.region-filter label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding-inline: 0.75rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.region-filter label:hover { background-color: var(--secondary); }

/* 选中态（纯 CSS，无需 JS 过滤） */
#r-all:checked ~ .region-filter label[for="r-all"],
#r-jinjiang:checked ~ .region-filter label[for="r-jinjiang"],
#r-chenghua:checked ~ .region-filter label[for="r-chenghua"],
#r-wuhou:checked ~ .region-filter label[for="r-wuhou"],
#r-qingyang:checked ~ .region-filter label[for="r-qingyang"],
#r-jinniu:checked ~ .region-filter label[for="r-jinniu"],
#r-pidu:checked ~ .region-filter label[for="r-pidu"],
#r-shuangliu:checked ~ .region-filter label[for="r-shuangliu"],
#r-xindu:checked ~ .region-filter label[for="r-xindu"],
#r-wenjiang:checked ~ .region-filter label[for="r-wenjiang"],
#r-longquanyi:checked ~ .region-filter label[for="r-longquanyi"],
#r-qingbaijiang:checked ~ .region-filter label[for="r-qingbaijiang"],
#r-jintang:checked ~ .region-filter label[for="r-jintang"],
#r-pengzhou:checked ~ .region-filter label[for="r-pengzhou"],
#r-chongzhou:checked ~ .region-filter label[for="r-chongzhou"],
#r-dujiangyan:checked ~ .region-filter label[for="r-dujiangyan"],
#r-jianyang:checked ~ .region-filter label[for="r-jianyang"],
#r-qionglai:checked ~ .region-filter label[for="r-qionglai"],
#r-dayi:checked ~ .region-filter label[for="r-dayi"],
#r-pujiang:checked ~ .region-filter label[for="r-pujiang"],
#r-xinjin:checked ~ .region-filter label[for="r-xinjin"] {
  background-image: linear-gradient(135deg, #3275b4 0%, #2a5f9e 100%);
  background-image: linear-gradient(135deg, var(--brand-blue) 0%, oklch(45% 0.15 250) 100%);
  border-color: transparent;
  color: #fff;
}

/* 过滤逻辑（纯 CSS，无需 JS） */
#r-jinjiang:checked ~ .station-grid > .station:not([data-region="jinjiang"]),
#r-chenghua:checked ~ .station-grid > .station:not([data-region="chenghua"]),
#r-wuhou:checked ~ .station-grid > .station:not([data-region="wuhou"]),
#r-qingyang:checked ~ .station-grid > .station:not([data-region="qingyang"]),
#r-jinniu:checked ~ .station-grid > .station:not([data-region="jinniu"]),
#r-pidu:checked ~ .station-grid > .station:not([data-region="pidu"]),
#r-shuangliu:checked ~ .station-grid > .station:not([data-region="shuangliu"]),
#r-xindu:checked ~ .station-grid > .station:not([data-region="xindu"]),
#r-wenjiang:checked ~ .station-grid > .station:not([data-region="wenjiang"]),
#r-longquanyi:checked ~ .station-grid > .station:not([data-region="longquanyi"]),
#r-qingbaijiang:checked ~ .station-grid > .station:not([data-region="qingbaijiang"]),
#r-jintang:checked ~ .station-grid > .station:not([data-region="jintang"]),
#r-pengzhou:checked ~ .station-grid > .station:not([data-region="pengzhou"]),
#r-chongzhou:checked ~ .station-grid > .station:not([data-region="chongzhou"]),
#r-dujiangyan:checked ~ .station-grid > .station:not([data-region="dujiangyan"]),
#r-jianyang:checked ~ .station-grid > .station:not([data-region="jianyang"]),
#r-qionglai:checked ~ .station-grid > .station:not([data-region="qionglai"]),
#r-dayi:checked ~ .station-grid > .station:not([data-region="dayi"]),
#r-pujiang:checked ~ .station-grid > .station:not([data-region="pujiang"]),
#r-xinjin:checked ~ .station-grid > .station:not([data-region="xinjin"]) {
  display: none;
}

.station-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .station-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .station-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.station {
  padding: 1.5rem;
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.station:hover {
  box-shadow: var(--shadow-brand-lg);
  border-color: var(--primary-20);
}

.station__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.station__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.station:hover .station__name { color: var(--primary); }

.station__hot { flex-shrink: 0; }

.station__meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.station__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.station__row .icon {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  margin-top: 0.125rem;
}

.station__row address,
.station__row span { color: var(--muted-foreground); }

.station__services {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1rem;
}

.station__services-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.station__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.station__tags .chip {
  background-color: var(--primary-10);
  color: var(--primary);
}

.station__cta { margin-top: auto; }

.station-empty {
  text-align: center;
  padding-block: 3rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   12. 收费标准
   -------------------------------------------------------------------------- */
.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pricing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.plan {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.plan:hover {
  box-shadow: var(--shadow-brand-lg);
  border-color: var(--primary-20);
}

.plan--popular {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-brand);
}

.plan__flag {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-bottom-left-radius: 0.5rem;
}

.plan__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.plan__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.plan__price-symbol,
.plan__price-unit,
.plan__price-old {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.plan__price-num {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.plan__price-old {
  text-decoration: line-through;
  margin-left: 0.5rem;
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.plan__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}

.plan__features .icon {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  stroke-width: 3;
}

.plan__note {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.plan__note .icon { width: 0.75rem; height: 0.75rem; }

.pricing__promise {
  background-color: var(--primary-05);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .pricing__promise { flex-direction: row; }
}

.pricing__promise-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pricing__promise-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background-color: var(--primary-10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pricing__promise-icon .icon { width: 24px; height: 24px; color: var(--primary); }

.pricing__promise-title {
  font-weight: 600;
  color: var(--foreground);
}

.pricing__promise-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pricing__promise-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pricing__promise-list span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pricing__promise-list .icon {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  stroke-width: 3;
}

/* --------------------------------------------------------------------------
   13. 用户口碑
   -------------------------------------------------------------------------- */
.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.review {
  background-color: var(--card);
  border: 1px solid var(--border-50);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.review:hover {
  box-shadow: var(--shadow-brand);
  transform: translateY(-4px);
}

.review__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.review__avatar-wrap { position: relative; flex-shrink: 0; }

.review__avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #3275b4, #3275b4b3);
  background-image: linear-gradient(135deg, var(--primary), #3275b4b3);
  color: var(--primary-foreground);
  font-weight: 700;
  font-size: 1.125rem;
}

.review__verified {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review__verified .icon { width: 12px; height: 12px; color: var(--accent-foreground); stroke-width: 3; }

.review__meta { flex: 1; }

.review__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.review__name { font-weight: 600; color: var(--foreground); }

.review__vehicle { font-size: 0.75rem; color: var(--muted-foreground); }

.review__stars { display: flex; align-items: center; gap: 0.125rem; }

.review__stars .icon { width: 1rem; height: 1rem; fill: currentColor; color: var(--accent); }

.review__text {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-top: 0.75rem;
}

.review__date {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  opacity: 0.6;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   14. 常见问题
   -------------------------------------------------------------------------- */
.faq {
  max-width: 48rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq__item {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq__item[open] {
  box-shadow: var(--shadow-brand);
  border-color: var(--primary-20);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q:hover { background-color: var(--secondary-50); }

.faq__q-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.faq__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background-color: var(--primary-10);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__q-text {
  font-weight: 500;
  color: var(--foreground);
  text-align: left;
}

.faq__chevron {
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq__a {
  padding: 0 1.25rem 1.25rem;
}

.faq__a-inner {
  padding-left: 2.25rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}

.faq__foot {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.faq__foot a {
  color: var(--primary);
  font-weight: 600;
}

.faq__foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. 在线预约
   -------------------------------------------------------------------------- */
.booking {
  padding-block: 5rem;
  background-image: linear-gradient(135deg, var(--primary-05), var(--primary-10));
}

.booking__card {
  background-color: var(--card);
  border-radius: 1rem;
  box-shadow: var(--shadow-brand-lg);
  padding: 2rem;
}

@media (min-width: 768px) {
  .booking__card { padding: 3rem; }
}

.booking__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .booking__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.field__label .icon { width: 1rem; height: 1rem; color: var(--primary); }

.field__req { color: var(--destructive); }

.field__control {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--input);
  background-color: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px 0 #0f172a0d;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field__control::placeholder { color: var(--muted-foreground); }

.field__control:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring);
}

.field__control:disabled { cursor: not-allowed; opacity: 0.5; }

select.field__control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367788d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
}

textarea.field__control {
  height: auto;
  min-height: 60px;
  padding-block: 0.5rem;
  resize: vertical;
  line-height: 1.5;
}

.field__error {
  font-size: 0.875rem;
  color: var(--destructive);
}

.field__control.is-invalid { border-color: var(--destructive); }

.booking__alert {
  text-align: center;
  font-size: 0.875rem;
  color: var(--destructive);
  background-color: var(--destructive);
  background-color: #d02e1e1a;
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.booking__submit { height: 56px; font-size: 1.125rem; }

.booking__submit .icon { width: 1.25rem; height: 1.25rem; }

.booking__hint {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.booking__success {
  background-color: var(--card);
  border-radius: 1rem;
  box-shadow: var(--shadow-brand-lg);
  padding: 3rem;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.booking__success-icon {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background-color: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.booking__success-icon .icon { width: 40px; height: 40px; color: var(--green-600); stroke-width: 2; }

.booking__success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.booking__success p { color: var(--muted-foreground); margin-bottom: 0.5rem; }

.booking__success .btn { margin-top: 2rem; }

.booking__container--narrow { max-width: 896px; }

@keyframes spin { to { transform: rotate(360deg); } }

.spin { animation: spin 1s linear infinite; }

/* --------------------------------------------------------------------------
   16. 页脚
   -------------------------------------------------------------------------- */
.site-footer {
  background-image: linear-gradient(to bottom, var(--slate-900), var(--slate-950));
  color: var(--slate-300);
}

.site-footer__main {
  padding-block: 4rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer-brand__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.footer-brand__mark {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #3275b4, #3275b4b3);
  background-image: linear-gradient(135deg, var(--primary), #3275b4b3);
  box-shadow: var(--shadow-brand);
}

.footer-brand__mark span { color: #fff; font-weight: 700; font-size: 1.25rem; }

.footer-brand__name { color: #fff; font-weight: 700; font-size: 1.25rem; }

.footer-brand__domain { font-size: 0.75rem; color: var(--slate-400); }

.footer-brand__desc {
  color: var(--slate-400);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.footer-brand__tagline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.footer-brand__tagline .icon { width: 1rem; height: 1rem; color: var(--primary); }

.footer-col__title {
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-400);
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-links a .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: var(--slate-600);
  transition: background-color 0.2s ease;
}

.footer-links a:hover { color: var(--primary); }
.footer-links a:hover .dot { background-color: var(--primary); }

.footer-services {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-services li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-400);
  font-size: 0.875rem;
}

.footer-services .icon { width: 0.875rem; height: 0.875rem; color: var(--primary); }

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--slate-400);
}

a.footer-contact__item:hover .footer-contact__value { color: var(--primary); }

.footer-contact__icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background-color: var(--slate-800);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.footer-contact__icon .icon { width: 20px; height: 20px; color: var(--primary); }

a.footer-contact__item:hover .footer-contact__icon { background-color: var(--primary-20); }

.footer-contact__label { font-size: 0.75rem; color: var(--slate-500); }

.footer-contact__value { color: #fff; }
.footer-contact__value--strong { font-weight: 600; }

.site-footer__bottom {
  border-top: 1px solid var(--slate-800);
}

.site-footer__bottom-inner {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__bottom-inner {
    flex-direction: row;
    text-align: left;
  }
}

.site-footer__copy { color: var(--slate-500); font-size: 0.875rem; }

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--slate-500);
}

.site-footer__legal a { transition: color 0.2s ease; }
.site-footer__legal a:hover { color: var(--primary); }

/* --------------------------------------------------------------------------
   17. 滚动显示动画
   -------------------------------------------------------------------------- */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}

html.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float { animation: float 3s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   18. 无障碍与降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .slide,
  .slide__arrow,
  .slider__dot,
  .service,
  .station,
  .plan,
  .review {
    transition: none;
  }

  .slide { transform: none; }
  .hero__cta:hover { transform: none; }
  .animate-float { animation: none; }
}

/* --------------------------------------------------------------------------
   N. 区县落地页（/{slug}/）
   -------------------------------------------------------------------------- */
/* 首屏：复用 .hero__bg / .hero__blobs 深色渐变层，仅调整内边距与对齐 */
.area-hero {
  position: relative;
  overflow: hidden;
  padding-block: 7.5rem 5rem;
}

@media (min-width: 1024px) {
  .area-hero { padding-block: 9rem 6rem; }
}

.area-hero__inner {
  position: relative;
  z-index: 10;
}

/* 面包屑（深色背景上的浅色样式） */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--white-70);
  opacity: 0.45;
}

.breadcrumb a {
  color: var(--white-70);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: var(--white-90); }

.area-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--white-70);
}

.area-hero__eyebrow .icon { width: 1rem; height: 1rem; }

.area-hero__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .area-hero__title { font-size: 3rem; }
}

.area-hero__accent { color: var(--brand-orange-light); }

.area-hero__lead {
  max-width: 46rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--white-90);
}

.area-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 46rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .area-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.area-facts li {
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background-color: var(--white-10);
  border: 1px solid var(--white-20);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
}

.area-facts strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.area-facts strong small {
  margin-left: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-70);
}

.area-facts span { font-size: 0.75rem; color: var(--white-70); }

.area-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* 正文介绍区 */
.area-intro p {
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--secondary-foreground);
}

.area-intro p:last-child { margin-bottom: 0; }

.area-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background-color: var(--accent-10);
  border: 1px solid #e4621233;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--brand-orange-dark);
}

.area-note .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.2rem;
}

/* 材料清单 */
.area-materials {
  margin-top: 3rem;
  padding: 1.75rem;
}

.area-materials__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.area-materials__title .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary);
}

.area-materials__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .area-materials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.area-materials__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--secondary-foreground);
}

.area-materials__list .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--green-600);
}

.area-materials__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* 服务区域互链网格 */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .area-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.area-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .area-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .area-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.area-card a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.area-card a:hover {
  border-color: var(--primary-20);
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}

.area-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
}

.area-card__kind {
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background-color: var(--primary-10);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 500;
}

.area-card__count { font-size: 0.75rem; color: var(--muted-foreground); }

.area-card--current a {
  border-color: var(--primary);
  box-shadow: var(--shadow-brand);
}

.area-card--current .area-card__name { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .area-card a { transition: none; }
  .area-card a:hover { transform: none; }
}

@media print {
  .site-header,
  .drawer,
  .slider__arrow,
  .slider__dots,
  .hero__cta,
  .booking__form { display: none; }

  body { color: #000; background: #fff; }
}