:root{
      --bg0:#fff7fa;
      --bg1:#fff;
      --text:#1e1f24;
      --muted:#5b5f6a;
      --muted2:#7a7f8b;
      --line:rgba(20, 20, 26, .10);
      --shadow: 0 12px 34px rgba(21, 16, 26, .08);
      --shadow2: 0 8px 22px rgba(21, 16, 26, .10);
      --pink:#e94a75;
      --pink2:#ff6b9a;
      --pink3:#ff3f7f;
      --deep:#17181d;
      --blue:#2b5cff;
      --card:#ffffff;
      --soft: rgba(233, 74, 117, .07);
      --soft2: rgba(43, 92, 255, .06);
      --ring: rgba(233, 74, 117, .22);
      --radius: 18px;
      --radius2: 26px;
      --container: 1100px;
    }
    *{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", "Noto Sans SC", Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(233,74,117,.12), transparent 55%),
        radial-gradient(900px 500px at 95% 0%, rgba(43,92,255,.10), transparent 52%),
        linear-gradient(180deg, var(--bg0), #ffffff 55%, #fff 100%);
    }
    a{color:inherit; text-decoration:none}
    .skip-link{
      position:absolute; left:-999px; top:auto;
      width:1px; height:1px; overflow:hidden;
      background: #000; color:#fff; padding:10px; border-radius:10px;
      z-index:9999;
    }
    .skip-link:focus{left:16px; top:16px; width:auto; height:auto}
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
    .container{
      width: min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .site-header{
      position:sticky; top:0; z-index:60;
      background: rgba(255, 247, 250, .78);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(20, 20, 26, .08);
    }
    .nav-wrap{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap:14px;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width: 260px}
    .brand-link{display:flex; align-items:center; gap:12px}
    .ai-page-logo{
      width:38px; height:auto;
      filter: drop-shadow(0 8px 18px rgba(233,74,117,.18));
    }
    .brand-meta{display:flex; flex-direction:column; line-height:1.1}
    .brand-name{font-weight:860; letter-spacing:.2px}
    .brand-sub{font-size:12px; color:var(--muted2); margin-top:4px}

    .top-nav{display:flex; align-items:center; gap:10px}
    .nav-items{
      display:flex; align-items:center; gap:16px;
      padding:0; margin:0;
    }
    .nav-link{
      font-size:14px; color:var(--muted);
      padding:10px 10px; border-radius:12px;
      transition: background .2s ease, color .2s ease, transform .2s ease;
      white-space:nowrap;
    }
    .nav-link:hover{background: rgba(233,74,117,.08); color:var(--deep); transform: translateY(-1px)}
    .nav-cta{display:flex; align-items:center; gap:10px; justify-content:flex-end}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px solid transparent;
      font-weight: 720;
      letter-spacing:.2px;
      cursor:pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:active{transform: translateY(1px)}
    .btn-lg{padding: 12px 18px; border-radius:16px}
    .btn-block{width:100%}
    .btn-primary{
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink3) 60%, #ff2f6f 100%);
      color:#fff;
      box-shadow: 0 12px 30px rgba(233,74,117,.22);
      border-color: rgba(255,255,255,.18);
    }
    .btn-primary:hover{
      box-shadow: 0 16px 40px rgba(233,74,117,.28);
      transform: translateY(-1px);
    }
    .btn-secondary{
      background: rgba(255, 255, 255, .85);
      color: var(--deep);
      border-color: rgba(233,74,117,.25);
    }
    .btn-secondary:hover{
      background:#fff;
      transform: translateY(-1px);
      box-shadow: 0 10px 26px rgba(233,74,117,.12);
    }
    .btn-ghost{
      background: rgba(255,255,255,.75);
      color: var(--deep);
      border-color: rgba(20, 20, 26, .12);
    }
    .btn-ghost:hover{
      background:#fff;
      transform: translateY(-1px);
      box-shadow: 0 10px 26px rgba(21,16,26,.08);
      border-color: rgba(233,74,117,.25);
    }

    .hero{
      padding: 34px 0 10px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 20px;
      align-items: stretch;
      position: relative;
    }
    .hero-left{
      padding: 26px 0;
    }
    .eyebrow{
      display:flex; align-items:center; gap:10px;
      color: var(--muted);
      font-weight: 650;
      font-size: 13px;
      margin-bottom: 12px;
    }
    .dot{
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(180deg, var(--pink2), var(--pink3));
      box-shadow: 0 10px 22px rgba(233,74,117,.28);
    }
    .hero-title{
      font-size: clamp(26px, 3.3vw, 42px);
      margin: 0 0 12px;
      line-height: 1.12;
      letter-spacing: .2px;
    }
    .hero-desc{
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.7;
      max-width: 58ch;
    }
    .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 16px}
    .hero-badges{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .badge{
      display:flex; gap:10px; align-items:flex-start;
      padding: 12px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(20, 20, 26, .10);
      box-shadow: 0 8px 20px rgba(21,16,26,.05);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      min-height: 72px;
    }
    .badge:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(21,16,26,.08);
      border-color: rgba(233,74,117,.22);
    }
    .badge-icon{font-size:18px; width:26px; text-align:center}
    .badge-title{font-weight: 820; font-size: 13.5px}
    .badge-sub{color: var(--muted2); font-size: 12.5px; margin-top: 4px}

    .hero-right{position:relative; padding: 8px 0 10px}
    .hero-panel{
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 18px;
      position: relative;
      overflow:hidden;
    }
    .hero-panel:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(700px 260px at 20% 0%, rgba(233,74,117,.18), transparent 58%),
        radial-gradient(420px 220px at 92% 10%, rgba(43,92,255,.12), transparent 55%);
      pointer-events:none;
      z-index:0;
    }
    .panel-top{position:relative; z-index:1}
    .panel-kicker{
      display:inline-flex; align-items:center; gap:8px;
      font-weight: 780; font-size: 13px;
      color: var(--deep);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(233,74,117,.10);
      border: 1px solid rgba(233,74,117,.20);
      margin-bottom: 10px;
    }
    .panel-title{font-size:18px; font-weight: 900; letter-spacing:.2px; margin-bottom: 8px}
    .panel-sub{color: var(--muted); font-size: 13.8px; line-height: 1.6}
    .metrics{
      position:relative; z-index:1;
      display:grid; grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 16px;
    }
    .metric-card{
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(20, 20, 26, .08);
      border-radius: 16px;
      padding: 12px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      min-height: 82px;
    }
    .metric-card:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(21,16,26,.10);
      border-color: rgba(233,74,117,.22);
    }
    .metric-value{font-weight: 950; letter-spacing:.2px; margin-bottom: 7px}
    .metric-label{color: var(--muted); font-size: 12.8px; line-height: 1.5}
    .panel-bottom{
      position:relative; z-index:1;
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top: 14px;
    }

    .tech-orbit{position:absolute; right:-6px; top:-12px; width: 260px; height: 260px; pointer-events:none}
    .ring{
      position:absolute; inset:0;
      border-radius:50%;
      border: 1px solid rgba(233,74,117,.20);
      box-shadow: inset 0 0 0 1px rgba(43,92,255,.06);
      opacity:.9;
      transform: rotate(0deg);
      animation: spin 12s linear infinite;
    }
    .r2{inset:24px; border-color: rgba(233,74,117,.16); animation-duration: 16s; opacity:.75}
    .r3{inset:52px; border-color: rgba(43,92,255,.12); animation-duration: 22s; opacity:.7}
    .spark{
      position:absolute;
      width: 10px; height: 10px; border-radius:50%;
      background: linear-gradient(180deg, var(--pink2), var(--pink3));
      box-shadow: 0 14px 30px rgba(233,74,117,.28);
      animation: floaty 4.2s ease-in-out infinite;
    }
    .s1{left:26px; top:80px; animation-delay: .2s}
    .s2{left:168px; top:40px; animation-delay: .9s; background: linear-gradient(180deg, #6a7cff, var(--blue))}
    .s3{left:132px; top:180px; animation-delay: 1.6s}
    @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
    @keyframes floaty{0%,100%{transform: translateY(0)}50%{transform: translateY(-7px)}}

    .section{padding: 56px 0}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom: 18px}
    .section-title{margin:0; font-size: 28px; letter-spacing:.2px}
    .section-desc{margin:0; color: var(--muted); line-height:1.7; max-width: 62ch; font-size: 14.8px}

    .split{display:grid; grid-template-columns: 1.05fr .95fr; gap: 16px}
    .card{
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius);
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      padding: 18px;
    }
    .soft{background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));}
    .mild{background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80));}
    .outlined{background: rgba(255,255,255,.78)}
    .highlighted{border-color: rgba(233,74,117,.25)}
    .card-title{font-weight: 920; font-size: 16px; margin-bottom: 10px}
    .muted{color: var(--muted2); font-size: 13.4px}
    .list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
    .list.tight{gap:10px}
    .check{color: var(--pink3); font-weight: 900; margin-right: 8px}
    .list li{display:flex; gap:10px; align-items:flex-start; color: var(--muted); line-height:1.6; font-size: 14.2px}

    .pill-row{display:flex; flex-wrap:wrap; gap:10px}
    .pill{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(233,74,117,.20);
      background: rgba(233,74,117,.08);
      color: var(--deep);
      font-weight: 780;
      font-size: 13.2px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .pill:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(233,74,117,.12)}
    .divider{height:1px; background: rgba(20, 20, 26, .10); margin: 14px 0}
    .inline-cta{
      display:flex; align-items:center; justify-content:space-between; gap: 14px; flex-wrap:wrap;
    }
    .inline-cta-title{font-weight: 920}
    .inline-cta-sub{color: var(--muted); font-size: 13.8px; margin-top:6px}

    .grid-3{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px}
    .service-card{
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      outline:none;
      position:relative;
      overflow:hidden;
    }
    .service-card:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(520px 140px at 10% 0%, rgba(233,74,117,.12), transparent 55%),
        radial-gradient(520px 160px at 90% 10%, rgba(43,92,255,.10), transparent 58%);
      pointer-events:none;
      z-index:0;
      opacity:.9;
    }
    .service-card > *{position:relative; z-index:1}
    .service-card:hover{transform: translateY(-3px); box-shadow: 0 18px 44px rgba(21,16,26,.10); border-color: rgba(233,74,117,.20)}
    .service-icon{font-size: 22px; width: 40px; height: 40px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
      background: rgba(233,74,117,.10); border: 1px solid rgba(233,74,117,.20); margin-bottom: 12px}
    .service-title{margin:0 0 8px; font-size: 16.8px; letter-spacing:.2px}
    .service-desc{margin:0 0 14px; color: var(--muted); line-height:1.7; font-size: 13.9px}
    .service-tags{display:flex; gap:8px; flex-wrap:wrap}
    .tag{
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(20, 20, 26, .10);
      color: var(--muted);
      font-weight: 760;
      font-size: 12.6px;
    }

    .case-strip{
      margin-top: 18px;
      border-radius: var(--radius2);
      border: 1px solid rgba(20, 20, 26, .10);
      background: linear-gradient(135deg, rgba(233,74,117,.08), rgba(255,255,255,.85));
      padding: 16px;
      box-shadow: 0 12px 34px rgba(21,16,26,.06);
    }
    .case-strip-title{font-weight: 920; margin-bottom: 10px}
    .marquee{overflow:hidden; border-radius: 14px; border: 1px dashed rgba(233,74,117,.25); background: rgba(255,255,255,.55)}
    .marquee-track{display:flex; gap:14px; padding: 12px; width:max-content; animation: marquee 18s linear infinite}
    .marq-item{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(20, 20, 26, .08);
      background: rgba(255,255,255,.75);
      color: var(--deep);
      font-weight: 820;
      font-size: 13px;
      white-space:nowrap;
    }
    @keyframes marquee{from{transform: translateX(0)}to{transform: translateX(-50%)}}
    .strip-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 12px}

    .timeline-wrap{display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items:start}
    .timeline{
      padding: 14px;
      border-radius: var(--radius2);
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(20, 20, 26, .10);
      box-shadow: 0 12px 34px rgba(21,16,26,.06);
    }
    .t-item{display:flex; gap:14px; padding: 14px 6px}
    .t-dot{
      width: 12px; height: 12px; border-radius:50%;
      background: linear-gradient(180deg, var(--pink2), var(--pink3));
      box-shadow: 0 12px 24px rgba(233,74,117,.24);
      margin-top: 8px;
      flex: 0 0 auto;
    }
    .t-body{flex: 1}
    .t-step{font-weight: 950; color: var(--pink3); letter-spacing:.5px}
    .t-title{font-size: 15.8px; font-weight: 920; margin: 6px 0 6px}
    .t-desc{color: var(--muted); line-height:1.7; font-size: 13.9px}
    .t-item + .t-item{border-top: 1px solid rgba(20, 20, 26, .06)}
    .timeline-aside{position:sticky; top:88px}
    .aside-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .grid-2{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
    .plan-card{
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .plan-card:hover{transform: translateY(-3px); box-shadow: 0 18px 44px rgba(21,16,26,.10); border-color: rgba(233,74,117,.20)}
    .plan-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px}
    .plan-badge{
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(233,74,117,.10);
      border: 1px solid rgba(233,74,117,.20);
      font-weight: 900;
      font-size: 12.8px;
      color: var(--deep);
      white-space:nowrap;
    }
    .plan-title{margin:0; font-size: 16.6px; font-weight: 950; letter-spacing:.2px}
    .plan-desc{margin: 0 0 12px; color: var(--muted); line-height: 1.7; font-size: 13.9px}
    .plan-list{display:flex; flex-direction:column; gap:10px}
    .plan-item{display:flex; align-items:center; gap:10px; color: var(--muted); font-size: 14.1px}
    .icon{width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius: 10px; background: rgba(43,92,255,.08); border: 1px solid rgba(43,92,255,.18)}
    .process-note{
      margin-top: 16px;
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      padding: 14px 16px;
      border-radius: var(--radius2);
      border: 1px solid rgba(233,74,117,.18);
      background: linear-gradient(135deg, rgba(233,74,117,.10), rgba(255,255,255,.78));
    }
    .note-badge{
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(233,74,117,.12);
      border: 1px solid rgba(233,74,117,.22);
      font-weight: 900;
      color: var(--deep);
      font-size: 13px;
    }
    .note-text{color: var(--muted); line-height:1.7}

    .cards-2{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
    .step-card{background: rgba(255,255,255,.86)}
    .step-top{display:flex; gap:14px; align-items:flex-start; margin-bottom: 10px}
    .step-no{
      width: 44px; height: 44px; border-radius: 16px;
      background: rgba(233,74,117,.12);
      border: 1px solid rgba(233,74,117,.22);
      color: var(--deep);
      font-weight: 980; display:flex; align-items:center; justify-content:center;
    }
    .step-no.b{background: rgba(43,92,255,.10); border-color: rgba(43,92,255,.18)}
    .step-list{display:flex; flex-direction:column; gap:12px}
    .step-line{display:flex; gap:12px; align-items:flex-start}
    .step-bullet{
      width: 10px; height: 10px; border-radius:50%;
      background: linear-gradient(180deg, var(--pink2), var(--pink3));
      box-shadow: 0 12px 24px rgba(233,74,117,.22);
      margin-top: 5px;
      flex: 0 0 auto;
    }
    .step-text{color: var(--muted); line-height:1.6; font-size: 14.1px}

    .cases-grid{margin-top: 8px}
    .case-card{
      border-radius: var(--radius2);
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.84);
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      display:flex; flex-direction:column;
      min-height: 320px;
    }
    .case-card:hover{transform: translateY(-3px); box-shadow: 0 18px 44px rgba(21,16,26,.10); border-color: rgba(233,74,117,.20)}
    .case-media{padding: 12px}
    .case-img{
      width:100%;
      height:auto;
      border-radius: 16px;
      border: 1px solid rgba(20, 20, 26, .08);
      background: #fff;
      display:block;
      object-fit: contain;
    }
    .case-body{padding: 0 16px 16px}
    .case-kicker{color: var(--muted2); font-weight: 760; font-size: 13px; margin-top: 6px}
    .case-title{margin: 8px 0 8px; font-size: 16.6px; font-weight: 950}
    .case-desc{margin:0 0 14px; color: var(--muted); line-height:1.7; font-size: 13.9px}
    .link-btn{
      display:inline-flex; align-items:center;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(233,74,117,.20);
      background: rgba(233,74,117,.08);
      color: var(--deep);
      font-weight: 900;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .link-btn:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(233,74,117,.12); background: rgba(233,74,117,.12)}

    .rating-row{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px}
    .rating-card{
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
    }
    .rating-title{font-weight: 980; letter-spacing:.2px}
    .rating-score{display:flex; align-items:baseline; gap: 8px; margin: 10px 0 6px}
    .score-num{font-size: 46px; font-weight: 1000; color: var(--pink3); letter-spacing: .5px}
    .score-max{font-size: 16px; color: var(--muted); font-weight: 850}
    .rating-sub{color: var(--muted); line-height:1.7}
    .rating-legend{
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      display:flex; flex-direction:column; gap:10px;
    }
    .legend-item{display:flex; align-items:center; gap:10px; color: var(--muted); font-weight: 800}
    .legend-dot{width:12px; height:12px; border-radius:50%}
    .d1{background: rgba(233,74,117,.9)}
    .d2{background: rgba(43,92,255,.9)}
    .d3{background: rgba(255,107,154,.95)}
    .d4{background: rgba(233,74,117,.55)}
    .d5{background: rgba(43,92,255,.55)}

    .compare-table-wrap{margin-top: 14px}
    .table-caption{font-weight: 950; margin-bottom: 10px}
    .table-scroll{overflow:auto; border-radius: var(--radius2); border: 1px solid rgba(20, 20, 26, .10); background: rgba(255,255,255,.78)}
    .compare-table{
      width: 100%;
      border-collapse: collapse;
      min-width: 880px;
    }
    .compare-table th, .compare-table td{
      padding: 14px 14px;
      border-bottom: 1px solid rgba(20, 20, 26, .08);
      vertical-align: top;
    }
    .compare-table th{
      text-align:left;
      background: rgba(233,74,117,.06);
      color: var(--deep);
      font-weight: 950;
    }
    .compare-table td{color: var(--muted); font-size: 13.8px; line-height:1.6}
    .score-pill{
      display:inline-flex; align-items:center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(20, 20, 26, .12);
      background: rgba(255,255,255,.78);
      color: var(--deep);
      font-weight: 950;
      margin-bottom: 6px;
    }
    .score-pill.strong{
      border-color: rgba(233,74,117,.25);
      background: rgba(233,74,117,.10);
      color: var(--deep);
    }
    .micro{color: var(--muted2); font-weight: 740; font-size: 12.6px}

    .match-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
    .match-card{background: rgba(255,255,255,.82); border: 1px solid rgba(20, 20, 26, .10); border-radius: var(--radius2); padding: 18px; box-shadow: 0 10px 26px rgba(21,16,26,.06)}
    .choice-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px}
    .choice{
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      padding: 14px 12px;
      text-align:left;
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      min-height: 56px;
      display:flex; gap:12px; align-items:center;
      user-select:none;
    }
    .choice:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .choice-ico{
      width: 34px; height: 34px; border-radius: 14px;
      background: rgba(233,74,117,.10);
      border: 1px solid rgba(233,74,117,.20);
      display:flex; align-items:center; justify-content:center;
      font-size: 16px;
      flex: 0 0 auto;
    }
    .choice-text{font-weight: 930}
    .match-tip{margin-top: 14px; padding: 12px; border-radius: 16px; background: rgba(233,74,117,.06); border: 1px solid rgba(233,74,117,.18)}
    .match-tip-title{font-weight: 950; margin-bottom: 6px}
    .match-tip-text{color: var(--muted); line-height:1.6; font-size: 13.6px}
    .match-mini{margin-top: 12px; display:flex; flex-direction:column; gap:10px}
    .mini-row{display:flex; gap:10px; align-items:center; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(20, 20, 26, .08); background: rgba(255,255,255,.72)}
    .mini-badge{font-weight: 950; color: var(--deep)}
    .mini-text{color: var(--muted); font-weight: 820}

    .match-form-wrap{background: rgba(255,255,255,.86)}
    .form-desc{color: var(--muted); margin: 6px 0 12px; line-height:1.7; font-size: 13.8px}
    .form{display:flex; flex-direction:column; gap: 12px}
    .form-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
    .field{display:flex; flex-direction:column; gap:8px}
    .label{font-weight: 900; font-size: 13.4px}
    input, select, textarea{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(20, 20, 26, .12);
      background: rgba(255,255,255,.92);
      color: var(--deep);
      outline:none;
      transition: border-color .2s ease, box-shadow .2s ease;
      font-size: 14px;
    }
    textarea{resize: vertical; min-height: 120px}
    input:focus, select:focus, textarea:focus{
      border-color: rgba(233,74,117,.45);
      box-shadow: 0 0 0 4px rgba(233,74,117,.12);
    }
    .form-privacy{display:flex; gap:10px; align-items:center; color: var(--muted2); font-weight: 780; font-size: 12.8px}
    .lock{filter: saturate(1.1)}
    .form-bottom-links{display:flex; gap:14px; margin-top: 2px; justify-content:space-between; flex-wrap:wrap}
    .text-link{color: rgba(233,74,117,.95); font-weight: 900; font-size: 13.2px}
    .text-link:hover{text-decoration: underline}

    .token-grid{display:grid; grid-template-columns: .95fr 1.05fr; gap: 14px}
    .token-card{
      border-radius: var(--radius2);
      padding: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.84);
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
    }
    .token-card.highlight{
      background:
        radial-gradient(700px 200px at 20% 0%, rgba(233,74,117,.18), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
      border-color: rgba(233,74,117,.18);
    }
    .ordered{margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height:1.8; font-weight: 760}
    .ordered li{margin: 6px 0}
    .token-table-wrap{margin-top: 10px}
    .mini-table{
      border-radius: 16px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      overflow:hidden;
    }
    .mini-thead, .mini-row-1, .mini-row-2, .mini-row-3{
      display:grid; grid-template-columns: 1fr 1fr .85fr;
      gap: 10px;
      padding: 12px 12px;
      align-items:center;
      border-bottom: 1px solid rgba(20, 20, 26, .08);
    }
    .mini-thead{background: rgba(233,74,117,.06); font-weight: 950; color: var(--deep)}
    .mini-row-3{border-bottom:none}
    .cost-pill{
      display:inline-flex; align-items:center; justify-content:flex-start;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(233,74,117,.10);
      border: 1px solid rgba(233,74,117,.22);
      font-weight: 950; color: var(--deep);
    }
    .token-bottom{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .token-cloud{margin-top: 14px; padding: 14px 16px; border-radius: var(--radius2); border: 1px solid rgba(20, 20, 26, .10); background: rgba(255,255,255,.76); box-shadow: 0 10px 26px rgba(21,16,26,.06); display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
    .cloud-title{font-weight: 950}
    .cloud-tags{display:flex; gap:10px; flex-wrap:wrap}
    .cloud-tag{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.80);
      color: var(--muted);
      font-weight: 900;
      font-size: 13px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .cloud-tag:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22); color: var(--deep)}

    .training-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap: 14px}
    .grid-chip{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px}
    .chip{
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(233,74,117,.08);
      border: 1px solid rgba(233,74,117,.18);
      font-weight: 950;
      color: var(--deep);
      font-size: 13.1px;
    }
    .training-desc{color: var(--muted); line-height:1.7}
    .training-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .help-grid{display:grid; grid-template-columns: .95fr 1.05fr; gap: 14px}
    .icon-list{list-style:none; padding:0; margin: 10px 0 0; display:flex; flex-direction:column; gap:10px}
    .icon-list li{display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-weight: 780; line-height:1.6; font-size: 13.8px}
    .bullet{color: var(--pink3); font-weight: 950; margin-top: 2px}
    .help-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .news-list{display:flex; flex-direction:column; gap: 10px; margin-top: 10px}
    .news-item{
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .news-item:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .news-link{font-weight: 950; color: var(--deep)}
    .news-meta{margin-top: 6px; color: var(--muted2); font-weight: 780; font-size: 12.8px}
    .news-more{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .content-row{margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
    .bio-card{
      border-radius: var(--radius2);
      padding: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.84);
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
    }
    .bio-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px}
    .bio-item{
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.75);
    }
    .bio-ico{font-size: 18px; margin-bottom: 8px}
    .bio-title{font-weight: 980; margin-bottom: 6px}
    .bio-desc{color: var(--muted); line-height:1.7; font-size: 13.7px}
    .reviews-card{
      border-radius: var(--radius2);
      padding: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background:
        radial-gradient(700px 240px at 30% 0%, rgba(233,74,117,.14), transparent 55%),
        rgba(255,255,255,.84);
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
    }
    .review-list{display:flex; flex-direction:column; gap: 12px; margin-top: 12px}
    .review{
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.80);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .review:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .review-top{display:flex; gap:12px; align-items:center; margin-bottom: 8px}
    .avatar{
      width: 40px; height: 40px; border-radius: 16px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(233,74,117,.12);
      border: 1px solid rgba(233,74,117,.20);
      font-weight: 980;
    }
    .review-name{font-weight: 980}
    .review-score{color: var(--muted2); font-weight: 820; font-size: 12.8px; margin-top: 4px}
    .review-text{color: var(--muted); line-height:1.7; font-size: 13.8px}

    .faq-wrap{
      background: rgba(255,255,255,.80);
      border: 1px solid rgba(20, 20, 26, .10);
      border-radius: var(--radius2);
      box-shadow: 0 10px 26px rgba(21,16,26,.06);
      padding: 12px;
    }
    .faq{
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .08);
      background: rgba(255,255,255,.78);
      padding: 12px 12px;
      margin: 10px 0;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .faq:hover{border-color: rgba(233,74,117,.22); transform: translateY(-1px)}
    .faq-sum{
      cursor:pointer;
      font-weight: 960;
      color: var(--deep);
      list-style:none;
      outline:none;
      display:flex; align-items:center; justify-content:space-between; gap:14px;
    }
    details.faq > summary::-webkit-details-marker{display:none}
    .faq-sum:after{
      content:"＋";
      color: var(--pink3);
      font-weight: 980;
      transition: transform .2s ease;
    }
    details[open].faq .faq-sum:after{content:"－"; transform: rotate(0deg)}
    .faq-body{
      padding-top: 10px;
      color: var(--muted);
      line-height:1.8;
      font-size: 13.9px;
      animation: fadeIn .24s ease both;
    }
    @keyframes fadeIn{from{opacity:0; transform: translateY(-4px)}to{opacity:1; transform: translateY(0)}}

    .contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
    .contact-card{border-radius: var(--radius2); border: 1px solid rgba(20, 20, 26, .10); background: rgba(255,255,255,.84); box-shadow: 0 10px 26px rgba(21,16,26,.06); padding: 18px}
    .contact-card.highlight{
      background:
        radial-gradient(700px 240px at 20% 0%, rgba(233,74,117,.16), transparent 55%),
        rgba(255,255,255,.84);
      border-color: rgba(233,74,117,.18);
    }
    .contact-items{display:flex; flex-direction:column; gap: 10px; margin-top: 10px}
    .c-item{display:flex; gap:12px; align-items:flex-start; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(20, 20, 26, .08); background: rgba(255,255,255,.78)}
    .c-ico{width: 34px; height: 34px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(233,74,117,.10); border: 1px solid rgba(233,74,117,.18)}
    .c-label{color: var(--muted2); font-weight: 860; font-size: 12.8px}
    .c-value{font-weight: 950; margin-top: 4px}
    .c-link{color: var(--deep); text-decoration: underline; text-decoration-color: rgba(233,74,117,.35); text-underline-offset: 4px}
    .contact-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

    .quick-links{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px}
    .quick-link{
      padding: 12px 12px;
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      font-weight: 950;
      color: var(--deep);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      display:flex; align-items:center; justify-content:center;
    }
    .quick-link:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .contact-qrcode{margin-top: 12px}
    .q-title{font-weight: 980; margin-top: 2px}
    .q-sub{color: var(--muted); margin: 6px 0 12px; line-height:1.7}
    .q-row{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
    .q-img{width: 110px; height:auto; border-radius: 18px; border: 1px solid rgba(20, 20, 26, .10); background:#fff; padding: 6px}
    .q-actions{display:flex; gap:10px; flex-wrap:wrap}

    .join-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
    .join-card{border-radius: var(--radius2); border: 1px solid rgba(20, 20, 26, .10); background: rgba(255,255,255,.84); box-shadow: 0 10px 26px rgba(21,16,26,.06); padding: 18px}
    .join-card.highlight{
      background:
        radial-gradient(760px 260px at 15% 0%, rgba(233,74,117,.16), transparent 55%),
        rgba(255,255,255,.84);
      border-color: rgba(233,74,117,.18);
    }
    .join-copy{color: var(--muted); line-height:1.8; margin-top: 10px; font-size: 13.9px}
    .join-stats{margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
    .stat-box{padding: 14px 12px; border-radius: 18px; border: 1px solid rgba(20, 20, 26, .08); background: rgba(255,255,255,.78)}
    .stat-num{font-weight: 1000; color: var(--deep)}
    .stat-lab{color: var(--muted); margin-top: 6px; line-height:1.6; font-weight: 820; font-size: 13px}
    .join-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}
    .join-bottom{margin-top: 14px}

    .site-footer{
      background: #fff;
      border-top: 1px solid rgba(20, 20, 26, .10);
      padding: 26px 0 28px;
    }
    .footer-inner{display:flex; flex-direction:column; gap: 16px}
    .footer-top{display:grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items:start}
    .footer-brand-title{font-weight: 1000; font-size: 18px}
    .footer-brand-sub{color: var(--muted); line-height:1.7; margin-top: 8px}
    .footer-links-title{font-weight: 980; margin-bottom: 10px}
    .footer-links-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px}
    .footer-links-grid a{
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      color: var(--deep);
      font-weight: 900;
      font-size: 13px;
      text-align:center;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .footer-links-grid a:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .footer-mid{
      display:flex; justify-content:space-between; gap: 14px; flex-wrap:wrap;
      align-items:flex-start;
    }
    .footer-quick{display:flex; gap: 12px; flex-wrap:wrap; align-items:center}
    .footer-quick a{
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.78);
      font-weight: 950;
      color: var(--deep);
      font-size: 13px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .footer-quick a:hover{transform: translateY(-2px); box-shadow: 0 16px 34px rgba(21,16,26,.10); border-color: rgba(233,74,117,.22)}
    .footer-contact{display:flex; flex-direction:column; gap: 10px; align-items:flex-start}
    .footer-contact-item{display:flex; gap:10px; align-items:center}
    .footer-ico{width: 28px; height: 28px; border-radius: 12px; background: rgba(233,74,117,.10); border: 1px solid rgba(233,74,117,.18); display:flex; align-items:center; justify-content:center}
    .footer-link{font-weight: 950; text-decoration: underline; text-decoration-color: rgba(233,74,117,.35); text-underline-offset: 4px}
    .footer-text{color: var(--muted); font-weight: 850}
    .footer-bottom{
      border-top: 1px solid rgba(20, 20, 26, .08);
      padding-top: 14px;
      display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap; align-items:center;
    }
    .copyright{color: var(--muted); font-weight: 850}
    .policy{display:flex; gap: 10px; flex-wrap:wrap}
    .footer-policy-link{color: rgba(233,74,117,.95); font-weight: 950}
    .footer-policy-link:hover{text-decoration: underline}

    .floating{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 80;
      display:flex; flex-direction:column; align-items:flex-end;
      gap: 10px;
    }
    .float-btn{
      display:flex; align-items:center; gap:10px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(233,74,117,.22);
      background: rgba(255,255,255,.82);
      box-shadow: 0 18px 46px rgba(21,16,26,.14);
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .float-btn:hover{transform: translateY(-2px); box-shadow: 0 24px 58px rgba(21,16,26,.18)}
    .float-icon{font-size: 18px}
    .float-text{font-weight: 980}
    .float-badge{
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 980;
      background: rgba(233,74,117,.10);
      border: 1px solid rgba(233,74,117,.20);
      color: var(--deep);
      font-size: 12.6px;
    }
    .float-panel{
      width: min(310px, calc(100vw - 32px));
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.92);
      box-shadow: 0 22px 60px rgba(21,16,26,.16);
      animation: pop .18s ease both;
    }
    @keyframes pop{from{opacity:0; transform: translateY(6px)}to{opacity:1; transform: translateY(0)}}
    .float-panel-title{font-weight: 980; margin-bottom: 10px}
    .float-link{
      display:block;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.82);
      margin-bottom: 10px;
      font-weight: 950;
      color: var(--deep);
      text-align:left;
    }
    .float-link:last-child{margin-bottom:0}
    .float-link.primary{
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink3) 70%, #ff2f6f 100%);
      border-color: rgba(255,255,255,.18);
      color:#fff;
    }
    .float-link:hover{transform: translateY(-1px)}

    .to-top{
      position:fixed; right:16px; bottom: 92px;
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(20, 20, 26, .10);
      background: rgba(255,255,255,.88);
      box-shadow: 0 18px 46px rgba(21,16,26,.12);
      cursor:pointer;
      color: var(--deep);
      display:flex; align-items:center; justify-content:center;
      transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
      opacity:0; pointer-events:none;
    }
    .to-top.show{opacity:1; pointer-events:auto}
    .to-top:hover{transform: translateY(-2px); box-shadow: 0 24px 58px rgba(21,16,26,.16)}

    details, summary{outline:none}

    .nav-toggle{display:none}
    .bar{display:block; width: 20px; height: 2px; background: var(--deep); border-radius: 2px}
    @media (max-width: 980px){
      .hero-grid{grid-template-columns: 1fr; gap: 14px}
      .hero-right{order:2}
      .hero-badges{grid-template-columns: 1fr; }
      .metrics{grid-template-columns: 1fr 1fr}
      .split{grid-template-columns: 1fr}
      .grid-3{grid-template-columns: 1fr}
      .timeline-wrap{grid-template-columns: 1fr}
      .timeline-aside{position:relative; top:auto}
      .grid-2{grid-template-columns: 1fr}
      .cards-2{grid-template-columns: 1fr}
      .rating-row{grid-template-columns: 1fr}
      .match-grid{grid-template-columns: 1fr}
      .token-grid{grid-template-columns: 1fr}
      .training-grid{grid-template-columns: 1fr}
      .help-grid{grid-template-columns: 1fr}
      .content-row{grid-template-columns: 1fr}
      .contact-grid{grid-template-columns: 1fr}
      .join-grid{grid-template-columns: 1fr}
      .footer-top{grid-template-columns: 1fr}
      .footer-links-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
      .footer-quick{justify-content:center}
      .footer-contact{width:100%}
    }
    @media (max-width: 760px){
      .brand{min-width: 0}
      .brand-sub{display:none}
      .nav-items{
        display:none;
      }
      .nav-toggle{
        display:inline-flex; align-items:center; justify-content:center;
        gap: 4px; flex-direction:column;
        width: 44px; height: 44px;
        border-radius: 16px;
        border: 1px solid rgba(20, 20, 26, .10);
        background: rgba(255,255,255,.82);
        cursor:pointer;
      }
      .nav-items{
        position:absolute;
        top: 68px;
        left: 50%;
        transform: translateX(-50%);
        width: min(680px, calc(100vw - 32px));
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(20, 20, 26, .10);
        border-radius: var(--radius2);
        box-shadow: 0 22px 60px rgba(21,16,26,.16);
        padding: 12px;
        flex-direction:column;
        gap: 6px;
      }
      .nav-items.show{display:flex}
      .nav-link{width:100%; text-align:left}
      .nav-cta .btn-ghost{display:none}
      .form-grid{grid-template-columns: 1fr}
      .choice-grid{grid-template-columns: 1fr}
      .quick-links{grid-template-columns: 1fr}
      .tech-orbit{display:none}
      .to-top{bottom: 84px}
    }

    /* Scroll reveal */
    .reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
    .reveal.in{opacity:1; transform: translateY(0)}