/* ═══════════════════════════════════════════════════════
   MEditor 官网共享样式（index.html 与 compare.html 共用）。
   ⚠️ 改设计只改这一处；两个页面都引它，不会再出现「换 token 漏改硬编码」。
   ═══════════════════════════════════════════════════════ */
    /* ═══════════════════════════════════════════════════════
       Design tokens
       Dark-first: near-black layered surfaces, one accent,
       hierarchy comes from light + space, not from hue.
       ═══════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* 暖白纸感：底是纸，面是纸，卡是稍亮的纸。层级靠亮度差（2~4%）而非色相。 */
      --bg:          #F6F4F0;   /* 纸 */
      --bg-2:        #EFEDE7;
      --surface:     #FCFBF9;
      --surface-2:   #F2F0EA;
      --hairline:    rgba(28,25,23,0.10);
      --hairline-2:  rgba(28,25,23,0.18);

      /* 墨黑：不用纯黑，带一点暖调的深棕黑 */
      --text:        #1C1A17;
      --text-2:      #5F5A52;
      --text-3:      #918B80;

      /* 点缀色。参考 Bear 实测值 #DD4C4F（珊瑚红）——
         与「朱红」的差别在于**饱和度与明度**：朱红是暗沉的土红，这个更亮更干净，
         在暖白纸上跳得出来却不刺眼。
         ⚠️ 用法约束：**只作点缀**（logo、下划线、小圆点、图标），
         不做大面积底色、不做按钮底、不做标题字色 —— 铺开就俗了。 */
      --accent:      #DD4C4F;
      --accent-lo:   #C63F42;
      --accent-hi:   #E86A6C;
      --accent-dim:  rgba(221,76,79,0.10);
      --accent-glow: rgba(221,76,79,0.18);

      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
      --font-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
      --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", monospace;

      --r-sm: 10px;
      --r:    16px;
      --r-lg: 22px;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --nav-h: 60px;
      --wrap: 1180px;
    }

    html { scroll-behavior: smooth; scroll-padding-top: 100px; }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: "cv02","cv03","cv04","ss01";
      line-height: 1.6;
    }

    /* 纸：底色 + 极淡的暖色不匀（模拟纸张纤维），无发光、无彩色光晕。 */
    .ambient {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.55)),
        radial-gradient(900px 600px at 92% 12%,  rgba(28,25,23,0.035), transparent 62%);
    }

    /* 纸纤维颗粒：细密、低对比，贴着纸看才有，远看是干净的底。
       用 multiply 而非 overlay —— overlay 在浅底上会提亮（发灰），multiply 才是真纸感。 */
    .grain {
      position: fixed; inset: 0; z-index: 9998; pointer-events: none;
      opacity: 0.42; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
    }

    .wrap {
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 0 32px;
      position: relative; z-index: 1;
    }

    /* ═══════════════ NAV ═══════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 32px;
      background: rgba(246,244,240,0.72);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border-bottom: 1px solid transparent;
      transition: background .3s var(--ease), border-color .3s var(--ease);
    }
    nav.scrolled {
      background: rgba(246,244,240,0.92);
      border-bottom-color: var(--hairline);
    }

    .nav-logo {
      display: flex; align-items: center; gap: 11px;
      font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
      color: var(--text); text-decoration: none;
    }
    .logo-mark {
      width: 29px; height: 29px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: #fff;
      background: var(--accent);
      box-shadow: none;
      color: #fff;
    }

    .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
    .nav-links a {
      color: var(--text-2); text-decoration: none; font-size: 14px;
      transition: color .2s var(--ease);
    }
    .nav-links a:hover { color: var(--text); }

    .nav-cta {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 17px; border-radius: 10px;
      font-size: 13.5px; font-weight: 550; text-decoration: none;
      color: var(--text);
      background: rgba(28,25,23,0.055);
      border: 1px solid var(--hairline-2);
      transition: background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
    }
    .nav-cta:hover { background: rgba(28,25,23,0.1); transform: translateY(-1px); }
    .nav-cta svg { opacity: .65; }

    /* ═══════════════ Hero entrance ═══════════════
       克制优雅：元素按「阅读顺序」依次浮起，最后窗口缓缓升起。
       全部走 transform + opacity（合成层，不触发布局），约 1.4s 收尾。
       prefers-reduced-motion 下整体关闭（见文件末尾）。          */
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
    /* 窗口升起：带轻微透视翻转，像从桌面上被托起来放正 */
    @keyframes windowRise {
      from { opacity: 0; transform: translateY(52px) perspective(1600px) rotateX(7deg) scale(0.965); }
      60%  { opacity: 1; }
      to   { opacity: 1; transform: none; }
    }
    /* 入场前的隐藏态。用 .js-ready 门控：无 JS 时不隐藏内容（渐进增强）。
       ⚠️ 入场动画只能作用在**内层** .shot 上：animation-fill-mode: forwards 会把
       from 的 transform 锁成最终值，若与滚动视差同元素，后者会被静默覆盖。 */
    .js-ready .hero-anim { opacity: 0; animation: riseIn 0.95s var(--ease) forwards; }
    .js-ready .hero-anim-1 { animation-delay: 0.05s; }
    .js-ready .hero-anim-2 { animation-delay: 0.16s; }
    .js-ready .hero-anim-3 { animation-delay: 0.27s; }
    .js-ready .hero-anim-4 { animation-delay: 0.38s; }
    .js-ready .hero-shot > .shot { opacity: 0; animation: windowRise 1.4s var(--ease) 0.52s forwards; }

    /* 滚动视差：文字层比截图层慢一点，制造纵深。
       transform 由 JS 每帧写 --py；只声明用哪个变量，值不设初值（无动画时不动）。 */
    .hero-inner { transform: translate3d(0, var(--py, 0px), 0); }
    .hero-shot  { transform: translate3d(0, var(--py-shot, 0px), 0); }
    /* 只在动画真正在跑时提升合成层，动画结束后撤掉（will-change 常驻是内存浪费） */
    @media (prefers-reduced-motion: no-preference) {
      .js-ready .hero-inner, .js-ready .hero-shot { will-change: transform; }
    }

    /* ═══════════════ Shared atoms ═══════════════ */
    .btn {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 13px 24px; border-radius: 13px;
      font-size: 15px; font-weight: 550; letter-spacing: -0.01em;
      text-decoration: none; cursor: pointer;
      transition: transform .24s var(--ease), box-shadow .24s var(--ease),
                  background .24s var(--ease), border-color .24s var(--ease);
      border: 1px solid transparent;
    }
    /* Bear/iA 的主按钮都是**品牌色实心**（iA 是蓝色 GET 圆角块）。
       前面用黑底是想避免"彩色=AI 味"，但真产品里这恰恰是最不像 AI 的做法
       —— 因为它有明确品牌归属，不是「炫技渐变」。 */
    .btn-primary {
      color: #fff;
      background: var(--accent);
      box-shadow: 0 1px 2px rgba(28,25,23,0.12);
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      background: var(--accent-lo);
      box-shadow: 0 6px 18px rgba(221,76,79,0.28);
    }
    .btn-ghost {
      color: var(--text);
      background: transparent;
      border-color: var(--hairline-2);
    }
    .btn-ghost:hover { background: rgba(28,25,23,0.045); transform: translateY(-1px); }

    .mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }

    /* Section eyebrow: monospace tag with a leading rule — reads as
       engineering doc rather than marketing fluff */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--mono); font-size: 12px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent-hi);
      margin-bottom: 22px;
    }
    .eyebrow::before {
      content: ''; width: 26px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent-hi));
    }

    .section { padding: 128px 0; position: relative; }

    .section-title {
      font-size: clamp(34px, 4.6vw, 56px);
      font-weight: 620;
      letter-spacing: -0.035em;
      line-height: 1.06;
      margin-bottom: 22px;
    }
    .section-title em { font-style: normal; }
    .section-sub {
      font-size: 17px; color: var(--text-2);
      max-width: 620px; line-height: 1.68;
    }
    .section-head { margin-bottom: 60px; }

    /* Hairline divider with a centre glow */
    .rule {
      height: 1px; border: 0;
      background: linear-gradient(90deg, transparent, var(--hairline-2) 18%, var(--hairline-2) 82%, transparent);
    }

    /* ═══════════════ HERO ═══════════════ */
    .hero {
      position: relative;
      padding: calc(var(--nav-h) + 116px) 0 0;
      text-align: center;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13.5px; color: var(--text-2);
      margin-bottom: 26px;
    }
    .hero-badge .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
    }

    /* Bear 的标题单行约 64px、行高偏松；我原来 96px 在 1440 宽下两行顶满，
       显得挤。降一档 + 放松行高，留出呼吸。 */
    h1 {
      font-size: clamp(40px, 6.4vw, 76px);
      font-weight: 640;
      letter-spacing: -0.04em;
      line-height: 1.06;
      margin-bottom: 28px;
    }
    /* Bear 的做法：标题整体无衬线同一字号，只在「love」这类词下加一道手绘感下划线。
       不改字体、不改颜色 —— 层级靠一条线。 */
    h1 .u {
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }
    h1 .u::after {
      content: '';
      position: absolute;
      left: -2px; right: -2px; bottom: 0.055em;
      height: 0.055em;
      background: var(--accent);
      border-radius: 3px;
      transform: scaleX(0); transform-origin: left;
      animation: underlineIn 0.7s var(--ease) 1.15s forwards;
    }
    @keyframes underlineIn { to { transform: scaleX(1); } }
    @media (prefers-reduced-motion: reduce) {
      h1 .u::after { animation: none; transform: scaleX(1); }
    }

    .hero-sub {
      font-size: clamp(16px, 1.4vw, 18px);
      color: var(--text-2);
      max-width: 560px; margin: 0 auto 40px;
      line-height: 1.6;
      text-wrap: balance;
    }
    .hero-actions {
      display: flex; align-items: center; justify-content: center;
      gap: 14px; flex-wrap: wrap;
      margin-bottom: 78px;
    }
    .hero-note {
      margin-top: 20px;
      font-family: var(--mono); font-size: 12.5px; color: var(--text-3);
      letter-spacing: -0.01em;
    }
    .hero-note b { color: var(--text-2); font-weight: 500; }
  
