/* ============================================================
   FRAMECRAFT · Global Styles
   aesthetic: cinematic dark · editorial · filmic grain
   ============================================================ */

:root{
  --bg: #0A0906;
  --bg-warm: #14110C;
  --bg-card: #181410;
  --bg-elev: #1F1A14;
  --ink: #F4EFE6;
  --ink-dim: #A8A196;
  --ink-mute: #6B6558;
  --line: #2A241C;
  --accent: #E8513A;       /* 柯达红 */
  --accent-2: #D4B066;     /* 琥珀金 */
  --accent-3: #5B8BD6;     /* 冷蓝 */
  --accent-4: #88B560;     /* 荧光绿 */
  --radius: 2px;

  --font-display: "Fraunces", "Noto Serif SC", ui-serif, Georgia, serif;
  --font-body: "Inter Tight", "Noto Serif SC", ui-sans-serif, system-ui, sans-serif;
  --font-serif-cn: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* 背景大气层 */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(232,81,58,0.08), transparent 60%),
    radial-gradient(900px 500px at 85% 80%, rgba(91,139,214,0.06), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(212,176,102,0.04), transparent 70%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font:inherit; cursor:pointer; background:none; border:none; color:inherit}

::selection{background:var(--accent); color:var(--bg)}

/* ============================================================
   颗粒 & 扫描线
   ============================================================ */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none;
  z-index:999;
  opacity:.18;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-5%,-5%)}
  20%{transform:translate(-10%,5%)} 30%{transform:translate(5%,-10%)}
  40%{transform:translate(-5%,15%)} 50%{transform:translate(-10%,5%)}
  60%{transform:translate(15%,0)} 70%{transform:translate(0,10%)}
  80%{transform:translate(-15%,0)} 90%{transform:translate(10%,5%)}
  100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:998;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 3px
  );
  opacity:.5;
}

/* ============================================================
   导航
   ============================================================ */
.nav{
  position:sticky; top:0;
  z-index:100;
  display:flex; align-items:center;
  padding: 22px 40px;
  background: rgba(10,9,6,0.75);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav-logo{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:.08em;
}
.logo-mark{
  font-size:22px;
  color:var(--accent);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; transform:rotate(0)}
  50%{opacity:.6; transform:rotate(180deg)}
}
.logo-sub{
  font-family:var(--font-serif-cn);
  font-weight:400;
  font-size:14px;
  color:var(--ink-mute);
  letter-spacing:.15em;
}

.nav-links{
  display:flex; gap:36px;
  margin: 0 auto;
}
.nav-links a{
  display:flex; flex-direction:column; align-items:center;
  font-size:15px;
  font-weight:500;
  position:relative;
  padding: 4px 0;
  transition: color .3s;
}
.nav-links a em{
  font-family:var(--font-mono);
  font-style:normal;
  font-size:10px;
  color:var(--ink-mute);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:2px;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a::after{
  content:"";
  position:absolute; bottom:-6px; left:50%;
  width:0; height:1px;
  background:var(--accent);
  transition:width .3s, left .3s;
}
.nav-links a:hover::after{width:100%; left:0}

.nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  transition: all .3s;
}
.nav-cta:hover{
  background:var(--ink);
  color:var(--bg);
  transform:translateY(-1px);
}
.nav-burger{display:none; font-size:24px; color:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height: calc(100vh - 70px);
  padding: 0;
  overflow:hidden;
  display:flex; flex-direction:column;
}

