@font-face{
  font-family:'Montserrat';
  src:url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('assets/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --color-bg:#faf6ef;
  --color-surface:#ffffff;
  --color-text:#242923;
  --color-muted:#5c655c;
  --color-border:#e7e0d2;
  --color-primary:#1b6e78;
  --color-primary-dark:#12525a;
  --color-accent:#c9873f;
  --radius:14px;
  --shadow:0 12px 32px rgba(31,41,35,.08);
  --font-heading:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
}

.header-banner{
  width:100%;
  line-height:0;
  overflow:hidden;
}
.header-art{
  width:100%;
  aspect-ratio:1824/862;
  max-height:340px;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}

.container{
  max-width:720px;
  margin:0 auto;
  padding:32px 24px 48px;
}

h1{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.4em,4vw,2em);
  line-height:1.3;
  color:var(--color-primary-dark);
  margin:0 0 20px;
}

h2{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.15em;
  color:var(--color-primary-dark);
  margin:28px 0 12px;
}

.field-group{margin:16px 0 0}
.field-group label{margin:0;font-weight:600}
.field-hint{margin:4px 0 0;font-size:.86em;color:var(--color-muted)}
.field-group select{margin-top:8px}

.intro,
form,
.faq{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:24px;
}

.progress-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 24px;
  margin-bottom:24px;
  text-align:center;
}
.progress-label{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:.92em;
  color:var(--color-muted);
  margin-bottom:12px;
}
.progress-bar-track{
  position:relative;
  height:22px;
  border-radius:999px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  transition:width 1.1s cubic-bezier(.22,.8,.28,1);
  position:relative;
  overflow:hidden;
}
.progress-bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 10px,transparent 10px 20px);
  animation:progress-stripes 1.4s linear infinite;
}
@keyframes progress-stripes{
  from{background-position:0 0}
  to{background-position:28px 0}
}
@media (prefers-reduced-motion:reduce){
  .progress-bar-fill{transition:none}
  .progress-bar-fill::after{animation:none}
}
.progress-numbers{margin-top:12px;font-family:var(--font-heading)}
.progress-numbers strong{font-size:1.6em;color:var(--color-primary-dark)}
.progress-numbers span{font-size:1.1em;color:var(--color-muted)}
.progress-hint{margin:8px 0 0;font-size:.86em;color:var(--color-muted)}

.intro p{margin:0 0 14px;color:var(--color-text)}
.intro p:last-child{margin-bottom:0}
.intro strong{color:var(--color-accent)}

.demands{padding-left:22px;margin:0}
.demands li{margin:10px 0}
.demands em{color:var(--color-primary-dark);font-style:normal;font-weight:600}

label{display:block;margin:16px 0 0}
label:first-child{margin-top:0}
[hidden]{display:none !important}

input,select,button{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  font:inherit;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:#fff;
  color:var(--color-text);
}

input:focus,select:focus{
  outline:2px solid var(--color-primary);
  outline-offset:1px;
  border-color:var(--color-primary);
}

label.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.92em;
  color:var(--color-muted);
}
label.consent input{width:auto;margin-top:3px}
label.consent a{color:var(--color-primary-dark)}

button{
  margin-top:22px;
  background:var(--color-primary);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:12px;
  font-weight:600;
  font-size:1.02em;
  cursor:pointer;
  transition:background .15s ease;
}
button:hover{background:var(--color-primary-dark)}
button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

#msg{margin:-8px 0 24px;font-weight:600;color:var(--color-primary-dark);min-height:1.4em}

.share{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:24px;
}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  margin-top:0;
  padding:10px 16px;
  border:1px solid var(--color-border);
  border-radius:999px;
  background:#fff;
  color:var(--color-text);
  font-weight:600;
  font-size:.95em;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.share-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.share-btn:hover{background:var(--color-bg);border-color:var(--color-primary)}
.share-fb{color:#1877f2}
.share-ig{color:#c13584}
.share-email{color:var(--color-primary-dark)}
.share-note{margin:12px 0 0;font-size:.9em;color:var(--color-muted);min-height:1.3em}

.faq details{
  border-top:1px solid var(--color-border);
  padding:12px 0;
}
.faq details:first-of-type{border-top:0;padding-top:0}
.faq summary{
  cursor:pointer;
  font-family:var(--font-heading);
  font-weight:600;
  color:var(--color-primary-dark);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";
  display:inline-block;
  width:1.1em;
  color:var(--color-accent);
  font-weight:700;
}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:10px 0 0;color:var(--color-text)}

footer{margin-top:8px;font-size:.9em;color:var(--color-muted);text-align:center}
footer a{color:var(--color-muted)}

.legal h2{margin-top:28px;font-size:1.1em}
.legal .updated{color:var(--color-muted);font-size:.9em}
.legal ul{padding-left:20px}
.legal li{margin:6px 0}
.legal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}

@media (max-width:480px){
  .container{padding:20px 16px 36px}
  .intro,form,.faq,.legal,.progress-card{padding:18px}
  h1{margin-bottom:16px}
}