/* ═══════════════ macOS window frame ═══════════════
       Wrapping screenshots in real window chrome is the single
       biggest credibility/quality lever: it reads as "a real app"
       rather than "an image on a page".                        */
    .shot {
      position: relative;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid var(--hairline-2);
      box-shadow:
        0 0 0 1px rgba(28,25,23,0.07),
        0 2px 4px rgba(28,25,23,0.04),
        0 18px 40px -16px rgba(28,25,23,0.16);
      overflow: hidden;
    }
    /* title bar */
    .shot::before {
      content: '';
      display: block;
      height: 38px;
      /* 浅色纸面上的窗口标题栏：macOS 浅色主题的标题栏不是纯白，是一层灰 */
      background: linear-gradient(180deg, #F0EEE8, #E7E4DD);
      border-bottom: 1px solid rgba(28,25,23,0.13);
      box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset;
    }
    /* traffic lights */
    .shot::after {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 78px; height: 38px;
      background:
        radial-gradient(circle at 14px 19px, #FF5F57 0 5.5px, transparent 6px),
        radial-gradient(circle at 34px 19px, #FEBC2E 0 5.5px, transparent 6px),
        radial-gradient(circle at 54px 19px, #28C840 0 5.5px, transparent 6px);
      pointer-events: none;
    }
    .shot img {
      display: block; width: 100%; height: auto;
    }
    /* 截图本身已含 macOS 窗口栏（红绿灯 + 标题栏）时用这个变体：
       保留框体与投影，但不再叠一层标题栏/红绿灯，否则会出现两层红绿灯。 */
    .shot--bare { background: var(--surface); }
    .shot--bare::before, .shot--bare::after { display: none; }
    .shot--bare img { border-radius: 0; }
    /* accent bloom under the hero shot */
    /* 截图外层：只负责承载滚动视差的 transform（入场动画在内层 .shot 上）。
       ⚠️ 这里原本还有个 ::before 光晕伪元素（深色版的蓝色外发光），它
       `inset: 18% 8% -6%` 的 top 会向上伸进 hero-note 区域，在暖白纸上表现为
       一块灰影压在「13.5 MB · macOS 14+」下面。纸面不需要外发光，已移除。 */
    .shot-glow { position: relative; margin-top: 52px; }

    /* ═══════════════ STATS ═══════════════ */
    .stats-section { padding: 92px 0 84px; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      border: 1px solid var(--hairline);
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(28,25,23,0.028), rgba(28,25,23,0.008));
      overflow: hidden;
    }
    .stat-item {
      padding: 30px 26px;
      text-align: center;
      border-right: 1px solid var(--hairline);
      transition: background .3s var(--ease);
    }
    .stat-item:last-child { border-right: 0; }
    .stat-item:hover { background: rgba(28,25,23,0.022); }
    .stat-num {
      font-size: clamp(30px, 3.4vw, 40px); font-weight: 620;
      letter-spacing: -0.04em; line-height: 1;
      color: var(--text);
    }
    .stat-label {
      margin-top: 11px;
      font-family: var(--mono); font-size: 11.5px;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--text-3);
    }

    /* ═══════════════ Bento features ═══════════════ */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 18px;
    }
    .bento-card {
      position: relative;
      padding: 30px 28px;
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(28,25,23,0.032), rgba(28,25,23,0.010));
      border: 1px solid var(--hairline);
      overflow: hidden;
      transition: transform .34s var(--ease), border-color .34s var(--ease),
                  box-shadow .34s var(--ease);
    }
    /* cursor-tracked spotlight (set via --mx/--my in JS) */
    .bento-card::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
                  rgba(28,25,23,0.10), transparent 62%);
      opacity: 0; transition: opacity .34s var(--ease); pointer-events: none;
    }
    /* top highlight hairline */
    .bento-card::after {
      content: '';
      position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(28,25,23,0.28), transparent);
      opacity: 0; transition: opacity .34s var(--ease);
    }
    .bento-card:hover {
      transform: translateY(-4px);
      border-color: var(--hairline-2);
      box-shadow: 0 20px 48px -22px rgba(0,0,0,0.85);
    }
    .bento-card:hover::before, .bento-card:hover::after { opacity: 1; }

    /* spans: 6-col grid */
    .bc-1 { grid-column: span 4; }
    .bc-2 { grid-column: span 2; }
    .bc-3 { grid-column: span 2; }
    .bc-4 { grid-column: span 4; }
    .bc-5, .bc-6, .bc-7 { grid-column: span 2; }
    /* 全宽卡（MCP）：独占一行，给品类内独一份的特性 */
    .bc-full { grid-column: span 6; }

    .card-icon {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid rgba(221,76,79,0.20);
      margin-bottom: 20px;
    }
    .card-title {
      font-size: 18.5px; font-weight: 580; letter-spacing: -0.025em;
      margin-bottom: 10px;
    }
    .card-desc { font-size: 14.5px; color: var(--text-2); line-height: 1.66; }
    .card-desc code {
      font-family: var(--mono); font-size: 12.5px;
      padding: 2px 6px; border-radius: 5px;
      background: rgba(28,25,23,0.07); color: var(--text);
    }
    .card-media {
      margin-top: 24px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--hairline);
      background: var(--surface);
    }
    .card-media img { display: block; width: 100%; height: auto; }

    /* ═══════════════ Feature split ═══════════════ */
    .feature-split {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: 72px; align-items: center;
      padding: 56px 0;
    }
    .feature-split.reverse .split-text { order: 2; }
    .feature-split.reverse .split-visual { order: 1; }

    .tag {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 11.5px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--accent);
      padding: 5px 12px; border-radius: 100px;
      background: var(--accent-dim);
      border: 1px solid rgba(221,76,79,0.20);
      margin-bottom: 22px;
    }
    .split-text h3 {
      font-size: clamp(27px, 3.1vw, 38px);
      font-weight: 620; letter-spacing: -0.035em; line-height: 1.12;
      margin-bottom: 18px;
    }
    .split-text > p { font-size: 16px; color: var(--text-2); line-height: 1.68; margin-bottom: 26px; }

    .feature-list { list-style: none; display: grid; gap: 12px; }
    .feature-list li {
      position: relative; padding-left: 28px;
      font-size: 14.5px; color: var(--text-2); line-height: 1.6;
    }
    /* custom tick — a small gradient glyph, not a bullet */
    .feature-list li::before {
      content: '';
      position: absolute; left: 0; top: 7px;
      width: 15px; height: 15px; border-radius: 50%;
      background: var(--accent-dim);
      border: 1px solid rgba(221,76,79,0.24);
    }
    .feature-list li::after {
      content: '';
      position: absolute; left: 4.5px; top: 11.5px;
      width: 6px; height: 3px;
      border-left: 1.6px solid var(--accent-hi);
      border-bottom: 1.6px solid var(--accent-hi);
      transform: rotate(-45deg);
    }
    .feature-list code, .split-text code {
      font-family: var(--mono); font-size: 12.5px;
      padding: 1px 5px; border-radius: 5px;
      background: rgba(28,25,23,0.07); color: var(--text);
    }

    /* ═══════════════ Pricing ═══════════════ */
    .pricing-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 20px; max-width: 900px; margin: 0 auto;
    }
    .price-card {
      position: relative;
      padding: 34px 32px;
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(28,25,23,0.032), rgba(28,25,23,0.008));
      border: 1px solid var(--hairline);
      display: flex; flex-direction: column;
      transition: transform .34s var(--ease), border-color .34s var(--ease);
    }
    .price-card:hover { transform: translateY(-3px); border-color: var(--hairline-2); }
    .price-card.pro {
      border-color: rgba(28,25,23,0.34);
      background: linear-gradient(180deg, rgba(28,25,23,0.10), rgba(20,18,15,0.028));
      box-shadow: 0 24px 60px -28px rgba(28,25,23,0.42);
    }
    .price-plan {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 560; letter-spacing: 0.03em;
      text-transform: uppercase; color: var(--text-2);
      margin-bottom: 18px;
    }
    .price-badge {
      font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
      padding: 3px 9px; border-radius: 100px;
      color: #C7D2FE;
      background: rgba(28,25,23,0.20);
      border: 1px solid rgba(28,25,23,0.34);
      text-transform: none;
    }
    .price-amount {
      font-size: 46px; font-weight: 640; letter-spacing: -0.045em; line-height: 1;
      margin-bottom: 12px;
    }
    .price-amount span { font-size: 15px; font-weight: 450; color: var(--text-3); letter-spacing: -0.01em; }
    .price-tagline { font-size: 14.5px; color: var(--text-2); margin-bottom: 26px; }
    .price-list {
      list-style: none; display: grid; gap: 11px;
      margin-bottom: 30px; flex: 1;
    }
    .price-list li {
      position: relative; padding-left: 26px;
      font-size: 14px; color: var(--text-2); line-height: 1.58;
    }
    .price-list li::before {
      content: '';
      position: absolute; left: 2px; top: 8px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent-hi);
    }
    .price-list li.soon { color: var(--text-3); }
    .price-list li.soon::before { background: var(--text-3); }
    .price-list em { font-style: normal; color: var(--text-3); font-size: 12.5px; }
    .price-card .btn { justify-content: center; }

    .pricing-note {
      text-align: center; margin-top: 26px;
      font-size: 13px; color: var(--text-3);
    }

    /* ═══════════════ CTA banner ═══════════════ */
    .cta-banner {
      position: relative;
      margin: 40px 0 0;
      padding: 76px 48px;
      border-radius: 26px;
      text-align: center;
      overflow: hidden;
      /* ⚠️ 这段渐变的第三个色标上一版换墨黑时被漏掉了（仍是rgba(58,53,46,0.05)），
         于是 CTA 在暖白纸上呈灰闷色 —— 与整体品牌色脱节。 */
      background: linear-gradient(160deg, rgba(221,76,79,0.09), rgba(221,76,79,0.035) 52%, rgba(255,255,255,0.5));
      border: 1px solid rgba(221,76,79,0.22);
    }
    .cta-banner::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(620px circle at 50% -10%, rgba(221,76,79,0.10), transparent 68%);
      pointer-events: none;
    }
    .cta-banner > * { position: relative; }
    .cta-banner h2 {
      font-size: clamp(30px, 4.2vw, 50px);
      font-weight: 640; letter-spacing: -0.04em; line-height: 1.06;
      margin-bottom: 18px;
    }
    .cta-banner p {
      font-size: 16.5px; color: var(--text-2);
      max-width: 560px; margin: 0 auto 34px; line-height: 1.66;
    }
    .dl-version { color: var(--text-2); font-weight: 450; }

    /* ═══════════════ Footer ═══════════════ */
    footer {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 18px;
      padding: 40px 0 52px;
      margin-top: 40px;
      border-top: 1px solid var(--hairline);
      font-size: 13px; color: var(--text-3);
    }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-links a {
      color: var(--text-3); text-decoration: none;
      transition: color .2s var(--ease);
    }
    .footer-links a:hover { color: var(--text-2); }

    /* ═══════════════ Reveal animation ═══════════════ */
    .reveal { opacity: 0; transform: translateY(26px); }
    .reveal.from-left  { transform: translateX(-32px); }
    .reveal.from-right { transform: translateX(32px); }
    .reveal.visible {
      opacity: 1; transform: none;
      transition: opacity .85s var(--ease), transform .85s var(--ease);
    }
    .stagger-children > * {
      opacity: 0; transform: translateY(20px);
    }
    .stagger-children.visible > * {
      opacity: 1; transform: none;
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .stagger-children.visible > *:nth-child(1) { transition-delay: 0.02s; }
    .stagger-children.visible > *:nth-child(2) { transition-delay: 0.09s; }
    .stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; }
    .stagger-children.visible > *:nth-child(4) { transition-delay: 0.23s; }
    .stagger-children.visible > *:nth-child(5) { transition-delay: 0.30s; }
    .stagger-children.visible > *:nth-child(6) { transition-delay: 0.37s; }
    .stagger-children.visible > *:nth-child(7) { transition-delay: 0.44s; }

    /* ═══════════════ Responsive ═══════════════ */
    @media (max-width: 1080px) {
      .bc-1, .bc-4 { grid-column: span 6; }
      .bc-2, .bc-3 { grid-column: span 3; }
      .bc-5, .bc-6, .bc-7 { grid-column: span 3; }
      .bc-full { grid-column: span 6; }
      .feature-split { grid-template-columns: 1fr; gap: 44px; }
      .feature-split.reverse .split-text { order: 1; }
      .feature-split.reverse .split-visual { order: 2; }
    }
    @media (max-width: 760px) {
      .wrap { padding: 0 20px; }
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      .section { padding: 84px 0; }
      .bento-grid { grid-template-columns: 1fr; }
      .bc-1, .bc-2, .bc-3, .bc-4, .bc-5, .bc-6, .bc-7, .bc-full { grid-column: span 1; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .stat-item { border-right: 0; border-bottom: 1px solid var(--hairline); }
      .stat-item:nth-child(odd) { border-right: 1px solid var(--hairline); }
      .stat-item:nth-last-child(-n+2) { border-bottom: 0; }
      .pricing-grid { grid-template-columns: 1fr; }
      .cta-banner { padding: 56px 24px; }
      .hero { padding-top: calc(var(--nav-h) + 76px); }
      .hero-actions .btn { width: 100%; justify-content: center; }
      footer { justify-content: center; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js-ready .hero-anim, .js-ready .hero-shot > .shot {
        opacity: 1 !important; animation: none !important;
      }
      .hero-inner, .hero-shot { transform: none !important; }
      .reveal, .stagger-children > * { opacity: 1 !important; transform: none !important; }
      .bento-card, .price-card, .btn { transition: none; }
    }