.hero-marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 12px 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--ink-dim);
  white-space:nowrap;
  overflow:hidden;
  display:flex;
  gap:0;
}
.marquee-track{
  display:inline-flex; gap:24px;
  animation: marquee 40s linear infinite;
  flex-shrink:0;
  padding-right:24px;
}
.marquee-track span:nth-child(even){color:var(--accent-2)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

.hero-grid{
  flex:1;
  display:grid;
  grid-template-columns: minmax(180px, 1fr) 4fr;
  gap: 60px;
  padding: 80px 60px 60px;
  align-items:start;
  position:relative;
  z-index:1;
}

.hero-meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-dim);
  border-left:1px solid var(--line);
  padding-left:16px;
  position:sticky; top:120px;
}
.meta-row{
  display:flex; gap:10px;
  padding: 6px 0;
  border-bottom:1px dashed var(--line);
}
.meta-k{color:var(--ink-mute); min-width:42px}
.meta-v{color:var(--ink)}

.hero-title{
  font-family:var(--font-display);
  font-size: clamp(56px, 9vw, 148px);
  line-height: .92;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 48px;
}
.title-line{
  display:block;
  opacity:0;
  transform:translateY(40px);
  animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.title-line:nth-child(1){animation-delay:.1s}
.title-line:nth-child(2){animation-delay:.3s}
.title-line:nth-child(3){animation-delay:.5s}
@keyframes rise{to{opacity:1; transform:translateY(0)}}

.title-en{
  font-style:italic;
  font-weight:300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.title-cn{
  font-family: var(--font-serif-cn);
  font-weight: 900;
  color: var(--ink);
}
.title-cn em{
  font-style:italic;
  font-family:var(--font-display);
  font-weight:300;
  color:var(--accent);
  padding: 0 .1em;
}
.title-outline{
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  font-weight:600;
}

.hero-lede{
  font-size: 18px;
  line-height:1.6;
  color: var(--ink-dim);
  max-width: 620px;
  margin-bottom: 40px;
  opacity:0;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards .7s;
}
.lede-accent{
  display:inline-block;
  margin-top:12px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-2);
  font-size: 20px;
}

.hero-actions{
  display:flex; gap:20px; flex-wrap:wrap;
  margin-bottom: 64px;
  opacity:0;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards .9s;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 18px 28px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  transition: all .3s;
  border:none;
  cursor:pointer;
}
.btn-primary{
  background:var(--accent);
  color:var(--bg);
}
.btn-primary:hover{
  background:var(--ink);
  transform:translate(-2px,-2px);
  box-shadow: 4px 4px 0 var(--accent);
}
.btn-ghost{
  border:1px solid var(--line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--ink); background: rgba(255,255,255,.03)}
.btn-outline{
  border:1px solid var(--ink);
  padding: 16px 32px;
}
.btn-outline:hover{background:var(--ink); color:var(--bg)}
.btn-large{padding: 22px 36px; font-size:16px}
.btn-arrow{transition: transform .3s}
.btn:hover .btn-arrow{transform: translateX(4px)}
.play-icon{color:var(--accent); font-size:10px}

.hero-logos{
  display:flex; align-items:center; flex-wrap:wrap;
  gap: 18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-mute);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  opacity:0;
  animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards 1.1s;
}
.logos-label{color:var(--ink-dim); margin-right:8px}
.hero-logos span:not(.logos-label){
  color:var(--ink);
  font-weight:500;
}

.film-edge{
  position:absolute;
  top:48px; bottom:0;
  width:28px;
  pointer-events:none;
  z-index:0;
}
.film-edge-left{left:0}
.film-edge-right{right:0}
.film-edge::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 50%, transparent 50%);
  background-size:100% 26px;
  opacity:.5;
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative; z-index:1;
}
.stat{
  padding: 40px 32px;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  position:relative;
}
.stat:last-child{border-right:none}
.stat::before{
  content:"";
  position:absolute; top:12px; left:32px;
  width:6px; height:6px;
  background:var(--accent);
  border-radius:50%;
}
.stat-num{
  font-family:var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight:300;
  line-height:1;
  letter-spacing:-0.02em;
  font-feature-settings: "tnum";
}
.stat-unit{
  font-family:var(--font-display);
  font-size:28px;
  color:var(--accent);
  margin-left:4px;
  font-style:italic;
}
.stat-label{
  font-size:13px;
  color:var(--ink-dim);
  margin-top:6px;
}

