:root{
      --bg:#f6fbff;
      --bg2:#eef6ff;
      --card:#ffffff;
      --card2:#f8fbff;
      --line:#d9e6f2;
      --text:#16263a;
      --muted:#5f7287;
      --brand:#1d7cff;
      --brand2:#19c2b2;
      --accent:#ffb64d;
      --shadow:0 18px 50px rgba(29,124,255,.10);
      --radius:20px;
      --radius-sm:14px;
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(25,194,178,.13), transparent 28%),
        radial-gradient(circle at top right, rgba(29,124,255,.14), transparent 24%),
        linear-gradient(180deg, #fafdff 0%, var(--bg) 28%, #f4f9fd 100%);
    }
    img{max-width:100%; display:block}
    a{color:var(--brand); text-decoration:none}
    a:hover{text-decoration:none}
    .container{max-width:var(--container); margin:0 auto; padding:0 20px}
    header{position:sticky; top:0; z-index:40; backdrop-filter:blur(16px); background:rgba(246,251,255,.82); border-bottom:1px solid rgba(217,230,242,.7)}
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px}
    .brand{display:flex; align-items:center; gap:14px; min-width:0}
    .brand img{width:46px; height:46px; object-fit:contain; flex:none}
    .brand-text{min-width:0}
    .brand-text strong{display:block; font-size:1.02rem; letter-spacing:.3px}
    .brand-text span{display:block; font-size:.84rem; color:var(--muted); margin-top:2px}
    .nav-toggle{display:none; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:12px; padding:10px 12px}
    nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
    nav a{font-size:.93rem; color:var(--text); padding:10px 12px; border-radius:12px; transition:.2s ease; white-space:nowrap}
    nav a:hover, nav a:focus{background:#eaf3ff; color:var(--brand)}
    .cta-top{display:flex; align-items:center; gap:10px}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:999px; padding:13px 18px; font-weight:700; cursor:pointer; transition:.22s ease; box-shadow:none}
    .btn-primary{background:linear-gradient(135deg, var(--brand), #5ca5ff); color:#fff; box-shadow:0 12px 24px rgba(29,124,255,.2)}
    .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 28px rgba(29,124,255,.25)}
    .btn-secondary{background:#fff; color:var(--text); border:1px solid var(--line)}
    .btn-secondary:hover{transform:translateY(-2px); border-color:#bcd2e8}
    .hero{padding:34px 0 14px}
    .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:stretch}
    .hero-main,.hero-side,.panel,.section-card,.faq-item,.review-card,.article-card,.timeline-item,.pricing-item,.quote-card,.contact-card,.table-card,.topic-card{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(217,230,242,.8);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-main{padding:32px; position:relative; overflow:hidden}
    .hero-main:before,.hero-main:after{content:""; position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(25,194,178,.18), transparent 70%)}
    .hero-main:before{width:220px; height:220px; top:-70px; right:-60px}
    .hero-main:after{width:160px; height:160px; bottom:-60px; left:-50px}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#eaf6ff; color:#1767cf; font-size:.88rem; font-weight:700}
    h1{font-size:clamp(2rem,4vw,3.45rem); line-height:1.08; margin:16px 0 14px}
    .lead{font-size:1.02rem; line-height:1.85; color:var(--muted); max-width:58ch}
    .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 20px}
    .hero-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px}
    .metric{background:rgba(246,251,255,.9); border:1px solid var(--line); border-radius:18px; padding:16px}
    .metric strong{display:block; font-size:1.22rem}
    .metric span{display:block; margin-top:4px; color:var(--muted); font-size:.9rem}
    .hero-side{padding:24px; display:grid; gap:14px}
    .mini-title{font-size:1.05rem; margin:0 0 8px}
    .side-block{padding:16px; border-radius:18px; background:linear-gradient(180deg,#fdfefe,#f4faff); border:1px solid var(--line)}
    .chip-row{display:flex; flex-wrap:wrap; gap:8px}
    .chip{padding:8px 11px; border-radius:999px; background:#eef6ff; color:#275782; font-size:.85rem; border:1px solid #dbe9f7}
    section{padding:18px 0}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:10px 0 16px}
    .section-head h2{margin:0; font-size:1.55rem}
    .section-head p{margin:0; color:var(--muted); max-width:60ch}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .panel,.section-card,.topic-card,.pricing-item,.timeline-item,.quote-card,.review-card,.article-card,.contact-card,.table-card{padding:20px}
    .service-card h3,.topic-card h3,.panel h3,.review-card h3,.article-card h3{margin:0 0 10px; font-size:1.08rem}
    .service-card p,.topic-card p,.panel p,.review-card p,.article-card p,.contact-card p,.quote-card p{margin:0; color:var(--muted); line-height:1.8}
    .tagline{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
    .tagline span{font-size:.82rem; padding:7px 10px; border-radius:999px; background:#f1f7ff; color:#35536d; border:1px solid #dde9f5}
    .workflow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
    .step{padding:18px; border-radius:18px; background:linear-gradient(180deg,#fff,#f6fbff); border:1px solid var(--line); position:relative}
    .step-num{display:inline-flex; width:32px; height:32px; border-radius:10px; align-items:center; justify-content:center; background:linear-gradient(135deg,#1d7cff,#1cc6b4); color:#fff; font-weight:800; margin-bottom:12px}
    .compare-wrap{overflow:auto}
    table{width:100%; border-collapse:collapse; min-width:860px; background:#fff}
    th,td{padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
    th{background:#f3f8fe; color:#23405f}
    .rating{display:flex; align-items:center; gap:8px; margin-top:8px; color:#d38a00; font-weight:700}
    .stars{letter-spacing:2px}
    .faq{display:grid; gap:12px}
    .faq-item{overflow:hidden}
    .faq-q{width:100%; background:none; border:none; color:var(--text); font-size:1rem; text-align:left; padding:18px 18px; display:flex; justify-content:space-between; align-items:center; gap:18px; cursor:pointer}
    .faq-q span{font-weight:700}
    .faq-a{padding:0 18px 18px; color:var(--muted); line-height:1.8; display:none}
    .faq-item.active .faq-a{display:block}
    .faq-item.active .faq-icon{transform:rotate(45deg)}
    .faq-icon{transition:.2s ease; color:var(--brand); font-size:1.3rem; font-weight:800}
    .reviews,.articles,.pricing,.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .review-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px}
    .avatar{width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#eaf6ff,#d8f6f0); display:grid; place-items:center; font-weight:800; color:#255}
    .article-meta,.small-meta{color:var(--muted); font-size:.88rem; margin-top:10px}
    .label{display:inline-flex; align-items:center; padding:7px 10px; border-radius:999px; background:#eef6ff; color:#2561aa; font-size:.82rem; font-weight:700}
    .form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
    .field{display:grid; gap:8px}
    .field label{font-size:.92rem; font-weight:700}
    input,select,textarea{width:100%; border:1px solid var(--line); border-radius:14px; padding:13px 14px; font:inherit; background:#fff; color:var(--text); outline:none}
    textarea{min-height:130px; resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:#94c0ff; box-shadow:0 0 0 4px rgba(29,124,255,.09)}
    .full{grid-column:1 / -1}
    .footer-links{display:flex; flex-wrap:wrap; gap:10px}
    footer{margin-top:18px; background:#eef5fb; border-top:1px solid #d6e4f1; color:#18324b}
    footer a{color:#155aa7}
    .footer-inner{padding:26px 0}
    .footer-top{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start}
    .footer-note{color:#4f657b; line-height:1.8}
    .fixed-tools{position:fixed; right:16px; bottom:16px; z-index:50; display:grid; gap:10px}
    .float-btn{width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); box-shadow:0 12px 24px rgba(19,38,58,.12); color:var(--brand); cursor:pointer}
    .float-btn:hover{transform:translateY(-2px)}
    .backtop{display:none}
    .floating-kf{position:fixed; left:16px; bottom:16px; z-index:50; display:grid; gap:10px}
    .quick-card{width:220px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:14px}
    .quick-card img{border-radius:14px; margin:10px 0}
    .marquee{display:flex; flex-wrap:wrap; gap:10px}
    .scroll-reveal{opacity:0; transform:translateY(14px); transition:.55s ease}
    .scroll-reveal.visible{opacity:1; transform:none}
    .muted{color:var(--muted)}
    .article-list{display:grid; gap:12px}
    .article-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f7fbff)}
    .article-row strong{display:block; margin-bottom:4px}
    .article-row span{color:var(--muted); font-size:.9rem}
    .anchor-list{display:flex; flex-wrap:wrap; gap:8px}
    .anchor-list a{background:#edf6ff; border:1px solid #dbe9f7; padding:8px 10px; border-radius:999px; color:#21486f; font-size:.85rem}
    .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .gallery img{border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow)}
    .service-network{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
    .quote-card{border-left:4px solid var(--brand)}
    .table-note{font-size:.88rem; color:var(--muted); margin-top:10px}
    @media (max-width: 1024px){
      .hero-grid,.footer-top,.service-network,.reviews,.articles,.pricing,.timeline,.gallery,.grid-3,.grid-4,.workflow{grid-template-columns:1fr 1fr}
      .hero-metrics{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 760px){
      .topbar{flex-wrap:wrap; padding:12px 0}
      .nav-toggle{display:inline-flex}
      nav{display:none; width:100%; justify-content:flex-start; padding-bottom:12px}
      nav.open{display:flex}
      .cta-top{width:100%; justify-content:flex-start}
      .hero,.section-card,.panel{padding:0}
      .hero-main,.hero-side,.section-card,.panel,.contact-card,.table-card{padding:20px}
      .hero-grid,.footer-top,.service-network,.reviews,.articles,.pricing,.timeline,.gallery,.grid-3,.grid-4,.workflow,.form-grid{grid-template-columns:1fr}
      .hero-metrics{grid-template-columns:1fr 1fr}
      .section-head{flex-direction:column; align-items:flex-start}
      .floating-kf{left:12px; right:12px; bottom:14px; grid-auto-flow:column; grid-template-columns:1fr}
      .quick-card{width:auto}
      .fixed-tools{right:12px; bottom:76px}
      .article-row{flex-direction:column; align-items:flex-start}
      .full{grid-column:auto}
    }