/* roulang page: index */
:root{
            --bg: #0f1013;
            --bg-2: #14161a;
            --panel: #171a20;
            --panel-2: #1e222a;
            --line: rgba(255,255,255,.08);
            --line-2: rgba(255,255,255,.14);
            --text: #f5f0e8;
            --muted: rgba(245,240,232,.72);
            --soft: rgba(245,240,232,.54);
            --accent: #d7a16a;
            --accent-2: #b56b5d;
            --accent-3: #8f3d43;
            --good: #e9c49f;
            --shadow: 0 24px 80px rgba(0,0,0,.36);
            --shadow-soft: 0 14px 40px rgba(0,0,0,.24);
            --radius: 18px;
            --radius-sm: 14px;
            --radius-lg: 26px;
            --container: 1240px;
            --gutter: clamp(16px, 2vw, 24px);
            --section: clamp(64px, 8vw, 108px);
            --ease: cubic-bezier(.2,.8,.2,1);
        }

        *, *::before, *::after{ box-sizing:border-box; }
        html{
            scroll-behavior:smooth;
            background: var(--bg);
        }
        body{
            margin:0;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(1200px 700px at 12% -12%, rgba(215,161,106,.16), transparent 60%),
                radial-gradient(900px 560px at 92% 0%, rgba(181,107,93,.10), transparent 52%),
                linear-gradient(180deg, #121318 0%, #0e0f12 100%);
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), transparent 12%),
                radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 38%),
                radial-gradient(circle at 0 100%, rgba(255,255,255,.03), transparent 24%);
            mix-blend-mode: screen;
            opacity:.6;
            z-index:-1;
        }
        body::after{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            opacity:.08;
            background-image:
                linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
            background-size: 140px 140px;
            mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
            z-index:-1;
        }

        a{
            color:inherit;
            text-decoration:none;
        }
        img{
            max-width:100%;
            display:block;
        }
        button,
        input,
        textarea,
        select{
            font:inherit;
        }
        ::selection{
            background: rgba(215,161,106,.35);
            color: #fff8ef;
        }
        :focus-visible{
            outline: 2px solid rgba(215,161,106,.85);
            outline-offset: 3px;
        }

        .container{
            width:min(var(--container), calc(100% - var(--gutter) * 2));
            margin:0 auto;
        }
        .section{
            padding: var(--section) 0;
            position:relative;
        }
        .section + .section{
            border-top:1px solid rgba(255,255,255,.04);
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            padding:.42rem .82rem;
            border:1px solid var(--line);
            border-radius:999px;
            background: rgba(255,255,255,.03);
            color: var(--good);
            font-size:.88rem;
            letter-spacing:.02em;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .eyebrow::before{
            content:"";
            width:.5rem;
            height:.5rem;
            border-radius:999px;
            background: linear-gradient(135deg, var(--accent), #f3d6b8);
            box-shadow:0 0 0 6px rgba(215,161,106,.1);
        }

        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:24px;
            margin-bottom:28px;
        }
        .section-head .copy{
            max-width:760px;
        }
        .section-head h2{
            margin:12px 0 10px;
            font-size: clamp(1.55rem, 2.4vw, 2.6rem);
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width: 62ch;
            font-size:1rem;
        }

        .site-header{
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(14px);
            background: linear-gradient(180deg, rgba(13,14,18,.9), rgba(13,14,18,.74));
            border-bottom:1px solid rgba(255,255,255,.05);
        }
        .nav-shell{
            position:relative;
            display:flex;
            align-items:center;
            gap:14px;
            min-height: 82px;
            padding: 14px 0;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width: 205px;
            flex:0 0 auto;
        }
        .brand-mark{
            width:44px;
            height:44px;
            display:grid;
            place-items:center;
            border-radius:14px;
            background:
                linear-gradient(135deg, rgba(215,161,106,.22), rgba(181,107,93,.18)),
                linear-gradient(180deg, #23262d, #15181d);
            border:1px solid rgba(255,255,255,.12);
            box-shadow: var(--shadow-soft);
            color:#fff;
            font-weight:800;
            letter-spacing:.02em;
        }
        .brand-copy strong{
            display:block;
            font-size:1.02rem;
            line-height:1.1;
            letter-spacing:.02em;
        }
        .brand-copy span{
            display:block;
            margin-top:2px;
            color:var(--soft);
            font-size:.82rem;
        }

        .nav-toggle{
            position:absolute;
            opacity:0;
            pointer-events:none;
        }
        .nav-burger{
            display:none;
            width:48px;
            height:48px;
            align-items:center;
            justify-content:center;
            gap:5px;
            flex-direction:column;
            margin-left:auto;
            border-radius:14px;
            background: rgba(255,255,255,.04);
            border:1px solid var(--line);
            cursor:pointer;
            transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
        }
        .nav-burger span{
            width:18px;
            height:2px;
            border-radius:999px;
            background: var(--text);
            transition: transform .25s var(--ease), opacity .25s var(--ease);
        }
        .nav-burger:hover{
            background: rgba(255,255,255,.06);
            border-color: var(--line-2);
            transform: translateY(-1px);
        }

        .nav-panel{
            flex:1;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding: 8px;
            border-radius: 22px;
            border:1px solid rgba(255,255,255,.06);
            background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
            box-shadow: var(--shadow-soft);
        }
        .nav-item{
            display:inline-flex;
            align-items:center;
            gap:.55rem;
            min-height: 46px;
            padding: 0 16px;
            border-radius: 14px;
            border:1px solid transparent;
            color: var(--muted);
            font-size:.95rem;
            white-space:nowrap;
            transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
        }
        .nav-item::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background: rgba(255,255,255,.22);
            box-shadow:0 0 0 4px rgba(255,255,255,.03);
        }
        .nav-item:hover{
            color: var(--text);
            border-color: rgba(215,161,106,.25);
            background: rgba(215,161,106,.08);
            transform: translateY(-1px);
            box-shadow: 0 10px 28px rgba(0,0,0,.16);
        }
        .nav-item.active{
            color: var(--text);
            background: linear-gradient(180deg, rgba(215,161,106,.14), rgba(181,107,93,.10));
            border-color: rgba(215,161,106,.25);
        }
        .nav-item.active::before{
            background: linear-gradient(135deg, var(--accent), #f3d6b8);
            box-shadow:0 0 0 4px rgba(215,161,106,.12);
        }

        .header-cta{
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height: 48px;
            padding: 0 18px;
            border-radius: 15px;
            color:#170e08;
            background: linear-gradient(135deg, #f0c993, #d7a16a 52%, #b56b5d);
            border:1px solid rgba(255,255,255,.18);
            box-shadow: 0 16px 30px rgba(215,161,106,.20);
            font-weight:700;
            transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
        }
        .header-cta:hover{
            transform: translateY(-1px);
            filter: saturate(1.04);
            box-shadow: 0 20px 36px rgba(215,161,106,.26);
        }
        .header-cta:active{
            transform: translateY(0);
        }

        .hero{
            padding-top: clamp(26px, 4vw, 44px);
            padding-bottom: clamp(34px, 6vw, 70px);
        }
        .hero-grid{
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            gap: clamp(20px, 3vw, 34px);
            align-items:stretch;
        }
        .hero-copy,
        .hero-stage,
        .panel,
        .feature-card,
        .news-card,
        .plan-card,
        .compare-card,
        .contact-card,
        .footer-card,
        .reply-card{
            position:relative;
            border-radius: var(--radius-lg);
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
                linear-gradient(180deg, var(--panel), #13161b);
            box-shadow: var(--shadow);
        }

        .hero-copy{
            padding: clamp(24px, 4vw, 42px);
            overflow:hidden;
        }
        .hero-copy::after{
            content:"";
            position:absolute;
            inset:auto -5% -18% auto;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(215,161,106,.18), transparent 65%);
            transform: rotate(-12deg);
            pointer-events:none;
        }
        .hero-copy h1{
            margin: 18px 0 14px;
            font-size: clamp(2.4rem, 5vw, 4.8rem);
            line-height: .98;
            letter-spacing: -.04em;
            max-width: 12ch;
        }
        .hero-copy .lead{
            margin:0;
            max-width: 62ch;
            font-size: clamp(1rem, 1.5vw, 1.1rem);
            color: var(--muted);
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height: 36px;
            padding: 0 14px;
            border-radius:999px;
            background: rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color: var(--text);
            font-size:.9rem;
        }
        .tag::before{
            content:"";
            width:7px;
            height:7px;
            border-radius:50%;
            background: linear-gradient(135deg, var(--accent), #f4d8b9);
            box-shadow:0 0 0 4px rgba(215,161,106,.12);
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top: 26px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height: 50px;
            padding: 0 18px;
            border-radius: 15px;
            border:1px solid transparent;
            transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
            cursor:pointer;
            font-weight:700;
            letter-spacing:.01em;
        }
        .btn:hover{
            transform: translateY(-1px);
        }
        .btn:active{
            transform: translateY(0);
        }
        .btn-primary{
            color:#170e08;
            background: linear-gradient(135deg, #f1cd9f, #d7a16a 55%, #b56b5d);
            box-shadow: 0 16px 34px rgba(215,161,106,.22);
            border-color: rgba(255,255,255,.18);
        }
        .btn-primary:hover{
            box-shadow: 0 20px 42px rgba(215,161,106,.28);
        }
        .btn-secondary{
            color: var(--text);
            background: rgba(255,255,255,.045);
            border-color: rgba(255,255,255,.12);
        }
        .btn-secondary:hover{
            background: rgba(255,255,255,.07);
            border-color: rgba(215,161,106,.2);
        }
        .btn-ghost{
            color: var(--good);
            background: transparent;
            border-color: rgba(215,161,106,.18);
        }
        .btn-ghost:hover{
            background: rgba(215,161,106,.08);
        }

        .hero-meta{
            display:grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap:12px;
            margin-top: 24px;
        }
        .meta-chip{
            padding: 14px 16px;
            border-radius: 16px;
            background: rgba(255,255,255,.035);
            border:1px solid rgba(255,255,255,.08);
        }
        .meta-chip strong{
            display:block;
            font-size:1.08rem;
            letter-spacing:.01em;
        }
        .meta-chip span{
            display:block;
            margin-top:4px;
            color:var(--soft);
            font-size:.9rem;
        }

        .hero-stage{
            padding: clamp(18px, 2.8vw, 28px);
            overflow:hidden;
            display:flex;
            flex-direction:column;
            gap:16px;
            background:
                linear-gradient(150deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, #15181d, #111317);
        }
        .hero-stage::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 16%, rgba(215,161,106,.17), transparent 24%),
                radial-gradient(circle at 82% 24%, rgba(181,107,93,.16), transparent 22%),
                linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.025) 40% 41%, transparent 41% 100%);
            pointer-events:none;
        }
        .poster{
            position:relative;
            min-height: 330px;
            border-radius: 22px;
            border:1px solid rgba(255,255,255,.10);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                linear-gradient(160deg, #24272f 0%, #171920 48%, #101217 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
            overflow:hidden;
            padding: 18px;
        }
        .poster::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 12%, rgba(215,161,106,.18), transparent 22%),
                radial-gradient(circle at 80% 25%, rgba(181,107,93,.16), transparent 20%),
                radial-gradient(circle at 50% 74%, rgba(255,255,255,.06), transparent 28%);
            pointer-events:none;
        }
        .poster-top{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            z-index:1;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height: 32px;
            padding: 0 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background: rgba(255,255,255,.04);
            font-size:.84rem;
            color: var(--text);
        }
        .badge-glow{
            background: linear-gradient(135deg, rgba(215,161,106,.18), rgba(181,107,93,.12));
            border-color: rgba(215,161,106,.22);
        }
        .poster-stack{
            position:relative;
            z-index:1;
            margin-top: 18px;
            display:grid;
            grid-template-columns: 1fr .9fr;
            gap: 14px;
            align-items:stretch;
        }
        .poster-hero{
            min-height: 240px;
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), transparent),
                radial-gradient(circle at 22% 24%, rgba(215,161,106,.24), transparent 28%),
                linear-gradient(145deg, #2a2d35 0%, #171920 48%, #0f1115 100%);
            position:relative;
            overflow:hidden;
        }
        .poster-hero::before{
            content:"";
            position:absolute;
            inset:16px;
            border-radius: 14px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(255,255,255,.02), transparent 55%),
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        }
        .poster-hero::after{
            content:"";
            position:absolute;
            inset:auto 16px 16px 16px;
            height: 56px;
            border-radius: 12px;
            background: linear-gradient(90deg, rgba(215,161,106,.12), rgba(181,107,93,.10));
            border:1px solid rgba(255,255,255,.08);
        }
        .poster-copy{
            position:absolute;
            inset: 28px 28px auto 28px;
            z-index:2;
        }
        .poster-copy strong{
            display:block;
            font-size:1.14rem;
            letter-spacing:.01em;
            margin-bottom:8px;
        }
        .poster-copy p{
            margin:0;
            max-width: 28ch;
            color: var(--muted);
            font-size:.92rem;
        }
        .mini-rail{
            display:grid;
            gap:14px;
        }
        .mini-card{
            position:relative;
            border-radius: 16px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.035);
            padding: 16px;
            overflow:hidden;
            min-height: 110px;
        }
        .mini-card strong{
            display:block;
            font-size:1rem;
            margin-bottom: 8px;
        }
        .mini-card p{
            margin:0;
            color: var(--muted);
            font-size:.92rem;
        }
        .mini-card .line{
            margin-top: 14px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color: var(--soft);
            font-size:.84rem;
        }
        .pulse{
            width:10px;
            height:10px;
            border-radius:50%;
            background: linear-gradient(135deg, #f1cd9f, #b56b5d);
            box-shadow:0 0 0 8px rgba(215,161,106,.12);
        }

        .info-strip{
            display:grid;
            grid-template-columns: repeat(4, minmax(0,1fr));
            gap:14px;
        }
        .stat-card{
            padding: 20px;
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                linear-gradient(180deg, #171a20, #13161b);
            box-shadow: var(--shadow-soft);
        }
        .stat-card strong{
            display:block;
            font-size: clamp(1.45rem, 2.4vw, 2rem);
            line-height:1;
            color: #f4e1c4;
        }
        .stat-card span{
            display:block;
            margin-top: 10px;
            color: var(--muted);
            font-size:.95rem;
        }
        .stat-card small{
            display:block;
            margin-top: 8px;
            color: var(--soft);
            font-size:.84rem;
        }

        .feature-grid{
            display:grid;
            grid-template-columns: 1.2fr .9fr .9fr 1fr;
            gap:14px;
        }
        .feature-card{
            padding: 22px;
            min-height: 210px;
            transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
            overflow:hidden;
        }
        .feature-card:hover{
            transform: translateY(-4px);
            border-color: rgba(215,161,106,.22);
            box-shadow: 0 20px 50px rgba(0,0,0,.30);
        }
        .feature-card .icon{
            width:46px;
            height:46px;
            border-radius: 14px;
            display:grid;
            place-items:center;
            margin-bottom:14px;
            background: linear-gradient(135deg, rgba(215,161,106,.18), rgba(181,107,93,.12));
            border:1px solid rgba(215,161,106,.18);
            color:#f5d6b3;
            font-size:1.1rem;
        }
        .feature-card h3{
            margin:0 0 8px;
            font-size:1.14rem;
            line-height:1.25;
        }
        .feature-card p{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }
        .feature-card .mini{
            margin-top: 14px;
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .feature-card .mini .badge{
            min-height: 28px;
            padding: 0 10px;
            font-size:.79rem;
        }
        .feature-card.tall{
            grid-row: span 2;
            min-height: 434px;
        }

        .poster-wall{
            display:grid;
            grid-template-columns: repeat(12, 1fr);
            gap:14px;
        }
        .poster-item{
            min-height: 240px;
            grid-column: span 4;
            padding: 20px;
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(145deg, #1a1d23, #111317);
            position:relative;
            overflow:hidden;
            transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
        }
        .poster-item:hover{
            transform: translateY(-4px);
            border-color: rgba(215,161,106,.24);
            box-shadow: 0 22px 44px rgba(0,0,0,.30);
        }
        .poster-item::before{
            content:"";
            position:absolute;
            inset:auto -10% -12% auto;
            width: 210px;
            height: 210px;
            border-radius:50%;
            background: radial-gradient(circle, rgba(215,161,106,.16), transparent 65%);
            pointer-events:none;
        }
        .poster-item.large{
            grid-column: span 5;
            min-height: 320px;
        }
        .poster-item.tall{
            grid-column: span 3;
            min-height: 320px;
        }
        .poster-item .cover{
            height: 122px;
            border-radius: 14px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(140deg, rgba(215,161,106,.22), rgba(181,107,93,.12)),
                linear-gradient(180deg, #2a2d35, #14161a);
            margin-bottom: 14px;
            position:relative;
            overflow:hidden;
        }
        .poster-item .cover::after{
            content:"";
            position:absolute;
            inset:18px;
            border-radius: 12px;
            border:1px solid rgba(255,255,255,.09);
            background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
        }
        .poster-item h3{
            margin:0 0 8px;
            font-size:1.08rem;
        }
        .poster-item p{
            margin:0;
            color: var(--muted);
            font-size:.94rem;
        }
        .poster-item .meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }

        .bubble-grid{
            display:grid;
            grid-template-columns: repeat(12, 1fr);
            gap:14px;
        }
        .bubble{
            grid-column: span 4;
            padding: 18px;
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
            transition: transform .25s var(--ease), border-color .25s var(--ease);
        }
        .bubble:hover{
            transform: translateY(-3px);
            border-color: rgba(215,161,106,.20);
        }
        .bubble .head{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom: 12px;
        }
        .avatar{
            width:42px;
            height:42px;
            border-radius: 50%;
            display:grid;
            place-items:center;
            background: linear-gradient(135deg, rgba(215,161,106,.22), rgba(181,107,93,.14));
            border:1px solid rgba(255,255,255,.12);
            font-weight:700;
            color:#fff;
            flex:0 0 auto;
        }
        .bubble strong{
            display:block;
            font-size:1rem;
            margin-bottom: 2px;
        }
        .bubble span{
            color: var(--soft);
            font-size:.84rem;
        }
        .bubble p{
            margin:0;
            color: var(--text);
            font-size:.95rem;
            line-height:1.75;
        }

        .compare-card{
            padding: clamp(18px, 3vw, 28px);
            overflow:hidden;
        }
        .compare-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin-top: 20px;
        }
        .compare-side{
            padding: 18px;
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
        }
        .compare-side h3{
            margin:0 0 12px;
            font-size:1.1rem;
        }
        .compare-row{
            display:grid;
            grid-template-columns: .88fr 1.12fr;
            gap:10px;
            align-items:start;
            padding: 12px 0;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .compare-row:first-of-type{
            border-top:0;
            padding-top:0;
        }
        .compare-row .k{
            color: var(--soft);
            font-size:.9rem;
        }
        .compare-row .v{
            color: var(--text);
            font-size:.95rem;
        }
        .compare-side.highlight{
            background:
                linear-gradient(180deg, rgba(215,161,106,.10), rgba(255,255,255,.02)),
                rgba(255,255,255,.03);
            border-color: rgba(215,161,106,.22);
        }
        .compare-footer{
            margin-top:18px;
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:14px;
        }

        .latest-layout{
            display:grid;
            grid-template-columns: 1.1fr .82fr;
            gap: 18px;
            align-items:start;
        }
        .news-list{
            display:grid;
            gap:12px;
        }
        .news-card{
            padding: 16px;
            transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
        }
        .news-card:hover{
            transform: translateY(-2px);
            border-color: rgba(215,161,106,.22);
            box-shadow: 0 18px 34px rgba(0,0,0,.22);
        }
        .news-link{
            display:block;
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
            color: var(--soft);
            font-size:.84rem;
            margin-bottom: 8px;
        }
        .news-meta em{
            font-style:normal;
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding: 4px 10px;
            border-radius:999px;
            background: rgba(215,161,106,.08);
            border:1px solid rgba(215,161,106,.14);
            color: var(--good);
        }
        .news-meta em::before{
            content:"";
            width:6px;
            height:6px;
            border-radius:50%;
            background: var(--accent);
        }
        .news-card h3{
            margin:0 0 8px;
            font-size:1.04rem;
            line-height:1.45;
        }
        .news-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .featured-card{
            padding: 22px;
            position:sticky;
            top: 102px;
        }
        .featured-card h3{
            margin: 0 0 10px;
            font-size:1.35rem;
            line-height:1.25;
        }
        .featured-card p{
            margin:0;
            color:var(--muted);
        }
        .step-list{
            margin:18px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .step-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:12px 0;
            border-top:1px solid rgba(255,255,255,.06);
            color:var(--text);
        }
        .step-num{
            width:28px;
            height:28px;
            flex:0 0 auto;
            display:grid;
            place-items:center;
            border-radius: 10px;
            background: rgba(215,161,106,.12);
            border:1px solid rgba(215,161,106,.18);
            color: var(--good);
            font-weight:700;
            font-size:.82rem;
        }
        .step-list strong{
            display:block;
            margin-bottom:2px;
        }
        .step-list span{
            display:block;
            color:var(--muted);
            font-size:.92rem;
        }
        .news-empty{
            padding: 28px 20px;
            border-radius: 18px;
            border:1px dashed rgba(255,255,255,.12);
            background: rgba(255,255,255,.03);
            color: var(--soft);
            text-align:center;
            min-height: 210px;
            display:grid;
            place-items:center;
        }

        .plan-grid{
            display:grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 14px;
        }
        .plan-card{
            padding: 22px;
            overflow:hidden;
        }
        .plan-card.recommended{
            border-color: rgba(215,161,106,.22);
            background:
                linear-gradient(180deg, rgba(215,161,106,.08), rgba(255,255,255,.02)),
                linear-gradient(180deg, #171a20, #13161b);
        }
        .plan-card .top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom: 14px;
        }
        .plan-card h3{
            margin:0;
            font-size:1.2rem;
        }
        .price{
            font-size: .9rem;
            color: var(--good);
            padding: .38rem .72rem;
            border-radius:999px;
            border:1px solid rgba(215,161,106,.16);
            background: rgba(215,161,106,.08);
        }
        .plan-card p{
            margin: 0 0 14px;
            color: var(--muted);
        }
        .plan-card ul{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .plan-card li{
            position:relative;
            padding-left: 18px;
            color: var(--text);
            font-size:.95rem;
        }
        .plan-card li::before{
            content:"";
            position:absolute;
            left:0;
            top:.76em;
            width:7px;
            height:7px;
            border-radius:50%;
            background: linear-gradient(135deg, var(--accent), #f4d8b9);
        }
        .plan-card .actions{
            margin-top: 18px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }

        .faq-grid{
            display:grid;
            gap:12px;
        }
        .faq-item{
            border-radius: 18px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            overflow:hidden;
            transition: border-color .2s var(--ease), background .2s var(--ease);
        }
        .faq-item[open]{
            border-color: rgba(215,161,106,.22);
            background: rgba(215,161,106,.04);
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding: 18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            font-weight:700;
            font-size:1rem;
        }
        .faq-item summary::-webkit-details-marker{ display:none; }
        .faq-item summary::after{
            content:"+";
            width:32px;
            height:32px;
            flex:0 0 auto;
            display:grid;
            place-items:center;
            border-radius: 10px;
            background: rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color: var(--text);
            transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
        }
        .faq-item[open] summary::after{
            content:"–";
            background: rgba(215,161,106,.10);
            border-color: rgba(215,161,106,.18);
        }
        .faq-body{
            padding: 0 20px 18px;
            color: var(--muted);
        }
        .faq-body p{
            margin:0;
        }

        .contact-card{
            padding: clamp(20px, 3vw, 30px);
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(181,107,93,.12), rgba(255,255,255,.02)),
                linear-gradient(180deg, #171a20, #121418);
        }
        .contact-grid{
            display:grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 18px;
            align-items:start;
            margin-top: 18px;
        }
        .contact-copy{
            padding: 6px 0 0;
        }
        .contact-copy h3{
            margin:0 0 10px;
            font-size:1.5rem;
        }
        .contact-copy p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .contact-points{
            display:grid;
            gap:10px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .contact-points li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color: var(--text);
        }
        .contact-points li::before{
            content:"";
            width:10px;
            height:10px;
            margin-top:.48em;
            border-radius:50%;
            background: linear-gradient(135deg, var(--accent), #f3d6b8);
            box-shadow:0 0 0 6px rgba(215,161,106,.1);
            flex:0 0 auto;
        }
        .form{
            display:grid;
            gap: 14px;
            padding: 18px;
            border-radius: 20px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
        }
        .field{
            display:grid;
            gap:8px;
        }
        .field label{
            color: var(--text);
            font-size:.92rem;
            font-weight:700;
        }
        .field input,
        .field textarea{
            width:100%;
            border-radius: 14px;
            border:1px solid rgba(255,255,255,.10);
            background: rgba(10,11,14,.54);
            color: var(--text);
            padding: 13px 14px;
            transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
        }
        .field input::placeholder,
        .field textarea::placeholder{
            color: rgba(245,240,232,.42);
        }
        .field input:focus,
        .field textarea:focus{
            outline:none;
            border-color: rgba(215,161,106,.35);
            box-shadow: 0 0 0 4px rgba(215,161,106,.12);
            background: rgba(10,11,14,.76);
        }
        .field textarea{
            min-height: 132px;
            resize: vertical;
        }
        .form-note{
            color: var(--soft);
            font-size:.86rem;
            margin-top:-2px;
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            justify-content:space-between;
        }

        .site-footer{
            padding: 24px 0 42px;
            border-top:1px solid rgba(255,255,255,.05);
            background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.03));
        }
        .footer-card{
            padding: 22px;
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:18px;
        }
        .footer-brand{
            max-width: 680px;
        }
        .footer-brand strong{
            display:block;
            font-size:1.2rem;
            margin-bottom:8px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }
        .footer-links a,
        .footer-links button{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height: 40px;
            padding: 0 14px;
            border-radius: 12px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            color: var(--text);
            cursor:pointer;
            transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
        }
        .footer-links a:hover,
        .footer-links button:hover{
            transform: translateY(-1px);
            background: rgba(255,255,255,.06);
            border-color: rgba(215,161,106,.18);
        }
        .footer-bottom{
            margin-top:16px;
            padding-top:16px;
            border-top:1px solid rgba(255,255,255,.06);
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color: var(--soft);
            font-size:.9rem;
        }

        .empty-note{
            color: var(--muted);
            font-size: 1rem;
            text-align:center;
            padding: 12px 10px;
        }

        @media (max-width: 1280px){
            .hero-grid{
                grid-template-columns: 1.08fr .92fr;
            }
            .feature-grid{
                grid-template-columns: repeat(2, minmax(0,1fr));
            }
            .feature-card.tall{
                grid-row: auto;
                min-height: 210px;
            }
            .poster-wall{
                grid-template-columns: repeat(6, 1fr);
            }
            .poster-item.large,
            .poster-item.tall,
            .poster-item{
                grid-column: span 3;
            }
        }

        @media (max-width: 1024px){
            .nav-shell{
                gap:12px;
            }
            .brand{
                min-width: auto;
            }
            .nav-panel{
                justify-content:flex-start;
                overflow:auto;
                scrollbar-width:none;
            }
            .nav-panel::-webkit-scrollbar{ display:none; }
            .hero-grid,
            .latest-layout,
            .contact-grid,
            .compare-grid,
            .plan-grid{
                grid-template-columns: 1fr;
            }
            .featured-card{
                position:relative;
                top:auto;
            }
            .info-strip{
                grid-template-columns: repeat(2, minmax(0,1fr));
            }
            .bubble-grid{
                grid-template-columns: repeat(2, minmax(0,1fr));
            }
            .bubble{
                grid-column: span 1;
            }
            .poster-wall{
                grid-template-columns: repeat(2, minmax(0,1fr));
            }
            .poster-item,
            .poster-item.large,
            .poster-item.tall{
                grid-column: span 1;
            }
        }

        @media (max-width: 768px){
            .site-header{
                backdrop-filter: blur(10px);
            }
            .nav-shell{
                flex-wrap:wrap;
                align-items:flex-start;
                padding-bottom: 18px;
            }
            .nav-burger{
                display:inline-flex;
                margin-left:auto;
            }
            .nav-panel{
                order: 4;
                width:100%;
                display:none;
                flex-direction:column;
                align-items:stretch;
                justify-content:flex-start;
                gap:8px;
                padding: 12px;
                border-radius: 18px;
            }
            .nav-panel .nav-item{
                width:100%;
                justify-content:flex-start;
            }
            .header-cta{
                display:none;
            }
            .nav-toggle:checked ~ .nav-panel{
                display:flex;
            }
            .nav-toggle:checked + .nav-burger span:nth-child(1){
                transform: translateY(7px) rotate(45deg);
            }
            .nav-toggle:checked + .nav-burger span:nth-child(2){
                opacity:0;
            }
            .nav-toggle:checked + .nav-burger span:nth-child(3){
                transform: translateY(-7px) rotate(-45deg);
            }
            .hero-copy h1{
                max-width: 14ch;
                font-size: clamp(2.1rem, 10vw, 3.45rem);
            }
            .hero-meta,
            .info-strip,
            .feature-grid,
            .poster-wall,
            .bubble-grid,
            .plan-grid{
                grid-template-columns: 1fr;
            }
            .poster-stack{
                grid-template-columns: 1fr;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-top,
            .footer-bottom,
            .compare-footer,
            .form-actions{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }

        @media (max-width: 520px){
            .container{
                width: min(var(--container), calc(100% - 22px));
            }
            .nav-shell{
                min-height: 76px;
            }
            .brand-copy strong{
                font-size:.98rem;
            }
            .brand-mark{
                width:40px;
                height:40px;
            }
            .hero-copy,
            .hero-stage,
            .feature-card,
            .news-card,
            .plan-card,
            .compare-card,
            .contact-card,
            .footer-card{
                border-radius: 16px;
            }
            .hero-actions{
                flex-direction:column;
            }
            .btn{
                width:100%;
            }
            .compare-row{
                grid-template-columns: 1fr;
                gap:4px;
            }
            .faq-item summary{
                padding: 16px 16px;
            }
            .faq-body{
                padding: 0 16px 16px;
            }
            .form{
                padding: 14px;
            }
            .poster{
                min-height: 300px;
            }
            .poster-copy{
                inset: 22px 20px auto 20px;
            }
        }

/* roulang page: article */
:root{
            --bg:#0f1013;
            --bg-2:#14161a;
            --panel:#171a20;
            --panel-2:#1e222a;
            --panel-3:#242832;
            --paper:#f5f0e8;
            --paper-soft:#e8ded0;
            --line:rgba(255,255,255,.08);
            --line-2:rgba(255,255,255,.14);
            --dark-line:rgba(15,16,19,.12);
            --text:#f5f0e8;
            --text-dark:#211b18;
            --muted:rgba(245,240,232,.72);
            --soft:rgba(245,240,232,.54);
            --muted-dark:rgba(33,27,24,.68);
            --accent:#d7a16a;
            --accent-2:#b56b5d;
            --accent-3:#8f3d43;
            --good:#e9c49f;
            --danger:#e06f66;
            --shadow:0 24px 80px rgba(0,0,0,.36);
            --shadow-soft:0 14px 40px rgba(0,0,0,.24);
            --shadow-card:0 18px 54px rgba(0,0,0,.28);
            --radius:18px;
            --radius-sm:14px;
            --radius-lg:26px;
            --container:1240px;
            --read:720px;
            --gutter:clamp(16px,2vw,24px);
            --section:clamp(56px,7vw,96px);
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{
            box-sizing:border-box;
        }
        html{
            scroll-behavior:smooth;
            background:var(--bg);
        }
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(1200px 700px at 12% -12%,rgba(215,161,106,.16),transparent 60%),
                radial-gradient(900px 560px at 92% 0%,rgba(181,107,93,.10),transparent 52%),
                linear-gradient(180deg,#121318 0%,#0e0f12 100%);
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(180deg,rgba(255,255,255,.02),transparent 12%),
                radial-gradient(circle at 50% 0%,rgba(255,255,255,.04),transparent 38%),
                radial-gradient(circle at 0 100%,rgba(255,255,255,.03),transparent 24%);
            mix-blend-mode:screen;
            opacity:.6;
            z-index:-1;
        }
        body::after{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            opacity:.08;
            background-image:
                linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
            background-size:140px 140px;
            mask-image:radial-gradient(circle at center,black 55%,transparent 100%);
            z-index:-1;
        }
        a{
            color:inherit;
            text-decoration:none;
        }
        img{
            max-width:100%;
            display:block;
            border-radius:var(--radius-sm);
        }
        button,
        input,
        textarea,
        select{
            font:inherit;
        }
        button{
            cursor:pointer;
        }
        ::selection{
            color:#14110f;
            background:var(--accent);
        }
        :focus-visible{
            outline:3px solid rgba(215,161,106,.48);
            outline-offset:3px;
        }
        .container{
            width:min(var(--container),calc(100% - var(--gutter) * 2));
            margin:0 auto;
        }
        .section{
            padding:var(--section) 0;
            position:relative;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            padding:.42rem .82rem;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:var(--good);
            font-size:.88rem;
            letter-spacing:.02em;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
        }
        .eyebrow::before{
            content:"";
            width:.5rem;
            height:.5rem;
            border-radius:999px;
            background:linear-gradient(135deg,var(--accent),#f3d6b8);
            box-shadow:0 0 0 6px rgba(215,161,106,.1);
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.5rem;
            min-height:46px;
            padding:.76rem 1.08rem;
            border:1px solid transparent;
            border-radius:999px;
            font-weight:700;
            line-height:1;
            transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{
            transform:translateY(-2px);
        }
        .btn:active{
            transform:translateY(0);
        }
        .btn-primary{
            color:#21140d;
            background:
                linear-gradient(135deg,#f2c99d,var(--accent) 52%,#b66f5e),
                linear-gradient(180deg,rgba(255,255,255,.45),transparent);
            border-color:rgba(255,255,255,.18);
            box-shadow:0 12px 28px rgba(215,161,106,.24),inset 0 1px 0 rgba(255,255,255,.4);
        }
        .btn-primary:hover{
            box-shadow:0 18px 42px rgba(215,161,106,.32),inset 0 1px 0 rgba(255,255,255,.48);
        }
        .btn-ghost{
            color:var(--text);
            border-color:var(--line-2);
            background:rgba(255,255,255,.04);
        }
        .btn-ghost:hover{
            border-color:rgba(215,161,106,.42);
            background:rgba(215,161,106,.08);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter:blur(14px);
            background:linear-gradient(180deg,rgba(13,14,18,.9),rgba(13,14,18,.74));
            border-bottom:1px solid rgba(255,255,255,.05);
        }
        .nav-shell{
            position:relative;
            display:flex;
            align-items:center;
            gap:14px;
            min-height:82px;
            padding:14px 0;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:205px;
            flex:0 0 auto;
        }
        .brand-mark{
            width:44px;
            height:44px;
            display:grid;
            place-items:center;
            border-radius:14px;
            background:
                linear-gradient(135deg,rgba(215,161,106,.22),rgba(181,107,93,.18)),
                linear-gradient(180deg,#23262d,#15181d);
            border:1px solid rgba(255,255,255,.12);
            box-shadow:var(--shadow-soft);
            color:#fff;
            font-weight:800;
            letter-spacing:.02em;
        }
        .brand-copy strong{
            display:block;
            font-size:1.02rem;
            line-height:1.1;
            letter-spacing:.02em;
        }
        .brand-copy span{
            display:block;
            margin-top:2px;
            color:var(--soft);
            font-size:.82rem;
        }
        .nav-toggle{
            position:absolute;
            opacity:0;
            pointer-events:none;
        }
        .nav-burger{
            display:none;
            width:48px;
            height:48px;
            align-items:center;
            justify-content:center;
            gap:5px;
            flex-direction:column;
            border:1px solid var(--line);
            border-radius:14px;
            background:rgba(255,255,255,.04);
            margin-left:auto;
        }
        .nav-burger span{
            width:20px;
            height:2px;
            border-radius:2px;
            background:var(--text);
            transition:transform .25s var(--ease),opacity .25s var(--ease);
        }
        .nav-panel{
            flex:1;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            padding:8px;
            border:1px solid var(--line);
            border-radius:22px;
            background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .nav-item{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:38px;
            padding:0 14px;
            border-radius:14px;
            color:var(--muted);
            font-size:.92rem;
            transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
        }
        .nav-item::before{
            content:"";
            width:6px;
            height:6px;
            margin-right:7px;
            border-radius:50%;
            background:rgba(245,240,232,.28);
            transition:background .25s var(--ease),box-shadow .25s var(--ease);
        }
        .nav-item:hover,
        .nav-item.active{
            color:var(--text);
            background:rgba(255,255,255,.06);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
        }
        .nav-item:hover::before,
        .nav-item.active::before{
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(215,161,106,.12);
        }
        .nav-panel-cta{
            display:none;
        }
        .header-cta{
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:48px;
            padding:0 18px;
            border-radius:16px;
            color:#21140d;
            font-weight:800;
            background:
                linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.26) 8px 9px,transparent 9px calc(100% - 8px),rgba(255,255,255,.26) calc(100% - 9px) calc(100% - 8px),transparent calc(100% - 8px)),
                linear-gradient(135deg,#f2c99d,var(--accent) 54%,#b56b5d);
            border:1px solid rgba(255,255,255,.2);
            box-shadow:0 14px 32px rgba(215,161,106,.24);
            transition:transform .25s var(--ease),box-shadow .25s var(--ease);
        }
        .header-cta:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 44px rgba(215,161,106,.34);
        }
        .article-hero{
            padding:clamp(42px,6vw,78px) 0 34px;
        }
        .article-frame{
            position:relative;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            background:
                linear-gradient(135deg,rgba(215,161,106,.14),transparent 30%),
                linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
            box-shadow:var(--shadow);
        }
        .article-frame::before{
            content:"";
            position:absolute;
            inset:14px;
            border:1px solid rgba(215,161,106,.16);
            border-radius:calc(var(--radius-lg) - 8px);
            pointer-events:none;
        }
        .article-frame::after{
            content:"";
            position:absolute;
            right:-120px;
            top:-180px;
            width:420px;
            height:420px;
            background:radial-gradient(circle,rgba(215,161,106,.18),transparent 62%);
            pointer-events:none;
        }
        .article-kicker{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1fr) 250px;
            gap:26px;
            padding:clamp(24px,4vw,44px);
            align-items:end;
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            margin:0 0 18px;
            color:var(--soft);
            font-size:.9rem;
        }
        .breadcrumb a{
            color:var(--good);
            transition:color .2s var(--ease);
        }
        .breadcrumb a:hover{
            color:var(--accent);
        }
        .breadcrumb span{
            color:var(--muted);
        }
        .article-title{
            margin:14px 0 12px;
            max-width:900px;
            font-size:clamp(2rem,4.2vw,4.9rem);
            line-height:1.05;
            letter-spacing:-.035em;
            overflow-wrap:anywhere;
        }
        .article-summary{
            margin:0;
            max-width:780px;
            color:var(--muted);
            font-size:clamp(1rem,1.4vw,1.15rem);
        }
        .meta-board{
            display:grid;
            gap:10px;
            padding:14px;
            border:1px solid var(--line);
            border-radius:18px;
            background:rgba(15,16,19,.54);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .meta-item{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            min-height:44px;
            padding:9px 12px;
            border-radius:14px;
            background:rgba(255,255,255,.045);
            border:1px solid rgba(255,255,255,.06);
        }
        .meta-item span{
            color:var(--soft);
            font-size:.86rem;
        }
        .meta-item strong{
            color:var(--text);
            font-size:.92rem;
            text-align:right;
            overflow-wrap:anywhere;
        }
        .read-layout{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:28px;
            align-items:start;
            padding:0 0 var(--section);
        }
        .article-main{
            min-width:0;
        }
        .content-card{
            max-width:var(--read);
            margin:0 auto;
            border:1px solid rgba(255,255,255,.09);
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg,rgba(245,240,232,.98),rgba(232,222,208,.96));
            color:var(--text-dark);
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .content-toolbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:16px 20px;
            border-bottom:1px solid rgba(33,27,24,.1);
            background:
                linear-gradient(90deg,rgba(143,61,67,.08),transparent 48%),
                rgba(255,255,255,.34);
        }
        .content-toolbar strong{
            font-size:.95rem;
        }
        .content-toolbar span{
            color:var(--muted-dark);
            font-size:.88rem;
        }
        .article-content{
            padding:clamp(24px,4vw,44px);
            font-size:1.06rem;
            line-height:1.92;
        }
        .article-content > *:first-child{
            margin-top:0;
        }
        .article-content > *:last-child{
            margin-bottom:0;
        }
        .article-content h1,
        .article-content h2,
        .article-content h3,
        .article-content h4{
            color:#18120f;
            line-height:1.28;
            letter-spacing:-.015em;
            margin:2rem 0 .85rem;
        }
        .article-content h1{
            font-size:2rem;
        }
        .article-content h2{
            font-size:1.62rem;
            padding-bottom:.55rem;
            border-bottom:1px solid rgba(33,27,24,.12);
        }
        .article-content h3{
            font-size:1.28rem;
        }
        .article-content p{
            margin:0 0 1.15rem;
        }
        .article-content a{
            color:#8f3d43;
            font-weight:700;
            border-bottom:1px solid rgba(143,61,67,.28);
            transition:color .2s var(--ease),border-color .2s var(--ease);
        }
        .article-content a:hover{
            color:#6f2c32;
            border-color:#6f2c32;
        }
        .article-content ul,
        .article-content ol{
            margin:1rem 0 1.35rem;
            padding-left:1.35rem;
        }
        .article-content li{
            margin:.38rem 0;
            padding-left:.15rem;
        }
        .article-content blockquote{
            margin:1.55rem 0;
            padding:1rem 1.15rem 1rem 1.25rem;
            border-left:4px solid var(--accent-2);
            border-radius:0 14px 14px 0;
            background:rgba(181,107,93,.1);
            color:#372722;
        }
        .article-content img{
            width:100%;
            margin:1.5rem 0;
            border:1px solid rgba(33,27,24,.12);
            box-shadow:0 12px 34px rgba(33,27,24,.14);
        }
        .article-content hr{
            border:0;
            height:1px;
            margin:2rem 0;
            background:linear-gradient(90deg,transparent,rgba(33,27,24,.2),transparent);
        }
        .article-content code{
            padding:.18rem .38rem;
            border-radius:8px;
            background:rgba(33,27,24,.08);
            color:#7b3439;
            font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
            font-size:.92em;
        }
        .article-content pre{
            overflow:auto;
            margin:1.4rem 0;
            padding:1rem;
            border-radius:16px;
            background:#171a20;
            color:#f5f0e8;
            border:1px solid rgba(255,255,255,.08);
        }
        .article-content pre code{
            padding:0;
            background:transparent;
            color:inherit;
        }
        .empty-state{
            padding:clamp(28px,5vw,52px);
            text-align:center;
        }
        .empty-icon{
            width:72px;
            height:72px;
            margin:0 auto 18px;
            border-radius:22px;
            display:grid;
            place-items:center;
            color:#231713;
            font-weight:900;
            background:linear-gradient(135deg,#f2c99d,var(--accent),#b56b5d);
            box-shadow:0 16px 38px rgba(215,161,106,.28);
        }
        .empty-state h1{
            margin:0 0 10px;
            color:#18120f;
            font-size:clamp(1.7rem,3vw,2.6rem);
            line-height:1.18;
        }
        .empty-state p{
            margin:0 auto 22px;
            max-width:34rem;
            color:var(--muted-dark);
        }
        .side-stack{
            position:sticky;
            top:108px;
            display:grid;
            gap:16px;
        }
        .side-card{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .side-card-inner{
            padding:20px;
        }
        .side-card h2,
        .side-card h3{
            margin:0 0 10px;
            font-size:1.12rem;
            line-height:1.25;
        }
        .side-card p{
            margin:0 0 16px;
            color:var(--muted);
            font-size:.94rem;
        }
        .keyword-list{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            min-height:30px;
            padding:.25rem .66rem;
            border-radius:999px;
            border:1px solid rgba(215,161,106,.2);
            color:var(--good);
            background:rgba(215,161,106,.08);
            font-size:.84rem;
        }
        .rec-list{
            display:grid;
            gap:10px;
        }
        .rec-item{
            display:block;
            padding:13px 14px;
            border:1px solid rgba(255,255,255,.07);
            border-radius:14px;
            background:rgba(255,255,255,.035);
            transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
        }
        .rec-item:hover{
            transform:translateY(-2px);
            border-color:rgba(215,161,106,.32);
            background:rgba(215,161,106,.07);
        }
        .rec-item strong{
            display:block;
            font-size:.96rem;
            line-height:1.45;
        }
        .rec-item span{
            display:block;
            margin-top:4px;
            color:var(--soft);
            font-size:.82rem;
        }
        .notice-strip{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:16px;
            border-radius:16px;
            border:1px solid rgba(215,161,106,.18);
            background:rgba(215,161,106,.075);
        }
        .notice-strip b{
            flex:0 0 auto;
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:10px;
            color:#1d130c;
            background:var(--accent);
        }
        .notice-strip span{
            color:var(--muted);
            font-size:.92rem;
        }
        .article-bottom{
            max-width:var(--read);
            margin:24px auto 0;
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .bottom-link{
            min-height:96px;
            padding:18px;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
            transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
        }
        .bottom-link:hover{
            transform:translateY(-2px);
            border-color:rgba(215,161,106,.32);
            box-shadow:var(--shadow-soft);
        }
        .bottom-link small{
            display:block;
            color:var(--good);
            margin-bottom:6px;
        }
        .bottom-link strong{
            display:block;
            line-height:1.35;
        }
        .cta-section{
            padding:0 0 var(--section);
        }
        .cta-card{
            overflow:hidden;
            border:1px solid rgba(215,161,106,.22);
            border-radius:var(--radius-lg);
            background:
                linear-gradient(135deg,rgba(143,61,67,.22),transparent 38%),
                linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));
            box-shadow:var(--shadow);
        }
        .cta-inner{
            display:grid;
            grid-template-columns:minmax(0,1fr) 360px;
            gap:28px;
            align-items:center;
            padding:clamp(24px,4vw,42px);
        }
        .cta-copy h2{
            margin:10px 0 10px;
            font-size:clamp(1.6rem,2.6vw,2.7rem);
            line-height:1.18;
            letter-spacing:-.02em;
        }
        .cta-copy p{
            margin:0;
            max-width:58ch;
            color:var(--muted);
        }
        .quick-form{
            display:grid;
            gap:12px;
            padding:16px;
            border:1px solid var(--line);
            border-radius:20px;
            background:rgba(15,16,19,.48);
        }
        .quick-form label{
            display:grid;
            gap:6px;
            color:var(--muted);
            font-size:.88rem;
        }
        .quick-form input,
        .quick-form textarea{
            width:100%;
            color:var(--text);
            border:1px solid rgba(255,255,255,.12);
            border-radius:14px;
            background:rgba(255,255,255,.045);
            padding:.78rem .9rem;
            outline:none;
            transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
        }
        .quick-form textarea{
            min-height:88px;
            resize:vertical;
        }
        .quick-form input::placeholder,
        .quick-form textarea::placeholder{
            color:rgba(245,240,232,.38);
        }
        .quick-form input:focus,
        .quick-form textarea:focus{
            border-color:rgba(215,161,106,.62);
            background:rgba(255,255,255,.07);
            box-shadow:0 0 0 4px rgba(215,161,106,.12);
        }
        .quick-form .form-note{
            color:var(--soft);
            font-size:.82rem;
            line-height:1.5;
        }
        .site-footer{
            padding:0 0 28px;
        }
        .footer-card{
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            background:
                linear-gradient(135deg,rgba(215,161,106,.09),transparent 36%),
                linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .footer-top{
            display:flex;
            justify-content:space-between;
            gap:28px;
            padding:28px;
        }
        .footer-brand{
            max-width:520px;
        }
        .footer-brand strong{
            display:block;
            font-size:1.25rem;
            margin-bottom:8px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            justify-content:flex-end;
            gap:10px;
            max-width:430px;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            min-height:36px;
            padding:0 12px;
            border-radius:12px;
            color:var(--muted);
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
            transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
        }
        .footer-links a:hover{
            color:var(--text);
            background:rgba(215,161,106,.08);
            border-color:rgba(215,161,106,.22);
        }
        .footer-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:16px 28px;
            border-top:1px solid rgba(255,255,255,.06);
            color:var(--soft);
            font-size:.9rem;
        }
        @media (max-width:1280px){
            .container{
                width:min(1120px,calc(100% - var(--gutter) * 2));
            }
            .article-kicker{
                grid-template-columns:minmax(0,1fr) 230px;
            }
        }
        @media (max-width:1024px){
            .header-cta{
                display:none;
            }
            .nav-panel{
                justify-content:flex-end;
            }
            .article-kicker,
            .read-layout,
            .cta-inner{
                grid-template-columns:1fr;
            }
            .meta-board{
                grid-template-columns:repeat(3,1fr);
            }
            .side-stack{
                position:static;
                grid-template-columns:1fr 1fr;
            }
            .content-card,
            .article-bottom{
                max-width:820px;
            }
        }
        @media (max-width:768px){
            :root{
                --section:58px;
            }
            .nav-shell{
                min-height:74px;
            }
            .brand{
                min-width:0;
            }
            .brand-copy span{
                display:none;
            }
            .nav-burger{
                display:flex;
            }
            .nav-panel{
                position:absolute;
                left:0;
                right:0;
                top:calc(100% - 6px);
                display:grid;
                grid-template-columns:1fr;
                justify-content:stretch;
                gap:8px;
                padding:12px;
                border-radius:20px;
                background:rgba(20,22,26,.98);
                box-shadow:var(--shadow);
                transform:translateY(-8px);
                opacity:0;
                pointer-events:none;
                transition:opacity .25s var(--ease),transform .25s var(--ease);
            }
            .nav-toggle:checked ~ .nav-panel{
                opacity:1;
                transform:translateY(0);
                pointer-events:auto;
            }
            .nav-toggle:checked + .nav-burger span:nth-child(1){
                transform:translateY(7px) rotate(45deg);
            }
            .nav-toggle:checked + .nav-burger span:nth-child(2){
                opacity:0;
            }
            .nav-toggle:checked + .nav-burger span:nth-child(3){
                transform:translateY(-7px) rotate(-45deg);
            }
            .nav-item{
                justify-content:flex-start;
                min-height:44px;
            }
            .nav-panel-cta{
                display:inline-flex;
                width:100%;
            }
            .article-hero{
                padding-top:30px;
            }
            .article-kicker{
                padding:22px;
            }
            .meta-board,
            .side-stack,
            .article-bottom{
                grid-template-columns:1fr;
            }
            .content-toolbar{
                align-items:flex-start;
                flex-direction:column;
                gap:4px;
            }
            .article-content{
                font-size:1rem;
                line-height:1.86;
            }
            .footer-top,
            .footer-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-links{
                justify-content:flex-start;
            }
        }
        @media (max-width:520px){
            :root{
                --gutter:16px;
            }
            .brand-mark{
                width:40px;
                height:40px;
                border-radius:13px;
            }
            .brand-copy strong{
                max-width:11em;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .article-title{
                font-size:clamp(1.78rem,12vw,2.65rem);
            }
            .breadcrumb{
                font-size:.84rem;
            }
            .meta-item{
                align-items:flex-start;
                flex-direction:column;
                gap:4px;
            }
            .meta-item strong{
                text-align:left;
            }
            .content-card,
            .article-frame,
            .cta-card,
            .footer-card{
                border-radius:20px;
            }
            .article-content{
                padding:22px;
            }
            .cta-inner{
                padding:22px;
            }
            .footer-top,
            .footer-bottom{
                padding:22px;
            }
            .btn{
                width:100%;
                white-space:normal;
            }
        }