:root{
    /* 主色：精炼深绿系 */
    --forest-950:#041a13;
    --forest-900:#062a20;
    --forest-800:#0a3d2e;
    --forest-700:#0f5340;
    --forest-600:#146b50;
    --forest-500:#1a7a5e;
    --forest-400:#3a9a7e;
    --forest-300:#5fae93;
    --forest-200:#a3d4c1;
    --forest-100:#d7ebe1;
    --forest-50:#edf6f1;
    /* 中性：冷静 slate 系 */
    --slate-50:#f8f9f8;
    --slate-100:#f1f3f1;
    --slate-200:#e4e8e5;
    --slate-300:#cdd4cf;
    --slate-400:#9aa6a0;
    --slate-500:#6b7670;
    --slate-600:#4a544f;
    --slate-700:#333b37;
    --slate-800:#1f2522;
    --slate-900:#131815;
    /* 文本 */
    --ink-900:#0f1411;
    --ink-800:#1f2522;
    --ink-700:#333b37;
    --ink-500:#6b7670;
    --ink-400:#9aa6a0;
    --ink-300:#bcc4be;
    /* 警示：克制的赭橙 */
    --warn-700:#8a3a22;
    --warn-600:#a84a2e;
    --warn-500:#c2633f;
    --warn-400:#d97757;
    --warn-300:#eca688;
    --warn-100:#f7e0d4;
    --warn-50:#fcf1ec;
    /* 安全色 */
    --safe-700:#2d5a3d;
    --safe-500:#4a8b5f;
    --safe-100:#d4e6da;
    /* 阴影：更克制 */
    --shadow-xs:0 1px 2px rgba(15,20,17,0.04), 0 1px 1px rgba(15,20,17,0.03);
    --shadow-sm:0 1px 3px rgba(15,20,17,0.05), 0 1px 2px rgba(15,20,17,0.04);
    --shadow-md:0 2px 8px rgba(15,20,17,0.06), 0 1px 3px rgba(15,20,17,0.04);
    --shadow-lg:0 8px 28px rgba(15,20,17,0.08), 0 2px 8px rgba(15,20,17,0.04);
    --shadow-xl:0 24px 56px rgba(15,20,17,0.10), 0 4px 16px rgba(15,20,17,0.04);
    --shadow-focus:0 0 0 3px rgba(26,122,94,0.18);
    /* 圆角：更统一的尺度 */
    --radius-xs:4px;
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-xl:18px;
    --radius-2xl:24px;
    /* 间距系统 */
    --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
    --space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
    --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
    /* 缓动 */
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-std:cubic-bezier(0.4, 0, 0.2, 1);
    --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:'JetBrains Mono', 'SF Mono', Menlo, monospace;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--font-sans);
    background:var(--slate-50);
    color:var(--ink-900);
    line-height:1.55;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
  }
  /* 数字等宽 */
  .num,.slider-value,.stat-num,.result-value,.grade-range,.dist-val,.dist-label{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1, "lnum" 1;
  }

  /* ---------- 导航 ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    border-bottom:1px solid rgba(15,20,17,0.06);
    transition:box-shadow .3s var(--ease-std);
  }
  /* 毛玻璃放在伪元素上：避免 backdrop-filter 使 .nav 成为内部 fixed 弹层的包含块 */
  .nav::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:rgba(248,249,248,0.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
  .nav-inner{
    max-width:1240px;margin:0 auto;
    padding:12px 32px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--forest-800)}
  .brand-mark{
    width:30px;height:30px;border-radius:var(--radius-md);
    background:var(--forest-800);
    display:flex;align-items:center;justify-content:center;
    color:var(--slate-50);font-weight:600;font-family:var(--font-serif);font-size:15px;
    box-shadow:var(--shadow-xs);
    letter-spacing:0;
  }
  .brand-name{font-family:var(--font-serif);font-weight:600;font-size:17px;letter-spacing:-0.015em;color:var(--ink-900)}
  .brand-sub{font-size:11px;color:var(--ink-400);font-weight:400;margin-left:8px;letter-spacing:0.02em}
  .nav-links{display:flex;gap:2px;list-style:none;align-items:center}
  .nav-links a{
    text-decoration:none;color:var(--ink-700);
    font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
    padding:8px 13px;border-radius:var(--radius-md);
    transition:color .15s var(--ease-std), background .15s var(--ease-std);
  }
  .nav-links a:hover{background:var(--slate-100);color:var(--forest-800)}
  .nav-cta{
    background:var(--forest-800);color:var(--slate-50);
    padding:9px 16px;border-radius:var(--radius-md);
    text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
    transition:background .15s var(--ease-std), transform .15s var(--ease-out);
  }
  .nav-cta:hover{background:var(--forest-900);transform:translateY(-0.5px)}

  /* 导航下载按钮 + 弹窗二维码 */
  .nav-download{
    position:relative;
  }
  .nav-download-btn{
    background:var(--forest-800);color:var(--slate-50);
    padding:9px 14px 9px 12px;border-radius:var(--radius-md);
    text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:-0.005em;
    display:inline-flex;align-items:center;gap:7px;
    transition:background .15s var(--ease-std), transform .15s var(--ease-out);
    border:none;cursor:pointer;font-family:var(--font-sans);
  }
  .nav-download-btn:hover{background:var(--forest-900);transform:translateY(-0.5px)}
  .nav-download-btn svg{width:14px;height:14px;flex-shrink:0}
  .nav-download-btn .arrow-tip{
    width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;
    border-top:3px solid currentColor;opacity:0.6;margin-left:2px;transition:transform .2s var(--ease-std);
  }
  .nav-download:hover .nav-download-btn .arrow-tip{transform:rotate(180deg)}
  .nav-download-popup{
    position:absolute;top:calc(100% + 12px);right:0;
    background:#fff;border:1px solid var(--slate-200);
    border-radius:var(--radius-lg);padding:18px;
    box-shadow:var(--shadow-lg);
    width:240px;text-align:center;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s var(--ease-std), transform .2s var(--ease-out), visibility .2s;
    z-index:101;
  }
  .nav-download:hover .nav-download-popup,
  .nav-download:focus-within .nav-download-popup{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .nav-download-popup::before{
    content:"";position:absolute;top:-6px;right:24px;
    width:12px;height:12px;background:#fff;
    border-left:1px solid var(--slate-200);border-top:1px solid var(--slate-200);
    transform:rotate(45deg);
  }
  .nav-download-popup .qr-label{
    font-size:11px;color:var(--ink-500);font-weight:600;
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;
  }
  .nav-download-popup .qr-title{
    font-family:var(--font-serif);font-size:14px;font-weight:600;
    color:var(--ink-900);margin-bottom:12px;letter-spacing:-0.01em;
  }
  .nav-download-popup .qr-hint{
    font-size:11px;color:var(--ink-400);margin-top:10px;line-height:1.5;
  }
  /* 移动端底部弹层专用元素，桌面端隐藏 */
  .nav-mask{display:none}
  .nav-sheet-handle{display:none}
  .nav-popup-close{display:none}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--forest-800);padding:6px}

  /* ---------- Hero ---------- */
  .hero{
    padding:132px 32px 96px;
    background:
      radial-gradient(circle at 90% 15%, rgba(194,99,63,0.06), transparent 45%),
      radial-gradient(circle at 10% 85%, rgba(26,122,94,0.05), transparent 45%),
      linear-gradient(180deg, var(--slate-50) 0%, var(--slate-100) 100%);
    position:relative;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(to right, rgba(15,20,17,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,20,17,0.025) 1px, transparent 1px);
    background-size:80px 80px;
    background-position:-1px -1px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 70%);
    pointer-events:none;
  }
  .hero-inner{
    max-width:1240px;margin:0 auto;position:relative;z-index:1;
    display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
  }
  .hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--forest-50);color:var(--forest-700);
    padding:5px 12px 5px 10px;border-radius:999px;
    font-size:11.5px;font-weight:600;letter-spacing:0.06em;
    text-transform:uppercase;margin-bottom:28px;
    border:1px solid var(--forest-100);
  }
  .hero-eyebrow::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--forest-500);display:inline-block;
    box-shadow:0 0 0 3px rgba(26,122,94,0.15);
  }
  .hero h1{
    font-family:var(--font-serif);
    font-size:clamp(38px, 5.2vw, 68px);
    font-weight:600;line-height:1.04;letter-spacing:-0.028em;
    color:var(--ink-900);margin-bottom:24px;
  }
  .hero h1 em{
    font-style:italic;font-weight:500;
    background:linear-gradient(110deg, var(--forest-600) 0%, var(--warn-500) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p.lead{
    font-size:17.5px;color:var(--ink-700);
    max-width:540px;margin-bottom:36px;line-height:1.6;
    letter-spacing:-0.005em;
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
  .btn-primary{
    background:var(--forest-800);color:var(--slate-50);
    padding:13px 22px;border-radius:var(--radius-md);
    text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:-0.005em;
    display:inline-flex;align-items:center;gap:8px;
    transition:background .2s var(--ease-std), transform .2s var(--ease-out), box-shadow .2s var(--ease-std);
    box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .btn-primary:hover{background:var(--forest-900);transform:translateY(-1px);box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.08)}
  .btn-primary:active{transform:translateY(0)}
  .btn-ghost{
    background:var(--slate-50);color:var(--forest-800);
    padding:13px 20px;border-radius:var(--radius-md);
    text-decoration:none;font-weight:600;font-size:14.5px;letter-spacing:-0.005em;
    border:1px solid var(--slate-300);
    transition:all .15s var(--ease-std);
  }
  .btn-ghost:hover{background:var(--slate-100);border-color:var(--slate-400)}
  .hero-meta{display:flex;gap:40px;flex-wrap:wrap;color:var(--ink-500);font-size:12.5px;letter-spacing:0.01em}
  .hero-meta strong{display:block;color:var(--forest-800);font-size:22px;font-family:var(--font-serif);font-weight:600;margin-bottom:2px;letter-spacing:-0.02em}

  /* 脊柱视觉 */
  .spine-visual{
    position:relative;height:540px;
    display:flex;align-items:center;justify-content:center;
  }
  .spine-canvas{
    width:100%;max-width:400px;height:100%;
    background:linear-gradient(180deg, #fff, var(--slate-100));
    border:1px solid var(--slate-200);
    border-radius:var(--radius-2xl);
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow-lg);
    position:relative;overflow:hidden;
  }
  .spine-canvas::before{
    content:"";position:absolute;top:16px;left:16px;right:16px;
    height:1px;background:linear-gradient(90deg, transparent, var(--slate-300), transparent);
  }
  .spine-canvas::after{
    content:"SPINE · ANATOMICAL VIEW";
    position:absolute;top:20px;left:20px;
    font-family:var(--font-mono);font-size:9.5px;font-weight:500;
    color:var(--ink-400);letter-spacing:0.15em;
  }
  .spine-svg{width:100%;height:100%}
  .spine-label{
    position:absolute;background:#fff;
    border:1px solid var(--slate-200);
    padding:6px 11px;border-radius:var(--radius-md);
    font-size:11.5px;color:var(--ink-700);font-weight:500;letter-spacing:-0.005em;
    box-shadow:var(--shadow-sm);
    display:flex;align-items:center;gap:8px;
  }
  .spine-label.cobb{top:18%;right:-24px}
  .spine-label.atr{bottom:22%;left:-24px}
  .spine-label .dot{width:7px;height:7px;border-radius:50%}
  .spine-label.cobb .dot{background:var(--warn-500)}
  .spine-label.atr .dot{background:var(--forest-500)}

  /* ---------- 通用 section ---------- */
  section{padding:96px 32px;scroll-margin-top:72px}
  .container{max-width:1240px;margin:0 auto}
  .section-head{margin-bottom:56px;max-width:680px}
  .section-eyebrow{
    color:var(--forest-600);font-size:11.5px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;
    margin-bottom:16px;display:flex;align-items:center;gap:10px;
  }
  .section-eyebrow::after{
    content:"";width:32px;height:1px;background:var(--forest-300);
  }
  .section-title{
    font-family:var(--font-serif);
    font-size:clamp(30px, 3.6vw, 44px);
    font-weight:500;letter-spacing:-0.025em;
    color:var(--ink-900);line-height:1.12;margin-bottom:18px;
  }
  .section-sub{font-size:16.5px;color:var(--ink-500);line-height:1.6;letter-spacing:-0.005em}

  /* ---------- 工具卡片网格 ---------- */
  .tools-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  }
  .tool-card{
    background:#fff;border:1px solid var(--slate-200);
    border-radius:var(--radius-lg);padding:28px 28px 24px;
    transition:border-color .2s var(--ease-std), box-shadow .2s var(--ease-std), transform .2s var(--ease-out);
    position:relative;overflow:hidden;
  }
  .tool-card:hover{
    border-color:var(--forest-200);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
  }
  .tool-card::before{
    content:"";position:absolute;top:0;left:0;width:32px;height:2px;
    background:var(--forest-500);
    transition:width .3s var(--ease-out);
  }
  .tool-card:hover::before{width:100%}
  .tool-index{
    position:absolute;top:24px;right:28px;
    font-family:var(--font-mono);font-size:11px;font-weight:500;
    color:var(--ink-400);letter-spacing:0.05em;
  }
  .tool-icon{
    width:40px;height:40px;border-radius:var(--radius-md);
    background:var(--forest-50);color:var(--forest-700);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;font-family:var(--font-serif);font-weight:600;font-size:17px;
    border:1px solid var(--forest-100);
  }
  .tool-card h3{
    font-family:var(--font-serif);font-size:21px;font-weight:600;
    color:var(--ink-900);margin-bottom:8px;letter-spacing:-0.015em;
  }
  .tool-card p{color:var(--ink-500);font-size:14.5px;margin-bottom:20px;line-height:1.55;letter-spacing:-0.005em}
  .tool-meta{display:flex;gap:14px;font-size:12px;color:var(--ink-500);padding-top:16px;border-top:1px solid var(--slate-100)}
  .tool-meta span{display:inline-flex;align-items:center;gap:6px}
  .tool-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--forest-400)}

  /* ---------- 工具区 ---------- */
  .tool-section{
    background:linear-gradient(180deg, var(--slate-100) 0%, var(--slate-50) 100%);
    border-top:1px solid var(--slate-200);
  }
  .tool-layout{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;
  }
  .tool-panel{
    background:#fff;border:1px solid var(--slate-200);
    border-radius:var(--radius-xl);padding:32px;
    box-shadow:var(--shadow-sm);
  }
  .tool-panel h3{
    font-family:var(--font-serif);font-size:22px;font-weight:600;
    color:var(--ink-900);margin-bottom:6px;letter-spacing:-0.015em;
  }
  .tool-panel .desc{color:var(--ink-500);font-size:13.5px;margin-bottom:28px;line-height:1.55;letter-spacing:-0.005em}

  /* 输入控件 */
  .field{margin-bottom:20px}
  .field label{
    display:block;font-size:12.5px;font-weight:600;letter-spacing:0.01em;
    color:var(--ink-700);margin-bottom:8px;
  }
  .field .hint{font-size:11.5px;color:var(--ink-400);font-weight:400;margin-top:6px;letter-spacing:-0.005em}
  .field input[type="number"],.field select,.field input[type="text"]{
    width:100%;padding:10px 13px;font-size:14.5px;
    border:1px solid var(--slate-300);border-radius:var(--radius-md);
    background:var(--slate-50);color:var(--ink-900);
    font-family:var(--font-sans);transition:all .15s var(--ease-std);
    letter-spacing:-0.005em;
  }
  .field input:focus,.field select:focus{
    outline:none;border-color:var(--forest-500);
    background:#fff;box-shadow:var(--shadow-focus);
  }
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* 角度滑块 */
  .slider-wrap{display:flex;align-items:center;gap:14px}
  .slider-wrap input[type="range"]{
    flex:1;-webkit-appearance:none;appearance:none;
    height:4px;border-radius:2px;
    background:linear-gradient(to right, var(--forest-500) 0%, var(--forest-500) var(--p,50%), var(--slate-200) var(--p,50%), var(--slate-200) 100%);
    outline:none;cursor:pointer;
  }
  .slider-wrap input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:18px;height:18px;border-radius:50%;
    background:#fff;cursor:pointer;
    border:1px solid var(--forest-600);
    box-shadow:var(--shadow-sm);
    transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-std);
  }
  .slider-wrap input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:var(--shadow-md), var(--shadow-focus)}
  .slider-wrap input[type="range"]::-moz-range-thumb{
    width:18px;height:18px;border-radius:50%;
    background:#fff;cursor:pointer;
    border:1px solid var(--forest-600);
    box-shadow:var(--shadow-sm);
  }
  .slider-value{
    font-family:var(--font-mono);font-weight:600;font-size:15px;
    color:var(--forest-800);min-width:64px;text-align:right;
    letter-spacing:-0.01em;
  }

  /* 结果显示 */
  .result-box{
    background:var(--ink-900);
    color:var(--slate-50);
    border-radius:var(--radius-lg);padding:24px;
    margin-top:8px;position:relative;overflow:hidden;
  }
  .result-box::before{
    content:"";position:absolute;top:0;left:0;bottom:0;width:3px;
    background:var(--forest-500);
  }
  .result-label{font-size:11px;color:var(--ink-400);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;font-weight:500}
  .result-value{
    font-family:var(--font-serif);font-size:44px;font-weight:500;
    line-height:1;letter-spacing:-0.03em;color:#fff;
  }
  .result-value .unit{font-size:18px;color:var(--ink-400);margin-left:6px;font-weight:400}
  .result-tag{
    display:inline-block;margin-top:14px;padding:5px 11px;
    background:rgba(255,255,255,0.08);border-radius:var(--radius-sm);
    font-size:12px;font-weight:500;letter-spacing:0.01em;
    border:1px solid rgba(255,255,255,0.1);
  }
  .result-tag.warn{background:rgba(194,99,63,0.18);color:var(--warn-300);border-color:rgba(194,99,63,0.3)}
  .result-tag.safe{background:rgba(74,139,95,0.18);color:#a8d4b4;border-color:rgba(74,139,95,0.3)}
  .result-note{font-size:12.5px;color:var(--ink-400);margin-top:14px;line-height:1.6;letter-spacing:-0.005em}

  /* ---------- ATR 工具视觉 ---------- */
  .atr-viz{
    background:linear-gradient(135deg, var(--slate-50), #fff);
    border-radius:var(--radius-lg);
    padding:28px;text-align:center;
    border:1px solid var(--slate-200);
    margin-bottom:20px;
  }
  .atr-diagram{display:block;margin:0 auto;max-width:280px}

  /* ---------- 分级表 ---------- */
  .grade-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;
  }
  .grade-cell{
    background:var(--slate-50);border:1px solid var(--slate-200);
    border-radius:var(--radius-md);padding:14px 12px;text-align:center;
    transition:all .2s var(--ease-std);
  }
  .grade-cell.active{
    background:var(--ink-900);color:var(--slate-50);
    border-color:var(--ink-900);
    box-shadow:var(--shadow-md);
  }
  .grade-cell.active::after{
    content:"";display:block;width:24px;height:2px;background:var(--forest-400);margin:8px auto 0;
  }
  .grade-cell .grade-name{font-size:11px;font-weight:600;color:inherit;opacity:0.6;text-transform:uppercase;letter-spacing:0.08em}
  .grade-cell .grade-range{font-family:var(--font-mono);font-size:12.5px;margin-top:6px;color:inherit;font-weight:500}
  .grade-cell.active .grade-name{opacity:0.7}
  .grade-cell.active .grade-range{opacity:1;color:#fff}

  /* 治疗建议列表 */
  .advice-list{list-style:none;margin-top:20px}
  .advice-list li{
    padding:14px 16px 14px 48px;
    background:var(--slate-50);border:1px solid var(--slate-200);
    border-radius:var(--radius-md);margin-bottom:8px;
    position:relative;font-size:13.5px;color:var(--ink-700);line-height:1.55;
    transition:all .15s var(--ease-std);letter-spacing:-0.005em;
  }
  .advice-list li:hover{border-color:var(--slate-300);background:#fff;box-shadow:var(--shadow-xs)}
  .advice-list li::before{
    content:"";position:absolute;left:16px;top:18px;
    width:14px;height:14px;border-radius:50%;
    background:var(--forest-50);
    border:1.5px solid var(--forest-500);
  }
  .advice-list li::after{
    content:"";position:absolute;left:22px;top:24px;
    width:2px;height:2px;border-radius:50%;background:var(--forest-600);
  }
  .advice-list li.high::before{background:var(--warn-50);border-color:var(--warn-500)}
  .advice-list li.high::after{background:var(--warn-600)}
  .advice-list li strong{color:var(--ink-900);font-weight:600}

  /* ---------- 教育内容 ---------- */
  .edu-section{background:var(--slate-100)}
  .edu-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }
  .edu-card{
    background:#fff;border-radius:var(--radius-lg);overflow:hidden;
    border:1px solid var(--slate-200);
    transition:all .25s var(--ease-std);
    display:flex;flex-direction:column;
  }
  .edu-card:hover{box-shadow:var(--shadow-md);border-color:var(--slate-300);transform:translateY(-2px)}
  .edu-illust{
    height:140px;background:linear-gradient(135deg, var(--forest-50), var(--slate-100));
    display:flex;align-items:center;justify-content:center;
    color:var(--forest-700);position:relative;
    border-bottom:1px solid var(--slate-200);
  }
  .edu-illust::before{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(to right, rgba(15,20,17,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,20,17,0.04) 1px, transparent 1px);
    background-size:24px 24px;
    pointer-events:none;
  }
  .edu-illust svg{position:relative;z-index:1}
  .edu-body{padding:24px;flex:1;display:flex;flex-direction:column}
  .edu-body h4{
    font-family:var(--font-serif);font-size:18px;font-weight:600;
    color:var(--ink-900);margin:12px 0 10px;letter-spacing:-0.015em;
  }
  .edu-body p{color:var(--ink-500);font-size:13.5px;line-height:1.6;margin-bottom:16px;letter-spacing:-0.005em}
  .edu-tag{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 10px 3px 8px;background:var(--forest-50);
    color:var(--forest-700);font-size:10.5px;font-weight:600;
    border-radius:999px;letter-spacing:0.08em;text-transform:uppercase;
    border:1px solid var(--forest-100);
  }
  .edu-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--forest-500)}
  .edu-body a{
    margin-top:auto;color:var(--forest-700);font-weight:600;
    text-decoration:none;font-size:13px;letter-spacing:-0.005em;
    display:inline-flex;align-items:center;gap:6px;
    transition:gap .2s var(--ease-std);
  }
  .edu-body a:hover{gap:10px;color:var(--forest-900)}

  /* ---------- 数据可视化 ---------- */
  .stats-section{background:var(--ink-900);color:var(--slate-100);position:relative;overflow:hidden}
  .stats-section::before{
    content:"";position:absolute;top:-30%;right:-15%;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(26,122,94,0.10), transparent 65%);
  }
  .stats-section::after{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.015) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
  }
  .stats-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    position:relative;z-index:1;
  }
  .stat-card{
    padding:8px 24px 8px 0;
    border-left:1px solid rgba(255,255,255,0.06);
    padding-left:24px;
  }
  .stat-card:first-child{border-left:none;padding-left:0}
  .stat-num{
    font-family:var(--font-serif);font-size:46px;font-weight:500;
    color:var(--slate-50);line-height:1;letter-spacing:-0.03em;
  }
  .stat-num .pct{font-size:22px;color:var(--ink-400);margin-left:4px;font-weight:400}
  .stat-desc{margin-top:10px;font-size:13px;color:var(--ink-400);line-height:1.55;letter-spacing:-0.005em}

  /* 分布条形图 */
  .dist-chart{margin-top:56px;position:relative;z-index:1;padding-top:32px;border-top:1px solid rgba(255,255,255,0.06)}
  .dist-title{
    font-family:var(--font-serif);font-size:20px;font-weight:500;
    color:var(--slate-50);margin-bottom:24px;letter-spacing:-0.015em;
  }
  .dist-row{display:flex;align-items:center;gap:16px;margin-bottom:10px}
  .dist-label{width:120px;font-size:13px;color:var(--ink-400);letter-spacing:-0.005em}
  .dist-bar{
    flex:1;height:28px;background:rgba(255,255,255,0.04);
    border-radius:var(--radius-sm);overflow:hidden;position:relative;
    border:1px solid rgba(255,255,255,0.04);
  }
  .dist-fill{
    height:100%;border-radius:var(--radius-sm);
    transition:width 1.2s var(--ease-out);
    background:linear-gradient(90deg, var(--forest-700), var(--forest-500));
  }
  .dist-fill.warn{background:linear-gradient(90deg, var(--warn-700), var(--warn-500))}
  .dist-fill::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:2px;
    background:rgba(255,255,255,0.15);
  }
  .dist-val{
    width:50px;text-align:right;
    font-family:var(--font-mono);font-size:12.5px;color:var(--slate-50);font-weight:500;
  }

  /* ---------- App 下载区 ---------- */
  .download-section{
    background:linear-gradient(135deg, var(--forest-900) 0%, var(--forest-800) 100%);
    color:var(--slate-100);
    position:relative;overflow:hidden;
    padding:96px 32px;
  }
  .download-section::before{
    content:"";position:absolute;top:-20%;right:-10%;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(58,154,126,0.15), transparent 65%);
    pointer-events:none;
  }
  .download-section::after{
    content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:64px 64px;
    pointer-events:none;
  }
  .download-inner{
    max-width:1240px;margin:0 auto;
    display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;
    position:relative;z-index:1;
  }
  .download-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.06);color:var(--forest-200);
    padding:5px 12px 5px 10px;border-radius:999px;
    font-size:11.5px;font-weight:600;letter-spacing:0.06em;
    text-transform:uppercase;margin-bottom:24px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .download-eyebrow::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--forest-400);display:inline-block;
    box-shadow:0 0 0 3px rgba(58,154,126,0.15);
  }
  .download-section h2{
    font-family:var(--font-serif);
    font-size:clamp(30px, 3.6vw, 44px);
    font-weight:500;line-height:1.12;letter-spacing:-0.025em;
    color:var(--slate-50);margin-bottom:20px;
  }
  .download-section h2 em{
    font-style:italic;font-weight:500;
    background:linear-gradient(110deg, var(--forest-300), var(--warn-400));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .download-section .lead{
    font-size:16.5px;color:var(--forest-200);
    max-width:480px;margin-bottom:36px;line-height:1.65;letter-spacing:-0.005em;
  }
  .download-features{
    display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
    margin-bottom:36px;max-width:480px;
  }
  .download-feature{
    display:flex;align-items:center;gap:10px;
    color:var(--forest-100);font-size:13.5px;letter-spacing:-0.005em;
  }
  .download-feature svg{width:16px;height:16px;color:var(--forest-300);flex-shrink:0}
  .platform-buttons{display:flex;gap:12px;flex-wrap:wrap}
  .platform-btn{
    display:inline-flex;align-items:center;gap:10px;
    background:#fff;color:var(--ink-900);
    padding:11px 18px;border-radius:var(--radius-md);
    text-decoration:none;font-weight:500;letter-spacing:-0.01em;
    transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-std);
    box-shadow:var(--shadow-md);
  }
  .platform-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .platform-btn svg{width:22px;height:22px;flex-shrink:0}
  .platform-btn .pb-text{display:flex;flex-direction:column;line-height:1.1}
  .platform-btn .pb-small{font-size:10px;color:var(--ink-500);letter-spacing:0.04em;font-weight:500}
  .platform-btn .pb-name{font-size:14px;font-weight:600;letter-spacing:-0.01em}

  /* 二维码卡片 */
  .qr-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-2xl);padding:32px;
    display:flex;flex-direction:column;align-items:center;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    position:relative;
  }
  .qr-card::before{
    content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;
    background:linear-gradient(90deg, transparent, var(--forest-300), transparent);
    opacity:0.5;
  }
  .qr-card-label{
    font-size:11px;color:var(--forest-300);font-weight:600;
    text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;
  }
  .qr-card-title{
    font-family:var(--font-serif);font-size:20px;font-weight:500;
    color:var(--slate-50);margin-bottom:24px;letter-spacing:-0.015em;
  }
  .qr-image{
    width:220px;height:220px;
    background:#fff;border-radius:var(--radius-md);
    padding:12px;box-shadow:var(--shadow-lg);
    position:relative;
  }
  .qr-image svg{width:100%;height:100%;display:block}
  .qr-image::after{
    content:"";position:absolute;inset:8px;border-radius:var(--radius-sm);
    box-shadow:0 0 0 1px var(--slate-200);
    pointer-events:none;
  }
  .qr-card-hint{
    margin-top:18px;font-size:13px;color:var(--forest-200);
    text-align:center;line-height:1.6;letter-spacing:-0.005em;
  }
  .qr-card-hint strong{color:var(--slate-50);font-weight:600}
  .qr-corner{
    position:absolute;width:14px;height:14px;
    border:2px solid var(--forest-300);
  }
  .qr-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
  .qr-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 4px 0 0}
  .qr-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 4px}
  .qr-corner.br{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 4px 0}

  /* ---------- 联系与免责声明 ---------- */
  .contact-section{
    padding:88px 32px;
    background:linear-gradient(180deg, var(--slate-50) 0%, #fff 100%);
  }
  .contact-inner{
    max-width:1240px;margin:0 auto;
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:24px;align-items:stretch;
  }
  .contact-card{
    background:#fff;
    border:1px solid var(--slate-200);
    border-radius:var(--radius-lg);
    padding:30px 28px;
    display:flex;flex-direction:column;gap:20px;
    box-shadow:var(--shadow-sm);
  }
  .contact-label{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:7px;
    font-size:11px;color:var(--forest-700);font-weight:600;
    text-transform:uppercase;letter-spacing:0.1em;
    background:var(--forest-50);border:1px solid var(--forest-100);
    padding:5px 12px;border-radius:999px;
  }
  .contact-label::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--forest-500);
  }
  .contact-person{
    display:flex;align-items:center;gap:14px;
  }
  .contact-avatar{
    width:48px;height:48px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, var(--forest-700), var(--forest-500));
    color:var(--slate-50);font-family:var(--font-serif);
    font-weight:600;font-size:17px;letter-spacing:-0.01em;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-xs);
  }
  .contact-info{display:flex;flex-direction:column;gap:3px}
  .contact-name{font-size:16px;font-weight:600;color:var(--ink-900);letter-spacing:-0.01em}
  .contact-role{font-size:12.5px;color:var(--ink-500);letter-spacing:0.01em}
  .contact-phone{
    margin-top:auto;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    text-decoration:none;color:var(--forest-800);
    font-family:var(--font-mono);font-weight:600;font-size:15px;
    background:var(--forest-50);padding:12px 16px;border-radius:var(--radius-md);
    border:1px solid var(--forest-100);
    transition:background .15s var(--ease-std), border-color .15s var(--ease-std), transform .15s var(--ease-out);
    letter-spacing:-0.01em;
  }
  .contact-phone:hover{background:var(--forest-100);border-color:var(--forest-200);transform:translateY(-1px)}
  .contact-phone svg{width:16px;height:16px;flex-shrink:0;color:var(--forest-600)}

  /* ---------- FAQ ---------- */
  .faq-section{padding:96px 32px}
  .faq-list{max-width:780px;margin:0 auto}
  .faq-item{
    border-bottom:1px solid var(--slate-200);
  }
  .faq-item:first-child{border-top:1px solid var(--slate-200)}
  .faq-q{
    width:100%;background:none;border:none;cursor:pointer;
    text-align:left;padding:22px 0;font-size:16.5px;font-weight:500;letter-spacing:-0.01em;
    color:var(--ink-900);font-family:var(--font-sans);
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    transition:color .15s var(--ease-std);
  }
  .faq-q:hover{color:var(--forest-700)}
  .faq-q .icon{
    width:22px;height:22px;border-radius:50%;
    background:var(--slate-100);color:var(--ink-700);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .25s var(--ease-out);font-weight:500;font-size:14px;
    border:1px solid var(--slate-200);
  }
  .faq-item.open .faq-q .icon{transform:rotate(45deg);background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
  .faq-a{
    max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease-std);
    color:var(--ink-500);font-size:14.5px;line-height:1.7;letter-spacing:-0.005em;
  }
  .faq-item.open .faq-a{max-height:400px;padding:0 0 22px 0}

  /* ---------- 免责声明 ---------- */
  .disclaimer{
    position:relative;
    background:linear-gradient(135deg, var(--warn-50) 0%, #fff 55%);
    border:1px solid var(--warn-100);
    border-radius:var(--radius-lg);
    padding:30px 28px;
    display:flex;gap:16px;align-items:flex-start;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  .disclaimer::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg, var(--warn-500), var(--warn-300));
  }
  .disclaimer-icon{
    width:42px;height:42px;flex-shrink:0;border-radius:50%;
    background:#fff;border:1px solid var(--warn-100);
    display:flex;align-items:center;justify-content:center;
    color:var(--warn-600);box-shadow:var(--shadow-xs);
  }
  .disclaimer-icon svg{width:21px;height:21px;display:block}
  .disclaimer-body{display:flex;flex-direction:column;gap:8px}
  .disclaimer strong{color:var(--warn-700);font-family:var(--font-serif);font-size:16px;display:block;letter-spacing:-0.01em}
  .disclaimer p{color:var(--ink-700);font-size:13.5px;line-height:1.7;letter-spacing:-0.005em}

  /* ---------- 页脚 ---------- */
  footer{
    background:var(--ink-900);color:var(--ink-400);
    padding:64px 32px 28px;
  }
  .footer-inner{max-width:1240px;margin:0 auto}
  .footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
    padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .footer-brand{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--slate-50);margin-bottom:14px;letter-spacing:-0.02em}
  .footer-desc{font-size:13px;line-height:1.65;max-width:340px;letter-spacing:-0.005em}
  .footer-col h5{color:var(--slate-300);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:18px}
  .footer-col ul{list-style:none}
  .footer-col li{margin-bottom:10px}
  .footer-col a{color:var(--ink-400);text-decoration:none;font-size:13.5px;transition:color .15s var(--ease-std);letter-spacing:-0.005em}
  .footer-col a:hover{color:var(--slate-50)}
  .footer-bottom{
    padding-top:24px;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-400);letter-spacing:0.01em;
  }

  /* ---------- 响应式 ---------- */
  @media (max-width: 960px){
    .hero{padding:120px 24px 80px}
    .hero-inner{grid-template-columns:1fr;gap:48px}
    .spine-visual{height:400px;max-width:340px;margin:0 auto;width:100%}
    section{padding:72px 24px}
    .tools-grid{grid-template-columns:1fr}
    .tool-layout{grid-template-columns:1fr;gap:24px}
    .edu-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
    .stat-card{padding-left:0;border-left:none}
    .stat-card:nth-child(odd){border-right:1px solid rgba(255,255,255,0.06)}
    .grade-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .contact-inner{grid-template-columns:1fr;gap:20px}
    .nav-links{display:none}
    .nav-links.open{
      display:flex;flex-direction:column;position:absolute;
      top:100%;left:0;right:0;background:#fff;
      padding:12px 24px;border-bottom:1px solid var(--slate-200);
      box-shadow:var(--shadow-lg);
      gap:2px;
    }
    .menu-btn{display:block}
    .nav-cta{display:none}
    .container{padding:0}
    .hero-meta{gap:28px}
    /* 移动端下载弹窗：底部全宽弹层（bottom sheet），显隐完全由 .open 控制 */
    .nav-mask{
      display:block;
      position:fixed;inset:0;z-index:100;
      background:rgba(15,20,17,0.45);
      opacity:0;visibility:hidden;
      transition:opacity .25s var(--ease-std), visibility .25s;
    }
    .nav-download.open .nav-mask{opacity:1;visibility:visible}
    .nav-download-popup{
      position:fixed;top:auto;bottom:0;left:0;right:0;
      width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
      padding:12px 24px 34px;
      opacity:1;visibility:visible;
      transform:translateY(100%);
      transition:transform .34s var(--ease-out);
      z-index:101;
    }
    .nav-download.open .nav-download-popup{transform:translateY(0)}
    /* 压制桌面端 hover/focus-within 规则，避免触摸粘滞导致弹窗意外弹出 */
    .nav-download:not(.open):hover .nav-download-popup,
    .nav-download:not(.open):focus-within .nav-download-popup{
      transform:translateY(100%);
    }
    .nav-download-popup::before{display:none}
    /* 抓手条 */
    .nav-sheet-handle{
      display:block;
      width:42px;height:4px;border-radius:99px;
      background:var(--slate-300);
      margin:0 auto 18px;
    }
    /* 关闭按钮 */
    .nav-popup-close{
      display:flex;align-items:center;justify-content:center;
      position:absolute;top:14px;right:18px;
      width:32px;height:32px;border-radius:50%;
      background:var(--slate-100);border:1px solid var(--slate-200);
      color:var(--ink-700);cursor:pointer;padding:0;
      transition:background .15s var(--ease-std);
    }
    .nav-popup-close:hover{background:var(--slate-200)}
    .nav-popup-close svg{width:16px;height:16px;display:block}
    /* 下载区 */
    .download-inner{grid-template-columns:1fr;gap:48px}
    .download-features{grid-template-columns:1fr 1fr;max-width:none}
    .qr-card{order:-1}
  }
  @media (max-width: 540px){
    .hero{padding:112px 20px 64px}
    section{padding:64px 20px}
    .hero h1{font-size:36px}
    .field-row{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:1fr;gap:20px}
    .stat-card{padding:0;border:none !important}
    .stat-card:not(:first-child){border-top:1px solid rgba(255,255,255,0.06);padding-top:20px}
    .grade-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .spine-label.cobb{right:8px}
    .spine-label.atr{left:8px}
    .tool-panel{padding:24px}
    .footer-bottom{flex-direction:column;align-items:flex-start}
    .download-section{padding:64px 20px}
    .qr-image{width:180px;height:180px}
    .qr-card{padding:24px}
    .download-features{grid-template-columns:1fr}
    .platform-btn{flex:1;justify-content:center}
    /* 联系区移动端 */
    .contact-section{padding:64px 20px}
    .contact-card,.disclaimer{padding:24px 20px}
    .contact-phone{width:100%}
  }

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