/* ============================================================
   章节通用
   ============================================================ */
.section-head{
  padding: 120px 60px 60px;
  max-width: 1400px;
  position:relative; z-index:1;
}
.section-head-dark{
  background: var(--bg-warm);
  margin-top: 0;
  padding-top: 100px;
}
.section-kicker{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  letter-spacing:.2em;
  margin-bottom: 24px;
  display:inline-flex; align-items:center; gap:10px;
}
.section-kicker::before{
  content:""; width:24px; height:1px; background:var(--accent);
}
.section-title{
  font-family:var(--font-display);
  font-size: clamp(40px, 6.5vw, 96px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-0.02em;
  margin-bottom: 24px;
  max-width:1000px;
}
.title-brush{
  font-family:var(--font-serif-cn);
  font-weight:900;
  color:var(--accent);
  font-style:normal;
  padding: 0 .1em;
  position:relative;
}
.title-brush::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.1em;
  height:.15em;
  background:var(--accent);
  opacity:.25;
  z-index:-1;
}
.title-italic{
  font-style:italic;
  font-weight:300;
  color:var(--accent-2);
}
.section-sub{
  font-size:18px;
  color:var(--ink-dim);
  max-width:600px;
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.capabilities{
  padding: 0 60px 120px;
  position:relative; z-index:1;
}
.cap-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap-card{
  background:var(--bg);
  padding: 40px 32px;
  position:relative;
  display:flex; flex-direction:column;
  min-height: 320px;
  transition: background .4s;
}
.cap-card:hover{background:var(--bg-card)}
.cap-large{
  grid-row: span 2;
  grid-column: span 2;
  min-height: 640px;
}
.cap-dark{
  background:var(--bg-warm);
}
.cap-num{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  letter-spacing:.2em;
  margin-bottom: 24px;
}
.cap-card h3{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:400;
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.cap-card h3 em{
  display:block;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:12px;
  color:var(--ink-mute);
  letter-spacing:.15em;
  margin-top:6px;
  font-weight:400;
}
.cap-large h3{font-size:52px; line-height:1}
.cap-card p{
  color:var(--ink-dim);
  font-size:15px;
  line-height:1.6;
  max-width:520px;
}
.cap-visual{
  margin-top: auto;
  padding-top: 40px;
}

/* 镜头环 */
.cap-visual-lens{
  position:relative;
  height: 260px;
  display:flex; align-items:center; justify-content:center;
}
.lens-ring{
  position:absolute;
  border-radius:50%;
  border: 1px solid var(--line);
}
.r1{width:220px; height:220px; border-color:var(--accent); opacity:.3}
.r2{width:160px; height:160px; border-color:var(--accent-2); opacity:.5}
.r3{width:100px; height:100px; border: 1px dashed var(--ink-dim)}
.lens-dot{
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  box-shadow: 0 0 40px var(--accent);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.3); opacity:.7}
}
.lens-label{
  position:absolute;
  bottom:10px; right:10px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-mute);
  letter-spacing:.1em;
}
.cap-large:hover .lens-ring{animation: spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 节点 */
.cap-visual-nodes{
  position:relative;
  height:80px;
}
.node{
  position:absolute; top:30px;
  padding: 8px 14px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  background: var(--bg);
  border: 1px solid var(--accent-3);
  color:var(--accent-3);
}
.n1{left:0}
.n2{left:40%}
.n3{right:0}
.node-lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  color:var(--accent-3);
  opacity:.4;
}

/* ============================================================
   WORKFLOW
   ============================================================ */
