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

    :root {
      /* ── 主色：鲜亮绿（饱和度提升，更显眼） ── */
      --sage:    #5ec46c;
      --sage-l:  #8ed99a;
      --sage-ll: #beeec8;
      --sage-lll:#e6f8ea;
      --sage-d:  #32a846;
      --sage-dd: #1e7030;
      /* 别名，兼容现有引用 */
      --sky-50:  #e6f8ea;
      --sky-100: #beeec8;
      --sky-200: #8ed99a;
      --sky-300: #5ec46c;
      --sky-400: #38b04e;
      --sky-500: #32a846;
      --sky-600: #1e7030;
      --sky-700: #134a20;
      --sky-900: #0c3014;

      /* ── 第二色：暖金 Gold ── */
      --gold:    #c9a84c;   /* 主金色 — CTA、数字高亮 */
      --gold-l:  #e2c96a;   /* 浅金 — 渐变亮端 */
      --gold-d:  #8c6e1a;   /* 深金 — 文字用 */
      --gold-bg: #fdf8ec;   /* 金色调极浅背景 */

      /* ── 文字 ── */
      --ink:        #0f2814;
      --ink-2:      #1c3a20;
      --ink-light:  #2c4e30;
      --ink-subtle: #5a7860;
      --white: #ffffff;
      --radius: 20px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --t: 0.45s;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    h1, h2, h3, h4 { font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }

    /* ─── NAV ─── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 18px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(90deg, rgba(240,251,242,0.92), rgba(218,245,224,0.92));
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(94,196,108,0.16);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--ink);
      text-decoration: none;
      letter-spacing: -0.02em;
    }

    .nav-logo-mark {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--sage-l), var(--sage-d));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(50,168,70,0.3);
    }
    .nav-logo-mark svg { stroke: white; }

    .nav-right { display: flex; align-items: center; gap: 32px; }

    .nav-link {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--ink-2);
      text-decoration: none;
      transition: color var(--t) var(--ease);
    }
    .nav-link:hover { color: var(--sky-600); }

    .nav-cta {
      background: linear-gradient(135deg, var(--gold-l), var(--gold), #a07a20);
      color: #2a1e08;
      padding: 10px 26px;
      border-radius: 50px;
      font-size: 0.875rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
      box-shadow: 0 4px 16px rgba(201,168,76,0.32);
    }
    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(201,168,76,0.5);
    }

    /* ─── HERO ─── */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 140px 48px 100px;
      position: relative;
      overflow: hidden;
      /* 多节点 mesh 渐变：鼠尾草光晕浮在奶白底上 */
      background:
        radial-gradient(ellipse 72% 58% at 88% 8%,  rgba(142,217,154,0.62) 0%, transparent 58%),
        radial-gradient(ellipse 55% 72% at 6%  88%, rgba(94,196,108,0.42) 0%, transparent 55%),
        radial-gradient(ellipse 48% 48% at 44% 44%, rgba(190,238,200,0.48) 0%, transparent 62%),
        linear-gradient(162deg, #f0fbf2 0%, #daf5e0 55%, #e4f9e8 100%);
    }

    .hero-bg { position: absolute; inset: 0; z-index: 0; }

    /* 无网格 — 干净留白 */
    .grid-lines { display: none; }

    /* 柔和光晕球，纯 blur，无棱角 */
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      animation: floatOrb 11s ease-in-out infinite;
    }
    .orb-a {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(94,196,108,0.32), transparent 68%);
      top: -140px; right: -100px;
    }
    .orb-b {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(50,168,70,0.18), transparent 68%);
      bottom: -80px; left: 8%;
      animation-delay: -5s;
    }
    .orb-c {
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(142,217,154,0.22), transparent 68%);
      top: 30%; right: 30%;
      animation-delay: -8s;
    }

    @keyframes floatOrb {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(28px,-18px) scale(1.04); }
      66%      { transform: translate(-18px,28px) scale(0.96); }
    }

    .hero-inner {
      position: relative; z-index: 1;
      max-width: 1200px; margin: 0 auto; width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    /* hero text animations */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--sky-50);
      border: 1px solid var(--sky-200);
      color: var(--sky-600);
      padding: 6px 18px;
      border-radius: 50px;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeUp 0.8s 0.2s var(--ease) forwards;
    }
    .hero-badge .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--sage);
      animation: pulseDot 2s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.4; transform:scale(1.6); }
    }

    .hero-title {
      font-size: clamp(2.8rem, 5vw, 4.2rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 22px;
      opacity: 0;
      animation: fadeUp 0.8s 0.38s var(--ease) forwards;
    }
    .hero-title .sky {
      /* 暖金 → 鼠尾草：两色撞击，立刻跳出 */
      background: linear-gradient(120deg, #c9a84c 0%, #9abe42 35%, #32a846 65%, #1e7030 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      display: inline-block;
    }
    .hero-title .sky::after {
      content: '';
      position: absolute;
      bottom: 4px; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #c9a84c, #5ec46c);
      border-radius: 2px;
      opacity: 0.45;
    }

    .hero-sub {
      font-size: 1.05rem;
      color: var(--ink-2);
      font-weight: 300;
      line-height: 1.75;
      margin-bottom: 44px;
      max-width: 460px;
      opacity: 0;
      animation: fadeUp 0.8s 0.56s var(--ease) forwards;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 0.8s 0.74s var(--ease) forwards;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 50%, #a8861e 100%);
      color: #2a1e08;    /* 深棕字，在金色上高对比 */
      padding: 16px 36px;
      border-radius: 50px;
      font-size: 0.975rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(201,168,76,0.4);
      transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(201,168,76,0.56);
    }
    .btn-primary > * { position: relative; z-index: 1; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--ink);
      padding: 16px 32px;
      border-radius: 50px;
      font-size: 0.975rem;
      font-weight: 500;
      text-decoration: none;
      border: 1.5px solid rgba(74,154,88,0.28);
      transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
    }
    .btn-ghost:hover {
      border-color: var(--sky-400);
      background: rgba(255,255,255,0.66);
      border: 1px solid rgba(94,196,108,0.15);
      color: var(--sky-600);
    }

    /* ─── HERO VISUAL ─── */
    .hero-visual {
      position: relative;
      opacity: 0;
      animation: fadeSlideLeft 1s 0.5s var(--ease) forwards;
    }
    @keyframes fadeSlideLeft {
      from { opacity:0; transform:translateX(40px); }
      to   { opacity:1; transform:translateX(0); }
    }

    .mockup-wrap {
      background: white;
      border-radius: 28px;
      box-shadow:
        0 0 0 1px rgba(94,196,108,0.18),
        0 40px 80px rgba(50,168,70,0.14),
        0 8px 24px rgba(0,0,0,0.06);
      padding: 28px;
    }

    .mock-topbar {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 16px;
    }
    .mock-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
    }
    .mock-dot-r { background:#ff5f57; }
    .mock-dot-y { background:#ffbd2e; }
    .mock-dot-g { background:#28ca41; }

    .mock-titlebar {
      flex: 1;
      height: 28px;
      background: var(--sky-50);
      border-radius: 6px;
      margin: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      color: var(--ink-subtle);
      font-weight: 500;
    }

    .tg-chat-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0 16px;
      border-bottom: 1px solid var(--sky-100);
      margin-bottom: 16px;
    }
    .tg-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--sage), var(--sage-d));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      color: white;
    }
    .tg-meta { flex: 1; }
    .tg-name { font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-weight:700; font-size:0.9rem; color:var(--ink); }
    .tg-sub  { font-size:0.72rem; color:var(--sky-500); font-weight:500; margin-top:2px; }
    .live-pill {
      background: #dcfce7;
      color: #15803d;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      gap: 5px;
      letter-spacing: 0.04em;
    }
    .live-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #16a34a;
      animation: pulseDot 1.5s ease-in-out infinite;
    }

    .tg-messages { display:flex; flex-direction:column; gap:10px; min-height:150px; }

    .tg-msg {
      background: var(--sky-50);
      border-radius: 14px 14px 14px 4px;
      padding: 11px 14px;
      font-size: 0.82rem;
      color: var(--ink);
      line-height: 1.55;
      max-width: 88%;
      opacity: 0;
      animation: msgPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .tg-msg.out {
      align-self: flex-end;
      border-radius: 14px 14px 4px 14px;
      background: linear-gradient(135deg, var(--sage), var(--sage-d));
      color: white;
    }
    .tg-msg:nth-child(1) { animation-delay: 1.3s; }
    .tg-msg:nth-child(2) { animation-delay: 1.8s; }
    .tg-msg:nth-child(3) { animation-delay: 2.4s; }

    @keyframes msgPop {
      from { opacity:0; transform:translateY(8px) scale(0.94); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }

    .tg-time {
      font-size: 0.65rem;
      opacity: 0.45;
      text-align: right;
      margin-top: 4px;
    }
    .tg-msg.out .tg-time { color: rgba(255,255,255,0.7); opacity:1; }

    .mock-stats {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--sky-100);
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 8px;
    }
    .mock-stat { text-align:center; }
    .mock-stat-n {
      font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-weight:800;
      font-size:1.15rem;
      color:var(--sky-600);
      display:block;
    }
    .mock-stat-l { font-size:0.68rem; color:var(--ink-subtle); }

    /* floating badges around mockup */
    .fbadge {
      position: absolute;
      background: white;
      border-radius: 14px;
      padding: 10px 14px;
      box-shadow: 0 8px 30px rgba(50,168,70,0.14);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      border: 1px solid var(--sky-100);
      white-space: nowrap;
      animation: fbFloat 4s ease-in-out infinite;
    }
    .fbadge-sent  { top:-22px; right:-36px; color:#15803d; animation-delay:0s; }
    .fbadge-timer { bottom:60px; left:-48px; color:var(--sky-600); animation-delay:-2s; }

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

    /* ─── KEYFRAMES ─── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(32px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ─── STATS — 深色渐变 ─── */
    .stats {
      padding: 90px 48px;
      background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(94,196,108,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 90% 100%, rgba(50,168,70,0.18) 0%, transparent 55%),
        linear-gradient(145deg, #0a1c0c 0%, #0e2612 30%, #122e16 55%, #091a0b 100%);
      position: relative;
      overflow: hidden;
    }
    .stats::before { display: none; }
    .stats-grid {
      max-width: 1100px; margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 32px;
      position: relative;
    }
    .stat-item { text-align:center; }
    .stat-num {
      font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      font-weight: 800;
      color: white;
      display: block;
      line-height: 1;
      margin-bottom: 10px;
    }
    .stat-num .c {
      background: linear-gradient(135deg, #f0d878 0%, #e2c96a 35%, #c9a84c 65%, #a07a20 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-lbl { font-size:0.88rem; color:rgba(255,255,255,0.48); font-weight:400; }

    /* ─── SECTION COMMON ─── */
    .section-tag {
      display:block;
      font-size:0.76rem;
      font-weight:700;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color: var(--gold-d);   /* 金色标签，在浅绿背景上强烈跳出 */
      margin-bottom:14px;
    }
    .section-h {
      font-size: clamp(2rem, 3.6vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--ink);
      margin-bottom: 14px;
    }
    .section-p {
      font-size:0.98rem;
      color:var(--ink-light);
      font-weight:300;
      line-height:1.75;
    }
    .section-head { text-align:center; max-width:580px; margin:0 auto 72px; }

    /* ─── FEATURES ─── */
    .features {
      padding: 120px 48px;
      background: linear-gradient(180deg, #ffffff 0%, #e6f8ea 100%);
    }
    .feat-grid {
      max-width: 1100px; margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 22px;
    }
    .feat-card {
      border: 1px solid var(--sky-100);
      border-radius: var(--radius);
      padding: 42px;
      position: relative;
      overflow: hidden;
      cursor: default;
      transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .feat-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(140deg, var(--sky-50), transparent 55%);
      opacity: 0;
      transition: opacity var(--t) var(--ease);
    }
    .feat-card:hover {
      border-color: rgba(100,184,112,0.45);
      transform: translateY(-5px);
      box-shadow:
        0 0 0 1px rgba(100,184,112,0.15),
        0 22px 64px rgba(100,184,112,0.14),
        0 0 40px rgba(42,120,98,0.07);
    }
    .feat-card:hover::after { opacity: 1; }

    .feat-icon {
      width: 54px; height: 54px;
      background: linear-gradient(135deg, var(--sky-100), var(--sky-200));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
      position: relative; z-index:1;
      transition: background var(--t) var(--ease);
    }
    .feat-icon svg { stroke: var(--sky-600); transition: stroke var(--t) var(--ease); }
    .feat-card:hover .feat-icon {
      background: linear-gradient(135deg, #64b870 0%, #4a9a58 50%, #2a7862 100%);
      box-shadow: 0 4px 20px rgba(100,184,112,0.4);
    }
    .feat-card:hover .feat-icon svg { stroke: white; }

    .feat-title {
      font-size:1.2rem;
      font-weight:700;
      color:var(--ink);
      margin-bottom:10px;
      position:relative;z-index:1;
    }
    .feat-desc {
      font-size:0.92rem;
      color:var(--ink-light);
      line-height:1.72;
      font-weight:300;
      position:relative;z-index:1;
    }
    .feat-chip {
      display:inline-block;
      margin-top:22px;
      padding:4px 14px;
      background:var(--sky-50);
      color:var(--sky-600);
      border-radius:50px;
      font-size:0.72rem;
      font-weight:600;
      letter-spacing:0.04em;
      position:relative;z-index:1;
    }

    /* ─── USE CASES ─── */
    .usecases {
      padding: 120px 48px;
      background:
        radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(142,217,154,0.4) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 2%  95%, rgba(94,196,108,0.3) 0%, transparent 50%),
        linear-gradient(150deg, #d8f5de 0%, #e0f7e4 40%, #caf2d2 100%);
    }
    .uc-grid {
      max-width: 1100px; margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 18px;
    }
    .uc-card {
      background: white;
      border-radius: var(--radius);
      padding: 34px;
      border: 1px solid rgba(74,154,88,0.09);
      position: relative;
      overflow: hidden;
      transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
    }
    .uc-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 54px rgba(74,154,88,0.13);
    }
    .uc-num {
      font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-size:3rem;
      font-weight:800;
      color:var(--sky-100);
      line-height:1;
      margin-bottom:16px;
    }
    .uc-title { font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
    .uc-desc  { font-size:0.86rem; color:var(--ink-light); line-height:1.65; font-weight:300; }
    .uc-icon-bg {
      position:absolute;
      bottom:-20px; right:-20px;
      opacity:0.06;
      pointer-events:none;
    }

    /* ─── HOW IT WORKS ─── */
    .how {
      padding: 120px 48px;
      background: linear-gradient(160deg, #e6f8ea 0%, #ffffff 50%, #daf5e0 100%);
    }
    .how-steps {
      max-width: 900px; margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }
    .how-steps::before {
      content:'';
      position:absolute;
      left: 27px; top:40px; bottom:40px;
      width:2px;
      background: linear-gradient(to bottom, #e2c96a, #c9a84c 40%, #5ec46c 70%, #1e7030);
    }
    .how-step {
      display:flex;
      gap:32px;
      align-items:flex-start;
      padding:32px 0;
    }
    .how-step-num {
      width:54px; height:54px;
      border-radius:50%;
      background:white;
      border:2px solid var(--sky-300);
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-weight:800;
      font-size:1rem;
      color:var(--sky-600);
      position:relative;
      z-index:1;
      transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
    }
    .how-step:hover .how-step-num {
      background: var(--sky-500);
      border-color: var(--sky-500);
      color: white;
    }
    .how-step-body { padding-top:12px; }
    .how-step-title { font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
    .how-step-desc  { font-size:0.92rem; color:var(--ink-light); font-weight:300; line-height:1.7; }

    /* ─── CTA — 深色渐变 ─── */
    .cta-sec {
      padding: 120px 48px;
      background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(94,196,108,0.2)  0%, transparent 55%),
        radial-gradient(ellipse 50% 55% at 80% 80%, rgba(50,168,70,0.18)   0%, transparent 55%),
        linear-gradient(135deg, #122e16 0%, #091a0b 35%, #0a1c0c 65%, #0e2612 100%);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .cta-sec::before { display: none; }
    .cta-sec::after  { display: none; }
    .cta-inner { position:relative; z-index:1; max-width:580px; margin:0 auto; }

    .cta-eyebrow {
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(201,168,76,0.12);
      border:1px solid rgba(201,168,76,0.32);
      color:var(--gold-l);
      padding:6px 18px;
      border-radius:50px;
      font-size:0.76rem;
      font-weight:600;
      letter-spacing:0.07em;
      text-transform:uppercase;
      margin-bottom:28px;
    }

    .cta-h {
      font-size:clamp(2rem,4vw,3rem);
      font-weight:800;
      color:white;
      letter-spacing:-0.03em;
      line-height:1.18;
      margin-bottom:18px;
    }
    .cta-h .gold-text {
      background: linear-gradient(120deg, #f0d878 0%, #e2c96a 40%, #c9a84c 75%, #a07a20 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .cta-p {
      font-size:1rem;
      color:rgba(255,255,255,0.58);
      margin-bottom:44px;
      font-weight:300;
    }

    .contact-box {
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius);
      padding: 36px;
      text-align:left;
    }
    .contact-row {
      display:flex;
      align-items:center;
      gap:16px;
      padding:16px 0;
      border-bottom:1px solid rgba(255,255,255,0.07);
    }
    .contact-row:last-child { border-bottom:none; }
    .contact-icon {
      width:42px;height:42px;
      border-radius:12px;
      background:rgba(201,168,76,0.14);
      border:1px solid rgba(201,168,76,0.22);
      display:flex;align-items:center;justify-content:center;
      flex-shrink:0;
    }
    .contact-icon svg { stroke:var(--gold-l); }
    .contact-label { font-size:0.78rem; color:rgba(255,255,255,0.4); font-weight:500; margin-bottom:4px; }
    .contact-val   { font-size:0.95rem; color:white; font-weight:600; }
    .contact-link  { text-decoration:none; color:var(--gold-l); font-size:0.95rem; font-weight:600; transition:color var(--t) var(--ease); }
    .contact-link:hover { color:white; }

    /* deco rings */
    .deco-rings {
      position:absolute;
      pointer-events:none;
      opacity:0.06;
    }

    /* ─── FOOTER ─── */
    footer {
      padding: 36px 48px;
      background: linear-gradient(90deg, #0a1c0c 0%, #0e2612 50%, #091a0b 100%);
      border-top: 1px solid rgba(94,196,108,0.1);
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:16px;
    }
    .footer-logo {
      font-family:Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      font-weight:800;
      color:white;
      font-size:1.1rem;
      letter-spacing:-0.02em;
    }
    .footer-logo .sky {
      background: linear-gradient(90deg, #e2c96a, #c9a84c 45%, #5ec46c 75%, var(--sage));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .footer-copy { font-size:0.78rem; color:rgba(255,255,255,0.28); }

    /* ─── REVEAL ─── */
    .reveal {
      opacity:0;
      transform:translateY(38px);
      transition: opacity 0.82s var(--ease), transform 0.82s var(--ease);
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ─── RESPONSIVE ─── */
    @media(max-width:960px){
      nav { padding:14px 24px; }
      .nav-right .nav-link { display:none; }
      .hero { padding:120px 24px 80px; }
      .hero-inner { grid-template-columns:1fr; gap:48px; }
      .hero-visual { display:none; }
      .stats { padding:72px 24px; }
      .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
      .features,.usecases,.how,.cta-sec { padding:80px 24px; }
      .feat-grid { grid-template-columns:1fr; }
      .uc-grid { grid-template-columns:1fr; }
      footer { padding:28px 24px; }
    }