/* roulang page: index */
:root{
      --navy:#10283b;
      --navy-deep:#081a29;
      --navy-soft:#1b4058;
      --aqua:#34d4c5;
      --aqua-dark:#16aa9d;
      --gold:#f1bd59;
      --cream:#f7f5ef;
      --paper:#ffffff;
      --ink:#14222e;
      --muted:#647480;
      --line:#dce5e7;
      --soft:#edf5f4;
      --danger:#d96854;
      --radius-sm:12px;
      --radius:20px;
      --radius-lg:30px;
      --shadow:0 16px 42px rgba(12,39,55,.10);
      --shadow-lg:0 22px 60px rgba(4,25,40,.22);
      --container:1180px;
      --ease:all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{display:block;max-width:100%;object-fit:cover}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}
    .eyebrow:before{content:"";width:24px;height:2px;background:currentColor}
    .section{padding:94px 0;position:relative}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}
    .section-head h2{margin:7px 0 0;font-size:clamp(28px,4vw,46px);line-height:1.22;letter-spacing:-.045em}
    .section-head p{max-width:520px;margin:0;color:var(--muted);font-size:16px}
    .btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}
    .btn:hover{transform:translateY(-3px)}
    .btn-primary{background:var(--aqua);color:#052827;box-shadow:0 10px 20px rgba(52,212,197,.22)}
    .btn-primary:hover{background:#57e3d4;box-shadow:0 14px 28px rgba(52,212,197,.34)}
    .btn-light{background:#fff;color:var(--navy)}
    .btn-light:hover{background:var(--gold)}
    .btn-outline{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.08)}
    .btn-outline:hover{background:#fff;color:var(--navy)}
    .btn-ink{border-color:var(--navy);color:var(--navy)}
    .btn-ink:hover{background:var(--navy);color:#fff}
    .site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}
    .nav-wrap{height:76px;display:flex;align-items:center;gap:26px}
    .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}
    .logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}
    .logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}
    .logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}
    .logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}
    .site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
    .site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}
    .site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}
    .nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}
    .menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
    .hero{min-height:660px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(90deg,rgba(4,20,32,.91) 0%,rgba(9,39,56,.82) 47%,rgba(11,49,60,.6) 100%),url('/assets/images/backpic/back-1.webp') center/cover}
    .hero-inner{padding:94px 0 84px}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:54px}
    .hero-copy .eyebrow{color:var(--aqua)}
    .hero h1{max-width:710px;margin:18px 0;font-size:clamp(40px,5.2vw,72px);line-height:1.12;letter-spacing:-.06em;color:#fff}
    .hero h1 strong{color:var(--gold)}
    .hero-text{max-width:690px;margin:0;color:#d1e0e3;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
    .hero-points{display:flex;flex-wrap:wrap;gap:10px}
    .hero-points span{padding:7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#dcecef;background:rgba(255,255,255,.07);font-size:13px}
    .apply-panel{padding:27px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
    .panel-top{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
    .panel-top h2{margin:4px 0 0;font-size:27px;line-height:1.3}
    .quota{padding:7px 10px;color:#835916;background:#fff2d2;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
    .form-note{margin:16px 0;color:var(--muted);font-size:14px;line-height:1.7}
    .apply-form{display:grid;gap:12px}
    .apply-form label{display:grid;gap:6px;color:#3e525d;font-size:13px;font-weight:700}
    .apply-form input{width:100%;padding:12px 13px;color:var(--ink);background:#f7faf9;border:1px solid var(--line);border-radius:10px;outline:0;transition:var(--ease)}
    .apply-form input:focus{border-color:var(--aqua-dark);background:#fff;box-shadow:0 0 0 3px rgba(52,212,197,.15)}
    .apply-form .btn{width:100%;padding:15px}
    .form-privacy{margin:0;color:#85939a;font-size:12px;text-align:center}
    .trust-strip{background:var(--navy);color:#fff}
    .trust-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
    .trust-item{padding:27px 20px;background:var(--navy);text-align:center}
    .trust-item b{display:block;color:var(--aqua);font-size:27px;line-height:1.1}
    .trust-item span{color:#b9cbd2;font-size:13px}
    .pain{background:var(--paper)}
    .pain-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center}
    .pain-sticky{padding:36px;background:var(--navy);border-radius:var(--radius-lg);color:#fff}
    .pain-sticky h2{margin:12px 0;font-size:37px;line-height:1.25}
    .pain-sticky p{margin:0;color:#bcd0d7}
    .pain-list{display:grid;gap:13px}
    .pain-item{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:19px;background:#f4f8f7;border:1px solid #e1ebea;border-radius:16px;transition:var(--ease)}
    .pain-item:hover{transform:translateX(7px);background:#fff;box-shadow:var(--shadow)}
    .pain-num{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#dff5f1;color:var(--aqua-dark);font-size:18px;font-weight:900}
    .pain-item h3{margin:0 0 3px;font-size:17px}
    .pain-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
    .steps{background:linear-gradient(135deg,#e8f4f2,#f9f5ea)}
    .step-track{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;counter-reset:step}
    .step{position:relative;padding:28px 25px 25px;background:#fff;border-radius:var(--radius);box-shadow:0 10px 27px rgba(24,62,70,.08);overflow:hidden}
    .step:after{counter-increment:step;content:"0" counter(step);position:absolute;right:16px;top:0;color:#edf6f3;font-size:82px;font-weight:900;line-height:1}
    .step-icon{position:relative;z-index:1;display:grid;place-items:center;width:47px;height:47px;margin-bottom:21px;color:#fff;background:var(--navy);border-radius:15px;font-weight:900}
    .step h3{position:relative;z-index:1;margin:0 0 8px;font-size:21px}
    .step p{position:relative;z-index:1;margin:0;color:var(--muted);font-size:14px}
    .topics{padding-bottom:35px;background:var(--cream)}
    .topic-tabs{display:flex;gap:9px;overflow:auto;padding-bottom:12px;margin-bottom:25px}
    .topic-tabs button{flex:0 0 auto;padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:#566975;background:#fff;font-weight:800}
    .topic-tabs button:hover,.topic-tabs button.active{border-color:var(--navy);color:#fff;background:var(--navy)}
    .topic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}
    .topic-card{position:relative;min-height:220px;overflow:hidden;border-radius:17px;background:var(--navy)}
    .topic-card img{width:100%;height:100%;position:absolute;inset:0;opacity:.68;transition:transform .45s ease}
    .topic-card:hover img{transform:scale(1.08)}
    .topic-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(3,18,28,.9))}
    .topic-card span{position:absolute;z-index:1;left:16px;right:12px;bottom:14px;color:#fff;font-size:16px;font-weight:900;line-height:1.35}
    .topic-card small{display:block;margin-top:4px;color:#bcd8d8;font-size:11px;font-weight:400}
    .stage{background:var(--navy-deep);color:#fff;overflow:hidden}
    .stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
    .stage h2{margin:12px 0;font-size:clamp(30px,4vw,48px);line-height:1.24}
    .stage p{color:#b9cbd2}
    .feature-list{display:grid;gap:13px;margin:25px 0}
    .feature-list div{display:flex;gap:11px;align-items:flex-start;color:#dce8eb;font-size:14px}
    .check{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;margin-top:2px;background:rgba(52,212,197,.16);color:var(--aqua);border-radius:50%;font-size:13px}
    .screen{position:relative;padding:12px;background:#d9e8e8;border-radius:27px;transform:rotate(2deg);box-shadow:0 28px 50px rgba(0,0,0,.3)}
    .screen-window{overflow:hidden;background:#fff;border-radius:18px}
    .screen-bar{height:35px;display:flex;align-items:center;gap:6px;padding:0 13px;background:#eff5f4}
    .screen-bar i{width:7px;height:7px;border-radius:50%;background:#a6bab9}
    .screen-image{height:337px;width:100%}
    .progress-wrap{background:var(--paper)}
    .progress-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center}
    .progress-copy h2{margin:10px 0 14px;font-size:39px;line-height:1.22}
    .progress-copy p{color:var(--muted)}
    .milestone{display:grid;gap:14px}
    .mile{padding:17px 19px;background:#f6faf9;border:1px solid var(--line);border-radius:15px}
    .mile-line{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px;font-weight:800}
    .mile-line span:last-child{color:var(--aqua-dark);font-size:13px}
    .bar{height:9px;overflow:hidden;background:#dbe9e6;border-radius:99px}
    .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--aqua-dark),var(--aqua))}
    .insight{background:#f2eee5}
    .quote-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:25px}
    .quote-main{padding:41px;background:var(--navy);border-radius:var(--radius-lg);color:#fff}
    .quote-main blockquote{margin:17px 0 0;font-size:28px;line-height:1.55;font-weight:800}
    .quote-main cite{display:block;margin-top:19px;color:var(--aqua);font-size:14px;font-style:normal}
    .insight-list{display:grid;gap:14px}
    .insight-item{padding:20px;background:#fff;border-radius:16px}
    .insight-item strong{display:block;margin-bottom:5px;font-size:16px}
    .insight-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
    .news{background:#fff}
    .news-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:38px}
    .news-list{border-top:1px solid var(--line)}
    .news-item{display:grid;grid-template-columns:106px 1fr auto;gap:19px;align-items:center;padding:21px 0;border-bottom:1px solid var(--line)}
    .news-date{color:var(--aqua-dark);font-size:13px;font-weight:900}
    .news-date b{display:block;color:var(--navy);font-size:24px;line-height:1.05}
    .news-content h3{margin:0 0 5px;font-size:18px;line-height:1.4}
    .news-content p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
    .read-more{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:13px;font-weight:800;white-space:nowrap}
    .read-more:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
    .news-aside{overflow:hidden;border-radius:var(--radius);background:var(--navy)}
    .news-aside img{height:236px;width:100%;opacity:.8}
    .news-aside-body{padding:25px;color:#fff}
    .news-aside-body span{color:var(--gold);font-size:12px;font-weight:800}
    .news-aside h3{margin:8px 0;font-size:23px;line-height:1.4}
    .news-aside p{margin:0 0 18px;color:#b9cbd2;font-size:14px}
    .ladder{background:var(--cream)}
    .ladder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}
    .tier{padding:27px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:var(--ease)}
    .tier:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
    .tier.hot{border:2px solid var(--aqua);background:#edfffb}
    .tier .tier-label{display:inline-block;padding:4px 9px;border-radius:999px;color:#0b6d66;background:#dcf6ef;font-size:12px;font-weight:900}
    .tier h3{margin:14px 0 6px;font-size:25px}
    .tier p{min-height:48px;margin:0;color:var(--muted);font-size:14px}
    .tier ul{display:grid;gap:9px;margin:20px 0;padding:0;list-style:none;color:#40545d;font-size:14px}
    .tier li:before{content:"✓";margin-right:8px;color:var(--aqua-dark);font-weight:900}
    .brand-story{background:#fff}
    .story-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:50px;align-items:center}
    .story-photo{min-height:425px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
    .story-photo img{width:100%;height:425px}
    .story-copy h2{margin:10px 0 18px;font-size:39px;line-height:1.25}
    .story-copy p{color:var(--muted);margin:0 0 14px}
    .story-meta{display:flex;gap:25px;margin-top:23px;padding-top:21px;border-top:1px solid var(--line)}
    .story-meta b{display:block;color:var(--navy);font-size:24px;line-height:1.1}
    .story-meta span{color:var(--muted);font-size:12px}
    .safety{background:linear-gradient(118deg,#10354b,#10283b)}
    .safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;color:#fff}
    .safety h2{margin:9px 0 14px;font-size:39px;line-height:1.25}
    .safety p{color:#c1d5db}
    .safe-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}
    .safe-card{padding:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:15px}
    .safe-card b{display:block;margin-bottom:5px;color:var(--aqua);font-size:16px}
    .safe-card span{color:#c5d4d9;font-size:13px;line-height:1.55}
    .faq{background:#fff}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
    .faq-copy h2{margin:8px 0 13px;font-size:38px;line-height:1.25}
    .faq-copy p{color:var(--muted)}
    .faq-list{display:grid;gap:12px}
    .faq details{padding:18px 20px;background:#f5f9f8;border:1px solid var(--line);border-radius:14px}
    .faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--navy);font-weight:900;cursor:pointer;list-style:none}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"＋";color:var(--aqua-dark);font-size:22px;font-weight:400}
    .faq details[open] summary:after{content:"－"}
    .faq details p{margin:13px 0 0;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.8}
    .use-now{padding:78px 0;background:linear-gradient(112deg,rgba(5,30,43,.92),rgba(18,63,72,.87)),url('/assets/images/backpic/back-3.webp') center/cover}
    .cta-inner{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center}
    .cta-inner h2{margin:8px 0;color:#fff;font-size:clamp(31px,4vw,48px);line-height:1.2}
    .cta-inner p{max-width:700px;margin:0;color:#c5d8db}
    .cta-buttons{display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-end}
    .contact{background:#f0f6f4}
    .contact-box{display:grid;grid-template-columns:1fr .82fr;gap:39px;padding:38px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
    .contact-box h2{margin:6px 0 10px;font-size:34px;line-height:1.25}
    .contact-box p{margin:0;color:var(--muted)}
    .mini-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-self:center}
    .mini-form input{min-width:0;padding:13px 15px;border:1px solid var(--line);border-radius:999px;outline:0}
    .mini-form input:focus{border-color:var(--aqua-dark);box-shadow:0 0 0 3px rgba(52,212,197,.15)}
    .site-footer{padding:58px 0 25px;background:#071722;color:#b6c7cd}
    .footer-top{display:grid;grid-template-columns:1.15fr 1.5fr .9fr;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
    .footer-brand p{max-width:335px;margin:14px 0 0;color:#9db3bb;font-size:13px}
    .footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
    .footer-nav a{font-size:14px}
    .footer-nav a:hover{color:var(--aqua)}
    .footer-record{font-size:13px;line-height:2}
    .footer-record a:hover{color:var(--aqua)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:#809aa4;font-size:12px}
    .floating{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:9px;padding:12px 16px;color:#062523;background:var(--aqua);border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.2);font-size:14px;font-weight:900}
    .floating:hover{transform:translateY(-3px);background:#70eddf}
    @media(max-width:1080px){
      .site-nav{gap:0}.site-nav a{padding:8px 7px;font-size:13px}.nav-wrap{gap:14px}
      .topic-grid{grid-template-columns:repeat(3,1fr)}
      .hero-grid,.stage-grid,.pain-grid,.progress-layout,.story-grid,.safety-grid,.faq-layout{gap:32px}
    }
    @media(max-width:820px){
      .site-header{position:relative}.nav-wrap{height:68px;justify-content:space-between}.menu-toggle{display:block}
      .nav-action{display:none}.site-nav{display:none;position:absolute;top:68px;left:0;right:0;padding:15px 24px;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap;justify-content:flex-start}
      .site-nav.open{display:flex}.site-nav a{padding:9px 11px}
      .hero{min-height:auto}.hero-inner{padding:66px 0}.hero-grid,.pain-grid,.stage-grid,.progress-layout,.quote-grid,.news-grid,.story-grid,.safety-grid,.faq-layout,.contact-box{grid-template-columns:1fr}
      .apply-panel{max-width:600px}.trust-items{grid-template-columns:repeat(2,1fr)}
      .step-track,.ladder-grid{grid-template-columns:1fr}.step{min-height:180px}.stage-grid{gap:35px}.stage .screen{max-width:570px;margin:0 auto}
      .section{padding:68px 0}.section-head{display:block}.section-head p{margin-top:14px}.news-item{grid-template-columns:82px 1fr}.read-more{grid-column:2;justify-self:start}.story-photo,.story-photo img{min-height:300px;height:300px}
      .footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.cta-inner{grid-template-columns:1fr}.cta-buttons{justify-content:flex-start}
    }
    @media(max-width:520px){
      .container{width:min(calc(100% - 30px),var(--container))}.hero h1{font-size:38px}.hero-text{font-size:15px}.hero-actions .btn{width:100%}
      .trust-item{padding:19px 8px}.trust-item b{font-size:22px}.topic-grid{grid-template-columns:repeat(2,1fr)}.topic-card{min-height:175px}
      .safe-cards{grid-template-columns:1fr}.screen-image{height:230px}.section-head h2,.pain-sticky h2,.progress-copy h2,.story-copy h2,.safety h2,.faq-copy h2{font-size:30px}
      .news-item{grid-template-columns:1fr;gap:8px}.read-more{grid-column:auto}.news-date b{display:inline;font-size:15px;margin-right:5px}.footer-top{grid-template-columns:1fr}.footer-bottom{display:block;line-height:1.8}
      .mini-form{grid-template-columns:1fr}.floating{right:15px;bottom:15px}.story-meta{gap:16px}.apply-panel{padding:21px}
    }

/* roulang page: category3 */
:root{--navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;--gold:#f1bd59;--cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;--soft:#edf5f4;--radius-sm:12px;--radius:20px;--radius-lg:30px;--shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);--container:1180px;--ease:all .25s ease}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}a{color:inherit;text-decoration:none;transition:var(--ease)}img{display:block;max-width:100%;object-fit:cover}button,input{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}.section{padding:92px 0;position:relative}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}.section-head{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:35px}.section-head h2{margin:7px 0 0;font-size:clamp(29px,4vw,45px);line-height:1.2;letter-spacing:-.05em}.section-head p{max-width:540px;margin:0;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.25;transition:var(--ease)}.btn:hover{transform:translateY(-3px)}.btn:focus-visible,.site-nav a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn-primary{background:var(--aqua);color:#052827;box-shadow:0 10px 20px rgba(52,212,197,.22)}.btn-primary:hover{background:#64eadb;box-shadow:0 16px 30px rgba(52,212,197,.33)}.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:var(--gold)}.btn-ink{border-color:var(--navy);color:var(--navy)}.btn-ink:hover{background:var(--navy);color:#fff}.site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}.nav-wrap{height:76px;display:flex;align-items:center;gap:26px}.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}.logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}.logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}.logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}.nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}.menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
.category-hero{position:relative;overflow:hidden;padding:70px 0 65px;background:linear-gradient(105deg,rgba(7,25,39,.96),rgba(13,47,60,.84)),url('/assets/images/backpic/back-2.webp') center/cover}.profile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}.avatar{width:98px;height:98px;border:4px solid rgba(52,212,197,.72);border-radius:50%;background:url('/assets/images/coverpic/cover-3.webp') center/cover;box-shadow:0 0 0 8px rgba(255,255,255,.08)}.profile-copy .eyebrow{color:var(--aqua)}.profile-copy h1{margin:7px 0 8px;color:#fff;font-size:clamp(39px,5vw,62px);line-height:1.1;letter-spacing:-.06em}.profile-copy p{max-width:660px;margin:0;color:#d1e0e3;font-size:16px}.profile-side{display:flex;align-items:center;gap:14px}.stat-badge{min-width:97px;padding:12px 15px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.09);color:#dcecef;text-align:center}.stat-badge b{display:block;color:var(--gold);font-size:23px;line-height:1.2}.stat-badge span{font-size:12px}.hero-note{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding-top:27px;border-top:1px solid rgba(255,255,255,.16)}.hero-note span{padding:7px 12px;border-radius:999px;color:#deeff0;background:rgba(255,255,255,.09);font-size:13px}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.intro-image{position:relative;min-height:460px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.intro-image img{width:100%;height:100%}.intro-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,21,32,.72))}.image-caption{position:absolute;z-index:1;bottom:24px;left:25px;right:25px;color:#fff}.image-caption b{display:block;font-size:22px}.image-caption span{color:#d7e4e7;font-size:14px}.intro-copy h2{margin:12px 0 18px;font-size:clamp(30px,3.7vw,44px);line-height:1.25;letter-spacing:-.045em}.intro-copy p{color:var(--muted);margin:0 0 17px}.check-list{display:grid;gap:12px;margin:26px 0}.check-list div{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;background:#fff;border:1px solid var(--line);border-radius:13px}.check-list i{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;color:var(--navy);background:var(--aqua);font-style:normal;font-size:13px;font-weight:900}
.dark-section{background:var(--navy-deep);color:#fff}.dark-section .eyebrow{color:var(--aqua)}.dark-section .section-head h2{color:#fff}.dark-section .section-head p{color:#b9cbd2}.court-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.court-card{padding:27px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);background:rgba(255,255,255,.055);transition:var(--ease)}.court-card:hover{transform:translateY(-7px);border-color:rgba(52,212,197,.65);background:rgba(52,212,197,.10)}.court-number{display:block;color:var(--gold);font-size:13px;font-weight:900;letter-spacing:.1em}.court-card h3{margin:13px 0 8px;font-size:23px}.court-card p{margin:0;color:#c1d0d5;font-size:14px}.court-card ul{padding:0;margin:18px 0 0;list-style:none;color:#e4f0f1;font-size:14px}.court-card li{padding:7px 0;border-top:1px solid rgba(255,255,255,.1)}
.feature-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:stretch}.feature-banner{position:relative;min-height:400px;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy)}.feature-banner img{width:100%;height:100%;opacity:.72}.feature-banner div{position:absolute;inset:auto 28px 28px;color:#fff}.feature-banner h3{margin:0 0 9px;font-size:31px;line-height:1.2}.feature-banner p{margin:0;color:#deeaec}.moment-list{display:grid;gap:13px}.moment{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:16px;padding:19px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:var(--ease)}.moment:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:#b9d8d5}.moment-time{color:var(--aqua-dark);font-weight:900;font-size:15px}.moment h3{margin:0 0 3px;font-size:17px}.moment p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}.moment-arrow{font-size:22px;color:var(--navy)}
.data-strip{padding:0}.data-panel{display:grid;grid-template-columns:1.3fr repeat(3,1fr);overflow:hidden;border-radius:var(--radius-lg);background:#e3eeec;box-shadow:var(--shadow)}.data-intro{padding:31px;background:var(--aqua);color:#062927}.data-intro h2{margin:0 0 7px;font-size:25px;line-height:1.25}.data-intro p{margin:0;font-size:14px}.data-item{display:flex;flex-direction:column;justify-content:center;padding:28px 24px;border-left:1px solid #cbdddd}.data-item b{color:var(--navy);font-size:32px;line-height:1}.data-item span{margin-top:6px;color:var(--muted);font-size:13px}
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.scene-card{overflow:hidden;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(12,39,55,.05);transition:var(--ease)}.scene-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.scene-card img{width:100%;height:172px}.scene-card div{padding:19px}.scene-card h3{margin:0 0 8px;font-size:18px}.scene-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:steps}.step{position:relative;padding:0 25px 0 0;counter-increment:steps}.step:before{content:counter(steps,decimal-leading-zero);display:grid;place-items:center;width:50px;height:50px;margin-bottom:16px;border-radius:50%;color:var(--navy);background:var(--gold);font-weight:900}.step:not(:last-child):after{content:"";position:absolute;top:25px;left:60px;right:8px;height:1px;background:#c9d8d8}.step h3{margin:0 0 7px;font-size:18px}.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.faq-wrap{display:grid;grid-template-columns:.72fr 1.28fr;gap:52px;align-items:start}.faq-copy h2{margin:9px 0 16px;font-size:clamp(30px,3.8vw,43px);line-height:1.24}.faq-copy p{color:var(--muted)}.faq-list{display:grid;gap:12px}.faq-item{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}.faq-item summary{position:relative;padding:18px 52px 18px 20px;font-weight:800;cursor:pointer;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";position:absolute;right:20px;top:13px;color:var(--aqua-dark);font-size:26px;font-weight:400}.faq-item[open] summary{color:var(--navy);background:#f4faf9}.faq-item[open] summary:after{content:"−"}.faq-item p{margin:0;padding:0 20px 19px;color:var(--muted);font-size:14px}
.cta{padding:0 0 92px}.cta-box{position:relative;overflow:hidden;padding:55px 56px;border-radius:var(--radius-lg);background:linear-gradient(115deg,var(--navy),#1c5264);color:#fff}.cta-box:after{content:"";position:absolute;right:-80px;top:-120px;width:370px;height:370px;border:58px solid rgba(52,212,197,.16);border-radius:50%}.cta-box h2{position:relative;z-index:1;max-width:670px;margin:0 0 13px;font-size:clamp(31px,4vw,46px);line-height:1.2}.cta-box p{position:relative;z-index:1;max-width:625px;margin:0;color:#cfdee2}.cta-box .btn{position:relative;z-index:1;margin-top:26px}
.site-footer{padding:62px 0 22px;background:var(--navy-deep);color:#c4d4dc}.footer-top{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:52px;padding-bottom:40px}.footer-brand p{max-width:370px;margin:16px 0 0;color:#aabdc5;font-size:14px}.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 17px;align-content:start}.footer-nav a{color:#c4d4dc;font-size:14px}.footer-nav a:hover{color:var(--aqua);transform:translateX(3px)}.footer-record{font-size:13px;line-height:2;color:#aabdc5}.footer-record a:hover{color:var(--aqua)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:#90a7b2;font-size:13px}
@media(max-width:1024px){.site-nav{gap:0}.site-nav a{padding:8px 7px;font-size:13px}.nav-wrap{gap:14px}.nav-action{padding:10px 13px}.profile{grid-template-columns:auto 1fr}.profile-side{grid-column:2}.intro-grid,.faq-wrap{gap:32px}.scene-grid{grid-template-columns:repeat(2,1fr)}.footer-top{gap:30px}.data-panel{grid-template-columns:1fr 1fr}.data-intro{grid-column:span 2}.data-item:nth-child(2){border-left:0}}
@media(max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.section{padding:66px 0}.menu-toggle{display:block;margin-left:auto}.site-nav{display:none;position:absolute;left:16px;right:16px;top:70px;padding:12px;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.site-nav a{padding:11px 13px}.nav-action{display:none}.profile{grid-template-columns:auto 1fr;gap:17px}.avatar{width:76px;height:76px}.profile-copy h1{font-size:42px}.profile-side{grid-column:1/-1;justify-content:flex-start}.stat-badge{min-width:112px}.intro-grid,.feature-layout,.faq-wrap{grid-template-columns:1fr}.intro-image{min-height:330px}.court-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr;gap:27px}.step:not(:last-child):after{display:none}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.section-head{display:block}.section-head p{margin-top:13px}.data-panel{grid-template-columns:1fr 1fr}.moment{grid-template-columns:52px 1fr auto}}
@media(max-width:520px){body{font-size:15px}.category-hero{padding:48px 0}.profile{display:flex;flex-wrap:wrap}.profile-copy{width:calc(100% - 93px)}.profile-copy h1{font-size:36px}.profile-side{width:100%}.stat-badge{flex:1}.hero-note{margin-top:22px;padding-top:20px}.intro-image{min-height:285px}.scene-grid,.steps,.data-panel{grid-template-columns:1fr}.data-intro{grid-column:auto}.data-item{border-left:0;border-top:1px solid #cbdddd}.scene-card img{height:190px}.moment{grid-template-columns:46px 1fr}.moment-arrow{display:none}.cta{padding-bottom:65px}.cta-box{padding:37px 27px}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;gap:5px}.footer-nav{grid-template-columns:1fr 1fr}}

/* roulang page: category2 */
:root{
      --navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;
      --gold:#f1bd59;--cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;
      --soft:#edf5f4;--danger:#d96854;--radius-sm:12px;--radius:20px;--radius-lg:30px;
      --shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);
      --container:1180px;--ease:all .25s ease
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{display:block;max-width:100%;object-fit:cover}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .section{position:relative;padding:88px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}
    .eyebrow:before{content:"";width:24px;height:2px;background:currentColor}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}
    .section-head h2{max-width:640px;margin:8px 0 0;font-size:clamp(28px,4vw,45px);line-height:1.22;letter-spacing:-.045em}
    .section-head p{max-width:470px;margin:0;color:var(--muted)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}
    .btn:hover{transform:translateY(-3px)}
    .btn:focus-visible,.site-nav a:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(52,212,197,.55);outline-offset:3px}
    .btn-primary{color:#062b2a;background:var(--aqua);box-shadow:0 10px 20px rgba(52,212,197,.24)}
    .btn-primary:hover{background:#5be4d6;box-shadow:0 16px 28px rgba(52,212,197,.34)}
    .btn-light{color:var(--navy);background:#fff}
    .btn-light:hover{background:var(--gold)}
    .btn-ink{color:var(--navy);background:transparent;border-color:var(--navy)}
    .btn-ink:hover{color:#fff;background:var(--navy)}
    .site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}
    .nav-wrap{height:76px;display:flex;align-items:center;gap:26px}
    .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}
    .logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}
    .logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}
    .logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}
    .logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}
    .site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
    .site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}
    .site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}
    .nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}
    .menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
    .inner-hero{position:relative;overflow:hidden;padding:86px 0 78px;background:linear-gradient(100deg,rgba(6,22,34,.94),rgba(12,42,57,.80)),url('/assets/images/backpic/back-2.webp') center/cover}
    .inner-hero:after{content:"";position:absolute;width:370px;height:370px;right:7%;bottom:-200px;border:1px solid rgba(52,212,197,.38);border-radius:50%;box-shadow:0 0 0 35px rgba(52,212,197,.06),0 0 0 70px rgba(52,212,197,.04)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end}
    .crumb{display:flex;gap:9px;margin-bottom:19px;color:#b9cbd2;font-size:14px}
    .crumb span{color:var(--aqua)}
    .inner-hero .eyebrow{color:var(--aqua)}
    h1{max-width:700px;margin:14px 0 18px;color:#fff;font-size:clamp(42px,5.4vw,70px);line-height:1.08;letter-spacing:-.06em}
    .hero-copy p{max-width:680px;margin:0;color:#d1e0e3;font-size:17px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
    .hero-panel{padding:25px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);box-shadow:var(--shadow-lg);backdrop-filter:blur(8px)}
    .panel-label{margin:0;color:var(--aqua);font-size:13px;font-weight:800;letter-spacing:.08em}
    .panel-score{display:flex;align-items:end;gap:12px;margin:8px 0 16px;color:#fff}
    .panel-score strong{font-size:46px;line-height:1;letter-spacing:-.06em}
    .panel-score span{padding-bottom:5px;color:#c7d8dd;font-size:14px}
    .progress-track{height:10px;overflow:hidden;background:rgba(255,255,255,.17);border-radius:999px}
    .progress-track i{display:block;width:78%;height:100%;background:linear-gradient(90deg,var(--aqua),var(--gold));border-radius:inherit}
    .panel-list{display:grid;gap:10px;margin:19px 0 0;padding:0;list-style:none}
    .panel-list li{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);color:#d8e5e7;font-size:14px}
    .panel-list b{color:#fff}
    .quickbar{position:relative;z-index:2;margin-top:-1px;background:var(--navy)}
    .quickbar-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .quick-item{padding:24px 22px;border-right:1px solid rgba(255,255,255,.12);color:#c4d4dc}
    .quick-item:last-child{border-right:0}
    .quick-item b{display:block;margin-bottom:3px;color:var(--aqua);font-size:22px;line-height:1.2}
    .quick-item span{font-size:13px}
    .spotlight{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
    .spotlight-media{position:relative;min-height:460px}
    .spotlight-media img{width:100%;height:460px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
    .media-note{position:absolute;right:-20px;bottom:25px;max-width:260px;padding:18px 20px;background:var(--gold);border-radius:16px;color:#54390e;font-size:14px;font-weight:800;box-shadow:var(--shadow)}
    .spotlight-copy h2{margin:9px 0 18px;font-size:clamp(30px,4vw,46px);line-height:1.2;letter-spacing:-.04em}
    .spotlight-copy>p{margin:0;color:var(--muted)}
    .check-list{display:grid;gap:13px;margin:25px 0;padding:0;list-style:none}
    .check-list li{position:relative;padding-left:30px;font-weight:700}
    .check-list li:before{content:"✓";position:absolute;left:0;top:2px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#07302e;background:var(--aqua);font-size:12px}
    .dark-section{background:var(--navy-deep)}
    .dark-section .section-head h2{color:#fff}
    .dark-section .section-head p{color:#b8cbd1}
    .focus-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:repeat(2,205px);gap:16px}
    .focus-card{position:relative;overflow:hidden;border-radius:18px;background:var(--navy-soft)}
    .focus-card:first-child{grid-row:span 2}
    .focus-card img{width:100%;height:100%;opacity:.68;transition:transform .45s ease}
    .focus-card:hover img{transform:scale(1.08)}
    .focus-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(4,20,32,.90) 100%)}
    .focus-content{position:absolute;z-index:1;left:20px;right:18px;bottom:17px;color:#fff}
    .focus-content small{display:block;margin-bottom:5px;color:var(--aqua);font-weight:800}
    .focus-content h3{margin:0;font-size:18px;line-height:1.35}
    .focus-card:first-child h3{font-size:26px}
    .analysis-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:25px}
    .analysis-intro{padding:33px;background:var(--soft);border-radius:var(--radius-lg)}
    .analysis-intro h2{margin:10px 0 14px;font-size:34px;line-height:1.25}
    .analysis-intro p{margin:0;color:var(--muted)}
    .analysis-list{display:grid;gap:13px}
    .analysis-item{display:grid;grid-template-columns:62px 1fr auto;gap:18px;align-items:center;padding:19px 21px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:var(--ease)}
    .analysis-item:hover{transform:translateX(5px);border-color:var(--aqua);box-shadow:var(--shadow)}
    .analysis-num{color:var(--aqua-dark);font-size:28px;font-weight:900;line-height:1}
    .analysis-item h3{margin:0 0 2px;font-size:17px}
    .analysis-item p{margin:0;color:var(--muted);font-size:14px}
    .arrow{color:var(--aqua-dark);font-size:24px}
    .data-wall{padding:0;background:linear-gradient(135deg,#12354c,#0b2334)}
    .data-grid{display:grid;grid-template-columns:1fr 1fr}
    .data-copy{padding:79px max(24px,calc((100vw - 1180px)/2)) 79px max(24px,calc((100vw - 1180px)/2));padding-right:52px;color:#fff}
    .data-copy h2{max-width:510px;margin:10px 0 17px;font-size:clamp(31px,4vw,48px);line-height:1.2;letter-spacing:-.045em}
    .data-copy p{max-width:520px;margin:0;color:#c7d8dd}
    .data-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12)}
    .stat{display:flex;min-height:208px;flex-direction:column;justify-content:center;padding:32px;background:rgba(4,20,32,.24)}
    .stat strong{color:var(--gold);font-size:43px;line-height:1;letter-spacing:-.05em}
    .stat span{margin-top:10px;color:#d2e0e3;font-size:14px}
    .scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .scene-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(12,39,55,.04);transition:var(--ease)}
    .scene-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
    .scene-card img{width:100%;height:190px}
    .scene-body{padding:22px}
    .scene-card h3{margin:0 0 8px;font-size:20px}
    .scene-card p{margin:0;color:var(--muted);font-size:14px}
    .process{background:#fff}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:6px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .step{position:relative;min-height:215px;padding:28px 25px;border-right:1px solid var(--line)}
    .step:last-child{border-right:0}
    .step-number{display:block;margin-bottom:28px;color:var(--aqua-dark);font-size:13px;font-weight:900;letter-spacing:.12em}
    .step h3{margin:0 0 9px;font-size:19px}
    .step p{margin:0;color:var(--muted);font-size:14px}
    .quote-section{padding:72px 0}
    .quote-box{position:relative;display:grid;grid-template-columns:110px 1fr;gap:32px;padding:42px 48px;background:var(--gold);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
    .quote-mark{font-family:Georgia,serif;color:#fff7df;font-size:112px;line-height:.7}
    .quote-box blockquote{margin:0;color:#51390f;font-size:clamp(21px,3vw,31px);font-weight:800;line-height:1.5}
    .quote-box cite{display:block;margin-top:16px;color:#76551b;font-size:14px;font-style:normal;font-weight:700}
    .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;align-items:start}
    .faq-intro{position:sticky;top:105px}
    .faq-intro h2{margin:10px 0 15px;font-size:39px;line-height:1.23;letter-spacing:-.045em}
    .faq-intro p{margin:0;color:var(--muted)}
    .faq-list{display:grid;gap:12px}
    .faq-item{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px}
    .faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;padding:19px 20px;border:0;color:var(--ink);background:#fff;text-align:left;font-weight:800}
    .faq-question span:last-child{color:var(--aqua-dark);font-size:23px;transition:var(--ease)}
    .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .faq-answer{display:none;padding:0 20px 19px;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .newsletter{padding:0 0 92px}
    .newsletter-box{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:42px 48px;background:var(--navy);border-radius:var(--radius-lg);color:#fff;box-shadow:var(--shadow-lg)}
    .newsletter h2{margin:0 0 8px;font-size:31px;line-height:1.25}
    .newsletter p{max-width:660px;margin:0;color:#c2d2d7}
    .newsletter-form{display:flex;gap:10px}
    .newsletter-form input{width:220px;padding:13px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;outline:0;color:#fff;background:rgba(255,255,255,.09)}
    .newsletter-form input::placeholder{color:#b5c6cc}
    .newsletter-form input:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(52,212,197,.17)}
    .site-footer{padding:61px 0 20px;color:#b9cbd2;background:var(--navy-deep)}
    .footer-top{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:55px;padding-bottom:43px}
    .footer-brand p{max-width:380px;margin:17px 0 0;font-size:14px;line-height:1.8}
    .footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;align-content:start}
    .footer-nav a,.footer-record a{font-size:14px}
    .footer-nav a:hover,.footer-record a:hover{color:var(--aqua)}
    .footer-record{display:grid;gap:8px;font-size:13px}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
    @media(max-width:1024px){
      .nav-wrap{gap:15px}.site-nav a{padding:8px 7px;font-size:13px}.nav-action{padding:10px 13px}
      .hero-grid,.spotlight,.faq-layout{grid-template-columns:1fr}.hero-panel{max-width:520px}.spotlight-media{min-height:auto}.analysis-layout{grid-template-columns:1fr}
      .data-copy{padding:68px 40px}.footer-top{gap:30px}.scene-grid{gap:15px}
    }
    @media(max-width:768px){
      .container{width:min(calc(100% - 32px),var(--container))}.section{padding:64px 0}.nav-wrap{height:67px;justify-content:space-between}
      .menu-toggle{display:block}.nav-action{display:none}.site-nav{position:absolute;top:67px;left:0;right:0;display:none;max-height:calc(100vh - 67px);overflow:auto;padding:12px 16px 20px;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08);flex-direction:column;align-items:stretch}
      .site-nav.open{display:flex}.site-nav a{padding:12px 14px}.inner-hero{padding:62px 0}.inner-hero:after{display:none}.hero-grid{gap:29px}h1{font-size:43px}.hero-copy p{font-size:16px}
      .quickbar-grid{grid-template-columns:1fr 1fr}.quick-item:nth-child(2){border-right:0}.quick-item{padding:19px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
      .section-head{display:block;margin-bottom:26px}.section-head p{margin-top:14px}.spotlight-media img{height:340px}.media-note{right:12px;bottom:15px}
      .focus-grid{grid-template-columns:1fr 1fr;grid-template-rows:250px 175px}.focus-card:first-child{grid-column:span 2;grid-row:auto}.focus-card:first-child h3{font-size:22px}
      .data-grid{grid-template-columns:1fr}.data-copy{padding:58px 24px}.data-stats{grid-template-columns:1fr 1fr}.stat{min-height:165px;padding:25px}.scene-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step{min-height:185px;border-bottom:1px solid var(--line)}.step:nth-child(n+3){border-bottom:0}
      .faq-intro{position:static}.newsletter-box{grid-template-columns:1fr;padding:34px 28px}.newsletter-form{width:100%}.newsletter-form input{flex:1;width:auto}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}.footer-bottom{flex-direction:column}
    }
    @media(max-width:520px){
      .section{padding:54px 0}.logo{font-size:19px}.inner-hero{padding:52px 0}h1{font-size:38px}.hero-actions .btn{width:100%}.hero-panel{padding:21px}.quickbar-grid,.scene-grid,.data-stats,.steps{grid-template-columns:1fr}.quick-item{border-right:0}.spotlight-media img{height:280px}.media-note{left:12px;right:12px;max-width:none}
      .focus-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.focus-card,.focus-card:first-child{grid-column:auto;min-height:220px}.analysis-item{grid-template-columns:45px 1fr}.analysis-item .arrow{display:none}.quote-box{grid-template-columns:1fr;gap:14px;padding:31px 27px}.quote-mark{font-size:75px}.step,.step:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.newsletter-form{flex-direction:column}.newsletter-form input{width:100%}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-nav{grid-template-columns:1fr 1fr}.panel-score strong{font-size:38px}
    }

/* roulang page: category4 */
:root{
 --navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;--gold:#f1bd59;
 --cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;--soft:#edf5f4;
 --radius-sm:12px;--radius:20px;--radius-lg:30px;--shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);
 --container:1180px;--ease:all .25s ease;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}a{color:inherit;text-decoration:none;transition:var(--ease)}img{display:block;max-width:100%;object-fit:cover}button,input{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}.nav-wrap{height:76px;display:flex;align-items:center;gap:24px}.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}.logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}.logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}.logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}
.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}.nav-action{flex-shrink:0;padding:11px 17px;font-size:14px}.menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}.btn:hover{transform:translateY(-3px)}.btn:focus,a:focus,button:focus,input:focus{outline:3px solid rgba(52,212,197,.35);outline-offset:3px}.btn-primary{background:var(--aqua);color:#052827;box-shadow:0 10px 20px rgba(52,212,197,.22)}.btn-primary:hover{background:#57e3d4;box-shadow:0 14px 28px rgba(52,212,197,.34)}.btn-light{color:var(--navy);background:#fff}.btn-light:hover{background:var(--gold)}.btn-outline{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}.btn-outline:hover{color:var(--navy);background:#fff}.btn-ink{color:var(--navy);border-color:var(--navy);background:transparent}.btn-ink:hover{color:#fff;background:var(--navy)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}.section{position:relative;padding:88px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}.section-head h2{margin:7px 0 0;font-size:clamp(28px,4vw,45px);line-height:1.22;letter-spacing:-.045em}.section-head p{max-width:530px;margin:0;color:var(--muted)}
.hero{overflow:hidden;background:linear-gradient(90deg,rgba(4,20,32,.94),rgba(8,34,49,.82) 54%,rgba(10,48,58,.61)),url('/assets/images/backpic/back-2.webp') center/cover}.hero-inner{padding:84px 0 76px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:56px}.hero .eyebrow{color:var(--aqua)}.hero h1{max-width:700px;margin:18px 0;font-size:clamp(42px,5.6vw,74px);line-height:1.1;letter-spacing:-.065em;color:#fff}.hero h1 strong{color:var(--gold)}.hero-text{max-width:670px;margin:0;color:#d1e0e3;font-size:17px;line-height:1.9}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 20px}.hero-points{display:flex;flex-wrap:wrap;gap:9px}.hero-points span{padding:7px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#dcecef;background:rgba(255,255,255,.07);font-size:13px}
.group-panel{position:relative;padding:30px;background:rgba(255,255,255,.96);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.group-panel h2{margin:9px 0 6px;font-size:27px;line-height:1.3}.group-panel p{margin:0;color:var(--muted);font-size:14px}.quota{display:inline-block;padding:7px 11px;color:#82591d;background:#fff1d1;border-radius:999px;font-size:12px;font-weight:800}.member-row{display:flex;align-items:center;margin:24px 0 19px}.avatar{display:grid;place-items:center;width:39px;height:39px;margin-right:-9px;color:#fff;border:3px solid #fff;border-radius:50%;background:var(--navy-soft);font-size:12px;font-weight:800}.avatar:nth-child(2){background:#d98a5e}.avatar:nth-child(3){background:#62888c}.avatar:nth-child(4){background:#785f91}.avatar:nth-child(5){background:#4b9b82}.member-row b{margin-left:20px;font-size:14px}.progress{height:9px;overflow:hidden;background:#dfebeb;border-radius:99px}.progress i{display:block;width:78%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--aqua),#82e6d4)}.group-meta{display:flex;justify-content:space-between;margin:9px 0 23px;color:var(--muted);font-size:12px}.group-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.group-buttons .btn{padding:14px 10px}
.signal-strip{background:var(--navy)}.signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}.signal-item{padding:26px 18px;text-align:center;background:var(--navy)}.signal-item b{display:block;color:var(--aqua);font-size:27px;line-height:1.1}.signal-item span{color:#b9cbd2;font-size:13px}
.feature-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:42px;align-items:center}.feature-image{min-height:430px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow);position:relative}.feature-image img{width:100%;height:100%}.feature-image:after{content:"电竞现场观察";position:absolute;left:22px;bottom:20px;padding:7px 13px;color:#fff;background:rgba(8,26,41,.8);border-radius:999px;font-size:13px;font-weight:800}.feature-copy h2{margin:10px 0 18px;font-size:clamp(30px,4vw,44px);line-height:1.25}.feature-copy>p{color:var(--muted)}.check-list{display:grid;gap:12px;margin:24px 0}.check-list div{padding:14px 16px;border-left:3px solid var(--aqua);background:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:0 5px 16px rgba(12,39,55,.05)}.check-list b{display:block;font-size:16px}.check-list span{color:var(--muted);font-size:14px}
.dark-section{color:#e6f0f2;background:var(--navy-deep)}.dark-section .eyebrow{color:var(--aqua)}.dark-section .section-head h2{color:#fff}.dark-section .section-head p{color:#b9cbd2}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background:rgba(255,255,255,.06);transition:var(--ease)}.project-card:hover{transform:translateY(-7px);background:rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}.project-card img{width:100%;height:175px;opacity:.83}.project-card div{padding:20px}.project-card small{color:var(--gold);font-weight:800}.project-card h3{margin:7px 0;font-size:20px;color:#fff}.project-card p{margin:0;color:#c0d0d5;font-size:14px;line-height:1.7}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{position:relative;padding:24px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(12,39,55,.05)}.step-num{display:grid;place-items:center;width:38px;height:38px;margin-bottom:17px;color:#073230;background:var(--aqua);border-radius:50%;font-weight:900}.step h3{margin:0 0 7px;font-size:18px}.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.scene{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:27px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:var(--ease)}.scene:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b5d9d5}.scene-icon{display:grid;place-items:center;width:62px;height:62px;color:var(--navy);background:var(--soft);border-radius:18px;font-size:25px}.scene h3{margin:0 0 6px;font-size:19px}.scene p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.article-wrap{display:grid;grid-template-columns:1.03fr .97fr;gap:40px;align-items:center}.article-text h2{margin:10px 0 16px;font-size:clamp(30px,4vw,43px);line-height:1.28}.article-text p{color:var(--muted)}.quote{margin:25px 0;padding:20px 22px;color:var(--navy);border-left:4px solid var(--gold);background:#fff6e3;font-weight:700}.article-photo{height:390px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.article-photo img{width:100%;height:100%}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faq{padding:20px 21px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}.faq h3{display:flex;gap:12px;align-items:start;margin:0 0 9px;font-size:16px}.faq h3:before{content:"问";display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;color:#07524d;background:var(--aqua);border-radius:50%;font-size:12px}.faq p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.cta{padding:70px 0;background:linear-gradient(115deg,var(--navy-deep),var(--navy-soft));color:#fff}.cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{max-width:680px;margin:8px 0 10px;font-size:clamp(30px,4vw,48px);line-height:1.18}.cta p{max-width:680px;margin:0;color:#c2d4d9}.cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.site-footer{padding:58px 0 22px;color:#b9cbd2;background:var(--navy-deep)}.footer-top{display:grid;grid-template-columns:1.2fr 1.25fr .9fr;gap:44px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.11)}.footer-brand p{max-width:330px;margin:17px 0 0;font-size:14px;line-height:1.8}.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px;align-content:start}.footer-nav a{font-size:14px}.footer-nav a:hover,.footer-record a:hover{color:var(--aqua)}.footer-record{display:grid;gap:8px;font-size:13px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:19px;color:#839aa5;font-size:13px}
@media(max-width:1024px){.site-nav{gap:0}.site-nav a{padding:8px 7px;font-size:13px}.hero-grid,.feature-grid,.article-wrap{gap:32px}.project-grid{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{height:68px;gap:15px}.menu-toggle{display:block;margin-left:auto}.nav-action{display:none}.site-nav{position:absolute;top:68px;left:0;right:0;display:none;align-items:stretch;padding:12px 16px 18px;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-lg)}.site-nav.open{display:flex;flex-direction:column}.site-nav a{width:100%;padding:10px 12px}.hero-inner{padding:61px 0}.hero-grid,.feature-grid,.article-wrap{grid-template-columns:1fr}.hero h1{font-size:46px}.group-panel{max-width:580px}.section{padding:65px 0}.section-head{display:block;margin-bottom:28px}.section-head p{margin-top:13px}.signal-grid{grid-template-columns:repeat(2,1fr)}.feature-image{min-height:320px}.scene-grid,.faq-list{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr;gap:31px}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.cta-box{display:block}.cta-actions{margin-top:25px}}
@media(max-width:520px){.logo{font-size:19px}.hero h1{font-size:38px}.hero-text{font-size:16px}.hero-actions,.cta-actions{flex-direction:column;align-items:stretch}.hero-actions .btn,.cta-actions .btn{width:100%}.group-buttons{grid-template-columns:1fr}.signal-item{padding:20px 8px}.project-grid,.timeline{grid-template-columns:1fr}.scene{grid-template-columns:58px 1fr;padding:20px}.scene-icon{width:52px;height:52px}.section{padding:54px 0}.feature-image{min-height:250px}.article-photo{height:265px}.footer-nav{grid-template-columns:1fr}}

/* roulang page: category1 */
:root{
 --navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;--gold:#f1bd59;
 --cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;--soft:#edf5f4;
 --radius-sm:12px;--radius:20px;--radius-lg:30px;--shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);
 --container:1180px;--ease:all .25s ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.78}
a{color:inherit;text-decoration:none;transition:var(--ease)}
img{display:block;max-width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.section{padding:88px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}
.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}
.section-head h2{max-width:670px;margin:7px 0 0;font-size:clamp(29px,4vw,46px);line-height:1.2;letter-spacing:-.045em}
.section-head p{max-width:470px;margin:0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(52,212,197,.65);outline-offset:3px}
.btn-primary{background:var(--aqua);color:#052827;box-shadow:0 10px 20px rgba(52,212,197,.22)}
.btn-primary:hover{background:#58e4d6;box-shadow:0 15px 27px rgba(52,212,197,.34)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--gold)}
.btn-ink{border-color:var(--navy);color:var(--navy)}
.btn-ink:hover{background:var(--navy);color:#fff}
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}
.nav-wrap{height:76px;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}
.logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}
.logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}
.logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}
.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}
.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}
.nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}
.menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
.inner-hero{position:relative;overflow:hidden;background:linear-gradient(95deg,rgba(4,20,32,.94),rgba(11,45,58,.72)),url('/assets/images/backpic/back-2.webp') center/cover;color:#fff}
.inner-hero:after{content:"";position:absolute;width:420px;height:420px;right:-120px;bottom:-220px;border:1px solid rgba(52,212,197,.35);border-radius:50%;box-shadow:0 0 0 44px rgba(52,212,197,.07),0 0 0 88px rgba(52,212,197,.04)}
.inner-hero .container{position:relative;z-index:1}
.breadcrumb{padding-top:28px;color:#b7cbd2;font-size:13px}
.breadcrumb a:hover{color:var(--aqua)}
.inner-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:end;padding:70px 0 76px}
.inner-hero .eyebrow{color:var(--aqua)}
h1{max-width:730px;margin:16px 0;font-size:clamp(43px,5vw,68px);line-height:1.1;letter-spacing:-.06em}
.hero-lead{max-width:680px;margin:0;color:#d5e4e6;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.score-panel{padding:24px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg)}
.score-top{display:flex;justify-content:space-between;color:#d4e4e8;font-size:13px}
.progress-title{margin:17px 0 9px;font-size:17px;font-weight:800}
.progress{height:10px;overflow:hidden;background:rgba(255,255,255,.18);border-radius:999px}
.progress i{display:block;width:76%;height:100%;background:var(--aqua);border-radius:inherit}
.progress-note{display:flex;justify-content:space-between;margin-top:9px;color:#d0e4e5;font-size:12px}
.panel-points{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.panel-points span{padding:9px;background:rgba(255,255,255,.09);border-radius:10px;color:#e6f4f2;font-size:13px}
.intro-strip{background:var(--navy);color:#d1e0e3}
.intro-strip .container{display:grid;grid-template-columns:210px 1fr auto;gap:28px;align-items:center;padding:25px 0}
.intro-strip b{font-size:19px;color:var(--gold)}
.intro-strip p{margin:0;font-size:14px}
.intro-strip a{color:var(--aqua);font-weight:800;font-size:14px}
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.feature-main{position:relative;min-height:430px;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy);color:#fff}
.feature-main img{position:absolute;inset:0;width:100%;height:100%;opacity:.64;transition:transform .5s ease}
.feature-main:hover img{transform:scale(1.05)}
.feature-main:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,20,31,.94),rgba(5,20,31,.04) 75%)}
.feature-main-content{position:absolute;z-index:1;left:34px;right:34px;bottom:30px}
.tag{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(52,212,197,.18);color:var(--aqua);font-size:12px;font-weight:800}
.feature-main h3{margin:13px 0 10px;font-size:30px;line-height:1.28}
.feature-main p{max-width:620px;margin:0;color:#d3e2e5}
.focus-list{display:grid;gap:14px}
.focus-item{display:grid;grid-template-columns:116px 1fr;gap:17px;min-height:133px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:17px;transition:var(--ease)}
.focus-item:hover{transform:translateX(5px);border-color:rgba(22,170,157,.5);box-shadow:var(--shadow)}
.focus-item img{width:116px;height:109px;border-radius:11px}
.focus-item h3{margin:5px 0;font-size:17px;line-height:1.4}
.focus-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.meta{color:var(--aqua-dark);font-size:12px;font-weight:800}
.dark-area{background:var(--navy-deep);color:#fff}
.dark-area .section-head h2{color:#fff}
.dark-area .section-head p{color:#b7cbd2}
.analysis-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:58px;align-items:center}
.analysis-image{position:relative}
.analysis-image img{height:470px;width:100%;border-radius:var(--radius-lg)}
.floating-stat{position:absolute;right:-22px;bottom:25px;width:190px;padding:20px;background:var(--gold);color:#41300f;border-radius:16px;box-shadow:var(--shadow-lg)}
.floating-stat b{display:block;font-size:35px;line-height:1}
.floating-stat span{font-size:13px;font-weight:800}
.check-list{display:grid;gap:16px}
.check-list article{padding:4px 0 16px 52px;position:relative;border-bottom:1px solid rgba(255,255,255,.15)}
.check-list article:before{content:"✓";position:absolute;left:0;top:4px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(52,212,197,.16);color:var(--aqua);font-weight:900}
.check-list h3{margin:0 0 5px;font-size:19px}
.check-list p{margin:0;color:#c3d4d9;font-size:14px}
.scene-layout{display:grid;grid-template-columns:280px 1fr;gap:56px}
.scene-sticky p{color:var(--muted)}
.scene-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.scene-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:var(--ease)}
.scene-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.scene-number{display:block;color:var(--aqua-dark);font-size:13px;font-weight:900}
.scene-card h3{margin:10px 0 7px;font-size:20px}
.scene-card p{margin:0;color:var(--muted);font-size:14px}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.timeline:before{content:"";position:absolute;left:7%;right:7%;top:22px;height:1px;background:var(--line)}
.timeline article{position:relative;padding-top:55px}
.timeline article:before{content:"";position:absolute;top:14px;left:0;width:17px;height:17px;border:4px solid var(--cream);border-radius:50%;background:var(--aqua-dark);box-shadow:0 0 0 1px var(--aqua-dark)}
.timeline strong{font-size:17px}
.timeline p{margin:7px 0 0;color:var(--muted);font-size:14px}
.data-board{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow)}
.data-copy{padding:52px}
.data-copy h2{margin:10px 0 17px;font-size:36px;line-height:1.25}
.data-copy p{color:var(--muted)}
.data-image{min-height:380px;position:relative}
.data-image img{width:100%;height:100%}
.data-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(16,40,59,.12),rgba(52,212,197,.24))}
.data-chips{display:flex;flex-wrap:wrap;gap:9px;margin:23px 0}
.data-chips span{padding:7px 11px;border-radius:999px;background:var(--soft);color:var(--navy);font-size:13px;font-weight:800}
.news-section{background:#edf5f4}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:var(--ease)}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.news-card img{width:100%;height:185px}
.news-card-body{padding:20px}
.news-card h3{margin:9px 0;font-size:19px;line-height:1.45}
.news-card p{margin:0 0 15px;color:var(--muted);font-size:14px}
.text-link{color:var(--aqua-dark);font-size:14px;font-weight:900}
.text-link:hover{color:var(--navy)}
.quote-wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:42px;align-items:center}
.quote-card{padding:42px;background:var(--navy);border-radius:var(--radius-lg);color:#fff}
.quote-mark{color:var(--gold);font-size:58px;line-height:.6}
.quote-card blockquote{margin:20px 0;font-size:23px;line-height:1.6;font-weight:800}
.quote-card cite{color:#b9ced3;font-size:14px;font-style:normal}
.quote-text h2{margin:9px 0 16px;font-size:37px;line-height:1.25}
.quote-text p{color:var(--muted)}
.faq-list{display:grid;gap:12px;max-width:920px;margin:auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;font-weight:900;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";color:var(--aqua-dark);font-size:25px;font-weight:400}
.faq-item[open] summary{color:var(--navy);border-bottom:1px solid var(--line)}
.faq-item[open] summary:after{content:"−"}
.faq-item p{margin:0;padding:17px 22px 21px;color:var(--muted);font-size:15px}
.cta{padding:0 0 90px}
.cta-box{position:relative;overflow:hidden;padding:56px 62px;border-radius:var(--radius-lg);background:linear-gradient(100deg,#10384d,#125d66);color:#fff}
.cta-box:after{content:"";position:absolute;width:400px;height:400px;right:-120px;top:-190px;border:38px solid rgba(52,212,197,.15);border-radius:50%}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{max-width:650px;margin:10px 0 12px;font-size:39px;line-height:1.2}
.cta-box p{max-width:650px;margin:0;color:#d2e4e5}
.cta-box .btn{margin-top:25px}
.site-footer{background:var(--navy-deep);color:#c7d6da}
.footer-top{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:50px;padding:65px 0 44px}
.footer-brand p{max-width:340px;margin:18px 0 0;color:#a9c0c7;font-size:14px}
.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px;align-content:start}
.footer-nav a{font-size:14px}
.footer-nav a:hover{color:var(--aqua)}
.footer-record{font-size:13px;line-height:2;color:#a9c0c7}
.footer-record a:hover{color:var(--aqua)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:19px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#91aab2}
@media(max-width:1024px){
 .nav-wrap{gap:14px}.site-nav a{padding:8px 6px;font-size:13px}.nav-action{padding:10px 13px}
 .inner-hero-grid,.analysis-grid{gap:32px}.scene-layout{gap:30px}.section{padding:70px 0}
}
@media(max-width:768px){
 .container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{height:68px;justify-content:space-between}
 .menu-toggle{display:block}.nav-action{display:none}.site-nav{display:none;position:absolute;top:68px;left:0;right:0;padding:14px 16px;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch}
 .site-nav.open{display:flex}.site-nav a{padding:11px 13px}
 .inner-hero-grid,.feature-grid,.analysis-grid,.quote-wrap,.data-board{grid-template-columns:1fr}.inner-hero-grid{padding:48px 0 58px}.score-panel{max-width:520px}
 .intro-strip .container{grid-template-columns:1fr;gap:8px;padding:22px 0}.section-head{display:block}.section-head p{margin-top:14px}
 .scene-layout{grid-template-columns:1fr}.scene-list{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}.timeline:before{display:none}
 .analysis-image img{height:360px}.floating-stat{right:15px}.data-image{min-height:290px}.news-grid{grid-template-columns:1fr 1fr}
 .footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
 body{font-size:15px}.section{padding:54px 0}h1{font-size:40px}.hero-lead{font-size:16px}.inner-hero-grid{padding-top:38px}
 .panel-points,.scene-list,.timeline,.news-grid{grid-template-columns:1fr}.focus-item{grid-template-columns:92px 1fr}.focus-item img{width:92px;height:95px}
 .feature-main{min-height:375px}.feature-main-content{left:22px;right:22px;bottom:22px}.feature-main h3{font-size:25px}
 .analysis-image img{height:280px}.data-copy{padding:32px 25px}.data-copy h2,.quote-text h2{font-size:30px}.quote-card{padding:30px}.quote-card blockquote{font-size:20px}
 .cta-box{padding:38px 25px}.cta-box h2{font-size:31px}.footer-top{grid-template-columns:1fr;padding-top:48px}.footer-brand{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin:4px 0}
}

/* roulang page: category5 */
:root{
--navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;--gold:#f1bd59;--cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;--soft:#edf5f4;--danger:#d96854;--radius-sm:12px;--radius:20px;--radius-lg:30px;--shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);--container:1180px;--ease:all .25s ease
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}a{color:inherit;text-decoration:none;transition:var(--ease)}img{display:block;max-width:100%;object-fit:cover}button,input{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}.section{padding:88px 0;position:relative}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:38px}.section-head h2{margin:7px 0 0;font-size:clamp(28px,4vw,45px);line-height:1.2;letter-spacing:-.045em}.section-head p{max-width:510px;margin:0;color:var(--muted)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}.btn:hover{transform:translateY(-3px)}.btn:focus-visible,.site-nav a:focus-visible,.faq-q:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.btn-primary{background:var(--aqua);color:#052827;box-shadow:0 10px 20px rgba(52,212,197,.22)}.btn-primary:hover{background:#57e3d4;box-shadow:0 14px 28px rgba(52,212,197,.34)}.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:var(--gold)}.btn-outline{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.08)}.btn-outline:hover{background:#fff;color:var(--navy)}.btn-ink{border-color:var(--navy);color:var(--navy)}.btn-ink:hover{background:var(--navy);color:#fff}
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}.nav-wrap{height:76px;display:flex;align-items:center;gap:26px}.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}.logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}.logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}.logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}.site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}.nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}.menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
.data-hero{min-height:590px;position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(90deg,rgba(4,20,32,.92),rgba(8,36,51,.76) 58%,rgba(8,34,45,.65)),url('/assets/images/backpic/back-2.webp') center/cover}.data-hero:after{content:"";position:absolute;right:-9vw;bottom:-13vw;width:42vw;height:42vw;border:1px solid rgba(52,212,197,.28);border-radius:50%;box-shadow:0 0 0 38px rgba(52,212,197,.05),0 0 0 78px rgba(52,212,197,.035)}.hero-content{position:relative;z-index:1;padding:86px 0}.crumb{display:flex;gap:9px;align-items:center;margin-bottom:24px;color:#c8d8dc;font-size:13px}.crumb span{color:var(--aqua)}.hero-grid{display:grid;grid-template-columns:1.04fr .76fr;gap:64px;align-items:center}.hero-copy .eyebrow{color:var(--aqua)}h1{max-width:690px;margin:17px 0;font-size:clamp(42px,5.8vw,72px);line-height:1.1;letter-spacing:-.065em;color:#fff}.hero-copy p{max-width:690px;margin:0;color:#d2e0e4;font-size:17px;line-height:1.9}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.video-panel{position:relative;padding:24px;min-height:285px;display:flex;flex-direction:column;justify-content:end;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(48,107,121,.67),rgba(8,27,42,.78));box-shadow:var(--shadow-lg);overflow:hidden}.video-panel:before{content:"数据视野";position:absolute;top:18px;right:21px;color:rgba(255,255,255,.24);font-size:42px;font-weight:900;letter-spacing:.06em}.play{position:relative;z-index:1;width:68px;height:68px;display:grid;place-items:center;margin-bottom:22px;color:var(--navy);background:var(--gold);border:0;border-radius:50%;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:var(--ease)}.play:hover{transform:scale(1.08);background:#ffe09a}.play i{width:0;height:0;margin-left:5px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid var(--navy)}.video-panel b{position:relative;z-index:1;color:#fff;font-size:21px}.video-panel span{position:relative;z-index:1;color:#c9dde0;font-size:14px}
.signal-bar{position:relative;z-index:2;margin-top:-1px;background:var(--navy)}.signal-grid{display:grid;grid-template-columns:repeat(4,1fr)}.signal{padding:25px 24px;border-right:1px solid rgba(255,255,255,.12)}.signal:last-child{border:0}.signal strong{display:block;color:var(--aqua);font-size:27px;line-height:1.2}.signal span{color:#b9cbd2;font-size:13px}
.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}.intro-sticky{position:sticky;top:104px}.intro-sticky h2{margin:12px 0 20px;font-size:clamp(30px,3.5vw,44px);line-height:1.25;letter-spacing:-.04em}.intro-sticky p{margin:0;color:var(--muted)}.reading-list{border-top:1px solid var(--line)}.reading-item{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.number{color:var(--aqua-dark);font-size:23px;font-weight:900}.reading-item h3{margin:0 0 4px;font-size:18px}.reading-item p{margin:0;color:var(--muted);font-size:14px}.arrow{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--line);border-radius:50%;color:var(--navy);font-size:20px}.reading-item:hover .arrow{background:var(--navy);border-color:var(--navy);color:#fff}.reading-item:hover h3{color:var(--aqua-dark)}
.dark-section{background:var(--navy-deep);color:#fff}.dark-section .eyebrow{color:var(--aqua)}.dark-section .section-head p{color:#adc3ca}.metric-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}.metric-board{padding:35px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg)}.metric-board h3{margin:0 0 20px;font-size:24px}.meter{display:grid;grid-template-columns:120px 1fr 45px;gap:14px;align-items:center;margin:17px 0;color:#d7e4e6;font-size:14px}.track{height:10px;overflow:hidden;background:rgba(255,255,255,.13);border-radius:20px}.fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--aqua),#83eadf)}.meter b{color:var(--gold);font-size:14px}.metric-side{display:grid;gap:16px}.stat-card{padding:24px;border-radius:var(--radius);background:var(--navy-soft);border:1px solid rgba(255,255,255,.1)}.stat-card span{display:block;color:#b7ced4;font-size:13px}.stat-card strong{display:block;margin:5px 0;color:var(--gold);font-size:35px;line-height:1.1}.stat-card p{margin:0;color:#d2e0e3;font-size:14px;line-height:1.65}
.feature-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:26px}.feature-photo{position:relative;min-height:500px;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy)}.feature-photo img{width:100%;height:100%;position:absolute;inset:0;opacity:.72}.feature-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,21,31,.88),transparent 62%)}.photo-copy{position:absolute;z-index:1;right:32px;bottom:30px;left:32px;color:#fff}.photo-copy h3{margin:8px 0;font-size:30px;line-height:1.2}.photo-copy p{max-width:580px;margin:0;color:#d5e3e5}.focus-column{display:grid;gap:18px}.focus-card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 18px rgba(12,39,55,.04);transition:var(--ease)}.focus-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.focus-card .tag{display:inline-block;padding:4px 10px;border-radius:99px;color:#0b675f;background:#dff8f5;font-size:12px;font-weight:800}.focus-card h3{margin:12px 0 8px;font-size:20px}.focus-card p{margin:0;color:var(--muted);font-size:14px}
.scene-section{background:var(--soft)}.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.scene-card{padding:29px;background:#fff;border:1px solid #dceae8;border-radius:var(--radius);transition:var(--ease)}.scene-card:hover{transform:translateY(-6px);border-color:var(--aqua);box-shadow:var(--shadow)}.scene-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:21px;border-radius:14px;color:var(--navy);background:var(--gold);font-size:21px;font-weight:900}.scene-card h3{margin:0 0 10px;font-size:20px}.scene-card p{margin:0;color:var(--muted);font-size:14px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}.step{position:relative;padding:30px 25px;min-height:216px;border-right:1px solid var(--line)}.step:last-child{border:0}.step-no{display:block;margin-bottom:32px;color:var(--aqua-dark);font-size:13px;font-weight:900;letter-spacing:.1em}.step h3{margin:0 0 9px;font-size:20px}.step p{margin:0;color:var(--muted);font-size:14px}.step:after{content:"→";position:absolute;right:-11px;top:83px;z-index:1;display:grid;place-items:center;width:22px;height:22px;color:#fff;background:var(--navy);border-radius:50%;font-size:13px}.step:last-child:after{display:none}
.story-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:center}.story-image{min-height:390px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}.story-image img{width:100%;height:100%}.story-copy h2{margin:11px 0 18px;font-size:clamp(30px,3.8vw,44px);line-height:1.23;letter-spacing:-.04em}.story-copy p{color:var(--muted)}.quote{margin:25px 0;padding:18px 20px;border-left:3px solid var(--aqua-dark);color:var(--navy);background:#fff;font-weight:700}.check-list{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0;margin:26px 0;list-style:none}.check-list li{position:relative;padding-left:25px;font-size:14px}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--aqua-dark);font-weight:900}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.faq-intro h2{margin:11px 0 15px;font-size:clamp(30px,3.8vw,43px);line-height:1.22}.faq-intro p{color:var(--muted)}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:21px 2px;border:0;color:var(--ink);background:transparent;text-align:left;font-weight:800;font-size:17px}.faq-q span:last-child{color:var(--aqua-dark);font-size:25px;font-weight:400}.faq-a{display:none;padding:0 2px 21px;color:var(--muted);font-size:15px}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
.cta{padding:0 0 92px}.cta-box{position:relative;overflow:hidden;padding:59px 62px;color:#fff;background:var(--navy);border-radius:var(--radius-lg)}.cta-box:before{content:"";position:absolute;right:-90px;top:-120px;width:360px;height:360px;border:40px solid rgba(52,212,197,.14);border-radius:50%}.cta-box>*{position:relative;z-index:1}.cta-box h2{max-width:720px;margin:10px 0 13px;font-size:clamp(30px,4vw,47px);line-height:1.18;letter-spacing:-.045em}.cta-box p{max-width:650px;margin:0;color:#c0d3d8}.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.site-footer{padding:64px 0 24px;color:#b9cbd2;background:var(--navy-deep)}.footer-top{display:grid;grid-template-columns:1.15fr 1.4fr .85fr;gap:50px;padding-bottom:45px;border-bottom:1px solid rgba(255,255,255,.12)}.footer-brand p{max-width:330px;margin:15px 0 0;font-size:14px;line-height:1.75}.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 18px;align-content:start}.footer-nav a{font-size:14px}.footer-nav a:hover{color:var(--aqua)}.footer-record{font-size:13px;line-height:2}.footer-record a:hover{color:var(--aqua)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;color:#8199a3;font-size:13px}
.modal{position:fixed;z-index:500;inset:0;display:none;place-items:center;padding:24px;background:rgba(3,15,24,.8);backdrop-filter:blur(5px)}.modal.show{display:grid}.modal-card{position:relative;width:min(720px,100%);padding:48px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.modal-close{position:absolute;top:15px;right:18px;width:36px;height:36px;border:0;border-radius:50%;color:var(--navy);background:var(--soft);font-size:24px}.modal-card h2{margin:0 0 10px;font-size:30px}.modal-card p{color:var(--muted)}.modal-visual{display:grid;place-items:center;min-height:190px;margin-top:22px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy-soft));border-radius:18px;font-size:18px;font-weight:800}
@media(max-width:1024px){.nav-wrap{gap:15px}.site-nav a{padding:8px 7px;font-size:13px}.nav-action{padding:10px 13px}.hero-grid,.intro-grid,.faq-wrap{gap:40px}.metric-layout{grid-template-columns:1fr}.footer-top{gap:30px}.timeline{grid-template-columns:repeat(2,1fr)}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}.step:nth-child(2):after{display:none}.step:nth-child(3):after{display:grid}}
@media(max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.section{padding:65px 0}.nav-wrap{height:67px;justify-content:space-between}.menu-toggle{display:block}.site-nav{position:absolute;top:67px;right:0;left:0;display:none;max-height:calc(100vh - 67px);padding:12px 16px 18px;overflow:auto;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.12);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.site-nav a{padding:11px 12px}.nav-action{display:none}.hero-content{padding:64px 0}.hero-grid,.feature-grid,.story-grid,.faq-wrap{grid-template-columns:1fr}.video-panel{min-height:230px}.signal-grid{grid-template-columns:repeat(2,1fr)}.signal:nth-child(2){border-right:0}.signal:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}.section-head{display:block}.section-head p{margin-top:14px}.intro-sticky{position:static}.scene-grid{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.cta-box{padding:43px 30px}.check-list{grid-template-columns:1fr}}
@media(max-width:520px){body{font-size:15px}.section{padding:54px 0}h1{font-size:42px}.hero-copy p{font-size:15px}.signal-grid,.scene-grid,.timeline{grid-template-columns:1fr}.signal,.signal:nth-child(2){border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.signal:last-child{border-bottom:0}.reading-item{grid-template-columns:44px 1fr}.reading-item .arrow{display:none}.meter{grid-template-columns:86px 1fr 38px;font-size:12px}.feature-photo{min-height:370px}.photo-copy{right:22px;bottom:22px;left:22px}.photo-copy h3{font-size:25px}.timeline{border-radius:20px}.step,.step:nth-child(2){min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step:after{display:none}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-nav{grid-template-columns:1fr}.cta{padding-bottom:58px}.cta-box{padding:36px 24px}.modal-card{padding:38px 25px}.hero-actions .btn{width:100%}}

/* roulang page: category6 */
:root{
--navy:#10283b;--navy-deep:#081a29;--navy-soft:#1b4058;--aqua:#34d4c5;--aqua-dark:#16aa9d;--gold:#f1bd59;--cream:#f7f5ef;--paper:#fff;--ink:#14222e;--muted:#647480;--line:#dce5e7;--soft:#edf5f4;--danger:#d96854;--radius-sm:12px;--radius:20px;--radius-lg:30px;--shadow:0 16px 42px rgba(12,39,55,.10);--shadow-lg:0 22px 60px rgba(4,25,40,.22);--container:1180px;--ease:all .25s ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;font-size:16px;line-height:1.75}
a{color:inherit;text-decoration:none;transition:var(--ease)}
img{display:block;max-width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.section{padding:88px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--aqua-dark);font-size:13px;font-weight:800;letter-spacing:.1em}
.eyebrow:before{content:"";width:24px;height:2px;background:currentColor}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}
.section-head h2{margin:7px 0 0;font-size:clamp(28px,4vw,45px);line-height:1.22;letter-spacing:-.045em}
.section-head p{max-width:510px;margin:0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 21px;border:1px solid transparent;border-radius:999px;font-weight:800;line-height:1.2;transition:var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:focus,button:focus,a:focus{outline:3px solid rgba(52,212,197,.38);outline-offset:3px}
.btn-primary{color:#052827;background:var(--aqua);box-shadow:0 10px 20px rgba(52,212,197,.22)}
.btn-primary:hover{background:#57e3d4;box-shadow:0 14px 28px rgba(52,212,197,.34)}
.btn-light{color:var(--navy);background:#fff}
.btn-light:hover{background:var(--gold)}
.btn-outline{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08)}
.btn-outline:hover{color:var(--navy);background:#fff}
.btn-ink{color:var(--navy);border-color:var(--navy)}
.btn-ink:hover{color:#fff;background:var(--navy)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(8,26,41,.94);backdrop-filter:blur(13px);border-bottom:1px solid rgba(255,255,255,.09)}
.nav-wrap{height:76px;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:#fff;font-size:21px;font-weight:900;letter-spacing:.03em}
.logo-mark{position:relative;width:29px;height:29px;border:2px solid var(--aqua);border-radius:50%}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:var(--aqua);border-radius:3px}
.logo-mark:before{width:15px;height:2px;top:12px;left:5px;transform:rotate(-38deg)}
.logo-mark:after{width:2px;height:15px;top:5px;left:13px;transform:rotate(-38deg)}
.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.site-nav a{padding:9px 10px;color:#c4d4dc;font-size:14px;font-weight:700;white-space:nowrap;border-radius:8px}
.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(52,212,197,.15)}
.nav-action{flex-shrink:0;padding:12px 17px;font-size:14px}
.menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:25px;padding:5px}
.guide-hero{position:relative;overflow:hidden;min-height:608px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(4,20,32,.94),rgba(9,39,56,.82) 54%,rgba(7,33,43,.57)),url('/assets/images/backpic/back-3.webp') center/cover}
.guide-hero:after{content:"";position:absolute;width:390px;height:390px;right:-130px;bottom:-170px;border:1px solid rgba(52,212,197,.35);border-radius:50%;box-shadow:0 0 0 45px rgba(52,212,197,.07),0 0 0 90px rgba(52,212,197,.04)}
.hero-inner{width:100%;padding:74px 0;position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}
.hero-copy .eyebrow{color:var(--aqua)}
.hero-copy h1{max-width:700px;margin:17px 0;font-size:clamp(42px,5.3vw,69px);line-height:1.1;letter-spacing:-.06em;color:#fff}
.hero-copy h1 strong{color:var(--gold)}
.hero-copy p{max-width:650px;margin:0;color:#d1e0e3;font-size:17px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
.hero-points span{padding:7px 12px;color:#dcecef;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.07);font-size:13px}
.live-card{padding:26px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);background:rgba(8,26,41,.82);box-shadow:var(--shadow-lg);backdrop-filter:blur(10px)}
.live-label{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:800}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 5px rgba(217,104,84,.16)}
.live-card h2{margin:17px 0 7px;color:#fff;font-size:27px;line-height:1.3}
.live-card p{margin:0;color:#bcd0d7;font-size:14px}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}
.countdown div{padding:11px 4px;border-radius:12px;color:#fff;background:rgba(255,255,255,.09);text-align:center}
.countdown b{display:block;color:var(--aqua);font-size:25px;line-height:1.2}
.countdown small{color:#b7cbd1;font-size:11px}
.subscribe{display:flex;gap:9px}
.subscribe input{min-width:0;flex:1;padding:12px;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;outline:0;background:rgba(255,255,255,.08)}
.subscribe input::placeholder{color:#adc0c7}
.subscribe input:focus{border-color:var(--aqua)}
.trust-strip{background:var(--navy)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:26px 24px;border-right:1px solid rgba(255,255,255,.1)}
.trust-item:last-child{border:0}
.trust-item b{display:block;color:var(--aqua);font-size:27px;line-height:1.2}
.trust-item span{color:#bed0d6;font-size:13px}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.intro-image{min-height:470px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.intro-image img{width:100%;height:100%}
.intro-copy h2{margin:10px 0 18px;font-size:clamp(29px,3.6vw,43px);line-height:1.25;letter-spacing:-.04em}
.intro-copy p{color:var(--muted);margin:0 0 16px}
.check-list{display:grid;gap:12px;margin:25px 0}
.check-list div{position:relative;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#40535e;font-weight:700}
.check-list div:before{content:"✓";position:absolute;left:15px;top:13px;width:20px;height:20px;border-radius:50%;color:#05645e;background:#c9f5ed;text-align:center;line-height:20px;font-size:13px}
.focus-area{background:var(--soft)}
.focus-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:40px}
.focus-copy{padding:12px 12px 12px 0}
.focus-copy h2{margin:10px 0 18px;font-size:clamp(29px,3.5vw,42px);line-height:1.25}
.focus-copy p{color:var(--muted)}
.focus-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.focus-tabs button{padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:#516570;background:#fff;font-weight:800}
.focus-tabs button.active,.focus-tabs button:hover{color:#fff;border-color:var(--navy);background:var(--navy)}
.focus-list{display:grid;gap:14px}
.focus-item{display:grid;grid-template-columns:65px 1fr auto;align-items:center;gap:18px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(16,40,59,.06)}
.focus-num{color:var(--aqua-dark);font-size:26px;font-weight:900}
.focus-item h3{margin:0 0 3px;font-size:18px}
.focus-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.arrow-link{color:var(--aqua-dark);font-weight:900}
.arrow-link:hover{transform:translateX(4px)}
.sport-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sport-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 8px 24px rgba(12,39,55,.05);transition:var(--ease)}
.sport-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.sport-card img{width:100%;height:180px}
.sport-card div{padding:19px}
.sport-card span{color:var(--aqua-dark);font-size:12px;font-weight:900;letter-spacing:.08em}
.sport-card h3{margin:7px 0;font-size:20px}
.sport-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline:before{content:"";position:absolute;top:38px;left:7%;right:7%;height:1px;background:var(--line)}
.step{position:relative;padding:0 14px}
.step-no{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:18px;color:var(--navy);border:6px solid var(--cream);border-radius:50%;background:var(--gold);font-size:22px;font-weight:900}
.step h3{margin:0 0 8px;font-size:19px}
.step p{margin:0;color:var(--muted);font-size:14px}
.dark-panel{padding:55px;overflow:hidden;border-radius:var(--radius-lg);background:var(--navy-deep);color:#fff;position:relative}
.dark-panel:before{content:"";position:absolute;right:-50px;top:-160px;width:360px;height:360px;border:1px solid rgba(52,212,197,.25);border-radius:50%;box-shadow:0 0 0 42px rgba(52,212,197,.05)}
.data-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.dark-panel h2{margin:8px 0 17px;font-size:clamp(28px,3.7vw,43px);line-height:1.25}
.dark-panel p{color:#bdcfd5}
.data-list{display:grid;gap:13px}
.data-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.06)}
.data-row span{color:#c3d5da;font-size:14px}
.data-row b{color:var(--aqua);font-size:17px}
.quote-section{padding-top:35px}
.quote-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px}
.quote-card{padding:34px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.quote-mark{color:var(--gold);font-size:58px;line-height:.8;font-family:Georgia,serif}
.quote-card blockquote{margin:14px 0 22px;font-size:21px;line-height:1.75;font-weight:800}
.quote-card cite{font-style:normal;color:var(--muted);font-size:14px}
.mini-news{padding:29px;border-radius:var(--radius);background:#e2efed}
.mini-news h3{margin:0 0 15px;font-size:22px}
.mini-news a{display:block;padding:13px 0;border-bottom:1px solid rgba(16,40,59,.12);font-weight:800}
.mini-news a:last-child{border:0}
.mini-news a:hover{color:var(--aqua-dark)}
.faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:66px}
.faq-copy h2{margin:10px 0 16px;font-size:clamp(29px,3.7vw,43px);line-height:1.25}
.faq-copy p{color:var(--muted)}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border:0;color:var(--ink);background:#fff;text-align:left;font-weight:900}
.faq-q i{flex:0 0 auto;color:var(--aqua-dark);font-style:normal;font-size:23px;transition:var(--ease)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 20px;color:var(--muted);font-size:15px}
.faq-item.open .faq-a{display:block}
.cta-section{padding:35px 0 94px}
.cta-box{position:relative;overflow:hidden;padding:58px 64px;border-radius:var(--radius-lg);background:linear-gradient(105deg,#16aa9d,#34d4c5);color:#042d2a}
.cta-box:after{content:"";position:absolute;right:-55px;top:-160px;width:410px;height:410px;border:32px solid rgba(255,255,255,.16);border-radius:50%}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{max-width:710px;margin:8px 0 13px;font-size:clamp(30px,4vw,47px);line-height:1.2;letter-spacing:-.04em}
.cta-box p{max-width:680px;margin:0 0 24px;font-weight:600}
.site-footer{padding:59px 0 20px;color:#bbccd2;background:var(--navy-deep)}
.footer-top{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:48px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-brand p{max-width:350px;margin:15px 0 0;color:#9fb4bc;font-size:14px;line-height:1.8}
.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 17px;align-content:start}
.footer-nav a{font-size:14px}
.footer-nav a:hover,.footer-record a:hover{color:var(--aqua)}
.footer-record{display:grid;gap:7px;font-size:13px;line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;padding-top:18px;color:#809aa5;font-size:12px}
@media(max-width:1024px){
.site-nav{gap:0}.site-nav a{padding:8px 7px;font-size:13px}.nav-wrap{gap:15px}.nav-action{padding:10px 13px}
.hero-grid,.intro-grid,.focus-layout,.data-layout,.faq-wrap{gap:35px}.sport-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.container{width:min(calc(100% - 32px),var(--container))}.section{padding:66px 0}.nav-wrap{height:67px;justify-content:space-between}.menu-toggle{display:block}.nav-action{display:none}.site-nav{display:none;position:absolute;top:67px;left:0;right:0;padding:14px 16px 18px;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch}.site-nav.open{display:flex}.site-nav a{padding:11px 12px}
.hero-grid,.intro-grid,.focus-layout,.data-layout,.faq-wrap,.quote-grid{grid-template-columns:1fr}.guide-hero{min-height:auto}.hero-inner{padding:65px 0}.live-card{max-width:560px}.section-head{display:block;margin-bottom:28px}.section-head p{margin-top:14px}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item:nth-child(2){border-right:0}.trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}.intro-image{min-height:320px}.timeline{grid-template-columns:repeat(2,1fr);gap:27px}.timeline:before{display:none}.dark-panel{padding:35px 26px}.cta-box{padding:40px 28px}.footer-top{grid-template-columns:1fr;gap:28px}
}
@media(max-width:520px){
.hero-copy h1{font-size:39px}.hero-copy p{font-size:16px}.hero-actions,.subscribe{flex-direction:column}.hero-actions .btn,.subscribe .btn{width:100%}.countdown{gap:6px}.countdown b{font-size:21px}.trust-item{padding:20px 12px}.sport-grid{grid-template-columns:1fr}.focus-item{grid-template-columns:48px 1fr;gap:12px}.focus-item .arrow-link{display:none}.timeline{grid-template-columns:1fr}.step{padding:0}.footer-bottom{flex-direction:column;gap:4px}.cta-section{padding-bottom:66px}
}