
:root{
  --brand:#005E3F;
  --brand-dark:#00462F;
  --text:#333;
  --muted:#666;
  --border:#ddd;
  --bg:#fff;
  --bg-soft:#f8f8f8;
  --link:#005E3F;
  --container:1200px;
}
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:var(--container);margin:0 auto;padding:0 16px}

    /* Top utility bar */
    .topbar{
      background:var(--brand);
      color:#fff;
      font-size:13px;
      height:32px;
      display:flex;align-items:center;
    }
    .topbar .container{display:flex;align-items:center;justify-content:space-between}
    .lang{display:flex;gap:12px;letter-spacing:.2px}
    .lang a{color:#fff;opacity:.95}
    .util{display:flex;gap:12px;align-items:center}
    .divider{opacity:.6}

    /* Header + nav */
    header{
      background:#fff;
      box-shadow:0 0 0 0 transparent;
      padding:22px 0;
    }
    .brandnav{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:16px;
    }
    .logo{
      display:flex;align-items:center;gap:14px;
      white-space:nowrap;
    }
    .logo-badge{
      width:44px;height:44px;border-radius:50%;
      background:var(--brand);
      display:grid;place-items:center;
      color:#fff;font-weight:700;font-size:16px;
      letter-spacing:.3px;
    }
    .logo-text{
      font-size:28px;font-weight:700;color:var(--brand);
      display:flex;gap:6px;align-items:baseline
    }
    .logo-text small{font-size:.55em;color:#b34}
    nav.main a{
      color:var(--link);
      font-weight:600;
      margin-left:22px;
      border-bottom:1px solid transparent;
      padding-bottom:2px;
    }
    nav.main a:hover{border-color:var(--link)}
    nav.main .sep{margin-left:22px;color:#aaa}

    /* Welcome bar */
    .welcome{
      background:var(--brand);
      color:#fff;
      margin-top:6px;
      border-top:1px solid #c23;
      border-bottom:1px solid #a0093f;
    }
    .welcome .container{
      padding:12px 16px;
      font-weight:700;
      letter-spacing:.2px;
    }

    /* Layout */
    .page{
      background:#fff;
      border-top:1px solid var(--border);
    }
    .grid{
      display:grid;
      grid-template-columns:1fr 1fr 320px;
      gap:28px;
      padding:24px 0 32px;
      border-bottom:1px solid var(--border);
    }

    /* Content typograpy */
    h2.section-title{
      color:var(--brand);
      font-size:28px;
      margin:6px 0 18px;
      font-weight:700;
    }
    h3.block-title{
      color:var(--brand);
      font-size:18px;
      margin:18px 0 6px;
      font-weight:700;
    }
    p{color:var(--muted);margin:0 0 10px}

    /* Right sidebar cards */
    .card{
      border:1px solid var(--border);
      background:#fff;
    }
    .card .card-head{
      background:var(--brand);
      color:#fff;
      padding:10px 14px;
      font-weight:700;
    }
    .card .card-body{
      padding:14px;
      background:#fff;
    }
    .kv{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:var(--muted)}
    .kv .ico{
      width:18px;height:18px;border-radius:50%;
      border:2px solid var(--brand);color:var(--brand);
      display:grid;place-items:center;
      font-size:11px;line-height:1
    }
    .card .more{display:block;margin-top:8px;text-align:right}

    /* FAQ list */
    .faq{list-style:none;padding:0;margin:0}
    .faq li{
      padding:8px 0;
      border-bottom:1px solid #eee;
      color:var(--link)
    }
    .faq li:last-child{border-bottom:none}

    /* Cookie bar */
    .cookiebar{
      position:fixed;left:0;right:0;bottom:0;
      background:var(--brand);
      color:#fff;
      padding:10px 0;
      z-index:50;
    }
    .cookiebar .container{
      display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap
    }
    .cookiebar a{color:#fff;text-decoration:underline}
    .cookiebar button{
      background:#fff;color:var(--brand);
      border:none;border-radius:2px;
      padding:6px 12px;font-weight:700;cursor:pointer
    }
    .cookiebar button:hover{background:#005E3F}

    /* Responsiveness */
    @media (max-width:1100px){
      .grid{grid-template-columns:1fr;gap:18px}
    }

  /* ========= Design Tokens ========= */
:root{
  --title-color:#005E3F;
  --accent:#45A049;
  --overlay-bg-rgb:253,253,253;
  --text:#1f2a37;
  --muted:#6b7280;
  --error:#b91c1c;
  --card:#ffffff;
  --ring:#45A049;
  --radius:20px;
  --shadow: 0 18px 50px rgba(0,0,0,.14);
  --space:16px;
  --space-lg:28px;
  --field-h:48px;
  --transition:200ms ease;
}

  /* ========= Reset ========= */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, Poppins, "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color:var(--text);
    background:#fafafa;
  }

  /* ========= Overlay Layer ========= */
  .overlay{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background: rgba(var(--overlay-bg-rgb), .66);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    z-index:9999; opacity:0; transform: translateY(10px);
    animation: overlayIn 320ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes overlayIn{ to{opacity:1; transform:translateY(0)} }

  /* ========= Card ========= */
  .card{
    width:min(96vw, 860px);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden; display:flex; flex-direction:column;
  }

  .card__header{
    position:relative;
    padding: var(--space-lg) var(--space-lg) 0;
    border-bottom:none;
    background:#fff;
  }
  .logo-wrap{
    position:absolute; top:18px; left:var(--space-lg);
    height:36px; display:flex; align-items:center; gap:10px;
  }

  .logo{ display:none; }
  .logo-img{
    display:block;
    height:36px;
    width:auto;
    object-fit:contain;
    image-rendering:auto;
  }

  .header-divider{
    height:2px;
    background: var(--accent);
    opacity:.9; border-radius:2px;
    margin: 36px 0 26px;
  }

  .title{
    margin: 0 0 8px;
    color:var(--title-color);
    font-weight:700; letter-spacing:.2px; line-height:1.25;
    font-size: clamp(24px, 3vw, 32px);
  }
  .subtitle{
    margin:0 0 22px;
    color:#557077; font-size:15px; line-height:1.6;
  }

  .card__body{ padding: 24px var(--space-lg) 26px; }

  /* ========= Stepper ========= */
  .steps{ display:flex; gap:8px; margin:8px 0 14px; }
  .dot{ width:8px;height:8px;border-radius:999px;background:#e5e7eb; transition:background var(--transition), transform var(--transition);}
  .dot.active{ background:var(--accent); transform:scale(1.15) }

  /* ========= Form ========= */
  form{display:block}
  .section-title{
    display:flex; align-items:center; gap:10px;
    margin: 6px 0 12px;
    font-size:18px; font-weight:700; color:var(--title-color);
  }
  .section-title .star{ font-size:18px; line-height:1; color:var(--accent); }
  .section-note{ margin:-6px 0 16px; color:#6b7280; font-size:14px; }

  .grid{ display:grid; grid-template-columns:1fr; gap:16px; }
  @media (min-width:640px){ .grid--two{ grid-template-columns: 1fr 1fr; gap:18px; } }

  .field{ display:flex; flex-direction:column; gap:6px; position:relative; }
  .label{ font-size:13px; color:var(--accent); font-weight:600; letter-spacing:.2px; }

  .input, .select, .textarea{
    height:var(--field-h); padding:0 14px;
    border:1px solid #e6edf0; border-radius:12px; outline:none;
    background:#f8fbfc; font-size:15px;
    transition:border var(--transition), box-shadow var(--transition), background var(--transition);
  }
  .textarea{ min-height:120px; padding:12px 14px; resize:vertical }
  .input:focus, .select:focus, .textarea:focus{
    background:#fff; border-color: var(--ring);
    box-shadow: 0 0 0 4px rgba(1, 182, 10, 0.12);
  }
  .input::placeholder{ color:#94a3b8; opacity:1; }

  .hint{ font-size:12px;color:#73848a;margin-top:4px; }
  .error{ font-size:12px;color:var(--error);margin-top:6px;display:none; }
  .field.invalid .error{ display:block }
  .field.invalid .input, .field.invalid .select, .field.invalid .textarea{
    border-color: var(--error); box-shadow: 0 0 0 4px #005e3f31; background:#fff;
  }

  /* ========= Footer Buttons ========= */
  .card__footer, .form-nav{
    display:flex; justify-content:space-between; gap:10px;
    padding: 18px var(--space-lg);
    border-top:1px solid #eef2f7; background:#fff;
  }
  .btn{
    appearance:none;border:0;cursor:pointer;border-radius:12px;
    padding:13px 18px; font-weight:600;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
    display:inline-flex;align-items:center;gap:10px; user-select:none;
  }
  .btn:disabled{ opacity:.6; cursor:not-allowed }
  .btn--ghost, .btn.prev{
    background:#f3f4f6;color:#374151;
  }
  .btn--ghost:hover, .btn.prev:hover{
    background:#005E3F;
  }
  .btn--primary, .btn.next, .btn.confirm{
    background:var(--accent); color:#fff; box-shadow: 0 6px 18px #005e3f75;
  }
  .btn--fast{
    background:#0fe9fc;
    color:#fff; 
    box-shadow: 0 6px 18px #005e3f75;
    appearance:none;
    border:0;
    cursor:pointer;
    border-radius:12px;
    padding:13px 18px;
    font-weight:600;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
    display: none;
    align-items:center;
    gap:10px;
    user-select:none;
  }
  .btn--primary:hover, .btn.next:hover, .btn.confirm:hover{
    background:#005E3F; box-shadow: 0 6px 18px #005e3f75; transform: translateY(-1px);
  }

  /* ========= Step Transitions ========= */
  .step{ display:none; animation: stepFade 260ms ease both; }
  .step.active{ display:block }
  @keyframes stepFade{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)} }

  /* ========= Summary ========= */
  .summary{
    display:grid;grid-template-columns: 1fr; gap:10px;
    background:#fafafa;border:1px solid #eef2f7;border-radius:12px;
    padding:14px;
  }
  .row{ display:flex;justify-content:space-between;gap:12px; border-bottom:1px dashed #005e3f75; padding-bottom:8px; }
  .row:last-child{ border-bottom:none; padding-bottom:0 }
  .key{ color:#374151; font-weight:600 } .val{ color:#4b5563 }

  /* ========= Accessibility ========= */
  .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; }

