/* roulang page: index */
:root{
            --bg: #f6f3ff;
            --bg-2: #fbf9ff;
            --surface: rgba(255,255,255,.9);
            --surface-strong: #ffffff;
            --surface-soft: #f3effd;
            --text: #1b1a2a;
            --muted: #5d6274;
            --line: #e4def2;
            --primary: #7a4dff;
            --primary-2: #33c7d6;
            --accent: #ff8a5b;
            --accent-2: #ffb36b;
            --success: #2fc38f;
            --shadow: 0 18px 50px rgba(76, 52, 126, .12);
            --shadow-soft: 0 12px 34px rgba(76, 52, 126, .08);
            --radius-xl: 30px;
            --radius-lg: 24px;
            --radius-md: 18px;
            --radius-sm: 14px;
            --transition: all .28s ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at 12% 0%, rgba(122,77,255,.12), transparent 34%),
                radial-gradient(circle at 92% 12%, rgba(51,199,214,.11), transparent 30%),
                radial-gradient(circle at 75% 82%, rgba(255,138,91,.08), transparent 22%),
                linear-gradient(180deg, #faf8ff 0%, #f7f4ff 100%);
            font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            line-height:1.75;
            overflow-x:hidden;
        }
        body::before,
        body::after{
            content:"";
            position:fixed;
            inset:auto;
            pointer-events:none;
            z-index:0;
            filter: blur(2px);
        }
        body::before{
            width:320px;height:320px;left:-140px;top:180px;
            background: radial-gradient(circle, rgba(122,77,255,.10), rgba(122,77,255,0) 70%);
        }
        body::after{
            width:420px;height:420px;right:-180px;bottom:120px;
            background: radial-gradient(circle, rgba(51,199,214,.09), rgba(51,199,214,0) 70%);
        }
        a{color:inherit;text-decoration:none;transition:var(--transition)}
        a:hover{color:var(--primary)}
        img{max-width:100%;display:block}
        ::selection{background:rgba(122,77,255,.18);color:var(--text)}
        .site-wrap{position:relative;z-index:1}
        .container{
            max-width:1320px;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1030;
            background:rgba(250,248,255,.82);
            backdrop-filter:none;
            border-bottom:1px solid rgba(228,222,242,.88);
            box-shadow:0 4px 22px rgba(39,26,74,.04);
            transition:var(--transition);
        }
        .site-header.scrolled{
            background:rgba(250,248,255,.96);
            box-shadow:0 10px 28px rgba(39,26,74,.08);
        }
        .navbar{
            padding:16px 0;
        }
        .navbar-brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
            margin-right:24px;
            color:var(--text);
        }
        .brand-badge{
            width:46px;
            height:46px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, var(--primary), var(--primary-2));
            color:#fff;
            box-shadow:0 12px 24px rgba(122,77,255,.25);
            flex:none;
        }
        .brand-badge svg{
            width:22px;height:22px;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            line-height:1.2;
            min-width:0;
        }
        .brand-name{
            font-size:1.06rem;
            font-weight:800;
            letter-spacing:.2px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-subtitle{
            font-size:.78rem;
            color:var(--muted);
            white-space:nowrap;
        }
        .navbar-nav{
            gap:8px;
        }
        .nav-link{
            position:relative;
            padding:10px 16px !important;
            color:#33324a;
            font-weight:600;
            border-radius:999px;
        }
        .nav-link:hover{
            color:var(--primary);
            background:rgba(122,77,255,.06);
        }
        .nav-link.active{
            color:var(--primary);
            background:rgba(122,77,255,.08);
        }
        .nav-link.active::after{
            content:"";
            position:absolute;
            left:18px;
            right:18px;
            bottom:7px;
            height:3px;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
        }
        .navbar-toggler{
            border:1px solid var(--line);
            border-radius:16px;
            padding:10px 12px;
            box-shadow:none !important;
        }
        .navbar-toggler:focus{
            box-shadow:0 0 0 .2rem rgba(122,77,255,.15) !important;
        }
        .navbar-toggler-icon{
            width:1.2em;
            height:1.2em;
            background-image:none;
            position:relative;
        }
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after,
        .navbar-toggler-icon span{
            content:"";
            position:absolute;
            left:0;
            width:100%;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
        }
        .navbar-toggler-icon::before{top:2px}
        .navbar-toggler-icon span{top:8px}
        .navbar-toggler-icon::after{top:14px}
        .btn{
            border-radius:999px;
            padding:12px 20px;
            font-weight:700;
            transition:var(--transition);
            border:1px solid transparent;
        }
        .btn:focus{
            box-shadow:0 0 0 .22rem rgba(122,77,255,.16);
        }
        .btn-brand{
            color:#fff;
            background:linear-gradient(135deg, var(--primary) 0%, #8a63ff 45%, var(--primary-2) 100%);
            box-shadow:0 18px 34px rgba(122,77,255,.22);
        }
        .btn-brand:hover{
            color:#fff;
            transform:translateY(-2px);
            box-shadow:0 22px 40px rgba(122,77,255,.28);
        }
        .btn-ghost{
            color:var(--text);
            background:rgba(255,255,255,.72);
            border-color:rgba(122,77,255,.14);
            box-shadow:var(--shadow-soft);
        }
        .btn-ghost:hover{
            color:var(--primary);
            transform:translateY(-2px);
            background:#fff;
            border-color:rgba(122,77,255,.28);
        }
        .btn-light-soft{
            background:#fff;
            border:1px solid rgba(122,77,255,.16);
            color:var(--primary);
        }
        .btn-light-soft:hover{
            color:var(--primary);
            border-color:rgba(122,77,255,.32);
            transform:translateY(-2px);
            box-shadow:var(--shadow-soft);
        }
        .main-content{
            position:relative;
            z-index:1;
        }
        .section{
            padding:86px 0;
        }
        .section-tight{
            padding-top:36px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 14px;
            border-radius:999px;
            background:rgba(122,77,255,.08);
            color:var(--primary);
            font-size:.9rem;
            font-weight:700;
            letter-spacing:.2px;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 0 0 4px rgba(122,77,255,.08);
        }
        .section-head{
            margin-bottom:26px;
        }
        .section-title{
            font-size:clamp(1.6rem, 1.2rem + 1vw, 2.35rem);
            font-weight:800;
            line-height:1.2;
            margin:12px 0 10px;
            letter-spacing:-.02em;
        }
        .section-desc{
            max-width:760px;
            color:var(--muted);
            margin-bottom:0;
            font-size:1.02rem;
        }
        .surface{
            background:var(--surface);
            border:1px solid rgba(228,222,242,.9);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
        }
        .surface-soft{
            background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,243,255,.84));
            border:1px solid rgba(228,222,242,.92);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow-soft);
        }
        .hero{
            padding:38px 0 28px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            padding:34px;
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:-2px -2px auto auto;
            width:420px;
            height:420px;
            background:radial-gradient(circle, rgba(122,77,255,.16), transparent 65%);
            pointer-events:none;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:30px;
            align-items:center;
        }
        .hero-title{
            font-size:clamp(2.15rem, 1.2rem + 2.7vw, 4.1rem);
            line-height:1.07;
            font-weight:900;
            letter-spacing:-.04em;
            margin:16px 0 18px;
        }
        .hero-title .gradient-text{
            background:linear-gradient(135deg, var(--primary) 0%, #8b6bff 38%, var(--primary-2) 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .hero-lead{
            color:var(--muted);
            font-size:1.06rem;
            max-width:640px;
            margin-bottom:26px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-bottom:22px;
        }
        .hero-trust{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:12px;
            margin-top:12px;
        }
        .trust-pill{
            padding:14px 16px;
            border-radius:18px;
            background:#fff;
            border:1px solid rgba(228,222,242,.9);
            box-shadow:0 10px 24px rgba(65,41,122,.06);
        }
        .trust-pill strong{
            display:block;
            font-size:1.05rem;
            line-height:1.2;
            margin-bottom:4px;
        }
        .trust-pill span{
            color:var(--muted);
            font-size:.92rem;
        }
        .hero-visual{
            position:relative;
            min-height:540px;
            padding:22px;
            overflow:hidden;
        }
        .visual-orb{
            position:absolute;
            border-radius:50%;
            filter:blur(0);
            pointer-events:none;
        }
        .visual-orb.orb-1{
            width:230px;height:230px;
            right:36px;top:12px;
            background:radial-gradient(circle at 30% 30%, rgba(122,77,255,.38), rgba(122,77,255,0) 70%);
        }
        .visual-orb.orb-2{
            width:260px;height:260px;
            left:-60px;bottom:-90px;
            background:radial-gradient(circle at 30% 30%, rgba(51,199,214,.30), rgba(51,199,214,0) 72%);
        }
        .visual-core{
            position:absolute;
            inset:34px 28px 34px 28px;
            border-radius:26px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,245,255,.96)),
                linear-gradient(145deg, rgba(122,77,255,.08), rgba(51,199,214,.05));
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .visual-core::before{
            content:"";
            position:absolute;
            inset:0;
            background-image:
                linear-gradient(rgba(122,77,255,.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(122,77,255,.07) 1px, transparent 1px);
            background-size:32px 32px;
            opacity:.4;
        }
        .visual-core::after{
            content:"";
            position:absolute;
            inset:auto 20px 20px auto;
            width:160px;
            height:160px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,138,91,.16), rgba(255,138,91,0) 65%);
        }
        .visual-panel{
            position:absolute;
            left:30px;
            top:28px;
            right:30px;
            bottom:28px;
            z-index:1;
            display:grid;
            grid-template-rows:auto 1fr auto;
            gap:16px;
        }
        .visual-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .visual-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 13px;
            border-radius:999px;
            background:rgba(122,77,255,.10);
            color:var(--primary);
            font-weight:700;
            font-size:.88rem;
        }
        .visual-dot{
            width:9px;height:9px;border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 0 0 5px rgba(122,77,255,.10);
        }
        .visual-score{
            font-size:.88rem;
            color:var(--muted);
            font-weight:600;
        }
        .visual-center{
            display:grid;
            place-items:center;
            position:relative;
            min-height:250px;
        }
        .visual-ring{
            width:180px;
            height:180px;
            border-radius:50%;
            background:conic-gradient(from 180deg, var(--primary), var(--primary-2), var(--accent), var(--primary));
            padding:12px;
            box-shadow:0 30px 70px rgba(122,77,255,.18);
        }
        .visual-ring > div{
            width:100%;
            height:100%;
            border-radius:50%;
            background:linear-gradient(180deg, #fff, #f4f0ff);
            display:grid;
            place-items:center;
            border:1px solid rgba(228,222,242,.95);
        }
        .visual-ring strong{
            display:block;
            font-size:2.3rem;
            line-height:1;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            letter-spacing:.08em;
        }
        .visual-ring span{
            display:block;
            color:var(--muted);
            font-size:.9rem;
            margin-top:4px;
            text-align:center;
        }
        .visual-cards{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }
        .mini-card{
            background:rgba(255,255,255,.86);
            border:1px solid rgba(228,222,242,.95);
            border-radius:20px;
            box-shadow:0 10px 24px rgba(65,41,122,.06);
            padding:14px 15px;
        }
        .mini-card small{
            display:block;
            color:var(--muted);
            margin-bottom:6px;
        }
        .mini-card strong{
            font-size:1.03rem;
            display:block;
            margin-bottom:5px;
        }
        .mini-card .bar{
            height:10px;
            border-radius:999px;
            background:linear-gradient(90deg, rgba(122,77,255,.95), rgba(51,199,214,.95));
            margin-top:10px;
        }
        .mini-card .bar.alt{
            background:linear-gradient(90deg, rgba(255,138,91,.95), rgba(122,77,255,.95));
        }
        .feature-grid{
            display:grid;
            grid-template-columns:1.25fr .875fr .875fr;
            gap:22px;
            grid-auto-flow:dense;
        }
        .feature-card{
            position:relative;
            padding:24px;
            border-radius:26px;
            background:var(--surface-strong);
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:var(--transition);
            height:100%;
        }
        .feature-card::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:5px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
        }
        .feature-card:hover{
            transform:translateY(-5px);
            box-shadow:0 22px 48px rgba(65,41,122,.12);
            border-color:rgba(122,77,255,.22);
        }
        .feature-card.feature-wide{
            grid-row:span 2;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:100%;
        }
        .feature-card .icon{
            width:52px;
            height:52px;
            border-radius:18px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(122,77,255,.13), rgba(51,199,214,.10));
            color:var(--primary);
            margin-bottom:14px;
        }
        .feature-card .icon svg{
            width:24px;height:24px;
        }
        .feature-card h3{
            font-size:1.28rem;
            font-weight:800;
            margin-bottom:10px;
        }
        .feature-card p{
            color:var(--muted);
            margin-bottom:14px;
        }
        .feature-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            margin-top:auto;
        }
        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 12px;
            border-radius:999px;
            font-size:.84rem;
            font-weight:700;
            background:rgba(122,77,255,.09);
            color:var(--primary);
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(51,199,214,.10);
            color:#147985;
            font-size:.84rem;
            font-weight:700;
        }
        .tick-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .tick-list li{
            display:flex;
            gap:10px;
            color:var(--text);
            align-items:flex-start;
        }
        .tick-list li::before{
            content:"";
            width:20px;
            height:20px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            flex:none;
            margin-top:4px;
            box-shadow:0 0 0 4px rgba(122,77,255,.08);
        }
        .tick-list span{
            color:var(--muted);
        }
        .category-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:22px;
        }
        .category-card{
            position:relative;
            padding:26px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,243,255,.94));
            border:1px solid rgba(228,222,242,.96);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            transition:var(--transition);
        }
        .category-card:hover{
            transform:translateY(-4px);
            box-shadow:0 22px 46px rgba(65,41,122,.12);
            border-color:rgba(122,77,255,.22);
        }
        .category-card::before{
            content:"";
            position:absolute;
            inset:0 auto auto 0;
            width:100%;
            height:6px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
        }
        .category-card .top{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:14px;
            margin-bottom:16px;
        }
        .category-card .title-wrap{
            min-width:0;
        }
        .category-card h3{
            font-size:1.34rem;
            font-weight:800;
            margin-bottom:8px;
        }
        .category-card p{
            color:var(--muted);
            margin-bottom:18px;
        }
        .category-badge{
            display:inline-flex;
            align-items:center;
            padding:8px 12px;
            border-radius:999px;
            font-weight:700;
            background:rgba(255,138,91,.10);
            color:#bd5f31;
            font-size:.84rem;
            flex:none;
        }
        .category-points{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:18px;
        }
        .category-points span{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(122,77,255,.08);
            color:#47318f;
            font-weight:700;
            font-size:.84rem;
        }
        .category-points span::before{
            content:"";
            width:7px;height:7px;border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
        }
        .link-arrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-weight:800;
            color:var(--primary);
        }
        .link-arrow::after{
            content:"→";
            transition:var(--transition);
        }
        .category-card:hover .link-arrow::after{
            transform:translateX(4px);
        }
        .scenario-grid{
            display:grid;
            gap:18px;
        }
        .scenario-card{
            display:grid;
            grid-template-columns:.96fr 1.04fr;
            gap:22px;
            align-items:stretch;
            padding:22px;
            border-radius:28px;
            background:rgba(255,255,255,.9);
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            transition:var(--transition);
        }
        .scenario-card:hover{
            transform:translateY(-3px);
            box-shadow:0 20px 44px rgba(65,41,122,.11);
        }
        .scenario-card.reverse .scenario-media{
            order:2;
        }
        .scenario-card.reverse .scenario-copy{
            order:1;
        }
        .scenario-media{
            position:relative;
            border-radius:24px;
            min-height:260px;
            overflow:hidden;
            background:
                linear-gradient(145deg, rgba(122,77,255,.18), rgba(51,199,214,.10)),
                linear-gradient(180deg, #fff, #f5f1ff);
            border:1px solid rgba(228,222,242,.9);
            padding:20px;
        }
        .media-grid{
            position:absolute;
            inset:20px;
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }
        .media-panel{
            border-radius:20px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(228,222,242,.9);
            box-shadow:0 10px 22px rgba(65,41,122,.08);
            padding:14px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .media-panel strong{
            font-size:1rem;
            margin-bottom:8px;
        }
        .media-panel small{
            color:var(--muted);
            line-height:1.6;
        }
        .media-panel .line{
            height:10px;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2));
        }
        .media-panel.alt .line{
            background:linear-gradient(90deg, var(--accent), var(--primary));
        }
        .media-panel.big{
            grid-column:span 2;
        }
        .scenario-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .scenario-copy .eyebrow{
            width:max-content;
        }
        .scenario-copy h3{
            margin:14px 0 12px;
            font-size:1.56rem;
            font-weight:800;
        }
        .scenario-copy p{
            color:var(--muted);
            margin-bottom:14px;
        }
        .scenario-meta{
            display:grid;
            gap:10px;
            margin-top:8px;
        }
        .scenario-meta .meta-row{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(122,77,255,.05);
            border:1px solid rgba(122,77,255,.08);
        }
        .scenario-meta .meta-row strong{
            color:var(--primary);
            font-weight:800;
            flex:none;
        }
        .scenario-meta .meta-row span{
            color:var(--muted);
        }
        .case-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .case-card{
            position:relative;
            padding:24px;
            border-radius:26px;
            background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,243,255,.96));
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            transition:var(--transition);
            overflow:hidden;
        }
        .case-card::before{
            content:"";
            position:absolute;
            inset:auto 0 0 0;
            height:6px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
        }
        .case-card:hover{
            transform:translateY(-4px);
            box-shadow:0 20px 44px rgba(65,41,122,.12);
        }
        .case-top{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:flex-start;
            margin-bottom:14px;
        }
        .case-card h3{
            font-size:1.22rem;
            font-weight:800;
            margin-bottom:4px;
        }
        .case-card .industry{
            color:var(--muted);
            font-size:.92rem;
        }
        .result-badge{
            display:inline-flex;
            align-items:center;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(51,199,214,.12);
            color:#127482;
            font-weight:800;
            font-size:.84rem;
            white-space:nowrap;
        }
        .case-card p{
            color:var(--muted);
            margin-bottom:14px;
        }
        .case-stats{
            display:grid;
            gap:10px;
        }
        .stat-row{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:11px 12px;
            border-radius:16px;
            background:#fff;
            border:1px solid rgba(228,222,242,.92);
        }
        .stat-row strong{
            color:var(--primary);
            flex:none;
            font-weight:800;
        }
        .stat-row span{
            color:var(--muted);
        }
        .case-outcomes{
            margin-top:18px;
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
        }
        .outcome{
            padding:16px 18px;
            border-radius:20px;
            background:rgba(255,255,255,.86);
            border:1px solid rgba(228,222,242,.9);
            box-shadow:0 10px 24px rgba(65,41,122,.06);
        }
        .outcome strong{
            display:block;
            font-size:1.18rem;
            color:var(--primary);
            margin-bottom:3px;
        }
        .outcome span{
            color:var(--muted);
            font-size:.95rem;
        }
        .insight-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .insight-card{
            padding:22px;
            border-radius:26px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            transition:var(--transition);
            height:100%;
        }
        .insight-card:hover{
            transform:translateY(-3px);
            box-shadow:0 20px 42px rgba(65,41,122,.11);
        }
        .insight-head{
            display:flex;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
            flex-wrap:wrap;
        }
        .insight-card h3{
            font-size:1.18rem;
            font-weight:800;
            margin-bottom:10px;
            line-height:1.35;
        }
        .insight-card p{
            color:var(--muted);
            margin-bottom:0;
        }
        .tiny-tag{
            display:inline-flex;
            align-items:center;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(122,77,255,.08);
            color:var(--primary);
            font-size:.82rem;
            font-weight:800;
        }
        .tiny-time{
            color:var(--muted);
            font-size:.86rem;
            padding-top:4px;
        }
        .plan-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:18px;
        }
        .plan-card{
            position:relative;
            padding:24px;
            border-radius:28px;
            background:rgba(255,255,255,.94);
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            transition:var(--transition);
            overflow:hidden;
        }
        .plan-card.featured{
            background:linear-gradient(180deg, rgba(122,77,255,.07), rgba(255,255,255,.98));
            border-color:rgba(122,77,255,.2);
            box-shadow:0 22px 46px rgba(122,77,255,.12);
            transform:translateY(-8px);
        }
        .plan-card:hover{
            transform:translateY(-5px);
        }
        .plan-card.featured:hover{
            transform:translateY(-10px);
        }
        .plan-badge{
            display:inline-flex;
            align-items:center;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(122,77,255,.10);
            color:var(--primary);
            font-weight:800;
            font-size:.84rem;
            margin-bottom:12px;
        }
        .plan-card.featured .plan-badge{
            background:linear-gradient(135deg, rgba(122,77,255,.16), rgba(51,199,214,.12));
        }
        .plan-title{
            font-size:1.28rem;
            font-weight:800;
            margin-bottom:8px;
        }
        .plan-price{
            font-size:1.6rem;
            font-weight:900;
            letter-spacing:-.03em;
            color:var(--text);
            margin-bottom:10px;
        }
        .plan-desc{
            color:var(--muted);
            margin-bottom:16px;
        }
        .plan-list{
            list-style:none;
            padding:0;
            margin:0 0 18px;
            display:grid;
            gap:10px;
        }
        .plan-list li{
            display:flex;
            gap:10px;
            color:var(--text);
            align-items:flex-start;
        }
        .plan-list li::before{
            content:"";
            width:18px;
            height:18px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            flex:none;
            margin-top:5px;
        }
        .plan-list span{
            color:var(--muted);
        }
        .faq-layout{
            display:grid;
            grid-template-columns:.88fr 1.12fr;
            gap:22px;
            align-items:start;
        }
        .faq-note{
            padding:24px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(122,77,255,.08), rgba(255,255,255,.92));
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
            position:sticky;
            top:110px;
        }
        .faq-note h3{
            font-size:1.44rem;
            font-weight:800;
            margin-bottom:12px;
        }
        .faq-note p{
            color:var(--muted);
            margin-bottom:18px;
        }
        .faq-bullets{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .faq-bullets li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--text);
        }
        .faq-bullets li::before{
            content:"";
            width:12px;
            height:12px;
            border-radius:50%;
            margin-top:9px;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 0 0 4px rgba(122,77,255,.08);
            flex:none;
        }
        .accordion{
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: transparent;
            --bs-accordion-active-bg: transparent;
            --bs-accordion-btn-focus-box-shadow: none;
        }
        .accordion-item{
            border:1px solid rgba(228,222,242,.95);
            border-radius:22px;
            overflow:hidden;
            background:rgba(255,255,255,.92);
            box-shadow:var(--shadow-soft);
            margin-bottom:14px;
        }
        .accordion-button{
            background:transparent;
            box-shadow:none !important;
            color:var(--text);
            font-weight:800;
            padding:18px 20px;
            font-size:1.02rem;
        }
        .accordion-button:not(.collapsed){
            color:var(--primary);
            background:linear-gradient(180deg, rgba(122,77,255,.05), rgba(255,255,255,.02));
        }
        .accordion-button::after{
            background-size:18px;
        }
        .accordion-body{
            color:var(--muted);
            padding:0 20px 20px;
        }
        .contact-band{
            padding:28px;
            border-radius:32px;
            background:
                linear-gradient(135deg, rgba(122,77,255,.12), rgba(51,199,214,.10)),
                linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,243,255,.96));
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow);
        }
        .contact-grid{
            display:grid;
            grid-template-columns:1fr .95fr;
            gap:24px;
            align-items:start;
        }
        .contact-copy h3{
            font-size:1.7rem;
            font-weight:900;
            margin-bottom:12px;
        }
        .contact-copy p{
            color:var(--muted);
            margin-bottom:18px;
            max-width:620px;
        }
        .contact-matrix{
            display:grid;
            gap:10px;
            margin-top:16px;
        }
        .contact-matrix .row-item{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.72);
            border:1px solid rgba(228,222,242,.9);
        }
        .contact-matrix .row-item strong{
            color:var(--primary);
            min-width:84px;
            flex:none;
        }
        .contact-form{
            padding:22px;
            border-radius:26px;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(228,222,242,.95);
            box-shadow:var(--shadow-soft);
        }
        .contact-form .form-label{
            font-weight:700;
            color:var(--text);
        }
        .contact-form .form-control{
            border-radius:16px;
            border:1px solid rgba(228,222,242,.95);
            background:#fff;
            padding:12px 14px;
            min-height:50px;
            box-shadow:none;
        }
        .contact-form .form-control:focus{
            border-color:rgba(122,77,255,.38);
            box-shadow:0 0 0 .22rem rgba(122,77,255,.11);
        }
        .contact-form textarea.form-control{
            min-height:128px;
            resize:vertical;
        }
        .footer{
            margin-top:10px;
            padding:46px 0 28px;
            background:linear-gradient(180deg, rgba(250,248,255,.92), rgba(244,240,255,.98));
            border-top:1px solid rgba(228,222,242,.95);
        }
        .footer-topline{
            height:4px;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--accent));
            margin-bottom:24px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.3fr .8fr .8fr 1fr;
            gap:22px;
        }
        .footer h4{
            font-size:1rem;
            font-weight:800;
            margin-bottom:14px;
        }
        .footer p,
        .footer a,
        .footer li{
            color:var(--muted);
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a:hover{
            color:var(--primary);
        }
        .footer-brand{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }
        .footer-brand .brand-badge{
            width:42px;height:42px;border-radius:14px;
        }
        .footer-meta{
            margin-top:22px;
            padding-top:18px;
            border-top:1px solid rgba(228,222,242,.95);
            display:flex;
            flex-wrap:wrap;
            gap:10px 18px;
            justify-content:space-between;
            align-items:center;
            color:var(--muted);
            font-size:.92rem;
        }
        .footer-meta strong{
            color:var(--text);
        }
        .back-top{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-weight:800;
            color:var(--primary);
        }
        .back-top::after{
            content:"↑";
        }
        .section-anchor{
            scroll-margin-top:100px;
        }
        .nav-collapse-panel{
            flex-grow:1;
        }
        @media (max-width: 1199.98px){
            .hero-grid,
            .faq-layout,
            .contact-grid{
                grid-template-columns:1fr;
            }
            .hero-visual{
                min-height:500px;
            }
            .footer-grid{
                grid-template-columns:1.2fr 1fr 1fr;
            }
            .feature-grid{
                grid-template-columns:1fr 1fr;
            }
            .feature-card.feature-wide{
                grid-row:auto;
                grid-column:span 2;
            }
            .category-grid,
            .case-grid,
            .insight-grid,
            .plan-grid{
                grid-template-columns:1fr 1fr;
            }
            .case-outcomes{
                grid-template-columns:1fr 1fr 1fr;
            }
            .faq-note{
                position:static;
            }
        }
        @media (max-width: 991.98px){
            .navbar-collapse{
                padding:14px 0 6px;
            }
            .navbar-nav{
                gap:4px;
                margin-bottom:14px;
            }
            .nav-link{
                padding:12px 14px !important;
            }
            .nav-link.active::after{
                display:none;
            }
            .hero-shell{
                padding:24px;
            }
            .hero-trust{
                grid-template-columns:1fr 1fr;
            }
            .feature-grid,
            .category-grid,
            .scenario-card,
            .case-grid,
            .insight-grid,
            .plan-grid,
            .footer-grid,
            .case-outcomes{
                grid-template-columns:1fr;
            }
            .feature-card.feature-wide{
                grid-column:auto;
            }
            .scenario-card.reverse .scenario-media,
            .scenario-card.reverse .scenario-copy{
                order:initial;
            }
        }
        @media (max-width: 767.98px){
            .section{
                padding:68px 0;
            }
            .hero{
                padding-top:24px;
            }
            .hero-shell,
            .contact-band{
                border-radius:24px;
                padding:18px;
            }
            .hero-title{
                letter-spacing:-.03em;
            }
            .hero-visual{
                min-height:420px;
                padding:14px;
            }
            .visual-core{
                inset:18px;
            }
            .visual-panel{
                inset:18px;
            }
            .visual-cards{
                grid-template-columns:1fr;
            }
            .hero-trust{
                grid-template-columns:1fr;
            }
            .scenario-media{
                min-height:220px;
            }
            .media-grid{
                inset:14px;
            }
            .accordion-button{
                padding:16px 16px;
            }
            .accordion-body{
                padding:0 16px 16px;
            }
        }
        @media (max-width: 575.98px){
            .navbar{
                padding:12px 0;
            }
            .navbar-brand{
                gap:10px;
            }
            .brand-badge{
                width:40px;height:40px;border-radius:14px;
            }
            .brand-name{
                font-size:.96rem;
            }
            .brand-subtitle{
                font-size:.73rem;
            }
            .hero-title{
                font-size:2.05rem;
            }
            .hero-actions{
                flex-direction:column;
            }
            .hero-actions .btn{
                width:100%;
                justify-content:center;
            }
            .visual-ring{
                width:156px;
                height:156px;
            }
            .visual-ring strong{
                font-size:2rem;
            }
            .feature-card,
            .category-card,
            .scenario-card,
            .case-card,
            .insight-card,
            .plan-card,
            .contact-form,
            .faq-note{
                border-radius:22px;
            }
            .trust-pill,
            .outcome,
            .mini-card{
                border-radius:16px;
            }
        }
        .form-hint{
            color:var(--muted);
            font-size:.9rem;
        }
        .section-divider{
            display:flex;
            align-items:center;
            gap:12px;
            margin:18px 0 0;
            color:var(--muted);
            font-size:.93rem;
        }
        .section-divider::before,
        .section-divider::after{
            content:"";
            height:1px;
            flex:1;
            background:linear-gradient(90deg, transparent, rgba(122,77,255,.20), transparent);
        }
        .section-divider span{
            padding:0 6px;
        }

/* roulang page: category1 */
:root{
            --brand-primary:#7c3aed;
            --brand-secondary:#13b8c8;
            --brand-accent:#ff7a59;
            --brand-deep:#2b174f;
            --brand-ink:#181326;
            --text-main:#211b2f;
            --text-muted:#6f6a7b;
            --text-soft:#938ca3;
            --bg-page:#fbf8ff;
            --bg-soft:#f2eefb;
            --bg-card:#ffffff;
            --bg-tint:#f6fbff;
            --border:#e8e0f4;
            --border-strong:#d7c8ef;
            --shadow-sm:0 10px 28px rgba(64,39,112,.08);
            --shadow-md:0 18px 46px rgba(74,45,130,.14);
            --shadow-lg:0 28px 70px rgba(84,49,148,.18);
            --radius-sm:14px;
            --radius-md:20px;
            --radius-lg:28px;
            --radius-xl:36px;
            --container:1240px;
            --gradient-brand:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 46%,#13b8c8 100%);
            --gradient-soft:linear-gradient(135deg,rgba(124,58,237,.12),rgba(19,184,200,.13));
            --gradient-warm:linear-gradient(135deg,rgba(255,122,89,.13),rgba(124,58,237,.10));
            --transition:all .28s cubic-bezier(.2,.75,.25,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            color:var(--text-main);
            background:
                radial-gradient(circle at 8% 8%,rgba(124,58,237,.10),transparent 28%),
                radial-gradient(circle at 92% 12%,rgba(19,184,200,.11),transparent 30%),
                linear-gradient(180deg,#fffdff 0%,var(--bg-page) 48%,#f8fbff 100%);
            line-height:1.72;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        a{color:inherit;text-decoration:none;transition:var(--transition)}
        img,svg{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(124,58,237,.18);color:var(--brand-deep)}
        .container{max-width:var(--container)}
        .section{padding:96px 0;position:relative}
        .section-tight{padding:72px 0}
        .section-title{
            max-width:780px;
            margin-bottom:34px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 13px;
            border-radius:999px;
            background:rgba(124,58,237,.09);
            color:var(--brand-primary);
            font-size:14px;
            font-weight:700;
            letter-spacing:.02em;
            margin-bottom:14px;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--gradient-brand);
            box-shadow:0 0 0 5px rgba(124,58,237,.10);
        }
        h1,h2,h3,h4{color:var(--brand-ink);letter-spacing:-.03em;line-height:1.18}
        h1{font-size:clamp(38px,5vw,68px);font-weight:900}
        h2{font-size:clamp(30px,3.4vw,46px);font-weight:850}
        h3{font-size:22px;font-weight:800}
        p{margin-bottom:0;color:var(--text-muted)}
        .lead-text{font-size:18px;color:#5e596c;line-height:1.85}
        .text-gradient{
            background:var(--gradient-brand);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            padding:14px 0;
            background:rgba(251,248,255,.92);
            border-bottom:1px solid rgba(232,224,244,.78);
            box-shadow:0 12px 36px rgba(57,38,98,.06);
            backdrop-filter:blur(10px);
        }
        .navbar{padding:0}
        .navbar>.container{
            min-height:68px;
            padding:10px 18px;
            border:1px solid rgba(232,224,244,.86);
            border-radius:26px;
            background:rgba(255,255,255,.86);
            box-shadow:var(--shadow-sm);
        }
        .navbar-brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
            margin-right:26px;
        }
        .brand-badge{
            width:44px;
            height:44px;
            flex:0 0 44px;
            display:grid;
            place-items:center;
            border-radius:16px;
            background:var(--gradient-brand);
            box-shadow:0 14px 30px rgba(124,58,237,.25);
        }
        .brand-badge svg{width:25px;height:25px}
        .brand-text{display:flex;flex-direction:column;line-height:1.18;min-width:0}
        .brand-name{
            font-weight:900;
            font-size:18px;
            color:var(--brand-deep);
            letter-spacing:-.02em;
            white-space:nowrap;
        }
        .brand-subtitle{
            font-size:12px;
            color:var(--text-soft);
            margin-top:3px;
            white-space:nowrap;
        }
        .navbar-nav{gap:4px}
        .nav-link{
            position:relative;
            color:#4e465e;
            font-weight:750;
            font-size:15px;
            padding:11px 14px!important;
            border-radius:999px;
        }
        .nav-link:hover,.nav-link:focus{
            color:var(--brand-primary);
            background:rgba(124,58,237,.08);
        }
        .nav-link.active{
            color:var(--brand-primary)!important;
            background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(19,184,200,.10));
        }
        .nav-link.active::after{
            content:"";
            position:absolute;
            left:18px;
            right:18px;
            bottom:5px;
            height:3px;
            border-radius:999px;
            background:var(--gradient-brand);
        }
        .navbar-toggler{
            width:46px;
            height:42px;
            border:0;
            border-radius:16px;
            background:rgba(124,58,237,.10);
            padding:0;
            box-shadow:none!important;
        }
        .navbar-toggler:focus{outline:3px solid rgba(124,58,237,.18)}
        .navbar-toggler-icon{
            width:22px;
            height:16px;
            position:relative;
            background-image:none!important;
            display:inline-block;
        }
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after,
        .navbar-toggler-icon span{
            content:"";
            position:absolute;
            left:0;
            width:22px;
            height:2px;
            border-radius:999px;
            background:var(--brand-primary);
        }
        .navbar-toggler-icon::before{top:0}
        .navbar-toggler-icon span{top:7px}
        .navbar-toggler-icon::after{bottom:0}
        .btn{
            border:0;
            border-radius:999px;
            padding:12px 20px;
            font-weight:800;
            letter-spacing:-.01em;
            transition:var(--transition);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:46px;
        }
        .btn-brand{
            color:#fff!important;
            background:var(--gradient-brand);
            box-shadow:0 14px 30px rgba(124,58,237,.25);
        }
        .btn-brand:hover,.btn-brand:focus{
            color:#fff!important;
            transform:translateY(-3px);
            box-shadow:0 20px 42px rgba(124,58,237,.32);
        }
        .btn-ghost{
            color:var(--brand-primary)!important;
            background:rgba(124,58,237,.09);
            border:1px solid rgba(124,58,237,.14);
        }
        .btn-ghost:hover,.btn-ghost:focus{
            color:var(--brand-deep)!important;
            background:rgba(19,184,200,.12);
            transform:translateY(-2px);
        }
        .btn-light-brand{
            color:var(--brand-deep)!important;
            background:#fff;
            box-shadow:0 16px 34px rgba(41,26,73,.14);
        }
        .btn-light-brand:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(41,26,73,.20)}
        .btn:focus-visible,a:focus-visible{
            outline:3px solid rgba(19,184,200,.34);
            outline-offset:3px;
        }

        .page-hero{
            padding:74px 0 76px;
            position:relative;
            overflow:hidden;
        }
        .page-hero::before{
            content:"";
            position:absolute;
            width:620px;
            height:620px;
            right:-220px;
            top:-180px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(124,58,237,.18),rgba(19,184,200,.09) 45%,transparent 70%);
            pointer-events:none;
        }
        .breadcrumb-wrap{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            color:var(--text-soft);
            font-size:14px;
            margin-bottom:26px;
        }
        .breadcrumb-wrap a{
            color:var(--brand-primary);
            font-weight:800;
        }
        .breadcrumb-wrap span.dot{
            width:5px;
            height:5px;
            border-radius:50%;
            background:#c7badc;
        }
        .hero-panel{
            position:relative;
            padding:34px;
            border-radius:var(--radius-xl);
            background:
                linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,241,255,.86)),
                var(--bg-card);
            border:1px solid rgba(232,224,244,.92);
            box-shadow:var(--shadow-lg);
            overflow:hidden;
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            inset:0 0 auto 0;
            height:8px;
            background:var(--gradient-brand);
        }
        .hero-summary{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px;
            margin-top:24px;
        }
        .summary-badge{
            padding:17px;
            border-radius:22px;
            background:rgba(255,255,255,.78);
            border:1px solid rgba(232,224,244,.9);
            box-shadow:0 12px 26px rgba(74,45,130,.07);
        }
        .summary-badge strong{
            display:block;
            color:var(--brand-deep);
            font-size:26px;
            line-height:1;
            margin-bottom:7px;
        }
        .summary-badge span{
            color:var(--text-muted);
            font-size:13px;
            font-weight:700;
        }
        .visual-board{
            position:relative;
            min-height:430px;
            border-radius:34px;
            background:
                radial-gradient(circle at 24% 18%,rgba(255,255,255,.58),transparent 24%),
                linear-gradient(145deg,#412176,#7c3aed 45%,#13b8c8);
            padding:28px;
            box-shadow:var(--shadow-lg);
            overflow:hidden;
        }
        .visual-board::before{
            content:"";
            position:absolute;
            width:250px;
            height:250px;
            border:42px solid rgba(255,255,255,.16);
            border-radius:50%;
            right:-58px;
            top:34px;
        }
        .visual-board::after{
            content:"";
            position:absolute;
            width:180px;
            height:180px;
            border-radius:50%;
            background:rgba(255,122,89,.22);
            left:-52px;
            bottom:-42px;
            filter:blur(3px);
        }
        .visual-card{
            position:relative;
            z-index:2;
            border-radius:26px;
            padding:22px;
            background:rgba(255,255,255,.92);
            box-shadow:0 22px 42px rgba(29,17,58,.18);
            border:1px solid rgba(255,255,255,.70);
        }
        .visual-card + .visual-card{margin-top:18px}
        .visual-card.offset{
            margin-left:52px;
            background:rgba(255,255,255,.84);
        }
        .visual-card .line{
            height:8px;
            border-radius:999px;
            background:linear-gradient(90deg,rgba(124,58,237,.85),rgba(19,184,200,.25));
            margin:11px 0;
        }
        .visual-card .line.short{width:66%}
        .visual-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:var(--brand-deep);
            font-weight:850;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:7px 11px;
            border-radius:999px;
            font-size:13px;
            font-weight:800;
            color:var(--brand-primary);
            background:rgba(124,58,237,.09);
            border:1px solid rgba(124,58,237,.12);
            white-space:nowrap;
        }
        .pill.cyan{
            color:#087d8b;
            background:rgba(19,184,200,.11);
            border-color:rgba(19,184,200,.18);
        }
        .pill.warm{
            color:#b74c32;
            background:rgba(255,122,89,.12);
            border-color:rgba(255,122,89,.18);
        }

        .overview-card,.module-card,.scene-strip,.case-card,.process-card,.faq-shell,.contact-card{
            border-radius:var(--radius-lg);
            background:rgba(255,255,255,.88);
            border:1px solid rgba(232,224,244,.88);
            box-shadow:var(--shadow-sm);
            transition:var(--transition);
        }
        .overview-card:hover,.module-card:hover,.scene-strip:hover,.case-card:hover,.process-card:hover{
            transform:translateY(-5px);
            box-shadow:var(--shadow-md);
            border-color:rgba(124,58,237,.20);
        }
        .overview-card{
            padding:30px;
            height:100%;
            position:sticky;
            top:118px;
        }
        .tag-stack{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:24px 0 28px;
        }
        .side-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .side-list li{
            display:flex;
            gap:12px;
            padding:14px;
            border-radius:18px;
            background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(19,184,200,.06));
            color:#514a60;
            font-weight:700;
        }
        .check-dot{
            width:22px;
            height:22px;
            flex:0 0 22px;
            border-radius:50%;
            background:var(--gradient-brand);
            position:relative;
            margin-top:2px;
        }
        .check-dot::after{
            content:"";
            position:absolute;
            left:7px;
            top:5px;
            width:7px;
            height:11px;
            border:solid #fff;
            border-width:0 2px 2px 0;
            transform:rotate(45deg);
        }
        .module-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:20px;
        }
        .module-card{
            padding:28px;
            position:relative;
            overflow:hidden;
        }
        .module-card.large{
            min-height:292px;
            background:
                radial-gradient(circle at 85% 12%,rgba(19,184,200,.15),transparent 32%),
                linear-gradient(145deg,#fff,rgba(248,244,255,.95));
        }
        .module-card::before{
            content:"";
            position:absolute;
            inset:0 0 auto 0;
            height:5px;
            background:linear-gradient(90deg,var(--brand-primary),rgba(19,184,200,.65),transparent);
        }
        .icon-box{
            width:52px;
            height:52px;
            border-radius:18px;
            display:grid;
            place-items:center;
            margin-bottom:18px;
            background:var(--gradient-soft);
            color:var(--brand-primary);
        }
        .icon-box svg{width:26px;height:26px}
        .module-card p{margin:12px 0 20px}
        .metric-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .metric-mini{
            padding:10px 13px;
            border-radius:16px;
            background:#fff;
            border:1px solid rgba(232,224,244,.92);
            color:var(--brand-deep);
            font-weight:850;
            box-shadow:0 8px 18px rgba(74,45,130,.06);
        }
        .metric-mini small{
            color:var(--text-soft);
            font-weight:700;
            margin-left:4px;
        }
        .module-aside{
            display:grid;
            gap:20px;
        }

        .dark-band{
            background:
                radial-gradient(circle at 20% 18%,rgba(19,184,200,.20),transparent 30%),
                radial-gradient(circle at 88% 78%,rgba(255,122,89,.17),transparent 26%),
                linear-gradient(135deg,#29164a,#4b2782 52%,#0c6e7d);
            color:#fff;
            border-radius:42px;
            padding:54px;
            overflow:hidden;
            position:relative;
            box-shadow:var(--shadow-lg);
        }
        .dark-band h2,.dark-band h3{color:#fff}
        .dark-band p{color:rgba(255,255,255,.78)}
        .scene-strip{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:24px;
            align-items:center;
            padding:28px;
            margin-top:20px;
            background:rgba(255,255,255,.10);
            border-color:rgba(255,255,255,.18);
            box-shadow:none;
        }
        .scene-strip:hover{border-color:rgba(255,255,255,.34);box-shadow:0 22px 42px rgba(12,5,24,.16)}
        .scene-visual{
            min-height:210px;
            border-radius:26px;
            background:
                linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.06)),
                repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 24px);
            border:1px solid rgba(255,255,255,.18);
            padding:22px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .progress-line{
            height:12px;
            border-radius:999px;
            background:rgba(255,255,255,.16);
            overflow:hidden;
        }
        .progress-line span{
            display:block;
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg,#fff,#81eef6);
        }
        .scenario-points{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .scenario-points div{
            padding:13px 15px;
            border-radius:18px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.16);
            color:rgba(255,255,255,.88);
            font-weight:700;
        }

        .case-card{
            padding:30px;
            height:100%;
            background:
                radial-gradient(circle at 90% 10%,rgba(124,58,237,.08),transparent 30%),
                #fff;
        }
        .case-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
            margin-bottom:20px;
        }
        .case-index{
            width:54px;
            height:54px;
            border-radius:20px;
            display:grid;
            place-items:center;
            color:#fff;
            font-weight:900;
            background:var(--gradient-brand);
            box-shadow:0 12px 24px rgba(124,58,237,.22);
        }
        .result-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
            margin-top:24px;
        }
        .result-item{
            padding:15px;
            border-radius:18px;
            background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(19,184,200,.07));
            border:1px solid rgba(232,224,244,.88);
        }
        .result-item strong{
            display:block;
            color:var(--brand-primary);
            font-size:24px;
            line-height:1.1;
            margin-bottom:4px;
        }
        .result-item span{
            color:var(--text-muted);
            font-size:13px;
            font-weight:700;
        }

        .process-timeline{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:18px;
            counter-reset:step;
        }
        .process-card{
            padding:26px;
            position:relative;
            min-height:235px;
            overflow:hidden;
        }
        .process-card::after{
            counter-increment:step;
            content:"0" counter(step);
            position:absolute;
            right:20px;
            top:12px;
            font-size:58px;
            line-height:1;
            font-weight:900;
            color:rgba(124,58,237,.10);
        }
        .process-card h3{margin-top:24px}
        .process-card p{margin-top:12px}

        .cooperation-wrap{
            border-radius:42px;
            background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(19,184,200,.10));
            border:1px solid rgba(232,224,244,.92);
            padding:34px;
        }
        .plan-card{
            height:100%;
            padding:28px;
            border-radius:30px;
            background:#fff;
            border:1px solid rgba(232,224,244,.92);
            box-shadow:var(--shadow-sm);
            transition:var(--transition);
        }
        .plan-card.recommend{
            background:
                linear-gradient(#fff,#fff) padding-box,
                var(--gradient-brand) border-box;
            border:2px solid transparent;
            transform:translateY(-8px);
            box-shadow:var(--shadow-md);
        }
        .plan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
        .plan-card.recommend:hover{transform:translateY(-12px)}
        .plan-list{
            list-style:none;
            padding:0;
            margin:22px 0 0;
            display:grid;
            gap:12px;
        }
        .plan-list li{
            display:flex;
            gap:10px;
            color:#514a60;
            font-weight:700;
        }

        .faq-shell{
            padding:34px;
            background:
                radial-gradient(circle at 8% 14%,rgba(19,184,200,.08),transparent 28%),
                #fff;
        }
        .accordion{display:grid;gap:14px}
        .accordion-item{
            border:1px solid rgba(232,224,244,.92)!important;
            border-radius:22px!important;
            overflow:hidden;
            background:#fff;
            box-shadow:0 8px 20px rgba(74,45,130,.05);
        }
        .accordion-button{
            padding:20px 22px;
            font-weight:850;
            color:var(--brand-deep);
            background:#fff;
            box-shadow:none!important;
            border-radius:22px!important;
        }
        .accordion-button:not(.collapsed){
            color:var(--brand-primary);
            background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(19,184,200,.06));
        }
        .accordion-button::after{
            width:18px;
            height:18px;
            background-size:18px;
            filter:hue-rotate(45deg) saturate(1.4);
        }
        .accordion-body{
            padding:0 22px 22px;
            color:var(--text-muted);
            line-height:1.85;
        }

        .contact-card{
            position:relative;
            overflow:hidden;
            padding:52px;
            background:
                radial-gradient(circle at 88% 18%,rgba(255,255,255,.24),transparent 24%),
                var(--gradient-brand);
            color:#fff;
            box-shadow:var(--shadow-lg);
        }
        .contact-card h2{color:#fff}
        .contact-card p{color:rgba(255,255,255,.82)}
        .contact-form{
            display:grid;
            grid-template-columns:1fr 1fr auto;
            gap:12px;
            margin-top:26px;
        }
        .form-control{
            border:1px solid rgba(255,255,255,.34);
            border-radius:18px;
            min-height:52px;
            padding:12px 16px;
            color:#fff;
            background:rgba(255,255,255,.14);
            box-shadow:none!important;
        }
        .form-control::placeholder{color:rgba(255,255,255,.68)}
        .form-control:focus{
            border-color:#fff;
            background:rgba(255,255,255,.20);
            outline:0;
        }

        .footer{
            padding:64px 0 30px;
            background:#171025;
            color:rgba(255,255,255,.76);
        }
        .footer-topline{
            height:5px;
            border-radius:999px;
            background:var(--gradient-brand);
            margin-bottom:34px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.5fr .8fr .8fr 1fr;
            gap:34px;
        }
        .footer-brand{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:16px;
        }
        .footer .brand-name{color:#fff}
        .footer .brand-subtitle{color:rgba(255,255,255,.58)}
        .footer p{color:rgba(255,255,255,.66);max-width:410px}
        .footer h4{
            color:#fff;
            font-size:16px;
            margin-bottom:16px;
            font-weight:850;
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a,.footer-links li{
            color:rgba(255,255,255,.66);
            font-size:14px;
        }
        .footer-links a:hover{
            color:#fff;
            transform:translateX(3px);
        }
        .footer-meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
            margin-top:34px;
            padding-top:22px;
            border-top:1px solid rgba(255,255,255,.10);
            color:rgba(255,255,255,.56);
            font-size:13px;
        }
        .footer-meta strong{color:#fff}
        .footer-note{display:flex;gap:12px;flex-wrap:wrap}

        @media (max-width:1199px){
            .brand-name{font-size:16px}
            .nav-link{font-size:14px;padding:10px 11px!important}
            .module-grid{grid-template-columns:1fr}
            .process-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
            .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
        }
        @media (max-width:991px){
            .site-header{padding:10px 0}
            .navbar>.container{border-radius:22px}
            .nav-collapse-panel{
                margin-top:14px;
                padding-top:14px;
                border-top:1px solid rgba(232,224,244,.9);
            }
            .navbar-nav{align-items:stretch!important;gap:8px}
            .nav-link{padding:12px 14px!important}
            .nav-link.active::after{display:none}
            .page-hero{padding:54px 0}
            .visual-board{min-height:360px;margin-top:26px}
            .overview-card{position:relative;top:auto}
            .scene-strip{grid-template-columns:1fr}
            .dark-band{padding:36px;border-radius:32px}
            .contact-form{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width:767px){
            .section{padding:72px 0}
            .section-tight{padding:56px 0}
            h1{font-size:38px}
            .lead-text{font-size:16px}
            .hero-panel{padding:26px;border-radius:28px}
            .hero-summary{grid-template-columns:1fr}
            .visual-card.offset{margin-left:20px}
            .result-grid{grid-template-columns:1fr}
            .process-timeline{grid-template-columns:1fr}
            .cooperation-wrap{padding:22px;border-radius:30px}
            .plan-card.recommend{transform:none}
            .plan-card.recommend:hover{transform:translateY(-6px)}
            .contact-card{padding:32px;border-radius:30px}
            .footer-grid{grid-template-columns:1fr}
            .footer-meta{align-items:flex-start;flex-direction:column}
        }
        @media (max-width:520px){
            .container{padding-left:18px;padding-right:18px}
            .navbar>.container{padding:9px 12px}
            .brand-badge{width:40px;height:40px;flex-basis:40px;border-radius:14px}
            .brand-name{max-width:190px;overflow:hidden;text-overflow:ellipsis}
            .brand-subtitle{font-size:11px}
            .btn{width:100%;padding:12px 16px}
            .page-hero{padding-top:42px}
            .breadcrumb-wrap{font-size:13px}
            .visual-board{min-height:310px;padding:18px;border-radius:28px}
            .visual-card{padding:18px}
            .module-card,.case-card,.overview-card,.faq-shell{padding:22px;border-radius:24px}
            .dark-band{padding:26px;border-radius:28px}
            .scene-strip{padding:20px;border-radius:24px}
            .contact-form .btn{width:100%}
        }

/* roulang page: category2 */
:root {
            --brand: #7c3aed;
            --brand-2: #0ea5a8;
            --brand-3: #ff7a59;
            --ink: #171523;
            --muted: #696677;
            --soft: #f7f3ff;
            --soft-2: #eefdfa;
            --paper: #fffdf9;
            --card: rgba(255, 255, 255, .86);
            --line: rgba(80, 68, 110, .14);
            --line-strong: rgba(124, 58, 237, .24);
            --shadow: 0 22px 60px rgba(68, 45, 122, .11);
            --shadow-hover: 0 26px 70px rgba(68, 45, 122, .18);
            --radius-sm: 14px;
            --radius: 22px;
            --radius-lg: 30px;
            --radius-xl: 38px;
            --gradient: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 42%, #0ea5a8 100%);
            --gradient-soft: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(14, 165, 168, .11));
            --gradient-warm: linear-gradient(135deg, rgba(255, 122, 89, .14), rgba(124, 58, 237, .10));
            --container: 1240px;
            --nav-h: 78px;
            --ease: all .24s ease;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            margin: 0;
            min-width: 320px;
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            line-height: 1.72;
            background:
                radial-gradient(circle at 8% 4%, rgba(124, 58, 237, .10), transparent 30%),
                radial-gradient(circle at 90% 10%, rgba(14, 165, 168, .12), transparent 26%),
                linear-gradient(180deg, #fffaf7 0%, #f8f6ff 45%, #fffdf9 100%);
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--ease);
        }

        a:hover {
            color: var(--brand);
        }

        img, svg {
            max-width: 100%;
            display: block;
        }

        button, input, textarea, select {
            font: inherit;
        }

        ::selection {
            color: #fff;
            background: var(--brand);
        }

        .container {
            max-width: var(--container);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 14px 0;
            background: rgba(255, 253, 249, .92);
            border-bottom: 1px solid rgba(124, 58, 237, .10);
            box-shadow: 0 10px 40px rgba(60, 42, 102, .06);
            backdrop-filter: blur(10px);
        }

        .navbar {
            padding: 0;
        }

        .navbar-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            padding: 0;
            margin: 0;
        }

        .brand-badge {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            background: var(--gradient);
            box-shadow: 0 14px 34px rgba(124, 58, 237, .28);
        }

        .brand-badge svg {
            width: 25px;
            height: 25px;
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.18;
            min-width: 0;
        }

        .brand-name {
            color: var(--ink);
            font-size: 18px;
            font-weight: 900;
            letter-spacing: -.02em;
            white-space: nowrap;
        }

        .brand-subtitle {
            margin-top: 4px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .nav-collapse-panel {
            border-radius: 22px;
        }

        .navbar-nav {
            gap: 4px;
        }

        .nav-link {
            position: relative;
            color: #343042;
            font-size: 15px;
            font-weight: 750;
            padding: 10px 14px !important;
            border-radius: 999px;
        }

        .nav-link:hover,
        .nav-link:focus {
            color: var(--brand);
            background: rgba(124, 58, 237, .08);
        }

        .nav-link.active {
            color: var(--brand);
            background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(14, 165, 168, .10));
        }

        .nav-link.active::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 4px;
            height: 3px;
            border-radius: 999px;
            background: var(--gradient);
        }

        .navbar-toggler {
            width: 46px;
            height: 42px;
            border: 1px solid var(--line-strong);
            border-radius: 14px;
            box-shadow: none !important;
            padding: 0;
            background: rgba(255, 255, 255, .72);
        }

        .navbar-toggler:focus {
            outline: 3px solid rgba(124, 58, 237, .20);
        }

        .navbar-toggler-icon {
            width: 22px;
            height: 16px;
            position: relative;
            background-image: none !important;
        }

        .navbar-toggler-icon,
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after,
        .navbar-toggler-icon span {
            display: inline-block;
        }

        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after,
        .navbar-toggler-icon span {
            content: "";
            position: absolute;
            left: 0;
            width: 22px;
            height: 2px;
            border-radius: 99px;
            background: var(--ink);
        }

        .navbar-toggler-icon::before {
            top: 0;
        }

        .navbar-toggler-icon span {
            top: 7px;
        }

        .navbar-toggler-icon::after {
            bottom: 0;
        }

        .btn {
            --bs-btn-padding-x: 20px;
            --bs-btn-padding-y: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: -.01em;
            border: 0;
            transition: var(--ease);
        }

        .btn:focus-visible {
            outline: 4px solid rgba(124, 58, 237, .22);
            outline-offset: 3px;
        }

        .btn-brand {
            color: #fff !important;
            background: var(--gradient);
            box-shadow: 0 14px 30px rgba(124, 58, 237, .25);
        }

        .btn-brand:hover,
        .btn-brand:active {
            color: #fff !important;
            transform: translateY(-3px);
            box-shadow: 0 20px 44px rgba(124, 58, 237, .34);
        }

        .btn-ghost {
            color: var(--ink);
            background: rgba(255, 255, 255, .76);
            border: 1px solid var(--line);
        }

        .btn-ghost:hover,
        .btn-ghost:active {
            color: var(--brand);
            background: rgba(124, 58, 237, .08);
            transform: translateY(-2px);
            border-color: var(--line-strong);
        }

        .btn-warm {
            color: #fff !important;
            background: linear-gradient(135deg, #ff7a59, #8b5cf6);
            box-shadow: 0 14px 32px rgba(255, 122, 89, .22);
        }

        .btn-warm:hover {
            color: #fff !important;
            transform: translateY(-3px);
            box-shadow: 0 20px 46px rgba(255, 122, 89, .28);
        }

        main {
            position: relative;
        }

        .section {
            padding: 92px 0;
            position: relative;
        }

        .section-tight {
            padding: 68px 0;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 13px;
            border-radius: 999px;
            color: var(--brand);
            font-size: 13px;
            font-weight: 900;
            background: rgba(124, 58, 237, .10);
            border: 1px solid rgba(124, 58, 237, .14);
        }

        .eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 99px;
            background: var(--gradient);
            box-shadow: 0 0 0 5px rgba(124, 58, 237, .10);
        }

        .section-title {
            margin: 16px 0 12px;
            font-size: clamp(28px, 4vw, 46px);
            line-height: 1.16;
            font-weight: 950;
            letter-spacing: -.045em;
        }

        .section-desc {
            max-width: 760px;
            margin: 0;
            color: var(--muted);
            font-size: 17px;
        }

        .text-gradient {
            background: var(--gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero {
            padding: 76px 0 70px;
        }

        .breadcrumb-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 22px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 700;
        }

        .breadcrumb-wrap a {
            color: #4d465e;
        }

        .breadcrumb-wrap a:hover {
            color: var(--brand);
        }

        .breadcrumb-sep {
            width: 18px;
            height: 1px;
            background: rgba(80, 68, 110, .28);
        }

        .hero-shell {
            position: relative;
            overflow: hidden;
            padding: clamp(28px, 5vw, 56px);
            border: 1px solid rgba(124, 58, 237, .14);
            border-radius: var(--radius-xl);
            background:
                radial-gradient(circle at 82% 20%, rgba(14, 165, 168, .20), transparent 34%),
                radial-gradient(circle at 12% 82%, rgba(255, 122, 89, .16), transparent 32%),
                linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(247, 243, 255, .82));
            box-shadow: var(--shadow);
        }

        .hero-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(124, 58, 237, .055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(124, 58, 237, .055) 1px, transparent 1px);
            background-size: 36px 36px;
            mask-image: radial-gradient(circle at 72% 36%, black, transparent 68%);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            margin: 18px 0 18px;
            max-width: 760px;
            font-size: clamp(34px, 5.4vw, 66px);
            line-height: 1.06;
            font-weight: 980;
            letter-spacing: -.06em;
        }

        .hero-lead {
            max-width: 700px;
            margin: 0 0 28px;
            color: #5c566d;
            font-size: clamp(16px, 2vw, 20px);
            line-height: 1.85;
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        .metric-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .metric-badge {
            padding: 16px;
            border-radius: 20px;
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(124, 58, 237, .13);
            box-shadow: 0 12px 28px rgba(68, 45, 122, .07);
        }

        .metric-badge strong {
            display: block;
            color: var(--ink);
            font-size: 22px;
            line-height: 1.1;
            font-weight: 950;
        }

        .metric-badge span {
            display: block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .scene-visual {
            position: relative;
            min-height: 440px;
            border-radius: 34px;
            padding: 24px;
            background: linear-gradient(145deg, rgba(23, 21, 35, .96), rgba(73, 44, 122, .92));
            box-shadow: 0 28px 70px rgba(60, 42, 102, .26);
            overflow: hidden;
        }

        .scene-visual::before {
            content: "";
            position: absolute;
            width: 270px;
            height: 270px;
            right: -70px;
            top: -80px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(14, 165, 168, .55), transparent 66%);
        }

        .scene-visual::after {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            left: -70px;
            bottom: -80px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 122, 89, .44), transparent 68%);
        }

        .vr-orbit {
            position: absolute;
            inset: 54px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 50%;
            transform: rotate(-13deg);
        }

        .vr-orbit:nth-child(2) {
            inset: 92px 42px;
            transform: rotate(20deg);
            border-color: rgba(14, 165, 168, .32);
        }

        .visual-panel {
            position: relative;
            z-index: 2;
            margin-top: 22px;
            padding: 22px;
            border-radius: 26px;
            color: #fff;
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .16);
        }

        .visual-panel h3 {
            margin: 0 0 14px;
            font-size: 24px;
            font-weight: 950;
        }

        .visual-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 18px;
        }

        .visual-tags span {
            padding: 7px 10px;
            border-radius: 999px;
            color: rgba(255, 255, 255, .92);
            font-size: 12px;
            font-weight: 800;
            background: rgba(255, 255, 255, .12);
        }

        .visual-bars {
            display: grid;
            gap: 12px;
        }

        .visual-bars i {
            display: block;
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(14, 165, 168, .86));
        }

        .visual-bars i:nth-child(2) {
            width: 74%;
            background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(139, 92, 246, .90));
        }

        .visual-bars i:nth-child(3) {
            width: 88%;
            background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 122, 89, .84));
        }

        .floating-card {
            position: absolute;
            z-index: 3;
            right: 20px;
            bottom: 26px;
            width: 210px;
            padding: 18px;
            border-radius: 24px;
            color: #fff;
            background: linear-gradient(135deg, rgba(14, 165, 168, .92), rgba(124, 58, 237, .92));
            box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
        }

        .floating-card strong {
            display: block;
            font-size: 32px;
            line-height: 1;
            font-weight: 980;
        }

        .floating-card span {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            font-weight: 750;
            opacity: .92;
        }

        .card-modern {
            position: relative;
            height: 100%;
            padding: 28px;
            border-radius: var(--radius-lg);
            background: var(--card);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            transition: var(--ease);
            overflow: hidden;
        }

        .card-modern::before {
            content: "";
            position: absolute;
            top: 0;
            left: 24px;
            right: 24px;
            height: 4px;
            border-radius: 0 0 999px 999px;
            background: var(--gradient);
            opacity: .8;
        }

        .card-modern:hover {
            transform: translateY(-6px);
            border-color: var(--line-strong);
            box-shadow: var(--shadow-hover);
        }

        .scenario-card {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .scenario-icon {
            width: 58px;
            height: 58px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            color: #fff;
            font-size: 26px;
            font-weight: 950;
            background: var(--gradient);
            box-shadow: 0 14px 32px rgba(124, 58, 237, .22);
        }

        .scenario-card h3 {
            margin: 0;
            font-size: 23px;
            line-height: 1.25;
            font-weight: 950;
            letter-spacing: -.025em;
        }

        .scenario-card p {
            margin: 0;
            color: var(--muted);
        }

        .result-strip {
            display: grid;
            gap: 10px;
            margin-top: auto;
        }

        .result-strip li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 16px;
            color: #4e485d;
            font-size: 14px;
            font-weight: 700;
            background: rgba(124, 58, 237, .06);
            list-style: none;
        }

        .result-strip li::before {
            content: "";
            width: 8px;
            height: 8px;
            flex: 0 0 8px;
            margin-top: 8px;
            border-radius: 99px;
            background: var(--brand-2);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            padding: 7px 11px;
            border-radius: 999px;
            color: var(--brand);
            font-size: 13px;
            font-weight: 850;
            background: rgba(124, 58, 237, .09);
            border: 1px solid rgba(124, 58, 237, .12);
        }

        .scene-matrix {
            margin-top: 36px;
        }

        .process-section {
            background:
                radial-gradient(circle at 20% 10%, rgba(124, 58, 237, .12), transparent 32%),
                radial-gradient(circle at 86% 82%, rgba(14, 165, 168, .12), transparent 34%);
        }

        .timeline {
            position: relative;
            margin-top: 42px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: calc(50% - 1px);
            top: 24px;
            bottom: 24px;
            width: 2px;
            background: linear-gradient(180deg, rgba(124, 58, 237, .16), rgba(14, 165, 168, .46), rgba(255, 122, 89, .16));
        }

        .step-row {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 92px 1fr;
            align-items: center;
            gap: 24px;
            margin-bottom: 28px;
        }

        .step-row:last-child {
            margin-bottom: 0;
        }

        .step-row:nth-child(even) .step-card {
            grid-column: 3;
        }

        .step-row:nth-child(even) .step-note {
            grid-column: 1;
            grid-row: 1;
            text-align: right;
        }

        .step-dot {
            grid-column: 2;
            grid-row: 1;
            width: 66px;
            height: 66px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 22px;
            color: #fff;
            font-size: 18px;
            font-weight: 980;
            background: var(--gradient);
            box-shadow: 0 16px 38px rgba(124, 58, 237, .25);
            z-index: 2;
        }

        .step-card {
            padding: 26px;
            border-radius: 28px;
            background: rgba(255, 255, 255, .82);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .step-card h3 {
            margin: 0 0 10px;
            font-size: 22px;
            font-weight: 950;
        }

        .step-card p,
        .step-note p {
            margin: 0;
            color: var(--muted);
        }

        .step-note {
            color: var(--muted);
            font-weight: 750;
        }

        .case-card {
            border-radius: var(--radius-xl);
            overflow: hidden;
            background: rgba(255, 255, 255, .86);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .case-visual {
            min-height: 100%;
            padding: 34px;
            color: #fff;
            background:
                radial-gradient(circle at 25% 22%, rgba(255, 255, 255, .24), transparent 22%),
                linear-gradient(135deg, #211833, #7c3aed 54%, #0ea5a8);
        }

        .case-visual h3 {
            margin: 0 0 16px;
            font-size: 30px;
            font-weight: 950;
            letter-spacing: -.035em;
        }

        .case-visual p {
            margin: 0;
            color: rgba(255, 255, 255, .82);
        }

        .case-rank {
            display: grid;
            gap: 12px;
            margin-top: 30px;
        }

        .rank-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .13);
            border: 1px solid rgba(255, 255, 255, .14);
        }

        .rank-item span {
            font-size: 14px;
            font-weight: 800;
        }

        .rank-item strong {
            font-size: 20px;
            font-weight: 980;
        }

        .case-body {
            padding: clamp(26px, 4vw, 42px);
        }

        .case-body h3 {
            margin: 0 0 16px;
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1.18;
            font-weight: 950;
            letter-spacing: -.035em;
        }

        .case-body p {
            color: var(--muted);
        }

        .case-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 24px;
        }

        .case-data {
            padding: 18px;
            border-radius: 22px;
            background: var(--soft);
            border: 1px solid rgba(124, 58, 237, .10);
        }

        .case-data strong {
            display: block;
            color: var(--brand);
            font-size: 28px;
            line-height: 1.1;
            font-weight: 980;
        }

        .case-data span {
            display: block;
            margin-top: 8px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 750;
        }

        .advice-box {
            margin-top: 26px;
            padding: 18px 20px;
            border-radius: 22px;
            background: var(--gradient-soft);
            border: 1px solid rgba(14, 165, 168, .16);
            color: #4d465e;
            font-weight: 750;
        }

        .cooperation-wrap {
            position: relative;
            overflow: hidden;
            padding: clamp(30px, 5vw, 52px);
            border-radius: var(--radius-xl);
            color: #fff;
            background:
                radial-gradient(circle at 18% 28%, rgba(255, 122, 89, .34), transparent 26%),
                radial-gradient(circle at 88% 20%, rgba(14, 165, 168, .42), transparent 30%),
                linear-gradient(135deg, #211833, #5b2acb 58%, #0b9a9d);
            box-shadow: 0 30px 80px rgba(68, 45, 122, .24);
        }

        .cooperation-wrap::after {
            content: "";
            position: absolute;
            inset: 16px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, .12);
            pointer-events: none;
        }

        .cooperation-wrap h2 {
            margin: 0 0 14px;
            font-size: clamp(30px, 4vw, 48px);
            line-height: 1.15;
            font-weight: 980;
            letter-spacing: -.045em;
        }

        .cooperation-wrap p {
            max-width: 760px;
            margin: 0;
            color: rgba(255, 255, 255, .78);
            font-size: 17px;
        }

        .plan-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 34px;
        }

        .plan-card {
            padding: 24px;
            border-radius: 28px;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .15);
        }

        .plan-card.recommend {
            background: rgba(255, 255, 255, .20);
            transform: translateY(-8px);
            box-shadow: 0 22px 60px rgba(0, 0, 0, .16);
        }

        .plan-card h3 {
            margin: 0 0 12px;
            font-size: 22px;
            font-weight: 950;
        }

        .plan-card p {
            color: rgba(255, 255, 255, .78);
            font-size: 15px;
        }

        .plan-card ul {
            padding: 0;
            margin: 18px 0 0;
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .plan-card li {
            position: relative;
            padding-left: 20px;
            color: rgba(255, 255, 255, .88);
            font-size: 14px;
            font-weight: 700;
        }

        .plan-card li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 8px;
            height: 8px;
            border-radius: 99px;
            background: #65f0df;
        }

        .contact-card {
            height: 100%;
            padding: 30px;
            border-radius: var(--radius-lg);
            background: rgba(255, 255, 255, .86);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .contact-card h3 {
            margin: 0 0 14px;
            font-size: 26px;
            font-weight: 950;
        }

        .contact-card p {
            color: var(--muted);
        }

        .contact-form {
            display: grid;
            gap: 14px;
        }

        .form-field {
            width: 100%;
            min-height: 50px;
            padding: 13px 16px;
            border-radius: 18px;
            color: var(--ink);
            background: rgba(255, 255, 255, .88);
            border: 1px solid var(--line);
            outline: none;
            transition: var(--ease);
        }

        textarea.form-field {
            min-height: 128px;
            resize: vertical;
        }

        .form-field::placeholder {
            color: #9b95aa;
        }

        .form-field:focus {
            border-color: rgba(124, 58, 237, .46);
            box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
            background: #fff;
        }

        .faq-left {
            position: sticky;
            top: 112px;
        }

        .accordion {
            display: grid;
            gap: 14px;
        }

        .accordion-item {
            border: 1px solid var(--line) !important;
            border-radius: 22px !important;
            overflow: hidden;
            background: rgba(255, 255, 255, .82);
            box-shadow: 0 12px 34px rgba(68, 45, 122, .07);
        }

        .accordion-button {
            padding: 20px 22px;
            color: var(--ink);
            font-weight: 900;
            background: transparent;
            box-shadow: none !important;
            border: 0;
        }

        .accordion-button:not(.collapsed) {
            color: var(--brand);
            background: linear-gradient(135deg, rgba(124, 58, 237, .09), rgba(14, 165, 168, .06));
        }

        .accordion-button::after {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background-color: rgba(124, 58, 237, .10);
            background-position: center;
            background-size: 16px;
        }

        .accordion-button:focus {
            outline: 4px solid rgba(124, 58, 237, .14);
            outline-offset: -4px;
        }

        .accordion-body {
            padding: 0 22px 22px;
            color: var(--muted);
        }

        .footer {
            padding: 0 0 30px;
            background: #171523;
            color: rgba(255, 255, 255, .78);
        }

        .footer-topline {
            height: 5px;
            border-radius: 0 0 999px 999px;
            background: var(--gradient);
            margin-bottom: 48px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr .8fr 1.05fr;
            gap: 34px;
            padding-bottom: 36px;
            border-bottom: 1px solid rgba(255, 255, 255, .10);
        }

        .footer-brand {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 16px;
        }

        .footer .brand-name {
            color: #fff;
        }

        .footer .brand-subtitle {
            color: rgba(255, 255, 255, .58);
        }

        .footer p {
            max-width: 390px;
            margin: 0;
            color: rgba(255, 255, 255, .62);
        }

        .footer h4 {
            margin: 0 0 16px;
            color: #fff;
            font-size: 16px;
            font-weight: 900;
        }

        .footer-links {
            padding: 0;
            margin: 0;
            display: grid;
            gap: 10px;
            list-style: none;
        }

        .footer-links a,
        .footer-links li {
            color: rgba(255, 255, 255, .64);
            font-size: 14px;
            font-weight: 650;
        }

        .footer-links a:hover {
            color: #65f0df;
            padding-left: 4px;
        }

        .footer-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 18px;
            padding-top: 22px;
            color: rgba(255, 255, 255, .55);
            font-size: 13px;
            flex-wrap: wrap;
        }

        .footer-meta strong {
            color: rgba(255, 255, 255, .82);
        }

        .footer-note {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        @media (max-width: 1199.98px) {
            .metric-row {
                grid-template-columns: repeat(2, 1fr);
            }

            .scene-visual {
                min-height: 390px;
            }

            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 991.98px) {
            .site-header {
                padding: 10px 0;
            }

            .nav-collapse-panel {
                margin-top: 14px;
                padding: 14px;
                background: rgba(255, 255, 255, .94);
                border: 1px solid rgba(124, 58, 237, .12);
                box-shadow: var(--shadow);
            }

            .navbar-nav {
                align-items: stretch !important;
                gap: 8px;
            }

            .nav-link {
                padding: 12px 14px !important;
            }

            .nav-link.active::after {
                left: 14px;
                right: auto;
                width: 42px;
            }

            .hero {
                padding-top: 44px;
            }

            .section {
                padding: 72px 0;
            }

            .scene-visual {
                margin-top: 26px;
            }

            .timeline::before {
                left: 33px;
            }

            .step-row,
            .step-row:nth-child(even) {
                grid-template-columns: 66px 1fr;
                gap: 16px;
                align-items: flex-start;
            }

            .step-dot,
            .step-row:nth-child(even) .step-dot {
                grid-column: 1;
            }

            .step-card,
            .step-row:nth-child(even) .step-card {
                grid-column: 2;
            }

            .step-note,
            .step-row:nth-child(even) .step-note {
                grid-column: 2;
                grid-row: auto;
                text-align: left;
                margin-top: -16px;
            }

            .plan-list {
                grid-template-columns: 1fr;
            }

            .plan-card.recommend {
                transform: none;
            }

            .faq-left {
                position: static;
                margin-bottom: 24px;
            }
        }

        @media (max-width: 767.98px) {
            .brand-name {
                max-width: 190px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .brand-subtitle {
                display: none;
            }

            .brand-badge {
                width: 42px;
                height: 42px;
                flex-basis: 42px;
                border-radius: 14px;
            }

            .hero-shell {
                padding: 24px;
                border-radius: 28px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .metric-row,
            .case-grid {
                grid-template-columns: 1fr;
            }

            .scene-visual {
                min-height: 330px;
                padding: 18px;
            }

            .floating-card {
                left: 18px;
                right: 18px;
                width: auto;
                bottom: 18px;
            }

            .visual-panel {
                padding: 18px;
            }

            .section {
                padding: 58px 0;
            }

            .card-modern,
            .contact-card {
                padding: 22px;
                border-radius: 24px;
            }

            .case-visual {
                min-height: 280px;
            }

            .cooperation-wrap {
                border-radius: 28px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .footer-meta {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (max-width: 520px) {
            .container {
                padding-left: 18px;
                padding-right: 18px;
            }

            .hero h1 {
                font-size: 34px;
            }

            .section-title {
                font-size: 29px;
            }

            .breadcrumb-wrap {
                font-size: 13px;
            }

            .step-row,
            .step-row:nth-child(even) {
                grid-template-columns: 54px 1fr;
                gap: 12px;
            }

            .step-dot {
                width: 54px;
                height: 54px;
                border-radius: 18px;
                font-size: 15px;
            }

            .timeline::before {
                left: 27px;
            }

            .step-card {
                padding: 20px;
                border-radius: 22px;
            }

            .plan-card {
                padding: 20px;
                border-radius: 22px;
            }
        }

/* roulang page: category3 */
:root{
      --bg: #f7f4fb;
      --bg-2: #f2edf8;
      --surface: rgba(255,255,255,.92);
      --surface-strong: #ffffff;
      --text: #1c1530;
      --muted: #6e6782;
      --muted-2: #8b839c;
      --line: rgba(106, 81, 141, .14);
      --line-strong: rgba(106, 81, 141, .22);
      --primary: #7a4dff;
      --primary-2: #5f7dff;
      --secondary: #19c6bf;
      --accent: #ff8b5f;
      --soft-accent: #ffe1d3;
      --success: #26b99a;
      --shadow: 0 16px 40px rgba(51, 28, 83, .08);
      --shadow-hover: 0 22px 56px rgba(73, 38, 116, .14);
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 14px;
      --gradient-main: linear-gradient(135deg, #7a4dff 0%, #7f66ff 36%, #35c7c3 100%);
      --gradient-soft: linear-gradient(135deg, rgba(122,77,255,.16) 0%, rgba(53,199,195,.12) 100%);
      --gradient-warm: linear-gradient(135deg, rgba(255,139,95,.16) 0%, rgba(255,208,190,.26) 100%);
      --header-h: 84px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(122, 77, 255, .10), transparent 26%),
        radial-gradient(circle at top right, rgba(25, 198, 191, .10), transparent 24%),
        linear-gradient(180deg, #faf8fd 0%, #f4f0f8 44%, #f6f3fb 100%);
      line-height: 1.7;
      overflow-x: hidden;
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: auto;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(10px);
      opacity: .36;
    }
    body::before {
      top: 8%;
      right: -110px;
      background: radial-gradient(circle, rgba(122,77,255,.22) 0%, rgba(122,77,255,.04) 45%, transparent 72%);
    }
    body::after {
      bottom: 10%;
      left: -110px;
      background: radial-gradient(circle, rgba(25,198,191,.18) 0%, rgba(25,198,191,.04) 45%, transparent 72%);
    }
    a {
      color: inherit;
      text-decoration: none;
      transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease;
    }
    a:hover { color: var(--primary); }
    img { max-width: 100%; display: block; }
    button, input, textarea, select {
      font: inherit;
    }
    ::selection {
      background: rgba(122,77,255,.16);
      color: var(--text);
    }
    .container {
      position: relative;
      z-index: 1;
      max-width: 1320px;
    }
    .section-block {
      padding: clamp(3.6rem, 6vw, 6rem) 0;
      position: relative;
    }
    .section-alt {
      background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.58) 100%);
      border-top: 1px solid rgba(106,81,141,.08);
      border-bottom: 1px solid rgba(106,81,141,.08);
    }
    .section-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .42rem .85rem;
      border-radius: 999px;
      background: rgba(122,77,255,.08);
      color: #5c3ed7;
      font-size: .92rem;
      font-weight: 700;
      letter-spacing: .02em;
      border: 1px solid rgba(122,77,255,.12);
    }
    .eyebrow::before {
      content: "";
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      background: var(--gradient-main);
      box-shadow: 0 0 0 6px rgba(122,77,255,.08);
    }
    .section-title {
      margin: .8rem 0 .55rem;
      font-size: clamp(1.7rem, 2.8vw, 2.65rem);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--text);
    }
    .section-lead {
      margin: 0;
      max-width: 740px;
      color: var(--muted);
      font-size: 1.03rem;
    }
    .text-gradient {
      background: linear-gradient(135deg, #6a3dff 0%, #2dcdc8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(248, 245, 250, .96);
      border-bottom: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 8px 30px rgba(50, 34, 76, .05);
      transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
    }
    .site-header.is-scrolled {
      box-shadow: 0 12px 34px rgba(50, 34, 76, .09);
      background: rgba(249, 246, 251, .98);
    }
    .navbar {
      padding: .95rem 0;
    }
    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: .85rem;
      padding: .25rem 0;
      margin-right: 1rem;
      color: var(--text);
    }
    .navbar-brand:hover { color: var(--text); }
    .brand-badge {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--gradient-main);
      box-shadow: 0 12px 22px rgba(122,77,255,.22);
    }
    .brand-badge svg {
      width: 26px;
      height: 26px;
    }
    .brand-text {
      display: flex;
      flex-direction: column;
      gap: .08rem;
    }
    .brand-name {
      font-size: 1.06rem;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.1;
    }
    .brand-subtitle {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.1;
    }
    .navbar-toggler {
      border: 1px solid rgba(106,81,141,.18);
      border-radius: 14px;
      padding: .7rem .8rem;
      background: rgba(255,255,255,.72);
      box-shadow: 0 6px 16px rgba(51, 28, 83, .04);
    }
    .navbar-toggler:focus {
      box-shadow: 0 0 0 .2rem rgba(122,77,255,.16);
    }
    .navbar-toggler-icon {
      width: 24px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .navbar-toggler-icon span,
    .navbar-toggler-icon span::before,
    .navbar-toggler-icon span::after {
      content: "";
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #5b469f 0%, #1ea8a5 100%);
      position: absolute;
      left: 0;
    }
    .navbar-toggler-icon span { top: 8px; }
    .navbar-toggler-icon span::before { top: -7px; }
    .navbar-toggler-icon span::after { top: 7px; }
    .nav-collapse-panel {
      gap: 1rem;
    }
    .navbar-nav {
      gap: .35rem;
      align-items: center;
    }
    .nav-link {
      position: relative;
      padding: .8rem 1rem !important;
      color: #3a3151;
      border-radius: 999px;
      font-weight: 650;
      font-size: .98rem;
    }
    .nav-link:hover,
    .nav-link:focus {
      color: var(--primary);
      background: rgba(122,77,255,.08);
    }
    .nav-link.active {
      color: var(--primary);
      background: rgba(122,77,255,.10);
      box-shadow: inset 0 0 0 1px rgba(122,77,255,.10);
    }
    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: .42rem;
      height: 2px;
      border-radius: 999px;
      background: var(--gradient-main);
    }
    .btn {
      border-radius: 999px;
      padding: .86rem 1.2rem;
      font-weight: 700;
      border: 1px solid transparent;
      transition: transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
    }
    .btn:focus {
      box-shadow: 0 0 0 .22rem rgba(122,77,255,.18);
    }
    .btn:hover {
      transform: translateY(-1px);
    }
    .btn-brand {
      color: #fff;
      background: var(--gradient-main);
      box-shadow: 0 14px 24px rgba(122,77,255,.20);
    }
    .btn-brand:hover {
      color: #fff;
      box-shadow: 0 18px 30px rgba(122,77,255,.26);
    }
    .btn-ghost {
      color: var(--text);
      background: rgba(255,255,255,.78);
      border-color: rgba(106,81,141,.16);
      box-shadow: 0 8px 18px rgba(51, 28, 83, .04);
    }
    .btn-ghost:hover {
      color: var(--primary);
      background: rgba(122,77,255,.06);
      border-color: rgba(122,77,255,.18);
    }

    .hero-section {
      padding: clamp(2.6rem, 5vw, 4.8rem) 0 2rem;
      position: relative;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.06fr .94fr;
      gap: 2rem;
      align-items: center;
    }
    .hero-copy {
      padding: 1rem 0;
    }
    .hero-copy .eyebrow {
      margin-bottom: 1rem;
    }
    .hero-title {
      font-size: clamp(2.4rem, 4.6vw, 4.6rem);
      line-height: 1.04;
      letter-spacing: -.05em;
      font-weight: 900;
      margin: 0 0 1rem;
    }
    .hero-lead {
      margin: 0 0 1.4rem;
      max-width: 680px;
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.8;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .9rem;
      margin-bottom: 1.35rem;
    }
    .hero-badges {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: .8rem;
      margin-top: 1rem;
    }
    .info-pill {
      padding: .95rem 1rem;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 10px 22px rgba(51, 28, 83, .04);
    }
    .info-pill strong {
      display: block;
      font-size: 1.03rem;
      color: var(--text);
      margin-bottom: .12rem;
    }
    .info-pill span {
      color: var(--muted);
      font-size: .92rem;
    }

    .hero-visual {
      position: relative;
      min-height: 540px;
      padding: 1rem;
    }
    .orbit {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(122,77,255,.20) 0%, rgba(122,77,255,.06) 40%, transparent 70%);
    }
    .orbit.orbit-1 {
      width: 240px;
      height: 240px;
      top: 22px;
      right: 8px;
    }
    .orbit.orbit-2 {
      width: 180px;
      height: 180px;
      left: 18px;
      bottom: 72px;
      background: radial-gradient(circle, rgba(25,198,191,.18) 0%, rgba(25,198,191,.06) 40%, transparent 72%);
    }
    .visual-panel {
      position: relative;
      z-index: 1;
      height: 100%;
      min-height: 520px;
      border-radius: 34px;
      padding: 1.15rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.82) 100%);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .visual-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top left, rgba(122,77,255,.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(25,198,191,.10), transparent 28%);
      pointer-events: none;
    }
    .visual-panel > * {
      position: relative;
      z-index: 1;
    }
    .visual-topline {
      display: flex;
      align-items: center;
      gap: .55rem;
      color: var(--muted);
      font-weight: 700;
      font-size: .95rem;
      margin-bottom: 1rem;
    }
    .mini-dot {
      width: .72rem;
      height: .72rem;
      border-radius: 50%;
      background: var(--gradient-main);
      box-shadow: 0 0 0 5px rgba(122,77,255,.08);
    }
    .visual-main-card {
      padding: 1.35rem;
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(122,77,255,.92) 0%, rgba(92,106,255,.90) 38%, rgba(25,198,191,.92) 100%);
      color: #fff;
      box-shadow: 0 20px 38px rgba(83, 53, 136, .20);
      min-height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }
    .visual-main-card h3 {
      margin: .55rem 0 .65rem;
      font-size: 1.55rem;
      line-height: 1.26;
      letter-spacing: -.02em;
      max-width: 12ch;
      font-weight: 800;
    }
    .visual-label {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      align-self: flex-start;
      padding: .42rem .75rem;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 800;
      background: rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.22);
    }
    .visual-copy {
      max-width: 300px;
      margin: 0;
      font-size: .98rem;
      line-height: 1.75;
      color: rgba(255,255,255,.92);
    }
    .visual-bars {
      display: flex;
      align-items: end;
      gap: .55rem;
      min-height: 88px;
      margin-top: 1rem;
    }
    .bar {
      width: 16%;
      border-radius: 999px 999px 4px 4px;
      background: rgba(255,255,255,.22);
      position: relative;
      overflow: hidden;
    }
    .bar::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.32) 100%);
    }
    .bar.b1 { height: 38%; }
    .bar.b2 { height: 62%; }
    .bar.b3 { height: 82%; }
    .bar.b4 { height: 54%; }
    .bar.b5 { height: 70%; }

    .visual-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .9rem;
      margin-top: 1rem;
    }
    .visual-mini-card {
      padding: 1rem;
      border-radius: 22px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 10px 22px rgba(51, 28, 83, .05);
    }
    .visual-mini-card strong {
      display: block;
      font-size: 1.1rem;
      margin-bottom: .2rem;
    }
    .visual-mini-card span {
      color: var(--muted);
      font-size: .9rem;
    }
    .trend {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-top: .8rem;
      color: var(--success);
      font-weight: 700;
      font-size: .88rem;
    }
    .trend::before {
      content: "";
      width: .55rem;
      height: .55rem;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 6px rgba(38,185,154,.12);
    }

    .guide-panel {
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: var(--shadow);
      border-radius: 28px;
      padding: 1.25rem;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 1rem;
      align-items: center;
    }
    .guide-panel p {
      margin: .75rem 0 1rem;
      color: var(--muted);
    }
    .topic-chips {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
    }
    .topic-chip {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .58rem .9rem;
      border-radius: 999px;
      border: 1px solid rgba(106,81,141,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,242,251,.92));
      color: #43385d;
      font-weight: 700;
      font-size: .92rem;
    }
    .topic-chip::before {
      content: "";
      width: .45rem;
      height: .45rem;
      border-radius: 50%;
      background: var(--gradient-main);
    }
    .topic-chip:hover {
      border-color: rgba(122,77,255,.24);
      box-shadow: 0 8px 18px rgba(51, 28, 83, .05);
      transform: translateY(-1px);
    }
    .topic-search {
      padding: 1rem;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(249,247,252,.96), rgba(255,255,255,.92));
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 12px 24px rgba(51, 28, 83, .05);
    }
    .topic-search label {
      display: block;
      margin-bottom: .65rem;
      font-weight: 800;
      color: var(--text);
    }
    .topic-search .search-row {
      display: flex;
      gap: .7rem;
      align-items: center;
    }
    .topic-search input {
      flex: 1;
      height: 52px;
      border-radius: 16px;
      border: 1px solid rgba(106,81,141,.16);
      background: #fff;
      padding: 0 1rem;
      outline: none;
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
    }
    .topic-search input::placeholder {
      color: #9a91ab;
    }
    .topic-search input:focus {
      border-color: rgba(122,77,255,.42);
      box-shadow: 0 0 0 .22rem rgba(122,77,255,.12);
    }
    .topic-search button {
      flex: 0 0 auto;
      min-width: 124px;
      height: 52px;
      border-radius: 16px;
    }
    .topic-search .hint {
      margin-top: .65rem;
      color: var(--muted);
      font-size: .9rem;
    }

    .case-mosaic {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 1rem;
    }
    .case-card,
    .plan-card,
    .scenario-card,
    .faq-panel,
    .cta-panel,
    .process-step,
    .spotlight-card {
      position: relative;
      border-radius: 28px;
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .case-card:hover,
    .plan-card:hover,
    .scenario-card:hover,
    .faq-panel:hover,
    .cta-panel:hover,
    .process-step:hover,
    .spotlight-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(122,77,255,.18);
    }
    .case-card::before,
    .plan-card::before,
    .scenario-card::before,
    .faq-panel::before,
    .cta-panel::before,
    .process-step::before,
    .spotlight-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 5px;
      background: var(--gradient-main);
    }
    .spotlight-card {
      padding: 1.4rem;
      grid-column: span 7;
      min-height: 100%;
    }
    .spotlight-wrap {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 1rem;
      align-items: center;
      min-height: 100%;
    }
    .spotlight-card h3 {
      font-size: 1.72rem;
      margin: .55rem 0 .8rem;
      line-height: 1.22;
      letter-spacing: -.03em;
      font-weight: 800;
    }
    .spotlight-card p {
      margin: 0 0 1rem;
      color: var(--muted);
    }
    .meta-stack {
      display: grid;
      gap: .7rem;
    }
    .meta-item {
      padding: .95rem 1rem;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(247,242,251,.92), rgba(255,255,255,.95));
      border: 1px solid rgba(106,81,141,.1);
    }
    .meta-item strong {
      display: block;
      font-size: .92rem;
      color: var(--muted);
      margin-bottom: .25rem;
    }
    .meta-item span {
      color: var(--text);
      font-weight: 800;
    }
    .detail-list {
      display: grid;
      gap: .7rem;
      margin: 1rem 0 0;
      padding: 0;
      list-style: none;
    }
    .detail-list li {
      display: flex;
      gap: .7rem;
      align-items: flex-start;
      color: var(--muted);
    }
    .detail-list li::before {
      content: "";
      flex: 0 0 .68rem;
      width: .68rem;
      height: .68rem;
      border-radius: 50%;
      margin-top: .42rem;
      background: linear-gradient(135deg, #7a4dff, #19c6bf);
      box-shadow: 0 0 0 6px rgba(122,77,255,.08);
    }
    .spotlight-graphic {
      position: relative;
      min-height: 290px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top left, rgba(122,77,255,.26), transparent 34%),
        radial-gradient(circle at bottom right, rgba(25,198,191,.22), transparent 28%),
        linear-gradient(180deg, rgba(243,238,251,.92), rgba(255,255,255,.96));
      border: 1px solid rgba(106,81,141,.10);
      overflow: hidden;
      padding: 1rem;
    }
    .spotlight-graphic::before,
    .spotlight-graphic::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(122,77,255,.18);
    }
    .spotlight-graphic::before {
      width: 240px;
      height: 240px;
      right: -35px;
      top: -10px;
    }
    .spotlight-graphic::after {
      width: 160px;
      height: 160px;
      left: -20px;
      bottom: -26px;
      border-color: rgba(25,198,191,.18);
    }
    .float-card {
      position: relative;
      z-index: 1;
      padding: 1rem;
      border-radius: 22px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 12px 28px rgba(51, 28, 83, .08);
    }
    .float-card + .float-card {
      margin-top: .85rem;
    }
    .float-card .tag {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .28rem .65rem;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 800;
      color: #5d41ca;
      background: rgba(122,77,255,.08);
    }
    .float-card .tag.green {
      color: #188f83;
      background: rgba(25,198,191,.10);
    }
    .float-card h4 {
      margin: .55rem 0 .35rem;
      font-size: 1.06rem;
      font-weight: 800;
    }
    .float-card p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.7;
    }
    .float-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .6rem;
      margin-top: .85rem;
    }
    .float-metrics .m {
      padding: .75rem .8rem;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(250,247,253,.95), rgba(255,255,255,.96));
      border: 1px solid rgba(106,81,141,.10);
      text-align: center;
    }
    .float-metrics strong {
      display: block;
      font-size: 1.03rem;
      line-height: 1.1;
    }
    .float-metrics span {
      font-size: .82rem;
      color: var(--muted);
    }
    .small-card-grid {
      grid-column: span 12;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
    .case-card {
      padding: 1.2rem;
      min-height: 100%;
    }
    .case-card.featured {
      grid-column: span 5;
    }
    .case-card.secondary {
      grid-column: span 3.5;
    }
    .case-card.wide {
      grid-column: span 4;
    }
    .case-card .card-label,
    .scenario-card .card-label,
    .plan-card .card-label {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-weight: 800;
      font-size: .82rem;
      color: #5b459f;
      background: rgba(122,77,255,.08);
      border: 1px solid rgba(122,77,255,.12);
      padding: .35rem .65rem;
      border-radius: 999px;
    }
    .case-card h3 {
      margin: .8rem 0 .65rem;
      font-size: 1.32rem;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: -.02em;
    }
    .case-card p {
      color: var(--muted);
      margin-bottom: .95rem;
    }
    .case-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-bottom: .9rem;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .35rem .65rem;
      border-radius: 999px;
      border: 1px solid rgba(106,81,141,.12);
      background: rgba(249,246,252,.95);
      color: #55486f;
      font-size: .8rem;
      font-weight: 700;
    }
    .chip.accent {
      background: rgba(255,139,95,.12);
      border-color: rgba(255,139,95,.18);
      color: #bc5a33;
    }
    .chip.success {
      background: rgba(38,185,154,.10);
      border-color: rgba(38,185,154,.16);
      color: #178872;
    }
    .case-stat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding-top: .9rem;
      border-top: 1px solid rgba(106,81,141,.10);
      color: var(--muted);
      font-size: .92rem;
    }
    .case-stat strong {
      color: var(--text);
      font-weight: 800;
    }

    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .scenario-card {
      padding: 1.2rem;
      min-height: 100%;
    }
    .scenario-index {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.08rem;
      font-weight: 900;
      color: #fff;
      background: var(--gradient-main);
      box-shadow: 0 12px 20px rgba(122,77,255,.18);
    }
    .scenario-card h3 {
      margin: .9rem 0 .55rem;
      font-size: 1.24rem;
      line-height: 1.35;
      font-weight: 800;
    }
    .scenario-card p {
      color: var(--muted);
      margin-bottom: .95rem;
    }
    .scenario-line {
      display: grid;
      gap: .65rem;
    }
    .scenario-line .row-item {
      display: flex;
      justify-content: space-between;
      gap: .85rem;
      align-items: flex-start;
      padding: .72rem .85rem;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(249,246,252,.96), rgba(255,255,255,.98));
      border: 1px solid rgba(106,81,141,.10);
      color: var(--muted);
      font-size: .92rem;
    }
    .scenario-line .row-item strong {
      color: var(--text);
      font-weight: 800;
      white-space: nowrap;
    }
    .process-strip {
      margin-top: 1rem;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
    .process-step {
      padding: 1rem;
    }
    .process-step .step-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 16px;
      background: rgba(122,77,255,.10);
      color: #5b41c9;
      font-weight: 900;
    }
    .process-step h4 {
      margin: .8rem 0 .4rem;
      font-size: 1.05rem;
      font-weight: 800;
    }
    .process-step p {
      margin: 0;
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.72;
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .plan-card {
      padding: 1.25rem;
    }
    .plan-card.recommended {
      border-color: rgba(122,77,255,.28);
      background:
        linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,243,255,.98) 100%);
      box-shadow: 0 20px 48px rgba(122,77,255,.12);
      transform: translateY(-4px);
    }
    .plan-card.recommended::before {
      height: 6px;
    }
    .plan-badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .35rem .7rem;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(122,77,255,.12), rgba(25,198,191,.12));
      color: #5d41cb;
      font-weight: 900;
      font-size: .8rem;
      margin-left: .35rem;
    }
    .plan-card h3 {
      margin: .85rem 0 .6rem;
      font-size: 1.28rem;
      line-height: 1.32;
      font-weight: 800;
    }
    .plan-card .price-line {
      display: flex;
      align-items: baseline;
      gap: .35rem;
      margin-bottom: .8rem;
    }
    .plan-card .price-line strong {
      font-size: 1.72rem;
      line-height: 1;
      letter-spacing: -.03em;
    }
    .plan-card .price-line span {
      color: var(--muted);
      font-size: .92rem;
    }
    .plan-card p {
      color: var(--muted);
      margin-bottom: 1rem;
    }
    .plan-list {
      display: grid;
      gap: .62rem;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .plan-list li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      color: #4b415d;
      font-size: .95rem;
    }
    .plan-list li::before {
      content: "";
      flex: 0 0 .62rem;
      width: .62rem;
      height: .62rem;
      margin-top: .42rem;
      border-radius: 50%;
      background: linear-gradient(135deg, #7a4dff, #19c6bf);
    }
    .cta-panel {
      margin-top: 1rem;
      padding: 1.3rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1rem;
      align-items: center;
      background:
        radial-gradient(circle at top right, rgba(25,198,191,.10), transparent 24%),
        linear-gradient(135deg, rgba(122,77,255,.08), rgba(255,255,255,.95));
    }
    .cta-panel h3 {
      margin: 0 0 .5rem;
      font-size: 1.35rem;
      font-weight: 800;
      line-height: 1.3;
    }
    .cta-panel p {
      margin: 0;
      color: var(--muted);
      max-width: 760px;
    }
    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      justify-content: flex-end;
    }
    .cta-form {
      margin-top: .95rem;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .7rem;
      align-items: center;
    }
    .cta-form input {
      min-width: 0;
      width: 100%;
      height: 54px;
      border-radius: 18px;
      border: 1px solid rgba(106,81,141,.14);
      background: rgba(255,255,255,.96);
      padding: 0 1rem;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    .cta-form input:focus {
      border-color: rgba(122,77,255,.40);
      box-shadow: 0 0 0 .22rem rgba(122,77,255,.12);
    }
    .cta-form small {
      grid-column: 1 / -1;
      color: var(--muted);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: .84fr 1.16fr;
      gap: 1rem;
      align-items: start;
      margin-top: 1.5rem;
    }
    .faq-panel {
      padding: 1.25rem;
    }
    .faq-panel h3 {
      margin: .2rem 0 .75rem;
      font-size: 1.4rem;
      font-weight: 800;
      line-height: 1.28;
    }
    .faq-panel p {
      margin: 0 0 1rem;
      color: var(--muted);
    }
    .faq-note {
      display: grid;
      gap: .7rem;
    }
    .faq-note .note {
      padding: .92rem 1rem;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(249,246,252,.96), rgba(255,255,255,.98));
      border: 1px solid rgba(106,81,141,.10);
      color: var(--muted);
      font-size: .94rem;
    }
    .accordion {
      display: grid;
      gap: .8rem;
    }
    .accordion-item {
      border: 1px solid rgba(106,81,141,.12);
      border-radius: 22px;
      overflow: hidden;
      background: rgba(255,255,255,.94);
      box-shadow: 0 10px 22px rgba(51, 28, 83, .04);
    }
    .accordion-button {
      font-weight: 800;
      color: var(--text);
      background: transparent;
      padding: 1.1rem 1.15rem;
      box-shadow: none;
    }
    .accordion-button:not(.collapsed) {
      color: #5d41cb;
      background: rgba(122,77,255,.06);
    }
    .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(122,77,255,.12);
    }
    .accordion-button::after {
      background-size: 1rem;
      opacity: .75;
    }
    .accordion-body {
      color: var(--muted);
      padding: 0 1.15rem 1.1rem;
      line-height: 1.75;
    }

    .footer {
      margin-top: 1rem;
      padding: 2rem 0 2.2rem;
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.64) 0%, rgba(247,244,251,.92) 100%);
      border-top: 1px solid rgba(106,81,141,.10);
    }
    .footer-topline {
      height: 5px;
      border-radius: 999px;
      background: var(--gradient-main);
      margin-bottom: 1.4rem;
      box-shadow: 0 10px 22px rgba(122,77,255,.14);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr .82fr .82fr .98fr;
      gap: 1rem;
    }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: .9rem;
    }
    .footer p {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }
    .footer h4 {
      font-size: 1rem;
      font-weight: 800;
      margin: .3rem 0 .9rem;
      color: var(--text);
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: .6rem;
    }
    .footer-links a {
      color: #4a415f;
      font-weight: 650;
    }
    .footer-links a:hover {
      color: var(--primary);
    }
    .footer-links li {
      color: #4a415f;
      line-height: 1.65;
    }
    .footer-meta {
      margin-top: 1.2rem;
      padding-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      justify-content: space-between;
      color: var(--muted);
      border-top: 1px solid rgba(106,81,141,.10);
      font-size: .92rem;
    }

    .breadcrumb-wrap {
      margin-bottom: 1.2rem;
    }
    .breadcrumb {
      margin-bottom: 0;
      padding: .75rem 1rem;
      border-radius: 999px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(106,81,141,.12);
      box-shadow: 0 10px 20px rgba(51, 28, 83, .04);
    }
    .breadcrumb-item + .breadcrumb-item::before {
      color: #a399b3;
    }
    .breadcrumb-item a {
      color: #53486b;
      font-weight: 700;
    }
    .breadcrumb-item.active {
      color: var(--primary);
      font-weight: 800;
    }

    @media (max-width: 1199.98px) {
      .hero-grid,
      .guide-panel,
      .faq-grid,
      .spotlight-wrap {
        grid-template-columns: 1fr;
      }
      .hero-visual { min-height: 480px; }
      .hero-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .scenario-grid,
      .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .process-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .spotlight-card,
      .case-card.featured,
      .case-card.secondary,
      .case-card.wide {
        grid-column: span 12;
      }
      .small-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .case-mosaic {
        gap: .95rem;
      }
    }
    @media (max-width: 991.98px) {
      .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 24px;
        background: rgba(255,255,255,.90);
        border: 1px solid rgba(106,81,141,.12);
        box-shadow: var(--shadow);
      }
      .nav-link {
        width: 100%;
      }
      .nav-link.active::after {
        display: none;
      }
      .hero-title {
        font-size: clamp(2rem, 8vw, 3.4rem);
      }
      .hero-badges,
      .scenario-grid,
      .plan-grid,
      .process-strip,
      .small-card-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .visual-panel {
        min-height: auto;
      }
      .cta-panel {
        grid-template-columns: 1fr;
      }
      .cta-actions {
        justify-content: flex-start;
      }
    }
    @media (max-width: 767.98px) {
      :root {
        --header-h: 76px;
      }
      .navbar {
        padding: .8rem 0;
      }
      .brand-badge {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
      }
      .brand-name {
        font-size: .98rem;
      }
      .brand-subtitle {
        font-size: .82rem;
      }
      .hero-section {
        padding-top: 2rem;
      }
      .hero-actions,
      .cta-actions,
      .topic-search .search-row {
        flex-direction: column;
        align-items: stretch;
      }
      .topic-search button,
      .cta-form button {
        width: 100%;
      }
      .topic-search .search-row {
        display: grid;
        grid-template-columns: 1fr;
      }
      .guide-panel,
      .visual-panel,
      .case-card,
      .scenario-card,
      .plan-card,
      .faq-panel,
      .cta-panel,
      .spotlight-card,
      .process-step {
        border-radius: 22px;
      }
      .hero-visual {
        min-height: 420px;
        padding: 0;
      }
      .visual-main-card h3 {
        max-width: none;
        font-size: 1.35rem;
      }
      .section-title {
        font-size: 1.65rem;
      }
      .case-card h3,
      .scenario-card h3,
      .plan-card h3,
      .faq-panel h3 {
        font-size: 1.12rem;
      }
    }
    @media (max-width: 575.98px) {
      .container {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .hero-title {
        font-size: 1.9rem;
      }
      .hero-lead {
        font-size: 1rem;
      }
      .hero-badges {
        gap: .65rem;
      }
      .info-pill,
      .meta-item,
      .process-step,
      .plan-card,
      .scenario-card,
      .case-card {
        padding: 1rem;
      }
      .visual-panel,
      .spotlight-card,
      .guide-panel,
      .faq-panel,
      .cta-panel {
        padding: 1rem;
      }
      .accordion-button,
      .accordion-body {
        padding-left: .95rem;
        padding-right: .95rem;
      }
      .footer-meta {
        flex-direction: column;
        align-items: flex-start;
      }
    }