/* ═══════════════════════════════════════════
   Converge Landing — Stitch "Ad Leak Plugger" v1.0
   设计: Data-Driven Precision
   令牌: 深绿主色 · 靛蓝辅色 · Geist+Inter
   ═══════════════════════════════════════════ */

:root {
  /* ── Stitch 品牌色 ── */
  --st-primary:       #006c49; /* token */
  --st-primary-hover: #005236; /* token */
  --st-primary-soft:  rgba(0,108,73,0.08);
  --st-secondary:       #4648d4; /* token */
  --st-secondary-hover: #2f2ebe; /* token */
  --st-secondary-soft:  rgba(70,72,212,0.08);
  --st-tertiary:      #0f172a; /* token */
  --st-success:       #10b981; /* token */
  --st-success-soft:  rgba(16,185,129,0.10);
  --st-danger:        #ef4444; /* token */
  --st-danger-soft:   rgba(239,68,68,0.08);
  --st-warning:       #f59e0b; /* token */

  /* ── 表面色 ── */
  --st-bg:            #f8f9ff; /* token */
  --st-surface:       #ffffff; /* token */
  --st-surface-alt:   #f1f5f9; /* token */
  --st-border:        #e2e8f0; /* token */
  --st-border-strong: #cbd5e1; /* token */

  /* ── 文字色 ── */
  --st-ink:           #0b1c30; /* token */
  --st-ink-secondary: #475569; /* token */
  --st-ink-tertiary:  #94a3b8; /* token */
  --st-ink-inverse:   #ffffff; /* token */

  /* ── 间距 (8px 基准) ── */
  --st-space-xs:4px;--st-space-sm:8px;--st-space-md:16px;
  --st-space-lg:24px;--st-space-xl:32px;--st-space-2xl:48px;
  --st-space-3xl:64px;--st-space-4xl:80px;--st-gutter:24px;
  --st-margin-desktop:40px;--st-margin-mobile:16px;

  /* ── 圆角 ── */
  --st-radius-sm:4px;--st-radius-md:8px;--st-radius-lg:12px;--st-radius-xl:16px;--st-radius-full:9999px;

  /* ── 阴影 ── */
  --st-shadow-card:0 1px 3px rgba(15,23,42,0.06);
  --st-shadow-hover:0 4px 20px rgba(15,23,42,0.08);
  --st-shadow-modal:0 20px 25px -5px rgba(15,23,42,0.12);

  /* ── 字体 ── */
  --st-font-display:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --st-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --st-font-mono:'Geist Mono','JetBrains Mono',monospace;

  /* ── 排版 ── */
  --st-text-hero:clamp(2.5rem,5vw,3.5rem);
  --st-text-h1:clamp(1.75rem,3vw,2.5rem);
  --st-text-h2:clamp(1.375rem,2vw,1.875rem);
  --st-text-h3:1.25rem;
  --st-text-body:1.0625rem;
  --st-text-sm:0.9375rem;
  --st-text-xs:0.8125rem;
  --st-text-label:0.75rem;

  /* ── 动效 ── */
  --st-motion-fast:150ms ease;
  --st-motion-normal:250ms ease;
  --st-motion-slow:400ms ease;

  /* ── 网格 ── */
  --st-grid-cols:12;
  --st-container-max:1200px;
}

/* ═══ 全局重置 ═══ */
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--st-font-body);font-size:var(--st-text-body);background:var(--st-bg);color:var(--st-ink-secondary);margin:0;line-height:1.6}
h1,h2,h3,h4{font-family:var(--st-font-display);color:var(--st-ink);font-weight:600;letter-spacing:-0.01em}
a{color:var(--st-secondary);text-decoration:none}
a:hover{text-decoration:underline}

/* ═══ 容器 ═══ */
.st-container{max-width:var(--st-container-max);margin:0 auto;padding:0 var(--st-margin-desktop)}
@media(max-width:768px){.st-container{padding:0 var(--st-margin-mobile)}}

