We need respond with CSS only, no markdown. Need rewrite visual identity while preserving selectors and layout. Need fresh palette, different from original indigo? Target style symmetric-grid, effect tight-rhythm. Need conservative: don't change layout, but can change colors etc. Must ensure previous files used card-mosaic+flat-solid. This file values differ. Need choose palette not indigo maybe teal/emerald? But target says symmetric-grid "Strict equal grids: repeat(3,1fr) or repeat(4,1fr)" and uniform gap 24px. But original has grid-template columns already. We can't change layout. Changing gap? Within ±20%, but target says uniform gap 24? Original gap var --space-gap:1.25rem=20px. We could change to 1.5rem=24px? ±20% allowed. But tight-rhythm says compact gap 8-12. Conflict: target symmetric-grid says uniform 24, effect tight-rhythm says compact 8-12. Our "variant.css" perhaps should implement tight-rhythm? The prompt says "TARGET STYLE: symmetric-grid" and "EFFECT VARIANT: tight-rhythm". Need likely use tight-rhythm specifics: padding 8-16, gap 8-12, small radius 2-6, subtle shadows. But original uses space-card 1.5rem (24px), gap 1.25rem (20px). Can adjust within ±20%, so gap could be 1rem (16px) or 1.1? Tight says gap 8-12, but max adjustment 20% allows only 20px to 16px or 24px. Gap 16 > 12. Maybe not enforce exact. We can set --space-gap: 0.75rem? From 1.25 to .75 is -40%, not allowed. Hmm. Rules say keep gap similar values ±20% max. So cannot go to 12. Need keep 1.25±0.25, so 1rem-1.5rem. Let's set 1.125rem (18px), within 10%? Actually 1.125/1.25=90%. 1rem=80%. Let's use 1.125rem maybe 18px, but target symmetric uniform gap? Need all gaps equal? Original var used multiple gaps. Could set all to var --space-gap or similar.

Need choose colors. Since previous files used card-mosaic+flat-solid, our file must differ. Original used indigo. Need fresh palette: How about deep teal/emerald? Or warm coral? "balanced harmonious palette". Let's choose "emerald/forest" but maybe overused. Need strict equal grid effect maybe symmetric. Need small radius. Let's pick a palette: muted green plus amber accent? Or "slate + emerald". Need CSS variables values.

Need not use comments? It says only CSS. We can include comments? Original has comments. Fine. No ``. Could retain section comments.

Need preserve all selectors exactly. Let's inspect CSS selectors.

Original:
```
:root { ... }

/* 基础覆盖 */
body { color: var(--color-text); line-height: var(--body-line-height); }
h1, h2, h3, h4 { font-weight: var(--heading-weight); }
section, .section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.card, [class*="card"] { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-card); transition: var(--transition); }
.btn, button[class*="btn"], a[class*="btn"] { border-radius: var(--radius-md); transition: var(--transition); }
a:not([class]) { color: var(--color-primary); transition: var(--transition); }

/* section layouts */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); }
.news-grid > *:first-child { grid-column: span 3; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-gap) * 1.5); }
.hero-content { text-align: center; max-width: 800px; margin: 0 auto; }
.testimonial-list { display: flex; overflow: hidden; } 
.testimonial-list > * { flex: 0 0 100%; }
.partner-grid { display: flex; gap: 2rem; overflow: hidden; animation: partnerScroll 20s linear infinite; }
@keyframes partnerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.faq-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
.stats-grid { display: flex; justify-content: center; gap: 3rem; }
.cta-section { background: var(--color-primary); color: #fff; padding: 4rem 2rem; }
.page-main { max-width: 860px; margin: 0 auto; }

/* Responsive */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .feature-list { grid-template-columns: repeat(2, 1fr) !important; }
    .partner-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    :root { --space-section: 2rem; --space-card: 1rem; --space-gap: 0.75rem; }
    .news-grid { grid-template-columns: 1fr !important; }
    .feature-list { grid-template-columns: 1fr !important; }
    .faq-list { grid-template-columns: 1fr !important; }
    .testimonial-list { column-count: 1 !important; }
    .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cta-inner { grid-template-columns: 1fr !important; }
}
```

