:root{
    --bg:#fff;
    --card:#fff;
    --muted:#9fb0c2;
    --text:#e7f0fb;
    --accent:#6ea8ff;
    --ring:#355735;
    --success:#49d18a;
  }
  *{box-sizing:border-box}
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1200px 600px at 80% -10%, #007400 0%, rgba(22,39,59,0) 60%) , var(--bg);
    color:var(--text);
    line-height:1.5;
  }
  .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.text {
  flex: 1;
}

.text h1 {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.4;
  color: #355735;
}

.text .lead {
  font-size: 16px;
  color: #355735;
  margin-top: 20px;
}

.image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.image img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1{
    font-size:clamp(28px, 2.2vw + 16px, 44px);
    line-height:1.1;
    margin:0 0 14px;
    letter-spacing:-0.02em;
  }
  .lead{color:var(--muted);max-width:58ch;margin:0 0 28px}
  .timeline{
    background-color: #4b654b;
    position:relative;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:24px 18px;
    margin-top:28px;
    padding: 20px;
  }
  .step{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    border:1px solid var(--ring);
    border-radius:18px;
    padding:18px;
    position:relative;
    box-shadow: 0 6px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(3px);
  }
  .step__header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .num{
    width:44px;height:44px;display:grid;place-items:center;
    border-radius:50%;
    border:2px solid var(--accent);
    font-weight:700;
    font-size:18px;
    background: radial-gradient(120% 120% at 30% 25%, #fff, rgba(110,168,255,0) 60%);
  }
  .ico{color: #fff;  font-size:22px;filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));}
  .title{color: #355735;  font-size:18px;font-weight:700;margin:0}
  .subtitle{color:var(--muted);margin:2px 0 0;font-size:14px}
  .text{color:#355735;font-size:14px;margin:10px 0 0}
  .step--1{background-color: #fff;  grid-column:1 / span 4}
  .step--2{background-color: #fff; grid-column:5 / span 4}
  .step--3{background-color: #fff;  grid-column:9 / span 4}
  .step--4{background-color: #fff; grid-column:1 / span 4}
  .step--5{background-color: #fff; grid-column:5 / span 4}
  .step--6{background-color: #fff; grid-column:9 / span 4}
  .link{position:absolute;inset:0;pointer-events:none;}
  .link svg{position:absolute;width:33%;height:120px}
  .link--a{left:33%;top:54px}
  .link--b{left:66%;top:54px}
  .link--c{left:33%;bottom: -6px}
  .link--d{left:66%;bottom: -6px}
  @media (max-width: 1057px){
    .timeline{grid-template-columns: repeat(6, 1fr)}
    .step--1,.step--2,.step--3,.step--4,.step--5,.step--6{grid-column:1 / -1}
    .link{display:none}
  }
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#d7f4e6;background:rgba(73,209,138,.12);border:1px solid rgba(73,209,138,.35);padding:4px 8px;border-radius:999px}
  .badge::before{content:"";width:8px;height:8px;background:var(--success);border-radius:50%;box-shadow:0 0 0 3px rgba(73,209,138,.25)}