:root {
  --stb-green-950: #0b302d;
  --stb-green-900: #103f3a;
  --stb-green-800: #145d55;
  --stb-green-700: #23776c;
  --stb-green-100: #dceee9;
  --stb-green-50: #eff7f4;
  --stb-line: #d4dfdb;
  --stb-muted: #64746f;
  --stb-paper: #fffdfa;
  --stb-shadow: 0 24px 65px rgba(11,48,45,.15);
}

* { box-sizing: border-box; }
body { margin: 0; color: #172c29; background: #edf3f0; font-family: Inter, Montserrat, "Segoe UI", Arial, sans-serif; line-height: 1.5; }
button, input { font: inherit; }
button { cursor: pointer; }
.stb-app { min-height: 100vh; }
.stb-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 70px; padding: 8px clamp(18px,4vw,72px); border-bottom: 1px solid var(--stb-line); background: rgba(255,255,255,.96); }
.stb-back { color: var(--stb-green-800); font-size: .86rem; font-weight: 850; text-decoration: none; }
.stb-brand { display: flex; align-items: center; gap: 10px; }
.stb-brand img { width: 40px; height: 40px; object-fit: contain; }
.stb-brand div { display: grid; }
.stb-brand strong { color: var(--stb-green-950); font-size: .84rem; letter-spacing: .08em; }
.stb-brand span { color: var(--stb-muted); font-size: .72rem; }
.stb-secure { justify-self: end; padding: 7px 11px; border-radius: 999px; color: #176b50; background: #e0f3ea; font-size: .75rem; font-weight: 850; }
.stb-main { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(390px,.8fr); min-height: calc(100vh - 70px); }
.stb-intro { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px,7vw,110px) clamp(28px,7vw,130px); color: #fff; background: radial-gradient(circle at 12% 12%, rgba(77,153,139,.35), transparent 34%), linear-gradient(135deg, var(--stb-green-950), #17675e); }
.stb-eyebrow { margin: 0; color: var(--stb-green-700); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.stb-intro .stb-eyebrow { color: #9ed1c7; }
.stb-intro h1 { max-width: 720px; margin: 10px 0 18px; font-family: Georgia, serif; font-size: clamp(2.65rem,5vw,5.2rem); font-weight: 500; line-height: .98; }
.stb-intro > p:not(.stb-eyebrow) { max-width: 720px; margin: 0; color: #d8eae5; font-size: clamp(1rem,1.35vw,1.2rem); }
.stb-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; max-width: 760px; margin-top: 52px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.16); }
.stb-steps div { display: grid; gap: 7px; padding: 20px; background: rgba(8,45,41,.65); }
.stb-steps b { color: #9ed1c7; font-size: .72rem; letter-spacing: .12em; }
.stb-steps span { font-size: .86rem; font-weight: 750; }
.stb-card { align-self: center; width: min(86%,560px); margin: 48px auto; padding: clamp(28px,4vw,48px); border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: var(--stb-shadow); }
.stb-card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; color: #fff; background: var(--stb-green-800); font-size: 1.35rem; }
.stb-card h2, .stb-modal-card h2 { margin: 6px 0 10px; color: var(--stb-green-950); font-family: Georgia, serif; font-size: clamp(1.75rem,2.6vw,2.45rem); font-weight: 500; line-height: 1.12; }
.stb-card-text { margin: 0 0 25px; color: var(--stb-muted); font-size: .91rem; }
#stbForm label { display: block; margin-bottom: 7px; font-size: .83rem; font-weight: 850; }
#stbEmail { width: 100%; min-height: 52px; padding: 11px 14px; border: 1px solid #b9c8c3; border-radius: 10px; color: var(--stb-green-950); background: #fff; }
#stbEmail:focus { outline: 3px solid rgba(35,119,108,.15); border-color: var(--stb-green-700); }
#stbEmail.is-invalid { border-color: #c53b32; }
.stb-feedback { min-height: 22px; margin: 7px 0 0; color: #b42318; font-size: .82rem; font-weight: 700; }
#stbSubmit, #stbCloseModal { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 50px; padding: 11px 17px; border: 0; border-radius: 10px; color: #fff; background: var(--stb-green-800); font-weight: 850; }
#stbSubmit b { font-size: 1.2rem; }
#stbSubmit:disabled { cursor: wait; opacity: .65; }
.stb-privacy { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--stb-line); color: var(--stb-muted); font-size: .78rem; }
.stb-privacy > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--stb-green-700); }
.stb-privacy p { margin: 0; }
.stb-privacy strong { color: var(--stb-green-950); }
.stb-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.stb-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(4,31,28,.72); backdrop-filter: blur(6px); }
.stb-modal[hidden] { display: none; }
.stb-modal-card { width: min(100%,490px); padding: 38px; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.28); text-align: center; }
.stb-modal-card p:not(.stb-eyebrow) { color: var(--stb-muted); }
.stb-success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: #20815d; font-size: 1.8rem; }
#stbCloseModal { width: auto; min-width: 150px; margin: 24px auto 0; }

@media (max-width: 980px) {
  .stb-main { grid-template-columns: 1fr; }
  .stb-intro { padding: 55px 28px 90px; }
  .stb-intro h1 { font-size: clamp(2.5rem,8vw,4.2rem); }
  .stb-card { width: min(calc(100% - 28px),620px); margin: -45px auto 55px; }
}

@media (max-width: 620px) {
  .stb-header { grid-template-columns: auto 1fr auto; padding: 8px 12px; }
  .stb-brand div, .stb-secure { display: none; }
  .stb-brand { justify-self: center; }
  .stb-steps { grid-template-columns: 1fr; margin-top: 34px; }
  .stb-steps div { grid-template-columns: 34px 1fr; align-items: center; padding: 14px 16px; }
  .stb-card { padding: 27px 20px; }
  .stb-modal-card { padding: 31px 21px; }
}