:root{
      --bg:#f5f7fb;
      --surface:#ffffff;
      --surface-2:#fff7f0;
      --text:#162233;
      --muted:#5b6b7f;
      --line:#e5ebf3;
      --accent:#ff4d6d;
      --accent-2:#2f80ed;
      --accent-3:#7c3aed;
      --warm:#ffb703;
      --shadow:0 18px 50px rgba(19, 32, 51, .10);
      --radius:20px;
      --radius-sm:14px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255,77,109,.10), transparent 26%),
        radial-gradient(circle at top right, rgba(47,128,237,.10), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f8fafe 100%);
      color:var(--text);
      line-height:1.65;
      overflow-x:hidden;
    }
    img{display:block; max-width:100%}
    a{color:inherit; text-decoration:none}
    .container{width:min(var(--container), calc(100% - 32px)); margin:0 auto}
    .site-header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:blur(14px);
      background:rgba(255,255,255,.82);
      border-bottom:1px solid rgba(229,235,243,.8);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between; gap:18px;
      padding:14px 0;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .ai-page-logo{width:42px; height:42px; object-fit:contain; border-radius:12px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.08)}
    .brand-text{min-width:0}
    .brand-text strong{display:block; font-size:1.02rem}
    .brand-text span{display:block; color:var(--muted); font-size:.86rem}
    .nav-toggle{display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; color:var(--text)}
    .nav-links{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end}
    .nav-links a{font-size:.95rem; color:#253246; padding:8px 0; position:relative}
    .nav-links a::after{
      content:""; position:absolute; left:0; bottom:0; width:0; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
      transition:.25s ease;
    }
    .nav-links a:hover::after{width:100%}
    .hero{
      padding:36px 0 22px;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:20px;
      align-items:stretch;
    }
    .hero-panel{
      background:
        linear-gradient(135deg, rgba(255,77,109,.10), rgba(47,128,237,.08) 40%, rgba(124,58,237,.10)),
        #fff;
      border:1px solid rgba(229,235,243,.9);
      border-radius:28px;
      box-shadow:var(--shadow);
      padding:30px;
      position:relative;
      overflow:hidden;
    }
    .hero-panel::before,.hero-panel::after{
      content:""; position:absolute; border-radius:50%; pointer-events:none;
      background:radial-gradient(circle, rgba(255,183,3,.22), transparent 65%);
    }
    .hero-panel::before{width:260px; height:260px; right:-90px; top:-90px}
    .hero-panel::after{width:180px; height:180px; left:-70px; bottom:-70px; background:radial-gradient(circle, rgba(47,128,237,.14), transparent 65%)}
    .eyebrow{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 12px; border-radius:999px;
      background:rgba(255,77,109,.10); color:#b71d40; font-weight:700; font-size:.85rem;
      border:1px solid rgba(255,77,109,.16);
    }
    h1{margin:.72rem 0 12px; font-size:clamp(2rem, 4vw, 3.5rem); line-height:1.08; letter-spacing:-.03em}
    .hero p{margin:0; color:var(--muted); font-size:1.02rem; max-width:62ch}
    .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 18px; border-radius:14px; font-weight:700; border:1px solid transparent;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(19,32,51,.12)}
    .btn-primary{background:linear-gradient(135deg,var(--accent),#ff7a59); color:#fff}
    .btn-secondary{background:#fff; border-color:var(--line); color:var(--text)}
    .hero-meta{
      display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px
    }
    .meta-card,.mini-card,.info-card,.feature-card,.case-card,.review-card,.article-card,.faq-item,.compare-card,.network-card,.time-card,.price-card,.highlight-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 10px 28px rgba(24,39,75,.06);
    }
    .meta-card{padding:16px}
    .meta-card strong{display:block; font-size:1.35rem}
    .meta-card span{display:block; color:var(--muted); font-size:.9rem}
    .hero-side{display:grid; gap:20px}
    .mini-card{padding:20px; background:linear-gradient(180deg,#fff, #fff7fb)}
    .mini-card h3,.section-title h2{margin:0 0 10px; font-size:1.5rem}
    .mini-card p,.section-desc,.card-note,.review-card p,.article-card p,.faq-item p{margin:0; color:var(--muted)}
    .tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
    .tag{padding:8px 12px; border-radius:999px; background:#f4f8ff; color:#274164; border:1px solid #dbe7ff; font-size:.88rem}
    section{padding:18px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px}
    .section-title h2{font-size:1.7rem}
    .section-title p{margin:6px 0 0; color:var(--muted)}
    .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
    .info-card,.feature-card,.case-card,.review-card,.article-card,.compare-card,.time-card,.network-card,.price-card,.highlight-card{padding:18px}
    .info-card h3,.feature-card h3,.case-card h3,.review-card h3,.article-card h3,.compare-card h3,.network-card h3,.price-card h3,.highlight-card h3{margin:0 0 8px; font-size:1.08rem}
    .icon-badge{
      width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
      background:linear-gradient(135deg, rgba(255,77,109,.15), rgba(47,128,237,.16));
      color:#163a67; margin-bottom:12px; font-weight:800;
    }
    .list{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
    .list li{padding-left:18px; position:relative; color:#314156}
    .list li::before{content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); position:absolute; left:0; top:.63em}
    .split{
      display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start
    }
    .table-wrap{overflow:auto; border-radius:18px; border:1px solid var(--line); background:#fff}
    table{width:100%; border-collapse:collapse; min-width:820px}
    th,td{padding:14px 12px; text-align:left; border-bottom:1px solid #edf1f7; vertical-align:top}
    th{background:#f8fbff; color:#20324b; font-size:.95rem}
    .score{
      display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
      background:rgba(255,183,3,.12); color:#925900; font-weight:700
    }
    .timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .time-card{position:relative}
    .time-card .step{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:12px; background:#ecf3ff; color:#214a7f; font-weight:800; margin-bottom:12px}
    .case-card .case-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
    .pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f1f7ff; color:#2b5d9a; font-size:.85rem}
    .compare-card strong{font-size:1.4rem}
    .faq-list{display:grid; gap:12px}
    .faq-item{overflow:hidden}
    .faq-q{
      width:100%; text-align:left; background:transparent; border:0; padding:16px 18px; font-size:1rem; font-weight:700; color:var(--text);
      display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
    }
    .faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; padding:0 18px}
    .faq-item.active .faq-a{max-height:180px; padding:0 18px 16px}
    .faq-item.active .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:transform .25s ease; color:var(--accent)}
    .form-card{
      padding:22px; background:linear-gradient(180deg,#fff, #fff9f7)
    }
    form{display:grid; gap:12px}
    .form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
    label{display:grid; gap:7px; font-weight:600; color:#223245; font-size:.94rem}
    input,select,textarea{
      width:100%; border:1px solid #dbe3ee; background:#fff; color:var(--text); border-radius:14px;
      padding:12px 14px; font:inherit; outline:none;
    }
    input:focus,select:focus,textarea:focus{border-color:#8cb5ff; box-shadow:0 0 0 4px rgba(47,128,237,.10)}
    textarea{min-height:110px; resize:vertical}
    .submit{border:0; background:linear-gradient(135deg,var(--accent-2),var(--accent-3)); color:#fff}
    .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .review-card small{color:var(--muted)}
    .article-list{display:grid; gap:12px}
    .article-card{display:flex; justify-content:space-between; gap:14px; align-items:center}
    .article-card .meta{display:grid; gap:4px}
    .article-card .go{color:var(--accent-2); font-weight:700}
    .footer{
      margin-top:18px; background:#0f1726; color:#e6eefb; padding:26px 0 18px
    }
    .footer a{color:#cfe1ff}
    .footer-grid{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:18px; align-items:start}
    .footer p,.footer li{color:#c7d4e6}
    .footer .list li::before{background:#ff7a59}
    .footer-bottom{margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); color:#c5d0e2; font-size:.92rem}
    .float-actions{
      position:fixed; right:16px; bottom:16px; display:grid; gap:10px; z-index:60
    }
    .float-actions a,.float-actions button{
      width:50px; height:50px; border-radius:16px; border:1px solid rgba(229,235,243,.9); background:#fff; box-shadow:var(--shadow);
      display:grid; place-items:center; color:#223245; cursor:pointer
    }
    .reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
    .reveal.show{opacity:1; transform:none}
    .top-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
    .home-link{display:inline-flex; align-items:center; padding:8px 12px; border-radius:12px; background:#fff; border:1px solid var(--line)}
    .logo-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
    .muted{color:var(--muted)}
    .image-wrap{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff}
    .image-wrap img{width:100%; height:auto}
    .service-network{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .highlight-card{background:linear-gradient(180deg,#fff, #fff8ee)}
    @media (max-width: 1024px){
      .hero-grid,.grid-4,.grid-3,.reviews-grid,.service-network,.timeline,.price-grid,.footer-grid,.grid-2,.split{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 720px){
      .nav-toggle{display:inline-flex}
      .nav-links{
        display:none; width:100%; padding:12px 0 2px; justify-content:flex-start
      }
      .nav-links.open{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
      .nav{flex-wrap:wrap}
      .hero-grid,.grid-4,.grid-3,.reviews-grid,.service-network,.timeline,.price-grid,.footer-grid,.form-grid,.grid-2,.split{grid-template-columns:1fr}
      .hero-panel{padding:22px}
      .hero-meta{grid-template-columns:1fr}
      .section-head{flex-direction:column; align-items:flex-start}
      .article-card{flex-direction:column; align-items:flex-start}
      .float-actions{right:12px; bottom:12px}
    }