/* roulang page: index */
:root{
      --primary:#2563EB;
      --primary-2:#4F8BFF;
      --primary-3:#EAF3FF;
      --cyan:#DCEBFF;
      --accent:#7C6BFF;
      --warm:#FFB86B;
      --text:#182033;
      --muted:#667085;
      --soft:#F7FAFF;
      --card:#FFFFFF;
      --border:#E6ECF5;
      --shadow:0 18px 45px rgba(37,99,235,.10);
      --shadow-hover:0 24px 60px rgba(37,99,235,.16);
      --dock:0 12px 36px rgba(31,41,55,.10);
      --radius-lg:34px;
      --radius-md:24px;
      --radius-sm:16px;
      --container:1140px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 4%, rgba(79,139,255,.16), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(124,107,255,.10), transparent 30%),
        linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 42%,#F7FAFF 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
      outline:3px solid rgba(37,99,235,.22);
      outline-offset:3px;
      border-radius:14px;
    }
    .container-xl{max-width:var(--container)}
    .section{
      padding:84px 0;
      position:relative;
    }
    .section-tight{padding:64px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border-radius:999px;
      background:rgba(37,99,235,.08);
      color:var(--primary);
      font-size:13px;
      font-weight:700;
      border:1px solid rgba(37,99,235,.12);
      margin-bottom:16px;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:30px;
    }
    .section-title{
      margin:0;
      font-size:clamp(28px,3.2vw,38px);
      line-height:1.2;
      letter-spacing:-.03em;
      font-weight:800;
    }
    .section-desc{
      margin:12px 0 0;
      color:var(--muted);
      max-width:690px;
      font-size:16px;
    }
    .btn-brand,.btn-ghost,.btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      padding:12px 22px;
      font-weight:700;
      border:1px solid transparent;
      transition:.22s ease;
      white-space:nowrap;
    }
    .btn-brand{
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;
      box-shadow:0 12px 28px rgba(37,99,235,.23);
    }
    .btn-brand:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 16px 36px rgba(37,99,235,.30);
    }
    .btn-ghost{
      background:#fff;
      color:var(--primary);
      border-color:rgba(37,99,235,.18);
    }
    .btn-ghost:hover{
      background:var(--primary-3);
      transform:translateY(-2px);
    }
    .btn-soft{
      background:rgba(37,99,235,.08);
      color:var(--primary);
      padding:10px 16px;
      font-size:14px;
    }
    .btn-soft:hover{
      background:rgba(37,99,235,.14);
      transform:translateY(-1px);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 11px;
      border-radius:999px;
      background:#EEF6FF;
      color:#315EA8;
      font-size:12px;
      font-weight:700;
      border:1px solid rgba(37,99,235,.10);
    }
    .tag.hot{background:#FFF6E8;color:#9A5D12;border-color:rgba(255,184,107,.30)}
    .tag.purple{background:#F1EFFF;color:#5A4AD8;border-color:rgba(124,107,255,.18)}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      padding:18px 14px 8px;
      pointer-events:none;
    }
    .nav-dock{
      max-width:1160px;
      margin:0 auto;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(230,236,245,.92);
      box-shadow:var(--dock);
      backdrop-filter:blur(10px);
      pointer-events:auto;
      padding:9px 12px;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:850;
      color:var(--text);
      letter-spacing:-.03em;
      margin-right:22px;
      white-space:nowrap;
    }
    .logo-mark{
      width:38px;
      height:38px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#7AA7FF);
      color:#fff;
      display:grid;
      place-items:center;
      box-shadow:0 10px 24px rgba(37,99,235,.22);
      flex:0 0 auto;
    }
    .navbar-nav{
      gap:6px;
      align-items:center;
    }
    .nav-link{
      border-radius:999px;
      color:#475467;
      font-weight:700;
      padding:9px 15px!important;
      font-size:14px;
    }
    .nav-link:hover{
      background:rgba(37,99,235,.08);
      color:var(--primary);
    }
    .nav-link.active{
      color:var(--primary)!important;
      background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(79,139,255,.08));
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:8px;
      background:#F3F7FF;
      border:1px solid var(--border);
      border-radius:999px;
      padding:8px 12px;
      min-width:220px;
    }
    .nav-search i{color:var(--primary)}
    .nav-search input{
      border:0;
      outline:0;
      background:transparent;
      width:150px;
      color:var(--text);
      font-size:14px;
    }
    .nav-search input::placeholder{color:#8A94A6}
    .navbar-toggler{
      border:0;
      width:42px;
      height:42px;
      border-radius:999px;
      background:var(--primary-3);
      color:var(--primary);
      box-shadow:none!important;
    }

    .hero{
      padding:56px 0 76px;
    }
    .hero-stage{
      position:relative;
      overflow:hidden;
      border-radius:42px;
      background:
        linear-gradient(135deg,rgba(234,243,255,.98),rgba(255,255,255,.98) 54%,rgba(220,235,255,.96)),
        radial-gradient(circle at 78% 20%,rgba(124,107,255,.14),transparent 32%);
      border:1px solid rgba(230,236,245,.95);
      box-shadow:var(--shadow);
      padding:38px;
      min-height:520px;
    }
    .hero-stage:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px),
        linear-gradient(180deg,rgba(37,99,235,.06) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(120deg,transparent 10%,#000 56%,transparent 100%);
      pointer-events:none;
    }
    .hero-badge{
      position:absolute;
      top:30px;
      right:32px;
      z-index:2;
      display:flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(255,184,107,.38);
      box-shadow:0 16px 34px rgba(255,184,107,.20);
      color:#8A510F;
      font-weight:800;
      transform:rotate(2deg);
    }
    .hero-badge:after{
      content:"";
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--warm);
      box-shadow:0 0 0 7px rgba(255,184,107,.18);
    }
    .hero-layout{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:34px;
      align-items:center;
      min-height:450px;
    }
    .hero-copy{
      max-width:650px;
      padding:26px 4px;
    }
    .hero h1{
      margin:0;
      font-size:clamp(32px,5vw,56px);
      line-height:1.08;
      letter-spacing:-.045em;
      font-weight:900;
      color:#15213A;
    }
    .hero-intro{
      margin:22px 0 0;
      color:#516070;
      font-size:17px;
      max-width:620px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:26px;
      max-width:560px;
    }
    .metric{
      background:rgba(255,255,255,.76);
      border:1px solid rgba(230,236,245,.9);
      border-radius:20px;
      padding:14px 15px;
      box-shadow:0 12px 28px rgba(37,99,235,.07);
    }
    .metric strong{
      display:block;
      color:var(--primary);
      font-size:22px;
      line-height:1;
      font-weight:900;
    }
    .metric span{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .poster-panel{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      grid-auto-rows:minmax(86px,auto);
      gap:14px;
    }
    .panel-card{
      position:relative;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(230,236,245,.95);
      border-radius:24px;
      padding:18px;
      box-shadow:0 14px 34px rgba(37,99,235,.09);
      overflow:hidden;
    }
    .panel-card:before{
      content:"";
      position:absolute;
      width:140px;
      height:140px;
      border-radius:999px;
      background:radial-gradient(circle,rgba(79,139,255,.20),transparent 66%);
      right:-52px;
      top:-58px;
    }
    .panel-card.large{grid-column:span 4;grid-row:span 2}
    .panel-card.tall{grid-column:span 2;grid-row:span 2}
    .panel-card.wide{grid-column:span 6}
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
      margin-top:14px;
    }
    .entry-pill{
      display:flex;
      align-items:center;
      gap:8px;
      padding:10px 11px;
      border-radius:16px;
      background:#F3F8FF;
      color:#315EA8;
      font-size:13px;
      font-weight:800;
      border:1px solid rgba(37,99,235,.10);
    }
    .step-mini{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:12px;
      color:#526173;
      font-size:13px;
    }
    .step-mini b{
      color:var(--primary);
      background:#EAF3FF;
      border-radius:999px;
      padding:2px 8px;
    }
    .lock-widget{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .lock-widget i{
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      font-size:20px;
    }
    .progress-soft{
      height:10px;
      border-radius:999px;
      background:#EAF0FA;
      overflow:hidden;
      margin-top:14px;
    }
    .progress-soft span{
      display:block;
      height:100%;
      width:78%;
      background:linear-gradient(90deg,var(--primary),var(--warm));
      border-radius:inherit;
    }

    .directory-wrap{
      position:relative;
    }
    .scroll-row{
      display:flex;
      gap:18px;
      overflow-x:auto;
      padding:8px 2px 24px;
      scroll-snap-type:x mandatory;
    }
    .scroll-row::-webkit-scrollbar{height:8px}
    .scroll-row::-webkit-scrollbar-thumb{background:#C8D9F4;border-radius:999px}
    .flow-card{
      min-width:255px;
      flex:0 0 255px;
      scroll-snap-align:start;
      background:#fff;
      border:1px solid var(--border);
      border-radius:26px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:.24s ease;
    }
    .flow-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(37,99,235,.24);
    }
    .abstract-cover{
      height:138px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 20% 28%,rgba(124,107,255,.28),transparent 24%),
        radial-gradient(circle at 78% 42%,rgba(255,184,107,.22),transparent 22%),
        linear-gradient(135deg,#EAF3FF,#FFFFFF 46%,#DCEBFF);
    }
    .abstract-cover:before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:22px;
      border:1px solid rgba(37,99,235,.14);
      background:linear-gradient(120deg,rgba(255,255,255,.38),rgba(255,255,255,.12));
      transform:skewX(-8deg);
    }
    .flow-body{padding:20px}
    .flow-body h3{
      font-size:19px;
      line-height:1.35;
      margin:0 0 9px;
      font-weight:850;
      letter-spacing:-.02em;
    }
    .flow-body p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:14px;
    }
    .tagline{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}

    .value-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      align-items:stretch;
    }
    .value-main,.value-side,.info-card,.recommend-card,.topic-card,.form-card,.quote-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow:var(--shadow);
    }
    .value-main{padding:30px}
    .value-list{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      margin-top:22px;
    }
    .value-item{
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg,#F8FBFF,#FFFFFF);
      border:1px solid rgba(230,236,245,.9);
      transition:.22s ease;
    }
    .value-item:hover{transform:translateY(-4px);border-color:rgba(37,99,235,.25)}
    .value-item i{
      color:var(--primary);
      font-size:22px;
      margin-bottom:10px;
    }
    .value-item h3{
      font-size:18px;
      font-weight:850;
      margin:0 0 8px;
    }
    .value-item p{margin:0;color:var(--muted);font-size:14px}
    .value-side{
      padding:24px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        radial-gradient(circle at 88% 12%,rgba(37,99,235,.12),transparent 30%),
        #fff;
    }
    .invite-box{
      padding:20px;
      border-radius:24px;
      background:#F4F8FF;
      border:1px dashed rgba(37,99,235,.24);
    }
    .rank-list{
      margin:18px 0 0;
      display:grid;
      gap:10px;
    }
    .rank-item{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:12px 13px;
      border-radius:16px;
      background:#fff;
      border:1px solid rgba(230,236,245,.9);
      color:#475467;
      font-size:14px;
      font-weight:700;
    }
    .rank-item b{color:var(--primary)}

    .news-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 330px;
      gap:22px;
      align-items:start;
    }
    .news-list,.side-pick{
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:14px;
    }
    .news-link{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:17px 16px;
      border-radius:20px;
      border:1px solid transparent;
    }
    .news-link:hover{
      background:#F7FAFF;
      border-color:rgba(37,99,235,.16);
      transform:translateX(3px);
    }
    .news-no{
      width:36px;
      height:36px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:#EAF3FF;
      color:var(--primary);
      font-weight:900;
    }
    .news-link h3{
      margin:0 0 4px;
      font-size:17px;
      font-weight:850;
    }
    .news-link p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }
    .news-link .bi-arrow-right{color:var(--primary)}
    .side-pick{
      position:sticky;
      top:110px;
      padding:22px;
    }
    .side-pick .big-number{
      font-size:44px;
      font-weight:900;
      letter-spacing:-.06em;
      color:var(--primary);
      line-height:1;
      margin:12px 0 8px;
    }

    .recommend-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
    }
    .recommend-card{
      overflow:hidden;
      transition:.22s ease;
    }
    .recommend-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
    .recommend-top{
      min-height:185px;
      padding:24px;
      background:
        radial-gradient(circle at 22% 20%,rgba(124,107,255,.18),transparent 25%),
        linear-gradient(135deg,#EAF3FF,#fff 55%,#DCEBFF);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .recommend-body{padding:24px}
    .recommend-body h3{margin:0 0 10px;font-size:23px;font-weight:900}
    .recommend-body p{margin:0;color:var(--muted)}
    .compact-list{
      display:grid;
      gap:12px;
    }
    .compact-card{
      display:flex;
      gap:14px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:22px;
      box-shadow:0 12px 30px rgba(37,99,235,.07);
      padding:16px;
      transition:.22s ease;
    }
    .compact-card:hover{
      border-color:rgba(37,99,235,.28);
      transform:translateY(-3px);
      box-shadow:var(--shadow);
    }
    .compact-icon{
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:#EAF3FF;
      color:var(--primary);
      flex:0 0 auto;
      font-size:20px;
    }
    .compact-card h3{font-size:17px;font-weight:850;margin:0 0 4px}
    .compact-card p{font-size:14px;color:var(--muted);margin:0}

    .topic-masonry{
      display:grid;
      grid-template-columns:1.1fr .9fr 1fr;
      gap:18px;
      align-items:start;
    }
    .topic-card{
      padding:23px;
      min-height:190px;
      transition:.22s ease;
      overflow:hidden;
      position:relative;
    }
    .topic-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
    .topic-card.tall{min-height:265px}
    .topic-card.soft{
      background:linear-gradient(180deg,#F7FAFF,#fff);
    }
    .topic-card:after{
      content:"";
      position:absolute;
      right:-38px;
      bottom:-48px;
      width:130px;
      height:130px;
      border-radius:50%;
      background:rgba(37,99,235,.07);
    }
    .topic-card i{font-size:24px;color:var(--primary)}
    .topic-card h3{margin:12px 0 8px;font-size:20px;font-weight:900}
    .topic-card p{margin:0 0 14px;color:var(--muted);font-size:14px}

    .scenario{
      border-radius:34px;
      background:
        linear-gradient(135deg,#FFFFFF,#F2F7FF),
        radial-gradient(circle at 70% 20%,rgba(124,107,255,.12),transparent 28%);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:32px;
    }
    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:26px;
    }
    .step-card{
      padding:18px;
      border-radius:22px;
      background:#fff;
      border:1px solid var(--border);
      transition:.22s ease;
    }
    .step-card:hover{transform:translateY(-4px);border-color:rgba(37,99,235,.25)}
    .step-card b{
      display:inline-flex;
      margin-bottom:10px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--accent));
      border-radius:999px;
      padding:4px 10px;
      font-size:13px;
    }
    .step-card h3{font-size:18px;font-weight:850;margin:0 0 8px}
    .step-card p{margin:0;color:var(--muted);font-size:14px}

    .social-bar{
      border-radius:30px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:24px;
    }
    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .trust-item{
      padding:18px;
      border-radius:22px;
      background:#F7FAFF;
      border:1px solid rgba(230,236,245,.9);
      text-align:center;
    }
    .trust-item strong{
      display:block;
      font-size:28px;
      color:var(--primary);
      font-weight:900;
      line-height:1.1;
    }
    .trust-item span{
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }

    .lead-cta{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      background:
        radial-gradient(circle at 20% 30%,rgba(255,184,107,.20),transparent 24%),
        radial-gradient(circle at 80% 20%,rgba(124,107,255,.16),transparent 28%),
        linear-gradient(135deg,#EAF3FF,#FFFFFF 56%,#DCEBFF);
      border:1px solid rgba(230,236,245,.95);
      box-shadow:var(--shadow-hover);
      padding:34px;
    }
    .lead-cta:before{
      content:"";
      position:absolute;
      inset:0;
      background:repeating-linear-gradient(135deg,rgba(37,99,235,.04) 0 1px,transparent 1px 16px);
      pointer-events:none;
    }
    .cta-content{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr 410px;
      gap:28px;
      align-items:center;
    }
    .form-card{
      padding:22px;
      box-shadow:0 14px 36px rgba(37,99,235,.09);
    }
    .form-control,.form-check-input{
      border-color:var(--border);
      border-radius:16px;
    }
    .form-control{
      padding:12px 14px;
      background:#F9FBFF;
    }
    .form-control:focus{
      border-color:rgba(37,99,235,.42);
      box-shadow:0 0 0 .25rem rgba(37,99,235,.10);
      background:#fff;
    }
    .form-check-input:checked{
      background-color:var(--primary);
      border-color:var(--primary);
    }
    .small-note{
      color:var(--muted);
      font-size:13px;
      margin-top:12px;
    }

    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      border:1px solid var(--border)!important;
      border-radius:22px!important;
      overflow:hidden;
      box-shadow:0 12px 30px rgba(37,99,235,.06);
      background:#fff;
    }
    .accordion-button{
      border-radius:22px!important;
      font-weight:850;
      color:var(--text);
      background:#fff;
      padding:18px 22px;
      box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary);
      background:#F7FAFF;
    }
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px;
      font-size:15px;
    }

    .site-footer{
      padding:54px 0 28px;
      background:linear-gradient(180deg,#F7FAFF,#EEF5FF);
      border-top:1px solid var(--border);
    }
    .footer-card{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(230,236,245,.92);
      border-radius:30px;
      padding:28px;
      box-shadow:0 14px 38px rgba(37,99,235,.07);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:900;
      font-size:20px;
      margin-bottom:12px;
    }
    .footer-desc{
      color:var(--muted);
      max-width:560px;
      margin:0;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-links a{
      padding:8px 12px;
      border-radius:999px;
      background:#F3F8FF;
      color:#315EA8;
      font-weight:700;
      font-size:14px;
    }
    .footer-links a:hover{background:#EAF3FF;color:var(--primary)}
    .compliance{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:18px;
    }
    .copyright{
      color:#7B8798;
      font-size:13px;
      margin-top:20px;
      padding-top:18px;
      border-top:1px solid rgba(230,236,245,.9);
    }

    @media (max-width: 991.98px){
      .site-header{padding:12px 10px 6px}
      .nav-dock{border-radius:28px}
      .navbar-collapse{
        margin-top:12px;
        padding:12px;
        border-radius:22px;
        background:#F7FAFF;
        border:1px solid var(--border);
      }
      .nav-search{width:100%;margin-top:10px}
      .nav-search input{width:100%}
      .hero-stage{padding:28px;border-radius:32px}
      .hero-badge{position:static;width:max-content;margin-bottom:14px;transform:none}
      .hero-layout{grid-template-columns:1fr;min-height:0}
      .poster-panel{grid-template-columns:repeat(2,1fr)}
      .panel-card.large,.panel-card.tall,.panel-card.wide{grid-column:span 2}
      .value-grid,.news-layout,.recommend-grid,.cta-content{grid-template-columns:1fr}
      .side-pick{position:relative;top:auto}
      .topic-masonry{grid-template-columns:1fr 1fr}
      .steps,.trust-grid{grid-template-columns:repeat(2,1fr)}
      .section{padding:64px 0}
    }
    @media (max-width: 575.98px){
      body{line-height:1.68}
      .section{padding:52px 0}
      .section-head{display:block}
      .hero{padding:32px 0 52px}
      .hero-stage{padding:20px;border-radius:26px}
      .hero-intro{font-size:16px}
      .hero-actions{flex-direction:column}
      .btn-brand,.btn-ghost{width:100%}
      .hero-metrics{grid-template-columns:1fr}
      .poster-panel{gap:12px}
      .panel-card{padding:16px;border-radius:20px}
      .entry-grid{grid-template-columns:1fr}
      .value-list,.topic-masonry,.steps,.trust-grid{grid-template-columns:1fr}
      .news-link{grid-template-columns:auto 1fr}
      .news-link .bi-arrow-right{display:none}
      .footer-links{justify-content:flex-start;margin-top:18px}
      .lead-cta{padding:22px;border-radius:26px}
      .navbar-brand{font-size:15px;margin-right:0}
      .logo-mark{width:34px;height:34px;border-radius:12px}
    }

/* roulang page: category1 */
:root{
      --primary:#2563EB;
      --primary-2:#4F8BFF;
      --accent:#7C6BFF;
      --accent-2:#FFB86B;
      --bg:#F7FAFF;
      --bg-soft:#EAF3FF;
      --bg-soft-2:#DCEBFF;
      --card:#FFFFFF;
      --text:#182033;
      --text-2:#667085;
      --border:#E6ECF5;
      --shadow:0 18px 45px rgba(37, 99, 235, 0.10);
      --shadow-hover:0 24px 60px rgba(37, 99, 235, 0.16);
      --shadow-dock:0 12px 36px rgba(31, 41, 55, 0.10);
      --radius-xl:32px;
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1180px;
      --section-gap:84px;
      --line:1px solid rgba(230,236,245,0.95);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(124,107,255,.08), transparent 22%),
        linear-gradient(180deg, #F9FBFF 0%, #F7FAFF 52%, #F4F8FF 100%);
      line-height:1.7;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:all .25s ease}
    a:hover{color:var(--primary)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(37,99,235,.16);color:var(--text)}
    .container-xl{max-width:var(--container)}
    .site-header{
      position:sticky;
      top:18px;
      z-index:1030;
      padding:0 14px;
      pointer-events:none;
    }
    .nav-dock{
      pointer-events:auto;
      max-width:1180px;
      margin:0 auto;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(230,236,245,.9);
      box-shadow:var(--shadow-dock);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      padding:.65rem .9rem;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text);
      white-space:nowrap;
    }
    .logo-mark{
      width:38px;height:38px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,139,255,.18));
      color:var(--primary);
      border:1px solid rgba(37,99,235,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
      flex:0 0 auto;
    }
    .navbar-nav{gap:.35rem}
    .nav-link{
      border-radius:999px;
      color:#445068;
      font-weight:600;
      padding:.55rem .95rem !important;
    }
    .nav-link:hover,
    .nav-link:focus{
      background:#EEF5FF;
      color:var(--primary);
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,139,255,.16));
      color:var(--primary);
      box-shadow:inset 0 0 0 1px rgba(37,99,235,.08);
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:.55rem;
      min-width:250px;
      max-width:320px;
      padding:.6rem .9rem;
      border-radius:999px;
      background:#F8FBFF;
      border:1px solid var(--border);
      color:#8A97B2;
    }
    .nav-search input{
      border:0;
      outline:0;
      background:transparent;
      width:100%;
      color:var(--text);
      min-width:0;
    }
    .nav-search:focus-within{
      border-color:rgba(37,99,235,.28);
      box-shadow:0 0 0 .24rem rgba(37,99,235,.08);
      background:#fff;
    }
    .btn-soft,
    .btn-main,
    .btn-light-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border:0;
      border-radius:999px;
      padding:.78rem 1.15rem;
      font-weight:700;
      transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
      white-space:nowrap;
    }
    .btn-main{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 14px 28px rgba(37,99,235,.20);
    }
    .btn-main:hover,.btn-main:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(37,99,235,.26);
    }
    .btn-soft,.btn-light-soft{
      background:#fff;
      color:var(--primary);
      border:1px solid rgba(37,99,235,.14);
    }
    .btn-soft:hover,.btn-light-soft:hover,
    .btn-soft:focus,.btn-light-soft:focus{
      background:#EDF5FF;
      color:var(--primary);
      transform:translateY(-2px);
      box-shadow:0 12px 24px rgba(37,99,235,.10);
    }
    .page-hero{
      padding:96px 0 28px;
      position:relative;
    }
    .page-hero::before{
      content:"";
      position:absolute;
      inset:18px auto auto 50%;
      transform:translateX(-50%);
      width:min(1180px, calc(100% - 28px));
      height:100%;
      background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.08), transparent 18%),
        radial-gradient(circle at 85% 18%, rgba(124,107,255,.08), transparent 16%),
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
      border-radius:36px;
      pointer-events:none;
      z-index:-1;
    }
    .hero-shell{
      background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,251,255,.96));
      border:1px solid rgba(230,236,245,.88);
      border-radius:36px;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-shell::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(37,99,235,.04), transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(255,184,107,.12), transparent 14%);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:28px;
      padding:28px;
      position:relative;
      z-index:1;
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-bottom:1rem;
      color:var(--text-2);
      font-size:.93rem;
    }
    .crumbs a{color:var(--text-2)}
    .crumbs a:hover{color:var(--primary)}
    .hero-title{
      font-size:clamp(2rem, 3.5vw, 3.35rem);
      line-height:1.12;
      letter-spacing:-.04em;
      font-weight:800;
      margin:0 0 1rem;
      max-width:12ch;
    }
    .hero-copy{
      font-size:1.04rem;
      color:var(--text-2);
      max-width:46rem;
      margin:0 0 1.35rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-bottom:1.45rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.38rem;
      border-radius:999px;
      padding:.45rem .8rem;
      font-size:.82rem;
      font-weight:700;
      border:1px solid var(--border);
      background:#fff;
      color:#42506a;
      white-space:nowrap;
    }
    .tag.primary{
      background:rgba(37,99,235,.10);
      color:var(--primary);
      border-color:rgba(37,99,235,.12);
    }
    .tag.purple{
      background:rgba(124,107,255,.12);
      color:var(--accent);
      border-color:rgba(124,107,255,.14);
    }
    .tag.warm{
      background:rgba(255,184,107,.16);
      color:#B96B10;
      border-color:rgba(255,184,107,.20);
    }
    .tag.hot{
      background:rgba(37,99,235,.14);
      color:#1142A7;
      border-color:rgba(37,99,235,.14);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-bottom:1rem;
    }
    .notice-line{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem 1rem;
      color:var(--text-2);
      font-size:.94rem;
      align-items:center;
    }
    .notice-line .dot{
      width:6px;height:6px;border-radius:50%;
      background:rgba(37,99,235,.35);
      display:inline-block;
      margin:0 .45rem;
    }
    .hero-panels{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .mini-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:22px;
      box-shadow:0 10px 30px rgba(37,99,235,.08);
      padding:18px;
      position:relative;
      overflow:hidden;
      min-height:162px;
    }
    .mini-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(37,99,235,.08), transparent 45%);
      pointer-events:none;
    }
    .mini-card .mini-label{
      color:var(--primary);
      font-weight:800;
      letter-spacing:.02em;
      font-size:.82rem;
      margin-bottom:.55rem;
      display:inline-flex;
      gap:.35rem;
      align-items:center;
    }
    .mini-card h3{
      font-size:1.05rem;
      margin:0 0 .55rem;
      font-weight:800;
    }
    .mini-card p{
      margin:0;
      color:var(--text-2);
      font-size:.93rem;
    }
    .entry-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.85rem;
    }
    .entry-tags .tag{
      padding:.32rem .68rem;
      font-size:.76rem;
      background:#F6FAFF;
    }
    .step-list{
      display:grid;
      gap:.8rem;
      margin-top:.8rem;
    }
    .step-item{
      display:flex;
      gap:.8rem;
      align-items:flex-start;
    }
    .step-num{
      width:30px;height:30px;border-radius:10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,139,255,.16));
      color:var(--primary);
      font-weight:800;
      flex:0 0 auto;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .step-item strong{
      display:block;
      font-size:.94rem;
      margin-bottom:.15rem;
    }
    .step-item span{
      display:block;
      color:var(--text-2);
      font-size:.88rem;
    }
    .privacy-card{
      display:flex;
      gap:.85rem;
      align-items:flex-start;
      min-height:auto;
    }
    .privacy-icon{
      width:42px;height:42px;border-radius:14px;
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--primary);
      background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(79,139,255,.16));
    }
    .meter{
      margin-top:.9rem;
      height:10px;
      background:#EEF4FF;
      border-radius:999px;
      overflow:hidden;
    }
    .meter > span{
      display:block;
      height:100%;
      width:92%;
      background:linear-gradient(90deg, var(--primary), var(--primary-2));
      border-radius:inherit;
      position:relative;
    }
    .meter > span::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
      animation:shine 2.6s linear infinite;
    }
    @keyframes shine{
      from{transform:translateX(-55%)}
      to{transform:translateX(55%)}
    }
    .section-block{
      padding:var(--section-gap) 0 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:20px;
      margin-bottom:22px;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.45rem, 2vw, 2.1rem);
      font-weight:800;
      letter-spacing:-.03em;
    }
    .section-desc{
      margin:0;
      color:var(--text-2);
      max-width:56rem;
    }
    .scroll-tags{
      display:flex;
      gap:.55rem;
      overflow-x:auto;
      padding-bottom:6px;
      scrollbar-width:none;
    }
    .scroll-tags::-webkit-scrollbar{display:none}
    .scroll-tags .tag{
      flex:0 0 auto;
      padding:.58rem .9rem;
      background:#fff;
    }
    .scroll-tags .tag.active{
      background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,139,255,.16));
      color:var(--primary);
      border-color:rgba(37,99,235,.14);
    }
    .feature-scroll{
      display:flex;
      gap:18px;
      overflow-x:auto;
      padding-bottom:10px;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
    }
    .feature-scroll::-webkit-scrollbar{display:none}
    .feature-card{
      width:clamp(250px, 23vw, 330px);
      flex:0 0 auto;
      scroll-snap-align:start;
      background:#fff;
      border:1px solid var(--border);
      border-radius:26px;
      box-shadow:var(--shadow);
      overflow:hidden;
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .feature-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(37,99,235,.22);
    }
    .feature-cover{
      height:166px;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 22% 28%, rgba(255,255,255,.58), transparent 18%),
        radial-gradient(circle at 82% 20%, rgba(255,184,107,.52), transparent 16%),
        linear-gradient(135deg, #EAF3FF 0%, #DCEBFF 48%, #F5F8FF 100%);
    }
    .feature-cover::before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.55);
      background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,107,255,.05));
      backdrop-filter:blur(4px);
    }
    .feature-cover::after{
      content:"";
      position:absolute;
      inset:auto 16px 16px 16px;
      height:40px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(37,99,235,.22), rgba(124,107,255,.16), rgba(255,184,107,.18));
      filter:blur(16px);
      opacity:.85;
    }
    .feature-body{
      padding:20px;
    }
    .feature-body h3{
      font-size:1.08rem;
      margin:0 0 .55rem;
      font-weight:800;
      line-height:1.35;
    }
    .feature-body p{
      margin:0 0 .95rem;
      color:var(--text-2);
      font-size:.95rem;
    }
    .feature-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.42rem;
      margin-bottom:.95rem;
    }
    .feature-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.8rem;
    }
    .text-link{
      color:var(--primary);
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:.3rem;
    }
    .text-link:hover{gap:.48rem}
    .stats-row{
      display:grid;
      grid-template-columns:1.18fr .82fr;
      gap:22px;
      align-items:stretch;
    }
    .highlight-card{
      border-radius:28px;
      background:linear-gradient(135deg, #fff, #F8FBFF);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .highlight-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 10% 20%, rgba(37,99,235,.08), transparent 20%),
        radial-gradient(circle at 86% 8%, rgba(255,184,107,.18), transparent 16%);
      pointer-events:none;
    }
    .highlight-media{
      min-height:230px;
      background:
        linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,139,255,.08)),
        radial-gradient(circle at 24% 34%, rgba(255,255,255,.75), transparent 18%),
        radial-gradient(circle at 78% 26%, rgba(124,107,255,.20), transparent 16%);
      position:relative;
      overflow:hidden;
    }
    .highlight-media::after{
      content:"";
      position:absolute;
      inset:26px;
      border-radius:30px;
      border:1px dashed rgba(37,99,235,.18);
      background:
        linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.46));
      backdrop-filter:blur(5px);
    }
    .highlight-body{
      padding:22px 24px 24px;
      position:relative;
      z-index:1;
    }
    .highlight-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.8rem;
      font-weight:800;
      color:#0F4CC9;
      padding:.38rem .7rem;
      background:rgba(37,99,235,.10);
      border:1px solid rgba(37,99,235,.12);
      border-radius:999px;
      margin-bottom:.8rem;
    }
    .highlight-body h3{
      font-size:1.45rem;
      line-height:1.28;
      margin:0 0 .75rem;
      font-weight:800;
    }
    .highlight-body p{
      color:var(--text-2);
      margin:0 0 1rem;
    }
    .compact-list{
      display:grid;
      gap:14px;
    }
    .compact-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:16px;
      border-radius:22px;
      background:#fff;
      border:1px solid var(--border);
      box-shadow:0 12px 30px rgba(37,99,235,.06);
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .compact-item:hover{
      transform:translateY(-4px);
      border-color:rgba(37,99,235,.24);
      box-shadow:0 18px 40px rgba(37,99,235,.11);
    }
    .compact-icon{
      width:42px;height:42px;
      border-radius:14px;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(79,139,255,.14));
      color:var(--primary);
    }
    .compact-item h4{
      margin:0 0 .25rem;
      font-size:.98rem;
      font-weight:800;
    }
    .compact-item p{
      margin:0;
      color:var(--text-2);
      font-size:.91rem;
    }
    .masonry{
      columns:2 280px;
      column-gap:18px;
    }
    .topic-card{
      break-inside:avoid;
      margin:0 0 18px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:26px;
      box-shadow:var(--shadow);
      overflow:hidden;
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }
    .topic-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(37,99,235,.22);
    }
    .topic-top{
      padding:18px 18px 14px;
      background:linear-gradient(135deg, rgba(37,99,235,.09), rgba(220,235,255,.95));
      position:relative;
      min-height:116px;
    }
    .topic-top::after{
      content:"";
      position:absolute;
      inset:auto 16px 16px auto;
      width:66px;height:66px;border-radius:22px;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.15));
      border:1px solid rgba(255,255,255,.6);
      filter:blur(.1px);
      transform:rotate(10deg);
    }
    .topic-top .icon{
      width:42px;height:42px;border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      color:var(--primary);
      box-shadow:0 8px 20px rgba(37,99,235,.12);
      margin-bottom:.8rem;
      position:relative;
      z-index:1;
    }
    .topic-body{padding:18px}
    .topic-body h3{
      margin:0 0 .55rem;
      font-size:1.08rem;
      font-weight:800;
    }
    .topic-body p{
      margin:0 0 .9rem;
      color:var(--text-2);
      font-size:.94rem;
    }
    .topic-body .tag{margin-right:.25rem;margin-bottom:.35rem}
    .side-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:22px;
      position:sticky;
      top:112px;
    }
    .side-card h3{
      margin:0 0 .75rem;
      font-size:1.15rem;
      font-weight:800;
    }
    .side-card .small-note{
      color:var(--text-2);
      font-size:.94rem;
      margin-bottom:1rem;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.85rem;
    }
    .check-list li{
      display:flex;
      gap:.72rem;
      align-items:flex-start;
      color:#334155;
      font-size:.95rem;
    }
    .check-list i{
      color:var(--primary);
      flex:0 0 auto;
      margin-top:.1rem;
    }
    .side-actions{
      display:grid;
      gap:.7rem;
      margin-top:1.2rem;
    }
    .cta-band{
      margin-top:var(--section-gap);
      border-radius:34px;
      background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.42), transparent 18%),
        radial-gradient(circle at 88% 0%, rgba(255,184,107,.20), transparent 18%),
        linear-gradient(135deg, rgba(37,99,235,.98), rgba(79,139,255,.96));
      color:#fff;
      box-shadow:0 24px 60px rgba(37,99,235,.22);
      overflow:hidden;
      position:relative;
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px);
      opacity:.5;
      pointer-events:none;
    }
    .cta-band .inner{
      position:relative;
      z-index:1;
      padding:30px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }
    .cta-band h2{
      margin:0 0 .5rem;
      font-size:clamp(1.5rem, 2.4vw, 2.2rem);
      font-weight:800;
      letter-spacing:-.03em;
    }
    .cta-band p{
      margin:0;
      max-width:56rem;
      color:rgba(255,255,255,.88);
    }
    .cta-actions{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      justify-content:flex-end;
      flex:0 0 auto;
    }
    .btn-cta{
      background:#fff;
      color:var(--primary);
      border:0;
      border-radius:999px;
      padding:.82rem 1.2rem;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      box-shadow:0 12px 26px rgba(255,255,255,.18);
    }
    .btn-cta:hover{transform:translateY(-2px);color:var(--primary)}
    .btn-ghost{
      background:rgba(255,255,255,.12);
      color:#fff;
      border:1px solid rgba(255,255,255,.22);
      border-radius:999px;
      padding:.82rem 1.2rem;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
    }
    .btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-2px)}
    .faq-wrap{
      margin-top:var(--section-gap);
    }
    .faq-wrap .accordion-item{
      border:1px solid rgba(37,99,235,.12);
      border-radius:20px;
      overflow:hidden;
      margin-bottom:14px;
      background:#fff;
      box-shadow:0 12px 28px rgba(37,99,235,.05);
    }
    .faq-wrap .accordion-button{
      background:#fff;
      color:var(--text);
      font-weight:800;
      padding:1.1rem 1.15rem;
      box-shadow:none;
    }
    .faq-wrap .accordion-button:not(.collapsed){
      color:var(--primary);
      background:rgba(37,99,235,.04);
    }
    .faq-wrap .accordion-button:focus{
      box-shadow:0 0 0 .25rem rgba(37,99,235,.10);
      border-color:rgba(37,99,235,.22);
    }
    .faq-wrap .accordion-body{
      color:var(--text-2);
      padding:1rem 1.15rem 1.15rem;
      background:#fff;
    }
    .site-footer{
      margin-top:var(--section-gap);
      padding:0 0 26px;
    }
    .footer-card{
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,250,255,.95));
      border:1px solid rgba(230,236,245,.9);
      border-radius:30px;
      box-shadow:var(--shadow);
      padding:26px;
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      font-weight:800;
      font-size:1.02rem;
      margin-bottom:.85rem;
    }
    .footer-desc{
      margin:0 0 1rem;
      color:var(--text-2);
      max-width:58rem;
    }
    .compliance{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem 1.1rem;
      justify-content:flex-start;
      align-content:flex-start;
    }
    .footer-links a{
      color:#445068;
      font-weight:700;
    }
    .footer-links a:hover{color:var(--primary)}
    .copyright{
      margin-top:1.2rem;
      padding-top:1rem;
      border-top:1px solid var(--border);
      color:var(--text-2);
      font-size:.92rem;
    }
    .floating-dots{
      position:absolute;
      inset:auto 0 12px auto;
      width:140px;
      height:140px;
      opacity:.55;
      pointer-events:none;
      background:
        radial-gradient(circle at 30% 30%, rgba(37,99,235,.18), transparent 12%),
        radial-gradient(circle at 72% 24%, rgba(124,107,255,.16), transparent 12%),
        radial-gradient(circle at 56% 74%, rgba(255,184,107,.16), transparent 12%);
      filter:blur(2px);
    }
    .accordion-button::after{
      background-size:1rem;
    }
    .nav-link:focus-visible,
    .btn-main:focus-visible,
    .btn-soft:focus-visible,
    .btn-light-soft:focus-visible,
    .btn-cta:focus-visible,
    .btn-ghost:focus-visible,
    .accordion-button:focus-visible,
    input:focus-visible{
      outline:none;
      box-shadow:0 0 0 .28rem rgba(37,99,235,.16) !important;
    }
    @media (max-width: 1199.98px){
      .hero-grid{grid-template-columns:1fr}
      .hero-title{max-width:none}
      .hero-panels{grid-template-columns:repeat(2,1fr)}
      .stats-row{grid-template-columns:1fr}
      .side-card{position:relative;top:0}
    }
    @media (max-width: 991.98px){
      .site-header{top:12px}
      .nav-dock{border-radius:28px}
      .navbar-brand{font-size:.98rem}
      .nav-search{min-width:100%; max-width:none; margin-top:.8rem}
      .navbar-collapse{
        padding-top:.8rem;
      }
      .navbar-nav{
        align-items:flex-start;
      }
      .hero-shell{border-radius:30px}
      .hero-grid{padding:22px}
      .page-hero{padding-top:86px}
      .section-block,.faq-wrap,.site-footer{padding-top:64px}
      .cta-band .inner{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-actions{justify-content:flex-start}
    }
    @media (max-width: 767.98px){
      .hero-panels{grid-template-columns:1fr}
      .hero-title{font-size:clamp(1.9rem, 8vw, 2.4rem)}
      .hero-copy{font-size:.98rem}
      .feature-card{width:min(84vw, 330px)}
      .section-head{flex-direction:column;align-items:flex-start}
      .cta-band .inner{padding:22px}
      .footer-card{padding:20px}
    }
    @media (max-width: 575.98px){
      .site-header{padding:0 10px; top:10px}
      .nav-dock{padding:.55rem .75rem}
      .hero-shell{border-radius:26px}
      .hero-grid{padding:18px}
      .page-hero{padding-top:78px}
      .hero-actions .btn-main,
      .hero-actions .btn-soft{width:100%;justify-content:center}
      .hero-actions{display:grid}
      .notice-line{font-size:.88rem}
      .mini-card{padding:16px; min-height:auto}
      .feature-body,.topic-body{padding:16px}
      .cta-band{border-radius:28px}
      .cta-band h2{font-size:1.4rem}
      .compact-item{padding:14px}
      .footer-links{gap:.5rem .8rem}
    }