/* ═══ 12列网格 ═══ */
.st-grid{display:grid;grid-template-columns:repeat(var(--st-grid-cols),minmax(0,1fr));gap:var(--st-gutter)}
.st-col-12{grid-column:span 12}
.st-col-10{grid-column:span 10}
.st-col-8{grid-column:span 8}
.st-col-6{grid-column:span 6}
.st-col-4{grid-column:span 4}
.st-col-3{grid-column:span 3}
.st-col-start-1{grid-column-start:1}.st-col-start-2{grid-column-start:2}
.st-col-start-3{grid-column-start:3}.st-col-start-4{grid-column-start:4}
.st-col-start-5{grid-column-start:5}.st-col-start-6{grid-column-start:6}
.st-col-start-7{grid-column-start:7}.st-col-start-8{grid-column-start:8}
.st-col-start-9{grid-column-start:9}.st-col-start-10{grid-column-start:10}
@media(max-width:640px){
  .st-grid{grid-template-columns:1fr}
  .st-col-1,.st-col-2,.st-col-3,.st-col-4,.st-col-5,.st-col-6,
  .st-col-7,.st-col-8,.st-col-9,.st-col-10,.st-col-11,.st-col-12,
  .st-col-start-1,.st-col-start-2,.st-col-start-3,.st-col-start-4,
  .st-col-start-5,.st-col-start-6,.st-col-start-7,.st-col-start-8,
  .st-col-start-9,.st-col-start-10,.st-col-start-11,.st-col-start-12
  {grid-column:span 1;grid-column-start:auto}
}

/* ═══ Nav ═══ */
.st-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--st-border)}
.st-nav-inner{max-width:var(--st-container-max);margin:0 auto;padding:0 var(--st-margin-desktop);height:56px;display:flex;align-items:center;justify-content:space-between}
.st-nav-brand{display:flex;align-items:center;gap:var(--st-space-sm);font-family:var(--st-font-display);font-weight:700;font-size:1.125rem;color:var(--st-ink);text-decoration:none}
.st-nav-brand:hover{text-decoration:none}
.st-nav-links{display:flex;align-items:center;gap:var(--st-space-lg)}
.st-nav-link{font-size:var(--st-text-sm);color:var(--st-ink-secondary);text-decoration:none;transition:color var(--st-motion-fast)}
.st-nav-link:hover{color:var(--st-ink);text-decoration:none}
@media(max-width:768px){.st-nav-links{gap:var(--st-space-md)}.st-nav-link.hide-mobile{display:none}}

/* ═══ Buttons ═══ */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--st-space-sm);padding:10px 20px;border-radius:var(--st-radius-sm);font-family:var(--st-font-display);font-size:var(--st-text-sm);font-weight:600;cursor:pointer;transition:all var(--st-motion-fast);border:none;text-decoration:none;line-height:1.2}
.st-btn:hover{text-decoration:none}
.st-btn-primary{background:var(--st-secondary);color:var(--st-ink-inverse)}
.st-btn-primary:hover{background:var(--st-secondary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(70,72,212,0.3)}
.st-btn-success{background:var(--st-primary);color:var(--st-ink-inverse)}
.st-btn-success:hover{background:var(--st-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,108,73,0.3)}
.st-btn-outline{background:transparent;color:var(--st-ink);border:1px solid var(--st-border-strong)}
.st-btn-outline:hover{background:var(--st-surface-alt);border-color:var(--st-ink-tertiary)}
.st-btn-lg{padding:14px 28px;font-size:1.0625rem;border-radius:var(--st-radius-md)}
.st-btn-xl{padding:16px 32px;font-size:1.125rem;border-radius:var(--st-radius-md)}
.st-btn-sm{padding:6px 14px;font-size:var(--st-text-xs)}

/* ═══ Cards ═══ */
.st-card{background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius-lg);padding:var(--st-space-xl);transition:box-shadow var(--st-motion-normal),transform var(--st-motion-normal)}
.st-card:hover{box-shadow:var(--st-shadow-hover);transform:translateY(-2px)}
.st-card-accent-top{border-top:2px solid var(--st-primary)}
.st-card-accent-indigo{border-top:2px solid var(--st-secondary)}

