@charset "UTF-8";
:root { --ink:#243044; --muted:#6f7785; --pink:#ff5d85; --coral:#ff846b; --cream:#fff8f5; --line:#eee5e5; --shadow:0 12px 32px rgba(40,35,55,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fffdfc; font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.7; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,252,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner,.container,.footer-inner { width:min(1180px,calc(100% - 40px)); margin:auto; }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.4px; white-space:nowrap; }
.brand span span { color:var(--pink); }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:linear-gradient(135deg,var(--pink),var(--coral)); border-radius:11px; }
.main-nav ul { display:flex; align-items:center; margin:0; padding:0; gap:4px; list-style:none; }
.main-nav a { display:flex; align-items:center; gap:5px; padding:8px 10px; color:var(--muted); border-radius:9px; font-size:14px; }
.main-nav a:hover,.main-nav a.active { color:var(--pink); background:#fff0f3; }
.nav-icon { font-size:15px; }
.menu-toggle { display:none; border:0; color:var(--pink); background:#fff0f3; font-size:20px; border-radius:8px; }
.hero { width:min(1180px,calc(100% - 40px)); margin:34px auto 0; min-height:420px; overflow:hidden; border-radius:24px; background:#342b42; position:relative; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .55s ease; }
.hero-slide.active { opacity:1; }
.hero-slide img { opacity:.58; }
.hero-copy { position:absolute; inset:auto 0 0; padding:54px; color:#fff; background:linear-gradient(transparent,rgba(17,15,25,.85)); }
.eyebrow { margin:0 0 8px; color:var(--pink); font-size:13px; font-weight:700; letter-spacing:1.4px; }
.hero-copy .eyebrow { color:#ffd4dd; }
.hero h1 { margin:0 0 6px; font-size:14px; font-weight:700; }
.hero h1 a { color:#fff; }
.hero h2 { max-width:650px; margin:0; font-size:clamp(28px,4vw,47px); line-height:1.2; }
.hero-copy p:last-of-type { max-width:560px; margin:16px 0 22px; }
.button { display:inline-block; padding:11px 18px; color:#fff; background:linear-gradient(90deg,var(--pink),var(--coral)); border-radius:999px; font-weight:700; box-shadow:0 8px 18px rgba(255,93,133,.23); }
.hero-dots { position:absolute; right:28px; bottom:26px; z-index:2; display:flex; gap:8px; }
.hero-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#fff8; cursor:pointer; }
.hero-dots button.active { width:26px; border-radius:10px; background:#fff; }
.content-section { margin-top:65px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-heading h2 { margin:0; font-size:26px; }
.section-heading a { color:var(--pink); font-size:14px; font-weight:700; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.video-card { height:100%; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); }
.image-frame { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#f3e8e9; }
.video-card img { transition:transform .35s ease; }
.video-card:hover img { transform:scale(1.05); }
.play { position:absolute; left:18px; bottom:15px; display:grid; width:38px; height:38px; place-items:center; color:#fff; background:#242033bf; border-radius:50%; font-size:13px; }
.card-body { min-height:177px; padding:17px 18px; }
.card-meta,.article-meta { margin:0; color:var(--pink); font-size:13px; }
.card-body h3 { margin:6px 0 8px; font-size:18px; line-height:1.45; }
.card-body p:last-child { margin:0; color:var(--muted); font-size:14px; }
.category-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.category-link { min-height:122px; padding:22px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,#fff,#fff6f7); box-shadow:var(--shadow); }
.category-link span { display:block; margin-bottom:7px; color:var(--pink); font-size:24px; }.category-link strong { font-size:18px; }.category-link p { margin:5px 0 0; color:var(--muted); font-size:14px; }
.about-panel { display:grid; grid-template-columns:1.2fr .8fr; gap:26px; padding:36px; background:var(--cream); border-radius:24px; }.about-panel h2 { margin:0 0 14px; font-size:27px; }.about-panel p { margin:0; color:#535d6e; }.about-note { align-self:center; padding:23px; color:#fff; background:linear-gradient(135deg,#5851a7,#e06c8c); border-radius:16px; font-size:18px; font-weight:700; }
.app-panel { display:flex; align-items:center; justify-content:space-between; gap:35px; width:min(1180px,calc(100% - 40px)); margin:68px auto 0; padding:36px 45px; color:#fff; background:linear-gradient(120deg,#252a5d,#7e477d); border-radius:24px; }.app-panel h2 { margin:0 0 10px; font-size:28px; }.app-panel p:not(.eyebrow) { max-width:580px; margin:0 0 21px; color:#e9e9fa; }.button-light { background:#fff; color:#4b356c; box-shadow:none; }.qr-card { display:grid; grid-template-columns:1fr 1fr; gap:4px; width:120px; min-width:120px; aspect-ratio:1; padding:12px; color:#352d63; background:repeating-conic-gradient(#fff 0 25%,#d8cced 0 50%) 50% / 20px 20px; border-radius:14px; }.qr-card span,.qr-card small { display:grid; place-items:center; background:#fff; text-align:center; font-weight:800; }.qr-card small { font-size:9px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; width:min(1180px,calc(100% - 40px)); margin:28px auto 0; padding:26px 0 34px; color:var(--muted); border-top:1px solid var(--line); font-size:13px; }.site-footer p { margin:9px 0 0; }.footer-brand { color:var(--ink); }
.breadcrumb { margin:31px 0 18px; color:var(--muted); font-size:14px; }.breadcrumb a { color:var(--pink); }.page-title { margin:0 0 10px; font-size:clamp(29px,5vw,42px); }.intro { max-width:800px; margin:0; color:var(--muted); }.article-shell { width:min(860px,calc(100% - 40px)); margin:0 auto; }.article-title { margin:0 0 12px; font-size:clamp(29px,5vw,43px); line-height:1.25; }.reading-note { margin:25px 0; padding:17px 20px; color:#5e5571; background:#fbf5fb; border-left:4px solid var(--pink); border-radius:0 12px 12px 0; }.article-content { margin-top:28px; }.article-content h2 { margin-top:36px; font-size:25px; }.article-content p { color:#4f5765; }.article-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.article-gallery figure { margin:0; }.article-gallery img { aspect-ratio:4/3; border-radius:13px; }.article-gallery figcaption { padding-top:6px; color:var(--muted); font-size:13px; }.end-note { margin:36px 0 0; padding:25px; text-align:center; background:var(--cream); border-radius:16px; }.end-note p { margin:0 0 16px; }
@media (max-width:800px) { .header-inner { min-height:62px; }.menu-toggle { display:block; }.main-nav { position:absolute; top:62px; left:0; right:0; display:none; padding:12px 20px 16px; background:#fffdfc; border-bottom:1px solid var(--line); }.main-nav.open { display:block; }.main-nav ul { display:grid; grid-template-columns:repeat(2,1fr); }.main-nav a { padding:9px; }.hero { width:calc(100% - 24px); min-height:360px; margin-top:20px; border-radius:18px; }.hero-copy { padding:30px 24px; }.hero-dots { right:20px; bottom:18px; }.header-inner,.container,.footer-inner,.site-footer { width:calc(100% - 24px); }.card-grid,.category-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.card-body { min-height:188px; padding:13px; }.card-body h3 { font-size:16px; }.about-panel { grid-template-columns:1fr; padding:25px; }.app-panel { width:calc(100% - 24px); padding:28px 23px; border-radius:18px; }.site-footer { display:block; }.article-shell { width:calc(100% - 24px); }.article-gallery { gap:10px; } }
@media (max-width:460px) { .card-grid,.category-list { grid-template-columns:1fr; }.video-card { display:grid; grid-template-columns:42% 58%; }.image-frame { aspect-ratio:auto; }.card-body { min-height:152px; }.app-panel { align-items:flex-start; }.qr-card { width:95px; min-width:95px; }.app-panel h2 { font-size:23px; } }