Need preserve all selector text including `> *:first-child`, `a:not([class])`, etc. Layout properties unchanged. But gap can change? "gap, row-gap, column-gap (keep similar)" — within ±20% maybe. We can set gap values to var or different but must not be wildly different. Original `feature-list gap: calc(var(--space-gap) * 1.5)` equivalent 30px. If we change --space-gap to 1rem, then feature-list =24px, original 30px, -20%, okay. partner-grid gap 2rem=32px; could leave. stats gap 3rem=48px; leave or adjust 2.5rem? ±20% maybe 48 -> 40. Could change to 2.5rem. But maybe not necessary. Since we want "tight-rhythm" but layout must remain similar. We can adjust within allowed.

Need think about "Other files already used: card-mosaic+flat-solid. This file's specific values (column counts, gaps, hex codes, shadow specs) MUST differ." We must ensure our CSS differs from other files but we don't have them. That's fine. Need ensure column counts remain as original; not changing.

Need choose radical color palette. Original indigo/purple. Let's use maybe dark forest green with lime accent? E.g., `--color-primary: #0f766e` (teal-700), `--color-primary-dark: #115e59`, `--color-accent: #2dd4bf`, `--color-surface: #f0fdfa`, `--color-text: #042f2e`, `--rgb-primary: 15,118,110`, `--rgb-accent: 45,212,191`. That's teal. Better differ from indigo. Shadows: maybe use dark teal tinted shadows. Radius: tight 2-6px. Original radius scale 8/16/24/32. Need small border-radius (2-6px). Set `--radius-sm: 3px; --radius-md: 5px; --radius-lg: 6px; --radius-xl: 10px;` But `--radius-xl` maybe not used; if used elsewhere? We can set. Ensure pill replaced by small radius. Need maybe root background? no. But could add `background: var(--color-surface)` to body? Original didn't. Can add new property? Yes visual design can add colors, but not layout. However conservative says can change colors. Adding background to body is visual. But "body" selector already exists; we can add `background` and maybe color? Should be okay. But must be careful not to alter layout. `background` doesn't affect layout. Could include. But maybe unnecessary.

Need shadows "multilayer" to be distinct. Tight rhythm subtle shadows or none. Use very subtle shadows. Original had medium shadow with black 0.1 etc. Need redesign significantly. Use smaller offsets, teal tinted, maybe 3-layer. Example:
`--shadow-sm: 0 1px 2px rgba(15,118,110,.06), 0 1px 1px rgba(15,118,110,.04);`
`--shadow-md: 0 2px 4px rgba(15,118,110,.06), 0 1px 2px rgba(15,118,110,.04);`
`--shadow-lg: 0 4px 8px rgba(15,118,110,.08), 0 2px 4px rgba(15,118,110,.04);`
But original used 0 10px 15px; we can make more subtle. Maybe include shadow color with teal. Need distinct from card-mosaic+flat-solid perhaps flat-solid had no shadows. Our subtle shadows okay.

Need transitions: original `0.1s ease`. Tight rhythm/instant? Original transition instant. Could change easing/duration to fresh: `0.18s cubic-bezier(.4,0,.2,1)` or `0.15s ease-out`. Need "transition timing, easing, duration" must change. Let's set `--transition: 0.16s cubic-bezier(.4,0,.2,1);`

Need custom props maybe add `--space-section: 4.5rem?` Original 4rem. Within ±20%, okay. Could set 4.25rem maybe. But target tight spacing says compact. Mobile could be 2rem. Keep original? Need not change layout? Since padding can vary ±20%. Original desktop 64px; can set 3.5rem (56px) 12.5% lower, okay. `--space-card` original 1.5rem (24px); tight padding 8-16 suggests maybe set 1rem (16px) but -33% not allowed. Wait ±20% allowed, so 24 -> 20px (1.25rem) is lower by 16.7%. Use `--space-card: 1.25rem`. `--space-gap`: original 1.25rem (20px); set 1rem (16px) -20%. That's within. Could set exactly 1rem. Then in media 640 original `--space-gap: 0.75rem` 12px, -40% from original? Actually from original mobile 0.75, set 0.75 okay. Could keep mobile value as original or adjust maybe 0.625rem (10px), +? Wait original mobile at 0.75rem=12px, set 0.625=10px, -16.7%, okay. But original media sets :root overrides; we can change to `0.625rem`. Similarly `--space-card` mobile original 1rem=16px, could set 0.875=14px; but tight enough.

Need preserve `@media` selectors exactly. But inside, can change values like grid-template? It says layout columns can't change. The original media changes grid-template columns; we must preserve exact declarations because selector and layout. We can keep values. But if "fresh" maybe don't change. Need preserve all. We can change maybe `gap` inside? Not there. Fine.

