* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.su-wrap {
  min-height: 100vh;
  background: #ffffff;
  background-image: url('https://singularitysouthafricasummit.org/wp-content/uploads/2026/03/Untitled-design-23.png');
  background-size: 40%;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Progress bar */
.progress-bar  { position: sticky; top: 0; height: 3px; background: rgba(0,0,0,0.08); z-index: 200; }
.progress-fill { height: 100%; background: linear-gradient(to right, #6633FF, #DA00F9); transition: width 0.55s ease; }

/* Navbar */
.navbar        { position: sticky; top: 3px; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; z-index: 100; }
.nav-logo      { height: 38px; object-fit: contain; }
.nav-dots      { display: flex; gap: 8px; align-items: center; }
.nav-dot       { height: 6px; border-radius: 3px; transition: all 0.3s; }
.nav-counter   { font-size: 12px; color: #777; }

/* Content */
.content { max-width: 660px; margin: 0 auto; padding: 36px 24px 100px; transition: opacity 0.26s ease, transform 0.26s ease; }

/* Section header */
.section-badge       { display: inline-flex; align-items: center; gap: 8px; background: rgba(102,51,255,0.07); border: 1px solid rgba(102,51,255,0.22); border-radius: 100px; padding: 5px 14px; margin-bottom: 16px; }
.section-badge-icon  { color: #6633FF; font-size: 13px; }
.section-badge-label { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; color: #6633FF; letter-spacing: 0.1em; text-transform: uppercase; }

.section-subtitle {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 4vw, 24px);
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 28px;
}

/* Gradient subtitle accent used on section label */
.section-badge-label {
  background: linear-gradient(to right, #6633FF, #DA00F9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Question card */
.qcard        { background: #ffffff; border: 1px solid rgba(102,51,255,0.13); border-radius: 14px; padding: 22px 24px; margin-bottom: 14px; box-shadow: 0 1px 8px rgba(102,51,255,0.06); }
.qcard.error  { border-color: rgba(218,0,249,0.45); }
.qlabel       { font-weight: 500; font-size: 14px; color: #1a1a1a; margin-bottom: 14px; line-height: 1.55; }
.qlabel .req  { color: #DA00F9; margin-left: 3px; }
.err-msg      { color: #9900bb; font-size: 12px; margin-bottom: 10px; font-style: italic; }

/* Text inputs */
.text-input       { width: 100%; background: #f8f7ff; border: 1.5px solid rgba(102,51,255,0.2); border-radius: 9px; padding: 12px 14px; color: #1a1a1a; font-size: 14px; outline: none; transition: border-color 0.2s, background 0.2s; }
.text-input:focus { border-color: #6633FF; background: #fff; }
textarea.text-input { resize: vertical; line-height: 1.65; }
::placeholder     { color: #b0a8cc; }

/* Radio options */
.radio-opt       { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(102,51,255,0.13); background: #fafafa; transition: all 0.18s; user-select: none; margin-bottom: 8px; }
.radio-opt:hover { border-color: rgba(102,51,255,0.35); background: rgba(102,51,255,0.04); }
.radio-opt.sel   { background: rgba(102,51,255,0.06); border-color: rgba(102,51,255,0.38); }
.radio-dot       { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; border: 2px solid #ccc; background: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.18s; }
.radio-dot.sel   { border-color: #6633FF; background: #6633FF; }
.radio-inner     { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.radio-text      { font-size: 13px; color: #444; line-height: 1.4; }
.radio-text.sel  { color: #1a1a1a; font-weight: 500; }

/* Tag / checkbox multi-select */
.tags-wrap    { display: flex; flex-wrap: wrap; gap: 9px; }
.tag          { padding: 8px 14px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(102,51,255,0.18); background: #fafafa; color: #444; font-size: 13px; transition: all 0.18s; user-select: none; }
.tag:hover    { border-color: rgba(102,51,255,0.38); background: rgba(102,51,255,0.05); }
.tag.sel      { background: rgba(102,51,255,0.08); border-color: rgba(102,51,255,0.45); color: #4400cc; font-weight: 500; }
.tag.disabled { opacity: 0.3; cursor: not-allowed; }

/* Checkbox list (multicheck) */
.check-opt       { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(102,51,255,0.13); background: #fafafa; transition: all 0.18s; user-select: none; margin-bottom: 8px; }
.check-opt:hover { border-color: rgba(218,0,249,0.3); background: rgba(218,0,249,0.03); }
.check-opt.sel   { background: rgba(218,0,249,0.05); border-color: rgba(218,0,249,0.38); }
.check-box       { width: 17px; height: 17px; border-radius: 4px; flex-shrink: 0; border: 2px solid #ccc; background: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.18s; font-size: 10px; color: #fff; font-weight: 700; }
.check-box.sel   { border-color: #DA00F9; background: #DA00F9; }
.check-text      { font-size: 13px; color: #444; line-height: 1.4; }
.check-text.sel  { color: #1a1a1a; font-weight: 500; }

/* Slider */
.slider-labels { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.slider-label  { font-size: 12px; color: #888; }
.slider-val    { font-size: 28px; font-weight: 900; background: linear-gradient(to right, #6633FF, #DA00F9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: 'Syne', sans-serif; line-height: 1; }
input[type=range]                         { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(102,51,255,0.15); outline: none; cursor: pointer; display: block; }
input[type=range]::-webkit-slider-thumb  { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6633FF, #DA00F9); cursor: pointer; }
input[type=range]::-moz-range-thumb      { width: 22px; height: 22px; border-radius: 50%; background: #6633FF; border: none; cursor: pointer; }
.slider-ticks         { display: flex; justify-content: space-between; margin-top: 8px; }
.slider-tick          { font-size: 10px; color: #ccc; transition: color 0.2s; }
.slider-tick.active   { color: #6633FF; font-weight: 700; }

/* Rating grid */
.grid-table                 { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 360px; }
.grid-table th              { text-align: center; font-size: 11px; color: #888; font-weight: 400; padding-bottom: 12px; }
.grid-table th:first-child  { text-align: left; }
.grid-table td              { padding: 10px 4px; text-align: center; }
.grid-table td:first-child  { text-align: left; font-size: 13px; color: #1a1a1a; padding-right: 12px; white-space: nowrap; }
.grid-dot     { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto; cursor: pointer; border: 2px solid #ddd; background: transparent; transition: all 0.18s; }
.grid-dot.sel { border-color: #6633FF; background: #6633FF; }

/* Navigation buttons */
.nav-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.time-est { text-align: center; font-size: 11px; color: #aaa; }

/* Misc */
.hint        { font-size: 11.5px; color: #999; margin-bottom: 12px; font-style: italic; }
.footer-text { text-align: center; margin-top: 28px; font-size: 11px; color: #ccc; letter-spacing: 0.04em; }

/* Completion screen */
.done-wrap {
  min-height: 100vh;
  background: #ffffff;
  background-image: url('https://singularitysouthafricasummit.org/wp-content/uploads/2026/03/Untitled-design-23.png');
  background-size: 40%;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}
.done-title { font-family: 'Syne', sans-serif; font-size: 34px; font-weight: 700; color: #1a1a1a; line-height: 1.3; margin-bottom: 18px; }
.done-sub   { font-size: 15px; color: #555; max-width: 440px; line-height: 1.75; margin-bottom: 44px; }
.done-card  { background: #fff; border: 1px solid rgba(102,51,255,0.15); border-radius: 14px; padding: 26px 36px; max-width: 360px; margin-bottom: 48px; box-shadow: 0 2px 16px rgba(102,51,255,0.08); text-align: left; }
.done-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
  background: linear-gradient(to right, #6633FF, #DA00F9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.done-card-text { font-size: 14px; color: #333; line-height: 1.7; }
.ring-wrap { position: relative; width: 100px; height: 100px; margin: 0 auto 40px; }
.ring { position: absolute; border-radius: 50%; border: 1.5px solid; }

@media (max-width: 480px) {
  .su-wrap { background-image: none; }
  .done-wrap { background-image: none; }
}