:root{
    --bg:#f5fbf6;
    --bg2:#eef8f0;
    --card:#ffffff;
    --text:#153225;
    --muted:#4f6b5c;
    --accent:#2f855a;
    --accent2:#48bb78;
    --blue:#2b6cb0;
    --border:#d8e8dc;
    --danger:#c53030;
    --ok:#1f7a45;
    --shadow:0 10px 30px rgba(24, 62, 40, .08);
    --shadow-soft:0 6px 20px rgba(24, 62, 40, .05);
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    font-family: Inter, Arial, sans-serif;
    color:var(--text);
    background:
      radial-gradient(1200px 500px at 85% -10%, rgba(72,187,120,.18), transparent 60%),
      radial-gradient(900px 420px at 10% -12%, rgba(43,108,176,.14), transparent 55%),
      linear-gradient(180deg,var(--bg2),var(--bg));
  }
  
  .wrap{
    width:min(980px,92%);
    margin:22px auto 56px;
  }
  
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    margin-bottom:14px;
    box-shadow:var(--shadow-soft);
  }
  
  .hero{
    padding-top:14px;
  }
  
  .back-link{
    display:inline-block;
    margin-bottom:6px;
    text-decoration:none;
    color:#1f5b43;
    font-weight:700;
  }
  
  .hero h1{
    margin:0 0 8px;
    font-size:clamp(1.6rem,2.8vw,2.3rem);
    line-height:1.15;
  }
  .hero p{
    margin:0;
    color:var(--muted);
    font-size:1rem;
  }
  
  /* Stepper */
  .form-card{
    padding:20px;
  }
  
  .step{
    display:none;
  }
  .step.active{
    display:block;
  }
  
  .step-head{
    margin-bottom:10px;
  }
  .step-head h2{
    margin:8px 0 0;
    font-size:1.28rem;
  }
  .step-badge{
    display:inline-flex;
    align-items:center;
    border:1px solid #cde3d3;
    color:#1f5b43;
    background:#f2fbf4;
    border-radius:999px;
    padding:4px 10px;
    font-weight:700;
    font-size:.82rem;
  }
  
  label{
    display:block;
    margin:12px 0 6px;
    color:#2f5f49;
    font-weight:600;
  }
  
  input, select{
    width:100%;
    border-radius:12px;
    border:1px solid #cfe3d4;
    background:#fff;
    color:var(--text);
    padding:11px 12px;
    font-size:.98rem;
    outline:none;
  }
  input:focus, select:focus{
    border-color:#7bc59a;
    box-shadow:0 0 0 3px rgba(72,187,120,.18);
  }
  
  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  
  .helper{
    margin:10px 0 0;
    color:var(--muted);
    font-size:.92rem;
  }
  
  .nav-row{
    margin-top:14px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  
  /* Buttons */
  .btn{
    border-radius:12px;
    border:1px solid var(--border);
    padding:10px 14px;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
    transition:.2s ease transform, .2s ease filter;
  }
  .btn:hover{ transform:translateY(-1px); }
  
  .btn-primary{
    color:#fff;
    background:linear-gradient(180deg,var(--accent2),var(--accent));
    border-color:#2f7a53;
  }
  .btn-primary:disabled{
    opacity:.7;
    cursor:not-allowed;
  }
  
  .btn-ghost{
    background:#fff;
    color:#184633;
    border-color:#cfe3d4;
  }
  
  .btn-strong{
    padding:12px 16px;
  }
  
  /* Chips */
  .chip-row, .preset-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  
  .chip, .preset{
    border-radius:999px;
    border:1px solid #cde3d3;
    background:#fff;
    color:#184633;
    padding:8px 12px;
    font-weight:700;
    cursor:pointer;
  }
  .chip.active, .preset.active{
    background:#e9f8ef;
    border-color:#7bc59a;
  }
  
  /* Counter */
  .counter{
    display:inline-flex;
    align-items:center;
    border:1px solid #cfe3d4;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }
  .counter-btn{
    width:42px;
    height:44px;
    border:none;
    background:#f2fbf4;
    color:#184633;
    font-size:1.25rem;
    font-weight:700;
    cursor:pointer;
  }
  .counter input{
    width:88px;
    text-align:center;
    border:none;
    border-left:1px solid #e3efe6;
    border-right:1px solid #e3efe6;
    border-radius:0;
    padding:11px 8px;
  }
  
  /* Mini summary */
  .summary-mini{
    margin-top:12px;
    border:1px dashed #cfe3d4;
    background:#f8fdf9;
    color:#315a47;
    border-radius:12px;
    padding:10px 12px;
    font-size:.92rem;
  }
  
  /* Error */
  .error{
    color:var(--danger);
    min-height:1.2em;
    margin-top:10px;
    font-weight:600;
  }
  
  .hidden{ display:none; }
  
  /* Result */
  .result-top{
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .result-top h2{
    margin:0;
  }
  .pill-group{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .pill{
    border:1px solid #d8e8dc;
    background:#f7fcf8;
    border-radius:999px;
    padding:8px 10px;
    font-size:.9rem;
    color:#234b38;
  }
  .v-great{ background:#e9f8ef; border-color:#8cd2a8; }
  .v-good{ background:#eef8ff; border-color:#9cc4e8; }
  .v-fair{ background:#fff8e8; border-color:#ead9aa; }
  .v-bad{ background:#fff1f1; border-color:#f0b3b3; }
  
  .price-panel{
    margin:12px 0 14px;
    border:1px solid #d8e8dc;
    border-radius:14px;
    background:linear-gradient(180deg,#ffffff,#f7fcf8);
    padding:12px 14px;
  }
  .kicker{
    margin:0;
    color:#486958;
    font-size:.9rem;
    font-weight:700;
  }
  .total{
    margin:2px 0 0;
    font-size:2rem;
    line-height:1.1;
    color:#0f3a28;
    font-weight:800;
  }
  
  .result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  
  .subcard{
    background:#fff;
    border:1px solid #d8e8dc;
    border-radius:12px;
    padding:12px;
    margin-bottom:12px;
  }
  .subcard h3{
    margin:0 0 8px;
    font-size:1.02rem;
  }
  ul{
    margin:8px 0 0 18px;
    color:#1b4632;
  }
  li{ margin:6px 0; }
  
  /* Offers */
  .offers{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .offers a{
    text-decoration:none;
    color:#fff;
    background:linear-gradient(180deg,var(--accent2),var(--accent));
    border:1px solid #2f7a53;
    padding:9px 12px;
    border-radius:10px;
    font-weight:700;
  }
  
  /* Leads */
  .leadRow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .leadRow input{
    flex:1;
    min-width:220px;
  }
  #leadMsg{
    margin:10px 0 0;
    color:var(--ok);
    font-weight:600;
  }
  
  @media (max-width:760px){
    .grid-2{ grid-template-columns:1fr; }
    .result-grid{ grid-template-columns:1fr; }
  }