Need "symmetric-grid" target style maybe wants uniform gaps. Original uses various gaps. We can define `--space-gap: 1rem` and change explicit gaps to var? But altering gap values within ±20%. Example `feature-list gap: calc(var(--space-gap) * 1.5)` = 24px, from 30px -20%. `partner-grid gap: 2rem` (32px) can perhaps set to `var(--space-gap) * 1.5` = 24px, -25%? Wait original 32 -> 24 = -25%, exceeds 20%. Could set `1.5rem`? 32 ->24? Actually 1.5rem=24. So -25. Maybe use `1.75rem` (28px) = -12.5. Or `calc(var(--space-gap) * 1.5)` with var=1.125rem =>27px, -15.6%. Alternatively set `gap: 1.75rem`. Need maybe values differ but similar. `faq-wrapper gap: 2rem` (32px) can set `1.75rem` 28px. `stats-grid gap: 3rem` (48px) can set `2.5rem` 40px (-16.7%) or `2.75rem` 44 (-8.3%). Need uniform gap? Not necessary. But target "Uniform gap (24px throughout)" in aggressive. Since conservative can't. We could set `--space-gap: 1.125rem` (18) and use it for news. For feature-list `calc(2 * 1.125)=36? Original feature 30, 36 +20 exactly. Hmm. Too big. Better `--space-gap: 1rem`, feature 24. Partner 1.5rem? 32 to 24 -25 exceeds. Use `1.75rem` 28. FAQ 1.75, stats 2.5.

Need maybe preserve line-height? Must not change `--body-line-height: 1.7`? It's typography, cannot change? It says typography fixed: line-height unchanged. Since it's in custom properties, should preserve. We should keep same. We can keep `--heading-weight:600`. Can't change. Good.

Need `--space-section` and `--space-card` etc layout spacing variables, can adjust within ±20%. Keep approximate. Let's choose:
`--space-section: 3.5rem;` (56 vs 64, -12.5%)
`--space-card: 1.25rem;` (20 vs 24, -16.7%)
`--space-gap: 1rem;` (16 vs 20, -20%)
In mobile, original `--space-section: 2rem; --space-card: 1rem; --space-gap: 0.75rem;`. Could change to `--space-section: 1.75rem;` (-12.5%), `--space-card: 0.875rem;` (-12.5% from 1rem? Actually .875 = 14px, -12.5%), `--space-gap: 0.625rem;` (10px, -16.7%). But if media :root overrides, gap 10. Need not? Fine.

Could maybe remove `!important`? No, preserve selector and property? It's part of declaration value? We should preserve exact `!important`? Not necessarily? Better to preserve because layout? Keep `!important` exactly.

Need "outline styles" maybe not used. Could add `outline`? not needed. Could change no.

Need "filter, backdrop-filter" maybe add to cards? The prompt says must change if present. Not present, no need. Could add? Not necessary. Maybe add `backdrop-filter`? But cards not transparent. Skip.

Need "border-color and border-style" no borders. Could add borders to cards? Visual identity but could affect box layout? Border adds dimensions unless box-sizing border-box? Default? Could alter. Better not add. But maybe `outline` doesn't affect layout. But no.

Need possibly `accent-color`, `caret-color` not present. Could add to :root? Eh.

Need maybe change `background` of `.cta-section` from primary to gradient/color. Could set `background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));`. This changes background but not layout. Good. Need text white remains. Fine.

Need "colors throughout file replaced with fresh palette". Need replace `#fff` too? It says color values. Could use `#f8fafc` or `#ecfeff`. Since text on cta should be light. Use `#f0fdfa` (surface). But white okay maybe not "fresh"? Better use `#f8fafc`. But original `color: #fff` is color; must change to `var(--color-surface)`? If surface is pale green, then on primary background still readable. Use `#f0fdfa`. But "surface" is background, maybe okay.

Need variable names? We can keep same to preserve code. Only values changed. Good.

Need maybe change `--rgb-primary` and `--rgb-accent` values. Keep names. Ensure no other code uses. Fine.

Need be careful with `:root` custom properties: We can add new vars? Not necessary. Could add `--color-primary-soft`? New variable names okay? It doesn't break layout. But maybe avoid extra.

Need "Symmetric-grid" maybe use equal columns; current news 3, feature 2, hero etc. Could not change.

Need perhaps