/* siteQF08: native CSS glassmorphism with solid fallback */
:root { --bg:#0a0e27; --bg2:#1a1145; --surface:rgba(20,28,70,.68); --surface-solid:#151b3d; --text:#eef3ff; --muted:#b8c1dc; --line:rgba(255,255,255,.13); --accent:#6d8fd8; --accent-rgb:109,143,216; --radius:14px; --shell:1210px; --gap:28px; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:0; overflow-x:clip; color:var(--text); font-family:"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; background:radial-gradient(circle at 88% 8%, rgba(var(--accent-rgb),.18), transparent 27rem), linear-gradient(145deg,var(--bg) 0%,#10143a 48%,var(--bg2) 100%); line-height:1.75; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:43px 43px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.shell { width:min(calc(100% - 48px),var(--shell)); margin-inline:auto; }
.topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(10,14,39,.86); backdrop-filter:blur(18px) saturate(130%); }
.nav-shell { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:800; letter-spacing:.04em; }
.site-logo { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#081126; background:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); font-family:Arial,sans-serif; font-weight:900; }
.nav-links { display:flex; align-items:center; gap:clamp(16px,2vw,28px); white-space:nowrap; font-size:14px; color:var(--muted); }
.nav-links a:hover { color:var(--text); }
.menu-toggle { display:none; border:1px solid var(--line); color:var(--text); background:var(--surface); border-radius:10px; padding:8px 12px; }
.market-strip { overflow:hidden; border-bottom:1px solid var(--line); background:rgba(8,12,34,.72); }
.ticker-track { width:max-content; display:flex; align-items:center; animation:ticker 36s linear infinite; }
.ticker-copy { display:flex; }
.market-item { display:grid; grid-template-columns:auto auto auto; align-items:baseline; gap:9px; padding:11px 24px; border-right:1px solid var(--line); white-space:nowrap; font-family:Consolas,"Microsoft YaHei",sans-serif; }
.market-item b { font-size:13px; } .market-item span { font-size:14px; } .market-item em { font-size:12px; font-style:normal; color:var(--accent); } .market-item .down { color:#b9c3df; }
.market-strip>p { margin:0; padding:5px 24px 8px; text-align:center; color:var(--muted); font-size:12px; }
@keyframes ticker { to { transform:translateX(-50%); } }
.hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr); align-items:start; gap:clamp(30px,6vw,78px); padding-block:clamp(48px,7vw,88px); min-height:min(760px,calc(100dvh - 118px)); }
.hero-copy { padding-top:8px; }
.eyebrow { margin:0 0 16px; color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.14em; }
h1 { margin:0; max-width:20ch; font-size:clamp(38px,5.2vw,68px); line-height:1.13; letter-spacing:-.04em; text-wrap:balance; }
.hero-sub { max-width:34em; margin:22px 0 28px; color:var(--muted); font-size:clamp(17px,2vw,20px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 20px; border-radius:12px; font-weight:750; white-space:nowrap; transition:transform .25s ease,background .25s ease; }
.primary { color:#071127; background:var(--accent); } .secondary { color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.05); }
.primary:hover,.secondary:hover { transform:translateY(-2px); } .primary:active,.secondary:active,button:active { transform:translateY(1px); }
.hero-media { align-self:start; position:relative; border-radius:var(--radius); border:1px solid var(--line); padding:10px; background:var(--surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 70px rgba(5,8,30,.34); backdrop-filter:blur(18px) saturate(135%); }
img { display:block; max-width:100%; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:calc(var(--radius) - 6px); }
.hero-search { position:relative; margin:10px 0 0; padding:14px; border-radius:calc(var(--radius) - 5px); background:rgba(7,12,38,.9); }
.hero-search label { display:block; margin-bottom:7px; color:var(--muted); font-size:13px; } .hero-search>div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.hero-search input { min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); background:#0e1535; } .hero-search input::placeholder { color:#8f9ab9; }
.hero-search button,.play-button,.slider-controls button { border:1px solid rgba(var(--accent-rgb),.5); border-radius:10px; color:#071127; background:var(--accent); font-weight:750; cursor:pointer; }
.hero-search button { padding:8px 16px; } .hero-search>p { min-height:1.6em; margin:8px 0 0; color:var(--accent); font-size:12px; }
main>section:not(.hero) { margin-block:clamp(72px,9vw,118px); }
.section-copy { max-width:720px; margin-bottom:30px; }
h2 { margin:0; font-size:clamp(28px,4vw,46px); line-height:1.22; letter-spacing:-.025em; }
h3 { margin:0 0 8px; font-size:clamp(19px,2vw,25px); line-height:1.35; }
p { margin:0; } .section-copy p,.article-heading p { margin-top:12px; color:var(--muted); }
.dashboard { display:grid; grid-template-columns:.8fr 1.2fr; gap:36px; align-items:end; padding:28px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(130deg,rgba(var(--accent-rgb),.13),rgba(255,255,255,.035)); }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-radius:calc(var(--radius) - 5px); overflow:hidden; background:var(--line); }
.metric { min-width:0; padding:22px 14px; background:#11183c; text-align:center; } .metric strong { font:800 clamp(28px,4vw,48px)/1 Arial,sans-serif; color:var(--accent); } .metric>span { margin-left:4px; font-size:12px; } .metric p { margin-top:8px; color:var(--muted); font-size:12px; }
.service-grid { display:grid; grid-template-columns:1.25fr .75fr; grid-template-areas:"a b" "a c"; gap:var(--gap); }
.service-card { display:grid; gap:20px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); backdrop-filter:blur(15px); } .service-1 { grid-area:a; } .service-2 { grid-area:b; } .service-3 { grid-area:c; }
.service-card p,.news-card p,.video-card>p { color:var(--muted); } .service-card a,.news-card a,.text-link { display:inline-block; margin-top:13px; color:var(--accent); font-weight:700; }
.layout-2 .service-grid,.layout-7 .service-grid { grid-template-columns:.85fr 1.15fr; grid-template-areas:"b a" "c a"; }
.layout-5 .service-grid,.layout-10 .service-grid { grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c"; }
.news-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:var(--gap); } .news-card { display:grid; grid-template-columns:minmax(210px,.8fr) 1.2fr; gap:20px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); } .news-card:first-child { grid-row:span 2; display:block; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.04); } .news-card:first-child>div:last-child { padding-top:18px; }
.date-line { color:var(--accent); font-size:12px; } .news-card h3 { margin-top:5px; }
.layout-4 .news-grid,.layout-9 .news-grid { grid-template-columns:.9fr 1.1fr; }
.process { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:clamp(30px,6vw,70px); } .process-content>p { margin:14px 0 22px; color:var(--muted); } .process ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; counter-reset:flow; } .process li { counter-increment:flow; position:relative; padding:18px; border-left:2px solid var(--accent); background:rgba(255,255,255,.035); } .process li::before { content:counter(flow); position:absolute; right:14px; top:10px; color:rgba(var(--accent-rgb),.45); font:800 24px Arial,sans-serif; } .process li p { color:var(--muted); font-size:14px; }
.layout-2 .process,.layout-5 .process,.layout-8 .process { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } .layout-2 .process-visual,.layout-5 .process-visual,.layout-8 .process-visual { order:2; }
.video-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:start; } .video-card { min-width:0; } .video-frame { position:relative; padding:9px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .play-button { position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%; font-size:20px; } .play-button:active { transform:translate(-50%,-48%); } .video-state { position:absolute; left:16px; right:16px; bottom:14px; padding:7px 10px; border-radius:9px; color:var(--text); background:rgba(6,10,31,.88); font-size:12px; } .video-card h3 { margin-top:14px; }
.layout-3 .video-grid,.layout-6 .video-grid { grid-template-columns:.8fr 1.2fr; }
.testimonials { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:clamp(28px,6vw,70px); align-items:start; } .voice-image { align-self:start; } .slider-panel { padding:clamp(24px,4vw,48px); border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(140deg,rgba(var(--accent-rgb),.12),rgba(255,255,255,.03)); } .slider { min-height:210px; display:grid; align-items:center; } .testimonial-card { display:none; margin:0; } .testimonial-card.active { display:block; animation:fadeIn .45s ease; } blockquote { margin:28px 0; font-size:clamp(20px,2.8vw,32px); line-height:1.5; } figcaption { display:flex; flex-direction:column; } figcaption span { color:var(--muted); } .slider-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; } .slider-controls button { padding:8px 14px; } @keyframes fadeIn { from { opacity:.35; transform:translateY(5px); } }
.layout-4 .testimonials,.layout-10 .testimonials { grid-template-columns:1.25fr .75fr; } .layout-4 .voice-image,.layout-10 .voice-image { order:2; }
.feature-article { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); gap:clamp(32px,7vw,90px); align-items:start; } .article-heading { position:sticky; top:100px; } .article-body { max-width:780px; } .article-body p { margin-bottom:20px; color:#d5ddf2; } .article-body p:first-child { color:var(--text); font-size:18px; }
.layout-3 .feature-article,.layout-6 .feature-article,.layout-9 .feature-article { grid-template-columns:1fr; } .layout-3 .article-heading,.layout-6 .article-heading,.layout-9 .article-heading { position:static; max-width:760px; }
.faq { display:grid; grid-template-columns:.55fr 1.45fr; gap:clamp(30px,6vw,70px); align-items:start; } details { padding:18px 0; border-bottom:1px solid var(--line); } summary { cursor:pointer; font-weight:750; } details p { padding-top:12px; color:var(--muted); }
.footer { margin-top:110px; border-top:1px solid var(--line); background:rgba(7,10,31,.78); } .footer-main { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; padding-block:50px 30px; } .footer-main>div:first-child p { max-width:620px; margin-top:16px; color:var(--muted); } .contact h2,.badge-area h2,.friend-area h2 { font-size:18px; } .contact p { color:var(--muted); } .badge-area,.friend-area { padding-block:22px; border-top:1px solid var(--line); } .badge-area>p { margin:8px 0 14px; color:var(--muted); font-size:13px; } .badges,.friend-links { display:flex; flex-wrap:wrap; gap:10px; } .badges span { padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); font-size:13px; } .badges small { display:block; color:var(--muted); } .friend-links a { padding:5px 10px; color:var(--muted); } .friend-links a:hover { color:var(--accent); } .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-block:20px 30px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
.inner-shell { padding-block:40px 20px; } .breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; color:var(--muted); font-size:13px; } .breadcrumb a { color:var(--accent); } .longform { max-width:920px; margin:0 auto; padding:clamp(24px,5vw,56px); border:1px solid var(--line); border-radius:var(--radius); background:rgba(14,20,55,.66); backdrop-filter:blur(16px); } .longform>header { padding-bottom:24px; border-bottom:1px solid var(--line); } .longform>header span { display:block; margin-top:12px; color:var(--accent); } .longform .lead { margin:26px 0; color:var(--text); font-size:18px; } .longform section { margin:30px 0; } .longform section p,.longform>p { color:#d2daf0; } .inner-media { margin:28px 0; } .longform aside { margin-top:34px; padding:20px; border-left:3px solid var(--accent); background:rgba(var(--accent-rgb),.09); } .longform aside h3 { font-size:18px; } .longform aside p { color:var(--muted); } .variant-1 { max-width:1040px; } .variant-2 .inner-media { width:82%; margin-left:auto; } .variant-3 { border-top:3px solid var(--accent); } .variant-4 .lead { padding:18px; background:rgba(var(--accent-rgb),.08); }
@media (prefers-reduced-transparency:reduce) { .topbar,.hero-media,.service-card,.longform { backdrop-filter:none; background:var(--surface-solid); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .ticker-track { animation:none; } }
@media (max-width:900px) { .dashboard,.feature-article,.faq { grid-template-columns:1fr; } .article-heading { position:static; } .metric-grid { grid-template-columns:1fr 1fr; } .news-grid { grid-template-columns:1fr; } .news-card:first-child { grid-row:auto; } .nav-links { gap:14px; font-size:13px; } }
@media (max-width:760px) { .shell { width:min(calc(100% - 32px),var(--shell)); } .nav-shell { min-height:64px; flex-wrap:wrap; padding-block:10px; } .menu-toggle { display:block; } .nav-links { display:none; width:100%; padding:8px 0 12px; flex-direction:column; align-items:stretch; white-space:normal; } .nav-links.open { display:flex; } .nav-links a { padding:7px 0; } .hero { grid-template-columns:1fr; min-height:0; padding-block:38px; gap:28px; } h1 { max-width:none; font-size:clamp(34px,11vw,48px); } .hero-copy { padding-top:0; } .dashboard { padding:20px; } .service-grid,.layout-2 .service-grid,.layout-5 .service-grid,.layout-7 .service-grid,.layout-10 .service-grid { grid-template-columns:1fr; grid-template-areas:"a" "b" "c"; } .news-card { grid-template-columns:1fr; } .process,.layout-2 .process,.layout-5 .process,.layout-8 .process,.video-grid,.layout-3 .video-grid,.layout-6 .video-grid,.testimonials,.layout-4 .testimonials,.layout-10 .testimonials,.footer-main { grid-template-columns:1fr; } .layout-2 .process-visual,.layout-5 .process-visual,.layout-8 .process-visual,.layout-4 .voice-image,.layout-10 .voice-image { order:0; } .process ol { grid-template-columns:1fr; } .video-state { position:static; margin-top:8px; } .footer-main { gap:32px; } .footer-bottom { flex-direction:column; } .longform { padding:22px; } .variant-2 .inner-media { width:100%; } }
@media (max-width:360px) { .shell { width:calc(100% - 24px); } .site-logo { width:36px; height:36px; } .hero-actions>a { width:100%; } .hero-search>div { grid-template-columns:1fr; } .metric-grid { grid-template-columns:1fr; } .market-item { padding-inline:16px; } .longform { padding:18px; } }