/* roulang page: index */
:root{
      --bg:#08070c;
      --bg2:#0d0a14;
      --panel:#14101d;
      --panel-2:#1b1426;
      --panel-3:#241938;
      --line:rgba(255,255,255,.10);
      --line-2:rgba(255,79,163,.24);
      --text:#f6edf7;
      --muted:#b9a9c5;
      --muted-2:#8d7c9d;
      --pink:#ff4fa3;
      --purple:#8b5cf6;
      --cyan:#27f5c7;
      --warning:#ffcf5d;
      --shadow:0 18px 50px rgba(0,0,0,.38);
      --shadow-soft:0 10px 30px rgba(0,0,0,.26);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1240px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(900px 500px at 15% 0%, rgba(255,79,163,.18), transparent 60%),
        radial-gradient(700px 450px at 90% 10%, rgba(139,92,246,.16), transparent 55%),
        radial-gradient(900px 500px at 50% 100%, rgba(39,245,199,.08), transparent 60%),
        linear-gradient(180deg, #0b0812 0%, #08070c 100%);
      color:var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      line-height:1.75;
      overflow-x:hidden;
      padding-bottom:0;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:48px 48px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 95%);
      opacity:.35;
      z-index:0;
    }
    a{color:inherit; text-decoration:none}
    a:hover{text-decoration:none}
    img{max-width:100%; display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,79,163,.25); color:#fff}
    .site-shell{position:relative; z-index:1}
    .container{max-width:var(--container)}
    .notice-bar{
      background:linear-gradient(90deg, rgba(255,79,163,.12), rgba(139,92,246,.10));
      border-bottom:1px solid var(--line);
      color:#f8f3fb;
      font-size:13px;
      letter-spacing:.2px;
    }
    .notice-bar .container{
      min-height:40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding-top:6px;
      padding-bottom:6px;
    }
    .notice-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:var(--text);
      white-space:nowrap;
    }
    .notice-pill i{color:var(--cyan)}
    .navbar{
      backdrop-filter: blur(16px);
      background: rgba(9,7,13,.76) !important;
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 26px rgba(0,0,0,.2);
    }
    .navbar .container{padding-top:10px; padding-bottom:10px}
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      letter-spacing:.2px;
      color:var(--text) !important;
      font-size:1.02rem;
    }
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,79,163,.95), rgba(139,92,246,.88));
      box-shadow:0 12px 30px rgba(255,79,163,.24);
      color:#fff;
      font-weight:900;
      flex:0 0 auto;
    }
    .navbar-nav{
      gap:8px;
      align-items:center;
    }
    .nav-link{
      color:var(--muted) !important;
      padding:10px 14px !important;
      border-radius:999px;
      transition:all .22s ease;
      font-weight:600;
      position:relative;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:#fff !important;
      background:rgba(255,255,255,.05);
    }
    .nav-link.active{
      color:#fff !important;
      background:rgba(255,79,163,.14);
      box-shadow:inset 0 0 0 1px rgba(255,79,163,.25);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:6px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--pink), var(--purple));
      box-shadow:0 0 14px rgba(255,79,163,.45);
    }
    .navbar-toggler{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      padding:.55rem .7rem;
      box-shadow:none !important;
    }
    .navbar-toggler-icon{
      background-image:none;
      width:1.25rem;
      height:1.25rem;
      position:relative;
    }
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span{
      content:"";
      position:absolute;
      left:0;
      right:0;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, #fff, rgba(255,255,255,.7));
    }
    .navbar-toggler-icon::before{top:2px}
    .navbar-toggler-icon span{top:10px}
    .navbar-toggler-icon::after{top:18px}
    .navbar .btn-nav{
      border:none;
      background:linear-gradient(135deg, var(--pink), var(--purple));
      color:#fff;
      border-radius:999px;
      padding:11px 18px;
      font-weight:700;
      box-shadow:0 14px 28px rgba(255,79,163,.22);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .navbar .btn-nav:hover,
    .navbar .btn-nav:focus{
      transform:translateY(-1px);
      filter:saturate(1.08);
      box-shadow:0 18px 34px rgba(255,79,163,.28);
      color:#fff;
    }
    .section-pad{
      padding:84px 0;
      position:relative;
      z-index:1;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:26px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      letter-spacing:.2px;
      margin-bottom:14px;
    }
    .eyebrow i{color:var(--warning)}
    h1,h2,h3,h4,h5{margin:0}
    h1{
      font-size:clamp(2rem, 4vw, 4rem);
      line-height:1.1;
      font-weight:800;
      letter-spacing:-.02em;
      margin-bottom:18px;
    }
    h2{
      font-size:clamp(1.55rem, 2.8vw, 2.65rem);
      line-height:1.15;
      font-weight:780;
      letter-spacing:-.02em;
    }
    h3{
      font-size:clamp(1.08rem, 1.65vw, 1.35rem);
      line-height:1.22;
      font-weight:750;
    }
    .section-note{
      color:var(--muted);
      max-width:760px;
      font-size:1rem;
      margin-top:10px;
    }
    .hero{
      padding-top:36px;
      padding-bottom:52px;
      position:relative;
    }
    .hero::before,
    .hero::after{
      content:"";
      position:absolute;
      inset:auto;
      pointer-events:none;
      border-radius:50%;
      filter:blur(14px);
      opacity:.75;
    }
    .hero::before{
      width:380px;
      height:380px;
      background:radial-gradient(circle, rgba(255,79,163,.20), transparent 65%);
      top:-90px;
      right:5%;
    }
    .hero::after{
      width:280px;
      height:280px;
      background:radial-gradient(circle, rgba(39,245,199,.12), transparent 65%);
      bottom:-50px;
      left:-60px;
    }
    .hero-stage{
      background:
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        linear-gradient(160deg, rgba(20,16,29,.96), rgba(11,8,18,.92));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,79,163,.14), transparent 34%),
        radial-gradient(circle at 85% 15%, rgba(139,92,246,.12), transparent 34%),
        linear-gradient(135deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
      pointer-events:none;
    }
    .hero-copy{
      padding:42px 40px 38px;
      position:relative;
      z-index:1;
    }
    .hero-copy p{
      color:var(--muted);
      font-size:1.02rem;
      max-width:42rem;
      margin-bottom:22px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:8px;
    }
    .btn-pill{
      border-radius:999px;
      padding:12px 18px;
      font-weight:700;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }
    .btn-primary-glow{
      border:none;
      color:#fff;
      background:linear-gradient(135deg, var(--pink), var(--purple));
      box-shadow:0 16px 30px rgba(255,79,163,.23);
    }
    .btn-primary-glow:hover,
    .btn-primary-glow:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 36px rgba(255,79,163,.30);
    }
    .btn-ghost{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:var(--text);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .btn-ghost:hover,
    .btn-ghost:focus{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,79,163,.30);
      transform:translateY(-1px);
    }
    .hero-stats{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:24px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#f9f4fb;
      border:1px solid rgba(255,255,255,.10);
      font-size:13px;
      font-weight:700;
    }
    .chip i{color:var(--cyan)}
    .hero-panel{
      height:100%;
      padding:24px;
      border-left:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      position:relative;
      z-index:1;
    }
    .hero-panel-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .mini-tile{
      min-height:126px;
      border-radius:18px;
      padding:16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        linear-gradient(145deg, rgba(27,20,38,.96), rgba(20,16,29,.96));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .mini-tile::after{
      content:"";
      position:absolute;
      inset:auto -18% -18% auto;
      width:88px;
      height:88px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,79,163,.17), transparent 65%);
    }
    .mini-tile:hover{
      transform:translateY(-3px);
      border-color:rgba(255,79,163,.30);
      box-shadow:0 18px 40px rgba(0,0,0,.36);
    }
    .mini-icon{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:12px;
      color:var(--pink);
      font-size:1.05rem;
    }
    .mini-tile p{
      color:var(--muted);
      font-size:13px;
      margin:6px 0 0;
      line-height:1.65;
    }
    .mini-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:10px;
      color:#fff;
      font-size:13px;
      font-weight:700;
    }
    .mini-link i{transition:transform .2s ease}
    .mini-link:hover i{transform:translateX(2px)}
    .hero-sidebar{
      margin-top:12px;
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }
    .hero-sidebar .side-title{
      font-size:14px;
      font-weight:800;
      color:#fff;
      margin-bottom:10px;
    }
    .hero-sidebar ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .hero-sidebar li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .hero-sidebar li i{
      color:var(--cyan);
      margin-top:3px;
    }
    .track-wrap{
      display:flex;
      gap:16px;
      overflow-x:auto;
      padding-bottom:10px;
      scroll-snap-type:x proximity;
      scrollbar-width:none;
    }
    .track-wrap::-webkit-scrollbar{display:none}
    .track-card{
      flex:0 0 260px;
      min-height:290px;
      border-radius:24px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      position:relative;
      scroll-snap-align:start;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .track-card:hover{
      transform:translateY(-4px) scale(1.02);
      border-color:rgba(255,79,163,.35);
      box-shadow:0 22px 50px rgba(0,0,0,.42);
    }
    .track-cover{
      height:160px;
      position:relative;
      background:
        radial-gradient(circle at 25% 25%, rgba(255,79,163,.48), transparent 35%),
        radial-gradient(circle at 80% 30%, rgba(139,92,246,.34), transparent 30%),
        radial-gradient(circle at 55% 85%, rgba(39,245,199,.16), transparent 32%),
        linear-gradient(135deg, #1d122d 0%, #0f0b16 100%);
      overflow:hidden;
    }
    .track-cover::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, transparent 20%, rgba(255,255,255,.06) 50%, transparent 80%),
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
      mix-blend-mode:screen;
    }
    .track-cover .tag{
      position:absolute;
      left:14px;
      top:14px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(8,7,12,.72);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:12px;
      font-weight:700;
      backdrop-filter:blur(10px);
    }
    .tag.soft{
      background:rgba(255,255,255,.04);
      color:var(--muted);
    }
    .track-body{
      padding:16px;
    }
    .track-body h3{margin-bottom:8px}
    .track-body p{
      color:var(--muted);
      font-size:14px;
      margin:0 0 12px;
      min-height:54px;
      line-height:1.65;
    }
    .track-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .text-link{
      color:#fff;
      font-weight:700;
      font-size:13px;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .text-link:hover{color:#fff}
    .loop-strip{
      margin-top:20px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      padding:14px 16px;
    }
    .loop-strip-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:12px;
    }
    .loop-strip-head strong{
      font-size:15px;
      color:#fff;
    }
    .loop-list{
      display:grid;
      gap:10px;
    }
    .loop-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:16px;
      background:rgba(17,12,24,.75);
      border:1px solid rgba(255,255,255,.06);
    }
    .loop-item .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--pink), var(--purple));
      box-shadow:0 0 0 4px rgba(255,79,163,.12);
      flex:0 0 auto;
    }
    .loop-item span{
      color:var(--muted);
      font-size:13px;
    }
    .loop-item b{
      color:#fff;
      margin-right:8px;
    }
    .stat-band{
      border-radius:var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        linear-gradient(180deg, rgba(27,20,38,.98), rgba(17,12,24,.98));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      padding:24px;
    }
    .stat-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }
    .stat-card{
      border-radius:18px;
      padding:20px 18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      min-height:150px;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .stat-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,79,163,.28);
      box-shadow:0 16px 36px rgba(0,0,0,.28);
    }
    .stat-num{
      font-size:clamp(2rem, 3vw, 3rem);
      line-height:1;
      font-weight:850;
      letter-spacing:-.03em;
      background:linear-gradient(135deg, #fff, rgba(255,255,255,.75), rgba(255,79,163,.95));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      margin-bottom:10px;
    }
    .stat-title{
      font-size:15px;
      font-weight:800;
      margin-bottom:8px;
    }
    .stat-card p{
      color:var(--muted);
      margin:0;
      font-size:13px;
      line-height:1.7;
    }
    .case-grid{
      display:grid;
      grid-template-columns:1.3fr .7fr;
      gap:16px;
    }
    .case-main,
    .case-side,
    .step-card,
    .compare-card,
    .faq-card,
    .contact-card,
    .form-card{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
    }
    .case-main{
      overflow:hidden;
      min-height:420px;
    }
    .case-main .poster{
      min-height:220px;
      background:
        radial-gradient(circle at 22% 24%, rgba(255,79,163,.34), transparent 34%),
        radial-gradient(circle at 80% 32%, rgba(139,92,246,.26), transparent 32%),
        linear-gradient(135deg, #221535 0%, #0d0a14 100%);
      position:relative;
    }
    .case-main .poster::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent 40%, rgba(8,7,12,.88) 100%),
        linear-gradient(120deg, rgba(255,255,255,.04), transparent 35%, rgba(255,255,255,.02));
    }
    .case-main .body{
      padding:22px 22px 24px;
      position:relative;
    }
    .case-main .body p,
    .case-side .body p,
    .step-card p,
    .compare-card p,
    .contact-card p,
    .form-card p{
      color:var(--muted);
      margin:0;
      font-size:14px;
      line-height:1.7;
    }
    .case-main .meta{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      flex-wrap:wrap;
    }
    .case-main ul,
    .case-side ul,
    .compare-list,
    .step-list{
      list-style:none;
      padding:0;
      margin:0;
    }
    .case-main ul{
      display:grid;
      gap:10px;
      margin-top:16px;
    }
    .case-main li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#efe9f4;
      font-size:14px;
      line-height:1.7;
    }
    .case-main li i,
    .case-side li i,
    .step-bullet i{
      color:var(--cyan);
      margin-top:4px;
      flex:0 0 auto;
    }
    .case-side{
      display:grid;
      gap:16px;
    }
    .case-side .case-mini{
      border-radius:24px;
      overflow:hidden;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      transition:transform .2s ease, border-color .2s ease;
    }
    .case-side .case-mini:hover{
      transform:translateY(-3px);
      border-color:rgba(255,79,163,.30);
    }
    .case-side .poster{
      min-height:120px;
      background:
        radial-gradient(circle at 30% 24%, rgba(39,245,199,.18), transparent 28%),
        radial-gradient(circle at 72% 38%, rgba(255,79,163,.26), transparent 30%),
        linear-gradient(135deg, #1f172c, #0d0a14);
    }
    .case-side .body{
      padding:16px 16px 18px;
    }
    .case-side h3{margin-bottom:8px}
    .step-layout{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:16px;
      align-items:start;
    }
    .step-card{
      padding:22px;
    }
    .step-list{
      display:grid;
      gap:14px;
      margin-top:14px;
    }
    .step-item{
      display:flex;
      gap:14px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
    }
    .step-index{
      width:38px;
      height:38px;
      border-radius:14px;
      background:linear-gradient(135deg, var(--pink), var(--purple));
      display:grid;
      place-items:center;
      font-weight:800;
      color:#fff;
      box-shadow:0 12px 24px rgba(255,79,163,.18);
      flex:0 0 auto;
    }
    .step-item h4{
      font-size:15px;
      font-weight:800;
      margin-bottom:6px;
    }
    .step-item p{
      font-size:13px;
      margin:0;
      color:var(--muted);
      line-height:1.7;
    }
    .compare-card{
      padding:22px;
    }
    .compare-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
      margin-top:16px;
    }
    .compare-box{
      border-radius:18px;
      padding:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      min-height:220px;
    }
    .compare-box h4{
      font-size:15px;
      font-weight:800;
      margin-bottom:12px;
    }
    .compare-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      font-size:13px;
      color:var(--muted);
      margin-bottom:12px;
      line-height:1.7;
    }
    .compare-list li i{
      margin-top:4px;
      color:var(--cyan);
      flex:0 0 auto;
    }
    .compare-list li.warn i{color:#ff8c8c}
    .faq-accordion .accordion-item{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      border-radius:18px !important;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      margin-bottom:12px;
    }
    .faq-accordion .accordion-button{
      background:rgba(255,255,255,.02);
      color:var(--text);
      font-weight:750;
      box-shadow:none;
      padding:18px 18px;
    }
    .faq-accordion .accordion-button:not(.collapsed){
      background:rgba(255,79,163,.09);
      color:#fff;
    }
    .faq-accordion .accordion-button::after{
      filter:invert(1) grayscale(1) brightness(1.2);
      opacity:.7;
    }
    .faq-accordion .accordion-button:focus{
      border-color:rgba(255,79,163,.4);
      box-shadow:0 0 0 .18rem rgba(255,79,163,.12);
    }
    .faq-accordion .accordion-body{
      color:var(--muted);
      padding:0 18px 18px;
      font-size:14px;
      line-height:1.75;
      background:rgba(255,255,255,.01);
    }
    .faq-card{
      padding:24px;
    }
    .contact-grid{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:16px;
      align-items:start;
    }
    .contact-card{
      padding:22px;
    }
    .contact-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:16px 0 0;
    }
    .info-list{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .info-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
    }
    .info-ic{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,79,163,.10);
      color:var(--pink);
      flex:0 0 auto;
    }
    .info-item h4{
      font-size:15px;
      font-weight:800;
      margin-bottom:6px;
    }
    .info-item p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.65;
    }
    .form-card{
      padding:22px;
    }
    .form-label{
      color:#f5edf7;
      font-weight:700;
      font-size:14px;
      margin-bottom:8px;
    }
    .form-control,
    .form-select{
      background:#0f0b16;
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
      border-radius:14px;
      padding:12px 14px;
      box-shadow:none !important;
    }
    .form-control::placeholder{
      color:var(--muted-2);
    }
    .form-control:focus,
    .form-select:focus{
      background:#120d1b;
      border-color:rgba(255,79,163,.52);
      color:var(--text);
      box-shadow:0 0 0 .2rem rgba(255,79,163,.14) !important;
    }
    .form-check-input{
      background-color:#120d1b;
      border-color:rgba(255,255,255,.18);
      box-shadow:none !important;
    }
    .form-check-input:checked{
      background-color:var(--pink);
      border-color:var(--pink);
    }
    .form-check-label{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .btn-submit{
      width:100%;
      border:none;
      background:linear-gradient(135deg, var(--pink), var(--purple));
      color:#fff;
      border-radius:999px;
      padding:13px 18px;
      font-weight:800;
      box-shadow:0 16px 28px rgba(255,79,163,.22);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-submit:hover,
    .btn-submit:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 34px rgba(255,79,163,.28);
      filter:saturate(1.05);
    }
    .helper-line{
      color:var(--muted);
      font-size:13px;
      margin-top:12px;
      line-height:1.7;
    }
    .site-footer{
      padding:28px 0 34px;
      border-top:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(11,8,18,.35), rgba(8,7,12,.95));
      position:relative;
      z-index:1;
    }
    .footer-shell{
      display:grid;
      grid-template-columns:1.2fr .8fr .7fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .footer-brand .brand-mark{
      width:42px;
      height:42px;
      border-radius:15px;
    }
    .footer-brand h3{
      font-size:1.1rem;
      margin-bottom:8px;
    }
    .footer-brand p,
    .footer-links a,
    .footer-note{
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
      margin:0;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      display:inline-flex;
      width:fit-content;
      align-items:center;
      gap:8px;
      transition:color .18s ease, transform .18s ease;
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-links a i{color:var(--pink)}
    .footer-bottom{
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted-2);
      font-size:13px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .mobile-tabbar{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:1030;
      background:rgba(16,11,24,.94);
      backdrop-filter:blur(18px);
      border-top:1px solid rgba(255,255,255,.08);
      padding:8px 10px calc(8px + env(safe-area-inset-bottom));
      box-shadow:0 -10px 30px rgba(0,0,0,.30);
    }
    .mobile-tabbar .tabs{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
    }
    .tab-item{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:4px;
      min-height:50px;
      border-radius:16px;
      color:var(--muted);
      font-size:11px;
      font-weight:700;
      padding:8px 4px;
      transition:background .18s ease, color .18s ease, transform .18s ease;
    }
    .tab-item i{
      font-size:1.12rem;
    }
    .tab-item:hover,
    .tab-item:focus{
      background:rgba(255,255,255,.05);
      color:#fff;
    }
    .tab-item.active{
      color:#fff;
      background:rgba(255,79,163,.14);
      box-shadow:inset 0 0 0 1px rgba(255,79,163,.20);
    }
    .tab-item.active i{color:var(--pink)}
    .sticky-aside{
      position:sticky;
      top:104px;
    }
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
      margin:26px 0;
    }
    .label-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .label-row .tag{padding:7px 11px}
    .lead-kicker{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:16px 0 20px;
    }
    .hero-kicker{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
    }
    .section-mini{
      color:var(--muted);
      max-width:760px;
      font-size:14px;
      margin-top:10px;
    }
    .accent{
      color:var(--pink);
    }
    .two-col-note{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      margin-top:14px;
    }
    .mini-note{
      padding:14px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      color:var(--muted);
      font-size:13px;
      line-height:1.65;
    }
    .mini-note strong{color:#fff}
    .accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff4fa3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
    @media (max-width: 1199.98px){
      .hero-copy{padding:36px 30px 32px}
      .hero-panel{padding:20px}
      .track-card{flex-basis:240px}
      .stat-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .case-grid,
      .step-layout,
      .contact-grid,
      .footer-shell{grid-template-columns:1fr}
      .sticky-aside{position:static}
    }
    @media (max-width: 991.98px){
      .navbar .btn-nav{display:none}
      .section-pad{padding:68px 0}
      .section-head{align-items:flex-start; flex-direction:column}
      .hero-stage{border-radius:24px}
      .hero-panel{border-left:none; border-top:1px solid rgba(255,255,255,.08)}
      .hero-panel-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .two-col-note{grid-template-columns:1fr}
      .compare-grid{grid-template-columns:1fr}
      .case-main{min-height:auto}
    }
    @media (max-width: 767.98px){
      .notice-bar .container{flex-direction:column; align-items:flex-start}
      .hero{padding-top:22px}
      .hero-copy{padding:28px 18px 20px}
      .hero-panel{padding:16px}
      h1{font-size:clamp(1.95rem, 8vw, 2.65rem)}
      h2{font-size:clamp(1.45rem, 6.2vw, 2rem)}
      .hero-panel-grid{grid-template-columns:1fr}
      .hero-actions .btn-pill{width:100%; justify-content:center}
      .hero-actions .btn-pill.btn-ghost{order:2}
      .hero-actions .btn-pill.btn-primary-glow{order:1}
      .hero-actions .btn-pill:nth-child(3){order:3}
      .stat-grid{grid-template-columns:1fr}
      .track-card{flex-basis:82vw}
      .case-side{gap:12px}
      .mobile-tabbar .tabs{grid-template-columns:repeat(4, minmax(0,1fr))}
      .section-pad{padding:58px 0}
      .loop-item{align-items:flex-start}
      .loop-item span{line-height:1.5}
      .footer-bottom{flex-direction:column; align-items:flex-start}
    }
    @media (max-width: 575.98px){
      .navbar .container{padding-top:8px; padding-bottom:8px}
      .navbar-brand{font-size:.96rem}
      .brand-mark{width:34px; height:34px; border-radius:12px}
      .hero-copy p{font-size:.98rem}
      .mini-tile{min-height:118px}
      .case-main .body,
      .case-side .body,
      .step-card,
      .compare-card,
      .faq-card,
      .contact-card,
      .form-card{border-radius:22px}
      .mobile-tabbar{padding-left:8px; padding-right:8px}
      .mobile-tabbar .tabs{gap:6px}
      .tab-item{font-size:10px}
      body{padding-bottom:82px}
    }

/* roulang page: category1 */
:root{
  --bg:#08070c;
  --bg-2:#14101d;
  --bg-3:#1b1426;
  --bg-4:#231932;
  --brand:#ff4fa3;
  --brand-2:#8b5cf6;
  --accent:#27f5c7;
  --warn:#ffb84d;
  --text:#f6edf7;
  --muted:#b9a9c5;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,79,163,.28);
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --shadow-lg:0 24px 70px rgba(0,0,0,.45);
  --r-xl:24px;
  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;
  --container:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,79,163,.18), transparent 55%),
    radial-gradient(900px 500px at 85% 0%, rgba(139,92,246,.18), transparent 50%),
    radial-gradient(900px 500px at 50% 100%, rgba(39,245,199,.06), transparent 55%),
    linear-gradient(180deg, #0b0812 0%, #08070c 100%);
  color:var(--text);
  line-height:1.75;
  overflow-x:hidden;
  padding-top:92px;
  padding-bottom:0;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 85%);
  opacity:.24;
  z-index:-1;
}
::selection{background:rgba(255,79,163,.28); color:#fff}
a{color:inherit; text-decoration:none; transition:all .22s ease}
a:hover{color:#fff}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.container{
  max-width:var(--container);
}
.section-anchor{scroll-margin-top:110px}
.top-alert{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1031;
  background:linear-gradient(90deg, rgba(255,79,163,.22), rgba(139,92,246,.18));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.top-alert .inner{
  max-width:var(--container);
  margin:0 auto;
  padding:8px 16px;
  font-size:13px;
  color:#fceffc;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.top-alert .inner i{color:var(--accent)}
.navbar{
  top:34px;
  background:rgba(12,9,18,.78);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:.9rem 0;
}
.navbar .container{gap:1rem}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}
.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 10px 28px rgba(255,79,163,.26);
  color:#fff;
  font-size:1rem;
  flex:none;
}
.navbar-brand span:last-child{
  font-size:1rem;
}
.navbar-toggler{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:.55rem .7rem;
  background:rgba(255,255,255,.03);
  box-shadow:none !important;
}
.navbar-toggler-icon{
  width:22px;
  height:18px;
  position:relative;
  background:none !important;
  display:inline-block;
}
.navbar-toggler-icon span,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:transform .22s ease, top .22s ease, opacity .22s ease;
}
.navbar-toggler-icon span{top:8px}
.navbar-toggler-icon::before{top:0}
.navbar-toggler-icon::after{top:16px}
.navbar-collapse{
  align-items:center;
}
.navbar-nav{
  gap:.35rem;
}
.nav-link{
  color:var(--muted);
  font-size:.97rem;
  font-weight:600;
  border-radius:999px;
  padding:.6rem .95rem !important;
  position:relative;
}
.nav-link:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}
.nav-link.active,
.nav-link[aria-current="page"]{
  color:#fff !important;
  background:rgba(255,79,163,.16);
  box-shadow:inset 0 0 0 1px rgba(255,79,163,.35);
}
.btn-nav{
  border:none;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.78rem 1.2rem;
  box-shadow:0 16px 30px rgba(255,79,163,.18);
}
.btn-nav:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 18px 38px rgba(255,79,163,.28);
}
.btn-brand{
  border:none;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.9rem 1.25rem;
  box-shadow:0 18px 40px rgba(255,79,163,.18);
}
.btn-brand:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(255,79,163,.28);
}
.btn-soft{
  color:#fff;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:.9rem 1.25rem;
}
.btn-soft:hover{
  color:#fff;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
}
.badge-soft,
.badge-age,
.badge-line{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  padding:.48rem .78rem;
  font-size:.8rem;
  font-weight:700;
  line-height:1;
}
.badge-soft{
  color:#f5deff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.badge-age{
  color:#fff;
  background:linear-gradient(135deg, rgba(255,79,163,.95), rgba(139,92,246,.94));
  box-shadow:0 10px 24px rgba(255,79,163,.16);
}
.badge-line{
  color:#d9cfe6;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
main{position:relative}
.section{
  padding:72px 0;
  position:relative;
}
.section-tight{padding:56px 0}
.section-head{
  margin-bottom:1.5rem;
}
.section-kicker{
  color:#dcb7f7;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}
.section-head h2{
  font-size:clamp(1.55rem, 3vw, 2.5rem);
  line-height:1.18;
  font-weight:800;
  margin:0 0 .5rem;
}
.section-head p{
  color:var(--muted);
  margin:0;
  max-width:70ch;
}
.hero-section{
  padding:18px 0 24px;
}
.hero-shell{
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255,79,163,.18), transparent 45%),
    radial-gradient(800px 500px at 100% 0%, rgba(139,92,246,.16), transparent 50%),
    linear-gradient(180deg, rgba(27,20,38,.96), rgba(18,13,28,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  position:relative;
}
.hero-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
  pointer-events:none;
}
.hero-copy{
  padding:clamp(28px, 5vw, 54px);
  position:relative;
  z-index:1;
}
.hero-copy .eyebrow{
  color:#d8c8e8;
  font-size:.9rem;
  margin:.95rem 0 .75rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-wrap:wrap;
}
.hero-copy .eyebrow::before{
  content:"";
  width:42px;
  height:1px;
  background:linear-gradient(90deg, var(--brand), transparent);
}
.hero-copy h1{
  font-size:clamp(2rem, 5vw, 4.1rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.03em;
  margin:0 0 1rem;
}
.hero-copy .lead{
  font-size:clamp(1rem, 1.45vw, 1.12rem);
  color:#e9dff0;
  line-height:1.85;
  margin:0;
  max-width:58ch;
}
.hero-actions{
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}
.hero-meta{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}
.hero-panel{
  padding:clamp(18px, 3vw, 30px);
  position:relative;
  z-index:1;
}
.panel-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.panel-inner{
  padding:1.1rem;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.panel-head h2{
  font-size:1.05rem;
  font-weight:800;
  margin:0;
}
.panel-tag{
  color:#f8e9ff;
  font-size:.78rem;
  background:rgba(255,79,163,.14);
  border:1px solid rgba(255,79,163,.22);
  border-radius:999px;
  padding:.38rem .66rem;
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.85rem;
}
.quick-card{
  min-height:124px;
  background:linear-gradient(180deg, rgba(27,20,38,.96), rgba(21,15,31,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
  position:relative;
  overflow:hidden;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.quick-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120px 80px at 80% 20%, rgba(255,79,163,.16), transparent 55%),
    radial-gradient(140px 100px at 20% 85%, rgba(139,92,246,.12), transparent 58%);
  opacity:.9;
}
.quick-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,79,163,.4);
  box-shadow:0 18px 42px rgba(0,0,0,.42);
}
.quick-card .icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,79,163,.22), rgba(139,92,246,.18));
  color:#fff;
  margin-bottom:.7rem;
  position:relative;
  z-index:1;
}
.quick-card h3{
  font-size:1rem;
  font-weight:800;
  margin:0 0 .25rem;
  position:relative;
  z-index:1;
}
.quick-card p{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
  position:relative;
  z-index:1;
}
.filter-box{
  background:rgba(20,16,29,.72);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.filter-row{
  display:flex;
  gap:.7rem;
  overflow-x:auto;
  padding-bottom:.4rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:#f1e6f7;
  font-weight:700;
  font-size:.92rem;
  scroll-snap-align:start;
}
.filter-chip:hover,
.filter-chip.active{
  color:#fff;
  background:rgba(255,79,163,.14);
  border-color:rgba(255,79,163,.36);
  box-shadow:0 12px 26px rgba(255,79,163,.12);
}
.track-scroll{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:.2rem .1rem .9rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.track-scroll::-webkit-scrollbar{display:none}
.media-card{
  flex:0 0 auto;
  width:clamp(250px, 28vw, 318px);
  scroll-snap-align:start;
  background:linear-gradient(180deg, rgba(27,20,38,.96), rgba(18,13,28,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  position:relative;
}
.media-card:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:rgba(255,79,163,.42);
  box-shadow:0 22px 48px rgba(0,0,0,.48);
}
.media-cover{
  aspect-ratio:16/10;
  position:relative;
  overflow:hidden;
}
.media-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 82% 28%, rgba(39,245,199,.18), transparent 16%),
    radial-gradient(circle at 50% 78%, rgba(255,79,163,.18), transparent 22%),
    linear-gradient(135deg, rgba(255,79,163,.18), rgba(139,92,246,.12));
}
.media-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 10%, rgba(0,0,0,.22) 52%, rgba(7,6,12,.84) 100%);
}
.media-cover .orb{
  position:absolute;
  inset:auto 16px 16px auto;
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,79,163,.9), rgba(139,92,246,.76));
  box-shadow:0 16px 30px rgba(255,79,163,.16);
  z-index:1;
}
.media-body{
  padding:1rem 1rem 1.1rem;
}
.media-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.7rem;
}
.media-badges .mini{
  font-size:.75rem;
  padding:.34rem .58rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#e8dff1;
  font-weight:700;
}
.media-card h3{
  font-size:1.08rem;
  font-weight:800;
  margin:0 0 .45rem;
}
.media-card p{
  color:var(--muted);
  margin:0 0 .95rem;
  font-size:.94rem;
  line-height:1.75;
}
.media-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#fff;
  font-weight:700;
  font-size:.92rem;
}
.media-link i{
  color:var(--accent);
}
.stat-strip{
  background:linear-gradient(135deg, rgba(255,79,163,.10), rgba(139,92,246,.08));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.stat-card{
  background:rgba(17,12,25,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:1.1rem 1rem;
  box-shadow:var(--shadow);
  min-height:116px;
}
.stat-num{
  display:block;
  font-size:clamp(1.75rem, 4vw, 2.8rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  background:linear-gradient(135deg, #fff, #ffb8dd 42%, #c9b4ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:.45rem;
}
.stat-card span:last-child{
  color:var(--muted);
  font-size:.94rem;
}
.content-grid .feature-card{
  height:100%;
  background:linear-gradient(180deg, rgba(27,20,38,.95), rgba(18,13,28,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:1.15rem;
  box-shadow:var(--shadow);
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.content-grid .feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,79,163,.35);
  box-shadow:0 22px 50px rgba(0,0,0,.42);
}
.feature-card .label{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  font-weight:800;
  color:#fbe9ff;
  background:rgba(255,79,163,.12);
  border:1px solid rgba(255,79,163,.2);
  border-radius:999px;
  padding:.36rem .6rem;
  margin-bottom:.85rem;
}
.feature-card h3{
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 .55rem;
}
.feature-card p{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 .9rem;
}
.feature-list{
  margin:0;
  padding-left:1.1rem;
  color:#eadff0;
}
.feature-list li{
  margin:.35rem 0;
}
.side-card{
  position:sticky;
  top:118px;
  background:linear-gradient(180deg, rgba(27,20,38,.98), rgba(20,15,31,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  padding:1.25rem;
}
.side-card h3{
  font-size:1.1rem;
  font-weight:800;
  margin:0 0 .85rem;
}
.side-note{
  color:var(--muted);
  font-size:.94rem;
  margin:0 0 1rem;
}
.checklist{
  display:grid;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none;
}
.checklist li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  padding:.78rem .82rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.checklist i{
  color:var(--accent);
  margin-top:.15rem;
  flex:none;
}
.checklist span{
  color:#f4edf8;
  font-size:.94rem;
  line-height:1.7;
}
.side-links{
  display:grid;
  gap:.65rem;
  margin-top:1rem;
}
.side-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.86rem .95rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#f6edf7;
  font-weight:700;
}
.side-link:hover{
  color:#fff;
  border-color:rgba(255,79,163,.28);
  background:rgba(255,79,163,.08);
}
.side-link i{
  color:var(--muted);
}
.plan-shell{
  background:
    linear-gradient(180deg, rgba(27,20,38,.96), rgba(18,13,28,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(20px, 4vw, 34px);
}
.process-steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.9rem;
}
.process-steps li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.process-steps .step-index{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255,79,163,.24), rgba(139,92,246,.18));
  color:#fff;
  font-weight:900;
  flex:none;
}
.process-steps h3{
  font-size:1rem;
  font-weight:800;
  margin:0 0 .25rem;
}
.process-steps p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
}
.compare-card{
  height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:1.2rem;
}
.compare-card h3{
  font-size:1.1rem;
  font-weight:800;
  margin:0 0 1rem;
}
.compare-box{
  display:grid;
  gap:1rem;
}
.compare-column{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:1rem;
}
.compare-column.good{
  box-shadow:inset 0 0 0 1px rgba(39,245,199,.12);
}
.compare-column.bad{
  box-shadow:inset 0 0 0 1px rgba(255,184,77,.12);
}
.compare-column .head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.65rem;
  font-weight:800;
}
.compare-column.good .head i{color:var(--accent)}
.compare-column.bad .head i{color:var(--warn)}
.compare-column ul{
  margin:0;
  padding-left:1.1rem;
  color:#eadff0;
}
.compare-column li{margin:.3rem 0}
.accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-color:rgba(255,255,255,.08);
  --bs-accordion-color:var(--text);
  --bs-accordion-btn-color:var(--text);
  --bs-accordion-btn-bg:rgba(20,16,29,.92);
  --bs-accordion-active-bg:rgba(27,20,38,.98);
  --bs-accordion-active-color:#fff;
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(255,79,163,.12);
}
.accordion-item{
  background:linear-gradient(180deg, rgba(27,20,38,.96), rgba(20,15,31,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:.9rem;
}
.accordion-button{
  font-weight:800;
  border-radius:0 !important;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.02);
  color:#fff;
}
.accordion-button:not(.collapsed){
  color:#ffdae9;
  background:rgba(255,79,163,.08);
  box-shadow:none;
}
.accordion-button::after{
  filter:invert(1) hue-rotate(180deg);
}
.accordion-body{
  color:var(--muted);
  padding:1rem 1.1rem 1.15rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.contact-shell{
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(255,79,163,.12), transparent 45%),
    linear-gradient(180deg, rgba(27,20,38,.96), rgba(20,15,31,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.contact-inner{
  padding:clamp(20px, 4vw, 34px);
}
.form-control,
.form-select{
  background:#0f0b16;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius:16px;
  padding:.9rem 1rem;
  box-shadow:none !important;
}
.form-control::placeholder,
.form-select{
  color:#aa9ab8;
}
.form-control:focus,
.form-select:focus{
  background:#120d19;
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(255,79,163,.15) !important;
}
.form-label{
  color:#f3e8f7;
  font-weight:700;
  margin-bottom:.55rem;
}
.form-check-input{
  background-color:#0f0b16;
  border-color:rgba(255,255,255,.16);
}
.form-check-input:checked{
  background-color:var(--brand);
  border-color:var(--brand);
}
.form-help{
  color:var(--muted);
  font-size:.92rem;
}
.form-status{
  display:none;
  margin-top:1rem;
  padding:.9rem 1rem;
  border-radius:16px;
  background:rgba(39,245,199,.08);
  border:1px solid rgba(39,245,199,.16);
  color:#dffdf6;
}
.form-status.show{display:block}
.footer{
  margin-top:28px;
  padding:34px 0 92px;
  background:linear-gradient(180deg, rgba(12,9,18,.68), rgba(7,6,12,.98));
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.7rem;
}
.footer p{
  color:var(--muted);
  margin:0;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1rem;
}
.footer-links a{
  color:#f3e8f7;
  font-weight:600;
  border-bottom:1px solid transparent;
}
.footer-links a:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.24);
}
.footer-note{
  color:#c9b8d6;
  font-size:.93rem;
}
.mobile-tabs{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1030;
  background:rgba(16,11,24,.96);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -12px 28px rgba(0,0,0,.34);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  display:none;
}
.mobile-tabs .tab-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  max-width:var(--container);
  margin:0 auto;
}
.mobile-tabs a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:54px;
  border-radius:16px;
  color:#cfbfdc;
  font-size:.74rem;
  font-weight:700;
  background:rgba(255,255,255,.02);
  border:1px solid transparent;
}
.mobile-tabs a i{
  font-size:1.05rem;
}
.mobile-tabs a.active{
  color:#fff;
  background:rgba(255,79,163,.14);
  border-color:rgba(255,79,163,.22);
}
.scroll-shadow{
  position:relative;
}
.scroll-shadow::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:42px;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(8,7,12,.9));
  pointer-events:none;
}
.note-line{
  color:var(--muted);
  font-size:.9rem;
}
.highlight-line{
  color:#f9e7ff;
}
@media (min-width: 1200px){
  .hero-copy{padding:54px}
  .hero-panel{padding:30px}
}
@media (max-width: 1199.98px){
  .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 991.98px){
  body{padding-top:88px}
  .hero-copy h1{font-size:clamp(1.9rem, 6vw, 3rem)}
  .quick-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .side-card{position:static}
}
@media (max-width: 767.98px){
  body{padding-bottom:84px}
  .navbar{top:0}
  .top-alert{
    position:relative;
    z-index:1032;
  }
  .navbar{
    top:auto;
  }
  .hero-shell{border-radius:22px}
  .hero-copy,
  .hero-panel,
  .contact-inner{
    padding:18px;
  }
  .hero-actions .btn,
  .footer .btn,
  .contact-shell .btn{
    width:100%;
  }
  .quick-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .media-card{width:min(84vw, 300px)}
  .mobile-tabs{display:block}
  .footer{padding-bottom:132px}
  .navbar-nav{
    padding-top:.75rem;
  }
  .btn-nav{width:100%; justify-content:center}
}
@media (max-width: 575.98px){
  .section{padding:56px 0}
  .section-tight{padding:44px 0}
  .stat-grid{grid-template-columns:1fr}
  .hero-copy .lead{font-size:.98rem}
  .accordion-button{padding:.95rem 1rem}
  .accordion-body{padding:0 1rem 1rem}
}