/* =========================================
   HAVILAHTECH AI BUSINESS KNOWLEDGE FORM
   ========================================= */

:root {

  --navy: #0b1736;
  --blue: #1d4ed8;
  --cyan: #06b6d4;

  --ink: #14213d;
  --muted: #667085;

  --line: #e6eaf0;

  --white: #ffffff;

  --danger: #c62828;
  --success: #16803c;

}


/* RESET */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    linear-gradient(
      180deg,
      #f8faff 0%,
      #f5f7fb 100%
    );

  color: var(--ink);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}


button,
input,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


/* MAIN APP */

.app-shell {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}


/* TOP BAR */

.topbar {

  min-height: 72px;

  background: rgba(255,255,255,0.94);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 5vw;

  position: sticky;

  top: 0;

  z-index: 20;

}


.brand {

  font-weight: 800;

  color: var(--navy);

  letter-spacing: -0.02em;

}


.save-note {

  font-size: 12px;

  color: var(--muted);

}


/* MAIN */

main {

  width: min(760px, 92vw);

  margin: 0 auto;

  padding: 48px 0 64px;

  flex: 1;

}


/* SCREENS */

.screen {

  display: none;

  animation: fadeIn 0.35s ease;

}


.screen.active {
  display: block;
}


@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: none;

  }

}


/* WELCOME */

.welcome {

  text-align: center;

  padding: 55px 18px;

}


.eyebrow {

  display: inline-flex;

  padding: 7px 12px;

  border-radius: 999px;

  background: #eaf0ff;

  color: var(--blue);

  font-weight: 700;

  font-size: 12px;

  margin-bottom: 18px;

}


h1 {

  font-size: clamp(34px, 6vw, 56px);

  line-height: 1.04;

  letter-spacing: -0.055em;

  margin: 0 auto 18px;

  color: var(--navy);

  max-width: 680px;

}


h2 {

  font-size: clamp(27px, 4vw, 38px);

  letter-spacing: -0.04em;

  margin: 8px 0 10px;

  color: var(--navy);

}


h3 {

  margin: 0 0 8px;

  color: var(--navy);

}


.lead {

  font-size: 17px;

  line-height: 1.7;

  color: var(--muted);

  max-width: 620px;

  margin: 0 auto 25px;

}


.time-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: white;

  border: 1px solid var(--line);

  padding: 10px 14px;

  border-radius: 999px;

  color: var(--muted);

  font-size: 13px;

  margin-bottom: 30px;

}


/* BUTTONS */

.primary {

  border: 0;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--blue)
    );

  color: white;

  padding: 15px 22px;

  font-weight: 800;

  box-shadow:
    0 10px 24px
    rgba(29,78,216,0.18);

  transition: 0.2s;

}


.primary:hover {

  transform: translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(29,78,216,0.24);

}


.secondary {

  border: 1px solid var(--line);

  background: white;

  color: var(--ink);

  border-radius: 12px;

  padding: 13px 18px;

  font-weight: 700;

}


.secondary:hover {

  border-color: #cbd5e1;

  background: #f8fafc;

}


/* PROGRESS */

.progress-wrap {

  margin-bottom: 32px;

}


.progress-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 9px;

  font-size: 12px;

  font-weight: 800;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.08em;

}


.progress-track {

  height: 7px;

  background: #e9edf4;

  border-radius: 999px;

  overflow: hidden;

}


.progress-bar {

  height: 100%;

  width: 16.66%;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--cyan)
    );

  border-radius: 999px;

  transition: width 0.35s ease;

}


/* CARD */

.card {

  background: white;

  border: 1px solid var(--line);

  border-radius: 24px;

  padding: 30px;

  box-shadow:
    0 18px 50px
    rgba(20,33,61,0.07);

}


.step-intro {

  margin-bottom: 25px;

}


.step-intro p {

  margin: 0;

  color: var(--muted);

  line-height: 1.6;

}


/* FORM */

.field {

  margin: 22px 0;

}


label {

  display: block;

  font-weight: 750;

  color: var(--navy);

  margin-bottom: 8px;

}


.required {

  color: var(--blue);

}


.helper {

  font-size: 12px;

  color: var(--muted);

  margin: 0 0 9px;

  line-height: 1.5;

}


input,
textarea {

  width: 100%;

  border: 1px solid #d8dee9;

  background: #fff;

  border-radius: 13px;

  padding: 14px 15px;

  color: var(--ink);

  outline: none;

  transition: 0.18s;

}


