:root{
      --green-900:#0b4f2d;
      --green-800:#116235;
      --green-700:#17723f;
      --green-600:#23834c;
      --green-100:#e8f5ed;
      --green-050:#f4faf6;
      --blue-050:#f2f7fb;
      --blue-700:#285a78;
      --amber-050:#fff9e9;
      --amber-700:#7c5b00;
      --ink:#17211b;
      --muted:#5d6961;
      --line:#dbe5de;
      --white:#fff;
      --shadow:0 12px 32px rgba(15, 62, 37, .10);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      color:var(--ink);
      background:#f7faf8;
      line-height:1.55;
    }
    a{color:inherit}
    .wrap{width:min(1120px,calc(100% - 28px));margin-inline:auto}
    .hero{
      background:linear-gradient(135deg,var(--green-900),var(--green-700));
      color:#fff;
      padding:44px 0 38px;
      position:relative;
      overflow:hidden;
    }
    .hero:after{
      content:"";position:absolute;inset:auto -90px -150px auto;width:330px;height:330px;
      border-radius:50%;background:rgba(255,255,255,.06)
    }
    .eyebrow{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:.86rem;letter-spacing:.02em;opacity:.95}
    h1{font-size:clamp(2rem,5vw,3.35rem);line-height:1.08;margin:10px 0 12px;letter-spacing:-.025em}
    .hero p{max-width:780px;font-size:clamp(1rem,2vw,1.16rem);margin:0;opacity:.95}
    .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:750;
      padding:12px 16px;border-radius:11px;border:1px solid transparent;transition:.18s ease;cursor:pointer
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:#fff;color:var(--green-900)}
    .btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.35)}
    main{padding:28px 0 48px}
    .section{margin-top:28px}
    .section h2{font-size:clamp(1.45rem,3vw,2rem);line-height:1.2;margin:0 0 7px;color:var(--green-900)}
    .section-lead{color:var(--muted);margin:0 0 18px;max-width:820px}
    .compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
    .card-title{display:flex;align-items:center;gap:11px;margin-bottom:7px}
    .icon{
      width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--green-100);
      color:var(--green-800);font-size:1.25rem;flex:0 0 auto
    }
    .card h3{margin:0;font-size:1.25rem;color:var(--green-900)}
    .badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.77rem;font-weight:800;background:var(--green-100);color:var(--green-900);margin:9px 0}
    .rvdd-card{border-top:5px solid var(--blue-700)}
    .rvdd-card .icon,.rvdd-card .badge{background:var(--blue-050);color:var(--blue-700)}
    .checklist{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
    .checklist li{display:flex;gap:9px;align-items:flex-start}
    .checklist li:before{content:"✓";font-weight:900;color:var(--green-700)}
    .rvdd-card .checklist li:last-child:before{content:"!";color:var(--blue-700)}
    .notice{
      margin-top:16px;border-left:5px solid var(--green-600);border-radius:12px;background:var(--green-050);padding:16px 18px;
      font-weight:650;color:#254531
    }
    .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:step}
    .step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;position:relative;min-height:220px}
    .step:before{
      counter-increment:step;content:counter(step);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
      background:var(--green-800);color:#fff;font-weight:900;margin-bottom:14px
    }
    .step h3{margin:0 0 8px;font-size:1.1rem;color:var(--green-900)}
    .step p{margin:0;color:var(--muted)}
    .step .small{font-size:.9rem;margin-top:10px;color:#435047}
    .payment-box{margin-top:14px;background:var(--amber-050);border:1px solid #ead89d;border-radius:14px;padding:16px;color:#594514}
    .payment-box strong{color:var(--amber-700)}
    .quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .quick a{
      text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px;min-height:130px;
      display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 6px 18px rgba(15,62,37,.06);transition:.18s ease
    }
    .quick a:hover{border-color:#9cc9ae;transform:translateY(-2px);box-shadow:var(--shadow)}
    .quick .qicon{font-size:1.5rem}
    .quick strong{color:var(--green-900);font-size:1rem}
    .quick span{font-size:.86rem;color:var(--muted)}
    .faq{display:grid;gap:10px}
    details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
    summary{cursor:pointer;list-style:none;padding:16px 48px 16px 17px;font-weight:800;color:var(--green-900);position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--green-700)}
    details[open] summary:after{content:"–"}
    details p{margin:0;padding:0 17px 17px;color:var(--muted)}
    .footer-note{margin-top:28px;background:#eef5f0;border-radius:15px;padding:17px;font-size:.9rem;color:#4f5d54}
    .footer-note strong{color:var(--green-900)}
    .toplink{position:fixed;right:16px;bottom:16px;text-decoration:none;background:var(--green-900);color:#fff;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;box-shadow:var(--shadow);opacity:.92}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    @media (max-width:850px){
      .compare,.steps{grid-template-columns:1fr}
      .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
      .step{min-height:0}
    }
    @media (max-width:520px){
      .hero{padding:34px 0 30px}
      main{padding-top:20px}
      .quick{grid-template-columns:1fr}
      .card{padding:18px}
      .hero-actions .btn{width:100%}
    }
    @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  
    .loading{padding:60px 0;text-align:center;color:var(--muted)}
    .error-box{margin:28px auto;background:#fff3f3;border:1px solid #e7bcbc;color:#762b2b;padding:18px;border-radius:14px;max-width:900px}