.workflow{
  background: var(--bg-warm);
  padding: 0 60px 140px;
  position:relative; z-index:1;
}
.workflow-steps{
  max-width: 1100px;
  margin: 0 auto;
  position:relative;
}
.workflow-steps::before{
  content:"";
  position:absolute;
  left: 60px; top:0; bottom:0;
  width:1px;
  background: linear-gradient(to bottom, var(--accent), var(--line), transparent);
}
.wf-step{
  display:grid;
  grid-template-columns: 120px 100px 1fr;
  gap: 40px;
  align-items:start;
  padding: 48px 0;
  border-bottom: 1px dashed var(--line);
  position:relative;
}
.wf-step::before{
  content:"";
  position:absolute;
  left:57px; top:60px;
  width:7px; height:7px;
  background:var(--accent);
  border-radius:50%;
  box-shadow: 0 0 0 4px var(--bg-warm);
}
.wf-timecode{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-mute);
  letter-spacing:.1em;
  padding-top:6px;
}
.wf-num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:300;
  font-size:56px;
  color:var(--accent);
  line-height:1;
}
.wf-step h3{
  font-family:var(--font-display);
  font-size:36px;
  font-weight:400;
  line-height:1.1;
  margin-bottom:12px;
  letter-spacing:-0.01em;
}
.wf-step p{
  color:var(--ink-dim);
  font-size:15px;
  max-width:640px;
  line-height:1.65;
}
.wf-demo{
  margin-top:20px;
  padding: 14px 18px;
  background:var(--bg);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:10px;
  max-width: 640px;
}
.prompt-caret{color:var(--accent); font-size:16px}
.prompt-text::after{
  content:"▋";
  color:var(--accent);
  animation: blink 1s step-end infinite;
  margin-left:4px;
}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   SHOWCASE
   ============================================================ */
.showcase{
  background: var(--bg-warm);
  padding: 0 60px 120px;
  position:relative; z-index:1;
}
.show-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
}
.show-card{
  cursor:pointer;
  transition: transform .4s;
}
.show-card:hover{transform:translateY(-6px)}
.show-card-1, .show-card-4{grid-row: span 1}
.show-card-2{transform: translateY(40px)}
.show-card-2:hover{transform: translateY(34px)}
.show-card-5{transform: translateY(40px)}
.show-card-5:hover{transform: translateY(34px)}

.show-frame{
  position:relative;
  aspect-ratio: 4/5;
  background: var(--bg-card);
  overflow:hidden;
  margin-bottom:16px;
}
.show-poster{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg,
      hsl(var(--hue), 60%, 18%),
      hsl(calc(var(--hue) + 40deg), 55%, 8%)),
    radial-gradient(circle at 30% 40%, hsl(var(--hue), 80%, 40%), transparent 50%);
  background-blend-mode: screen;
  filter: contrast(1.1) saturate(1.1);
  transition: transform .6s;
}
.show-card:hover .show-poster{transform:scale(1.04)}
.show-poster::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.6) 100%),
    repeating-linear-gradient(0deg,
      transparent 0, transparent 3px,
      rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 4px);
}
.show-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition: opacity .3s;
  background: rgba(10,9,6,.4);
}
.show-card:hover .show-overlay{opacity:1}
.show-play{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  transform: translateX(2px);
}
.show-card figcaption{
  display:flex; flex-direction:column; gap:4px;
}
.show-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
}
.show-meta{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:.08em;
}

