:root{
      --bg0:#070A12;
      --bg1:#0B1020;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.10);
      --card: rgba(255,255,255,.08);
      --border: rgba(255,255,255,.14);
      --text:#0f172a;
      --text2:#1f2937;
      --muted:#5b6b83;
      --muted2:#6b7280;
      --white:#ffffff;
      --shadow: 0 12px 34px rgba(0,0,0,.12);
      --shadow2: 0 10px 24px rgba(15,23,42,.14);
      --glow1: rgba(34,211,238,.45);
      --glow2: rgba(168,85,247,.45);
      --glow3: rgba(16,185,129,.40);
      --brand:#6D28D9;
      --brand2:#2563EB;
      --brand3:#06B6D4;
      --accent:#22c55e;
      --danger:#ef4444;
      --warm:#f59e0b;
      --radius:16px;
      --radius2:22px;
      --container: 1120px;
    }

    *{ box-sizing: border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      color: var(--text2);
      background:
        radial-gradient(1000px 600px at 20% 0%, rgba(34,211,238,.14), transparent 60%),
        radial-gradient(900px 520px at 80% 10%, rgba(168,85,247,.14), transparent 55%),
        radial-gradient(700px 420px at 40% 90%, rgba(16,185,129,.10), transparent 52%),
        linear-gradient(180deg, #F7F8FC 0%, #FFFFFF 38%, #F7F8FC 100%);
      overflow-x:hidden;
    }

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

    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(247,248,252,.72);
      border-bottom: 1px solid rgba(15,23,42,.08);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      padding: 12px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 210px;
    }
    .ai-page-logo{
      width: 42px;
      height: 42px;
      object-fit: contain;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.25), transparent 55%),
                  radial-gradient(circle at 70% 40%, rgba(168,85,247,.25), transparent 58%),
                  rgba(255,255,255,.5);
      border: 1px solid rgba(15,23,42,.10);
      padding: 6px;
    }
    .brand-title{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brand-title strong{
      font-size: 14px;
      letter-spacing:.2px;
      color:#0f172a;
    }
    .brand-title span{
      font-size: 12px;
      color: #5b6b83;
      margin-top: 3px;
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap: 14px;
      flex-wrap: nowrap;
      overflow: hidden;
      justify-content: flex-end;
    }

    .navlinks a{
      text-decoration:none;
      color:#1f2937;
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 12px;
      transition: background .18s ease, transform .18s ease, color .18s ease;
      white-space: nowrap;
    }
    .navlinks a:hover{
      background: rgba(109,40,217,.08);
      color:#4c1d95;
      transform: translateY(-1px);
    }

    .nav-cta{
      display:flex;
      align-items:center;
      gap: 10px;
      margin-left: 10px;
      flex-shrink: 0;
    }

    .btn{
      appearance:none;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
      color:#0f172a;
      padding: 10px 14px;
      border-radius: 14px;
      font-weight: 650;
      letter-spacing:.2px;
      font-size: 13px;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      cursor:pointer;
    }
    .btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(15,23,42,.12);
      border-color: rgba(109,40,217,.22);
    }
    .btn:active{
      transform: translateY(-1px);
    }
    .btn-primary{
      background: linear-gradient(135deg, rgba(109,40,217,.95) 0%, rgba(37,99,235,.92) 100%);
      color: #fff;
      border-color: rgba(109,40,217,.35);
      box-shadow: 0 16px 44px rgba(109,40,217,.22);
      position: relative;
      overflow:hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      top:-60%;
      left:-40%;
      width: 140%;
      height: 220%;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 45%, transparent 70%);
      transform: rotate(18deg);
      opacity:.0;
      transition: opacity .25s ease;
    }
    .btn-primary:hover::after{ opacity:.85; }
    .btn-outline{
      background: rgba(255,255,255,.7);
    }
    .btn-small{
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 12.5px;
    }

    .mobile-toggle{
      display:none;
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.75);
      border-radius: 14px;
      padding: 10px 12px;
      cursor:pointer;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .mobile-toggle:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.12); }
    .hamburger{
      width: 18px;
      height: 14px;
      position: relative;
    }
    .hamburger span{
      position:absolute;
      left:0; right:0;
      height:2px;
      background: #111827;
      border-radius: 2px;
      transition: transform .2s ease, top .2s ease, opacity .2s ease;
    }
    .hamburger span:nth-child(1){ top:1px; }
    .hamburger span:nth-child(2){ top:6px; }
    .hamburger span:nth-child(3){ top:11px; }
    .mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(1){ top:6px; transform: rotate(45deg); }
    .mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; }
    .mobile-toggle[aria-expanded="true"] .hamburger span:nth-child(3){ top:6px; transform: rotate(-45deg); }

    .mobile-panel{
      display:none;
      padding: 12px 0 16px;
    }
    .mobile-panel a{
      display:block;
      text-decoration:none;
      color:#1f2937;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.08);
      margin-top: 10px;
      background: rgba(255,255,255,.65);
    }
    .mobile-panel a:hover{
      border-color: rgba(109,40,217,.22);
      background: rgba(109,40,217,.06);
    }

    .hero{
      padding: 34px 0 10px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
      align-items: stretch;
    }

    .hero-left{
      border-radius: var(--radius2);
      padding: 24px 22px;
      background:
        radial-gradient(800px 380px at 10% 0%, rgba(34,211,238,.18), transparent 60%),
        radial-gradient(700px 320px at 90% 15%, rgba(168,85,247,.16), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.58) 100%);
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: 0 18px 50px rgba(15,23,42,.10);
      overflow:hidden;
      position: relative;
      min-height: 360px;
    }

    .hero-left::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(circle at 15% 20%, rgba(34,211,238,.45), transparent 40%),
        radial-gradient(circle at 75% 10%, rgba(168,85,247,.40), transparent 42%),
        radial-gradient(circle at 50% 90%, rgba(16,185,129,.26), transparent 46%);
      opacity:.22;
      pointer-events:none;
      filter: blur(2px);
    }

    .hero-kicker{
      display:flex;
      align-items:center;
      gap: 10px;
      position: relative;
      z-index: 1;
      flex-wrap: wrap;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
      color:#0f172a;
      font-size: 12.5px;
      font-weight: 650;
      letter-spacing:.2px;
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
    }

    .dot{
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 35%), linear-gradient(135deg, rgba(34,211,238,.95), rgba(168,85,247,.95));
      box-shadow: 0 0 0 4px rgba(109,40,217,.12);
    }

    .hero h1{
      margin: 14px 0 10px;
      font-size: clamp(26px, 3.2vw, 40px);
      letter-spacing: -.6px;
      color:#0f172a;
      position: relative;
      z-index: 1;
    }

    .hero p{
      margin: 0 0 16px;
      max-width: 62ch;
      color:#334155;
      line-height: 1.7;
      font-size: 14.8px;
      position: relative;
      z-index: 1;
    }

    .hero-actions{
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items:center;
      position: relative;
      z-index: 1;
      margin-top: 18px;
    }

    .trust-row{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items:center;
      margin-top: 16px;
      position: relative;
      z-index: 1;
    }

    .mini-stat{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(15,23,42,.08);
    }
    .mini-stat strong{
      display:block;
      font-size: 13.5px;
      color:#0f172a;
      margin-top: 1px;
      letter-spacing:.1px;
    }
    .mini-stat span{
      display:block;
      font-size: 12.5px;
      color:#5b6b83;
      line-height: 1.35;
      margin-top: 4px;
    }
    .icon-badge{
      width: 34px;
      height: 34px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(circle at 30% 20%, rgba(34,211,238,.25), transparent 45%),
        radial-gradient(circle at 70% 30%, rgba(168,85,247,.22), transparent 55%),
        rgba(255,255,255,.7);
      box-shadow: 0 14px 32px rgba(15,23,42,.08);
      flex-shrink: 0;
    }
    .icon-badge svg{ width: 18px; height:18px; color:#4f46e5; }

    .hero-right{
      border-radius: var(--radius2);
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(520px 260px at 70% 0%, rgba(34,211,238,.14), transparent 60%),
        radial-gradient(520px 260px at 20% 30%, rgba(168,85,247,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%);
      box-shadow: 0 18px 50px rgba(15,23,42,.10);
      padding: 18px 16px;
      overflow:hidden;
      position: relative;
      min-height: 360px;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .scan-card{
      padding: 14px 14px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.66);
      border: 1px solid rgba(15,23,42,.08);
      position: relative;
      overflow:hidden;
      flex: 0 0 auto;
      transform: translateY(0);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .scan-card:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(15,23,42,.12);
      border-color: rgba(109,40,217,.18);
    }
    .scan-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    .scan-top strong{
      font-size: 13.5px;
      color:#0f172a;
      letter-spacing:.2px;
    }
    .tag{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.6);
      color:#374151;
      white-space: nowrap;
    }
    .meter{
      margin-top: 12px;
      height: 10px;
      border-radius: 999px;
      background: rgba(15,23,42,.06);
      border: 1px solid rgba(15,23,42,.07);
      overflow:hidden;
    }
    .meter > i{
      display:block;
      height: 100%;
      width: 72%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(34,211,238,.95), rgba(168,85,247,.95));
      box-shadow: 0 10px 20px rgba(109,40,217,.18);
      animation: fillPulse 2.2s ease-in-out infinite;
    }
    @keyframes fillPulse{
      0%{ transform: translateX(-6%); filter:saturate(1.05); }
      50%{ transform: translateX(0%); filter:saturate(1.25); }
      100%{ transform: translateX(-6%); filter:saturate(1.05); }
    }

    .scan-list{
      margin: 12px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 10px;
    }
    .scan-list li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      color:#334155;
      font-size: 13px;
      line-height: 1.5;
    }
    .check{
      width: 18px;
      height: 18px;
      border-radius: 7px;
      display:grid;
      place-items:center;
      background: rgba(34,211,238,.12);
      border: 1px solid rgba(34,211,238,.25);
      flex-shrink:0;
    }
    .check svg{ width: 12px; height: 12px; color:#0ea5e9; }

    .section{
      padding: 34px 0;
    }

    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .section-head h2{
      margin:0;
      font-size: 22px;
      letter-spacing: -.4px;
      color:#0f172a;
    }
    .section-head p{
      margin:0;
      color:#5b6b83;
      line-height: 1.6;
      font-size: 13.8px;
      max-width: 60ch;
    }

    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .grid-2{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .card{
      border-radius: var(--radius);
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
      box-shadow: 0 16px 44px rgba(15,23,42,.08);
      padding: 16px 15px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      position: relative;
      overflow:hidden;
    }
    .card::after{
      content:"";
      position:absolute;
      inset:auto -20% -30% -20%;
      height: 120px;
      background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.22), transparent 45%),
                  radial-gradient(circle at 70% 10%, rgba(168,85,247,.18), transparent 55%);
      opacity:.45;
      pointer-events:none;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 22px 60px rgba(15,23,42,.12);
      border-color: rgba(109,40,217,.18);
    }

    .card h3{
      margin: 6px 0 8px;
      font-size: 15.5px;
      letter-spacing: -.2px;
      color:#0f172a;
      position: relative;
      z-index: 1;
    }
    .card p{
      margin:0;
      color:#5b6b83;
      line-height: 1.65;
      font-size: 13.6px;
      position: relative;
      z-index: 1;
    }

    .icon-circle{
      width: 42px;
      height: 42px;
      border-radius: 18px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(circle at 30% 20%, rgba(34,211,238,.18), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(168,85,247,.16), transparent 55%),
        rgba(255,255,255,.75);
      box-shadow: 0 18px 44px rgba(15,23,42,.08);
      position: relative;
      z-index: 1;
    }
    .icon-circle svg{ width: 18px; height: 18px; color:#4f46e5; }

    .steps{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .step{
      padding: 16px 14px;
    }
    .step-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }
    .step-num{
      font-weight: 820;
      letter-spacing: .8px;
      color:#4c1d95;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(109,40,217,.20);
      background: rgba(109,40,217,.06);
    }
    .step h3{ margin: 8px 0 8px; }
    .step p{ font-size: 13.4px; }

    .divider{
      height:1px;
      background: rgba(15,23,42,.08);
      margin: 18px 0 0;
    }

    .comparison-wrap{
      border-radius: var(--radius2);
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(700px 260px at 20% 0%, rgba(34,211,238,.12), transparent 60%),
        radial-gradient(700px 260px at 80% 0%, rgba(168,85,247,.12), transparent 60%),
        rgba(255,255,255,.72);
      box-shadow: 0 18px 50px rgba(15,23,42,.10);
      overflow:hidden;
    }

    .compare-header{
      padding: 18px 16px 0;
    }
    .compare-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding: 0 0 14px;
    }
    .compare-grade{
      display:flex;
      align-items:center;
      gap: 12px;
    }
    .grade-badge{
      width: 52px;
      height: 52px;
      border-radius: 20px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(circle at 30% 20%, rgba(34,211,238,.18), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(168,85,247,.18), transparent 55%),
        rgba(255,255,255,.76);
      box-shadow: 0 20px 60px rgba(109,40,217,.18);
    }
    .grade-badge strong{
      font-size: 15px;
      color:#4c1d95;
      letter-spacing:.2px;
    }
    .compare-grade h3{
      margin:0;
      font-size: 16px;
      color:#0f172a;
    }
    .compare-grade p{
      margin: 5px 0 0;
      color:#5b6b83;
      font-size: 13px;
      line-height: 1.5;
    }

    .table-wrap{
      overflow:auto;
      border-top: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.55);
    }

    table{
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 860px;
      font-size: 13.6px;
    }
    th, td{
      padding: 12px 14px;
      border-bottom: 1px solid rgba(15,23,42,.08);
      border-right: 1px solid rgba(15,23,42,.06);
      vertical-align: middle;
      background: rgba(255,255,255,.0);
    }
    th:last-child, td:last-child{ border-right:none; }
    th{
      position: sticky;
      top: 0;
      background: rgba(255,255,255,.85);
      z-index: 2;
      text-align:left;
      color:#0f172a;
      font-weight: 780;
    }
    .td-title{
      color:#0f172a;
      font-weight: 720;
      white-space: nowrap;
    }
    .score{
      font-weight: 820;
      color:#0f172a;
    }
    .good{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(16,185,129,.22);
      background: rgba(16,185,129,.08);
      color:#065f46;
      font-weight: 720;
      white-space: nowrap;
    }
    .good svg{ width: 14px; height:14px; color:#10b981; }
    .mid{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(245,158,11,.25);
      background: rgba(245,158,11,.10);
      color:#92400e;
      font-weight: 720;
      white-space: nowrap;
    }
    .mid svg{ width: 14px; height:14px; color:#f59e0b; }
    .bad{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(239,68,68,.25);
      background: rgba(239,68,68,.08);
      color:#991b1b;
      font-weight: 720;
      white-space: nowrap;
    }
    .bad svg{ width: 14px; height:14px; color:#ef4444; }

    .match-grid{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 14px;
      align-items: start;
    }

    .chip-row{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      position: relative;
      z-index: 1;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.66);
      color:#334155;
      font-weight: 680;
      font-size: 12.7px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      cursor: pointer;
      user-select:none;
    }
    .chip:hover{ transform: translateY(-2px); border-color: rgba(109,40,217,.18); }
    .chip[aria-pressed="true"]{
      border-color: rgba(109,40,217,.28);
      background: rgba(109,40,217,.08);
      color:#4c1d95;
      box-shadow: 0 18px 44px rgba(109,40,217,.12);
    }
    .chip svg{ width: 16px; height:16px; }

    .form{
      padding: 16px 15px;
    }
    .form .form-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    label{
      display:flex;
      flex-direction:column;
      gap: 8px;
      font-size: 13px;
      color:#334155;
      font-weight: 650;
    }
    input, select, textarea{
      width: 100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.82);
      color:#0f172a;
      outline: none;
      transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
      font-size: 13.5px;
    }
    textarea{ min-height: 108px; resize: vertical; }
    input:focus, select:focus, textarea:focus{
      border-color: rgba(109,40,217,.35);
      box-shadow: 0 0 0 4px rgba(109,40,217,.12);
      background: rgba(255,255,255,.95);
    }

    .form-actions{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .hint{
      color:#5b6b83;
      font-size: 12.8px;
      line-height: 1.45;
      max-width: 52ch;
    }
    .toast{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(15,23,42,.12);
      box-shadow: 0 22px 60px rgba(15,23,42,.18);
      border-radius: 18px;
      padding: 12px 14px;
      display:flex;
      align-items:center;
      gap: 12px;
      z-index: 200;
      opacity: 0;
      pointer-events:none;
      transition: opacity .22s ease, transform .22s ease;
      max-width: calc(100% - 24px);
    }
    .toast.show{
      opacity: 1;
      pointer-events:auto;
      transform: translateX(-50%) translateY(-2px);
    }
    .toast i{
      width: 34px; height:34px; border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(16,185,129,.10);
      border: 1px solid rgba(16,185,129,.20);
    }
    .toast i svg{ width: 16px; height:16px; color:#10b981; }
    .toast strong{ font-size: 13.5px; color:#0f172a; }
    .toast span{ font-size: 12.8px; color:#5b6b83; display:block; margin-top: 2px; }

    .faq{
      display:grid;
      gap: 10px;
    }
    details.faq-item{
      border-radius: var(--radius);
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
      box-shadow: 0 16px 44px rgba(15,23,42,.08);
      padding: 0 14px;
      overflow:hidden;
      transition: border-color .2s ease, transform .2s ease;
    }
    details.faq-item[open]{
      border-color: rgba(109,40,217,.18);
      transform: translateY(-2px);
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding: 14px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      user-select:none;
    }
    summary::-webkit-details-marker{ display:none; }
    .faq-q{
      font-weight: 820;
      color:#0f172a;
      font-size: 14px;
      line-height: 1.5;
      padding-right: 10px;
    }
    .faq-icon{
      width: 34px; height:34px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.64);
      display:grid; place-items:center;
      flex-shrink:0;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    details[open] .faq-icon{
      transform: rotate(45deg);
      background: rgba(109,40,217,.08);
      border-color: rgba(109,40,217,.18);
    }
    .faq-icon svg{ width: 14px; height:14px; color:#4f46e5; }

    .faq-a{
      padding: 0 0 14px;
      color:#5b6b83;
      line-height: 1.75;
      font-size: 13.6px;
    }

    .reviews{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .review{
      padding: 16px 15px;
    }
    .review-top{
      display:flex;
      align-items:center;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    .avatar{
      width: 42px; height:42px;
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(circle at 30% 20%, rgba(34,211,238,.22), transparent 45%),
        radial-gradient(circle at 75% 35%, rgba(168,85,247,.20), transparent 55%),
        rgba(255,255,255,.74);
      display:grid;
      place-items:center;
      color:#4c1d95;
      font-weight: 860;
      letter-spacing:.2px;
    }
    .review h3{
      margin:0;
      font-size: 14.2px;
      color:#0f172a;
    }
    .review .role{
      margin-top: 4px;
      color:#5b6b83;
      font-size: 12.8px;
      line-height: 1.35;
      font-weight: 650;
    }
    .stars{
      margin-left:auto;
      display:flex;
      gap: 4px;
      align-items:center;
    }
    .star{
      width: 16px; height:16px;
      color:#f59e0b;
      filter: drop-shadow(0 8px 18px rgba(245,158,11,.18));
    }
    .review p{
      margin-top: 12px;
      position: relative;
      z-index: 1;
      color:#334155;
      line-height: 1.75;
      font-size: 13.6px;
    }

    .case-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .case{
      padding: 15px 15px 16px;
      background: rgba(255,255,255,.72);
    }
    .case-media{
      border-radius: 16px;
      border: 1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, rgba(109,40,217,.06), rgba(34,211,238,.05));
      padding: 12px;
      margin-bottom: 12px;
    }
    .thumb{
      width: 100%;
      border-radius: 14px;
      aspect-ratio: 16/10;
      border: 1px solid rgba(15,23,42,.10);
      background:
        radial-gradient(circle at 20% 20%, rgba(34,211,238,.22), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(168,85,247,.20), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      position:relative;
    }
    .thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
      opacity: .98;
      transform: scale(1.01);
    }
    .case h3{
      margin: 8px 0 8px;
      font-size: 15.2px;
      position: relative;
      z-index: 1;
    }
    .meta{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }
    .meta span{
      font-size: 12.4px;
      color:#5b6b83;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.66);
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 650;
      white-space: nowrap;
    }
    .case p{
      font-size: 13.6px;
    }

    .articles{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items: start;
    }
    .article-list{
      padding: 16px 15px;
    }
    .article-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px dashed rgba(15,23,42,.10);
    }
    .article-item:last-child{ border-bottom:none; }
    .article-title{
      font-weight: 820;
      color:#0f172a;
      font-size: 13.8px;
      line-height: 1.5;
      text-decoration:none;
      transition: color .2s ease;
    }
    .article-title:hover{ color:#4c1d95; }
    .article-sub{
      color:#5b6b83;
      font-size: 12.8px;
      margin-top: 6px;
      line-height: 1.5;
      max-width: 52ch;
    }
    .article-time{
      color:#6b7280;
      font-size: 12.3px;
      white-space: nowrap;
      font-weight: 650;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.66);
      align-self:flex-start;
      margin-top: 2px;
    }

    .network{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .mapish{
      padding: 16px 15px;
      position: relative;
      overflow:hidden;
    }
    .mapish .grid-bg{
      position:absolute;
      inset:-40px -60px -60px -60px;
      background-image:
        linear-gradient(rgba(15,23,42,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.06) 1px, transparent 1px);
      background-size: 42px 42px;
      transform: rotate(-2deg);
      opacity: .6;
      pointer-events:none;
    }
    .mapish .cities{
      position: relative;
      z-index: 1;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .city{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.68);
      color:#334155;
      font-weight: 740;
      font-size: 12.7px;
      display:flex;
      gap: 8px;
      align-items:center;
      transition: transform .2s ease, border-color .2s ease;
    }
    .city:hover{ transform: translateY(-2px); border-color: rgba(109,40,217,.18); }
    .pin{
      width: 10px; height:10px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(168,85,247,.95));
      box-shadow: 0 0 0 4px rgba(109,40,217,.12);
    }
    .network-right{
      padding: 16px 15px;
    }
    .list{
      margin: 12px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 10px;
    }
    .list li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      color:#334155;
      font-size: 13.6px;
      line-height: 1.6;
    }
    .bullet{
      width: 18px; height:18px;
      border-radius: 8px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(34,211,238,.10);
      display:grid; place-items:center;
      flex-shrink:0;
      margin-top: 2px;
    }
    .bullet svg{ width: 12px; height: 12px; color:#0ea5e9; }

    .tagcloud{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      position: relative;
      z-index: 1;
    }
    .cloud-tag{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.66);
      color:#334155;
      font-weight: 720;
      font-size: 12.7px;
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      user-select:none;
    }
    .cloud-tag:hover{
      transform: translateY(-2px);
      border-color: rgba(109,40,217,.18);
      background: rgba(109,40,217,.06);
      color:#4c1d95;
    }

    .footer{
      padding: 20px 0 28px;
      border-top: 1px solid rgba(15,23,42,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75));
    }
    .footer-grid{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .footer-col{
      flex: 1 1 240px;
      min-width: 240px;
    }
    .footer-col h3{
      margin: 0 0 10px;
      color:#0f172a;
      font-size: 14.5px;
      letter-spacing: -.2px;
    }
    .footer-col p{
      margin:0;
      color:#5b6b83;
      line-height: 1.7;
      font-size: 13.2px;
    }
    .footer-links{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .footer-links a{
      text-decoration:none;
      color:#334155;
      font-size: 12.8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.64);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      display:inline-flex;
      align-items:center;
      gap: 8px;
    }
    .footer-links a:hover{
      transform: translateY(-2px);
      border-color: rgba(109,40,217,.18);
      background: rgba(109,40,217,.06);
      color:#4c1d95;
    }
    .copyright{
      margin-top: 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      color:#6b7280;
      font-size: 12.5px;
    }

    .backtop{
      position: fixed;
      right: 16px;
      bottom: 18px;
      z-index: 180;
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.86);
      box-shadow: 0 18px 44px rgba(15,23,42,.12);
      padding: 10px 12px;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap: 10px;
      transition: transform .2s ease, opacity .2s ease;
      opacity: 0;
      pointer-events:none;
    }
    .backtop.show{
      opacity: 1;
      pointer-events:auto;
    }
    .backtop:hover{ transform: translateY(-2px); }
    .backtop span{
      font-weight: 760;
      color:#0f172a;
      font-size: 12.8px;
    }

    .float-kefu{
      position: fixed;
      right: 16px;
      bottom: 82px;
      z-index: 190;
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.86);
      box-shadow: 0 18px 44px rgba(15,23,42,.12);
      overflow:hidden;
      width: 52px;
      height: 52px;
      cursor:pointer;
      display:grid;
      place-items:center;
      transition: transform .2s ease;
    }
    .float-kefu:hover{ transform: translateY(-2px); }
    .float-kefu img{
      width: 22px;
      height: 22px;
      object-fit: contain;
      opacity: .95;
    }
    .kefu-pop{
      position: fixed;
      right: 78px;
      bottom: 74px;
      z-index: 195;
      width: 220px;
      border-radius: 18px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.92);
      box-shadow: 0 22px 60px rgba(15,23,42,.18);
      padding: 12px;
      display:none;
    }
    .kefu-pop.show{ display:block; }
    .kefu-pop .title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .kefu-pop .title strong{
      font-size: 13.2px;
      color:#0f172a;
      letter-spacing: -.1px;
    }
    .kefu-close{
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.8);
      border-radius: 12px;
      width: 30px;
      height: 30px;
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .kefu-close svg{ width: 14px; height:14px; color:#0f172a; }
    .kefu-pop img{
      width: 100%;
      height: auto;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.10);
      display:block;
    }
    .kefu-pop .sub{
      margin-top: 10px;
      color:#5b6b83;
      font-size: 12.8px;
      line-height: 1.5;
    }

    .reveal{
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .reveal.show{
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .hero-right{ min-height: auto; }
      .reviews{ grid-template-columns: repeat(2, 1fr); }
      .case-grid{ grid-template-columns: repeat(2, 1fr); }
      .steps{ grid-template-columns: repeat(2, 1fr); }
      .match-grid{ grid-template-columns: 1fr; }
      .articles{ grid-template-columns: 1fr; }
      .network{ grid-template-columns: 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .grid-2{ grid-template-columns: 1fr; }
      .grid-4{ grid-template-columns: 1fr 1fr; }
      .navlinks{ display:none; }
      .nav-cta{ display:none; }
      .mobile-toggle{ display:inline-flex; align-items:center; gap: 10px; }
      .mobile-panel{ display:block; }
    }
    @media (max-width: 520px){
      .hero-left{ padding: 20px 16px; min-height: auto; }
      .hero-right{ padding: 14px 12px; }
      .container{ width: min(var(--container), calc(100% - 24px)); }
      .reviews{ grid-template-columns: 1fr; }
      .case-grid{ grid-template-columns: 1fr; }
      .steps{ grid-template-columns: 1fr; }
      .form .form-row{ grid-template-columns: 1fr; }
      table{ min-width: 740px; }
      .kefu-pop{ right: 64px; width: 200px; }
    }