/* ═══ Stats Row ═══ */
.st-stat-value{font-family:var(--st-font-display);font-size:var(--st-text-h2);font-weight:700;color:var(--st-ink);line-height:1.1}
.st-stat-label{font-size:var(--st-text-xs);color:var(--st-ink-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:0.05em;margin-top:var(--st-space-xs)}

/* ═══ Section ═══ */
.st-section{padding:var(--st-space-3xl) 0}
.st-section-alt{background:var(--st-surface-alt)}
.st-section-dark{background:var(--st-tertiary);color:var(--st-ink-inverse)}
.st-section-dark h2,.st-section-dark h3{color:var(--st-ink-inverse)}
.st-section-dark .st-stat-value{color:var(--st-ink-inverse)}
.st-section-header{text-align:center;margin-bottom:var(--st-space-2xl)}
.st-section-header h2{font-size:var(--st-text-h1);margin:0 0 var(--st-space-sm)}
.st-section-header p{font-size:var(--st-text-body);color:var(--st-ink-secondary);max-width:600px;margin:0 auto}
.st-badge{display:inline-block;padding:4px 12px;background:var(--st-primary-soft);color:var(--st-primary);font-size:var(--st-text-label);font-weight:600;border-radius:var(--st-radius-full);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--st-space-md)}

/* ═══ Hero ═══ */
.st-hero{padding:var(--st-space-4xl) 0 var(--st-space-3xl);text-align:center}
.st-hero h1{font-size:var(--st-text-hero);font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin:0 0 var(--st-space-lg);color:var(--st-ink)}
.st-hero p{font-size:var(--st-text-body);color:var(--st-ink-secondary);max-width:640px;margin:0 auto var(--st-space-xl);line-height:1.7}
.st-hero-actions{display:flex;align-items:center;justify-content:center;gap:var(--st-space-md);flex-wrap:wrap}

/* ═══ Stat Grid ═══ */
.st-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-gutter);max-width:900px;margin:var(--st-space-2xl) auto 0;text-align:center;padding-top:var(--st-space-2xl);border-top:1px solid var(--st-border)}
@media(max-width:768px){.st-stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.st-stat-grid{grid-template-columns:1fr}}

/* ═══ Process Steps ═══ */
.st-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-gutter)}
.st-step{text-align:center;padding:var(--st-space-lg)}
.st-step-icon{width:56px;height:56px;background:var(--st-primary-soft);border-radius:var(--st-radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto var(--st-space-md);font-size:24px}
.st-step h3{font-size:var(--st-text-h3);margin:0 0 var(--st-space-sm)}
.st-step p{font-size:var(--st-text-sm);color:var(--st-ink-secondary);margin:0;line-height:1.5}
@media(max-width:768px){.st-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.st-steps{grid-template-columns:1fr}}

/* ═══ Comparison Table ═══ */
.st-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--st-border);border-radius:var(--st-radius-lg);background:var(--st-surface)}
.st-table{width:100%;border-collapse:collapse;min-width:600px}
.st-table th{font-family:var(--st-font-display);font-size:var(--st-text-label);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--st-ink-tertiary);text-align:left;padding:var(--st-space-md) var(--st-space-lg);background:var(--st-surface-alt);border-bottom:1px solid var(--st-border)}
.st-table th:first-child{padding-left:var(--st-space-xl)}
.st-table th.highlight-col{color:var(--st-primary);background:var(--st-primary-soft)}
.st-table td{font-size:var(--st-text-sm);color:var(--st-ink-secondary);padding:var(--st-space-md) var(--st-space-lg);border-bottom:1px solid var(--st-border)}
.st-table td:first-child{font-weight:500;color:var(--st-ink);padding-left:var(--st-space-xl)}
.st-table td.highlight-col{background:var(--st-primary-soft)}
.st-table tr:last-child td{border-bottom:none}
.st-table .check{color:var(--st-primary);font-weight:700}
.st-table .cross{color:var(--st-ink-tertiary)}
.st-table .tag{display:inline-block;padding:2px 8px;background:var(--st-surface-alt);border-radius:var(--st-radius-sm);font-size:var(--st-text-xs);color:var(--st-ink-secondary);white-space:nowrap}
.st-table-verified{text-align:center;margin-top:var(--st-space-lg);font-size:var(--st-text-xs);color:var(--st-ink-tertiary)}

