We need rewrite CSS with new palette, shadows, radius, gradients. Must not change selectors/layout. Target style "sidebar-classic" with two-column? But original CSS doesn't have sidebar? It has faq-with-sidebar etc. We can change colors and effects only, not layout. Need gradient-rich variant: linear-gradient/radial-gradient on most backgrounds, border-image maybe, multiple stops, smooth transitions 0.4-0.6s cubic-bezier.

We need preserve all selectors character-for-character? Yes. We can change property values inside declarations. But we cannot change display etc. We can add new properties? We can? Task says rewrite CSS visual identity, keep selectors. It says only colors, shadows, radius, gradients. Probably can add background gradients, border-image, etc. But adding new declarations is okay as long as layout unchanged. We should avoid changing structural values like gap? We can adjust within ±20%? It says gap similar. Original gaps 0.75rem etc. Keep.

Let's understand original selectors:

: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); }

/* news: featured-left */
.news-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: var(--space-gap); }
.news-grid > *:first-child { grid-row: span 2; }

/* features: centered */
.feature-list { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-gap) * 2); max-width: 720px; margin: 0 auto; }

/* hero: left-aligned */
.hero-content { text-align: left; max-width: 600px; }

/* testimonials: grid-3 */
.testimonial-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); }

/* partners: scroll */
.partner-grid { display: flex; gap: 2rem; overflow: hidden; animation: partnerScroll 20s linear infinite; }
@keyframes partnerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* faq: with-sidebar */
.faq-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }

/* stats: grid-4 */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-gap); text-align: center; }

