/* roulang page: index */
:root{
      --bg:#edf1f6;
      --bg-soft:#f7f9fc;
      --bg-deep:#0c1220;
      --surface:rgba(255,255,255,.76);
      --surface-strong:#ffffff;
      --surface-dark:rgba(8,14,26,.72);
      --text:#10182b;
      --muted:#667085;
      --muted-2:#8a94a6;
      --line:rgba(95,110,140,.16);
      --line-strong:rgba(72,85,108,.28);
      --brand:#0ed9b8;
      --brand-2:#73f55b;
      --brand-3:#12b3ff;
      --accent:#f4ff6a;
      --shadow:0 18px 48px rgba(14, 24, 40, .10);
      --shadow-strong:0 24px 60px rgba(14, 24, 40, .16);
      --radius:22px;
      --radius-lg:30px;
      --radius-xl:40px;
      --container:1180px;
      --gap:24px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(18,179,255,.12), transparent 26%),
        radial-gradient(circle at 82% 8%, rgba(14,217,184,.16), transparent 20%),
        radial-gradient(circle at 86% 76%, rgba(115,245,91,.12), transparent 22%),
        linear-gradient(180deg, #f5f8fc 0%, #eef2f7 42%, #edf1f6 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(16,24,43,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,24,43,.025) 1px, transparent 1px);
      background-size:36px 36px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,0) 65%);
      opacity:.65;
      z-index:-1;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(14,217,184,.22); color:#0b1320}

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .site-header{
      position:fixed;
      top:0; left:0; right:0;
      z-index:60;
      padding:14px 0;
      transition:transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
      background:linear-gradient(180deg, rgba(6,12,22,.15), rgba(6,12,22,0));
    }
    .site-header.is-scrolled{
      background:rgba(11,19,32,.90);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 30px rgba(7,13,22,.20);
    }
    .nav-shell{
      display:flex;
      align-items:center;
      gap:18px;
      padding:12px 16px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(12,18,32,.34);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:0 12px 32px rgba(6,10,18,.12);
    }
    .site-header.is-scrolled .nav-shell{
      border-color:rgba(255,255,255,.08);
      background:rgba(12,18,32,.14);
      box-shadow:none;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-weight:800;
      letter-spacing:.03em;
      color:#fff;
    }
    .brand-mark{
      width:38px;
      height:38px;
      border-radius:14px;
      background:
        radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 26%),
        linear-gradient(135deg, #0ed9b8 0%, #12b3ff 48%, #73f55b 100%);
      box-shadow:0 10px 24px rgba(14,217,184,.35);
      position:relative;
      flex:none;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:8px;
      border-radius:11px;
      border:1px solid rgba(255,255,255,.42);
    }
    .brand span{
      font-size:15px;
      line-height:1.1;
      max-width:200px;
    }
    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:#fff;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
    }
    .nav-links a{
      position:relative;
      padding:11px 14px;
      color:rgba(255,255,255,.88);
      border-radius:999px;
      transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
      font-size:14px;
      font-weight:600;
      outline:none;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible,
    .nav-links a.active{
      background:rgba(255,255,255,.11);
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:7px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
      opacity:0;
      transform:scaleX(.7);
      transition:opacity .25s var(--ease), transform .25s var(--ease);
    }
    .nav-links a:hover::after,
    .nav-links a.active::after{opacity:.8; transform:scaleX(1)}
    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
    }

    .search-chip,
    .btn,
    .chip,
    .nav-mini{
      transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    }
    .search-chip{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:#fff;
      border-radius:999px;
      padding:11px 14px;
      font-weight:600;
      min-width:max-content;
    }
    .search-chip:hover,
    .search-chip:focus-visible{
      transform:translateY(-1px);
      background:rgba(255,255,255,.12);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border-radius:999px;
      border:1px solid transparent;
      padding:12px 18px;
      font-weight:700;
      line-height:1;
      text-align:center;
      white-space:nowrap;
      outline:none;
      box-shadow:none;
    }
    .btn:focus-visible,
    .search-chip:focus-visible,
    .nav-toggle:focus-visible,
    .chip:focus-visible,
    .faq-item summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible{
      box-shadow:0 0 0 4px rgba(14,217,184,.18);
      outline:none;
    }
    .btn-primary{
      color:#072016;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, #d7ff7a 100%);
      box-shadow:0 14px 30px rgba(14,217,184,.22);
    }
    .btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px rgba(14,217,184,.28)}
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.72);
      border-color:rgba(72,85,108,.14);
      box-shadow:var(--shadow);
    }
    .btn-secondary:hover{transform:translateY(-2px); background:#fff}
    .btn-ghost{
      color:var(--text);
      background:transparent;
      border-color:rgba(72,85,108,.16);
    }
    .btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.58)}
    .btn-sm{padding:10px 14px; font-size:14px}

    .hero{
      position:relative;
      min-height:100vh;
      padding:122px 0 42px;
      overflow:hidden;
      background:
        radial-gradient(circle at 14% 18%, rgba(18,179,255,.48), transparent 26%),
        radial-gradient(circle at 88% 20%, rgba(14,217,184,.38), transparent 22%),
        radial-gradient(circle at 72% 78%, rgba(115,245,91,.30), transparent 20%),
        linear-gradient(140deg, #0d1321 0%, #121c2f 45%, #0f1728 100%);
      color:#fff;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
      background-size:44px 44px;
      opacity:.24;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.25) 74%, transparent);
      pointer-events:none;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:auto -10% -10% -10%;
      height:240px;
      background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.07));
      filter:blur(24px);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap:32px;
      align-items:center;
      z-index:1;
    }
    .hero-copy{
      max-width:660px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.16);
      color:rgba(255,255,255,.86);
      font-size:13px;
      font-weight:700;
      letter-spacing:.04em;
    }
    .eyebrow::before{
      content:"";
      width:7px; height:7px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      box-shadow:0 0 0 4px rgba(14,217,184,.16);
    }
    .hero h1{
      margin:18px 0 14px;
      font-size:clamp(42px, 5vw, 70px);
      line-height:1.02;
      letter-spacing:-.03em;
      max-width:8.6em;
      text-wrap:balance;
    }
    .hero-text{
      margin:0;
      max-width:52ch;
      font-size:clamp(16px, 1.35vw, 18px);
      line-height:1.9;
      color:rgba(255,255,255,.82);
    }
    .hero-search{
      margin:26px 0 16px;
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
      max-width:720px;
    }
    .hero-search .field{
      flex:1 1 340px;
      position:relative;
    }
    .hero-search input,
    .mini-form input,
    .price-form input{
      width:100%;
      border:none;
      border-radius:18px;
      padding:16px 18px;
      background:rgba(255,255,255,.92);
      color:var(--text);
      box-shadow:0 12px 30px rgba(3,8,18,.16);
      outline:none;
    }
    .hero-search input::placeholder,
    .mini-form input::placeholder,
    .price-form input::placeholder{
      color:#8b95a8;
    }
    .hero-search button{
      border:none;
      border-radius:18px;
      padding:16px 22px;
      font-weight:800;
      color:#052017;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      box-shadow:0 12px 30px rgba(14,217,184,.22);
      min-width:116px;
    }
    .hero-search button:hover{transform:translateY(-1px)}
    .search-state{
      margin-top:8px;
      color:rgba(255,255,255,.78);
      font-size:13px;
      min-height:18px;
    }
    .quick-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.9);
      font-size:13px;
      font-weight:700;
    }
    .chip:hover,
    .chip:focus-visible{
      transform:translateY(-1px);
      background:rgba(255,255,255,.13);
    }
    .chip-strong{
      background:linear-gradient(135deg, rgba(14,217,184,.22), rgba(115,245,91,.20));
      border-color:rgba(255,255,255,.22);
    }

    .hero-panel{
      position:relative;
      display:grid;
      gap:16px;
    }
    .hero-panel::before,
    .hero-panel::after{
      content:"";
      position:absolute;
      border-radius:999px;
      filter:blur(30px);
      pointer-events:none;
    }
    .hero-panel::before{
      width:220px;
      height:220px;
      right:6%;
      top:-12px;
      background:rgba(14,217,184,.16);
    }
    .hero-panel::after{
      width:180px;
      height:180px;
      left:8%;
      bottom:8%;
      background:rgba(115,245,91,.14);
    }
    .panel-stack{
      position:relative;
      display:grid;
      gap:16px;
      z-index:1;
    }
    .glass-card{
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.46);
      box-shadow:var(--shadow-strong);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .hero-panel .glass-card{
      color:var(--text);
    }
    .panel-card-main{
      padding:22px;
      overflow:hidden;
      position:relative;
    }
    .panel-card-main::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(14,217,184,.12), rgba(18,179,255,.08) 45%, transparent 80%);
      pointer-events:none;
    }
    .panel-card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .panel-card-head strong{
      font-size:16px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      line-height:1;
      border:1px solid var(--line);
      background:rgba(255,255,255,.84);
      color:var(--text);
    }
    .badge-live{
      background:linear-gradient(135deg, rgba(14,217,184,.18), rgba(115,245,91,.16));
      border-color:rgba(14,217,184,.22);
      color:#0b6354;
    }
    .ring-wrap{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 160px 1fr;
      gap:18px;
      align-items:center;
      margin-top:18px;
    }
    .ring-chart{
      width:160px;
      height:160px;
      border-radius:50%;
      background:
        conic-gradient(from 210deg, #0ed9b8 0 78%, rgba(16,24,43,.08) 78% 100%);
      display:grid;
      place-items:center;
      box-shadow:inset 0 0 0 14px rgba(255,255,255,.6);
    }
    .ring-core{
      width:112px;
      height:112px;
      border-radius:50%;
      background:linear-gradient(180deg, #fff, #edf2f7);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      box-shadow:inset 0 0 0 1px rgba(72,85,108,.08);
    }
    .ring-core span{
      font-size:28px;
      font-weight:900;
      letter-spacing:-.04em;
      line-height:1;
    }
    .ring-core small{
      display:block;
      margin-top:6px;
      color:var(--muted);
      font-weight:700;
    }
    .ring-meta p{
      margin:0 0 10px;
      color:#22314b;
      line-height:1.7;
      font-size:14px;
    }
    .panel-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .mini-card{
      padding:16px;
      min-height:124px;
      position:relative;
      overflow:hidden;
    }
    .mini-card::after{
      content:"";
      position:absolute;
      inset:auto -16px -24px auto;
      width:92px;
      height:92px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(14,217,184,.18), rgba(18,179,255,.10));
      filter:blur(8px);
      opacity:.7;
    }
    .mini-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
      position:relative;
      z-index:1;
    }
    .mini-top strong{
      font-size:15px;
    }
    .mini-top span{
      font-size:12px;
      color:var(--muted);
      font-weight:700;
    }
    .mini-value{
      font-size:30px;
      font-weight:900;
      line-height:1;
      letter-spacing:-.04em;
      margin-bottom:8px;
      position:relative;
      z-index:1;
    }
    .mini-note{
      margin:0;
      font-size:13px;
      color:var(--muted);
      line-height:1.6;
      position:relative;
      z-index:1;
    }

    main{position:relative}
    .section{
      padding:84px 0;
      position:relative;
    }
    .section.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.72));
      border-top:1px solid rgba(72,85,108,.08);
      border-bottom:1px solid rgba(72,85,108,.08);
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:26px;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(26px, 3vw, 40px);
      line-height:1.12;
      letter-spacing:-.03em;
    }
    .section-head p{
      margin:0;
      max-width:58ch;
      color:var(--muted);
      line-height:1.8;
      font-size:15px;
    }

    .entry-grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:22px;
      align-items:stretch;
    }
    .entry-feature{
      position:relative;
      overflow:hidden;
      padding:28px;
      background:
        radial-gradient(circle at 20% 16%, rgba(14,217,184,.14), transparent 28%),
        radial-gradient(circle at 86% 14%, rgba(18,179,255,.14), transparent 22%),
        linear-gradient(180deg, #fff, #f5f8fb);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      border:1px solid rgba(72,85,108,.08);
      min-height:290px;
    }
    .entry-feature h3{
      margin:0 0 10px;
      font-size:28px;
      line-height:1.15;
      letter-spacing:-.03em;
    }
    .entry-feature p{
      margin:0;
      max-width:38ch;
      color:var(--muted);
      line-height:1.8;
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:18px 0 24px;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(72,85,108,.10);
      background:rgba(255,255,255,.78);
      color:#334155;
      font-size:13px;
      font-weight:700;
    }
    .meta-pill i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-3) 100%);
      box-shadow:0 0 0 4px rgba(14,217,184,.12);
      display:inline-block;
    }
    .entry-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:auto;
    }
    .entry-feature .btn{padding:13px 18px}
    .entry-grid-side{
      display:grid;
      gap:16px;
    }
    .entry-small{
      padding:22px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.8);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      min-height:84px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      position:relative;
      overflow:hidden;
    }
    .entry-small::before{
      content:"";
      position:absolute;
      left:-18px;
      top:-18px;
      width:84px;
      height:84px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(14,217,184,.16), rgba(115,245,91,.10));
      filter:blur(2px);
    }
    .entry-small strong{
      position:relative;
      z-index:1;
      font-size:16px;
      margin-bottom:8px;
    }
    .entry-small p{
      position:relative;
      z-index:1;
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:14px;
    }
    .entry-chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:2px;
    }
    .entry-chips span{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(14,217,184,.10);
      color:#0b6354;
      font-size:12px;
      font-weight:800;
      border:1px solid rgba(14,217,184,.18);
    }

    .feature-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    .feature-card{
      padding:24px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
      min-height:224px;
      transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
    }
    .feature-card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-strong);
      border-color:rgba(14,217,184,.26);
    }
    .feature-card::after{
      content:"";
      position:absolute;
      right:-22px;
      top:-22px;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(14,217,184,.18), transparent 68%);
      pointer-events:none;
    }
    .card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
    }
    .icon-badge{
      width:48px;
      height:48px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(14,217,184,.14), rgba(18,179,255,.14));
      border:1px solid rgba(14,217,184,.18);
      color:#0b6354;
      font-weight:900;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    }
    .feature-card h3{
      margin:0 0 8px;
      font-size:20px;
      line-height:1.2;
    }
    .feature-card p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
      max-width:34ch;
    }
    .feature-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:relative;
      z-index:1;
    }
    .metric{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:800;
      color:#18304c;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(248,250,252,.92);
      border:1px solid rgba(72,85,108,.10);
    }
    .metric b{
      font-size:15px;
      color:#0b6354;
    }
    .progress{
      height:8px;
      border-radius:999px;
      background:rgba(72,85,108,.10);
      overflow:hidden;
      flex:1;
      min-width:120px;
    }
    .progress > i{
      display:block;
      height:100%;
      border-radius:inherit;
      width:var(--w,60%);
      background:linear-gradient(90deg, var(--brand) 0%, var(--brand-3) 100%);
    }

    .timeline-wrap{
      display:grid;
      grid-template-columns: 1.02fr .98fr;
      gap:20px;
      align-items:start;
    }
    .timeline{
      position:relative;
      padding:20px 0 0 0;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:14px;
      top:36px;
      bottom:12px;
      width:2px;
      background:linear-gradient(180deg, rgba(14,217,184,.65), rgba(18,179,255,.20));
    }
    .milestone{
      position:relative;
      padding:0 0 18px 44px;
    }
    .milestone::before{
      content:"";
      position:absolute;
      left:6px;
      top:7px;
      width:18px;
      height:18px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      box-shadow:0 0 0 6px rgba(14,217,184,.12);
    }
    .milestone-card{
      padding:20px 20px 18px;
      border-radius:24px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .milestone-card .step{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:900;
      color:#0b6354;
      margin-bottom:10px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .milestone-card .step::before{
      content:"";
      width:8px; height:8px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    }
    .milestone-card h3{
      margin:0 0 8px;
      font-size:18px;
    }
    .milestone-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
    }
    .milestone-side{
      display:grid;
      gap:14px;
    }
    .status-board{
      padding:22px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(14,217,184,.12), rgba(18,179,255,.08) 50%, rgba(115,245,91,.10)),
        rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .status-board h3{
      margin:0 0 14px;
      font-size:19px;
    }
    .status-list{
      display:grid;
      gap:12px;
    }
    .status-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:12px 0;
      border-bottom:1px dashed rgba(72,85,108,.12);
    }
    .status-row:last-child{border-bottom:none; padding-bottom:0}
    .status-row strong{
      font-size:15px;
    }
    .status-row span{
      color:var(--muted);
      font-size:13px;
    }
    .status-row b{
      font-size:18px;
      color:#0b6354;
    }
    .mini-bands{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .band-card{
      padding:16px;
      border-radius:22px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .band-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:13px;
    }
    .band-card strong{
      display:block;
      margin-bottom:8px;
      font-size:15px;
    }

    .news-layout{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:20px;
      align-items:start;
    }
    .news-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:12px;
    }
    .news-list li{
      display:block;
    }
    .news-link{
      display:flex;
      align-items:flex-start;
      gap:14px;
      padding:18px 18px 16px;
      border-radius:22px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    }
    .news-link:hover{
      transform:translateY(-3px);
      border-color:rgba(14,217,184,.24);
      box-shadow:var(--shadow-strong);
    }
    .news-date{
      flex:none;
      min-width:64px;
      text-align:center;
      border-radius:16px;
      padding:10px 10px;
      background:linear-gradient(180deg, rgba(14,217,184,.12), rgba(18,179,255,.08));
      color:#0b6354;
      font-weight:900;
      line-height:1.1;
      border:1px solid rgba(14,217,184,.14);
    }
    .news-date small{
      display:block;
      font-size:11px;
      color:#0b6354;
      opacity:.74;
      margin-top:4px;
    }
    .news-body{
      flex:1;
      min-width:0;
    }
    .news-body strong{
      display:block;
      font-size:16px;
      line-height:1.45;
      margin-bottom:8px;
      color:var(--text);
    }
    .news-body p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:14px;
    }
    .side-panel{
      display:grid;
      gap:14px;
    }
    .recommend-card{
      padding:22px;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 88% 8%, rgba(14,217,184,.13), transparent 26%),
        radial-gradient(circle at 8% 80%, rgba(18,179,255,.10), transparent 20%),
        rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .recommend-card h3{
      margin:0 0 10px;
      font-size:18px;
    }
    .recommend-card p{
      margin:0 0 16px;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .recommend-list{
      display:grid;
      gap:10px;
    }
    .recommend-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:11px 12px;
      border-radius:16px;
      background:rgba(255,255,255,.72);
      border:1px solid rgba(72,85,108,.08);
      color:#304055;
      font-size:13px;
      font-weight:700;
    }
    .recommend-item span{
      color:#0b6354;
      font-weight:900;
    }
    .search-note{
      margin-top:12px;
      font-size:13px;
      color:var(--muted);
      line-height:1.7;
    }

    .demo-grid{
      display:grid;
      grid-template-columns: .98fr 1.02fr;
      gap:20px;
      align-items:start;
    }
    .step-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:12px;
    }
    .step-item{
      padding:18px 18px 18px 18px;
      border-radius:22px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      display:flex;
      gap:14px;
      align-items:flex-start;
    }
    .step-index{
      flex:none;
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(14,217,184,.14), rgba(115,245,91,.12));
      color:#0b6354;
      font-weight:900;
      border:1px solid rgba(14,217,184,.16);
    }
    .step-item h3{
      margin:0 0 6px;
      font-size:16px;
    }
    .step-item p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:14px;
    }
    .demo-board{
      padding:24px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(9,15,27,.96), rgba(19,30,48,.94)),
        #0c1220;
      color:#fff;
      box-shadow:var(--shadow-strong);
      position:relative;
      overflow:hidden;
      min-height:420px;
    }
    .demo-board::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size:40px 40px;
      opacity:.22;
      pointer-events:none;
    }
    .demo-board > *{position:relative; z-index:1}
    .demo-board h3{
      margin:0 0 10px;
      font-size:22px;
    }
    .demo-board p{
      margin:0 0 18px;
      color:rgba(255,255,255,.74);
      line-height:1.8;
      font-size:14px;
      max-width:50ch;
    }
    .board-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .board-card{
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      min-height:118px;
    }
    .board-card strong{
      display:block;
      margin-bottom:10px;
      font-size:15px;
    }
    .board-points{
      display:grid;
      gap:8px;
    }
    .board-point{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-size:13px;
      color:rgba(255,255,255,.80);
    }
    .board-bar{
      margin-top:10px;
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      overflow:hidden;
    }
    .board-bar i{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--brand) 0%, var(--brand-3) 100%);
    }
    .board-summary{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .summary-item{
      padding:12px;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      text-align:center;
    }
    .summary-item b{
      display:block;
      font-size:18px;
      margin-bottom:4px;
    }
    .summary-item span{
      color:rgba(255,255,255,.74);
      font-size:12px;
    }

    .evidence-grid{
      display:grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap:18px;
    }
    .evidence-card{
      padding:22px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .evidence-card::after{
      content:"";
      position:absolute;
      right:-16px;
      top:-16px;
      width:100px;
      height:100px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(14,217,184,.16), transparent 70%);
      pointer-events:none;
    }
    .evidence-card .tag{
      display:inline-flex;
      align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(14,217,184,.10);
      color:#0b6354;
      border:1px solid rgba(14,217,184,.16);
      font-size:12px;
      font-weight:800;
      margin-bottom:14px;
    }
    .evidence-card h3{
      margin:0 0 8px;
      font-size:20px;
    }
    .evidence-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .evidence-big{
      grid-column:span 2;
      min-height:240px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .evidence-quote{
      margin-top:16px;
      padding:16px;
      border-radius:20px;
      background:linear-gradient(135deg, rgba(14,217,184,.10), rgba(18,179,255,.06));
      border:1px solid rgba(14,217,184,.14);
      color:#18304c;
      line-height:1.8;
      font-size:14px;
    }
    .score-strip{
      margin-top:18px;
      padding:18px 20px;
      border-radius:24px;
      background:
        linear-gradient(135deg, rgba(14,217,184,.12), rgba(18,179,255,.08) 55%, rgba(115,245,91,.12)),
        rgba(255,255,255,.80);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .score-item{
      text-align:center;
    }
    .score-item b{
      display:block;
      font-size:24px;
      line-height:1;
      margin-bottom:8px;
      letter-spacing:-.04em;
      color:#0b6354;
    }
    .score-item span{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }

    .price-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      align-items:stretch;
    }
    .price-card{
      padding:24px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.82);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:420px;
    }
    .price-card.featured{
      transform:translateY(-8px);
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,255,250,.88));
      border-color:rgba(14,217,184,.24);
      box-shadow:var(--shadow-strong);
    }
    .price-card.featured::before{
      content:"最受欢迎";
      position:absolute;
      right:18px;
      top:18px;
      padding:8px 12px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      color:#052017;
      font-size:12px;
      font-weight:900;
    }
    .price-top{
      margin-bottom:18px;
    }
    .price-top .label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#0b6354;
      font-weight:900;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:10px;
    }
    .price-top h3{
      margin:0 0 10px;
      font-size:22px;
    }
    .price{
      font-size:44px;
      font-weight:900;
      letter-spacing:-.05em;
      line-height:1;
      margin-bottom:8px;
    }
    .price small{
      font-size:14px;
      color:var(--muted);
      font-weight:700;
      margin-left:4px;
    }
    .price-desc{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .price-list{
      list-style:none;
      padding:0;
      margin:18px 0 22px;
      display:grid;
      gap:10px;
    }
    .price-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#324056;
      line-height:1.7;
      font-size:14px;
    }
    .price-list li::before{
      content:"";
      flex:none;
      width:9px;
      height:9px;
      margin-top:6px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      box-shadow:0 0 0 4px rgba(14,217,184,.12);
    }
    .price-card .btn{margin-top:auto}
    .price-form{
      display:flex;
      gap:10px;
      margin-top:16px;
    }
    .price-form input{
      background:rgba(248,250,252,.98);
      border:1px solid rgba(72,85,108,.10);
      box-shadow:none;
    }
    .price-form button{
      border:none;
      border-radius:18px;
      padding:14px 16px;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      color:#052017;
      font-weight:900;
      min-width:92px;
    }

    .assurance-grid{
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:20px;
      align-items:start;
    }
    .assurance-cards{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
    }
    .assurance-card{
      padding:20px;
      border-radius:22px;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
      min-height:170px;
    }
    .assurance-card strong{
      display:block;
      margin:14px 0 8px;
      font-size:17px;
    }
    .assurance-card p{
      margin:0;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .shield{
      width:44px;
      height:44px;
      border-radius:16px;
      background:linear-gradient(135deg, rgba(14,217,184,.14), rgba(18,179,255,.10));
      border:1px solid rgba(14,217,184,.16);
      position:relative;
    }
    .shield::before,
    .shield::after{
      content:"";
      position:absolute;
      inset:11px 14px 11px 14px;
      border-radius:8px 8px 14px 14px;
      border:2px solid #0b6354;
      border-top:0;
      transform:translateY(-1px);
    }
    .shield::after{
      inset:14px 17px 17px 17px;
      border:none;
      background:#0b6354;
      clip-path:polygon(50% 0, 100% 26%, 82% 100%, 18% 100%, 0 26%);
      opacity:.16;
    }
    .device-panel{
      padding:22px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(12,18,32,.96), rgba(19,28,44,.94));
      color:#fff;
      box-shadow:var(--shadow-strong);
      position:relative;
      overflow:hidden;
    }
    .device-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 84% 16%, rgba(14,217,184,.18), transparent 22%),
        radial-gradient(circle at 10% 88%, rgba(18,179,255,.14), transparent 20%);
      pointer-events:none;
    }
    .device-panel > *{position:relative; z-index:1}
    .device-panel h3{
      margin:0 0 10px;
      font-size:21px;
    }
    .device-panel p{
      margin:0 0 18px;
      color:rgba(255,255,255,.76);
      line-height:1.8;
      font-size:14px;
    }
    .device-grid{
      display:grid;
      gap:12px;
    }
    .device-card{
      padding:14px 16px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .device-card strong{
      font-size:14px;
    }
    .device-card span{
      color:rgba(255,255,255,.74);
      font-size:13px;
    }
    .device-card i{
      flex:none;
      width:56px;
      height:36px;
      border-radius:12px;
      background:linear-gradient(135deg, rgba(14,217,184,.24), rgba(18,179,255,.18));
      border:1px solid rgba(255,255,255,.10);
      display:block;
      position:relative;
    }
    .device-card i::before{
      content:"";
      position:absolute;
      inset:8px 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.62);
      opacity:.55;
    }

    .faq-wrap{
      display:grid;
      grid-template-columns:1fr .45fr;
      gap:20px;
      align-items:start;
    }
    .faq-list{
      display:grid;
      gap:12px;
    }
    .faq-item{
      border-radius:22px;
      overflow:hidden;
      background:rgba(255,255,255,.84);
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .faq-item summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      cursor:pointer;
      font-weight:800;
      line-height:1.5;
      font-size:15px;
      position:relative;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      flex:none;
      width:28px;
      height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(14,217,184,.10);
      color:#0b6354;
      font-weight:900;
      transition:transform .25s var(--ease), background .25s var(--ease);
    }
    .faq-item[open] summary::after{
      content:"–";
      background:rgba(14,217,184,.16);
    }
    .faq-answer{
      padding:0 20px 18px;
      color:var(--muted);
      line-height:1.85;
      font-size:14px;
    }
    .faq-side{
      position:sticky;
      top:110px;
    }
    .help-card{
      padding:24px;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 88% 10%, rgba(14,217,184,.16), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(245,248,252,.88));
      border:1px solid rgba(72,85,108,.08);
      box-shadow:var(--shadow);
    }
    .help-card h3{
      margin:0 0 10px;
      font-size:22px;
    }
    .help-card p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.8;
      font-size:14px;
    }
    .help-list{
      display:grid;
      gap:10px;
      margin:0 0 20px;
      padding:0;
      list-style:none;
    }
    .help-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#304055;
      font-size:14px;
      line-height:1.75;
    }
    .help-list li::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      margin-top:8px;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      box-shadow:0 0 0 4px rgba(14,217,184,.12);
      flex:none;
    }

    .cta-band{
      padding:22px 0 82px;
    }
    .cta-wrap{
      padding:26px;
      border-radius:28px;
      background:
        radial-gradient(circle at 14% 18%, rgba(14,217,184,.16), transparent 22%),
        radial-gradient(circle at 84% 16%, rgba(18,179,255,.14), transparent 22%),
        linear-gradient(135deg, #0d1321, #121b2c 58%, #0e1727);
      color:#fff;
      box-shadow:var(--shadow-strong);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .cta-wrap h2{
      margin:0 0 10px;
      font-size:clamp(24px, 2.8vw, 34px);
      line-height:1.14;
    }
    .cta-wrap p{
      margin:0;
      max-width:56ch;
      color:rgba(255,255,255,.78);
      line-height:1.8;
      font-size:14px;
    }
    .cta-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .site-footer{
      padding:30px 0 54px;
      background:linear-gradient(180deg, rgba(8,14,26,1), rgba(11,18,31,1));
      color:rgba(255,255,255,.78);
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr .8fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:grid;
      gap:14px;
    }
    .footer-brand .brand{
      color:#fff;
    }
    .footer-brand p{
      margin:0;
      line-height:1.8;
      color:rgba(255,255,255,.72);
      max-width:42ch;
      font-size:14px;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links h3{
      margin:0 0 8px;
      color:#fff;
      font-size:16px;
    }
    .footer-links a{
      color:rgba(255,255,255,.72);
      font-size:14px;
      line-height:1.7;
      width:max-content;
    }
    .footer-links a:hover{color:#fff}
    .footer-note{
      display:grid;
      gap:10px;
      font-size:13px;
      line-height:1.8;
    }
    .footer-note strong{color:#fff}
    .footer-bottom{
      margin-top:22px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      font-size:13px;
      color:rgba(255,255,255,.62);
    }

    .floating-cta{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:70;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .floating-cta a,
    .floating-cta button{
      min-width:122px;
      padding:12px 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(12,18,32,.86);
      color:#fff;
      box-shadow:0 16px 36px rgba(7,13,22,.24);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      font-weight:800;
      text-align:center;
    }
    .floating-cta .primary{
      color:#052017;
      border:none;
      background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    }
    .floating-cta a:hover,
    .floating-cta button:hover{
      transform:translateY(-2px);
    }

    .mobile-cta-bar{
      display:none;
    }

    .section-anchor{
      position:relative;
      top:-92px;
      visibility:hidden;
    }

    @media (max-width: 1199px){
      .hero-grid,
      .entry-grid,
      .timeline-wrap,
      .news-layout,
      .demo-grid,
      .assurance-grid,
      .faq-wrap{
        grid-template-columns:1fr;
      }
      .assurance-cards,
      .evidence-grid,
      .price-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .evidence-big{grid-column:span 2}
      .faq-side{position:static}
      .hero{
        padding-top:116px;
      }
    }
    @media (max-width: 991px){
      .nav-shell{
        border-radius:22px;
      }
      .nav-toggle{display:inline-flex}
      .nav-links{
        position:fixed;
        left:16px;
        right:16px;
        top:76px;
        margin:0;
        padding:14px;
        border-radius:22px;
        background:rgba(11,19,32,.95);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 20px 50px rgba(7,13,22,.28);
        display:grid;
        gap:8px;
        transform:translateY(-14px);
        opacity:0;
        pointer-events:none;
        transition:opacity .25s var(--ease), transform .25s var(--ease);
      }
      .nav-shell.menu-open .nav-links{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
      }
      .nav-links a{
        width:100%;
        padding:13px 14px;
        background:rgba(255,255,255,.05);
      }
      .nav-actions{
        margin-left:auto;
      }
      .search-chip{display:none}
      .hero h1{max-width:100%}
      .hero-panel{margin-top:8px}
      .feature-grid,
      .evidence-grid,
      .price-grid,
      .assurance-cards{
        grid-template-columns:1fr;
      }
      .evidence-big{grid-column:auto}
      .score-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
    }
    @media (max-width: 767px){
      .container{width:min(var(--container), calc(100% - 22px))}
      .site-header{padding:10px 0}
      .nav-shell{
        padding:10px 12px;
        gap:12px;
      }
      .brand span{font-size:14px}
      .brand-mark{width:34px; height:34px; border-radius:12px}
      .hero{
        padding:104px 0 30px;
        min-height:auto;
      }
      .hero h1{
        font-size:clamp(34px, 11vw, 48px);
      }
      .hero-text,
      .section-head p,
      .cta-wrap p{
        font-size:14px;
      }
      .hero-search{
        gap:10px;
      }
      .hero-search input,
      .price-form input{
        border-radius:16px;
        padding:14px 16px;
      }
      .hero-search button,
      .price-form button{
        border-radius:16px;
        padding:14px 18px;
      }
      .ring-wrap{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
      }
      .ring-chart{width:150px; height:150px}
      .panel-grid{
        grid-template-columns:1fr 1fr;
      }
      .mini-card{min-height:116px}
      .section{padding:66px 0}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .entry-feature,
      .recommend-card,
      .status-board,
      .demo-board,
      .cta-wrap,
      .help-card,
      .price-card{
        border-radius:24px;
      }
      .entry-feature h3{font-size:24px}
      .score-strip{
        grid-template-columns:1fr 1fr;
      }
      .board-grid{
        grid-template-columns:1fr;
      }
      .board-summary{
        grid-template-columns:1fr;
      }
      .floating-cta{display:none}
      .mobile-cta-bar{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;
        z-index:72;
        padding:10px;
        border-radius:18px;
        background:rgba(11,19,32,.90);
        border:1px solid rgba(255,255,255,.10);
        box-shadow:0 18px 42px rgba(7,13,22,.28);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .mobile-cta-bar a,
      .mobile-cta-bar button{
        border:none;
        border-radius:14px;
        padding:14px 12px;
        font-weight:900;
        color:#052017;
        background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
      }
      .mobile-cta-bar .ghost{
        color:#fff;
        background:rgba(255,255,255,.08);
        border:1px solid rgba(255,255,255,.10);
      }
      body{padding-bottom:92px}
      .cta-band{padding-bottom:108px}
    }
    @media (max-width: 520px){
      .nav-actions{
        gap:8px;
      }
      .btn-sm{
        padding:10px 12px;
      }
      .panel-grid,
      .mini-bands,
      .score-strip{
        grid-template-columns:1fr;
      }
      .entry-feature{
        padding:22px;
      }
      .entry-small,
      .feature-card,
      .milestone-card,
      .news-link,
      .recommend-card,
      .assurance-card{
        padding:18px;
      }
      .news-link{
        flex-direction:column;
      }
      .news-date{
        min-width:auto;
        display:inline-flex;
        gap:6px;
        align-items:center;
        justify-content:center;
        width:max-content;
      }
      .news-date small{display:inline; margin:0}
      .hero-search button{width:100%}
      .cta-wrap,
      .help-card{
        padding:20px;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#eef3f5;
  --bg-soft:#f7fafb;
  --panel:rgba(255,255,255,.74);
  --panel-strong:rgba(255,255,255,.92);
  --line:rgba(15,26,35,.10);
  --line-strong:rgba(15,26,35,.16);
  --text:#0f1c24;
  --muted:#5b6b77;
  --soft:#7a8a96;
  --accent:#10d5be;
  --accent-2:#88f04a;
  --accent-3:#10b981;
  --accent-dark:#0f8f7e;
  --shadow:0 18px 50px rgba(15, 26, 35, .10);
  --shadow-sm:0 10px 26px rgba(15, 26, 35, .08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --container:1200px;
  --gap:24px;
  --header-h:86px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 15%, rgba(16,213,190,.16), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(136,240,74,.14), transparent 22%),
    radial-gradient(circle at 75% 78%, rgba(16,185,129,.10), transparent 24%),
    linear-gradient(180deg,#fdfefe 0%,#eef3f5 48%,#edf2f4 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(16, 28, 36, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 28, 36, .018) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.02) 70%, rgba(0,0,0,0));
  opacity:.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(16,213,190,.22)}
.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:14px 0;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  background:linear-gradient(180deg, rgba(246,250,251,.55), rgba(246,250,251,.26));
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.site-header.is-scrolled{
  background:rgba(248,251,252,.92);
  box-shadow:0 10px 30px rgba(15,26,35,.08);
  border-bottom-color:rgba(15,26,35,.07);
}
.nav-shell{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
  white-space:nowrap;
}
.brand-mark{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 0 0 7px rgba(16,213,190,.14), 0 0 28px rgba(16,213,190,.28);
  flex:0 0 auto;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  flex:1;
}
.nav-links a{
  height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border-radius:999px;
  color:var(--muted);
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
  border:1px solid transparent;
}
.nav-links a:hover{
  background:rgba(16,213,190,.08);
  color:var(--text);
  transform:translateY(-1px);
}
.nav-links a.active{
  background:linear-gradient(135deg, rgba(16,213,190,.18), rgba(136,240,74,.18));
  color:var(--text);
  border-color:rgba(16,213,190,.18);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.search-chip,
.btn{
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  min-height:42px;
  padding:0 16px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
  font-weight:700;
}
.search-chip{
  color:var(--text);
  background:rgba(255,255,255,.76);
  border:1px solid rgba(15,26,35,.10);
  box-shadow:0 8px 24px rgba(15,26,35,.05);
}
.search-chip:hover,
.btn:hover{
  transform:translateY(-1px);
}
.search-chip:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible,
.card-link:focus-visible,
.chip:focus-visible,
.accordion-trigger:focus-visible{
  outline:3px solid rgba(16,213,190,.26);
  outline-offset:2px;
}
.btn-primary{
  color:#07171a;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 16px 34px rgba(16,213,190,.24);
}
.btn-primary:hover{
  box-shadow:0 18px 38px rgba(16,213,190,.3);
}
.btn-outline{
  color:var(--text);
  background:rgba(255,255,255,.66);
  border:1px solid rgba(15,26,35,.10);
}
.btn-sm{min-height:38px;padding:0 14px;font-size:.94rem}
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(15,26,35,.10);
  background:rgba(255,255,255,.82);
  color:var(--text);
  box-shadow:0 10px 24px rgba(15,26,35,.06);
}
main{padding-top:var(--header-h)}
.page-intro{
  position:relative;
  overflow:hidden;
  padding:34px 0 24px;
}
.page-intro::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:100%;
  background:
    radial-gradient(circle at 18% 14%, rgba(16,213,190,.34), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(136,240,74,.22), transparent 18%),
    linear-gradient(135deg, #101b23 0%, #182732 46%, #0f171e 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  transform:translateZ(0);
  z-index:-2;
}
.page-intro::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%),
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.03) 50%, transparent 100%);
  background-size:100% 100%, 120px 120px;
  opacity:.65;
  z-index:-1;
}
.intro-grid{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap:28px;
  align-items:stretch;
}
.crumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:rgba(255,255,255,.70);
  font-size:.95rem;
  margin-bottom:14px;
}
.crumbs a{
  color:rgba(255,255,255,.88);
}
.crumbs span{
  opacity:.55;
}
.intro-copy{
  color:#eef7f6;
  padding:24px 0 18px;
}
.intro-copy h1{
  margin:0;
  font-size:clamp(2.2rem, 4vw, 4.2rem);
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:11ch;
}
.intro-copy p{
  margin:16px 0 0;
  max-width:56ch;
  color:rgba(238,247,246,.78);
  line-height:1.82;
  font-size:1.02rem;
}
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#f5fbfa;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.pill strong{
  color:var(--accent-2);
  font-weight:800;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.hero-note{
  margin-top:14px;
  color:rgba(238,247,246,.66);
  font-size:.95rem;
}
.intro-visual{
  position:relative;
  min-height:480px;
  padding:18px;
}
.visual-frame{
  position:relative;
  height:100%;
  border-radius:34px;
  padding:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(16,213,190,.12), rgba(136,240,74,.08));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 28px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.visual-frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg, transparent 0, rgba(255,255,255,.05) 48%, transparent 100%),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:100% 100%, 24px 24px, 24px 24px;
  opacity:.6;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.2));
}
.frame-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:1;
  color:#e8f7f5;
  font-weight:700;
  margin-bottom:18px;
}
.live-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.live-dot::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 7px rgba(136,240,74,.14);
}
.frame-body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  height:calc(100% - 52px);
}
.ring-shell{
  display:grid;
  place-items:center;
  min-height:190px;
  border-radius:28px;
  background:rgba(9,16,20,.28);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.ring-meter{
  width:160px;height:160px;
  border-radius:50%;
  background:conic-gradient(from 180deg, var(--accent) 0 72%, rgba(255,255,255,.10) 72% 100%);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 12px rgba(16,213,190,.06);
}
.ring-inner{
  width:114px;height:114px;
  border-radius:50%;
  background:rgba(12,20,25,.92);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#ecfaf8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ring-inner strong{
  font-size:2.1rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.ring-inner span{
  margin-top:6px;
  font-size:.88rem;
  color:rgba(236,250,248,.76);
}
.mini-stack{
  display:grid;
  gap:12px;
}
.mini-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#eff8f6;
}
.mini-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, rgba(16,213,190,.95), rgba(136,240,74,.86));
  box-shadow:0 14px 26px rgba(16,213,190,.22);
}
.mini-card h3{
  margin:0;
  font-size:1rem;
}
.mini-card p{
  margin:4px 0 0;
  color:rgba(239,248,246,.72);
  font-size:.92rem;
  line-height:1.55;
}
.float-badge{
  position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  color:#effaf8;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  z-index:2;
}
.filter-bar{
  margin-top:-14px;
  position:relative;
  z-index:4;
}
.filter-shell{
  padding:18px;
  border-radius:30px;
  background:var(--panel-strong);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}
