@keyframes pulse-slow {
  0%, 100% { opacity:1 }
  50% { opacity:.4 }
}

@keyframes spin {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

@keyframes slideIn {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* ─── NAV ────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,12,15,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--clr-border);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}

.logo{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1.15rem;
  color:var(--clr-head);
  letter-spacing:-.02em;
}

.logo span{
  color:var(--clr-accent);
}

.logo img{
  height:56px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  gap:28px;
  align-items:center;
}

.nav-links a{
  font-size:.875rem;
  color:var(--clr-text);
  transition:color .2s;
}

.nav-links a:hover{
  color:var(--clr-head);
}

.nav-cta{
  background:var(--clr-accent);
  color:#fff;
  font-weight:600;
  font-size:.82rem;
  padding:8px 20px;
  border-radius:8px;
  transition:opacity .2s,transform .15s;
}

.nav-cta:hover{
  opacity:.85;
  transform:translateY(-1px);
}

/* ─── HERO SECTION ───────────────────────────────────── */
.qa-hero {
  position:relative;
  padding:80px 0;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(34,197,94,.08) 0%,rgba(10,12,15,0) 100%);
}

.qa-hero::before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.15) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
}

.qa-hero-content {
  position:relative;
  z-index:1;
  max-width:800px;
  margin:0 auto;
  padding:0 24px;
}

.qa-hero-label {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#000;
  border:1px solid rgba(34,197,94,.3);
  border-radius:50px;
  padding:6px 14px;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--clr-accent);
  margin-bottom:32px;
}

.qa-hero-label .dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--clr-accent);
  animation:pulse-slow 3s infinite;
}

.qa-hero h1 {
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,3.2rem);
  color:var(--clr-head);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.qa-hero h1 em {
  color:var(--clr-accent);
  font-style:italic;
}

.qa-hero p {
  font-size:.95rem;
  color:var(--clr-text);
  line-height:1.7;
  max-width:700px;
  margin:0 auto;
}

/* ─── FORM CONTAINER ──────────────────────────────────── */
.qa-container {
  max-width:700px;
  margin:60px auto;
  padding:0 24px;
}

.qa-box {
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:60px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.qa-box::before {
  content:'';
  position:absolute;
  top:-100px;
  right:-80px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,119,181,.08),transparent 70%);
  pointer-events:none;
  z-index:0;
}

.qa-box::after {
  content:'';
  position:absolute;
  bottom:-80px;
  left:-60px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,168,32,.07),transparent 70%);
  pointer-events:none;
  z-index:0;
}

.qa-content {
  position:relative;
  z-index:1;
}

.qa-icon {
  width:64px;
  height:64px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.3);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  margin:0 auto 24px;
}

.qa-label {
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--clr-accent);
  margin-bottom:16px;
}

.qa-heading {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  color:var(--clr-head);
  line-height:1.2;
  margin-bottom:12px;
}

.qa-heading em {
  color:var(--clr-accent);
  font-style:italic;
}

.qa-subtitle {
  color:var(--clr-text);
  font-size:.95rem;
  line-height:1.7;
  margin-bottom:40px;
}

/* ─── FORM STYLING ────────────────────────────────────── */
.qa-form {
  text-align:left;
}

.qa-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}

.qa-row.full {
  grid-template-columns:1fr;
}

.qa-field {
  position:relative;
}

.qa-label-text {
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--clr-text);
  margin-bottom:8px;
  display:block;
}

.qa-field input,
.qa-field select,
.qa-field textarea {
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);
  border-radius:10px;
  padding:14px 16px;
  color:var(--clr-text);
  font-family:var(--font-body);
  font-size:.9rem;
  transition:border-color .2s,background .2s;
}

.qa-field input::placeholder,
.qa-field select::placeholder,
.qa-field textarea::placeholder {
  color:rgba(200,205,216,.5);
}

.qa-field input:focus,
.qa-field select:focus,
.qa-field textarea:focus {
  outline:none;
  border-color:var(--clr-accent);
  background:rgba(255,255,255,.08);
}

.qa-field.icon-before input,
.qa-field.icon-before select {
  padding-left:42px;
}

.qa-field-icon {
  position:absolute;
  left:16px;
  top:32px;
  font-size:1.1rem;
  color:var(--clr-text);
  opacity:.6;
  pointer-events:none;
}

/* ─── CHECKBOXES ──────────────────────────────────────── */
.qa-checkbox-group {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.qa-checkbox {
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}

.qa-checkbox input {
  width:20px;
  height:20px;
  cursor:pointer;
  appearance:none;
  background:rgba(255,255,255,.05);
  border:1px solid var(--clr-border);
  border-radius:4px;
  transition:all .2s;
}

.qa-checkbox input:checked {
  background:var(--clr-accent);
  border-color:var(--clr-accent);
}

.qa-checkbox label {
  cursor:pointer;
  font-size:.9rem;
  color:var(--clr-text);
}

/* ─── DROPDOWN ────────────────────────────────────────── */
.qa-dropdown {
  position:relative;
}

.qa-dropdown select {
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23c8cdd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-color:rgba(255,255,255,.05);
  padding-right:40px;
  color:#fff;
}

.qa-dropdown select option {
  background:#000;
  color:#fff;
}

.qa-field textarea {
  min-height:140px;
  resize:vertical;
}

/* ─── BUTTON ──────────────────────────────────────────── */
.qa-button {
  width:100%;
  background:var(--clr-head);
  color:#000;
  font-weight:600;
  font-size:.95rem;
  padding:16px 24px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:24px;
  position:relative;
}

.qa-button:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(240,242,245,.2);
}

.qa-button svg {
  width:20px;
  height:20px;
}

.qa-button.loading {
  opacity:.7;
  pointer-events:none;
}

.qa-button.loading svg {
  animation:spin .8s linear infinite;
}

/* ─── SUCCESS MESSAGE ─────────────────────────────────── */
.qa-success {
  display:none;
  text-align:center;
  padding:40px 24px;
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.3);
  border-radius:var(--radius-lg);
  margin-top:24px;
}

.qa-success.show {
  display:block;
  animation:slideIn .4s ease-out;
}

.qa-success-icon {
  width:56px;
  height:56px;
  background:var(--clr-accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  font-size:1.8rem;
}

.qa-success h2 {
  color:var(--clr-head);
  font-family:var(--font-display);
  font-size:1.5rem;
  margin-bottom:8px;
}

.qa-success p {
  color:var(--clr-text);
  font-size:.95rem;
  line-height:1.6;
}

.back-home {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--clr-text);
  font-size:.85rem;
  transition:color .2s;
}

.back-home:hover {
  color:var(--clr-head);
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:640px) {
  .qa-hero {
    padding:60px 0;
  }

  .qa-hero h1 {
    font-size:clamp(1.8rem,4vw,2.4rem);
  }

  nav {
    border-bottom:1px solid var(--clr-border);
  }

  .nav-links {
    display:none;
  }

  .logo img {
    height:45px;
  }

  .qa-box {
    padding:40px 24px;
  }

  .qa-row {
    grid-template-columns:1fr;
    gap:20px;
  }

  .qa-heading {
    font-size:clamp(1.5rem,3vw,2rem);
  }

  .qa-checkbox-group {
    grid-template-columns:1fr;
  }
}