.show-cta{
  text-align:center;
  margin-top: 80px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{
  padding: 0 60px 120px;
  position:relative; z-index:1;
}
.t-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width:1400px;
  margin: 0 auto;
}
.t-card{
  padding: 36px 32px;
  background:var(--bg-card);
  border-top: 3px solid var(--accent);
  position:relative;
}
.t-card::before{
  content:"“";
  position:absolute;
  top: 0; left: 24px;
  font-family:var(--font-display);
  font-size:120px;
  line-height:1;
  color:var(--accent);
  opacity:.2;
}
.t-card p{
  font-family:var(--font-serif-cn);
  font-size:17px;
  line-height:1.7;
  margin-bottom:28px;
  color:var(--ink);
  position:relative;
  z-index:1;
}
.t-card footer{
  display:flex; flex-direction:column; gap:2px;
  border-top: 1px solid var(--line);
  padding-top:16px;
}
.t-card strong{
  font-weight:600;
  font-size:15px;
}
.t-card span{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:.1em;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  background:var(--bg);
  padding: 160px 60px;
  text-align:center;
  position:relative; z-index:1;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(232,81,58,0.12), transparent 60%);
  pointer-events:none;
}
.fc-countdown{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
  letter-spacing:.3em;
  margin-bottom: 32px;
  position:relative;
}
.fc-title{
  font-family:var(--font-display);
  font-size: clamp(48px, 8vw, 128px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-0.02em;
  margin-bottom: 28px;
  position:relative;
}
.fc-emph{
  font-family:var(--font-serif-cn);
  font-weight:900;
  color:var(--accent);
  font-style: normal;
}
.fc-sub{
  font-size:17px;
  color:var(--ink-dim);
  margin-bottom: 48px;
  position:relative;
}
.fc-actions{
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  position:relative;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding: 80px 60px 0;
  background: var(--bg);
  position:relative; z-index:1;
  overflow:hidden;
}
.foot-main{
  display:grid;
  grid-template-columns: 1.2fr 3fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.foot-logo{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  letter-spacing:.05em;
  margin-bottom:14px;
}
.foot-tag{
  font-family:var(--font-serif-cn);
  font-size:16px;
  color:var(--ink-dim);
  margin-bottom:24px;
}
.foot-copy{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-mute);
  letter-spacing:.05em;
}
.foot-cols{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.foot-col h5{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  letter-spacing:.2em;
  margin-bottom: 20px;
  font-weight:600;
}
.foot-col a{
  display:block;
  font-size:14px;
  color:var(--ink-dim);
  padding: 6px 0;
  transition: color .2s, transform .2s;
}
.foot-col a:hover{color:var(--ink); transform: translateX(4px)}

.foot-mega{
  font-family:var(--font-display);
  font-size: clamp(100px, 18vw, 280px);
  font-weight:300;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  text-align:center;
  line-height:1;
  margin-top: 40px;
  user-select:none;
  pointer-events:none;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 960px){
  .nav{padding: 16px 20px}
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-cta{padding: 8px 14px; font-size:12px}

  .hero-grid{
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 24px;
  }
  .hero-meta{
    position:static;
    border:none;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: 16px 0;
    display:flex; flex-wrap:wrap; gap:14px;
  }
  .meta-row{border:none; padding:0; font-size:10px}

  .hero-title{font-size: clamp(48px, 14vw, 80px)}
  .hero-lede{font-size:15px}
  .lede-accent{font-size:17px}

  .stats{grid-template-columns: repeat(2, 1fr)}
  .stat{padding: 28px 18px; border-bottom:1px solid var(--line)}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  .stat:nth-child(even){border-right:none}

  .section-head, .capabilities, .workflow, .showcase, .testimonials{
    padding-left:20px; padding-right:20px;
  }
  .section-head{padding-top:80px; padding-bottom:40px}

  .cap-grid{grid-template-columns: 1fr}
  .cap-large{grid-row:auto; grid-column:auto; min-height:auto}
  .cap-large h3{font-size:36px}

  .wf-step{
    grid-template-columns: 1fr;
    gap:14px;
    padding: 32px 0 32px 40px;
  }
  .workflow-steps::before{left:20px}
  .wf-step::before{left:17px; top:36px}

  .show-grid{grid-template-columns: 1fr 1fr; gap:16px}
  .show-card-2, .show-card-5{transform:none}
  .show-card-2:hover, .show-card-5:hover{transform:translateY(-6px)}

  .t-grid{grid-template-columns: 1fr}

  .final-cta{padding: 80px 20px}

  .foot{padding: 60px 20px 0}
  .foot-main{grid-template-columns: 1fr; gap:40px}
  .foot-cols{grid-template-columns: repeat(2, 1fr); gap:24px}

  .film-edge{display:none}
}