/* roulang page: index */
:root{
      --ink:#15191b;
      --ink-soft:#252c2e;
      --paper:#f5f6f2;
      --paper-deep:#e9ece6;
      --white:#fff;
      --muted:#737c7b;
      --line:#dce1db;
      --gold:#d8a845;
      --gold-light:#f0d18b;
      --teal:#69b5a7;
      --teal-dark:#397e75;
      --radius:16px;
      --radius-sm:10px;
      --shadow:0 18px 45px rgba(20,30,29,.10);
      --shadow-dark:0 22px 50px rgba(0,0,0,.25);
      --container:1180px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
    a{color:inherit;text-decoration:none}
    img{display:block;width:100%;object-fit:cover}
    button,input{font:inherit}
    button{border:0;cursor:pointer}
    :focus-visible{outline:3px solid rgba(216,168,69,.7);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .site-header{position:absolute;top:0;left:0;right:0;z-index:10;color:#fff}
    .nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.15)}
    .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
    .brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--gold-light);border-radius:9px;color:var(--gold-light);font-size:13px;font-weight:900;transform:rotate(45deg)}
    .brand-mark span{transform:rotate(-45deg)}
    .brand small{display:block;color:#b7c0bd;font-size:10px;font-weight:500;letter-spacing:.12em}
    .main-nav{display:flex;align-items:center;gap:32px;margin-left:70px}
    .main-nav a{position:relative;color:#e8eeea;font-size:14px;padding:27px 0;transition:.25s}
    .main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;background:var(--gold-light);transition:.25s}
    .main-nav a:hover,.main-nav a.active{color:#fff}
    .main-nav a:hover:after,.main-nav a.active:after{right:0}
    .nav-actions{display:flex;align-items:center;gap:10px}
    .nav-button{padding:9px 16px;border:1px solid rgba(255,255,255,.38);border-radius:8px;color:#fff;font-size:13px;transition:.25s}
    .nav-button:hover{background:rgba(255,255,255,.12);border-color:#fff}
    .nav-button.primary{background:var(--gold);border-color:var(--gold);color:#1d1a13;font-weight:700}
    .nav-button.primary:hover{background:var(--gold-light);transform:translateY(-1px)}
    .menu-toggle{display:none;background:none;color:#fff;font-size:25px}
    .hero{min-height:690px;position:relative;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(10,15,16,.92) 0%,rgba(10,15,16,.73) 48%,rgba(10,15,16,.44) 100%),url("/assets/images/backpic/back-1.webp") center/cover}
    .hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,var(--paper))}
    .hero-content{position:relative;z-index:1;padding-top:76px;width:100%}
    .hero-copy{max-width:665px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--gold-light);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
    .eyebrow:before,.section-kicker:before{content:"";width:28px;height:1px;background:currentColor}
    h1{font-size:clamp(40px,5.5vw,72px);line-height:1.12;letter-spacing:-.045em;margin:22px 0 22px;font-weight:900}
    .hero-copy p{max-width:570px;color:#d6dfda;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 23px;border-radius:9px;font-weight:700;font-size:14px;transition:.25s}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--gold);color:#1b1810;box-shadow:0 8px 20px rgba(216,168,69,.18)}
    .btn-primary:hover{background:var(--gold-light);box-shadow:0 12px 25px rgba(216,168,69,.28)}
    .btn-outline{border:1px solid rgba(255,255,255,.45);color:#fff}
    .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
    .hero-panel{position:absolute;right:0;bottom:104px;width:330px;padding:22px;background:rgba(28,37,37,.72);border:1px solid rgba(255,255,255,.19);border-radius:14px;backdrop-filter:blur(8px)}
    .hero-panel-title{font-size:13px;color:#bdc8c1;margin-bottom:17px}
    .hero-panel-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.12)}
    .hero-panel-row strong{font-size:25px;color:#fff}
    .hero-panel-row span{font-size:12px;color:#aebdb5}
    .trust-bar{position:relative;z-index:2;margin-top:-52px}
    .trust-inner{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border-radius:14px;box-shadow:var(--shadow);padding:22px 28px}
    .trust-item{display:flex;align-items:center;gap:13px;padding:4px 22px;border-right:1px solid var(--line)}
    .trust-item:last-child{border:0}
    .trust-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#edf5f1;color:var(--teal-dark);font-weight:800}
    .trust-item strong{display:block;font-size:14px}
    .trust-item span{display:block;color:var(--muted);font-size:12px}
    .section{padding:112px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}
    .section-title{font-size:36px;line-height:1.25;letter-spacing:-.035em;margin-top:12px}
    .section-intro{max-width:430px;color:var(--muted);font-size:14px}
    .entry-layout{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}
    .entry-large{min-height:370px;position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;background:#263130}
    .entry-large img{height:100%;opacity:.63;transition:.5s}
    .entry-large:hover img{transform:scale(1.04);opacity:.76}
    .entry-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:34px;background:linear-gradient(transparent 25%,rgba(12,19,18,.88))}
    .entry-overlay h3{font-size:29px;margin:9px 0 7px}
    .entry-overlay p{color:#d2ddd6;max-width:460px}
    .entry-small-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .entry-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:23px;min-height:175px;transition:.25s;display:flex;flex-direction:column;justify-content:space-between}
    .entry-card:hover{transform:translateY(-4px);border-color:#bfd2c8;box-shadow:var(--shadow)}
    .entry-card .card-icon{color:var(--teal-dark);font-size:25px}
    .entry-card h3{font-size:18px;margin:12px 0 3px}
    .entry-card p{font-size:13px;color:var(--muted);line-height:1.65}
    .arrow{color:var(--gold);font-size:18px;align-self:flex-end}
    .feature-band{background:var(--ink-soft);color:#fff;position:relative;overflow:hidden}
    .feature-band:before{content:"XPJ";position:absolute;right:-20px;top:-60px;font-size:280px;font-weight:900;color:rgba(255,255,255,.025);line-height:1}
    .feature-grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}
    .feature-band .section-title{color:#fff}
    .feature-band .section-intro{color:#aebbb4}
    .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:27px}
    .feature-item{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
    .feature-item b{display:block;color:var(--gold-light);font-size:14px;margin-bottom:7px}
    .feature-item p{font-size:13px;color:#c1cdc6;line-height:1.7}
    .showcase{display:grid;grid-template-columns:.88fr 1.12fr;gap:30px;align-items:stretch}
    .showcase-image{min-height:410px;border-radius:var(--radius);overflow:hidden;position:relative}
    .showcase-image img{height:100%}
    .image-caption{position:absolute;left:24px;bottom:22px;color:#fff;font-size:13px;padding:8px 12px;border-radius:7px;background:rgba(14,20,20,.68)}
    .content-stack{display:grid;gap:14px}
    .content-row{display:grid;grid-template-columns:130px 1fr auto;gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);padding:13px;border-radius:12px;transition:.25s}
    .content-row:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:#bed3ca}
    .content-row img{height:84px;border-radius:8px}
    .content-row h3{font-size:16px;margin-bottom:5px}
    .content-row p{font-size:12px;color:var(--muted);line-height:1.55}
    .tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:5px;background:#eef4ef;color:var(--teal-dark);font-size:11px;font-weight:700}
    .content-row .arrow{font-size:20px}
    .numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
    .number-item{background:var(--white);padding:28px 25px}
    .number-item strong{display:block;font-size:34px;letter-spacing:-.04em;color:var(--ink)}
    .number-item span{font-size:13px;color:var(--muted)}
    .faq-wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:85px}
    .faq-intro p{color:var(--muted);margin-top:17px}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;padding:20px 0;color:var(--ink);font-size:15px;font-weight:700}
    .faq-question span{color:var(--gold);font-size:23px;font-weight:400;transition:.25s}
    .faq-answer{max-height:0;overflow:hidden;color:var(--muted);font-size:13px;line-height:1.8;transition:max-height .3s ease}
    .faq-item.open .faq-answer{max-height:120px;padding:0 35px 20px 0}
    .faq-item.open .faq-question span{transform:rotate(45deg)}
    .cta{padding:70px 0;background:linear-gradient(110deg,#dfe9e1,#f4eee0)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
    .cta h2{font-size:32px;line-height:1.3;margin-top:10px}
    .cta p{color:#65716b;margin-top:8px}
    .cta .btn-outline{color:var(--ink);border-color:#9aa9a0}
    .cta .btn-outline:hover{background:rgba(255,255,255,.48);border-color:var(--ink)}
    .site-footer{background:#111718;color:#dce4df;padding:58px 0 24px}
    .footer-top{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:45px;padding-bottom:45px}
    .footer-brand p{font-size:13px;line-height:1.8;color:#93a09a;max-width:280px;margin-top:16px}
    .footer-title{font-size:13px;color:#fff;margin-bottom:15px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{font-size:13px;color:#93a09a;transition:.2s}
    .footer-links a:hover{color:var(--gold-light);padding-left:3px}
    .footer-note{font-size:13px;color:#93a09a;line-height:1.8}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#718079;font-size:12px}
    @media(max-width:1024px){
      .main-nav{margin-left:25px;gap:20px}
      .hero-panel{right:24px}
      .feature-grid,.faq-wrap{gap:40px}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 32px))}
      .nav-wrap{height:70px}
      .main-nav{display:none;position:absolute;top:70px;left:16px;right:16px;margin:0;padding:12px 20px;background:#1b2323;border:1px solid rgba(255,255,255,.16);border-radius:10px;flex-direction:column;align-items:flex-start;gap:0}
      .main-nav.open{display:flex}
      .main-nav a{padding:10px 0;width:100%}
      .main-nav a:after{bottom:5px}
      .nav-actions .nav-button{display:none}
      .menu-toggle{display:block}
      .hero{min-height:700px}
      .hero-panel{position:relative;right:auto;bottom:auto;margin-top:42px;width:100%;max-width:400px}
      .hero-content{padding-top:35px}
      .trust-inner{grid-template-columns:1fr 1fr;padding:15px}
      .trust-item{padding:12px;border-bottom:1px solid var(--line)}
      .trust-item:nth-child(2){border-right:0}
      .trust-item:nth-child(3),.trust-item:nth-child(4){border-bottom:0}
      .section{padding:78px 0}
      .section-head{display:block}
      .section-intro{margin-top:15px}
      .entry-layout,.feature-grid,.showcase,.faq-wrap{grid-template-columns:1fr}
      .feature-grid{gap:42px}
      .showcase-image{min-height:280px}
      .faq-wrap{gap:35px}
      .cta-inner{display:block}
      .cta-inner .btn{margin-top:25px}
      .footer-top{grid-template-columns:1fr 1fr;gap:32px}
    }
    @media(max-width:520px){
      h1{font-size:40px}
      .hero-copy p{font-size:15px}
      .hero-actions .btn{width:100%}
      .entry-small-grid,.feature-list{grid-template-columns:1fr}
      .entry-large{min-height:330px}
      .content-row{grid-template-columns:92px 1fr}
      .content-row img{height:72px}
      .content-row .arrow{display:none}
      .numbers{grid-template-columns:1fr}
      .number-item{padding:20px}
      .number-item strong{font-size:28px}
      .footer-top{grid-template-columns:1fr}
      .footer-bottom{display:block}
      .footer-bottom span{display:block;margin-top:8px}
    }

/* roulang page: category1 */
:root{
      --bg: #eef2f6;
      --bg-soft: #f6f8fb;
      --surface: #ffffff;
      --surface-2: #f1f4f8;
      --surface-dark: #11161d;
      --surface-dark-2: #171d26;
      --text: #182230;
      --text-soft: #5f6c7d;
      --text-inverse: #f7f9fc;
      --line: #d8e0ea;
      --line-dark: rgba(255,255,255,.08);
      --brand: #d8a54a;
      --brand-2: #39b6a3;
      --brand-3: #7e8ba3;
      --shadow: 0 18px 50px rgba(17, 24, 39, .08);
      --shadow-strong: 0 28px 70px rgba(17, 24, 39, .15);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1180px;
      --space: 24px;
      --header-h: 78px;
      --transition: 180ms ease;
    }

    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(216,165,74,.08), transparent 24%),
        radial-gradient(circle at top right, rgba(57,182,163,.08), transparent 22%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body::before{
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity: .35;
      mix-blend-mode: multiply;
    }
    a{
      color: inherit;
      text-decoration: none;
      transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    }
    img{
      display: block;
      max-width: 100%;
    }
    button,
    input,
    textarea,
    select{
      font: inherit;
    }
    button{
      border: 0;
      background: none;
      color: inherit;
      cursor: pointer;
    }
    :focus-visible{
      outline: 3px solid rgba(57,182,163,.35);
      outline-offset: 2px;
    }
    ::selection{
      background: rgba(216,165,74,.26);
      color: #10151b;
    }

    .container{
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .site-header{
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(13, 18, 26, .82);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: var(--text-inverse);
    }
    .header-inner{
      min-height: var(--header-h);
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
    }
    .brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      color: var(--text-inverse);
      letter-spacing: .2px;
      min-width: 0;
    }
    .brand-mark{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(216,165,74,1), rgba(57,182,163,1));
      display: grid;
      place-items: center;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      flex: 0 0 auto;
      position: relative;
      overflow: hidden;
    }
    .brand-mark::after{
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
    }
    .brand-mark span{
      position: relative;
      z-index: 1;
      font-size: 13px;
      font-weight: 800;
      color: #0d1117;
      letter-spacing: .5px;
    }
    .brand span:last-child{
      display: inline-flex;
      flex-direction: column;
      line-height: 1.15;
      font-size: 15px;
      min-width: 0;
    }
    .brand small{
      margin-top: 4px;
      font-size: 12px;
      color: rgba(247,249,252,.72);
      font-weight: 500;
      letter-spacing: .1px;
    }

    .main-nav{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 10px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .main-nav a{
      padding: 10px 14px;
      border-radius: 999px;
      color: rgba(247,249,252,.85);
      border: 1px solid transparent;
      font-size: 14px;
      line-height: 1.15;
      white-space: nowrap;
    }
    .main-nav a:hover,
    .main-nav a:focus-visible{
      color: #fff;
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      transform: translateY(-1px);
    }
    .main-nav a.active{
      color: #fff;
      background: rgba(216,165,74,.18);
      border-color: rgba(216,165,74,.34);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .main-nav a.active::after{
      content: "";
    }

    .header-actions{
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .nav-toggle{
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: #fff;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      transition: transform var(--transition), background var(--transition), border-color var(--transition);
    }
    .nav-toggle:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.09);
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 14px;
      border: 1px solid transparent;
      font-weight: 600;
      font-size: 14px;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
      white-space: nowrap;
    }
    .btn:hover{
      transform: translateY(-2px);
    }
    .btn-primary{
      color: #11161d;
      background: linear-gradient(135deg, #e4bb65 0%, #d8a54a 100%);
      box-shadow: 0 14px 24px rgba(216,165,74,.22);
    }
    .btn-primary:hover{
      box-shadow: 0 18px 30px rgba(216,165,74,.28);
    }
    .btn-ghost{
      color: #fff;
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.12);
    }
    .btn-ghost:hover{
      background: rgba(255,255,255,.09);
      border-color: rgba(255,255,255,.18);
    }
    .btn-soft{
      color: var(--text);
      background: #eef3f8;
      border-color: #dbe3ed;
    }
    .btn-soft:hover{
      background: #e6edf5;
    }

    main{
      padding: 22px 0 8px;
      position: relative;
      z-index: 1;
    }

    .page-hero{
      position: relative;
      margin-bottom: 24px;
    }
    .hero-shell{
      background:
        linear-gradient(135deg, rgba(8,12,18,.92) 0%, rgba(17,22,29,.86) 52%, rgba(17,22,29,.76) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      border-radius: 30px;
      box-shadow: var(--shadow-strong);
      overflow: hidden;
      color: var(--text-inverse);
      position: relative;
    }
    .hero-shell::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 15% 15%, rgba(216,165,74,.15), transparent 22%),
        radial-gradient(circle at 86% 18%, rgba(57,182,163,.16), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
      pointer-events: none;
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 28px;
      padding: 42px;
      position: relative;
      z-index: 1;
    }
    .kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(247,249,252,.9);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .2px;
    }
    .kicker::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--brand-2);
      box-shadow: 0 0 0 6px rgba(57,182,163,.12);
    }
    .hero-title{
      margin: 18px 0 14px;
      font-size: clamp(34px, 4.2vw, 56px);
      line-height: 1.06;
      letter-spacing: -.8px;
    }
    .hero-text{
      margin: 0;
      max-width: 700px;
      color: rgba(247,249,252,.78);
      font-size: 16px;
      line-height: 1.88;
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 26px 0 18px;
    }
    .hero-points{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .hero-points li{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(247,249,252,.86);
      font-size: 14px;
      line-height: 1.35;
    }
    .hero-points span{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      flex: 0 0 auto;
      box-shadow: 0 0 0 5px rgba(255,255,255,.04);
    }

    .hero-visual{
      display: grid;
      align-content: center;
      gap: 16px;
    }
    .visual-card{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 24px;
      padding: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      overflow: hidden;
    }
    .visual-card figure{
      margin: 0;
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      aspect-ratio: 5 / 4;
      background: rgba(255,255,255,.04);
    }
    .visual-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.01);
    }
    .visual-badge{
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(10,14,20,.72);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      backdrop-filter: blur(12px);
    }
    .visual-badge::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--brand);
      box-shadow: 0 0 0 6px rgba(216,165,74,.12);
    }
    .mini-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .mini-item{
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(247,249,252,.9);
      min-height: 100px;
    }
    .mini-item strong{
      display: block;
      font-size: 14px;
      margin-bottom: 7px;
    }
    .mini-item p{
      margin: 0;
      color: rgba(247,249,252,.72);
      font-size: 13px;
      line-height: 1.65;
    }

    .trust-row{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .trust-item{
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(216,224,234,.78);
      box-shadow: 0 8px 26px rgba(15, 20, 30, .04);
      color: var(--text);
    }
    .trust-item i{
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex: 0 0 auto;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 0 0 6px rgba(57,182,163,.08);
    }
    .trust-item span{
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
    }

    .section-block{
      margin: 24px 0 0;
      padding: 28px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(216,224,234,.9);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .section-block.alt{
      background: linear-gradient(180deg, rgba(247,249,252,.95), rgba(241,245,250,.95));
    }
    .section-head{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items: end;
      margin-bottom: 22px;
    }
    .section-head h2{
      margin: 0;
      font-size: clamp(24px, 2vw, 32px);
      line-height: 1.2;
      letter-spacing: -.3px;
      color: var(--text);
    }
    .section-head p{
      margin: 10px 0 0;
      max-width: 760px;
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.8;
    }
    .section-badge{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(216,165,74,.12);
      color: #82601c;
      border: 1px solid rgba(216,165,74,.18);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .filter-bar{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
    }
    .tag{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      background: #edf2f7;
      color: #364353;
      border: 1px solid #dce4ed;
      font-size: 13px;
      font-weight: 600;
    }
    .tag:hover,
    .tag:focus-visible{
      background: #e4ebf3;
      border-color: #ced9e5;
      transform: translateY(-1px);
    }
    .tag.active{
      background: rgba(57,182,163,.12);
      border-color: rgba(57,182,163,.22);
      color: #0f6f64;
    }

    .feature-grid{
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 18px;
    }
    .feature-highlight,
    .feature-stack .feature-card{
      background: #fff;
      border: 1px solid #dce3ed;
      border-radius: 24px;
      box-shadow: 0 12px 30px rgba(17,24,39,.06);
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .feature-highlight:hover,
    .feature-stack .feature-card:hover,
    .content-card:hover,
    .step-card:hover,
    .contact-side:hover,
    .contact-form:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(17,24,39,.09);
      border-color: #cfd9e5;
    }
    .feature-highlight figure{
      margin: 0;
      aspect-ratio: 16 / 8.5;
      overflow: hidden;
      background: #dfe6ee;
    }
    .feature-highlight img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feature-body{
      padding: 20px 22px 22px;
    }
    .feature-body h3{
      margin: 10px 0 10px;
      font-size: 22px;
      line-height: 1.3;
      color: var(--text);
    }
    .feature-body p{
      margin: 0;
      color: var(--text-soft);
      font-size: 15px;
      line-height: 1.82;
    }
    .feature-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
    }
    .badge{
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #eef3f8;
      border: 1px solid #dbe3ed;
      color: #425063;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
    }
    .badge.gold{
      background: rgba(216,165,74,.14);
      border-color: rgba(216,165,74,.18);
      color: #8a661d;
    }
    .badge.green{
      background: rgba(57,182,163,.12);
      border-color: rgba(57,182,163,.18);
      color: #0f776b;
    }
    .badge.dark{
      background: #1b2330;
      border-color: #1b2330;
      color: #fff;
    }

    .feature-stack{
      display: grid;
      gap: 18px;
    }
    .feature-card{
      padding: 20px;
      display: grid;
      gap: 14px;
    }
    .feature-card .icon{
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(216,165,74,.15), rgba(57,182,163,.14));
      border: 1px solid rgba(216,224,234,.9);
      color: #1e2b3d;
      font-weight: 800;
      letter-spacing: .3px;
    }
    .feature-card h3{
      margin: 0;
      font-size: 18px;
      line-height: 1.35;
    }
    .feature-card p{
      margin: 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.8;
    }
    .check-list{
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .check-list li{
      position: relative;
      padding-left: 20px;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.7;
    }
    .check-list li::before{
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
    }

    .content-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .content-card{
      background: #fff;
      border: 1px solid #dce3ed;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(17,24,39,.06);
      display: flex;
      flex-direction: column;
      min-height: 100%;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .content-card.featured{
      grid-column: span 2;
    }
    .content-card figure{
      margin: 0;
      aspect-ratio: 16 / 9;
      background: #dfe6ee;
      overflow: hidden;
    }
    .content-card img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .28s ease;
    }
    .content-card:hover img{
      transform: scale(1.03);
    }
    .content-card .card-body{
      display: grid;
      gap: 12px;
      padding: 18px;
      flex: 1 1 auto;
    }
    .card-meta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--text-soft);
      font-size: 12px;
    }
    .content-card h3{
      margin: 0;
      font-size: 19px;
      line-height: 1.35;
    }
    .content-card p{
      margin: 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.8;
    }
    .card-foot{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 2px;
    }
    .link-btn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #135e56;
      font-size: 13px;
      font-weight: 700;
    }
    .link-btn::after{
      content: "→";
      transition: transform var(--transition);
    }
    .content-card:hover .link-btn::after,
    .step-card:hover .link-btn::after,
    .footer-links a:hover::after{
      transform: translateX(2px);
    }

    .steps-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .step-card{
      background: #fff;
      border: 1px solid #dce3ed;
      border-radius: 22px;
      padding: 22px;
      box-shadow: 0 10px 26px rgba(17,24,39,.05);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .step-index{
      width: 50px;
      height: 50px;
      border-radius: 18px;
      background: linear-gradient(135deg, #1a2230, #313c4b);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: .2px;
      box-shadow: 0 12px 24px rgba(17,24,39,.14);
      margin-bottom: 14px;
    }
    .step-card h3{
      margin: 0 0 10px;
      font-size: 18px;
      line-height: 1.35;
    }
    .step-card p{
      margin: 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.82;
    }
    .step-note{
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #e5ebf2;
      color: #4e5c6d;
      font-size: 13px;
      line-height: 1.75;
    }

    .faq-list{
      display: grid;
      gap: 12px;
    }
    .faq-list details{
      background: #fff;
      border: 1px solid #dce3ed;
      border-radius: 18px;
      box-shadow: 0 8px 22px rgba(17,24,39,.05);
      overflow: hidden;
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .faq-list details[open]{
      border-color: #cdd8e5;
      box-shadow: 0 14px 30px rgba(17,24,39,.08);
    }
    .faq-list summary{
      list-style: none;
      cursor: pointer;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 700;
      color: var(--text);
      font-size: 16px;
      line-height: 1.5;
    }
    .faq-list summary::-webkit-details-marker{
      display: none;
    }
    .faq-list summary::after{
      content: "+";
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      color: #1f2b3b;
      background: #edf2f7;
      border: 1px solid #dde5ee;
      flex: 0 0 auto;
      transition: transform var(--transition), background var(--transition);
    }
    .faq-list details[open] summary::after{
      content: "−";
      background: rgba(57,182,163,.12);
      border-color: rgba(57,182,163,.18);
      color: #0f776b;
    }
    .faq-body{
      padding: 0 20px 18px;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.86;
    }

    .contact-grid{
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
      align-items: start;
    }
    .contact-side{
      background:
        linear-gradient(180deg, rgba(16,22,30,.96), rgba(22,28,38,.96)),
        url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
      color: #fff;
      border-radius: 24px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 40px rgba(17,24,39,.12);
      min-height: 100%;
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
      position: relative;
      overflow: hidden;
    }
    .contact-side::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top right, rgba(216,165,74,.18), transparent 25%),
        radial-gradient(circle at bottom left, rgba(57,182,163,.16), transparent 24%);
      pointer-events: none;
    }
    .contact-side > *{
      position: relative;
      z-index: 1;
    }
    .contact-side h3{
      margin: 0 0 12px;
      font-size: 22px;
      line-height: 1.3;
    }
    .contact-side p{
      margin: 0;
      color: rgba(247,249,252,.78);
      font-size: 14px;
      line-height: 1.88;
    }
    .contact-points{
      display: grid;
      gap: 10px;
      margin: 18px 0 22px;
      padding: 0;
      list-style: none;
    }
    .contact-points li{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(247,249,252,.84);
      font-size: 14px;
      line-height: 1.7;
    }
    .contact-points i{
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--brand-2);
      margin-top: .52em;
      box-shadow: 0 0 0 6px rgba(57,182,163,.12);
      flex: 0 0 auto;
    }
    .contact-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .contact-form{
      background: #fff;
      border: 1px solid #dce3ed;
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 12px 30px rgba(17,24,39,.06);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .form-grid{
      display: grid;
      gap: 14px;
    }
    .field{
      display: grid;
      gap: 8px;
    }
    .field label{
      color: #364353;
      font-size: 13px;
      font-weight: 700;
    }
    .field input,
    .field textarea{
      width: 100%;
      border-radius: 14px;
      border: 1px solid #dbe3ed;
      background: #f8fafc;
      color: var(--text);
      padding: 12px 14px;
      transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    }
    .field input::placeholder,
    .field textarea::placeholder{
      color: #8a95a4;
    }
    .field input:focus,
    .field textarea:focus{
      outline: none;
      border-color: rgba(57,182,163,.55);
      box-shadow: 0 0 0 4px rgba(57,182,163,.12);
      background: #fff;
    }
    .field textarea{
      min-height: 120px;
      resize: vertical;
    }
    .form-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }
    .form-tip{
      margin: 12px 0 0;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.72;
    }

    .site-footer{
      margin-top: 26px;
      background: #10151d;
      color: rgba(247,249,252,.84);
      border-top: 1px solid rgba(255,255,255,.06);
      position: relative;
      z-index: 1;
    }
    .footer-top{
      display: grid;
      grid-template-columns: 1.3fr .8fr .8fr .9fr;
      gap: 22px;
      padding: 36px 0 28px;
    }
    .footer-brand .brand{
      margin-bottom: 14px;
    }
    .footer-brand .brand small{
      color: rgba(247,249,252,.66);
    }
    .footer-brand p{
      margin: 0;
      color: rgba(247,249,252,.68);
      font-size: 14px;
      line-height: 1.9;
      max-width: 360px;
    }
    .footer-title{
      margin: 0 0 14px;
      color: #fff;
      font-size: 15px;
      line-height: 1.3;
    }
    .footer-links{
      display: grid;
      gap: 10px;
    }
    .footer-links a{
      width: fit-content;
      color: rgba(247,249,252,.74);
      font-size: 14px;
      line-height: 1.6;
      position: relative;
    }
    .footer-links a::after{
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: -3px;
      height: 1px;
      background: rgba(216,165,74,.8);
      transition: right var(--transition);
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color: #fff;
    }
    .footer-links a:hover::after,
    .footer-links a:focus-visible::after{
      right: 0;
    }
    .footer-note{
      margin: 0;
      color: rgba(247,249,252,.66);
      font-size: 14px;
      line-height: 1.85;
    }
    .footer-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 0 24px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: rgba(247,249,252,.58);
      font-size: 13px;
      line-height: 1.6;
    }

    .section-spacer{
      height: 10px;
    }

    @media (max-width: 1120px){
      .content-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .content-card.featured{
        grid-column: span 2;
      }
      .footer-top{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 1024px){
      .hero-grid,
      .feature-grid,
      .contact-grid{
        grid-template-columns: 1fr;
      }
      .hero-points,
      .trust-row,
      .steps-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .mini-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .hero-text{
        max-width: 100%;
      }
    }

    @media (max-width: 920px){
      .main-nav{
        display: none;
        width: 100%;
        margin: 0;
        padding: 0 0 4px;
        flex-direction: column;
        align-items: stretch;
      }
      .main-nav a{
        width: 100%;
      }
      .nav-toggle{
        display: inline-flex;
      }
      .header-actions{
        display: none;
      }
      body.nav-open .site-header{
        padding-bottom: 12px;
      }
      body.nav-open .main-nav{
        display: flex;
      }
      .header-inner{
        flex-wrap: wrap;
        padding: 12px 0;
      }
      .container{
        width: min(var(--container), calc(100% - 28px));
      }
      .section-block{
        padding: 22px;
      }
      .hero-grid{
        padding: 28px;
      }
    }

    @media (max-width: 768px){
      main{
        padding-top: 16px;
      }
      .hero-points,
      .trust-row,
      .steps-grid,
      .content-grid,
      .footer-top{
        grid-template-columns: 1fr;
      }
      .content-card.featured{
        grid-column: auto;
      }
      .section-head{
        grid-template-columns: 1fr;
      }
      .mini-grid{
        grid-template-columns: 1fr;
      }
      .hero-title{
        font-size: clamp(30px, 10vw, 42px);
      }
      .hero-grid{
        gap: 20px;
      }
      .hero-shell{
        border-radius: 24px;
      }
      .section-block{
        border-radius: 24px;
      }
      .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 520px){
      .container{
        width: min(var(--container), calc(100% - 22px));
      }
      .header-inner{
        gap: 12px;
      }
      .brand span:last-child{
        font-size: 14px;
      }
      .brand small{
        font-size: 11px;
      }
      .hero-grid,
      .section-block,
      .contact-form,
      .contact-side{
        padding-left: 18px;
        padding-right: 18px;
      }
      .hero-shell{
        border-radius: 22px;
      }
      .hero-actions,
      .contact-actions,
      .form-actions{
        flex-direction: column;
      }
      .btn,
      .contact-actions .btn,
      .form-actions .btn{
        width: 100%;
      }
      .kicker,
      .section-badge,
      .tag,
      .badge{
        width: auto;
      }
      .content-card h3,
      .feature-body h3{
        font-size: 18px;
      }
      .faq-list summary{
        padding: 16px 16px;
        font-size: 15px;
      }
      .faq-body{
        padding: 0 16px 16px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      *,
      *::before,
      *::after{
        animation: none !important;
        transition: none !important;
      }
    }