:root {
  --bg-0:#060A0E; --bg-1:#0B1017; --bg-2:#10181F;
  --bg-card:#111A23; --bg-card-hover:#162030;
  --teal:#00C9A7; --teal-dim:rgba(0,201,167,0.12); --teal-border:rgba(0,201,167,0.28);
  --red:#E84545; --red-dim:rgba(232,69,69,0.10); --amber:#F5A623;
  --text-1:#E2EBF2; --text-2:#8CA0B3; --text-3:#4A5E70;
  --border:rgba(255,255,255,0.055); --border-teal:rgba(0,201,167,0.22);
  --radius:12px; --radius-lg:20px;
  --shadow:0 4px 24px rgba(0,0,0,0.4); --shadow-teal:0 0 40px rgba(0,201,167,0.08);
  --font-d:'Syne',sans-serif; --font-b:'Outfit',sans-serif; --font-m:'JetBrains Mono',monospace;
  --max:1160px; --nav-h:84px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg-0); color:var(--text-1);
  font-family:var(--font-b); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.assessment-page { min-height:100vh; display:flex; flex-direction:column; }

/* Assessment sits below the site's real nav */
.assessment-page {
  padding-top: calc(var(--nav-h, 84px) + 40px);
  padding-bottom: 0;
  min-height: calc(100vh - 400px); /* leave room for footer */
}

.assessment-body {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2rem 1.5rem; max-width:680px; margin:0 auto; width:100%;
  position:relative;
}
.assessment-body::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 70% 40%,rgba(0,201,167,0.04) 0%,transparent 70%);
}

/* Intro */
.intro { text-align:center; animation:fadeIn 0.6s ease; position:relative; }
.intro h1 {
  font-family:var(--font-d); font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:800; line-height:1.15; color:var(--text-1); margin-bottom:1.25rem;
}
.intro p {
  color:var(--text-2); font-size:1rem; line-height:1.75;
  max-width:480px; margin:0 auto 2rem;
}
.intro .start-btn {
  background:var(--teal); color:#060A0E; border:none;
  padding:14px 36px; font-family:var(--font-b); font-weight:600;
  font-size:0.95rem; border-radius:8px; cursor:pointer;
  transition:all 0.22s ease;
}
.intro .start-btn:hover {
  background:#00e8c2; transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,201,167,0.3);
}
.intro .disclaimer {
  font-family:var(--font-m); font-size:0.72rem;
  letter-spacing:0.04em; color:var(--text-3); margin-top:1.5rem;
}

/* Chat */
.chat-container {
  width:100%; display:none; flex-direction:column; gap:1rem;
  animation:fadeIn 0.4s ease; position:relative;
}
.chat-container.active { display:flex; }

.messages {
  display:flex; flex-direction:column; gap:0.75rem;
  max-height:55vh; overflow-y:auto; padding:0.5rem 0;
  scroll-behavior:smooth;
}
.messages::-webkit-scrollbar { width:4px; }
.messages::-webkit-scrollbar-track { background:transparent; }
.messages::-webkit-scrollbar-thumb { background:var(--text-3); border-radius:4px; }

.message {
  max-width:88%; padding:0.875rem 1.125rem;
  border-radius:var(--radius); font-size:0.938rem; line-height:1.6;
  animation:slideUp 0.3s ease;
}
.message.assistant {
  background:var(--bg-card); border:1px solid var(--border);
  align-self:flex-start; border-bottom-left-radius:4px; color:var(--text-1);
}
.message.user {
  background:var(--teal-dim); border:1px solid var(--teal-border);
  color:var(--teal); align-self:flex-end; border-bottom-right-radius:4px;
}

.typing-indicator {
  display:none; align-self:flex-start;
  padding:0.75rem 1rem; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius);
  border-bottom-left-radius:4px;
}
.typing-indicator span {
  display:inline-block; width:7px; height:7px;
  background:var(--text-3); border-radius:50%;
  margin:0 2px; animation:bounce 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay:0s; }
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }

/* Input */
.input-area { display:flex; gap:0.5rem; align-items:flex-end; }
.input-area textarea {
  flex:1; padding:0.75rem 1rem;
  background:var(--bg-card); border:1.5px solid var(--border);
  border-radius:8px; font-family:var(--font-b); font-size:0.938rem;
  color:var(--text-1); resize:none; min-height:48px; max-height:120px;
  outline:none; transition:border-color 0.2s;
}
.input-area textarea::placeholder { color:var(--text-3); }
.input-area textarea:focus { border-color:var(--teal-border); }

.input-area button {
  background:var(--teal); color:#060A0E; border:none;
  width:48px; height:48px; border-radius:8px; cursor:pointer;
  font-size:1.25rem; font-weight:700; transition:all 0.2s; flex-shrink:0;
}
.input-area button:hover { background:#00e8c2; }
.input-area button:disabled { opacity:0.4; cursor:not-allowed; }

/* Results */
.results {
  display:none; text-align:center; animation:fadeIn 0.5s ease; position:relative;
}
.results.active { display:block; }

.results h2 {
  font-family:var(--font-d); font-size:1.5rem; font-weight:700;
  color:var(--text-1); margin-bottom:0.5rem;
}

.results .summary {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  text-align:left; margin:1.5rem 0; font-size:0.938rem;
  line-height:1.7; color:var(--text-2);
}
.results .summary p { margin-bottom:0.75rem; color:var(--text-2); }
.results .summary p:last-child { margin-bottom:0; }
.results .summary strong { color:var(--teal); }

.results h3 {
  font-family:var(--font-d); font-size:1.125rem;
  color:var(--text-1); margin:1.5rem 0 0.5rem;
}

/* Lead Form */
.lead-form {
  display:none; background:var(--bg-card);
  border:1.5px solid var(--teal-border); border-radius:var(--radius-lg);
  padding:1.5rem; text-align:left; margin-top:1rem; animation:fadeIn 0.4s ease;
}
.lead-form.active { display:block; }
.lead-form h3 {
  font-family:var(--font-d); margin:0 0 1rem; font-size:1.125rem; color:var(--text-1);
}
.lead-form .field { margin-bottom:1rem; }
.lead-form label {
  display:block; font-family:var(--font-m); font-size:0.72rem;
  font-weight:500; letter-spacing:0.08em; color:var(--text-3);
  text-transform:uppercase; margin-bottom:0.375rem;
}
.lead-form input, .lead-form select {
  width:100%; padding:0.625rem 0.875rem;
  background:var(--bg-2); border:1.5px solid var(--border);
  border-radius:8px; font-family:var(--font-b); font-size:0.938rem;
  color:var(--text-1); outline:none; transition:border-color 0.2s;
}
.lead-form input::placeholder { color:var(--text-3); }
.lead-form input:focus, .lead-form select:focus { border-color:var(--teal-border); }
.lead-form select option { background:var(--bg-1); color:var(--text-1); }

.lead-form .submit-btn {
  width:100%; background:var(--teal); color:#060A0E;
  border:none; padding:0.75rem; font-family:var(--font-b);
  font-size:1rem; font-weight:600; border-radius:8px;
  cursor:pointer; margin-top:0.5rem; transition:all 0.22s;
}
.lead-form .submit-btn:hover {
  background:#00e8c2; transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,201,167,0.3);
}
.lead-form .submit-btn:disabled { opacity:0.4; transform:none; box-shadow:none; }
.lead-form .success-msg {
  text-align:center; padding:1.5rem;
  color:var(--teal); font-weight:600; font-size:1rem;
}

/* CTA buttons */
.cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--teal); color:#060A0E;
  padding:13px 28px; border-radius:8px;
  font-family:var(--font-b); font-weight:600; font-size:0.95rem;
  cursor:pointer; border:none; transition:all 0.22s;
}
.cta-btn:hover {
  background:#00e8c2; transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,201,167,0.3);
}

/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

@media(max-width:768px) {
  .assessment-header { padding:0 1rem; height:56px; }
  .assessment-header .subtitle { display:none; }
  .intro h1 { font-size:1.375rem; }
  .assessment-body { padding:1.5rem 1rem; }
  .messages { max-height:50vh; }
}