/* ============================================
       CSS Custom Properties
    ============================================ */
    :root {
      --blue-900: #1a5c4a;
      --blue-800: #1d6b57;
      --blue-700: #238a70;
      --blue-600: #2ea887;
      --blue-500: #48b5a0;
      --blue-400: #6ac7b5;
      --blue-300: #95d9cc;
      --blue-200: #bde8df;
      --blue-100: #ddf4ef;
      --blue-50: #effaf7;

      --sky-400: #5eb7a7;
      --sky-300: #8fcec2;
      --sky-100: #ddf4ef;

      --warm-900: #7c2d12;
      --warm-700: #c2410c;
      --warm-500: #f97316;
      --warm-400: #fb923c;
      --warm-200: #fed7aa;
      --warm-100: #ffedd5;
      --warm-50: #fff7ed;

      --rose-600: #e11d48;
      --rose-500: #f43f5e;
      --rose-100: #ffe4e6;
      --rose-50: #fff1f2;

      --slate-900: #0f172a;
      --slate-800: #1e293b;
      --slate-700: #334155;
      --slate-600: #475569;
      --slate-500: #64748b;
      --slate-400: #94a3b8;
      --slate-300: #cbd5e1;
      --slate-200: #e2e8f0;
      --slate-100: #f1f5f9;
      --slate-50: #f8fafc;

      --white: #ffffff;

      --gradient-primary: linear-gradient(135deg, #48b5a0, #2ea887);
      --gradient-warm: linear-gradient(135deg, #f97316, #fb923c);
      --gradient-bg: linear-gradient(180deg, #effaf7 0%, #f8fafc 40%, #fff7ed 100%);

      --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      --font-display: 'Noto Serif SC', 'ZCOOL XiaoWei', 'Georgia', 'Songti SC', serif;

      --max-w: 1120px;
      --gap: clamp(1rem, 4vw, 2rem);
      --section-py: clamp(3rem, 8vh, 6rem);
      --radius: 16px;
      --radius-sm: 10px;
      --radius-xl: 24px;
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
      --shadow: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
      --shadow-lg: 0 8px 32px rgba(15, 23, 42, .1), 0 2px 8px rgba(15, 23, 42, .06);
      --shadow-xl: 0 20px 60px rgba(15, 23, 42, .14);
      --shadow-blue: 0 8px 32px rgba(72, 181, 160, .2);
      --glass-bg: rgba(255,255,255,.6);
      --glass-border: rgba(255,255,255,.8);
      --glass-shadow: 0 8px 32px rgba(15,23,42,.06);
      --ease-out-expo: cubic-bezier(.22,1,.36,1);
    }

    /* ============================================
       Grain Texture Overlay
    ============================================ */
    .grain-overlay {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9999;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 256px 256px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.7;
      color: var(--slate-800);
      background: var(--gradient-bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--gap);
    }

    /* ============================================
       Typography
    ============================================ */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--blue-500);
      background: var(--blue-100);
      padding: 5px 16px;
      border-radius: 20px;
      margin-bottom: 1rem;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(72,181,160,.15);
    }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 4vw, 2.25rem);
      font-weight: 700;
      color: var(--slate-900);
      line-height: 1.3;
      margin-bottom: .75rem;
    }
    .section-subtitle {
      font-size: clamp(.95rem, 2vw, 1.1rem);
      color: var(--slate-500);
      max-width: 600px;
      line-height: 1.7;
    }
    .center-text { text-align: center; }
    .center-text .section-subtitle { margin: 0 auto .75rem; }

    /* ============================================
       Buttons
    ============================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .95rem;
      font-weight: 600;
      padding: 14px 28px;
      border-radius: 100px;
      transition: all .35s var(--ease-out-expo);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.12);
      opacity: 0;
      transition: opacity .35s;
    }
    .btn:hover::after { opacity: 1; }
    .btn-primary {
      background: var(--gradient-primary);
      color: var(--white);
      box-shadow: var(--shadow-blue);
    }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 16px 48px rgba(72, 181, 160, .35);
    }
    .btn-primary:active {
      transform: translateY(-1px) scale(.98);
    }
    .btn-outline {
      border: 1.5px solid var(--slate-300);
      color: var(--slate-700);
      background: var(--white);
    }
    .btn-outline:hover {
      border-color: var(--blue-400);
      color: var(--blue-600);
      background: var(--blue-50);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    .btn-lg {
      font-size: 1.05rem;
      padding: 16px 36px;
    }
    .btn-sm {
      font-size: .85rem;
      padding: 10px 18px;
    }

    /* ============================================
       Navigation
    ============================================ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255,255,255,.8);
      backdrop-filter: blur(20px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s, box-shadow .3s;
    }
    .nav.scrolled {
      background: rgba(255,255,255,.95);
      border-bottom-color: var(--slate-200);
      box-shadow: 0 1px 8px rgba(0,0,0,.04);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav-logo-img {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
    }
    .nav-logo-text {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--blue-700);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(.5rem, 1.5vw, 1.5rem);
    }
    .nav-links a {
      font-size: .875rem;
      font-weight: 500;
      color: var(--slate-600);
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--blue-600); }
    .nav-cta { margin-left: .5rem; }

    .hamburger {
      display: none;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }
    .hamburger span {
      width: 20px;
      height: 2px;
      background: var(--slate-700);
      border-radius: 2px;
      transition: all .3s;
    }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(20px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      z-index: 99;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--slate-700);
    }
    .mobile-menu .btn { margin-top: 1rem; }

    /* ============================================
       Hero
    ============================================ */
    .hero {
      padding: 120px 0 80px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 800px;
      background: radial-gradient(ellipse at center, rgba(72, 181, 160, .08) 0%, rgba(189, 232, 223, .05) 40%, transparent 70%);
      pointer-events: none;
    }
    .hero-bg-2 {
      position: absolute;
      bottom: -120px;
      right: -80px;
      width: 400px;
      height: 400px;
      background: radial-gradient(ellipse at center, rgba(249, 115, 22, .04) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-logo {
      width: 88px;
      height: 88px;
      border-radius: 22px;
      object-fit: cover;
      margin: 0 auto 1.25rem;
      display: block;
      box-shadow: 0 8px 32px rgba(72, 181, 160, .2), 0 2px 8px rgba(72, 181, 160, .1);
      animation: heroLogoIn .7s var(--ease-out-expo) both;
    }
    @keyframes heroLogoIn {
      0% { transform: scale(.8) translateY(20px); opacity: 0; }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    .hero-fade-up {
      animation: heroFadeUp .7s var(--ease-out-expo) both;
    }
    @keyframes heroFadeUp {
      0% { transform: translateY(20px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 900;
      color: var(--slate-900);
      line-height: 1.25;
      margin-bottom: 1rem;
    }
    .hero h1 .highlight {
      background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero h1 .highlight-warm {
      background: linear-gradient(135deg, var(--warm-500), var(--warm-400));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero p {
      font-size: clamp(1rem, 2vw, 1.15rem);
      color: var(--slate-500);
      max-width: 560px;
      margin: 0 auto 1.5rem;
      line-height: 1.7;
    }
    .hero-stats {
      display: flex;
      justify-content: center;
      gap: clamp(1.5rem, 4vw, 3rem);
      margin: 2.5rem 0;
      flex-wrap: wrap;
    }
    .hero-stat {
      text-align: center;
    }
    .hero-stat-num {
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 800;
      color: var(--blue-600);
      line-height: 1;
    }
    .hero-stat-label {
      font-size: .8rem;
      color: var(--slate-400);
      margin-top: 4px;
    }
    .hero-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .hero-pain {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .75rem;
      margin: 2rem 0 1.5rem;
    }
    .hero-pain-item {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--rose-50);
      border: 1px solid var(--rose-100);
      padding: 6px 14px;
      border-radius: 100px;
      font-size: .82rem;
      color: var(--rose-600);
      font-weight: 500;
    }

    /* ============================================
       Pain → Solution Section
    ============================================ */
    .pain-section {
      padding: var(--section-py) 0;
      background: var(--white);
      position: relative;
    }
    .pain-section::before {
      content: '';
      position: absolute;
      top: -2px;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, transparent 0%, var(--blue-200) 20%, var(--blue-400) 50%, var(--blue-200) 80%, transparent 100%);
      opacity: .4;
    }
    .pain-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 2rem;
    }
    .pain-card {
      background: var(--glass-bg);
      border-radius: var(--radius);
      padding: 1.5rem;
      border: 1px solid var(--glass-border);
      transition: all .35s var(--ease-out-expo);
      backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow);
    }
    .pain-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--blue-200);
    }
    .pain-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .pain-card-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
      pointer-events: none;
    }
    .pain-card-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); }
    .pain-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: .5rem;
      color: var(--slate-900);
    }
    .pain-card .pain-text {
      font-size: .88rem;
      color: var(--rose-600);
      margin-bottom: .5rem;
      font-weight: 500;
    }
    .pain-card .solution-text {
      font-size: .85rem;
      color: var(--blue-600);
      font-weight: 500;
    }
    .pain-card p {
      font-size: .85rem;
      color: var(--slate-500);
      line-height: 1.6;
    }

    /* ============================================
       Features
    ============================================ */
    .features-section {
      padding: var(--section-py) 0;
      position: relative;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1rem, 2vw, 1.5rem);
      margin-top: 3rem;
    }
    .feature-card {
      background: var(--glass-bg);
      border-radius: var(--radius);
      padding: 2rem 1.5rem;
      border: 1px solid var(--glass-border);
      transition: all .35s var(--ease-out-expo);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow);
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient-primary);
      opacity: 0;
      transition: opacity .35s;
    }
    .feature-card::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 70% 30%, rgba(72,181,160,.04), transparent 60%);
      pointer-events: none;
    }
    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--blue-200);
    }
    .feature-card:hover::before { opacity: 1; }
    .icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; }
    .icon-sm { width: 1.2em; height: 1.2em; }
    .icon-md { width: 1.5em; height: 1.5em; }
    .icon-lg { width: 2em; height: 2em; }

    .feature-icon,
    .feature-card h3,
    .feature-card p,
    .feature-tag { position: relative; z-index: 1; }
    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .feature-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
      pointer-events: none;
    }
    .feature-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); }

    .feature-icon.icon-voice   { background: linear-gradient(135deg, #14b8a6, #0d9488); }
    .feature-icon.icon-sun     { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .feature-icon.icon-touch   { background: linear-gradient(135deg, #a855f7, #7c3aed); }
    .feature-icon.icon-chart   { background: linear-gradient(135deg, #f43f5e, #e11d48); }
    .feature-icon.icon-doc     { background: linear-gradient(135deg, #6366f1, #4f46e5); }
    .feature-icon.icon-shield  { background: linear-gradient(135deg, #10b981, #059669); }

    .feature-icon.icon-pain-moon    { background: linear-gradient(135deg, #6366f1, #4f46e5); }
    .feature-icon.icon-pain-plus    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
    .feature-icon.icon-pain-sleep   { background: linear-gradient(135deg, #f97316, #ea580c); }
    .feature-icon.icon-pain-lock    { background: linear-gradient(135deg, #ec4899, #db2777); }

    .feature-icon.icon-trust-shield { background: linear-gradient(135deg, #14b8a6, #0d9488); }
    .feature-icon.icon-trust-grid   { background: linear-gradient(135deg, #f97316, #ea580c); }
    .feature-icon.icon-trust-target { background: linear-gradient(135deg, #6366f1, #4f46e5); }

    .feature-icon.icon-research-bar    { background: linear-gradient(135deg, #f43f5e, #e11d48); }
    .feature-icon.icon-research-grid   { background: linear-gradient(135deg, #14b8a6, #0d9488); }
    .feature-icon.icon-research-search { background: linear-gradient(135deg, #a855f7, #7c3aed); }
    .feature-icon.icon-research-globe  { background: linear-gradient(135deg, #6366f1, #4f46e5); }
    .feature-icon.icon-research-edit   { background: linear-gradient(135deg, #f59e0b, #d97706); }
    .feature-icon.icon-research-user   { background: linear-gradient(135deg, #10b981, #059669); }
    .feature-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: .5rem;
    }
    .feature-card p {
      font-size: .85rem;
      color: var(--slate-500);
      line-height: 1.6;
    }
    .feature-tag {
      display: inline-block;
      font-size: .7rem;
      font-weight: 600;
      color: var(--blue-500);
      background: var(--blue-100);
      padding: 2px 10px;
      border-radius: 100px;
      margin-bottom: .75rem;
    }

    /* ============================================
       The Report (Core Value)
    ============================================ */
    .report-section {
      padding: var(--section-py) 0;
      background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
      position: relative;
      overflow: hidden;
    }
    .report-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(72, 181, 160, .06), transparent 70%);
      pointer-events: none;
    }
    .report-section::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(249, 115, 22, .03), transparent 70%);
      pointer-events: none;
    }
    .report-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .report-mockup {
      background: var(--glass-bg);
      border-radius: var(--radius-xl);
      padding: 2rem;
      border: 1px solid var(--glass-border);
      position: relative;
      backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow), 0 4px 24px rgba(72, 181, 160, .08);
    }
    .report-mockup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .report-mockup-title {
      font-size: .85rem;
      font-weight: 700;
      color: var(--slate-900);
    }
    .report-badge {
      font-size: .7rem;
      background: var(--warm-100);
      color: var(--warm-700);
      padding: 3px 10px;
      border-radius: 100px;
      font-weight: 600;
    }
    .report-mockup-item {
      display: flex;
      justify-content: space-between;
      padding: .75rem 0;
      border-bottom: 1px solid var(--slate-200);
      font-size: .85rem;
    }
    .report-mockup-item:last-child { border-bottom: none; }
    .report-mockup-label { color: var(--slate-500); }
    .report-mockup-value { font-weight: 600; color: var(--slate-900); }
    .report-mockup-chart {
      margin: 1rem 0;
      height: 60px;
      display: flex;
      align-items: flex-end;
      gap: 4px;
    }
    .report-bar {
      flex: 1;
      background: var(--blue-200);
      border-radius: 4px 4px 0 0;
      transition: height .5s;
      height: calc(20% + var(--h, 0) * 1%);
    }
    .report-bar.active { background: var(--warm-400); }
    .report-bar:nth-child(1) { height: 30%; }
    .report-bar:nth-child(2) { height: 25%; }
    .report-bar:nth-child(3) { height: 55%; }
    .report-bar:nth-child(4) { height: 80%; }
    .report-bar:nth-child(5) { height: 90%; --h: 10; }
    .report-bar:nth-child(6) { height: 95%; }
    .report-bar:nth-child(7) { height: 70%; }
    .report-bar:nth-child(8) { height: 45%; }
    .report-bar:nth-child(9) { height: 35%; }
    .report-bar:nth-child(10) { height: 20%; }
    .report-bar.active:nth-child(3),
    .report-bar.active:nth-child(4),
    .report-bar.active:nth-child(5),
    .report-bar.active:nth-child(6),
    .report-bar.active:nth-child(7) { background: var(--warm-400); }

    .report-mockup-audio {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-sm);
      padding: .75rem 1rem;
      margin-top: 1rem;
    }
    .report-audio-wave {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 1;
      height: 24px;
    }
    .report-audio-wave span {
      width: 3px;
      height: var(--h, 16px);
      background: var(--blue-400);
      border-radius: 2px;
      transform-origin: bottom center;
      animation: wave 1s ease-in-out infinite;
      animation-delay: var(--d, 0s);
      will-change: transform;
    }
    @keyframes wave {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(.4); }
    }
    .report-audio-label {
      font-size: .75rem;
      color: var(--slate-500);
      font-weight: 500;
    }

    .report-benefits {
      list-style: none;
      margin-top: 1.5rem;
    }
    .report-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: .9rem;
      color: var(--slate-600);
      margin-bottom: .75rem;
    }
    .report-benefits .check {
      color: var(--blue-500);
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ============================================
       How It Works
    ============================================ */
    .how-section {
      padding: var(--section-py) 0;
      position: relative;
    }
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
      position: relative;
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 40px;
      left: calc(16.67% + 1rem);
      right: calc(16.67% + 1rem);
      height: 2px;
      background: linear-gradient(90deg, var(--blue-200), var(--blue-400), var(--blue-200));
      z-index: 0;
    }
    .step {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .step-number {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      font-weight: 800;
      margin: 0 auto 1rem;
      background: var(--gradient-primary);
      color: var(--white);
      box-shadow: 0 4px 16px rgba(72, 181, 160, .25);
    }
    .step h3 {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: .5rem;
    }
    .step p {
      font-size: .85rem;
      color: var(--slate-500);
      line-height: 1.6;
      max-width: 260px;
      margin: 0 auto;
    }

    /* ============================================
       Privacy / Trust
    ============================================ */
    .trust-section {
      padding: var(--section-py) 0;
      background: var(--blue-50);
    }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.5rem;
    }
    .trust-card {
      background: var(--glass-bg);
      border-radius: var(--radius);
      padding: 1.5rem;
      border: 1px solid var(--glass-border);
      text-align: center;
      backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow);
      transition: all .35s var(--ease-out-expo);
    }
    .trust-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: var(--blue-200);
    }
    .trust-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: .75rem;
      color: #fff;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
    }
    .trust-card-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
      pointer-events: none;
    }
    .trust-card-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); }
    .trust-card h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: .5rem;
    }
    .trust-card p {
      font-size: .85rem;
      color: var(--slate-500);
      line-height: 1.6;
    }
    .trust-notice {
      margin-top: 2.5rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius);
      padding: 1.5rem;
      text-align: center;
      backdrop-filter: blur(12px);
      box-shadow: var(--glass-shadow);
    }
    .trust-notice h3 {
      font-size: .95rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: .5rem;
    }
    .trust-notice p {
      font-size: .85rem;
      color: var(--slate-500);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ============================================
       FAQ
    ============================================ */
    .faq-section {
      padding: var(--section-py) 0;
      background: var(--white);
    }
    .faq-list {
      max-width: 680px;
      margin: 2.5rem auto 0;
    }
    .faq-item {
      border-bottom: 1px solid var(--slate-200);
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 1.25rem 0;
      font-size: .95rem;
      font-weight: 600;
      color: var(--slate-800);
      text-align: left;
      background: none;
      border: none;
      cursor: pointer;
      gap: 1rem;
    }
    .faq-question:hover { color: var(--blue-600); }
    .faq-arrow {
      font-size: .8rem;
      transition: transform .3s;
      color: var(--slate-400);
      flex-shrink: 0;
    }
    .faq-item.open .faq-arrow { transform: rotate(180deg); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease, padding .3s ease;
      padding: 0;
    }
    .faq-item.open .faq-answer {
      max-height: 300px;
      padding-bottom: 1.25rem;
    }
    .faq-answer p {
      font-size: .875rem;
      color: var(--slate-500);
      line-height: 1.7;
    }

    /* ============================================
       CTA
    ============================================ */
    .cta-section {
      padding: var(--section-py) 0;
      background: linear-gradient(135deg, #1a5c4a 0%, #2ea887 40%, #48b5a0 100%);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section .cta-glow-1,
    .cta-section .cta-glow-2 {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .cta-section .cta-glow-1 {
      top: -120px;
      left: -80px;
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
    }
    .cta-section .cta-glow-2 {
      bottom: -100px;
      right: -60px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
    }

    .cta-section h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 4vw, 2.25rem);
      font-weight: 700;
      color: var(--white);
      margin-bottom: .75rem;
      position: relative;
    }
    .cta-section p {
      font-size: 1rem;
      color: rgba(255,255,255,.85);
      max-width: 480px;
      margin: 0 auto 1.5rem;
      position: relative;
    }
    .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      position: relative;
    }
    .cta-section .btn {
      background: var(--white);
      color: var(--blue-600);
      font-weight: 700;
    }
    .cta-section .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(0,0,0,.15);
    }
    .cta-section .btn-outline-light {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.4);
      color: var(--white);
    }
    .cta-section .btn-outline-light:hover {
      border-color: rgba(255,255,255,.8);
      background: rgba(255,255,255,.1);
    }

    /* Waitlist Form */
    .waitlist-form {
      display: flex;
      justify-content: center;
      position: relative;
    }
    .waitlist-card {
      background: rgba(255,255,255,.15);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: var(--radius-xl);
      padding: 2rem 2rem 1.5rem;
      width: 100%;
      max-width: 440px;
      text-align: left;
      transition: all .35s var(--ease-out-expo);
    }
    .waitlist-card:hover {
      background: rgba(255,255,255,.2);
      border-color: rgba(255,255,255,.35);
    }
    .waitlist-input-group {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,.9);
      border: 1.5px solid rgba(255,255,255,.4);
      border-radius: var(--radius-sm);
      padding: 0 16px;
      margin-bottom: 12px;
      transition: border-color .2s, box-shadow .2s;
    }
    .waitlist-input-group:focus-within {
      border-color: var(--white);
      box-shadow: 0 0 0 3px rgba(255,255,255,.2);
      background: #fff;
    }
    .waitlist-input-icon {
      font-size: 1.1rem;
      flex-shrink: 0;
      opacity: .7;
    }
    .waitlist-input-group input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-size: .95rem;
      font-family: inherit;
      padding: 14px 0;
      color: var(--slate-800);
    }
    .waitlist-input-group input::placeholder {
      color: var(--slate-400);
    }
    .waitlist-submit {
      width: 100%;
      padding: 14px;
      background: var(--white);
      color: var(--blue-600);
      font-size: 1rem;
      font-weight: 700;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: all .3s var(--ease-out-expo);
      font-family: inherit;
      margin-top: 4px;
    }
    .waitlist-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(0,0,0,.15);
    }
    .waitlist-submit:active {
      transform: translateY(0);
    }
    .waitlist-submit:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none !important;
    }
    .waitlist-tip {
      font-size: .78rem;
      color: rgba(255,255,255,.6);
      text-align: center;
      margin-top: 1rem;
      position: relative;
    }
    .waitlist-download-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 36px;
      background: var(--white);
      color: var(--blue-600);
      font-size: 1.05rem;
      font-weight: 700;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      transition: all .3s var(--ease-out-expo);
      font-family: inherit;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
    }
    .waitlist-download-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(0,0,0,.2);
    }
    .waitlist-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 1.25rem;
    }
    .waitlist-divider::before,
    .waitlist-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,.2);
    }
    .waitlist-divider span {
      font-size: .78rem;
      color: rgba(255,255,255,.5);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .waitlist-result {
      margin-top: 1rem;
      text-align: center;
      font-size: .9rem;
      font-weight: 500;
      padding: 10px;
      border-radius: var(--radius-sm);
      display: none;
    }
    .waitlist-result.success {
      display: block;
      background: rgba(16,185,129,.15);
      color: #a7f3d0;
      border: 1px solid rgba(16,185,129,.3);
    }
    .waitlist-result.error {
      display: block;
      background: rgba(239,68,68,.15);
      color: #fecaca;
      border: 1px solid rgba(239,68,68,.3);
    }
    /* Waitlist Type Tabs */
    .waitlist-type-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }
    .waitlist-type-btn {
      flex: 1;
      padding: 10px;
      border: 1.5px solid rgba(255,255,255,.3);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.1);
      color: rgba(255,255,255,.7);
      font-size: .88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .25s var(--ease-out-expo);
      font-family: inherit;
      text-align: center;
    }
    .waitlist-type-btn:hover {
      background: rgba(255,255,255,.2);
      border-color: rgba(255,255,255,.5);
    }
    .waitlist-type-btn.active {
      background: rgba(255,255,255,.95);
      color: var(--blue-600);
      border-color: var(--white);
      box-shadow: 0 4px 12px rgba(0,0,0,.1);
    }
    .waitlist-progress-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 100px;
      color: rgba(255,255,255,.8);
      font-size: .82rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .25s var(--ease-out-expo);
      font-family: inherit;
    }
    .waitlist-progress-btn:hover {
      background: rgba(255,255,255,.2);
      border-color: rgba(255,255,255,.45);
      color: #fff;
    }

    /* Waitlist Success Modal */
    .waitlist-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 1rem;
      animation: modalFadeIn .3s var(--ease-out-expo);
    }
    .waitlist-modal-overlay.show {
      display: flex;
    }
    .waitlist-modal {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 2.5rem 2rem 2rem;
      width: 100%;
      max-width: 360px;
      text-align: center;
      box-shadow: 0 24px 64px rgba(15,23,42,.15);
      animation: modalBounceIn .4s var(--ease-out-expo);
    }
    .waitlist-modal-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
      animation: modalPop .5s var(--ease-out-expo) .1s both;
    }
    .waitlist-modal-title {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--slate-900);
      margin-bottom: .5rem;
    }
    .waitlist-modal-desc {
      font-size: .9rem;
      color: var(--slate-500);
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }
    .waitlist-modal-btn {
      padding: 12px 40px;
      background: var(--gradient-primary);
      color: var(--white);
      border: none;
      border-radius: 100px;
      font-size: .95rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .3s var(--ease-out-expo);
      font-family: inherit;
      box-shadow: var(--shadow-blue);
    }
    .waitlist-modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(72,181,160,.35);
    }
    @keyframes modalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes modalBounceIn {
      0% { transform: scale(.9); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes modalPop {
      0% { transform: scale(0); }
      60% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

    /* Share & Progress */
    .progress-bar-wrap {
      margin: 1rem 0 .5rem;
    }
    .progress-bar-bg {
      width: 100%;
      height: 10px;
      background: var(--slate-200);
      border-radius: 100px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #48b5a0, #2ea887);
      border-radius: 100px;
      transition: width .6s var(--ease-out-expo);
    }
    .progress-label {
      font-size: .85rem;
      color: var(--slate-600);
      font-weight: 600;
      margin-top: .35rem;
    }
    .share-desc {
      font-size: .82rem;
      color: var(--slate-500);
      margin-bottom: 1rem;
    }
    .share-url-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--slate-50);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      margin-bottom: .75rem;
    }
    .share-url-box code {
      flex: 1;
      font-size: .78rem;
      color: var(--slate-600);
      word-break: break-all;
      font-family: monospace;
    }
    .copy-btn {
      flex-shrink: 0;
      padding: 6px 14px;
      background: var(--gradient-primary);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }
    .copy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(72,181,160,.3); }
    .copy-btn.copied { background: #059669; }
    .share-btn {
      width: 100%;
      padding: 10px;
      background: var(--slate-100);
      color: var(--slate-700);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-sm);
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
      margin-bottom: .75rem;
    }
    .share-btn:hover { background: var(--slate-200); }
    .share-guide {
      text-align: left;
      background: var(--warm-50);
      border: 1px solid var(--warm-200);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      margin-bottom: .5rem;
    }
    .share-guide p {
      font-size: .82rem;
      color: var(--warm-700);
      margin-bottom: 4px;
      line-height: 1.6;
    }
    .share-guide p:last-child { margin-bottom: 0; }
    .waitlist-modal .btn-outline-light {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,.4);
      color: var(--white);
    }
    .waitlist-modal .btn-outline-light:hover {
      border-color: rgba(255,255,255,.8);
      background: rgba(255,255,255,.1);
    }

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

    /* ============================================
       Footer
    ============================================ */
    .footer {
      padding: 2.5rem 0;
      background: var(--slate-50);
      border-top: 1px solid var(--slate-200);
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-brand-img {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      object-fit: cover;
    }
    .footer-brand-text {
      font-size: .85rem;
      font-weight: 700;
      color: var(--slate-600);
    }
    .footer-copy {
      font-size: .8rem;
      color: var(--slate-400);
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-copy {
      font-size: .8rem;
      color: var(--slate-400);
    }
    .footer-links {
      display: flex;
      gap: 1rem;
    }
    .footer-links a {
      font-size: .8rem;
      color: var(--slate-400);
      transition: color .2s;
    }
    .footer-links a:hover { color: var(--blue-500); }

    /* ============================================
       Scroll Animation
    ============================================ */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }
    .reveal-delay-5 { transition-delay: .5s; }

    /* ============================================
       Responsive
    ============================================ */
    @media (max-width: 900px) {
      .pain-grid { grid-template-columns: 1fr; }
      .features-grid { grid-template-columns: 1fr 1fr; }
      .report-grid { grid-template-columns: 1fr; }
      .report-mockup { order: -1; }
      .steps { grid-template-columns: 1fr; }
      .steps::before { display: none; }
      .trust-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 640px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }

      .hero { padding: 100px 0 60px; }
      .hero-stats { gap: 1rem; }

      .features-grid { grid-template-columns: 1fr; }
      .trust-grid { grid-template-columns: 1fr; }

      .step { max-width: 320px; margin: 0 auto; }

      .footer-inner { flex-direction: column; text-align: center; }
    }

    /* ===== 功能分组标题 ===== */
    .feature-group-head {
      display: flex;
      align-items: center;
      gap: .85rem;
      flex-wrap: wrap;
      margin: 2.6rem 0 1.4rem;
    }
    .feature-group-head .group-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 50%;
      background: var(--blue-50);
      color: var(--blue-600);
      font-weight: 800;
      font-size: .95rem;
      flex: none;
    }
    .feature-group-head h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--slate-900);
      margin: 0;
    }
    .feature-group-head p {
      margin: 0;
      flex-basis: 100%;
      font-size: .9rem;
      color: var(--slate-500);
      padding-left: 2.95rem;
    }
    @media (max-width: 640px) {
      .feature-group-head p { padding-left: 0; }
    }

    /* ===== 护理时序（一场咳嗽，陪你走完） ===== */
    .journey {
      position: relative;
      margin-top: 3rem;
      display: grid;
      gap: .9rem;
    }
    .journey::before {
      content: '';
      position: absolute;
      left: 1.35rem;
      top: .8rem;
      bottom: .8rem;
      width: 2px;
      background: linear-gradient(180deg, var(--blue-100), var(--warm-100));
    }
    .journey-item {
      position: relative;
      display: grid;
      grid-template-columns: 2.7rem 1fr;
      gap: 1rem;
      align-items: start;
    }
    .journey-dot {
      position: relative;
      z-index: 1;
      width: 2.7rem;
      height: 2.7rem;
      border-radius: 50%;
      background: var(--white);
      border: 1px solid var(--slate-200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      font-weight: 700;
      color: var(--blue-600);
      box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    }
    .journey-body {
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: var(--radius-sm);
      padding: 1rem 1.15rem;
    }
    .journey-body h4 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--slate-900);
      margin: 0 0 .3rem;
    }
    .journey-body p {
      font-size: .88rem;
      color: var(--slate-600);
      line-height: 1.7;
      margin: 0;
    }
    .journey-when {
      display: inline-block;
      font-size: .72rem;
      font-weight: 600;
      color: var(--blue-500);
      margin-bottom: .35rem;
    }

    /* ===== 语言切换 ===== */
    .nav-lang {
      font-size: .85rem;
      font-weight: 600;
      color: var(--slate-500);
      padding: 5px 10px;
      border-radius: 100px;
      border: 1px solid var(--slate-200);
      line-height: 1.2;
      transition: all .2s ease;
    }
    .nav-lang:hover { color: var(--blue-600); border-color: var(--blue-300, #93c5fd); }

    /* ==========================================================
       精修层（在不改变原设计语言的前提下做质感与节奏优化）
       ========================================================== */

    /* 锚点不再被固定导航遮住 */
    html { scroll-padding-top: 96px; }
    section[id], div[id="main"] { scroll-margin-top: 96px; }

    /* 键盘可达性 */
    a:focus-visible, button:focus-visible,
    .faq-question:focus-visible, input:focus-visible {
      outline: 2px solid var(--blue-600);
      outline-offset: 3px;
      border-radius: 8px;
    }

    /* 中文排版：标题平衡换行，正文避免孤字 */
    .hero h1, .section-title, .cta-section h2, .trust-card h3, .feature-card h3, .pain-card h3 {
      text-wrap: balance;
    }
    p, li { text-wrap: pretty; }

    /* 标题层级：900 太重，收紧字距更耐看 */
    .hero h1 {
      font-weight: 800;
      line-height: 1.22;
      letter-spacing: -.01em;
    }
    .section-title {
      letter-spacing: -.01em;
      line-height: 1.25;
    }
    .section-subtitle {
      max-width: 46ch;
      margin-left: auto;
      margin-right: auto;
      color: var(--slate-500);
      line-height: 1.8;
    }
    .section-label { letter-spacing: 1.6px; }

    /* 卡片：统一边框/圆角/内距，加一层轻微的“抬起”反馈 */
    .pain-card, .feature-card, .trust-card, .report-mockup, .waitlist-card {
      border-color: rgba(148, 163, 184, .22);
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
      transition: transform .4s var(--ease-out-expo),
                  box-shadow .4s var(--ease-out-expo),
                  border-color .4s var(--ease-out-expo);
    }
    .pain-card:hover, .feature-card:hover, .trust-card:hover {
      transform: translateY(-3px);
      border-color: rgba(72, 181, 160, .35);
      box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 16px 40px rgba(15, 23, 42, .09);
    }
    .feature-card h3, .pain-card h3, .trust-card h3 { line-height: 1.45; }
    .feature-card p, .pain-card p, .trust-card p { line-height: 1.78; }

    /* 图标块：去掉生硬边界，加一点内阴影 */
    .feature-icon, .pain-card-icon, .trust-card-icon {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(15, 23, 42, .10);
    }

    /* Hero：收紧节奏，主按钮更有分量 */
    .hero { padding: 128px 0 88px; }
    .hero-logo { width: 60px; height: 60px; margin-bottom: 1.25rem; }
    .hero h1 { margin-bottom: 1.1rem; }
    .hero p.hero-fade-up {
      max-width: 620px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.85;
      color: var(--slate-600);
    }
    .hero-pain { gap: .5rem; margin-top: 1.5rem; }
    .hero-pain-item {
      padding: 6px 12px;
      font-size: .8rem;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    .hero-buttons { gap: .75rem; margin-top: 1.75rem; }
    .btn-primary {
      box-shadow: 0 8px 24px rgba(46, 168, 135, .28);
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(46, 168, 135, .34);
    }
    .btn { transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), background .3s var(--ease-out-expo), color .3s var(--ease-out-expo); }
    .btn:active { transform: translateY(1px) scale(.995); }
    .hero-note {
      margin-top: 1rem;
      font-size: .82rem;
      color: var(--slate-500);
      letter-spacing: .01em;
    }
    .hero-stats {
      margin-top: 2.5rem;
      padding-top: 1.75rem;
      border-top: 1px solid rgba(148, 163, 184, .25);
    }

    /* 就诊参考预览：数字对齐，更接近真实报表 */
    .report-mockup { padding: 1.75rem; border-radius: var(--radius-xl); }
    .report-mockup-item { padding: .55rem 0; }
    .report-mockup-value { font-variant-numeric: tabular-nums; }
    .report-bar, .report-bar.active { border-radius: 4px 4px 2px 2px; }
    .report-mockup-header { padding-bottom: .9rem; }

    /* 步骤：编号做成圆形徽章 */
    .step-number {
      box-shadow: 0 6px 18px rgba(46, 168, 135, .22);
      font-weight: 700;
    }

    /* FAQ：箭头旋转 + 开合更顺 */
    .faq-arrow { transition: transform .35s var(--ease-out-expo); display: inline-block; }
    .faq-item.open .faq-arrow { transform: rotate(180deg); }
    .faq-question:hover { color: var(--blue-700); }

    /* 进场：距离收一点，节奏更稳 */
    .reveal { transition-duration: .75s; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal, .hero-logo, .hero-fade-up { transition: none !important; animation: none !important; }
      .pain-card:hover, .feature-card:hover, .trust-card:hover, .btn-primary:hover { transform: none; }
    }

    /* 移动端：字号与点击区域 */
    @media (max-width: 640px) {
      .hero { padding: 108px 0 64px; }
      .hero h1 { font-size: clamp(1.75rem, 8vw, 2.1rem); }
      .hero p.hero-fade-up { font-size: .95rem; }
      .hero-buttons { width: 100%; flex-direction: column; }
      .hero-buttons .btn { width: 100%; }
      .nav-cta { display: none; }
      .btn { padding: 13px 22px; }
      .faq-question { padding: 1.1rem 0; }
    }

    /* 导航当前区块 */
    .nav-links a[aria-current="true"] {
      color: var(--blue-700);
      position: relative;
    }
    .nav-links a[aria-current="true"]::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2px;
      width: 4px;
      height: 4px;
      margin-left: -2px;
      border-radius: 50%;
      background: var(--blue-500);
    }