input:focus,
textarea:focus {

  border-color: var(--blue);

  box-shadow:
    0 0 0 4px
    rgba(29,78,216,0.09);

}


textarea {

  min-height: 108px;

  resize: vertical;

  line-height: 1.55;

}


/* ERROR */

.field.error input,
.field.error textarea {

  border-color: #e05b5b;

  box-shadow:
    0 0 0 3px
    rgba(198,40,40,0.08);

}


.error-text {

  display: none;

  color: var(--danger);

  font-size: 12px;

  margin-top: 6px;

}


.field.error .error-text {

  display: block;

}


/* NAVIGATION */

.nav {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 30px;

}


/* CHOICES */

.choice-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

}


.choice {

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 15px;

  background: #fff;

  font-weight: 700;

  color: var(--ink);

  text-align: left;

  transition: 0.18s;

}


.choice:hover {

  border-color: #b9c6df;

}


.choice.selected {

  border-color: var(--blue);

  background: #eef4ff;

  box-shadow:
    0 0 0 2px
    rgba(29,78,216,0.08);

}


/* REVIEW */

.review-list {

  display: grid;

  gap: 12px;

}


.review-section {

  border: 1px solid var(--line);

  border-radius: 16px;

  padding: 18px;

  background: #fbfcfe;

}


.review-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}


.edit-btn {

  border: 0;

  background: #eef4ff;

  color: var(--blue);

  font-size: 12px;

  font-weight: 800;

  padding: 7px 10px;

  border-radius: 9px;

}


.review-item {

  margin: 9px 0;

  font-size: 14px;

  line-height: 1.5;

}


.review-item strong {

  display: block;

  color: var(--muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 2px;

}


/* RESULT */

.success {

  text-align: center;

  margin-bottom: 24px;

}


.success-icon {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: #e9f8ef;

  color: var(--success);

  display: grid;

  place-items: center;

  font-size: 28px;

  margin: 0 auto 12px;

}


/* KNOWLEDGE SHEET */

.sheet {

  background: white;

  border: 1px solid var(--line);

  border-radius: 18px;

  padding: 24px;

  white-space: pre-wrap;

  line-height: 1.65;

  font-size: 14px;

  box-shadow:
    0 12px 35px
    rgba(20,33,61,0.05);

  max-height: 560px;

  overflow: auto;

}


/* RESULT BUTTONS */

.result-actions {

  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  gap: 10px;

  margin: 20px 0;

}


/* TOOLKIT */

.toolkit {

  background:
    linear-gradient(
      135deg,
      #0b1736,
      #173f91
    );

  color: white;

  border-radius: 18px;

  padding: 20px;

  margin-top: 18px;

}


.toolkit h3 {
  color: white;
}


.toolkit p {
  color: #dce7ff;
}


/* NOTICE */

.notice {

  font-size: 12px;

  color: var(--muted);

  line-height: 1.55;

  margin-top: 16px;

}


/* RESET */

.reset-wrap {

  text-align: center;

  margin-top: 25px;

}


/* FOOTER */

footer {

  text-align: center;

  padding: 25px;

  color: #8992a3;

  font-size: 12px;

}


/* MOBILE */

@media (max-width: 600px) {

  .topbar {

    min-height: 62px;

    padding: 0 4vw;

  }


  .save-note {

    display: none;

  }


  main {

    padding:
      28px 0 45px;

  }


  .welcome {

    padding:
      35px 8px;

  }


  .card {

    padding: 21px;

    border-radius: 19px;

  }


  .choice-grid,
  .result-actions {

    grid-template-columns: 1fr;

  }


  h1 {

    font-size: 39px;

  }


  .lead {

    font-size: 15px;

  }


  .nav button {

    flex: 1;

  }

}


/* PRINT */

@media print {

  body {

    background: white;

  }


  .topbar,
  footer,
  .result-actions,
  .toolkit,
  .notice,
  #resetBtn {

    display: none !important;

  }


  main {

    width: 100%;

    padding: 0;

  }


  .screen {

    display: none !important;

  }


  .screen#resultScreen {

    display: block !important;

  }


  .sheet {

    max-height: none;

    overflow: visible;

    border: 0;

    box-shadow: none;

    padding: 0;

    font-size: 11pt;

  }

}