/* roulang page: index */
:root{
      --ink:#172033;
      --muted:#667085;
      --soft:#f6f7fb;
      --paper:#ffffff;
      --line:#e8eaf0;
      --peach:#ff7968;
      --peach-dark:#e8574d;
      --peach-pale:#fff0ed;
      --plum:#41234c;
      --gold:#f6bd60;
      --mint:#ccefe5;
      --navy:#15243a;
      --radius-sm:14px;
      --radius:22px;
      --radius-lg:32px;
      --shadow-sm:0 8px 24px rgba(23,32,51,.06);
      --shadow:0 16px 46px rgba(23,32,51,.10);
      --shadow-deep:0 24px 60px rgba(28,20,44,.22);
      --transition:all .25s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--paper);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.7;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{border:0}
    ::selection{background:var(--peach);color:#fff}
    .container{max-width:1180px}
    .section{padding:102px 0}
    .section-soft{background:var(--soft)}
    .section-heading{max-width:680px;margin-bottom:48px}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--peach-dark);
      background:var(--peach-pale);
      border:1px solid #ffd9d3;
      border-radius:999px;
      padding:6px 13px;
      font-size:13px;
      font-weight:700;
      letter-spacing:.08em;
      margin-bottom:16px;
    }
    .eyebrow i{font-size:11px}
    .section-title{
      margin:0 0 14px;
      color:var(--ink);
      font-size:clamp(28px,3.2vw,42px);
      line-height:1.25;
      letter-spacing:-.04em;
      font-weight:800;
    }
    .section-desc{margin:0;color:var(--muted);font-size:17px}
    .focus-ring:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible{
      outline:3px solid rgba(255,121,104,.35);
      outline-offset:3px;
    }

    /* Header */
    .site-header{
      position:sticky;
      top:0;
      z-index:1050;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(232,234,240,.85);
    }
    .navbar{min-height:78px;padding:12px 0}
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      max-width:570px;
      padding:0;
      margin:0;
      font-weight:800;
      color:var(--ink)!important;
      line-height:1.3;
      font-size:15px;
    }
    .brand-mark{
      width:37px;
      height:37px;
      flex:0 0 37px;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:var(--peach);
      color:#fff;
      box-shadow:0 8px 18px rgba(255,121,104,.32);
    }
    .brand-mark i{font-size:16px}
    .navbar-nav{align-items:center;gap:7px}
    .nav-link{
      position:relative;
      color:var(--muted)!important;
      padding:8px 14px!important;
      border-radius:10px;
      font-size:14px;
      font-weight:700;
      transition:var(--transition);
    }
    .nav-link:hover,.nav-link.active{
      color:var(--peach-dark)!important;
      background:var(--peach-pale);
    }
    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin-left:8px;
      padding:10px 17px;
      border:1px solid var(--peach);
      border-radius:12px;
      background:var(--peach);
      color:#fff!important;
      font-size:14px;
      font-weight:800;
      transition:var(--transition);
      box-shadow:0 8px 18px rgba(255,121,104,.2);
    }
    .nav-cta:hover{background:var(--peach-dark);transform:translateY(-1px);box-shadow:0 12px 22px rgba(255,121,104,.3)}
    .navbar-toggler{padding:8px;border:1px solid var(--line);border-radius:11px;box-shadow:none!important}
    .navbar-toggler-icon{width:1.25em;height:1.25em}

    /* Hero */
    .hero{
      position:relative;
      min-height:700px;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:linear-gradient(125deg,#fff9f6 0%,#fff 50%,#f7f1ff 100%);
      padding:90px 0 74px;
    }
    .hero:before,.hero:after{
      position:absolute;
      content:"";
      width:490px;
      height:490px;
      border-radius:50%;
      filter:blur(2px);
      pointer-events:none;
    }
    .hero:before{background:rgba(255,185,169,.2);left:-220px;top:-160px}
    .hero:after{background:rgba(205,185,236,.22);right:-190px;bottom:-220px}
    .hero .container{position:relative;z-index:1}
    .hero-copy{padding:15px 0}
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 13px;
      color:var(--plum);
      border:1px solid #e8dced;
      border-radius:999px;
      background:rgba(255,255,255,.72);
      font-size:13px;
      font-weight:800;
      box-shadow:var(--shadow-sm);
    }
    .pulse-dot{
      width:8px;height:8px;border-radius:50%;background:var(--peach);
      box-shadow:0 0 0 5px rgba(255,121,104,.14);
    }
    .hero h1{
      margin:22px 0 22px;
      max-width:720px;
      font-size:clamp(39px,5.1vw,68px);
      line-height:1.13;
      letter-spacing:-.065em;
      font-weight:850;
      color:var(--navy);
    }
    .hero h1 em{font-style:normal;color:var(--peach-dark)}
    .hero-lead{
      max-width:620px;
      margin:0 0 30px;
      color:#596477;
      font-size:18px;
      line-height:1.9;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .btn-brand,.btn-outline-brand{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:51px;
      padding:12px 21px;
      border-radius:14px;
      font-size:15px;
      font-weight:800;
      transition:var(--transition);
    }
    .btn-brand{color:#fff;background:var(--peach);box-shadow:0 12px 25px rgba(255,121,104,.25)}
    .btn-brand:hover{background:var(--peach-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px rgba(232,87,77,.3)}
    .btn-outline-brand{color:var(--ink);background:#fff;border:1px solid var(--line)}
    .btn-outline-brand:hover{color:var(--peach-dark);border-color:#ffc6bd;background:var(--peach-pale);transform:translateY(-2px)}
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      margin-top:31px;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .trust-row span{display:inline-flex;align-items:center;gap:7px}
    .trust-row i{color:#58af95}
    .hero-board{
      position:relative;
      min-height:465px;
      margin-left:auto;
      border-radius:var(--radius-lg);
      overflow:hidden;
      background:var(--plum);
      box-shadow:var(--shadow-deep);
    }
    .hero-board:before{
      content:"";
      position:absolute;
      width:390px;height:390px;
      left:-140px;bottom:-160px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:50%;
      box-shadow:0 0 0 42px rgba(255,255,255,.05),0 0 0 83px rgba(255,255,255,.04);
    }
    .board-top{position:absolute;inset:0;padding:30px;color:#fff}
    .board-label{color:#f8d498;font-size:12px;font-weight:800;letter-spacing:.13em}
    .board-title{max-width:315px;margin:13px 0 0;font-size:29px;font-weight:800;line-height:1.3}
    .route-line{position:absolute;left:52px;top:160px;width:68%;height:185px}
    .route-line svg{width:100%;height:100%;overflow:visible}
    .route-dot{
      position:absolute;width:17px;height:17px;border:4px solid var(--plum);
      border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(246,189,96,.34);
    }
    .dot-one{left:47px;top:153px}.dot-two{left:48%;top:246px}.dot-three{right:8%;top:181px;background:var(--peach)}
    .route-card{
      position:absolute;
      right:22px;
      bottom:23px;
      left:22px;
      padding:17px 18px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:18px;
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(10px);
      color:#fff;
    }
    .route-card small{display:block;color:#e1d5e4;font-size:12px}
    .route-card strong{display:block;margin-top:4px;font-size:16px}
    .floating-tag{
      position:absolute;
      display:flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:12px;
      background:#fff;
      color:var(--ink);
      font-size:12px;
      font-weight:800;
      box-shadow:var(--shadow);
    }
    .tag-a{right:-15px;top:90px}.tag-b{left:-20px;bottom:84px}
    .floating-tag i{color:var(--peach)}

    /* Intro stats */
    .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
    .intro-visual{
      position:relative;
      min-height:380px;
      border-radius:var(--radius-lg);
      background:linear-gradient(145deg,#ffd4ca,#f9efdf);
      overflow:hidden;
    }
    .intro-visual:before{
      content:"";
      position:absolute;
      width:285px;height:285px;border-radius:50%;
      right:-58px;top:-50px;background:rgba(255,255,255,.4);
    }
    .film-frame{
      position:absolute;inset:48px 44px 45px;
      padding:24px;
      border:9px solid rgba(255,255,255,.86);
      border-radius:20px;
      background:var(--plum);
      box-shadow:0 18px 38px rgba(78,41,61,.25);
      color:#fff;
      transform:rotate(-3deg);
    }
    .film-frame:after{
      content:"";
      position:absolute;inset:11px;
      border:1px solid rgba(255,255,255,.2);border-radius:10px;
      pointer-events:none;
    }
    .frame-icon{position:absolute;right:25px;top:20px;color:var(--gold);font-size:31px}
    .film-frame p{position:relative;z-index:1;margin:65px 0 8px;color:#f4dce8;font-size:13px;letter-spacing:.11em}
    .film-frame h3{position:relative;z-index:1;max-width:205px;margin:0;font-size:25px;line-height:1.35;font-weight:800}
    .mini-rating{
      position:absolute;z-index:1;left:24px;bottom:23px;
      display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:800;
    }
    .mini-rating i{color:var(--gold)}
    .intro-text .section-heading{margin-bottom:25px}
    .intro-text p{margin:0 0 17px;color:var(--muted)}
    .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
    .stat-card{
      padding:16px 14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:#fff;
      transition:var(--transition);
    }
    .stat-card:hover{border-color:#ffd1c9;transform:translateY(-3px);box-shadow:var(--shadow-sm)}
    .stat-num{display:block;color:var(--peach-dark);font-size:22px;font-weight:850;line-height:1.2}
    .stat-label{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:700}

    /* Explorer */
    .genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .genre-card{
      position:relative;
      min-height:242px;
      padding:23px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      overflow:hidden;
      transition:var(--transition);
    }
    .genre-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
    .genre-icon{
      width:48px;height:48px;display:grid;place-items:center;
      border-radius:15px;font-size:20px;margin-bottom:57px;
    }
    .genre-card h3{margin:0 0 8px;font-size:19px;font-weight:800}
    .genre-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
    .genre-card:after{
      content:"";position:absolute;width:110px;height:110px;right:-33px;bottom:-42px;border-radius:50%;opacity:.65;
    }
    .genre-a .genre-icon{background:#fff0ed;color:var(--peach-dark)}.genre-a:after{background:#ffd9d2}
    .genre-b .genre-icon{background:#f1ebff;color:#7656b8}.genre-b:after{background:#dfd2ff}
    .genre-c .genre-icon{background:#e9f8f3;color:#249b7b}.genre-c:after{background:#c9eee3}
    .genre-d .genre-icon{background:#fff5dc;color:#bb7a14}.genre-d:after{background:#ffe4a9}

    /* Path */
    .path-section{position:relative;background:var(--navy);color:#fff;overflow:hidden}
    .path-section:before{
      content:"";position:absolute;width:670px;height:670px;border:1px solid rgba(255,255,255,.08);
      border-radius:50%;right:-185px;top:-360px;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 102px rgba(255,255,255,.02);
    }
    .path-section .container{position:relative;z-index:1}
    .path-section .eyebrow{color:#ffbbae;background:rgba(255,121,104,.12);border-color:rgba(255,167,154,.2)}
    .path-section .section-title{color:#fff}
    .path-section .section-desc{color:#b7c2d2}
    .path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .path-card{
      position:relative;
      padding:28px 24px 24px;
      min-height:217px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius);
      background:rgba(255,255,255,.055);
      transition:var(--transition);
    }
    .path-card:hover{background:rgba(255,255,255,.1);transform:translateY(-5px);border-color:rgba(255,255,255,.22)}
    .path-number{display:block;margin-bottom:21px;color:var(--gold);font-size:13px;font-weight:850;letter-spacing:.13em}
    .path-card h3{margin:0 0 10px;color:#fff;font-size:20px;font-weight:800}
    .path-card p{margin:0;color:#bfc8d5;font-size:14px;line-height:1.72}
    .path-arrow{
      position:absolute;right:-16px;top:50%;z-index:2;width:32px;height:32px;
      display:grid;place-items:center;border-radius:50%;background:var(--peach);color:#fff;font-size:12px;
    }
    .path-card:last-child .path-arrow{display:none}

    /* List */
    .guide-layout{display:grid;grid-template-columns:.84fr 1.16fr;gap:34px;align-items:start}
    .guide-side{
      padding:31px;
      border-radius:var(--radius-lg);
      background:linear-gradient(150deg,#fff0ed,#fff9ed);
      border:1px solid #ffe1d8;
    }
    .guide-side h3{margin:0 0 13px;color:var(--plum);font-size:25px;font-weight:850;line-height:1.35}
    .guide-side p{margin:0 0 22px;color:#785f64;font-size:14px}
    .check-list{padding:0;margin:0;list-style:none}
    .check-list li{display:flex;gap:10px;padding:10px 0;border-top:1px solid rgba(193,126,111,.17);color:#684e55;font-size:14px;font-weight:650}
    .check-list li i{margin-top:5px;color:var(--peach-dark)}
    .content-list{display:grid;gap:13px}
    .content-item{
      display:flex;align-items:center;gap:17px;
      padding:17px 19px;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      transition:var(--transition);
    }
    .content-item:hover{border-color:#ffd2ca;box-shadow:var(--shadow-sm);transform:translateX(4px)}
    .item-icon{
      width:47px;height:47px;flex:0 0 47px;
      display:grid;place-items:center;border-radius:14px;background:var(--soft);color:var(--peach-dark);font-size:18px;
    }
    .item-main{flex:1;min-width:0}
    .item-main h4{margin:0 0 3px;font-size:16px;font-weight:800}
    .item-main p{margin:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .item-tag{padding:5px 9px;border-radius:999px;background:var(--peach-pale);color:var(--peach-dark);font-size:11px;font-weight:800;white-space:nowrap}

    /* FAQ */
    .faq-wrap{max-width:880px;margin:0 auto}
    .faq-wrap .section-heading{text-align:center;margin-left:auto;margin-right:auto}
    .accordion{display:grid;gap:13px}
    .accordion-item{
      overflow:hidden;
      border:1px solid var(--line)!important;
      border-radius:17px!important;
      background:#fff;
      box-shadow:none;
    }
    .accordion-button{
      padding:20px 22px;
      color:var(--ink);
      background:#fff;
      font-size:16px;
      font-weight:800;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){color:var(--peach-dark);background:var(--peach-pale)}
    .accordion-button:after{background-size:1rem}
    .accordion-body{padding:3px 22px 21px;color:var(--muted);font-size:14px;line-height:1.8;background:#fff}

    /* CTA */
    .cta-box{
      position:relative;
      overflow:hidden;
      padding:62px 60px;
      border-radius:var(--radius-lg);
      background:linear-gradient(115deg,#41234c,#272a54);
      color:#fff;
      box-shadow:var(--shadow-deep);
    }
    .cta-box:before{
      content:"";position:absolute;width:330px;height:330px;right:-80px;top:-150px;border-radius:50%;
      background:rgba(255,121,104,.24);box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 112px rgba(255,255,255,.025);
    }
    .cta-box:after{
      content:"";position:absolute;left:45%;bottom:-165px;width:290px;height:290px;border-radius:50%;background:rgba(246,189,96,.12);
    }
    .cta-content{position:relative;z-index:1;max-width:690px}
    .cta-box .eyebrow{color:#ffd4ce;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
    .cta-box h2{margin:0 0 14px;color:#fff;font-size:clamp(28px,3.5vw,43px);line-height:1.25;font-weight:850;letter-spacing:-.04em}
    .cta-box p{margin:0 0 26px;color:#ddd3e3;font-size:16px}
    .cta-box .btn-brand{background:var(--peach)}
    .cta-box .btn-outline-brand{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
    .cta-box .btn-outline-brand:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}

    /* Footer */
    .site-footer{padding:64px 0 23px;background:#101a2a;color:#d5dce7}
    .footer-top{display:grid;grid-template-columns:1.3fr .7fr;gap:55px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
    .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:15px;color:#fff;font-size:16px;font-weight:850;line-height:1.4}
    .footer-copy{max-width:570px;margin:0;color:#9eabba;font-size:13px;line-height:1.85}
    .footer-heading{margin:3px 0 14px;color:#fff;font-size:14px;font-weight:800}
    .footer-links{display:flex;flex-wrap:wrap;gap:10px}
    .footer-links a{
      padding:7px 11px;border-radius:9px;color:#b6c1cf;background:rgba(255,255,255,.05);font-size:13px;font-weight:650;transition:var(--transition);
    }
    .footer-links a:hover{color:#fff;background:rgba(255,121,104,.22)}
    .footer-bottom{display:flex;justify-content:space-between;gap:15px;padding-top:19px;color:#7f8d9e;font-size:12px}
    .footer-bottom span:last-child{word-break:break-all}

    @media (max-width:1024px){
      .hero{min-height:auto;padding:78px 0 72px}
      .hero-board{min-height:430px}
      .intro-grid{gap:42px}
      .genre-grid{grid-template-columns:repeat(2,1fr)}
      .path-grid{gap:15px}
      .cta-box{padding:51px 45px}
    }
    @media (max-width:991.98px){
      .navbar-collapse{padding:14px 0 5px}
      .navbar-nav{align-items:stretch;gap:5px}
      .nav-link{padding:10px 12px!important}
      .nav-cta{margin:6px 0 0;width:max-content}
      .hero-copy{padding-top:0}
      .hero-board{margin-top:45px;max-width:580px}
      .intro-grid,.guide-layout{grid-template-columns:1fr}
      .intro-visual{max-width:620px}
      .intro-text{max-width:750px}
      .path-arrow{display:none}
      .footer-top{grid-template-columns:1fr;gap:30px}
    }
    @media (max-width:767.98px){
      .section{padding:72px 0}
      .section-heading{margin-bottom:34px}
      .hero{padding:62px 0 60px}
      .hero h1{font-size:clamp(35px,10vw,53px)}
      .hero-lead{font-size:16px}
      .hero-board{min-height:390px;margin-top:35px}
      .board-title{font-size:25px}
      .route-line{width:72%;top:144px}
      .dot-one{top:137px}.dot-two{top:230px}.dot-three{top:166px}
      .stat-grid{max-width:520px}
      .genre-grid,.path-grid{grid-template-columns:1fr 1fr}
      .guide-side{padding:26px}
      .cta-box{padding:43px 29px}
    }
    @media (max-width:520px){
      .navbar{min-height:69px}
      .navbar-brand{max-width:255px;font-size:12px}
      .brand-mark{width:34px;height:34px;flex-basis:34px}
      .hero h1{letter-spacing:-.06em}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .btn-brand,.btn-outline-brand{width:100%}
      .trust-row{display:grid;gap:10px}
      .hero-board{min-height:348px;border-radius:24px}
      .board-top{padding:23px}
      .board-title{font-size:22px;max-width:240px}
      .route-line{left:27px;top:133px;width:74%;height:155px}
      .dot-one{left:23px;top:126px}.dot-two{left:47%;top:204px}.dot-three{right:6%;top:151px}
      .tag-a{right:8px;top:75px}.tag-b{left:9px;bottom:76px}
      .floating-tag{font-size:11px;padding:7px 9px}
      .route-card{left:16px;right:16px;bottom:16px;padding:12px 14px}
      .intro-visual{min-height:315px}
      .film-frame{inset:37px 27px 35px;padding:19px}
      .film-frame h3{font-size:21px}
      .stat-grid{grid-template-columns:1fr}
      .stat-card{display:flex;align-items:center;justify-content:space-between}
      .stat-label{margin:0}
      .genre-grid,.path-grid{grid-template-columns:1fr}
      .genre-card{min-height:205px}
      .genre-icon{margin-bottom:35px}
      .content-item{gap:12px;padding:14px}
      .item-tag{display:none}
      .item-main p{white-space:normal}
      .accordion-button{padding:17px;font-size:15px}
      .accordion-body{padding:0 17px 17px}
      .cta-box{padding:36px 23px;border-radius:24px}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-bottom:6px}
    }