/* roulang page: index */
:root {
            --ink:#201b2d;
            --muted:#726b7d;
            --line:#eee7f1;
            --soft:#fffaf7;
            --purple:#6c3fb5;
            --purple-dark:#4d287f;
            --rose:#d77aa8;
            --gold:#d6a768;
            --radius:24px;
            --shadow:0 18px 55px rgba(55,32,83,.12);
        }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            margin:0;
            color:var(--ink);
            background:var(--soft);
            font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a { color:inherit; text-decoration:none; }
        img { display:block; width:100%; object-fit:cover; }
        button,input { font:inherit; }
        .container { width:min(1160px,calc(100% - 40px)); margin:auto; }
        .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(255,250,247,.86);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(238,231,241,.86);
        }
        .nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
        .brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.02em; }
        .brand-mark {
            width:40px; height:40px; border-radius:13px;
            display:grid; place-items:center; color:#fff;
            background:linear-gradient(135deg,var(--purple),var(--rose));
            box-shadow:0 8px 20px rgba(108,63,181,.25);
        }
        .brand-name { max-width:210px; line-height:1.2; }
        .nav-links { display:flex; align-items:center; gap:24px; color:#6e6878; font-size:14px; }
        .nav-links a { transition:.25s ease; }
        .nav-links a:hover,.nav-links a.active { color:var(--purple); }
        .nav-cta,.button-primary {
            color:#fff; background:var(--ink); border:0; border-radius:999px;
            padding:12px 20px; font-weight:700; transition:.25s ease;
            box-shadow:0 9px 22px rgba(32,27,45,.14);
        }
        .nav-cta:hover,.button-primary:hover { transform:translateY(-2px); background:var(--purple-dark); }
        .button-secondary {
            display:inline-flex; align-items:center; justify-content:center;
            border:1px solid #dcd1e5; border-radius:999px; padding:12px 20px;
            color:var(--purple); background:#fff; font-weight:700; transition:.25s ease;
        }
        .button-secondary:hover { border-color:var(--purple); background:#faf6ff; transform:translateY(-2px); }
        .hero { padding:76px 0 60px; overflow:hidden; }
        .hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:55px; align-items:center; }
        .eyebrow,.pill {
            display:inline-flex; align-items:center; gap:8px; border:1px solid #eadcf4;
            color:var(--purple); background:#fbf7ff; border-radius:999px;
            padding:7px 13px; font-size:12px; font-weight:800; letter-spacing:.05em;
        }
        h1,h2,h3,p { margin-top:0; }
        h1 { margin:22px 0 18px; font-size:clamp(38px,5.4vw,70px); line-height:1.13; letter-spacing:-.06em; }
        h1 span { color:var(--purple); }
        .hero-copy { max-width:650px; color:var(--muted); font-size:17px; }
        .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
        .hero-note { display:flex; gap:20px; margin-top:30px; color:#8a8191; font-size:13px; }
        .hero-note strong { display:block; color:var(--ink); font-size:20px; line-height:1.2; }
        .hero-art { position:relative; min-height:490px; }
        .hero-photo { height:490px; border-radius:32px; box-shadow:var(--shadow); }
        .hero-panel {
            position:absolute; right:-18px; bottom:25px; width:225px;
            background:rgba(255,255,255,.94); border:1px solid #f0e8f2;
            border-radius:20px; padding:18px; box-shadow:var(--shadow);
        }
        .hero-panel strong { display:block; font-size:26px; margin:6px 0; color:var(--purple); }
        section { padding:82px 0; }
        .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:30px; }
        .section-head h2 { font-size:clamp(27px,3vw,42px); letter-spacing:-.045em; line-height:1.2; margin-bottom:10px; }
        .section-head p { max-width:610px; color:var(--muted); margin-bottom:0; }
        .soft-section { background:#f8f2fa; }
        .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
        .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
        .card {
            background:#fff; border:1px solid var(--line); border-radius:var(--radius);
            padding:25px; box-shadow:0 8px 28px rgba(58,35,78,.04);
            transition:.25s ease;
        }
        .card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#dfcdee; }
        .icon {
            width:45px; height:45px; display:grid; place-items:center; border-radius:15px;
            background:#f1e7fa; color:var(--purple); font-size:20px; margin-bottom:18px;
        }
        .card h3 { font-size:19px; margin-bottom:9px; }
        .card p { color:var(--muted); font-size:14px; margin-bottom:0; }
        .split { display:grid; grid-template-columns:.85fr 1.15fr; gap:55px; align-items:center; }
        .split-image { min-height:390px; border-radius:30px; box-shadow:var(--shadow); }
        .list { display:grid; gap:15px; }
        .list-item { display:flex; gap:15px; align-items:flex-start; padding:17px 0; border-bottom:1px solid var(--line); }
        .number { flex:none; color:var(--purple); font-size:13px; font-weight:800; padding-top:4px; }
        .list-item h3 { margin:0 0 3px; font-size:17px; }
        .list-item p { margin:0; color:var(--muted); font-size:14px; }
        .metric { background:var(--ink); color:#fff; border-radius:30px; padding:35px; }
        .metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
        .metric strong { display:block; color:#f3c7df; font-size:34px; line-height:1.2; margin-bottom:4px; }
        .metric span { color:#c6bdcc; font-size:13px; }
        .quote { background:linear-gradient(135deg,#6c3fb5,#9e5e9e); color:#fff; border-radius:30px; padding:40px; }
        .quote p { font-size:23px; line-height:1.6; max-width:780px; margin-bottom:18px; }
        .quote small { color:#eadcf5; }
        .news-card { overflow:hidden; padding:0; }
        .news-card img { height:175px; }
        .news-body { padding:20px; }
        .news-body time { color:var(--rose); font-size:12px; font-weight:800; }
        .news-body h3 { font-size:17px; margin:7px 0 0; }
        .faq { border-top:1px solid var(--line); }
        details { border-bottom:1px solid var(--line); padding:20px 0; }
        summary { cursor:pointer; list-style:none; font-weight:800; display:flex; justify-content:space-between; gap:20px; }
        summary::-webkit-details-marker { display:none; }
        summary:after { content:"+"; color:var(--purple); font-size:22px; line-height:1; }
        details[open] summary:after { content:"−"; }
        details p { color:var(--muted); max-width:800px; margin:12px 0 0; font-size:14px; }
        .cta { text-align:center; padding:78px 25px; background:linear-gradient(135deg,#fbf1f8,#f2ebfb); border-radius:32px; }
        .cta h2 { font-size:clamp(28px,4vw,48px); letter-spacing:-.05em; margin-bottom:12px; }
        .cta p { max-width:650px; margin:0 auto 24px; color:var(--muted); }
        footer { background:#201b2d; color:#fff; padding:60px 0 25px; }
        .footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:35px; padding-bottom:45px; }
        footer .brand { margin-bottom:15px; }
        footer .brand-name { color:#fff; }
        footer p,footer a { color:#bdb3c7; font-size:14px; }
        footer a:hover { color:#fff; }
        footer h3 { font-size:14px; margin-bottom:14px; color:#fff; }
        .footer-links { display:grid; gap:8px; }
        .copyright { border-top:1px solid rgba(255,255,255,.12); padding-top:20px; color:#978c9f; font-size:12px; display:flex; justify-content:space-between; gap:15px; }
        :focus-visible { outline:3px solid #e7a8cb; outline-offset:3px; }
        @media (max-width:1024px) {
            .hero-grid,.split { grid-template-columns:1fr; }
            .hero-art { max-width:720px; width:100%; margin:auto; }
            .grid-4 { grid-template-columns:repeat(2,1fr); }
            .footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }
        }
        @media (max-width:768px) {
            .container { width:min(100% - 28px,600px); }
            .nav-links { display:none; }
            .nav-cta { padding:10px 15px; font-size:13px; }
            .hero { padding-top:48px; }
            .hero-art,.hero-photo { min-height:370px; height:370px; }
            .hero-panel { right:8px; bottom:15px; }
            section { padding:58px 0; }
            .section-head { display:block; }
            .section-head p { margin-top:12px; }
            .grid-3,.metric-grid { grid-template-columns:1fr; }
            .grid-4 { grid-template-columns:repeat(2,1fr); }
            .footer-grid { grid-template-columns:1fr 1fr; }
        }
        @media (max-width:520px) {
            h1 { font-size:40px; }
            .hero-copy { font-size:15px; }
            .hero-note { gap:14px; flex-wrap:wrap; }
            .hero-art,.hero-photo { min-height:300px; height:300px; }
            .hero-panel { width:190px; padding:14px; }
            .grid-4 { grid-template-columns:1fr; }
            .card { padding:21px; }
            .quote { padding:27px; }
            .quote p { font-size:19px; }
            .footer-grid { grid-template-columns:1fr; }
            .copyright { display:block; }
            .copyright span { display:block; margin-top:8px; }
        }