.filter-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:end;
}
.field-label{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  margin:0 0 9px;
}
.search-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.search-form input,
.search-form select,
.search-form .view-btn{
  min-height:48px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.search-form input::placeholder{color:#8797a3}
.search-form input{
  width:100%;
}
.search-form select{
  min-width:150px;
  appearance:none;
}
.control-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.view-switch{
  display:inline-flex;
  padding:4px;
  border-radius:16px;
  background:#eef4f6;
  border:1px solid rgba(15,26,35,.08);
}
.view-btn{
  border:0;
  background:transparent;
  min-width:54px;
  color:var(--muted);
  font-weight:700;
}
.view-btn.active{
  background:#fff;
  color:var(--text);
  box-shadow:0 8px 18px rgba(15,26,35,.07);
}
.chip-row{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.chip{
  border:1px solid rgba(15,26,35,.10);
  background:linear-gradient(180deg,#fff,#f8fbfc);
  color:var(--muted);
  padding:9px 13px;
  border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{transform:translateY(-1px);color:var(--text)}
.chip.active{
  color:#083033;
  background:linear-gradient(135deg, rgba(16,213,190,.20), rgba(136,240,74,.16));
  border-color:rgba(16,213,190,.24);
  box-shadow:0 10px 20px rgba(16,213,190,.10);
}
.section{
  padding:34px 0;
}
.section.alt{
  padding:38px 0;
}
.panel{
  padding:28px;
  border-radius:34px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(14px);
}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-end;
  margin-bottom:18px;
}
.section-head h2{
  margin:0;
  font-size:clamp(1.5rem, 2.3vw, 2.2rem);
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  color:var(--muted);
  max-width:58ch;
  line-height:1.75;
}
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}
.resource-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,251,.94));
  border:1px solid rgba(15,26,35,.08);
  box-shadow:0 12px 26px rgba(15,26,35,.06);
  min-height:320px;
  display:grid;
  grid-template-rows:180px 1fr;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.resource-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(15,26,35,.10);
  border-color:rgba(16,213,190,.22);
}
.resource-card.wide{
  grid-column:1 / -1;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows:auto;
  min-height:300px;
}
.resource-card.wide .card-media{
  min-height:300px;
}
.card-media{
  position:relative;
  overflow:hidden;
  padding:18px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, rgba(16,213,190,.20), rgba(136,240,74,.18), rgba(16,185,129,.22));
}
.card-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 52%),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:100% 100%, 20px 20px, 20px 20px;
  opacity:.55;
}
.card-media::after{
  content:"";
  position:absolute;
  inset:auto -18% -35% auto;
  width:240px;height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  filter:blur(8px);
}
.media-badges{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.media-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#083033;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  font-size:.9rem;
  font-weight:700;
}
.media-badge.light{
  color:#f1fbf8;
  background:rgba(8,19,24,.20);
}
.media-stack{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  gap:10px;
  z-index:1;
}
.media-line{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.26);
  overflow:hidden;
}
.media-line span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,.8), rgba(16,213,190,.86));
}
.media-grid{
  position:absolute;
  inset:18px 18px 18px auto;
  width:44%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  z-index:1;
}
.media-grid span{
  border-radius:18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.media-grid span:nth-child(1){grid-column:1 / -1;min-height:84px}
.media-grid span:nth-child(2),
.media-grid span:nth-child(3),
.media-grid span:nth-child(4),
.media-grid span:nth-child(5){min-height:58px}
.card-body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card-label{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:8px;
  padding:6px 11px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:800;
  color:#0a5449;
  background:rgba(16,213,190,.12);
  border:1px solid rgba(16,213,190,.16);
}
.card-title{
  margin:0;
  font-size:1.22rem;
  line-height:1.35;
  letter-spacing:-.01em;
}
.card-desc{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}
.card-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  background:#f1f6f7;
  color:#56707f;
  border:1px solid rgba(15,26,35,.07);
  font-size:.88rem;
}
.card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}
.card-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(16,213,190,.92), rgba(136,240,74,.88));
  color:#062025;
  font-weight:800;
  box-shadow:0 12px 24px rgba(16,213,190,.18);
}
.card-link.secondary{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(15,26,35,.10);
  color:var(--text);
  box-shadow:none;
}
.card-link:hover{transform:translateY(-1px)}
.card-foot{
  color:#80929d;
  font-size:.92rem;
}
.grid-info{
  display:grid;
  grid-template-columns: 1fr .94fr;
  gap:22px;
  align-items:start;
}
.timeline{
  display:grid;
  gap:16px;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(15,26,35,.08);
  box-shadow:0 10px 22px rgba(15,26,35,.05);
}
.step-num{
  width:38px;height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(16,213,190,.18), rgba(136,240,74,.18));
  border:1px solid rgba(16,213,190,.16);
  color:#0a4f46;
  font-weight:800;
  flex:0 0 auto;
}
.step h3{
  margin:0;
  font-size:1.05rem;
}
.step p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.72;
}
.side-panel{
  padding:22px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(18,28,37,.96), rgba(19,33,43,.92));
  color:#eff8f6;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 48px rgba(15,26,35,.18);
}
.side-panel h3{
  margin:0 0 10px;
  font-size:1.25rem;
}
.side-panel p{
  margin:0;
  color:rgba(239,248,246,.76);
  line-height:1.8;
}
.mini-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.mini-stat{
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
}
.mini-stat strong{
  display:block;
  font-size:1.55rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.mini-stat span{
  display:block;
  margin-top:8px;
  color:rgba(239,248,246,.74);
  font-size:.92rem;
  line-height:1.5;
}
.quote-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.quote-card{
  padding:22px;
  border-radius:26px;
  background:#fff;
  border:1px solid rgba(15,26,35,.08);
  box-shadow:0 12px 24px rgba(15,26,35,.05);
  display:grid;
  gap:12px;
}
.quote-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.quote-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(16,213,190,.10);
  color:#0a4f46;
  border:1px solid rgba(16,213,190,.16);
  font-size:.86rem;
  font-weight:800;
}
.quote-card p{
  margin:0;
  color:var(--muted);
  line-height:1.78;
}
.stat-rail{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}
.stat-box{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#f8fbfc);
  border:1px solid rgba(15,26,35,.08);
  box-shadow:0 8px 18px rgba(15,26,35,.04);
}
.stat-box strong{
  display:block;
  font-size:1.55rem;
  font-variant-numeric:tabular-nums;
}
.stat-box span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  line-height:1.55;
}
.cta-band{
  margin:10px 0 0;
  padding:22px 0 0;
}
.cta-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(16,213,190,.16), rgba(136,240,74,.12)),
    rgba(255,255,255,.84);
  border:1px solid rgba(16,213,190,.16);
  box-shadow:0 14px 30px rgba(16,213,190,.08);
}
.cta-strip strong{
  display:block;
  font-size:1.12rem;
}
.cta-strip span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  line-height:1.6;
}
.cta-strip .btn{
  flex:0 0 auto;
}
.faq-list{
  display:grid;
  gap:14px;
}
.faq-item{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,26,35,.08);
  box-shadow:0 10px 22px rgba(15,26,35,.04);
}
.accordion-trigger{
  width:100%;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:800;
  text-align:left;
}
.accordion-trigger .mark{
  width:30px;height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(16,213,190,.15), rgba(136,240,74,.15));
  color:#0b5147;
  flex:0 0 auto;
  transition:transform .25s ease;
}
.faq-item.open .accordion-trigger .mark{
  transform:rotate(45deg);
}
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.faq-item.open .accordion-panel{
  grid-template-rows:1fr;
}
.accordion-inner{
  overflow:hidden;
  padding:0 20px;
  color:var(--muted);
  line-height:1.8;
}
.faq-item.open .accordion-inner{
  padding:0 20px 18px;
}
.site-footer{
  margin-top:30px;
  padding:32px 0 20px;
  background:linear-gradient(180deg, #101b23 0%, #0b1218 100%);
  color:#eef7f6;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  gap:24px;
}
.footer-brand p,
.footer-note span,
.footer-links a{
  color:rgba(238,247,246,.72);
  line-height:1.75;
}
.footer-links{
  display:grid;
  gap:10px;
  align-content:start;
}
.footer-links h3,
.footer-note strong{
  margin:0 0 8px;
  color:#fff;
}
.footer-links a{
  transition:color .2s ease, transform .2s ease;
}
.footer-links a:hover{
  color:#fff;
  transform:translateX(2px);
}
.footer-note{
  display:grid;
  gap:8px;
  align-content:start;
}
.footer-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:rgba(238,247,246,.62);
  font-size:.94rem;
}
.floating-cta{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:980;
  display:flex;
  gap:10px;
}
.floating-cta .btn{
  min-width:118px;
  box-shadow:0 16px 34px rgba(15,26,35,.16);
}
.mobile-cta{
  display:none;
}
.empty-state{
  display:none;
  margin-top:18px;
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px dashed rgba(15,26,35,.14);
  color:var(--muted);
  text-align:center;
  line-height:1.8;
}
[data-view="list"] .resource-card{
  grid-template-columns:220px 1fr;
  grid-template-rows:auto;
}
[data-view="list"] .card-media{
  min-height:100%;
}
[data-view="list"] .card-body{
  min-height:100%;
}
[data-view="list"] .resource-card.wide{
  grid-column:1 / -1;
}
.hidden{display:none !important}
@media (max-width: 1180px){
  .intro-grid,
  .grid-info,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .intro-copy h1{
    max-width:14ch;
  }
  .intro-visual{
    min-height:420px;
  }
  .stat-rail{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px){
  :root{--header-h:78px}
  .nav-toggle{display:grid;place-items:center}
  .nav-links{
    position:absolute;
    top:calc(100% + 10px);
    left:16px;
    right:16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    background:rgba(249,252,253,.96);
    border:1px solid rgba(15,26,35,.08);
    border-radius:22px;
    box-shadow:0 18px 40px rgba(15,26,35,.12);
    backdrop-filter:blur(16px);
  }
  .site-header.nav-open .nav-links{display:flex}
  .nav-links a{justify-content:center}
  .nav-actions{
    display:none;
  }
  .cards{
    grid-template-columns:1fr;
  }
  .resource-card.wide{
    grid-template-columns:1fr;
  }
  .quote-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 768px){
  .container{
    width:min(var(--container), calc(100% - 22px));
  }
  .page-intro{
    padding-top:18px;
  }
  .intro-grid{
    gap:18px;
  }
  .intro-copy{
    padding-top:12px;
  }
  .intro-copy h1{
    font-size:clamp(2rem, 9vw, 3rem);
    max-width:100%;
  }
  .intro-visual{
    min-height:380px;
    padding:0;
  }
  .visual-frame{
    border-radius:28px;
  }
  .filter-grid{
    grid-template-columns:1fr;
  }
  .search-form{
    grid-template-columns:1fr;
  }
  .search-form select{
    width:100%;
  }
  .control-row{
    justify-content:flex-start;
  }
  .section{
    padding:28px 0;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .panel{
    padding:20px;
    border-radius:28px;
  }
  .cta-strip{
    flex-direction:column;
    align-items:flex-start;
  }
  .stat-rail{
    grid-template-columns:1fr;
  }
  .floating-cta{
    display:none;
  }
  .mobile-cta{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1001;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(247,250,251,.12), rgba(247,250,251,.9));
    backdrop-filter:blur(18px);
    border-top:1px solid rgba(15,26,35,.08);
    box-shadow:0 -10px 24px rgba(15,26,35,.08);
  }
  .mobile-cta .btn{
    min-height:48px;
  }
  .site-footer{
    padding-bottom:98px;
  }
}
@media (max-width: 520px){
  .container{
    width:min(var(--container), calc(100% - 18px));
  }
  .intro-copy p,
  .section-head p,
  .card-desc,
  .step p,
  .footer-brand p,
  .footer-note span{
    font-size:.96rem;
  }
  .pill-row,
  .chip-row{
    gap:8px;
  }
  .pill,
  .chip{
    min-height:36px;
    padding:0 12px;
  }
  .card-media{
    min-height:164px;
  }
  .card-body{
    padding:16px;
  }
  .resource-card,
  .faq-item,
  .quote-card,
  .step,
  .stat-box{
    border-radius:22px;
  }
  .accordion-trigger{
    padding:16px;
    font-size:.98rem;
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}