
  :root{
    --ink:#0d1520;
    --ink-2:#4a5568;
    --ink-3:#7a8798;
    --line:#e3e8ef;
    --line-2:#eef2f7;
    --bg:#ffffff;
    --soft:#f7f9fc;
    --accent:#76b900;
    --accent-dark:#4d7c0f;
    --accent-soft:#f1f8e4;
    --radius:14px;
    --shadow:0 6px 24px rgba(13,21,32,.07);
    --max:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:24px;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Inter","Helvetica Neue",Arial,"Segoe UI",sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

  .hero{
    position:relative;overflow:hidden;
    background:#fff;
    padding:78px 0 70px;
    border-bottom:1px solid var(--line);
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(760px 420px at 8% 0%, rgba(118,185,0,.10), transparent 62%),
      radial-gradient(620px 380px at 96% 8%, rgba(118,185,0,.06), transparent 62%);
    pointer-events:none;
  }
  .hero-grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--accent-dark);
    background:var(--accent-soft);
    border:1px solid #d9ecb4;
    padding:6px 14px;border-radius:999px;
  }
  .hero h1{
    font-size:clamp(30px,4.1vw,48px);
    line-height:1.18;margin:22px 0 0;letter-spacing:-.8px;font-weight:800;
  }
  .hero h1 span{color:var(--accent-dark);}
  .hero .lead{
    font-size:17px;color:var(--ink-2);max-width:600px;margin:18px 0 0;
  }
  .hero-visual{display:flex;align-items:center;justify-content:center;}
  .hero-visual svg{width:100%;max-width:520px;}
  .kpis{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
    margin-top:44px;max-width:660px;
  }
  .kpi{
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:15px 14px;text-align:center;
  }
  .kpi b{display:block;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}
  .kpi span{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.7px;font-weight:600;}
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;gap:38px;}
    .hero{padding:54px 0 56px;}
    .kpis{grid-template-columns:repeat(2,1fr);}
  }

  section{padding:76px 0;}
  .sec-soft{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .sec-head{max-width:720px;margin-bottom:42px;}
  .sec-head .tag{
    display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.6px;
    color:var(--accent-dark);text-transform:uppercase;margin-bottom:10px;
  }
  .sec-head h2{
    font-size:clamp(24px,2.9vw,33px);line-height:1.28;margin:0 0 12px;
    letter-spacing:-.6px;font-weight:800;
  }
  .sec-head p{color:var(--ink-2);margin:0;font-size:16px;}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:28px 26px;transition:.22s;
  }
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d5e6b7;}
  .card .ico{
    width:42px;height:42px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent-dark);margin-bottom:16px;
  }
  .card .ico svg{width:21px;height:21px;}
  .card h3{font-size:17px;margin:0 0 9px;font-weight:700;letter-spacing:-.2px;}
  .card p{margin:0;color:var(--ink-2);font-size:14.5px;}
  .card .proof{
    display:block;margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);
    font-size:13px;font-weight:700;color:var(--accent-dark);letter-spacing:.2px;
  }
  @media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .cards{grid-template-columns:1fr;} }

  .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
  .app{
    background:#fff;border:1px solid var(--line);border-radius:11px;
    padding:17px 16px;font-size:14.5px;font-weight:600;
    display:flex;align-items:center;gap:10px;transition:.2s;
  }
  .app::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none;}
  .app:hover{border-color:#d5e6b7;background:#fcfef8;transform:translateY(-3px);}
  @media (max-width:980px){ .apps{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .apps{grid-template-columns:1fr;} }

  .spec-group{margin-bottom:40px;}
  .spec-group:last-child{margin-bottom:0;}
  .spec-group > h3{
    font-size:16px;margin:0 0 14px;display:flex;align-items:center;gap:10px;font-weight:700;
  }
  .spec-group > h3::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--accent);}
  .table-scroll{
    overflow-x:auto;border:1px solid var(--line);
    border-radius:var(--radius);background:#fff;
  }
  table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px;}
  thead th{
    background:var(--soft);color:var(--ink);font-weight:700;text-align:left;
    padding:13px 18px;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;
    border-bottom:1px solid var(--line);white-space:nowrap;
  }
  tbody td{padding:13px 18px;border-top:1px solid var(--line-2);vertical-align:top;color:var(--ink-2);}
  tbody tr:first-child td{border-top:none;}
  tbody tr:hover{background:#fbfdf7;}
  td.k{color:var(--ink);font-weight:600;width:180px;white-space:nowrap;}
  .badge{
    display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px;
    background:var(--accent-soft);color:var(--accent-dark);font-weight:700;margin-left:6px;
    white-space:nowrap;
  }

  .diagram{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;box-shadow:var(--shadow);
  }
  .diagram svg{width:100%;height:auto;}

  .service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  .service{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
  }
  .service h3{margin:0 0 12px;font-size:16.5px;font-weight:700;}
  .service ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14.5px;}
  .service li{margin:6px 0;}
  @media (max-width:720px){ .service-grid{grid-template-columns:1fr;} }

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
  }
