:root { --ink:#f7f1f5; --muted:#a99da5; --pink:#ff3d9a; --pink-soft:#ff70b5; --line:rgba(255,100,172,.22); --black:#060406; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--black); }
body { color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; background:radial-gradient(circle at 88% 8%,rgba(105,12,57,.32),transparent 32rem),radial-gradient(circle at 15% 60%,rgba(75,14,48,.18),transparent 34rem),var(--black); }
a { color:inherit; text-decoration:none; }
main { min-height:100vh; overflow:hidden; }
.site-header { width:min(1400px,calc(100% - 64px)); height:88px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:2; }
.brand { display:inline-flex; align-items:center; gap:12px; width:max-content; font-size:13px; font-weight:800; letter-spacing:.22em; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#160610; background:linear-gradient(145deg,#ff2f94,#ff70b5); box-shadow:0 0 25px rgba(255,61,154,.35); letter-spacing:0; }
nav { display:flex; gap:38px; color:#756a71; font-size:14px; }
.header-cta { justify-self:end; padding:11px 16px; border:1px solid var(--line); border-radius:999px; color:#ffc2df; font-size:13px; font-weight:700; }
.hero { width:min(1400px,calc(100% - 64px)); min-height:calc(100vh - 88px); margin:0 auto; padding:48px 0; display:grid; grid-template-columns:.96fr 1.04fr; align-items:center; gap:72px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--pink-soft); font-size:12px; font-weight:800; letter-spacing:.24em; }
.eyebrow span { width:22px; height:2px; background:var(--pink); box-shadow:0 0 12px var(--pink); }
h1 { max-width:760px; margin:28px 0 26px; font-size:clamp(56px,5.7vw,96px); font-weight:800; line-height:1.04; letter-spacing:-.065em; }
.hero-lede { max-width:620px; margin:0; color:var(--muted); font-size:18px; line-height:1.9; }
.button { min-height:52px; margin-top:38px; padding:0 25px; display:inline-flex; align-items:center; gap:20px; border-radius:12px; color:#160610; background:linear-gradient(135deg,#ff2f91,#ff72b7); box-shadow:0 12px 44px rgba(255,47,145,.18); font-size:15px; font-weight:800; transition:transform .2s ease; }
.button:hover { transform:translateY(-2px); }
.hero-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:46px; }
.hero-tags span { padding:8px 12px; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#8d8188; font-size:12px; }
.hero-art { height:min(610px,calc(100vh - 170px)); position:relative; overflow:hidden; border:0; border-radius:28px; background:#050305; box-shadow:0 40px 100px rgba(0,0,0,.5); }
.hero-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,3,5,.7),transparent 35%),linear-gradient(0deg,rgba(5,3,5,.5),transparent 30%); }
.hero-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 48%; filter:contrast(1.08) saturate(1.04); }
.art-status { position:absolute; z-index:1; top:24px; right:24px; padding:10px 13px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#b8acb3; background:rgba(9,6,8,.72); backdrop-filter:blur(10px); font:700 10px/1 Arial; letter-spacing:.16em; }
.art-status i { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#70efad; box-shadow:0 0 10px #70efad; }
@media (max-width:900px) { .site-header{width:calc(100% - 32px);height:72px;grid-template-columns:1fr auto}.brand{font-size:11px}.brand-mark{width:28px;height:28px}nav{display:none}.header-cta{padding:9px 12px;font-size:12px}.hero{width:calc(100% - 32px);min-height:auto;padding:64px 0 70px;grid-template-columns:1fr;gap:36px}.hero-art{order:-1;height:490px}.hero-art img{object-position:center 43%}h1{font-size:clamp(48px,14vw,70px)}.hero-lede{font-size:16px}.hero-tags{margin-top:30px} }