/* roulang page: index */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,112px)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}.eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}.section{padding:var(--section) 0}.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}.section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.2;margin:9px 0 0;letter-spacing:-.045em}.section-head p{max-width:510px;margin:0;color:var(--muted)}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s ease;white-space:nowrap}.btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}.btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}.btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}.btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}.btn:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}.badge.live{color:#a62955;background:#fff0f5}.badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}.badge.ready{color:#79520c;background:#fff6d9}.badge.replay{color:#076d75;background:#e4f8f8}.badge.rank{color:#6238ca;background:#f0eaff}.badge.up{color:#087355;background:#e3f8ef}.badge.hot{color:#ac4f11;background:#fff0e7}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.92);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}.site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}.nav{min-height:76px;display:flex;align-items:center;gap:20px}.logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}.logo i{font-style:normal;color:var(--pink)}.main-nav{display:flex;align-items:center;gap:4px;flex:1}.main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}.main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}.phase{display:flex;gap:6px;padding-left:7px;border-left:1px solid var(--line)}.phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}.phase .p1{background:#fff5d9;color:#8a5a09}.phase .p2{background:#fff0f6;color:#b2275b}.phase .p3{background:#e7f9fa;color:#08777e}.nav-actions{display:flex;align-items:center;gap:8px}.search{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}.menu-btn{display:none;border:0;background:transparent;font-size:24px;color:var(--purple)}
    .hero{padding:48px 0 44px;background:linear-gradient(135deg,#f8f5ff 0%,#fff8fb 60%,#fff 100%);overflow:hidden}.creator-cover{position:relative;min-height:570px;border-radius:34px;overflow:hidden;background:var(--deep);box-shadow:var(--shadow-lg)}.creator-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,18,43,.85),rgba(35,22,65,.42) 53%,rgba(35,22,65,.1))}.creator-cover>img{width:100%;height:100%;position:absolute;object-fit:cover}.hero-content{position:relative;z-index:1;min-height:570px;padding:clamp(30px,5vw,68px);display:flex;flex-direction:column;justify-content:end;color:#fff}.creator-line{display:flex;align-items:center;gap:13px;margin-bottom:20px}.avatar{width:54px;height:54px;border:2px solid rgba(255,255,255,.85);border-radius:50%;object-fit:cover}.creator-line strong{display:block;font-size:18px}.creator-line span{font-size:13px;color:#e7ddff}.follow{margin-left:4px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;padding:8px 13px;border-radius:999px;font-weight:800}.follow:hover{background:#fff;color:var(--purple)}h1{max-width:800px;margin:0;font-size:clamp(40px,6.5vw,76px);line-height:1.08;letter-spacing:-.07em}.hero p{max-width:690px;margin:23px 0;color:#f2edf8;font-size:17px;line-height:1.9}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero .btn-secondary{background:rgba(255,255,255,.91)}.hero-stats{position:absolute;z-index:2;right:32px;bottom:29px;display:flex;gap:10px}.stat{min-width:116px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.13)}.stat b{display:block;font-size:22px;line-height:1.15;color:var(--purple)}.stat span{font-size:11px;color:var(--muted);font-weight:700}
    .quickbar{margin-top:-22px;position:relative;z-index:3}.quickbar-inner{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;overflow:hidden}.quickbar a{min-height:94px;padding:20px;border-right:1px solid var(--line);transition:.2s}.quickbar a:last-child{border:0}.quickbar a:hover{background:#faf7ff}.quickbar b,.quickbar span{display:block}.quickbar b{font-size:15px}.quickbar span{color:var(--muted);font-size:12px;margin-top:4px}.quickbar .intro{background:linear-gradient(120deg,#6e42d9,#a94cd0);color:#fff}.quickbar .intro span{color:#eee8ff}.quickbar .intro b{font-size:17px}
    .three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.value-card{padding:31px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;position:relative;overflow:hidden;transition:.22s}.value-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d7cafa}.value-card .icon{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:#f0eaff;color:var(--purple);font-size:21px}.value-card:nth-child(2) .icon{background:#e5f9f8;color:var(--cyan)}.value-card:nth-child(3) .icon{background:#fff0e7;color:var(--orange)}.value-card h3{margin:18px 0 8px;font-size:21px;line-height:1.35}.value-card p{margin:0;color:var(--muted);font-size:14px}
    .feature-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:var(--gap)}.feature-main{min-height:455px;padding:40px;border-radius:30px;color:#fff;background:linear-gradient(145deg,#41238f,#8e44c5);position:relative;overflow:hidden}.feature-main:after{content:"";position:absolute;width:280px;height:280px;right:-70px;top:-55px;border-radius:50%;background:radial-gradient(circle,#ff9cbf 0,rgba(255,156,191,0) 68%)}.feature-main>*{position:relative;z-index:1}.feature-main h2{font-size:38px;line-height:1.18;max-width:430px;margin:12px 0}.feature-main p{max-width:480px;color:#eee8ff}.feature-list{display:grid;gap:14px}.feature-row{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:19px;border:1px solid var(--line);border-radius:19px;background:#fff;transition:.2s}.feature-row:hover{box-shadow:var(--shadow);transform:translateX(4px)}.feature-row strong{display:block}.feature-row p{margin:2px 0 0;color:var(--muted);font-size:13px}.num{font-size:22px;font-weight:900;color:#d9ccff}.category-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.category-strip a{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.23);font-size:13px;font-weight:700}.category-strip a:hover{background:#fff;color:var(--purple)}
    .scene-wrap{background:var(--mist)}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.scene{padding:25px 21px;border-radius:20px;background:#fff;border:1px solid #ebe5f0;position:relative}.scene:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);display:block;box-shadow:0 0 0 6px #fbe6f1;margin-bottom:18px}.scene:nth-child(2):before{background:var(--orange);box-shadow:0 0 0 6px #fff0e7}.scene:nth-child(3):before{background:var(--cyan);box-shadow:0 0 0 6px #e4f7f8}.scene:nth-child(4):before{background:var(--purple);box-shadow:0 0 0 6px #f0eaff}.scene h3{margin:0 0 9px;font-size:19px}.scene p{margin:0;color:var(--muted);font-size:14px}.scene small{display:block;color:var(--purple);font-weight:800;margin-top:14px}
    .story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:stretch}.story-image{position:relative;min-height:460px;border-radius:28px;overflow:hidden}.story-image img{height:100%;width:100%;object-fit:cover}.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(34,22,55,.64),transparent 58%)}.image-note{position:absolute;z-index:1;bottom:25px;left:25px;right:25px;color:#fff}.image-note b{font-size:25px;display:block}.image-note span{font-size:13px}.story-copy{padding:18px 4px}.story-copy h2{font-size:38px;line-height:1.22;margin:10px 0 18px}.story-copy p{color:var(--muted);margin:0 0 17px}.quote{border-left:3px solid var(--pink);padding:13px 0 13px 19px;color:var(--deep);font-size:17px;font-weight:700;margin:20px 0}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:15px;border-radius:15px;background:#f5f0ff}.metric b{font-size:25px;display:block;color:var(--purple);line-height:1.2}.metric span{font-size:12px;color:var(--muted)}
    .case-layout{display:grid;grid-template-columns:1.45fr .8fr;gap:var(--gap)}.case-main{border-radius:28px;background:#272132;color:#fff;padding:38px;position:relative;overflow:hidden}.case-main:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-175px;bottom:-190px;background:radial-gradient(circle,#c95bba,rgba(201,91,186,0) 67%)}.case-main>*{position:relative}.case-main h2{font-size:37px;line-height:1.23;margin:12px 0}.case-main p{color:#ddd4e8;max-width:650px}.case-figures{display:flex;gap:24px;margin:27px 0}.case-figures b{display:block;font-size:30px;color:#fff}.case-figures span{font-size:12px;color:#cbbfdc}.case-side{display:grid;gap:14px}.mini-case{padding:23px;border-radius:20px;border:1px solid var(--line);background:#fff}.mini-case h3{font-size:18px;margin:10px 0 6px}.mini-case p{margin:0;color:var(--muted);font-size:13px}
    .news-layout{display:grid;grid-template-columns:1fr .72fr;gap:var(--gap)}.news-list{border-top:1px solid var(--line)}.news-item{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:108px 1fr auto;gap:17px;align-items:center}.news-date{font-weight:900;color:var(--purple);font-size:14px}.news-date span{display:block;color:var(--muted);font-size:12px;font-weight:600}.news-item h3{font-size:18px;line-height:1.4;margin:0 0 5px}.news-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.news-feature{border-radius:26px;overflow:hidden;position:relative;min-height:510px;background:#302444}.news-feature img{width:100%;height:100%;object-fit:cover}.news-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,19,50,.9),rgba(30,19,50,.04) 72%)}.news-feature .inside{position:absolute;z-index:1;left:28px;right:28px;bottom:27px;color:#fff}.news-feature h3{font-size:27px;line-height:1.3;margin:12px 0}.news-feature p{color:#ede7f5;font-size:14px}
    .topics{padding-top:0}.topic-cloud{display:flex;flex-wrap:wrap;gap:11px}.topic-cloud a{padding:11px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;font-weight:750;font-size:14px;transition:.2s}.topic-cloud a:hover{color:#fff;background:var(--purple);border-color:var(--purple);transform:translateY(-2px)}.topic-cloud a:nth-child(3n){border-color:#f3caad;background:#fffaf6}.topic-cloud a:nth-child(4n){border-color:#bce8e8;background:#f6ffff}
    .countdown{background:linear-gradient(110deg,#44218e,#892b9e 55%,#ca5a91);color:#fff}.countdown-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:40px}.countdown h2{font-size:37px;line-height:1.2;margin:10px 0}.countdown p{color:#f2eaff;max-width:650px}.clock{display:flex;gap:10px;justify-content:flex-end}.clock div{min-width:73px;text-align:center;padding:14px 8px;border:1px solid rgba(255,255,255,.23);border-radius:16px;background:rgba(255,255,255,.12)}.clock b{font-size:27px;display:block;line-height:1.2}.clock span{font-size:11px;color:#e8dcff}
    .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}.plan{padding:29px;border:1px solid var(--line);border-radius:25px;background:#fff;display:flex;flex-direction:column}.plan.featured{border:2px solid var(--purple);box-shadow:var(--shadow);transform:translateY(-9px);background:linear-gradient(160deg,#fff,#f8f4ff)}.plan h3{margin:12px 0 5px;font-size:24px}.plan>p{margin:0;color:var(--muted);font-size:14px}.price{font-size:32px;font-weight:900;margin:22px 0 12px;color:var(--purple)}.price small{font-size:13px;font-weight:600;color:var(--muted)}.plan ul{padding:0;margin:0 0 25px;list-style:none;flex:1}.plan li{padding:9px 0;border-bottom:1px dashed #e7e0ed;font-size:14px}.plan li:before{content:"✓";color:var(--green);font-weight:900;margin-right:8px}
    .brand-panel{display:grid;grid-template-columns:.78fr 1.22fr;gap:0;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff}.brand-panel img{height:100%;min-height:450px;width:100%;object-fit:cover}.brand-copy{padding:clamp(27px,5vw,62px)}.brand-copy h2{font-size:38px;line-height:1.2;margin:10px 0 18px}.brand-copy p{color:var(--muted);margin:0 0 16px}.brand-steps{display:grid;gap:12px;margin-top:23px}.brand-step{display:grid;grid-template-columns:37px 1fr;gap:12px}.brand-step b:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--purple);background:#f0eaff}.brand-step strong{display:block;font-size:15px}.brand-step span{font-size:13px;color:var(--muted)}
    .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap)}.faq-intro{padding:32px;border-radius:26px;background:#fff5f9}.faq-intro h2{font-size:35px;line-height:1.2;margin:10px 0}.faq-intro p{color:#695a68}.faq-list{display:grid;gap:10px}.faq{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.faq button{width:100%;border:0;background:#fff;text-align:left;padding:18px 48px 18px 19px;font-size:16px;font-weight:800;color:var(--ink);position:relative}.faq button:after{content:"＋";position:absolute;right:18px;color:var(--purple);font-size:22px;font-weight:400}.faq.open button:after{content:"－"}.faq-answer{display:none;padding:0 19px 18px;color:var(--muted);font-size:14px}.faq.open .faq-answer{display:block}
    .contact{padding-bottom:var(--section)}.contact-box{border-radius:30px;padding:clamp(28px,5vw,57px);background:linear-gradient(125deg,#f4edff,#fff7fa 55%,#fffbf6);border:1px solid #e5dcf2;display:grid;grid-template-columns:.9fr 1.1fr;gap:42px}.contact-box h2{font-size:39px;line-height:1.18;margin:10px 0}.contact-box p{color:var(--muted)}.contact-points{padding:0;list-style:none}.contact-points li{font-size:14px;padding:7px 0}.contact-points li:before{content:"◆";color:var(--pink);margin-right:10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:6px}.field label{font-size:13px;font-weight:800}.field input,.field select,.field textarea{width:100%;padding:12px 13px;border-radius:12px;border:1px solid #dcd4e5;background:#fff;color:var(--ink)}.field textarea{height:102px;resize:vertical}.field.full{grid-column:1/-1}.form-note{margin:9px 0 0;color:var(--muted);font-size:12px}.form-message{display:none;margin-top:10px;padding:8px 11px;border-radius:9px;color:#087355;background:#e3f8ef;font-size:13px}
    footer{background:var(--deep);color:#eeeaf4;padding:57px 0 24px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.13)}.footer-brand .logo{color:#fff}.footer-brand p{max-width:350px;color:#bbb2c7;font-size:14px}.footer-col h3{font-size:14px;margin:0 0 13px;color:#fff}.footer-col a{display:block;color:#c5bdcf;font-size:13px;padding:4px 0}.footer-col a:hover{color:#f38dc4}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;color:#aaa1b7;font-size:12px}.footer-bottom a{color:#d7ccdf}.footer-bottom a:hover{color:#fff}.mobile-panel{display:none}
    @media(max-width:1200px){.main-nav>a{padding:8px 7px;font-size:13px}.phase{display:none}.hero-stats{right:20px}.quickbar-inner{grid-template-columns:1.25fr repeat(4,1fr)}}
    @media(max-width:992px){.main-nav{display:none}.nav{justify-content:space-between}.menu-btn{display:block}.nav-actions .btn{display:none}.mobile-panel.show{display:block;position:absolute;top:76px;left:0;right:0;background:#fff;padding:18px 24px 24px;box-shadow:var(--shadow)}.mobile-panel a{display:block;padding:11px 0;font-weight:800;border-bottom:1px solid var(--line)}.mobile-panel .mobile-chips{display:flex;gap:8px;padding:13px 0}.mobile-chips span{padding:5px 10px;border-radius:99px;font-size:12px;font-weight:800;background:#f0eaff;color:var(--purple)}.feature-grid,.story-grid,.case-layout,.news-layout,.faq-grid,.contact-box{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(2,1fr)}.news-feature{min-height:350px}.countdown-inner{grid-template-columns:1fr}.clock{justify-content:flex-start}.brand-panel{grid-template-columns:1fr}.brand-panel img{min-height:290px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
    @media(max-width:768px){.container{width:min(100% - 32px,var(--max))}.hero{padding-top:22px}.creator-cover,.hero-content{min-height:560px}.hero-content{padding:28px}.hero-stats{left:17px;right:17px;bottom:15px}.stat{flex:1;min-width:0;padding:11px}.quickbar-inner{grid-template-columns:1fr 1fr}.quickbar a{min-height:80px;padding:15px;border-bottom:1px solid var(--line)}.quickbar .intro{grid-column:1/-1}.three,.plans{grid-template-columns:1fr}.plan.featured{transform:none}.section-head{display:block}.section-head p{margin-top:14px}.metric-row{grid-template-columns:1fr}.case-figures{gap:14px}.news-item{grid-template-columns:85px 1fr}.news-item .btn-text{grid-column:2}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
    @media(max-width:576px){body{font-size:15px}.nav{min-height:66px}.logo{font-size:21px}.mobile-panel.show{top:66px}.creator-cover,.hero-content{min-height:590px}.creator-line{align-items:flex-start}.follow{margin-left:auto}.hero p{font-size:15px}.hero-actions .btn{width:100%}.hero-stats{gap:6px}.stat b{font-size:18px}.quickbar{margin-top:-12px}.feature-main{padding:27px;min-height:390px}.feature-main h2,.story-copy h2,.case-main h2,.brand-copy h2,.contact-box h2{font-size:31px}.feature-row{grid-template-columns:43px 1fr}.feature-row .badge{display:none}.timeline{grid-template-columns:1fr}.case-main{padding:28px}.case-figures b{font-size:24px}.news-item{grid-template-columns:1fr}.news-date{display:flex;gap:8px}.news-date span{display:inline}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.clock div{min-width:61px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{display:block;line-height:2.1}}

/* roulang page: category3 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,108px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
.section{padding:var(--section) 0}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
.section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.2;margin:9px 0 0;letter-spacing:-.045em}
.section-head p{max-width:540px;margin:0;color:var(--muted)}
.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s ease;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
.btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
.btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
.btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
.btn:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
.badge.live{color:#a62955;background:#fff0f5}
.badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
.badge.ready{color:#79520c;background:#fff6d9}
.badge.replay{color:#076d75;background:#e4f8f8}
.badge.rank{color:#6238ca;background:#f0eaff}
.badge.up{color:#087355;background:#e3f8ef}
.badge.hot{color:#ac4f11;background:#fff0e7}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.94);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:20px}
.logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}
.logo i{font-style:normal;color:var(--pink)}
.main-nav{display:flex;align-items:center;gap:3px;flex:1}
.main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 9px;border-radius:9px;white-space:nowrap}
.main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
.phase{display:flex;gap:3px;margin-left:auto;padding-left:8px;border-left:1px solid var(--line)}
.phase a{font-size:12px;font-weight:800;padding:5px 8px;border-radius:999px}
.phase .p1{color:#96630e;background:#fff4d3}.phase .p2{color:#b12f59;background:#fff0f5}.phase .p3{color:#087b82;background:#e4f8f8}
.nav-actions{display:flex;align-items:center;gap:8px}
.search{width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}
.menu-btn{display:none;border:0;background:transparent;font-size:25px;color:var(--purple)}
.page-banner{padding:72px 0 70px;background:linear-gradient(120deg,#f6f1ff,#fff7fa 58%,#f5fcfc);position:relative;overflow:hidden}
.page-banner:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;right:-100px;top:-180px;background:radial-gradient(circle,rgba(223,75,157,.22),transparent 68%)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:24px;position:relative;z-index:1}
.breadcrumb a{color:var(--purple)}
.banner-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;position:relative;z-index:1}
.page-banner h1{font-size:clamp(38px,6vw,68px);line-height:1.12;letter-spacing:-.065em;margin:12px 0 20px}
.page-banner h1 em{font-style:normal;color:var(--pink)}
.page-banner p{max-width:670px;color:var(--muted);font-size:17px;margin:0}
.banner-art{min-height:280px;border-radius:30px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);background:#41238f}
.banner-art img{width:100%;height:100%;min-height:280px;object-fit:cover;opacity:.78}
.banner-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(65,35,143,.75),transparent 65%)}
.banner-note{position:absolute;z-index:2;left:28px;bottom:25px;color:#fff;font-size:22px;font-weight:900;max-width:260px;line-height:1.35}
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:32px}
.filter-bar button{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:9px 16px;font-weight:700;transition:.2s}
.filter-bar button:hover,.filter-bar button.active{background:#f0eaff;border-color:#cfc0fa;color:var(--purple)}
.featured-player{display:grid;grid-template-columns:.75fr 1.25fr;min-height:370px;border-radius:30px;overflow:hidden;background:var(--deep);color:#fff;box-shadow:var(--shadow-lg)}
.featured-player .photo{position:relative;min-height:300px}
.featured-player .photo img{width:100%;height:100%;object-fit:cover}
.featured-player .photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--deep))}
.feature-copy{padding:42px 48px;align-self:center}
.feature-copy h2{font-size:clamp(28px,4vw,43px);line-height:1.2;margin:14px 0}
.feature-copy p{color:#ddd7e9;max-width:560px;margin:0 0 22px}
.stat-line{display:flex;gap:25px;flex-wrap:wrap;margin:24px 0}
.stat-line strong{display:block;font-size:27px;line-height:1.2}
.stat-line span{color:#b9b1c9;font-size:13px}
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.team-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.23s;box-shadow:0 5px 20px rgba(63,37,105,.04)}
.team-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d5c9f5}
.team-cover{height:190px;position:relative;overflow:hidden;background:linear-gradient(135deg,#5c3bc0,#db579e)}
.team-cover img{width:100%;height:100%;object-fit:cover;transition:.3s}
.team-card:hover .team-cover img{transform:scale(1.05)}
.team-cover .badge{position:absolute;top:16px;left:16px}
.team-info{padding:22px}
.team-info h3{margin:0 0 7px;font-size:22px}
.team-info p{margin:0;color:var(--muted);font-size:14px;min-height:50px}
.team-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:18px;padding-top:15px;font-size:13px;color:var(--muted)}
.team-meta strong{color:var(--purple)}
.player-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);align-items:start}
.player-list{border-top:1px solid var(--line)}
.player-row{display:grid;grid-template-columns:62px 1fr auto auto;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);transition:.2s}
.player-row:hover{padding-left:8px;background:#fcfaff}
.avatar{width:54px;height:54px;border-radius:18px;object-fit:cover;background:#eee6ff}
.player-name strong{display:block;font-size:17px}.player-name small{color:var(--muted)}
.player-score{text-align:right}.player-score strong{display:block;font-size:21px;color:var(--purple)}.player-score small{font-size:12px;color:var(--muted)}
.insight-card{padding:30px;border-radius:28px;background:#f5f0ff;border:1px solid #e3dafa}
.insight-card h3{font-size:25px;line-height:1.35;margin:14px 0}
.insight-card p{color:var(--muted);margin:0 0 20px}
.compare{background:var(--mist);border-radius:32px;padding:clamp(26px,5vw,55px)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.compare-side{background:#fff;border-radius:22px;padding:25px;border:1px solid var(--line)}
.compare-side.pink{background:linear-gradient(145deg,#fff,#fff1f7)}
.compare-side h3{margin:0 0 18px;font-size:22px}
.progress{height:9px;background:#eeeaf2;border-radius:9px;overflow:hidden;margin:8px 0 17px}
.progress i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--purple),var(--pink))}
.compare-item{font-size:14px}.compare-item b{float:right;color:var(--purple)}
.article-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);align-items:stretch}
.article-card{padding:34px;border:1px solid var(--line);border-radius:26px;background:#fff}
.article-card h3{font-size:25px;line-height:1.35;margin:12px 0}
.article-card p{color:var(--muted);margin:0 0 18px}
.article-cover{border-radius:25px;overflow:hidden;min-height:290px;position:relative}
.article-cover img{width:100%;height:100%;object-fit:cover}
.article-cover figcaption{position:absolute;bottom:0;left:0;right:0;color:#fff;padding:24px;background:linear-gradient(transparent,rgba(28,18,43,.85));font-weight:800}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px}
.timeline-step{position:relative;padding:22px 18px 0 0;border-top:2px solid #d9cef3}
.timeline-step:before{content:"";width:13px;height:13px;border-radius:50%;background:var(--purple);position:absolute;top:-7px;left:0;box-shadow:0 0 0 5px #eee8ff}
.timeline-step h3{font-size:17px;margin:14px 0 6px}.timeline-step p{font-size:13px;color:var(--muted);margin:0}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{border:1px solid var(--line);border-radius:17px;background:#fff;overflow:hidden}
.faq-item summary{padding:18px 20px;font-weight:800;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"＋";float:right;color:var(--purple);font-size:20px}
.faq-item[open] summary:after{content:"−"}
.faq-item p{padding:0 20px 19px;margin:0;color:var(--muted);font-size:14px}
.cta{padding:54px;border-radius:30px;background:linear-gradient(120deg,var(--purple-dark),var(--pink));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:28px;overflow:hidden}
.cta h2{font-size:clamp(27px,4vw,40px);line-height:1.25;margin:0 0 8px}.cta p{color:#eee5f8;margin:0;max-width:650px}
.cta .btn-primary{background:#fff;color:var(--purple-dark);box-shadow:none}.cta .btn-primary:hover{background:#fff7fb}
footer{background:var(--deep);color:#fff;padding:64px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px}
.footer-brand .logo{color:#fff}.footer-brand p{color:#beb5ca;max-width:340px;font-size:14px}
.footer-col h3{font-size:15px;margin:4px 0 13px}.footer-col a{display:block;color:#bdb4c8;font-size:13px;margin:8px 0}.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.13);padding-top:20px;margin-top:45px;color:#a9a0b5;font-size:12px}.footer-bottom a{color:#d9c9ff}
@media(max-width:1200px){.main-nav>a{padding-left:6px;padding-right:6px;font-size:13px}.nav{gap:10px}}
@media(max-width:992px){.main-nav{display:none;position:absolute;top:76px;left:0;right:0;padding:15px 24px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav>a{padding:12px 10px}.phase{margin:10px 0 0;padding:10px 0 0;border-left:0;border-top:1px solid var(--line)}.menu-btn{display:block}.banner-grid,.featured-player,.player-grid,.article-layout{grid-template-columns:1fr}.featured-player .photo{height:300px}.featured-player .photo:after{background:linear-gradient(0deg,var(--deep),transparent 65%)}.roster{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:14px}.page-banner{padding:45px 0}.banner-art{min-height:220px}.banner-art img{min-height:220px}.feature-copy{padding:30px 25px}.timeline{grid-template-columns:1fr 1fr;gap:25px}.timeline-step{padding-top:16px}.faq-grid,.compare-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:8px}}
@media(max-width:576px){.nav{min-height:68px}.site-header .main-nav{top:68px}.logo{font-size:21px}.nav-actions .btn{display:none}.page-banner h1{font-size:42px}.roster{grid-template-columns:1fr}.team-cover{height:210px}.player-row{grid-template-columns:52px 1fr auto}.player-row .badge{display:none}.player-score strong{font-size:18px}.cta{padding:32px 24px;display:block}.cta .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{font-size:11px}}

/* roulang page: category2 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,100px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.94);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:20px}
.logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}
.logo i{font-style:normal;color:var(--pink)}
.main-nav{display:flex;align-items:center;gap:3px;flex:1}
.main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}
.main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
.phase{display:flex;align-items:center;gap:3px;margin-left:auto;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}
.phase .p1{color:#79520c;background:#fff6d9}.phase .p2{color:#a62955;background:#fff0f5}.phase .p3{color:#076d75;background:#e4f8f8}
.nav-actions{display:flex;align-items:center;gap:8px}
.search{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}
.menu-btn{display:none;border:0;background:transparent;font-size:25px;color:var(--purple)}
.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s ease;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
.btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
.btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
.btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
.btn:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
.badge.live{color:#a62955;background:#fff0f5}.badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
.badge.ready{color:#79520c;background:#fff6d9}.badge.replay{color:#076d75;background:#e4f8f8}.badge.rank{color:#6238ca;background:#f0eaff}.badge.up{color:#087355;background:#e3f8ef}.badge.hot{color:#ac4f11;background:#fff0e7}
.section{padding:var(--section) 0}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
.section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.2;margin:9px 0 0;letter-spacing:-.045em}
.section-head p{max-width:510px;margin:0;color:var(--muted)}
.hero-banner{padding:72px 0 58px;background:linear-gradient(135deg,#f8f5ff,#fff7fb 60%,#fff)}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:24px}.breadcrumb a{color:var(--purple)}
.hero-grid{display:grid;grid-template-columns:1fr .88fr;gap:46px;align-items:center}
.hero-copy h1{font-size:clamp(40px,6vw,72px);line-height:1.1;letter-spacing:-.065em;margin:14px 0 20px}
.hero-copy h1 em{font-style:normal;color:var(--purple)}
.hero-copy p{font-size:17px;color:var(--muted);max-width:650px;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.schedule-art{min-height:390px;border-radius:32px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);background:#382368}
.schedule-art img{width:100%;height:390px;object-fit:cover;opacity:.72}
.schedule-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(65,35,143,.9),rgba(223,75,157,.25) 70%,rgba(242,120,75,.45))}
.art-info{position:absolute;z-index:2;inset:32px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.art-info h2{font-size:30px;line-height:1.3;margin:0;max-width:280px}.art-info p{margin:0;color:#eee8ff}
.metric-row{display:flex;gap:12px;flex-wrap:wrap}.metric{padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}.metric strong{display:block;font-size:25px;line-height:1.2}.metric span{font-size:12px;color:#e8dcff}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.filter-list{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:var(--mist);color:var(--muted);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}.filter:hover,.filter.active{background:#f0eaff;color:var(--purple);border-color:#d8cafa}
.select{border:1px solid var(--line);border-radius:12px;padding:10px 13px;color:var(--ink);background:#fff}
.timeline-wrap{display:grid;grid-template-columns:180px 1fr;gap:26px}
.date-rail{display:grid;gap:10px;align-content:start}.date-item{padding:16px;border-radius:17px;background:var(--mist);border:1px solid transparent;transition:.2s}.date-item:hover,.date-item.active{background:#f0eaff;border-color:#d8cafa;color:var(--purple);transform:translateX(3px)}.date-item strong{display:block;font-size:22px;line-height:1.25}.date-item span{font-size:13px;color:var(--muted)}
.match-list{display:grid;gap:15px}.match-card{display:grid;grid-template-columns:100px 1fr auto;gap:22px;align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:#fff;transition:.22s}.match-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d6c8f7}.match-time strong{display:block;font-size:25px;line-height:1.2}.match-time span{font-size:12px;color:var(--muted)}.match-main h3{margin:8px 0 4px;font-size:19px}.match-main p{margin:0;color:var(--muted);font-size:13px}.teams{display:flex;align-items:center;gap:13px;font-weight:800}.team-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink));font-size:12px}.vs{color:var(--orange);font-size:12px}
.feature-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gap);align-items:stretch}.feature-card{padding:34px;border-radius:28px;background:var(--deep);color:#fff;position:relative;overflow:hidden}.feature-card:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(223,75,157,.7),transparent 68%)}.feature-card>*{position:relative;z-index:1}.feature-card h2{font-size:34px;line-height:1.25;margin:12px 0}.feature-card p{color:#d7cfe4}.side-note{padding:30px;border-radius:24px;background:#f5f0ff;border:1px solid #e2d8fb}.side-note h3{margin:0 0 10px;font-size:22px}.side-note p{margin:0;color:var(--muted)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.info-card{padding:27px;border:1px solid var(--line);border-radius:22px;background:#fff}.info-card .number{font-size:38px;color:var(--purple);font-weight:900;line-height:1}.info-card h3{margin:15px 0 7px;font-size:19px}.info-card p{margin:0;color:var(--muted);font-size:14px}
.callout{padding:38px;border-radius:28px;background:linear-gradient(110deg,#f0eaff,#fff1f5);display:flex;justify-content:space-between;align-items:center;gap:25px}.callout h2{margin:0 0 7px;font-size:30px}.callout p{margin:0;color:var(--muted)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px}.faq-intro h2{font-size:38px;line-height:1.25;margin:10px 0}.faq-intro p{color:var(--muted)}.faq-list{display:grid;gap:10px}.faq-list details{border:1px solid var(--line);border-radius:16px;background:#fff;padding:17px 20px}.faq-list summary{cursor:pointer;font-weight:800}.faq-list details p{color:var(--muted);margin:12px 0 0;font-size:14px}
.subscribe{display:flex;gap:10px;margin-top:20px}.subscribe input{min-width:0;flex:1;padding:13px 16px;border:1px solid var(--line);border-radius:999px;background:#fff}
footer{background:var(--deep);color:#fff;padding:58px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}.footer-brand p{color:#cfc6dc;max-width:330px;font-size:14px}.footer-brand .logo{color:#fff}.footer-col h3{font-size:15px;margin:0 0 14px}.footer-col a{display:block;color:#cfc6dc;font-size:13px;margin:8px 0}.footer-col a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;color:#bdb3ca;font-size:12px}.footer-bottom a{color:#e4d9f6}
@media(max-width:1200px){.main-nav{gap:0}.main-nav>a{padding:8px 7px;font-size:13px}.phase{display:none}}
@media(max-width:992px){.hero-grid,.feature-grid,.faq-grid{grid-template-columns:1fr}.schedule-art{min-height:300px}.timeline-wrap{grid-template-columns:1fr}.date-rail{display:flex;overflow-x:auto}.date-item{min-width:135px}.info-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.nav{min-height:68px}.main-nav{display:none;position:absolute;top:68px;left:16px;right:16px;padding:15px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg)}.main-nav.open{display:flex}.main-nav>a{padding:12px}.phase{display:flex;justify-content:center;margin:10px 0 0}.menu-btn{display:block}.nav-actions .btn{display:none}.hero-banner{padding:42px 0}.hero-copy h1{font-size:44px}.match-card{grid-template-columns:78px 1fr;gap:13px}.match-card>.btn{grid-column:2;justify-self:start}.section-head{display:block}.section-head p{margin-top:12px}.callout{display:block}.callout .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:576px){.hero-copy h1{font-size:38px}.schedule-art img{height:330px}.art-info{inset:22px}.art-info h2{font-size:25px}.metric strong{font-size:21px}.filter-bar{display:block}.filter-list{margin-bottom:12px;flex-wrap:nowrap;overflow:auto}.info-grid{grid-template-columns:1fr}.match-card{padding:18px}.teams{font-size:14px;gap:8px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:8px}.subscribe{display:block}.subscribe .btn{width:100%;margin-top:10px}}

/* roulang page: category1 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,112px);--fast:.22s ease}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:#eadfff;color:var(--purple-dark)}
    .container{width:min(var(--max),calc(100% - 48px));margin:auto}
    .section{padding:var(--section) 0}
    .section.compact{padding:clamp(38px,6vw,76px) 0}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.2;margin:9px 0 0;letter-spacing:-.045em}
    .section-head p{max-width:530px;margin:0;color:var(--muted)}
    .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:var(--fast);white-space:nowrap}
    .btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
    .btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
    .btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
    .btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
    .btn-text:hover{color:var(--pink)}
    .btn:focus,a:focus,input:focus,textarea:focus,select:focus,button:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
    .btn:active{transform:translateY(0) scale(.98)}
    .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
    .badge.live{color:#a62955;background:#fff0f5}
    .badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
    .badge.ready{color:#79520c;background:#fff6d9}
    .badge.replay{color:#076d75;background:#e4f8f8}
    .badge.rank{color:#6238ca;background:#f0eaff}
    .badge.up{color:#087355;background:#e3f8ef}
    .badge.hot{color:#ac4f11;background:#fff0e7}
    .badge.dark{color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.92);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
    .site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
    .nav{min-height:76px;display:flex;align-items:center;gap:20px}
    .logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}
    .logo i{font-style:normal;color:var(--pink)}
    .main-nav{display:flex;align-items:center;gap:4px;flex:1}
    .main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}
    .main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
    .phase{display:flex;gap:5px;margin-left:5px;padding-left:8px;border-left:1px solid var(--line)}
    .phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px;white-space:nowrap}
    .phase .p1{color:#79520c;background:#fff6d9}
    .phase .p2{color:#a62955;background:#fff0f5}
    .phase .p3{color:#076d75;background:#e4f8f8}
    .nav-actions{display:flex;align-items:center;gap:8px}
    .search{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px;transition:var(--fast)}
    .search:hover{border-color:var(--purple);background:#f7f3ff}
    .menu-btn{display:none;border:0;background:transparent;font-size:24px;color:var(--purple);width:42px;height:42px;border-radius:12px}
    .menu-btn:hover{background:#f2edff}
    .mobile-panel{display:none;border-top:1px solid var(--line);background:#fff}
    .mobile-panel.open{display:block}
    .mobile-panel .mobile-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 22px}
    .mobile-panel a{padding:12px 14px;border:1px solid var(--line);border-radius:14px;font-weight:800;color:#514d5d}
    .mobile-panel a.active{color:var(--purple);background:#f2edff;border-color:#d9ccfb}
    .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:22px}
    .crumbs a{font-weight:800;color:var(--purple)}
    .crumbs span{color:#9b96a8}
    .page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8f5ff 0%,#fff8fb 58%,#fff 100%);padding:42px 0 62px}
    .hero-panel{position:relative;border-radius:34px;background:var(--deep);color:#fff;overflow:hidden;box-shadow:var(--shadow-lg);min-height:520px;display:grid;grid-template-columns:1.05fr .95fr}
    .hero-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(39,33,50,.96),rgba(65,35,143,.84) 52%,rgba(223,75,157,.58)),url('/assets/images/backpic/back-1.webp') center/cover;opacity:.98}
    .hero-copy,.hero-board{position:relative;z-index:1}
    .hero-copy{padding:clamp(28px,5vw,62px);display:flex;flex-direction:column;justify-content:center}
    .hero-copy h1{font-size:clamp(38px,6vw,70px);line-height:1.03;letter-spacing:-.07em;margin:14px 0 22px;max-width:660px}
    .hero-copy p{max-width:650px;margin:0 0 26px;color:#f1eaf9;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-filter{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
    .hero-filter a{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:800;color:#fff}
    .hero-filter a:hover,.hero-filter a.active{background:#fff;color:var(--purple)}
    .hero-board{padding:34px;display:flex;align-items:center}
    .ranking-board{width:100%;background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.36);border-radius:28px;color:var(--ink);box-shadow:0 22px 60px rgba(22,12,35,.24);overflow:hidden}
    .board-top{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
    .board-top strong{font-size:20px;letter-spacing:-.03em}
    .board-list{display:grid}
    .board-item{display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:center;padding:16px 22px;border-bottom:1px solid #f0ebf4}
    .board-item:last-child{border:0}
    .board-rank{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#f0eaff;color:var(--purple);font-weight:900}
    .board-item h3{font-size:16px;margin:0}
    .board-item p{font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.5}
    .board-score{text-align:right}
    .board-score b{display:block;font-size:22px;line-height:1;color:var(--purple-dark)}
    .board-score span{font-size:12px;color:var(--muted)}
    .ticker{margin-top:-32px;position:relative;z-index:2}
    .ticker-inner{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
    .ticker-item{padding:19px 20px;border-right:1px solid var(--line)}
    .ticker-item:last-child{border-right:0}
    .ticker-item span{font-size:12px;color:var(--muted);font-weight:800}
    .ticker-item strong{display:block;font-size:19px;margin-top:4px;line-height:1.35}
    .lead-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:stretch}
    .lead-card{border-radius:30px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
    .lead-image{position:relative;min-height:365px;overflow:hidden}
    .lead-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:.28s}
    .lead-card:hover img{transform:scale(1.04)}
    .lead-overlay{position:absolute;inset:auto 0 0;padding:28px;background:linear-gradient(0deg,rgba(24,18,35,.92),rgba(24,18,35,.08));color:#fff}
    .lead-overlay h2{font-size:clamp(25px,4vw,40px);line-height:1.18;margin:12px 0 10px;letter-spacing:-.04em}
    .lead-overlay p{margin:0;color:#eee8ff;max-width:720px}
    .side-stack{display:grid;gap:16px}
    .signal-card{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:var(--fast)}
    .signal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7cafa}
    .signal-card h3{margin:12px 0 8px;font-size:21px;line-height:1.3}
    .signal-card p{margin:0;color:var(--muted);font-size:14px}
    .filter-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(63,37,105,.06)}
    .chips{display:flex;gap:9px;flex-wrap:wrap}
    .chip{border:1px solid var(--line);background:#fff;color:#5e596c;border-radius:999px;padding:8px 13px;font-weight:800;font-size:13px;transition:var(--fast)}
    .chip:hover,.chip.active{color:var(--purple);background:#f2edff;border-color:#d7cafa}
    .search-box{display:flex;align-items:center;gap:8px;background:#faf8fc;border:1px solid var(--line);border-radius:999px;padding:8px 13px;min-width:260px}
    .search-box input{border:0;outline:0;background:transparent;width:100%;color:var(--ink)}
    .news-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start}
    .timeline{position:relative;display:grid;gap:16px}
    .timeline:before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--purple),var(--pink),var(--cyan));opacity:.28}
    .timeline-card{position:relative;margin-left:54px;padding:22px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px rgba(63,37,105,.06);transition:var(--fast)}
    .timeline-card:before{content:"";position:absolute;left:-41px;top:24px;width:13px;height:13px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 7px #f0eaff}
    .timeline-card:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:#d7cafa}
    .date{display:inline-flex;color:var(--pink);font-weight:900;font-size:13px;margin-bottom:8px}
    .timeline-card h3,.news-card h3{margin:0 0 8px;font-size:22px;line-height:1.32;letter-spacing:-.03em}
    .timeline-card p,.news-card p{margin:0 0 15px;color:var(--muted);font-size:14px}
    .news-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .news-card{padding:20px;border-radius:22px;border:1px solid var(--line);background:#fff;transition:var(--fast)}
    .news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d7cafa}
    .news-card.feature{grid-column:span 2;display:grid;grid-template-columns:.82fr 1fr;gap:20px;align-items:center;background:linear-gradient(135deg,#fff,#faf6ff)}
    .news-card figure{margin:0;overflow:hidden;border-radius:18px;aspect-ratio:4/3;background:#eee}
    .news-card img{width:100%;height:100%;object-fit:cover;transition:.28s}
    .news-card:hover img{transform:scale(1.04)}
    .meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
    .brief-panel{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
    .brief-text h2{font-size:clamp(30px,4.6vw,48px);line-height:1.15;letter-spacing:-.05em;margin:12px 0 18px}
    .brief-text p{color:#5d5968;margin:0 0 16px}
    .brief-note{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
    .brief-note strong{display:block;font-size:18px;margin-bottom:8px}
    .image-mosaic{display:grid;grid-template-columns:1fr .72fr;gap:14px}
    .image-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}
    .image-mosaic img:first-child{min-height:420px}
    .image-mosaic .small-stack{display:grid;gap:14px}
    .image-mosaic .small-stack img{min-height:198px}
    .pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .pulse-card{padding:22px;border-radius:22px;border:1px solid var(--line);background:#fff;transition:var(--fast)}
    .pulse-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .pulse-card b{font-size:34px;letter-spacing:-.04em;color:var(--purple-dark);line-height:1}
    .pulse-card span{display:block;margin:8px 0 5px;font-weight:900}
    .pulse-card p{margin:0;color:var(--muted);font-size:13px}
    .editor-picks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
    .pick-card{position:relative;overflow:hidden;border-radius:24px;min-height:330px;background:#ddd;color:#fff;display:flex;align-items:end;box-shadow:var(--shadow)}
    .pick-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.28s}
    .pick-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,18,37,.9),rgba(25,18,37,.2) 60%,rgba(25,18,37,.05))}
    .pick-card:hover img{transform:scale(1.05)}
    .pick-content{position:relative;z-index:1;padding:22px}
    .pick-content h3{font-size:24px;line-height:1.25;margin:12px 0 8px}
    .pick-content p{margin:0;color:#eee8ff;font-size:14px}
    .match-strip{display:grid;gap:14px}
    .match-row{display:grid;grid-template-columns:130px 1fr auto;gap:18px;align-items:center;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:var(--fast)}
    .match-row:hover{border-color:#d7cafa;box-shadow:var(--shadow)}
    .match-time{font-weight:900;color:var(--purple-dark)}
    .match-teams{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .team-pill{padding:9px 13px;border-radius:14px;background:#f7f4f9;font-weight:900}
    .vs{color:var(--muted);font-weight:800}
    .analysis-area{display:grid;grid-template-columns:.78fr 1.22fr;gap:var(--gap)}
    .quote-card{padding:30px;border-radius:28px;background:linear-gradient(145deg,var(--purple-dark),#7f3cb7);color:#fff;position:sticky;top:98px;align-self:start}
    .quote-card h2{font-size:32px;line-height:1.2;margin:12px 0 16px}
    .quote-card p{color:#f2edf8;margin:0}
    .analysis-list{display:grid;gap:14px}
    .analysis-item{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
    .analysis-item h3{margin:0 0 8px;font-size:21px}
    .analysis-item p{margin:0;color:var(--muted)}
    .subscribe-box{border-radius:30px;padding:clamp(26px,5vw,46px);background:linear-gradient(115deg,#272132,#41238f 55%,#df4b9d);color:#fff;display:grid;grid-template-columns:1fr .85fr;gap:var(--gap);align-items:center;overflow:hidden;position:relative}
    .subscribe-box:after{content:"";position:absolute;right:-90px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.23),rgba(255,255,255,0) 67%)}
    .subscribe-box h2{font-size:clamp(30px,4.5vw,48px);line-height:1.15;margin:10px 0 15px;letter-spacing:-.05em}
    .subscribe-box p{color:#f1eaf9;margin:0}
    .subscribe-form{position:relative;z-index:1;display:grid;gap:12px;padding:18px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
    .form-row{display:grid;grid-template-columns:1fr auto;gap:10px}
    input,select,textarea{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff;color:var(--ink);min-width:0}
    textarea{resize:vertical;min-height:110px}
    .form-hint{font-size:12px;color:#e7dcf2}
    .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap)}
    .faq-intro{padding:28px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);align-self:start}
    .faq-intro h2{font-size:34px;line-height:1.2;margin:12px 0}
    .faq-intro p{color:var(--muted);margin:0}
    .faq-list{display:grid;gap:12px}
    .faq-item{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
    .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;border:0;background:#fff;padding:18px 20px;text-align:left;font-weight:900;color:var(--ink)}
    .faq-question span:last-child{color:var(--purple);font-size:22px}
    .faq-answer{display:none;padding:0 20px 20px;color:var(--muted)}
    .faq-item.open{border-color:#d7cafa;box-shadow:0 10px 28px rgba(63,37,105,.08)}
    .faq-item.open .faq-answer{display:block}
    .pager{display:flex;justify-content:center;gap:8px;margin-top:28px}
    .pager a{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-weight:900;color:#5e596c}
    .pager a:hover,.pager a.active{background:#f2edff;color:var(--purple);border-color:#d7cafa}
    footer{background:var(--deep);color:#eee8ff;padding:62px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr .72fr .72fr .72fr;gap:30px;margin-bottom:34px}
    .footer-brand p{color:#c8c0d6;margin:14px 0 0;max-width:420px}
    footer .logo{color:#fff;display:inline-flex}
    .footer-col{display:grid;gap:9px;align-content:start}
    .footer-col h3{margin:0 0 8px;color:#fff;font-size:16px}
    .footer-col a{color:#c8c0d6;font-size:14px}
    .footer-col a:hover{color:#fff}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#b9b0c8;font-size:13px}
    .footer-bottom a:hover{color:#fff}
    @media (max-width:1200px){
      .main-nav{position:relative;overflow-x:auto;scrollbar-width:none}
      .main-nav::-webkit-scrollbar{display:none}
      .nav{gap:12px}
      .main-nav>a{padding:8px 9px}
      .phase{padding-right:8px}
    }
    @media (max-width:992px){
      .container{width:min(var(--max),calc(100% - 34px))}
      .menu-btn{display:grid;place-items:center}
      .main-nav,.nav-actions .btn-secondary{display:none}
      .nav{justify-content:space-between}
      .hero-panel{grid-template-columns:1fr;min-height:auto}
      .hero-board{padding:0 26px 30px}
      .ticker-inner,.pulse-grid{grid-template-columns:1fr 1fr}
      .lead-grid,.brief-grid,.news-layout,.analysis-area,.faq-grid,.subscribe-box{grid-template-columns:1fr}
      .quote-card{position:relative;top:auto}
      .editor-picks{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      body{font-size:15px}
      .section-head{display:block}
      .section-head p{margin-top:10px}
      .hero-copy{padding:30px 22px}
      .hero-copy h1{font-size:40px}
      .hero-board{padding:0 18px 22px}
      .ranking-board{border-radius:22px}
      .board-item{grid-template-columns:34px 1fr;align-items:start}
      .board-score{grid-column:2;text-align:left}
      .ticker-inner,.news-grid,.news-card.feature,.pulse-grid,.editor-picks{grid-template-columns:1fr}
      .filter-bar{align-items:stretch;flex-direction:column}
      .search-box{min-width:0}
      .news-card.feature{display:block}
      .news-card.feature figure{margin-bottom:16px}
      .image-mosaic{grid-template-columns:1fr}
      .match-row{grid-template-columns:1fr;gap:10px}
      .match-teams{align-items:flex-start}
      .form-row{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{display:grid}
    }
    @media (max-width:576px){
      .container{width:min(var(--max),calc(100% - 24px))}
      .page-hero{padding-top:24px}
      .hero-panel{border-radius:24px}
      .hero-copy h1{font-size:34px;letter-spacing:-.045em}
      .hero-copy p{font-size:15px}
      .hero-actions .btn{width:100%}
      .mobile-panel .mobile-links{grid-template-columns:1fr}
      .ticker{margin-top:-18px}
      .ticker-item{padding:16px}
      .timeline-card{margin-left:38px}
      .timeline:before{left:16px}
      .timeline-card:before{left:-29px}
      .subscribe-box,.quote-card,.faq-intro{border-radius:22px}
    }

/* roulang page: category5 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,112px);--fs-title:clamp(34px,5.4vw,66px);--fs-h2:clamp(27px,3.8vw,43px);--fs-h3:clamp(19px,2.1vw,25px);--pad:clamp(18px,3.5vw,34px);--grad:linear-gradient(110deg,var(--purple),var(--pink) 58%,var(--orange))}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--max),calc(100% - 48px));margin:auto}
    .section{padding:var(--section) 0}
    .section.tight{padding:clamp(34px,5vw,62px) 0}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:var(--fs-h2);line-height:1.2;margin:9px 0 0;letter-spacing:0}
    .section-head p{max-width:540px;margin:0;color:var(--muted)}
    .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s ease;white-space:nowrap}
    .btn-primary{color:#fff;background:var(--grad);box-shadow:0 10px 24px rgba(111,71,221,.24)}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
    .btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
    .btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
    .btn-dark{color:#fff;background:#2a2336;border:1px solid rgba(255,255,255,.12)}
    .btn-dark:hover{background:#3a2d4e;transform:translateY(-2px)}
    .btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
    .btn:focus,a:focus,input:focus,textarea:focus,select:focus,button:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
    .badge.live{color:#a62955;background:#fff0f5}
    .badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
    .badge.ready{color:#79520c;background:#fff6d9}
    .badge.replay{color:#076d75;background:#e4f8f8}
    .badge.rank{color:#6238ca;background:#f0eaff}
    .badge.up{color:#087355;background:#e3f8ef}
    .badge.hot{color:#ac4f11;background:#fff0e7}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.92);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
    .site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
    .nav{min-height:76px;display:flex;align-items:center;gap:20px}
    .logo{font-weight:900;font-size:23px;letter-spacing:0;color:var(--deep);white-space:nowrap}
    .logo i{font-style:normal;color:var(--pink)}
    .main-nav{display:flex;align-items:center;gap:4px;flex:1}
    .main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}
    .main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
    .phase{display:flex;gap:5px;margin-left:4px;align-items:center}
    .phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}
    .phase .p1{color:#815b12;background:#fff5d8}
    .phase .p2{color:#fff;background:linear-gradient(110deg,var(--pink),var(--orange))}
    .phase .p3{color:#05717a;background:#e6f9f8}
    .nav-actions{display:flex;align-items:center;gap:8px}
    .search{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}
    .menu-btn{display:none;border:0;background:transparent;font-size:24px;color:var(--purple)}
    .mobile-panel{display:none}
    .breadcrumb{font-size:13px;color:#897f99;margin-bottom:18px}
    .breadcrumb a{color:var(--purple);font-weight:800}
    .hero-live{padding:44px 0 34px;background:linear-gradient(135deg,#f8f5ff 0%,#fff8fb 58%,#fff 100%);overflow:hidden}
    .hero-shell{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--gap);align-items:stretch}
    .hero-panel{background:linear-gradient(145deg,#2b2238,#3f2867 58%,#2a2336);border-radius:32px;padding:clamp(26px,4vw,46px);color:#fff;position:relative;overflow:hidden;min-height:530px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-lg)}
    .hero-panel:before{content:"";position:absolute;inset:auto -90px -100px auto;width:320px;height:320px;background:radial-gradient(circle,rgba(223,75,157,.52),rgba(223,75,157,0) 66%);pointer-events:none}
    .hero-panel h1{position:relative;margin:18px 0 16px;font-size:var(--fs-title);line-height:1.08;letter-spacing:0}
    .hero-panel p{position:relative;color:#eee7fb;margin:0;max-width:620px;font-size:17px}
    .hero-actions{position:relative;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .hero-meta{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
    .mini-stat{padding:15px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:18px}
    .mini-stat b{display:block;font-size:24px;line-height:1.15}
    .mini-stat span{font-size:12px;color:#d9d0e7}
    .live-stage{background:#fff;border:1px solid var(--line);border-radius:32px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:auto 1fr}
    .stage-cover{position:relative;min-height:310px;background:#2b2336}
    .stage-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
    .stage-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,27,.06),rgba(20,16,27,.74))}
    .play-button{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:1px solid rgba(255,255,255,.46);background:rgba(255,255,255,.22);backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff;font-size:32px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
    .stage-labels{position:absolute;z-index:2;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;gap:10px;align-items:start}
    .stage-caption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;color:#fff}
    .stage-caption h2{margin:8px 0 4px;font-size:28px;line-height:1.2;letter-spacing:0}
    .stage-caption p{margin:0;color:#efe9f7}
    .scoreboard{padding:24px;display:grid;gap:12px}
    .score-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px;border-radius:18px;background:#fbf9fd;border:1px solid var(--line)}
    .team{text-align:center;font-weight:900}
    .score{font-weight:900;color:var(--purple);font-size:22px}
    .filter-band{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(63,37,105,.07)}
    .filter-band a{padding:9px 14px;border-radius:999px;background:#f8f5fb;color:#595263;font-size:14px;font-weight:800}
    .filter-band a:hover,.filter-band a.active{background:var(--purple);color:#fff}
    .program-wrap{overflow:auto;padding-bottom:6px}
    .program-track{display:grid;grid-template-columns:repeat(6,230px);gap:14px;min-width:max-content}
    .program-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 10px 26px rgba(63,37,105,.06);transition:.22s}
    .program-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d6c9fb}
    .program-card time{font-size:13px;color:var(--muted);font-weight:800}
    .program-card h3{font-size:18px;line-height:1.35;margin:9px 0 8px}
    .program-card p{font-size:14px;color:var(--muted);margin:0}
    .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start}
    .dark-card{background:linear-gradient(145deg,#2b2336,#463064);color:#fff;border-radius:30px;padding:var(--pad);box-shadow:var(--shadow-lg)}
    .dark-card p{color:#e8deef}
    .signal-list{display:grid;gap:14px}
    .signal-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;transition:.22s}
    .signal-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
    .signal-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#f0eaff;color:var(--purple);font-size:22px;font-weight:900}
    .signal-item h3{margin:0;font-size:18px}
    .signal-item p{margin:3px 0 0;color:var(--muted);font-size:14px}
    .replay-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap)}
    .featured-replay{background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow);transition:.22s}
    .featured-replay:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
    .thumb{position:relative;aspect-ratio:16/9;background:#2b2336;overflow:hidden}
    .thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
    .featured-replay:hover .thumb img,.replay-card:hover .thumb img{transform:scale(1.04)}
    .thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,27,0),rgba(20,16,27,.55))}
    .duration{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(20,16,27,.78);color:#fff;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}
    .thumb .play-button{width:58px;height:58px;font-size:24px}
    .replay-body{padding:24px}
    .replay-body h3{font-size:25px;line-height:1.26;margin:10px 0}
    .replay-body p{color:var(--muted);margin:0 0 18px}
    .side-replays{display:grid;gap:14px}
    .replay-card{display:grid;grid-template-columns:150px 1fr;gap:15px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.22s}
    .replay-card:hover{box-shadow:var(--shadow);border-color:#d6c9fb;transform:translateY(-3px)}
    .replay-card .thumb{aspect-ratio:auto;min-height:132px}
    .replay-card .replay-body{padding:16px}
    .replay-card h3{font-size:17px;margin:7px 0;line-height:1.35}
    .replay-card p{font-size:13px;margin:0;color:var(--muted)}
    .timeline{position:relative;display:grid;gap:16px}
    .timeline:before{content:"";position:absolute;left:18px;top:4px;bottom:4px;width:2px;background:#eadff3}
    .timeline-item{position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px}
    .dot{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 0 8px #f5efff;z-index:1;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900}
    .timeline-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 10px 24px rgba(63,37,105,.06)}
    .timeline-box h3{margin:0 0 5px;font-size:18px}
    .timeline-box p{margin:0;color:var(--muted);font-size:14px}
    .analysis-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:var(--pad);box-shadow:var(--shadow)}
    .chart{height:230px;border-radius:22px;background:linear-gradient(180deg,#fbf8ff,#fff);border:1px solid var(--line);padding:20px;display:flex;align-items:end;gap:14px}
    .bar{flex:1;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,var(--purple),#d8caff);min-height:35px;position:relative}
    .bar:nth-child(2){height:66%;background:linear-gradient(180deg,var(--pink),#ffd4e7)}
    .bar:nth-child(3){height:82%;background:linear-gradient(180deg,var(--cyan),#ccf4f5)}
    .bar:nth-child(4){height:54%;background:linear-gradient(180deg,var(--orange),#ffe0d2)}
    .bar:nth-child(5){height:91%}
    .bar:nth-child(6){height:62%;background:linear-gradient(180deg,var(--green),#d5f2e7)}
    .bar span{position:absolute;left:50%;top:-27px;transform:translateX(-50%);font-size:12px;font-weight:900;color:var(--muted)}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .scene-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 10px 26px rgba(63,37,105,.06);transition:.22s}
    .scene-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .scene-card h3{font-size:20px;margin:13px 0 8px}
    .scene-card p{margin:0;color:var(--muted)}
    .media-band{background:linear-gradient(135deg,#fff7fb,#f4f0ff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .cover-story{display:grid;grid-template-columns:1fr .82fr;gap:var(--gap);align-items:center}
    .cover-frame{border-radius:30px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
    .cover-frame img{width:100%;height:430px;object-fit:cover}
    .cover-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,27,0),rgba(20,16,27,.42))}
    .story-copy h2{font-size:var(--fs-h2);line-height:1.18;margin:12px 0}
    .story-copy p{color:var(--muted)}
    .faq-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:var(--gap)}
    .faq-list{display:grid;gap:12px}
    details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px 20px;box-shadow:0 10px 22px rgba(63,37,105,.05)}
    summary{cursor:pointer;font-weight:900;list-style:none}
    summary::-webkit-details-marker{display:none}
    details[open]{border-color:#d8ccfa;box-shadow:var(--shadow)}
    details p{margin:10px 0 0;color:var(--muted)}
    .subscribe-box{background:linear-gradient(145deg,#2b2336,#4a2d72);border-radius:30px;padding:var(--pad);color:#fff;position:relative;overflow:hidden}
    .subscribe-box:after{content:"";position:absolute;right:-80px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(242,120,75,.42),rgba(242,120,75,0) 68%)}
    .subscribe-box>*{position:relative;z-index:1}
    .subscribe-form{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:18px}
    .field{width:100%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:13px 16px}
    .field::placeholder{color:#ded5e8}
    .cta{padding:clamp(42px,6vw,68px);border-radius:34px;background:linear-gradient(115deg,var(--purple),var(--pink) 56%,var(--orange));color:#fff;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
    .cta:before{content:"";position:absolute;right:12%;top:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.18)}
    .cta>*{position:relative;z-index:1}
    .cta h2{font-size:clamp(28px,4vw,44px);line-height:1.18;margin:0 0 10px}
    .cta p{margin:0;color:#fff4fb;max-width:680px}
    footer{background:#221c2b;color:#eee8f6;padding:60px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:28px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
    .footer-brand p{color:#cfc5d9;margin:12px 0 0}
    footer .logo{color:#fff}
    .footer-col h3{font-size:16px;margin:0 0 12px}
    .footer-col a{display:block;color:#cfc5d9;margin:7px 0;font-size:14px}
    .footer-col a:hover{color:#fff}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#c2b8cc;font-size:13px;padding-top:20px}
    .footer-bottom a:hover{color:#fff}
    @media (max-width:1200px){
      .main-nav>a{padding:8px 7px;font-size:13px}
      .phase{display:none}
      .container{width:min(var(--max),calc(100% - 36px))}
    }
    @media (max-width:992px){
      .menu-btn{display:block}
      .main-nav{display:none}
      .nav-actions .btn{display:none}
      .mobile-panel{display:none;position:fixed;inset:76px 18px auto 18px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);padding:18px;z-index:40}
      .mobile-panel.open{display:block}
      .mobile-panel a{display:block;padding:12px 14px;border-radius:14px;font-weight:800;color:#514d5d}
      .mobile-panel a.active,.mobile-panel a:hover{background:#f2edff;color:var(--purple)}
      .mobile-phases{display:flex;gap:8px;overflow:auto;padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
      .mobile-phases a{white-space:nowrap;padding:8px 12px;border-radius:999px;background:#f8f4ff;font-size:13px}
      .hero-shell,.split,.replay-grid,.cover-story,.faq-grid,.cta{grid-template-columns:1fr}
      .hero-panel{min-height:auto}
      .footer-grid{grid-template-columns:1fr 1fr}
      .cta{padding:32px}
    }
    @media (max-width:768px){
      body{font-size:15px}
      .container{width:min(var(--max),calc(100% - 28px))}
      .section-head{display:block}
      .section-head p{margin-top:10px}
      .hero-meta,.grid-3{grid-template-columns:1fr}
      .stage-cover{min-height:250px}
      .score-row{grid-template-columns:1fr;gap:4px;text-align:center}
      .replay-card{grid-template-columns:1fr}
      .replay-card .thumb{aspect-ratio:16/9}
      .subscribe-form{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{display:block}
      .cover-frame img{height:300px}
    }
    @media (max-width:576px){
      .nav{min-height:68px}
      .logo{font-size:21px}
      .hero-live{padding-top:24px}
      .hero-panel,.live-stage,.dark-card,.analysis-card,.subscribe-box,.cta{border-radius:24px}
      .hero-panel h1{font-size:38px}
      .hero-actions{display:grid}
      .btn{width:100%;padding:12px 16px}
      .program-track{grid-template-columns:repeat(6,210px)}
      .filter-band{overflow:auto;flex-wrap:nowrap}
      .filter-band a{white-space:nowrap}
    }

/* roulang page: category6 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,112px)}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--max),calc(100% - 48px));margin:auto}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
    .section{padding:var(--section) 0}
    .section.tight{padding-top:38px}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:clamp(27px,4vw,42px);line-height:1.2;margin:9px 0 0;letter-spacing:-.035em}
    .section-head p{max-width:530px;margin:0;color:var(--muted)}
    .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s ease;white-space:nowrap}
    .btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
    .btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
    .btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
    .btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
    .btn:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
    .badge.live{color:#a62955;background:#fff0f5}
    .badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
    .badge.ready{color:#79520c;background:#fff6d9}
    .badge.replay{color:#076d75;background:#e4f8f8}
    .badge.rank{color:#6238ca;background:#f0eaff}
    .badge.up{color:#087355;background:#e3f8ef}
    .badge.hot{color:#ac4f11;background:#fff0e7}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.92);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
    .site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
    .nav{min-height:76px;display:flex;align-items:center;gap:20px}
    .logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}
    .logo i{font-style:normal;color:var(--pink)}
    .main-nav{display:flex;align-items:center;gap:4px;flex:1}
    .main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}
    .main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
    .phase{display:flex;gap:4px;margin-left:4px;white-space:nowrap}
    .phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}
    .phase .p1{color:#7b5208;background:#fff4ce}.phase .p2{color:#a62955;background:#fff0f5}.phase .p3{color:#076d75;background:#e4f8f8}
    .nav-actions{display:flex;align-items:center;gap:8px}
    .search{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}
    .menu-btn{display:none;border:0;background:transparent;font-size:24px;color:var(--purple)}
    .hero-sub{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8f5ff 0%,#fff7fa 62%,#fff 100%);padding:42px 0 28px}
    .breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:22px;flex-wrap:wrap}
    .breadcrumb a:hover{color:var(--purple)}
    .magazine-hero{display:grid;grid-template-columns:.88fr 1.12fr;gap:var(--gap);align-items:stretch}
    .hero-copy{padding:28px 0 34px}
    .hero-copy h1{font-size:clamp(38px,6vw,72px);line-height:1.03;margin:12px 0 18px;letter-spacing:-.055em}
    .hero-copy p{font-size:18px;color:#5b5668;max-width:620px;margin:0 0 24px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
    .guide-index{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:600px}
    .guide-index a{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;color:#514d5d;font-weight:800;font-size:13px;transition:.2s}
    .guide-index a:hover{border-color:#d4c4fb;box-shadow:var(--shadow);transform:translateY(-2px);color:var(--purple)}
    .hero-art{position:relative;min-height:520px;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-lg);background:#ddd}
    .hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
    .hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,33,50,.06),rgba(39,33,50,.74))}
    .floating-note{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;color:#fff}
    .floating-note h2{margin:8px 0 6px;font-size:28px;line-height:1.18}
    .floating-note p{margin:0;color:#f1eafa}
    .meta-row{display:flex;gap:8px;flex-wrap:wrap}
    .intro-band{background:var(--deep);color:#fff;border-radius:34px;padding:36px;display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:center}
    .intro-band h2{margin:8px 0;font-size:34px;line-height:1.2}
    .intro-band p{color:#eee8ff;margin:0}
    .intro-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .point{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:18px}
    .point strong{display:block;font-size:28px;line-height:1.1;color:#fff}
    .point span{font-size:13px;color:#ded4f3}
    .article-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);align-items:start}
    .longread{background:#fff;border:1px solid var(--line);border-radius:30px;padding:36px;box-shadow:var(--shadow)}
    .longread h2{font-size:34px;line-height:1.22;margin:0 0 16px}
    .longread h3{font-size:22px;margin:30px 0 8px}
    .longread p{color:#5b5668;margin:0 0 17px}
    .side-stack{display:grid;gap:16px}
    .side-card,.topic-card,.step-card,.check-card,.faq-item,.reco-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 10px 26px rgba(63,37,105,.06);transition:.22s}
    .side-card:hover,.topic-card:hover,.step-card:hover,.check-card:hover,.reco-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d9cbfb}
    .side-card h3,.topic-card h3,.step-card h3,.check-card h3,.reco-card h3{margin:10px 0 8px;line-height:1.35}
    .side-card p,.topic-card p,.step-card p,.check-card p,.reco-card p{margin:0;color:var(--muted);font-size:14px}
    .cover-card{padding:0;overflow:hidden}
    .cover-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
    .cover-card .inner{padding:20px}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .step-card{position:relative;min-height:230px}
    .step-no{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-weight:900;margin-bottom:18px}
    .topic-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:stretch}
    .topic-feature{position:relative;border-radius:32px;overflow:hidden;min-height:530px;color:#fff;box-shadow:var(--shadow-lg)}
    .topic-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .topic-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,32,43,.04),rgba(34,32,43,.78))}
    .topic-feature .content{position:absolute;z-index:2;left:28px;right:28px;bottom:28px}
    .topic-feature h2{font-size:36px;line-height:1.15;margin:10px 0}
    .topic-feature p{color:#f6eef8;margin:0}
    .topic-list{display:grid;gap:16px}
    .topic-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
    .topic-card .num{font-weight:900;color:var(--pink);font-size:28px}
    .topic-card a{color:var(--purple);font-weight:900}
    .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
    .check-list{display:grid;gap:12px;margin-top:18px}
    .check-line{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
    .check-line b{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#e5f9f8;color:var(--cyan)}
    .timeline{position:relative;display:grid;gap:16px}
    .time-item{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start}
    .time-label{font-weight:900;color:var(--purple)}
    .time-card{border:1px solid var(--line);background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 26px rgba(63,37,105,.05)}
    .time-card h3{margin:0 0 6px}
    .time-card p{margin:0;color:var(--muted)}
    .data-panel{background:linear-gradient(135deg,#fff,#fbf7ff);border:1px solid var(--line);border-radius:34px;padding:30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
    .data-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}
    .data-card strong{display:block;font-size:36px;line-height:1;color:var(--purple-dark);letter-spacing:-.03em}
    .data-card span{color:var(--muted);font-size:13px}
    .reco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .reco-card{padding:0;overflow:hidden}
    .reco-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
    .reco-card .inner{padding:20px}
    .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gap)}
    .faq-list{display:grid;gap:12px}
    .faq-item{padding:0;overflow:hidden}
    .faq-q{width:100%;border:0;background:#fff;text-align:left;padding:20px 22px;font-weight:900;color:var(--ink);display:flex;justify-content:space-between;gap:14px}
    .faq-q span:last-child{color:var(--purple);font-size:20px}
    .faq-a{display:none;padding:0 22px 22px;color:var(--muted)}
    .faq-item.open .faq-a{display:block}
    .cta{background:linear-gradient(135deg,var(--purple-dark),var(--purple) 52%,var(--pink));color:#fff;border-radius:36px;padding:40px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;overflow:hidden;position:relative}
    .cta:after{content:"";position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 68%)}
    .cta h2{font-size:36px;line-height:1.18;margin:0 0 10px}
    .cta p{margin:0;color:#eee8ff;max-width:720px}
    .subscribe-form{display:flex;gap:10px;position:relative;z-index:1}
    .subscribe-form input{min-width:260px;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:13px 16px;background:rgba(255,255,255,.95);color:var(--ink)}
    .form-tip{font-size:13px;color:#f6e8ff;margin-top:8px}
    footer{background:var(--deep);color:#eee8ff;padding:54px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
    .footer-brand p{color:#cfc5dc;margin:14px 0 0;max-width:350px}
    .footer-col h3{font-size:16px;color:#fff;margin:0 0 12px}
    .footer-col a{display:block;color:#cfc5dc;margin:8px 0;font-size:14px}
    .footer-col a:hover{color:#fff}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;gap:18px;color:#c9bfd6;font-size:13px;flex-wrap:wrap}
    .footer-bottom a:hover{color:#fff}
    @media (max-width:1200px){.main-nav>a{padding:8px 7px;font-size:13px}.phase{display:none}.nav-actions .btn{display:none}}
    @media (max-width:992px){.menu-btn{display:block}.main-nav{position:fixed;left:18px;right:18px;top:82px;display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-lg)}.main-nav.open{display:flex}.phase{display:flex;overflow:auto}.magazine-hero,.intro-band,.article-grid,.topic-layout,.check-grid,.faq-wrap{grid-template-columns:1fr}.steps,.reco-grid,.data-panel,.intro-points{grid-template-columns:1fr 1fr}.hero-art{min-height:420px}.footer-grid{grid-template-columns:1fr 1fr}}
    @media (max-width:768px){.container{width:min(100% - 32px,var(--max))}.section-head{display:block}.guide-index,.steps,.reco-grid,.data-panel,.intro-points{grid-template-columns:1fr}.time-item{grid-template-columns:1fr;gap:8px}.topic-card{grid-template-columns:1fr}.cta{grid-template-columns:1fr;padding:28px}.subscribe-form{flex-direction:column}.subscribe-form input{min-width:0;width:100%}.footer-grid{grid-template-columns:1fr}.hero-copy h1{font-size:40px}.intro-band,.longread{padding:24px}.hero-art{min-height:360px}}
    @media (max-width:576px){.nav{min-height:66px}.logo{font-size:21px}.search{display:none}.hero-sub{padding-top:28px}.hero-actions .btn{width:100%}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}}

/* roulang page: category4 */
:root{--purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;--green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;--paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;--shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);--max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,112px);--fs-title:clamp(34px,5vw,66px);--fs-h2:clamp(28px,4vw,43px);--fs-h3:clamp(19px,2.2vw,25px);--fw-heavy:900;--fw-bold:800;--radius-img:22px;--input-radius:16px;--ease:.22s ease}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:0}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--max),calc(100% - 48px));margin:auto}
    .section{padding:var(--section) 0}
    .section-tight{padding:clamp(42px,6vw,78px) 0}
    .eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:var(--fs-h2);line-height:1.2;margin:9px 0 0;font-weight:900}
    .section-head p{max-width:540px;margin:0;color:var(--muted)}
    .btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:var(--ease);white-space:nowrap}
    .btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
    .btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
    .btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
    .btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
    .btn-text:hover{color:var(--pink)}
    .btn:focus,a:focus,input:focus,textarea:focus,select:focus,button:focus{outline:3px solid rgba(17,174,184,.28);outline-offset:3px}
    .btn:active{transform:translateY(0) scale(.98)}
    .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
    .badge.live{color:#a62955;background:#fff0f5}
    .badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#e54771;box-shadow:0 0 0 4px rgba(229,71,113,.13)}
    .badge.ready{color:#79520c;background:#fff6d9}
    .badge.replay{color:#076d75;background:#e4f8f8}
    .badge.rank{color:#6238ca;background:#f0eaff}
    .badge.up{color:#087355;background:#e3f8ef}
    .badge.hot{color:#ac4f11;background:#fff0e7}
    .badge.down{color:#8c345b;background:#ffeaf2}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.92);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
    .site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
    .nav{min-height:76px;display:flex;align-items:center;gap:20px}
    .logo{font-weight:900;font-size:23px;color:var(--deep);white-space:nowrap}
    .logo i{font-style:normal;color:var(--pink)}
    .main-nav{display:flex;align-items:center;gap:4px;flex:1}
    .main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap;transition:var(--ease)}
    .main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
    .phase{display:flex;gap:5px;margin-left:4px;padding-left:8px;border-left:1px solid var(--line)}
    .phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px;transition:var(--ease)}
    .phase .p1{color:#79520c;background:#fff6d9}
    .phase .p2{color:#a62955;background:#fff0f5}
    .phase .p3{color:#076d75;background:#e4f8f8}
    .phase a:hover{filter:saturate(1.2);transform:translateY(-1px)}
    .nav-actions{display:flex;align-items:center;gap:8px}
    .search{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px;transition:var(--ease)}
    .search:hover{border-color:var(--purple);background:#f7f3ff}
    .menu-btn{display:none;border:0;background:transparent;font-size:24px;color:var(--purple);width:40px;height:40px;border-radius:12px}
    .mobile-panel{display:none}
    .breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#7e7789;font-size:14px;margin-bottom:20px}
    .breadcrumb a{color:var(--purple);font-weight:700}
    .hero-data{position:relative;overflow:hidden;background:linear-gradient(135deg,#f8f5ff 0%,#fff8fb 58%,#fff 100%);padding:48px 0 42px}
    .hero-data:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(111,71,221,.07) 1px,transparent 1px),linear-gradient(0deg,rgba(223,75,157,.06) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(180deg,#000,transparent 86%)}
    .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--gap);align-items:center}
    .hero-copy h1{font-size:var(--fs-title);line-height:1.08;margin:14px 0 18px;font-weight:900;color:var(--deep)}
    .hero-copy p{max-width:720px;margin:0 0 24px;color:#5f586e;font-size:18px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
    .hero-board{position:relative;border-radius:32px;padding:18px;background:#fff;border:1px solid rgba(232,227,237,.9);box-shadow:var(--shadow-lg)}
    .hero-board img{width:100%;height:310px;object-fit:cover;border-radius:24px}
    .board-overlay{position:absolute;left:34px;right:34px;bottom:34px;border-radius:22px;padding:20px;background:rgba(39,33,50,.86);color:#fff;backdrop-filter:blur(12px)}
    .board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
    .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .metric-row strong{display:block;font-size:28px;line-height:1.1}
    .metric-row span{display:block;color:#d8d2e5;font-size:12px}
    .summary-strip{margin-top:-18px;position:relative;z-index:2}
    .summary-grid{display:grid;grid-template-columns:1.2fr repeat(3,.75fr);gap:14px}
    .summary-card{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:var(--ease)}
    .summary-card:hover{transform:translateY(-4px);border-color:#d8cdf7}
    .summary-card p{margin:0;color:var(--muted);font-size:14px}
    .summary-card strong{display:block;font-size:clamp(24px,3vw,36px);line-height:1.2;margin:7px 0;color:var(--deep)}
    .summary-card.featured{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}
    .summary-card.featured p{color:#f5eefd}
    .dashboard-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gap);align-items:start}
    .panel{border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .panel-pad{padding:28px}
    .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
    .filter-chip{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;font-weight:800;color:#5d566a;transition:var(--ease)}
    .filter-chip:hover,.filter-chip.active{border-color:var(--purple);background:#f2edff;color:var(--purple)}
    .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
    .kpi{padding:20px;border-radius:20px;background:var(--mist);border:1px solid #eee8f3}
    .kpi strong{display:block;font-size:31px;line-height:1.1;color:var(--purple-dark)}
    .kpi span{display:block;margin-top:7px;color:var(--muted);font-size:13px}
    .chart{height:286px;display:flex;align-items:end;gap:12px;padding:24px;background:linear-gradient(180deg,#fff,#faf7ff);border-top:1px solid var(--line)}
    .bar{flex:1;min-width:32px;border-radius:14px 14px 8px 8px;background:linear-gradient(180deg,var(--pink),var(--purple));position:relative;transition:var(--ease)}
    .bar:hover{filter:saturate(1.16);transform:translateY(-4px)}
    .bar span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--purple)}
    .bar small{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font-size:12px;color:var(--muted)}
    .side-list{display:grid;gap:14px}
    .data-note{padding:18px;border-radius:18px;background:#fbf8ff;border:1px solid #ede4fb}
    .data-note h3{font-size:18px;margin:0 0 8px}
    .data-note p{margin:0;color:var(--muted);font-size:14px}
    .ranking-band{background:var(--deep);color:#fff;position:relative;overflow:hidden}
    .ranking-band:before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-2.webp') center/cover;opacity:.18}
    .ranking-band .container{position:relative}
    .ranking-band .section-head p{color:#d8d1e2}
    .ranking-band .eyebrow{color:#ffb6d2}
    .rank-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap)}
    .rank-hero{border-radius:30px;padding:34px;background:linear-gradient(145deg,rgba(111,71,221,.72),rgba(223,75,157,.58));border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 62px rgba(0,0,0,.16)}
    .rank-hero h3{font-size:32px;line-height:1.24;margin:16px 0 12px}
    .rank-hero p{color:#f2edf8;margin:0 0 22px}
    .rank-list{display:grid;gap:12px}
    .rank-item{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:17px;border-radius:19px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);transition:var(--ease)}
    .rank-item:hover{background:rgba(255,255,255,.16);transform:translateX(4px)}
    .rank-no{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--purple);font-weight:900}
    .rank-item strong{display:block}
    .rank-item span{display:block;color:#d8d1e2;font-size:13px}
    .trend-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
    .trend-card{grid-column:span 4;padding:26px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:var(--ease)}
    .trend-card:hover{transform:translateY(-5px);border-color:#d9cff4}
    .trend-card.large{grid-column:span 8;display:grid;grid-template-columns:1fr .82fr;gap:22px;align-items:center;background:linear-gradient(135deg,#fff,#f7f2ff)}
    .trend-card h3{margin:12px 0 8px;font-size:var(--fs-h3);line-height:1.35}
    .trend-card p{margin:0;color:var(--muted)}
    .trend-visual{min-height:220px;border-radius:22px;background:#fff;border:1px solid var(--line);padding:22px;display:grid;align-content:end;gap:12px}
    .line-track{height:12px;border-radius:999px;background:#eee7f6;overflow:hidden}
    .line-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink))}
    .story-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:stretch}
    .story-block img{width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:30px;box-shadow:var(--shadow-lg)}
    .story-text{padding:36px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
    .story-text h2{font-size:var(--fs-h2);line-height:1.2;margin:12px 0 16px}
    .story-text p{color:#5f586e;margin:0 0 16px}
    .check-list{display:grid;gap:12px;margin-top:22px}
    .check-list li{list-style:none;padding:13px 14px 13px 42px;border-radius:16px;background:#faf7ff;border:1px solid #eee7fb;position:relative}
    .check-list li:before{content:"✓";position:absolute;left:16px;top:12px;color:var(--green);font-weight:900}
    .duel-section{background:linear-gradient(180deg,#fff,var(--mist))}
    .duel-grid{display:grid;grid-template-columns:1fr .82fr;gap:var(--gap);align-items:start}
    .duel-card{padding:28px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
    .team-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:22px 0}
    .team-box{padding:20px;border-radius:22px;background:#fbf8ff;border:1px solid #efe7fa}
    .team-box strong{font-size:22px;display:block}
    .team-box span{color:var(--muted);font-size:13px}
    .vs{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--pink));color:#fff;font-weight:900}
    .duel-metrics{display:grid;gap:12px}
    .metric-line{display:grid;grid-template-columns:82px 1fr 48px;gap:12px;align-items:center;color:#5c5569;font-size:14px}
    .metric-line i{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--pink))}
    .scenario-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .scenario-card{padding:24px;border-radius:24px;border:1px solid var(--line);background:#fff;transition:var(--ease)}
    .scenario-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
    .scenario-card .num{font-size:38px;line-height:1;color:var(--purple);font-weight:900}
    .scenario-card h3{font-size:20px;margin:14px 0 8px}
    .scenario-card p{margin:0;color:var(--muted);font-size:14px}
    .process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .step{position:relative;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line)}
    .step:after{content:"";position:absolute;right:-11px;top:34px;width:20px;height:2px;background:#dacff0}
    .step:last-child:after{display:none}
    .step b{display:grid;place-items:center;width:36px;height:36px;border-radius:13px;background:#f0eaff;color:var(--purple);margin-bottom:12px}
    .step h3{font-size:18px;margin:0 0 6px}
    .step p{margin:0;color:var(--muted);font-size:14px}
    .image-row{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap)}
    .cover-card{position:relative;min-height:360px;border-radius:30px;overflow:hidden;box-shadow:var(--shadow-lg)}
    .cover-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
    .cover-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(39,33,50,.82))}
    .cover-caption{position:absolute;z-index:1;left:28px;right:28px;bottom:26px;color:#fff}
    .cover-caption h3{font-size:28px;margin:10px 0 8px}
    .cover-caption p{margin:0;color:#efe9f7}
    .mini-cards{display:grid;gap:16px}
    .mini-card{padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
    .mini-card h3{margin:10px 0 6px;font-size:20px}
    .mini-card p{margin:0;color:var(--muted);font-size:14px}
    .faq-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:var(--gap);align-items:start}
    .faq-intro{padding:30px;border-radius:30px;background:linear-gradient(145deg,#f3edff,#fff5f9);border:1px solid #eadff8}
    .faq-intro h2{font-size:var(--fs-h2);line-height:1.2;margin:12px 0}
    .faq-intro p{color:var(--muted);margin:0}
    .faq-list{display:grid;gap:12px}
    .faq-item{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
    .faq-q{width:100%;border:0;background:#fff;text-align:left;padding:18px 52px 18px 20px;font-weight:900;color:var(--deep);position:relative}
    .faq-q:after{content:"+";position:absolute;right:20px;top:15px;color:var(--purple);font-size:24px}
    .faq-item.open .faq-q:after{content:"−"}
    .faq-a{display:none;padding:0 20px 20px;color:var(--muted)}
    .faq-item.open .faq-a{display:block}
    .cta{padding:clamp(48px,7vw,82px) 0;background:linear-gradient(135deg,var(--purple-dark),var(--purple) 48%,var(--pink));color:#fff;position:relative;overflow:hidden}
    .cta:before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-3.webp') center/cover;opacity:.13}
    .cta .container{position:relative;display:grid;grid-template-columns:1fr .72fr;gap:var(--gap);align-items:center}
    .cta h2{font-size:clamp(30px,4.3vw,48px);line-height:1.2;margin:8px 0 14px}
    .cta p{color:#f1eafa;margin:0;max-width:640px}
    .subscribe-box{padding:24px;border-radius:24px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px)}
    .form-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}
    input,select,textarea{width:100%;border:1px solid var(--line);border-radius:var(--input-radius);padding:13px 14px;background:#fff;color:var(--ink);transition:var(--ease)}
    input:hover,select:hover,textarea:hover{border-color:#d7cafa}
    .subscribe-box input{border-color:rgba(255,255,255,.28)}
    .hint{font-size:12px;color:#eadff8;margin-top:10px}
    footer{background:#17131f;color:#e9e3ef;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;margin-bottom:34px}
    .footer-brand p{color:#bdb5c8;margin:14px 0 0}
    .footer-col h3{font-size:16px;margin:0 0 14px;color:#fff}
    .footer-col a{display:block;color:#c9c1d5;margin:8px 0;transition:var(--ease)}
    .footer-col a:hover{color:#fff;transform:translateX(3px)}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#bdb5c8;font-size:13px}
    .footer-bottom a:hover{color:#fff}
    @media (max-width:1200px){
      .main-nav{position:fixed;left:0;right:0;top:76px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:14px 24px;display:none;flex-wrap:wrap;max-height:calc(100vh - 76px);overflow:auto}
      .main-nav.open{display:flex}
      .menu-btn{display:inline-grid;place-items:center}
      .phase{width:100%;border-left:0;padding-left:0;margin-left:0;overflow:auto}
      .nav-actions .btn{display:none}
    }
    @media (max-width:992px){
      .hero-grid,.dashboard-wrap,.rank-layout,.story-block,.duel-grid,.faq-grid,.cta .container,.image-row{grid-template-columns:1fr}
      .summary-grid{grid-template-columns:repeat(2,1fr)}
      .kpi-grid,.scenario-grid{grid-template-columns:repeat(2,1fr)}
      .trend-card,.trend-card.large{grid-column:span 12}
      .trend-card.large{grid-template-columns:1fr}
      .process{grid-template-columns:repeat(2,1fr)}
      .step:after{display:none}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--max))}
      .nav{min-height:68px}
      .main-nav{top:68px;padding:14px 16px}
      .section-head{display:block}
      .hero-data{padding-top:32px}
      .hero-copy p{font-size:16px}
      .hero-board img{height:260px}
      .board-overlay{position:static;margin-top:12px;background:var(--deep)}
      .metric-row{grid-template-columns:1fr}
      .summary-grid,.kpi-grid,.scenario-grid,.process,.footer-grid{grid-template-columns:1fr}
      .team-row{grid-template-columns:1fr;gap:10px}
      .vs{margin:auto}
      .duel-card,.story-text,.rank-hero{padding:24px}
      .hero-actions,.form-row{grid-template-columns:1fr;display:grid}
      .hero-actions .btn{width:100%}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin:7px 0}
    }
    @media (max-width:576px){
      body{font-size:15px}
      .logo{font-size:21px}
      .nav{gap:10px}
      .search{display:none}
      .main-nav>a{width:calc(50% - 4px);padding:10px 8px;font-size:13px}
      .phase{padding-top:6px}
      .hero-copy h1{font-size:38px}
      .hero-board{padding:12px;border-radius:22px}
      .hero-board img{height:215px;border-radius:16px}
      .summary-card{padding:18px}
      .panel-pad{padding:20px}
      .chart{height:230px;gap:7px;padding:18px 12px}
      .bar{min-width:18px}
      .bar span{font-size:10px}
      .rank-item{grid-template-columns:44px 1fr}
      .rank-item .badge{grid-column:2}
      .cover-card{min-height:310px}
      .cover-caption{left:20px;right:20px;bottom:19px}
      .cover-caption h3{font-size:23px}
      .cta .container{gap:24px}
    }

/* roulang page: category7 */
:root{
 --purple:#6f47dd;--purple-dark:#41238f;--pink:#df4b9d;--orange:#f2784b;--cyan:#11aeb8;
 --green:#158b67;--yellow:#c77b10;--ink:#22202b;--muted:#706d7d;--line:#e8e3ed;
 --paper:#fffdfd;--mist:#f7f4f9;--deep:#272132;--radius:24px;--radius-sm:14px;
 --shadow:0 14px 36px rgba(63,37,105,.10);--shadow-lg:0 24px 60px rgba(59,27,105,.17);
 --max:1180px;--gap:clamp(18px,3vw,34px);--section:clamp(58px,8vw,100px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.78;letter-spacing:.02em}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
button,input,textarea,select{font:inherit} button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,253,253,.94);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{box-shadow:0 7px 24px rgba(42,28,68,.08);border-color:var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:20px}
.logo{font-weight:900;font-size:23px;letter-spacing:-.08em;color:var(--deep);white-space:nowrap}
.logo i{font-style:normal;color:var(--pink)}
.main-nav{display:flex;align-items:center;gap:3px;flex:1}
.main-nav>a{font-size:14px;font-weight:700;color:#514d5d;padding:9px 10px;border-radius:9px;white-space:nowrap}
.main-nav>a:hover,.main-nav>a.active{color:var(--purple);background:#f2edff}
.phase{display:flex;gap:4px;margin-left:auto;padding-left:8px}
.phase a{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px}
.phase .p1{color:#79520c;background:#fff6d9}.phase .p2{color:#a62955;background:#fff0f5}.phase .p3{color:#076d75;background:#e4f8f8}
.nav-actions{display:flex;align-items:center;gap:8px}
.search{width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--purple);font-size:17px}
.menu-btn{display:none;border:0;background:transparent;font-size:25px;color:var(--purple)}
.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;font-weight:800;transition:.22s;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(110deg,var(--purple),var(--pink));box-shadow:0 10px 24px rgba(111,71,221,.24)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(111,71,221,.32)}
.btn-secondary{color:var(--purple-dark);background:#fff;border:1px solid #ddd3fa}
.btn-secondary:hover{border-color:var(--purple);background:#f7f3ff;transform:translateY(-2px)}
.btn-text{padding:0;background:transparent;color:var(--purple);font-weight:800}
.btn:focus,a:focus,input:focus,textarea:focus,select:focus{outline:3px solid rgba(17,174,184,.3);outline-offset:3px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.25}
.badge.live{color:#a62955;background:#fff0f5}.badge.ready{color:#79520c;background:#fff6d9}
.badge.replay{color:#076d75;background:#e4f8f8}.badge.rank{color:#6238ca;background:#f0eaff}
.badge.up{color:#087355;background:#e3f8ef}.badge.hot{color:#ac4f11;background:#fff0e7}
.page-hero{padding:72px 0 82px;background:linear-gradient(135deg,#f8f5ff,#fff7fb 62%,#fff);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;width:430px;height:430px;right:-160px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(223,75,157,.22),transparent 68%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--purple),var(--pink))}
h1{font-size:clamp(38px,6vw,68px);line-height:1.14;letter-spacing:-.06em;margin:15px 0 22px}
.hero-copy{font-size:18px;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-visual{min-height:385px;border-radius:32px;overflow:hidden;position:relative;box-shadow:var(--shadow-lg);background:#41238f}
.hero-visual img{width:100%;height:385px;object-fit:cover;opacity:.82}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(39,33,50,.78),transparent 65%)}
.visual-caption{position:absolute;z-index:2;bottom:28px;left:30px;color:white}
.visual-caption strong{display:block;font-size:27px}.visual-caption span{color:#e9e1f5}
.section{padding:var(--section) 0}
.section-head{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:32px}
.section-head h2{font-size:clamp(28px,4vw,43px);line-height:1.2;letter-spacing:-.045em;margin:9px 0 0}
.section-head p{max-width:540px;margin:0;color:var(--muted)}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gap);align-items:start}
.dark-panel{padding:42px;border-radius:30px;color:#fff;background:linear-gradient(145deg,#41238f,#8e44c5);position:relative;overflow:hidden}
.dark-panel:after{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-80px;border-radius:50%;background:radial-gradient(circle,#ff9cbf,transparent 68%);opacity:.6}
.dark-panel>*{position:relative;z-index:1}
.dark-panel h2{font-size:34px;line-height:1.25;margin:12px 0}
.dark-panel p{color:#eee8ff}
.service-list{display:grid;gap:14px}
.service-row{display:grid;grid-template-columns:54px 1fr auto;gap:17px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:19px;background:#fff;transition:.22s}
.service-row:hover{transform:translateX(5px);box-shadow:var(--shadow);border-color:#d7cafa}
.service-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#f0eaff;color:var(--purple);font-size:24px}
.service-row:nth-child(2) .service-icon{background:#e5f9f8;color:var(--cyan)}
.service-row:nth-child(3) .service-icon{background:#fff0e7;color:var(--orange)}
.service-row:nth-child(4) .service-icon{background:#e3f8ef;color:var(--green)}
.service-row h3{margin:0;font-size:19px}.service-row p{margin:4px 0 0;color:var(--muted);font-size:14px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric{padding:25px;border:1px solid var(--line);border-radius:20px;background:#fff}
.metric strong{display:block;font-size:34px;line-height:1.2;color:var(--purple-dark);letter-spacing:-.06em}
.metric span{font-size:13px;color:var(--muted)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.story img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:28px}
.story-copy{padding:37px;border-radius:28px;background:var(--mist)}
.story-copy h3{font-size:29px;line-height:1.3;margin:10px 0 15px}
.story-copy p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.step{padding:25px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;position:relative}
.step-num{color:var(--pink);font-size:13px;font-weight:900}.step h3{margin:10px 0 7px;font-size:18px}.step p{margin:0;color:var(--muted);font-size:14px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.plan{padding:31px;border-radius:25px;border:1px solid var(--line);background:#fff;transition:.22s}
.plan.featured{background:linear-gradient(145deg,#41238f,#7047c5);color:#fff;border-color:transparent;transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.plan.featured:hover{transform:translateY(-17px)}
.plan h3{font-size:23px;margin:13px 0 5px}.plan p{color:var(--muted);font-size:14px}.plan.featured p{color:#eee8ff}
.plan ul{padding:0;margin:22px 0;list-style:none}.plan li{padding:8px 0;border-bottom:1px solid rgba(120,90,170,.14);font-size:14px}.plan li:before{content:"✓";color:var(--cyan);font-weight:900;margin-right:8px}
.news-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap)}
.news-main{padding:32px;border-radius:27px;background:#fff;border:1px solid var(--line)}
.news-main h3{font-size:27px;line-height:1.35;margin:14px 0}.news-main p{color:var(--muted)}
.news-side{display:grid;gap:12px}.news-item{padding:18px;border-bottom:1px solid var(--line)}.news-item time{font-size:12px;color:var(--pink);font-weight:800}.news-item h4{margin:4px 0;font-size:16px}.news-item p{margin:0;color:var(--muted);font-size:13px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px}.faq-intro p{color:var(--muted)}
details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between}summary:after{content:"＋";color:var(--purple)}details[open] summary:after{content:"－"}details p{color:var(--muted);margin:10px 0 0;font-size:14px}
.contact{display:grid;grid-template-columns:.78fr 1.22fr;gap:var(--gap);padding:42px;border-radius:30px;background:linear-gradient(120deg,#f3efff,#fff1f7)}
.contact h2{font-size:35px;line-height:1.25;margin:10px 0}.contact p{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:800}.field input,.field textarea,.field select{width:100%;border:1px solid #ddd6e6;border-radius:13px;background:#fff;padding:12px 14px;color:var(--ink)}.field textarea{min-height:120px;resize:vertical}.form-note{font-size:12px;color:var(--muted);margin-top:11px}
footer{background:var(--deep);color:#eee8f5;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}.footer-brand .logo{color:#fff}.footer-brand p{color:#bcb3c9;max-width:340px;font-size:14px}.footer-col{display:grid;align-content:start;gap:8px}.footer-col h3{font-size:15px;color:#fff;margin:0 0 7px}.footer-col a{color:#bcb3c9;font-size:13px}.footer-col a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin-top:40px;color:#aaa0b8;font-size:12px}.footer-bottom a{color:#d9caff}
@media(max-width:1200px){.main-nav>a{padding-left:7px;padding-right:7px;font-size:13px}.phase{display:none}}
@media(max-width:992px){.hero-grid,.split,.story,.news-layout,.faq-grid,.contact{grid-template-columns:1fr}.hero-visual{max-width:650px}.metrics{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.plan-grid{grid-template-columns:1fr}.plan.featured{transform:none}.footer-grid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:768px){.container{width:min(var(--max),calc(100% - 32px))}.nav{min-height:68px}.main-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:15px 18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav>a{padding:12px}.phase{display:flex;margin:8px 0 0;padding:8px 0;border-top:1px solid var(--line)}.menu-btn{display:block}.nav-actions{margin-left:auto}.search{display:none}.page-hero{padding:48px 0 58px}h1{font-size:43px}.section-head{display:block}.section-head p{margin-top:13px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:576px){.hero-visual,.hero-visual img{height:300px;min-height:300px}.visual-caption{left:20px;bottom:20px}.visual-caption strong{font-size:22px}.service-row{grid-template-columns:44px 1fr}.service-row .btn-text{grid-column:2;justify-self:start}.service-icon{width:44px;height:44px;font-size:19px}.metrics,.steps,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.contact{padding:25px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}}