/* ============ OceanRoot survey — styles ============ */
:root {
  --deep:   #062a35;
  --ocean:  #0a4d5c;
  --teal:   #0d7a8c;
  --aqua:   #14b8c4;
  --foam:   #7fe3d8;
  --sand:   #f2efe6;
  --paper:  #ffffff;
  --ink:    #10262c;
  --muted:  #5b7178;
  --line:   #d9e4e6;
  --card:   #ffffff;
  --bg:     #eef6f6;
  --error:  #d64545;
  --ok:     #17936f;
  --radius: 16px;
  --maxw:   720px;
  --shadow: 0 10px 40px -12px rgba(6, 42, 53, .28);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f2a31;
    --ink:   #e7f3f3;
    --muted: #90a9ae;
    --line:  #204750;
    --card:  #123138;
    --bg:    #08222a;
    --sand:  #10333b;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- animated background blobs ---- */
.wave-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(20,184,196,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(13,122,140,.16), transparent 55%),
    var(--bg);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  animation: float 22s ease-in-out infinite;
}
.b1 { width: 460px; height: 460px; top: -120px; right: -80px; background: var(--aqua); }
.b2 { width: 380px; height: 380px; bottom: -100px; left: -60px; background: var(--teal); animation-delay: -7s; }
.b3 { width: 300px; height: 300px; top: 40%; left: 60%; background: var(--foam); opacity: .35; animation-delay: -14s; }
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-40px) scale(1.08); }
  66%     { transform: translate(-25px,25px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* ---- top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.brand-mark { font-size: 1.5rem; }
.brand-name { font-size: 1.15rem; letter-spacing: .5px; color: var(--ink); }

.lang-switch {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 10px -4px rgba(6,42,53,.2);
}
.lang-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: .8rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s;
}
.lang-btn.active { background: var(--teal); color: #fff; }
.lang-btn:hover:not(.active) { color: var(--ink); }

/* ---- page ---- */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.hero { text-align: center; margin: 1.5rem 0 2rem; }
.hero-title {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  font-weight: 800;
  color: var(--ink);
}
.hero-intro {
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* ---- questions ---- */
.questions { display: flex; flex-direction: column; gap: 1rem; }

.q-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: var(--shadow);
  animation: rise .5s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-card { animation: none; } }

.q-head { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .85rem; }
.q-num {
  flex: none;
  min-width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal), var(--aqua));
  color: #fff; font-weight: 700; font-size: .85rem;
  border-radius: 10px;
}
.q-label { font-weight: 650; font-size: 1.05rem; margin: .15rem 0 0; }
.q-hint { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.q-req { color: var(--aqua); margin-left: .15rem; }

/* text inputs */
.q-input, .q-textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--sand);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .7rem .85rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.q-textarea { resize: vertical; min-height: 92px; }
.q-input:focus, .q-textarea:focus {
  outline: none;
  border-color: var(--aqua);
  background: var(--card);
  box-shadow: 0 0 0 4px rgba(20,184,196,.15);
}
.q-input::placeholder, .q-textarea::placeholder { color: var(--muted); opacity: .7; }

/* multi/single choice */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .5rem; }
.opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--sand);
  cursor: pointer;
  transition: .15s;
  font-size: .95rem;
  user-select: none;
}
.opt:hover { border-color: var(--aqua); }
.opt input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--teal); cursor: pointer; margin: 0; }
.opt:has(input:checked) {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--aqua) 14%, var(--card));
  box-shadow: 0 0 0 1px var(--teal) inset;
}
.opt-other-input {
  margin-top: .55rem;
  width: 100%;
  font: inherit; color: var(--ink);
  background: var(--sand);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: .6rem .75rem;
}
.opt-other-input:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(20,184,196,.15); }

/* conditional follow-up */
.follow { margin-top: .75rem; }
.follow[hidden] { display: none; }

/* contacts group */
.reach-grid { display: grid; gap: .7rem; }

/* invalid state */
.q-card.invalid .q-input,
.q-card.invalid .q-textarea,
.q-card.invalid .opt-grid { border-color: var(--error); }
.q-card.invalid .opt-grid { border: 0; }
.field-err { color: var(--error); font-size: .82rem; margin: .45rem 0 0; }

/* ---- submit ---- */
.submit-row { margin-top: 1.75rem; text-align: center; }
.btn-submit {
  font: inherit; font-weight: 700; font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--aqua));
  border: 0;
  border-radius: 14px;
  padding: .95rem 2.4rem;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(13,122,140,.7);
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(13,122,140,.8); }
.btn-submit:active { transform: translateY(0); }
.btn-submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-error { color: var(--error); margin: .9rem 0 0; font-weight: 600; }

/* ---- closing ---- */
.closing {
  margin-top: 2.5rem;
  padding: 1.5rem 1.5rem;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(13,122,140,.10), rgba(20,184,196,.10));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
}

/* honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- success overlay ---- */
.success-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(6,42,53,.55);
  backdrop-filter: blur(6px);
  animation: fade .3s both;
}
/* the [hidden] attribute must win over display:flex above */
.success-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.success-card {
  background: var(--card);
  border-radius: 22px;
  padding: 2.5rem 2rem;
  max-width: 26rem;
  text-align: center;
  box-shadow: var(--shadow);
  animation: pop .4s both;
}
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.success-icon { font-size: 3.5rem; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .success-icon { animation: none; } }
.success-card { position: relative; }
.success-card h2 { margin: .75rem 0 .5rem; font-size: 1.5rem; }
.success-card p { color: var(--muted); margin: 0; }
.success-close {
  position: absolute; top: .6rem; right: .75rem;
  width: 2rem; height: 2rem;
  border: 0; background: transparent;
  color: var(--muted); font-size: 1.6rem; line-height: 1;
  cursor: pointer; border-radius: 8px;
  transition: .15s;
}
.success-close:hover { background: var(--sand); color: var(--ink); }

@media (max-width: 480px) {
  .page { padding: 1rem 1rem 3rem; }
  .q-card { padding: 1.1rem 1rem 1.2rem; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
}