:root{
      --bg:#f4f7f1;
      --panel:#ffffff;
      --panel-2:#f7faf5;
      --line:#d9e5d0;
      --text:#18311f;
      --muted:#5c6f61;
      --brand:#19c37d;
      --brand-2:#11a86a;
      --brand-3:#c9f7df;
      --shadow:0 16px 40px rgba(20,60,35,.10);
      --radius:20px;
      --radius-sm:14px;
      --max: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;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(25,195,125,.10), transparent 26%),
        radial-gradient(circle at top right, rgba(25,195,125,.08), transparent 22%),
        linear-gradient(180deg, #f8fbf6 0%, var(--bg) 38%, #f6f8f4 100%);
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
    header, main, footer{width:100%}
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter:blur(14px);
      background:rgba(248,251,246,.82);
      border-bottom:1px solid rgba(217,229,208,.85);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:12px 0;
    }
    .brand{display:flex; align-items:center; gap:12px; min-width:0}
    .brand .ai-page-logo{width:44px;height:44px;object-fit:contain;border-radius:12px;background:#fff;padding:4px;border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.05)}
    .brand-text{min-width:0}
    .brand-text strong{display:block;font-size:1rem;line-height:1.1}
    .brand-text span{display:block;font-size:.82rem;color:var(--muted);margin-top:3px}
    .nav-links{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end}
    .nav-links a{
      font-size:.92rem; padding:9px 12px; border-radius:999px; color:#244230;
      transition:.22s ease; border:1px solid transparent;
    }
    .nav-links a:hover,.nav-links a:focus{background:#fff;border-color:var(--line); box-shadow:0 8px 18px rgba(25,195,125,.10)}
    .nav-cta{display:flex; gap:10px; align-items:center}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 16px; border-radius:999px; border:1px solid transparent;
      font-weight:700; transition:.22s ease; cursor:pointer;
    }
    .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 14px 28px rgba(25,195,125,.22)}
    .btn-primary:hover{transform:translateY(-2px)}
    .btn-ghost{background:#fff;border-color:var(--line);color:var(--text)}
    .menu-toggle{display:none}
    .hero{
      padding:38px 0 22px;
      position:relative;
      overflow:hidden;
    }
    .hero-grid{
      display:grid; grid-template-columns:1.22fr .78fr; gap:22px; align-items:stretch;
    }
    .hero-main,.hero-side,.card,.panel,.faq-item,.review,.article,.step,.compare-box,.form-card,.mini{
      background:var(--panel);
      border:1px solid rgba(217,229,208,.95);
      box-shadow:var(--shadow);
    }
    .hero-main{
      border-radius:30px; padding:30px; position:relative; overflow:hidden;
      background:
        linear-gradient(135deg, rgba(25,195,125,.14), rgba(255,255,255,.95) 42%),
        linear-gradient(180deg, #fff, #fbfef8);
    }
    .hero-main::before,.hero-main::after{
      content:""; position:absolute; border-radius:50%; background:rgba(25,195,125,.12); filter:blur(2px);
    }
    .hero-main::before{width:180px;height:180px; right:-50px; top:-52px}
    .hero-main::after{width:120px;height:120px; right:70px; bottom:-26px}
    .kicker{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(25,195,125,.12); color:#11764c; font-weight:700; font-size:.88rem}
    h1{margin:16px 0 12px; font-size:clamp(2rem,4vw,3.55rem); line-height:1.1; letter-spacing:-.03em}
    .lead{margin:0 0 20px; color:var(--muted); font-size:1.02rem; line-height:1.8; max-width:62ch}
    .hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 20px}
    .hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
    .stat{
      border-radius:18px; padding:16px; background:linear-gradient(180deg,#fff, #f7fbf4); border:1px solid var(--line);
    }
    .stat strong{display:block; font-size:1.28rem}
    .stat span{display:block; margin-top:4px; color:var(--muted); font-size:.88rem; line-height:1.5}
    .hero-side{
      border-radius:30px; padding:22px; display:flex; flex-direction:column; gap:14px;
      background:linear-gradient(180deg,#ffffff 0%, #f8fcf6 100%);
    }
    .mini{
      border-radius:22px; padding:16px; background:linear-gradient(180deg,#fff, #f6fbf5);
    }
    .mini h3{margin:0 0 8px; font-size:1rem}
    .mini p{margin:0; color:var(--muted); line-height:1.7; font-size:.95rem}
    .tag-cloud{display:flex; flex-wrap:wrap; gap:8px}
    .tag-cloud span{
      padding:8px 10px; border-radius:999px; background:#eef8f2; border:1px solid #d7eadf; color:#21533a; font-size:.88rem
    }
    section{padding:22px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:14px}
    .section-head h2{margin:0; font-size:clamp(1.35rem,2.5vw,2rem)}
    .section-head p{margin:0; color:var(--muted); line-height:1.7; 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}
    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
    .card,.panel,.review,.article,.step,.compare-box,.form-card{border-radius:22px; padding:18px}
    .card h3,.panel h3,.review h3,.article h3,.step h3{margin:0 0 8px; font-size:1.08rem}
    .card p,.panel p,.review p,.article p,.step p{margin:0; color:var(--muted); line-height:1.72}
    .feature-icon{
      width:44px;height:44px;border-radius:14px; display:grid; place-items:center; margin-bottom:12px;
      background:linear-gradient(135deg,rgba(25,195,125,.14),rgba(25,195,125,.06));
      color:#10774d; font-size:1.2rem; font-weight:900;
    }
    .table-wrap{overflow:auto; border-radius:22px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
    table{width:100%; border-collapse:collapse; min-width:860px}
    th,td{padding:14px 16px; border-bottom:1px solid #e6eee1; text-align:left; vertical-align:top}
    th{background:#f4fbf6; color:#234333; font-size:.95rem}
    td{color:#30493a; font-size:.95rem; line-height:1.65}
    .badge{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#effaf3; color:#15734a; font-size:.82rem; font-weight:700}
    .rating{font-size:1.05rem; font-weight:800; color:#0d7a4f}
    .flow{counter-reset:step}
    .step{position:relative}
    .step::before{
      counter-increment:step; content:counter(step);
      position:absolute; right:16px; top:16px; width:34px; height:34px; border-radius:50%;
      background:#e9f7ef; color:#0e7b4f; display:grid; place-items:center; font-weight:800;
    }
    .compare-grid{display:grid; grid-template-columns:1fr .92fr; gap:16px}
    .review-stars{color:#18a96e; letter-spacing:.14em; font-size:1rem; margin-bottom:10px}
    .article small,.review small{color:#7c8f83}
    .faq{display:grid; gap:12px}
    .faq-item{border-radius:20px; overflow:hidden}
    .faq-q{
      width:100%; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px;
      background:#fff; border:0; color:var(--text); font-size:1rem; font-weight:700; cursor:pointer; text-align:left
    }
    .faq-a{max-height:0; overflow:hidden; transition:max-height .28s ease; background:#f9fcf7}
    .faq-a p{margin:0; padding:0 18px 16px; color:var(--muted); line-height:1.8}
    .faq-item.open .faq-a{max-height:220px}
    .faq-item.open .faq-q{border-bottom:1px solid #e6eee1}
    .reviews,.articles,.network{display:grid; gap:16px}
    .review-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
    .review .who{font-weight:800}
    .contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:16px}
    .form-card label{display:block; font-size:.92rem; font-weight:700; margin:0 0 8px}
    .form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
    input,select,textarea{
      width:100%; padding:12px 14px; border:1px solid #d8e4d0; border-radius:14px; background:#fff; color:var(--text);
      font:inherit; outline:none; transition:.2s ease
    }
    textarea{min-height:132px; resize:vertical}
    input:focus,select:focus,textarea:focus{border-color:#8ddfba; box-shadow:0 0 0 4px rgba(25,195,125,.10)}
    .submit-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:12px}
    .contacts{
      display:grid; gap:12px
    }
    .contact-item{
      padding:14px 16px; border-radius:18px; background:#fff; border:1px solid var(--line)
    }
    .contact-item strong{display:block; margin-bottom:5px}
    .contact-item span,.contact-item a{color:var(--muted); line-height:1.7}
    .qr{
      display:flex; gap:14px; align-items:center; flex-wrap:wrap;
      padding:16px; border-radius:20px; background:linear-gradient(180deg,#ffffff,#f8fcf7); border:1px solid var(--line)
    }
    .qr img{width:118px; height:118px; object-fit:cover; border-radius:16px; border:1px solid var(--line); background:#fff}
    .footer{
      padding:18px 0 26px;
      color:#214033;
    }
    .footer .panel{background:#fff}
    .footer-top{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
    .footer-links{display:flex; flex-wrap:wrap; gap:10px}
    .footer-links a,.ai-page-home-link{
      display:inline-flex; align-items:center; justify-content:center;
      padding:8px 12px; border-radius:999px; background:#effaf3; border:1px solid #d7eadf; color:#185b3c
    }
    .copy{margin-top:14px; color:#668173; font-size:.88rem; line-height:1.7}
    .floating{
      position:fixed; right:16px; bottom:16px; z-index:60; display:grid; gap:10px
    }
    .float-btn{
      width:48px;height:48px;border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-2));
      color:#fff; box-shadow:0 14px 28px rgba(25,195,125,.26); border:0; cursor:pointer;
    }
    .side-float{
      position:fixed; left:16px; bottom:16px; z-index:60;
      display:flex; gap:10px; flex-wrap:wrap; max-width:min(92vw,420px)
    }
    .side-float a{
      padding:10px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); color:#214033; font-size:.9rem
    }
    [data-reveal]{opacity:0; transform:translateY(16px); transition:.55s ease}
    [data-reveal].show{opacity:1; transform:none}
    @media (max-width: 980px){
      .hero-grid,.grid-4,.grid-3,.grid-2,.compare-grid,.contact-grid,.footer-top{grid-template-columns:1fr}
      .nav-links{display:none}
      .menu-toggle{display:inline-flex}
      .nav.open .nav-links{
        display:flex; width:100%; padding-top:10px; justify-content:flex-start
      }
      .nav{flex-wrap:wrap}
      .hero-stats{grid-template-columns:1fr}
      .form-grid{grid-template-columns:1fr}
      table{min-width:760px}
    }
    @media (max-width: 640px){
      .container{width:min(var(--max), calc(100% - 20px))}
      .hero-main,.hero-side{padding:18px;border-radius:24px}
      .card,.panel,.review,.article,.step,.compare-box,.form-card{padding:16px;border-radius:18px}
      h1{font-size:2rem}
      .hero-actions,.submit-row{flex-direction:column; align-items:stretch}
      .btn{width:100%}
      .side-float{left:10px; right:10px; bottom:10px; max-width:none}
      .floating{right:10px; bottom:72px}
    }