/* ═══ Pricing ═══ */
.st-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-gutter);max-width:960px;margin:0 auto;align-items:start}
.st-plan{background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius-lg);padding:var(--st-space-xl);display:flex;flex-direction:column;position:relative}
.st-plan.featured{border-color:var(--st-secondary);box-shadow:0 0 0 1px var(--st-secondary),var(--st-shadow-hover)}
.st-plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--st-secondary);color:var(--st-ink-inverse);font-size:var(--st-text-label);font-weight:600;padding:4px 16px;border-radius:var(--st-radius-full);white-space:nowrap}
.st-plan-name{font-family:var(--st-font-display);font-size:var(--st-text-h3);font-weight:600;color:var(--st-ink);margin:0 0 var(--st-space-sm)}
.st-plan-price{font-family:var(--st-font-display);font-size:2.5rem;font-weight:700;color:var(--st-ink);margin:0 0 var(--st-space-md)}
.st-plan-price small{font-size:var(--st-text-body);font-weight:400;color:var(--st-ink-tertiary)}
.st-plan-features{list-style:none;padding:0;margin:0 0 var(--st-space-xl);flex:1}
.st-plan-features li{padding:var(--st-space-sm) 0;font-size:var(--st-text-sm);color:var(--st-ink-secondary);display:flex;align-items:flex-start;gap:var(--st-space-sm)}
.st-plan-features li::before{content:'✓';color:var(--st-primary);font-weight:700;flex-shrink:0}
@media(max-width:768px){.st-pricing-grid{grid-template-columns:1fr;max-width:400px}}
@media(max-width:480px){.st-pricing-grid{max-width:100%}}

/* ═══ CTA Section ═══ */
.st-cta-section{padding:var(--st-space-4xl) 0;text-align:center}
.st-cta-section h2{font-size:var(--st-text-h1);margin:0 0 var(--st-space-lg)}
.st-cta-section p{font-size:var(--st-text-body);color:var(--st-ink-secondary);margin:0 auto var(--st-space-xl);max-width:500px}
.st-section-dark .st-cta-section h2{color:var(--st-ink-inverse)}
.st-section-dark .st-cta-section p{color:rgba(255,255,255,0.7)}

/* ═══ Footer ═══ */
.st-footer{padding:var(--st-space-xl) 0;border-top:1px solid var(--st-border);text-align:center}
.st-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--st-space-lg);margin-bottom:var(--st-space-md)}
.st-footer-links a{font-size:var(--st-text-xs);color:var(--st-ink-tertiary);text-decoration:none}
.st-footer-links a:hover{color:var(--st-ink-secondary);text-decoration:underline}
.st-footer-copy{font-size:var(--st-text-xs);color:var(--st-ink-tertiary)}

/* ═══ Dark mode ═══ */
html.dark {
  --st-bg:#0f172a; /* token */
  --st-surface:#1e293b; /* token */
  --st-surface-alt:#1a2332; /* token */
  --st-border:#334155; /* token */
  --st-border-strong:#475569; /* token */
  --st-ink:#f1f5f9; /* token */
  --st-ink-secondary:#cbd5e1; /* token */
  --st-ink-tertiary:#94a3b8; /* token */
  --st-tertiary:#020617; /* token */
}
html.dark .st-nav{background:rgba(15,23,42,0.85);border-color:var(--st-border)}
html.dark .st-table th.highlight-col,html.dark .st-table td.highlight-col{background:rgba(0,108,73,0.15)}

/* ═══ Scroll reveal ═══ */
.st-reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.st-reveal.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.st-reveal{opacity:1;transform:none}}