/* cta: full-bg */
.cta-section { background: var(--color-primary); color: #fff; padding: 4rem 2rem; }

/* Page Layout: narrow-centered */
.page-main { max-width: 860px; margin: 0 auto; }

/* 条件性装饰 */
a:not([class]):hover { color: var(--color-accent); }
.card { border-left: 3px solid var(--color-primary); }

/* 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; }
}

We need refresh. We'll pick new palette "dark sidebar + lighter main, functional accent". Maybe deep teal/navy sidebar, warm cream main, vibrant coral/amber accent. But style "sidebar-classic" indicates darker sidebar #252e3a and main lighter. So CSS variables can set color-primary to #252e3a? But primary is used for accent. Need "Functional accent for actions". We can set --color-primary: #2b3a4a (dark slate), --color-primary-dark: #1c2733, --color-accent: #f59e0b (amber) or #f97316. --color-surface: #f8fafc (light slate), --color-text: #1e293b. But also use gradient-rich. However original body color uses --color-text. cta-section background var(--color-primary) and color white. If primary is dark slate, fine. But cards should be lighter. Need gradient-rich: add background gradients on body, cards, buttons, sections. Border-image on card maybe.

Need preserve selector list exact. We can change :root values. We can add background, border-image, etc. Need ensure "card" has border-left: 3px solid var(--color-primary); But within .card selector existing. We can change to border-image? But border-left selector in separate. If we use border-image on .card, won't affect border-left. Could add background gradients.

Need be careful with @keyframes partnerScroll: we can change animation duration/easing? It's a transform scroll; animation name preserved. It says @keyframes names unchanged. Values inside can change per instructions. But changing transform values might break scrolling. Don't change. Duration can change but keep 20s? We can change to 30s linear? That's visual. But original partners scroll, duration change okay. We'll probably keep to avoid layout weird. We can change animation to alternate? Keep.

Need not modify media queries? We can modify colors inside? Only those selectors have grid-template-columns. We can keep. We can't add colors unless add declarations. But okay.

We must output exactly CSS with no markdown. Ensure first char CSS.

Let's design new visual identity:

Variables:
--color-primary: #2b3a4a; (darker sidebar classic navy)
--color-primary-dark: #1e2a36;
--color-accent: #f59e0b; (amber)
--color-surface: #f7f9fc; (light gray blue)
--color-text: #243244;
--rgb-primary: 43,58,74;
--rgb-accent: 245,158,11;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--shadow-sm: 0 2px 6px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.02);
--shadow-md: 0 12px 32px -8px rgba(15,23,42,.15), 0 4px 12px rgba(15,23,42,.06);
--shadow-lg: 0 32px 64px -16px rgba(15,23,42,.25), 0 12px 28px rgba(15,23,42,.12);
--space-section: 2rem;
--space-card: 1rem;
--space-gap: 0.75rem;
--transition: 0.5s cubic-bezier(.22,1,.36,1);
--heading-weight: 600;
--body-line-height: 1.75;

Need ensure "gradient-rich" applied. We can add:
body { color: var(--color-text); line-height: var(--body-line-height); background: linear-gradient(145deg, #f7f9fc 0%, #edf2f7 100%); }
h1 etc maybe add background gradient? But no need.

section, .section { padding-top..., padding-bottom...; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.6) 100%); }

.card, [class*="card"] { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-card); transition: var(--transition); background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(255,255,255,.8); border-left: 4px solid var(--color-primary); } But original .card later has border-left 3px solid. If we add border-left to card, later .card selector will override? They are separate. Actually later `.card { border-left: 3px solid var(--color-primary); }` will override border-left width if combined. We'll change that later to 4px maybe. Also if we add border via border-image? Need more gradient-rich: maybe border-image on .card? But border-image on class [class*="card"] could apply to card. Let's think: If we put `border-image: linear-gradient(135deg, var(--color-primary), var(--color-accent)) 1;` in `.card, [class*="card"]`, then all cards get gradient border. But if also `border-left: 3px solid` later, it might conflict? Depending on order, `.card` later sets border-left. But `border-image` with `border: 1px solid transparent`? We can set border-width but not change? We're allowed border-style and border-color, not border-width. Original no border width on card; we can add `border: 1px solid`? Border-width adding is fine? Instruction says border-color/border-style changes, NOT border-width. That means we should not change border-width declarations. But adding a new border-width? Might be considered "border-width" change. Avoid adding border declarations with width? However original no border, adding border might not break layout? It could alter box sizing slightly but box-sizing likely border-box? Not specified. Better avoid adding border width. But we can add background gradients and box-shadow. For gradient border without adding border-width, we can use `outline`? Or use box-shadow inset? But instruction allows outline styles. We can use outline: 1px solid ... But that's not border-width. We can use outline and outline-offset. But if original no outline, okay. Yet outline doesn't affect layout. Use `outline: 1px solid rgba(...)`. That adds visual border.

To make gradient-rich on cards: use `background: linear-gradient(145deg, #ffffff, #f2f6fc)`. Add `outline: 1px solid rgba(255,255,255,.8); outline-offset: -1px;` and maybe `box-shadow` includes outer shadow. We can also add a pseudo-element? Selectors fixed, but could we add ::before/after? Not listed. We can't add selectors. So keep.

Need preserve selector list exactly: `.card, [class*="card"]` not changed. OK.

Buttons: `.btn, button[class*="btn"], a[class*="btn"] { border-radius: var(--radius-md); transition: var(--transition); }` We can add background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: ...; border: none? But border-width? no.

Could add `background-image` etc.

Need "functional accent for actions": set accent to amber. Could also `accent-color: var(--color-accent);` on root? That's a new property. Fine. caret-color: var(--color-accent).

Need "sidebar darker (#252e3a), main lighter" — we can make --color-primary: #252e3a exactly? Previously said #252e3a. Let's use #252e3a. --color-primary-dark: #1c232d. --color-accent: #e9a13b or #f0a63c. --color-surface: #f6f8fb. --color-text: #39424e. Good.

Need "Two-column structure: grid-template-columns: 280px 1fr" — but we can't change grid-template columns? Task target style says "Layout pattern (Aggressive only)" but we are in conservative. So not changing. However original has grid-template-columns: 2fr 1fr etc. We can't change. So just color.

Need "Moderate gap (24-32px)" — currently gap 0.75rem = 12px; 2rem = 32px. We can't change much per instructions? It says keep similar. 2rem stays. 0.75rem maybe could be 1rem? But that's 33% change, above ±20%. Keep.

Need "Smooth long transitions (0.4-0.6s cubic-bezier)" — set --transition: 0.5s cubic-bezier(.22,1,.36,1).

Need gradients on most backgrounds: Add body, section, cards, buttons, cta-section, page-main, etc. Also use conic/radial gradients on selectors.

Need "border-image": We can add border-image to `.card, [class*="card"]`? But border-image requires border. Cannot add border-width? We can perhaps set `border-style: solid; border-image: linear-gradient(...) 1;` But border-style without border-width won't show. Could set `border-width: 1px` but we're not allowed to change border-width? The instruction says "border-color and border-style (NOT border-width)" meaning in the original declarations if we encounter border-width, don't change. It doesn't necessarily forbid adding a border-width. But "NEVER CHANGE: border width" implies don't change values; adding a new border-width might not be changing. However to be safe, avoid.

Could use `outline: 1px solid transparent;` with `outline-image`? Outline-image is not widely supported. Or use `background-clip: padding-box` etc.

Maybe better to use double background with border? But border-width issue. Could add `box-shadow: inset 0 0 0 1px rgba(...)`; that creates a border-like line without border width. Good.

Let's plan selectors:

:root {
    --color-primary: #252e3a;
    --color-primary-dark: #1a212b;
    --color-accent: #eab308;
    --color-surface: #f5f7fa;
    --color-text: #2f3a47;
    --rgb-primary: 37,46,58;
    --rgb-accent: 234,179,8;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --shadow-sm: 0 2px 8px rgba(15,23,42,.07);
    --shadow-md: 0 12px 32px -8px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.06);
    --shadow-lg: 0 32px 64px -16px rgba(15,23,42,.28), 0 16px 32px rgba(15,23,42,.12);
    --space-section: 2rem;
    --space-card: 1rem;
    --space-gap: 0.75rem;
    --transition: 0.5s cubic-bezier(0.22,1,0.36,1);
    --heading-weight: 600;
    --body-line-height: 1.75;
    accent-color: var(--color-accent);
}

Need watch: custom properties only visual, okay.

body { color: var(--color-text); line-height: var(--body-line-height); background: radial-gradient(circle at 20% 0%, rgba(234,179,8,.08), transparent 45%), linear-gradient(160deg, var(--color-surface) 0%, #eef2f7 100%); }

h1, h2, h3, h4 { font-weight: var(--heading-weight); color: var(--color-primary-dark); } // adding color, okay.

section, .section { padding-top: var(--space-section); padding-bottom: var(--space-section); background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.55) 100%); }

.card, [class*="card"] { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-card); transition: var(--transition); background: linear-gradient(145deg, #ffffff 0%, var(--color-surface) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--shadow-md); } But if same property `box-shadow` appears twice? We can combine into one declaration. Use `box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--shadow-md);` But variable `--shadow-md` already includes box-shadow list. In CSS, var can be used as part of list. `box-shadow: inset 0 0 0 1px rgba(...), var(--shadow-md);` valid. Or set `--shadow-md` to include