:root { color-scheme:dark; --bg:#061012; --band:#0b1718; --panel:#111f20; --text:#f1f8f7; --muted:#a8b9b8; --line:#294042; --teal:#4fd5cf; --coral:#ff806f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:auto; }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 5vw; border-bottom:1px solid var(--line); background:#061012; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark { display:block; flex:0 0 34px; width:34px; height:34px; border-radius:6px; background-image:url('/official-assets/yingling-cut-y.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; }
nav { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:14px; }
nav a:hover, footer a:hover { color:var(--teal); }
.api-link { padding:8px 12px; border:1px solid var(--teal); border-radius:6px; color:var(--text); }
.hero { position:relative; min-height:82svh; display:flex; align-items:center; padding:72px 7vw 84px; background-color:#081315; background-image:url('/official-assets/home-deep-1440-900.png'); background-repeat:no-repeat; background-size:cover; background-position:center; isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(2,10,11,.58); }
.hero-copy { max-width:720px; }
.category, .section-heading p { margin:0 0 10px; color:var(--teal); font-size:14px; font-weight:700; text-transform:uppercase; }
h1 { margin:0; font-size:68px; line-height:1.05; }
.hero-text { max-width:670px; margin:22px 0 30px; font-size:20px; color:#e3eeee; text-shadow:0 1px 3px #000; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.primary-action, .secondary-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:6px; font-weight:700; }
.primary-action { background:var(--teal); color:#061012; }
.secondary-action { border:1px solid var(--coral); background:#081315; }
.hero-caption { position:absolute; right:4vw; bottom:22px; margin:0; color:#d6e3e2; font-size:13px; }
.band { padding:80px 7vw; border-top:1px solid var(--line); }
.band:nth-of-type(odd) { background:var(--band); }
.section-heading { max-width:720px; margin-bottom:36px; }
h2 { margin:0; font-size:38px; line-height:1.2; }
.workflow-list { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0; padding:1px; background:var(--line); }
.workflow-list li { min-height:190px; padding:24px; background:var(--bg); }
.workflow-list b { display:block; color:var(--coral); font-size:13px; }
.workflow-list span { display:block; margin:26px 0 8px; font-size:20px; font-weight:700; }
.workflow-list small { color:var(--muted); font-size:14px; }
.mode-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.mode-grid article { min-height:180px; padding:22px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.mode-grid article:nth-child(even) { border-top-color:var(--coral); }
.mode-grid h3 { margin:0 0 14px; font-size:19px; }
.mode-grid p, .delivery p { margin:0; color:var(--muted); }
.screen-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.screen-grid figure { margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); }
.screen-grid .screen-wide { grid-column:1 / -1; }
.screen-grid img { aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
.screen-grid figcaption { min-height:54px; padding:14px 16px; color:var(--muted); font-size:14px; }
.delivery { display:flex; align-items:end; justify-content:space-between; gap:32px; }
.delivery div { max-width:760px; }
.delivery p:last-child { margin-top:18px; }
footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 7vw; border-top:1px solid var(--line); color:var(--muted); }
@media (max-width:1000px) { .mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .workflow-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .screen-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .topbar { align-items:flex-start; padding:14px 20px; } nav a:not(.api-link) { display:none; } .hero { min-height:78svh; padding:62px 22px 74px; background-position:62% center; } h1 { font-size:48px; } .hero-text { font-size:17px; } .band { padding:58px 22px; } h2 { font-size:30px; } .workflow-list, .mode-grid, .screen-grid { grid-template-columns:1fr; } .screen-grid .screen-wide { grid-column:auto; } .delivery, footer { align-items:flex-start; flex-direction:column; } }