/* Dark, centered landing page inspired by the supplied reference. */
:root {
  --ink: #e7edf8;
  --muted: #929db3;
  --green: #8db6f5;
  --green-dark: #a5c6fb;
  --green-soft: #18243a;
  --line: rgba(157, 179, 216, 0.16);
  --paper: #101827;
  --background: #080b14;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  color: #e7edf8;
  overflow-y: hidden;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(69, 94, 146, 0.22), transparent 33rem),
    #080b14;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(164, 186, 224, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 186, 224, 0.055) 1px, transparent 1px);
  background-position: center top;
  background-size: 72px 72px;
  content: "";
  mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.8) 64%, transparent 100%);
  pointer-events: none;
}

.site-header,
.site-footer {
  border-color: rgba(164, 186, 224, 0.13);
}

.brand {
  color: #edf2fc;
}

.brand-mark {
  color: #0a1220;
  background: #a9c8fb;
  box-shadow: 0 0 24px rgba(139, 177, 242, 0.22);
}

.header-link {
  color: #a6b2c8;
}

.header-link:hover {
  color: #d6e4ff;
}

.hero {
  display: block;
  width: min(980px, calc(100% - 40px));
  min-height: 0;
  padding: clamp(92px, 13vh, 150px) 0 78px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 160, 235, 0.16), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 120, 200, 0.08), transparent 60%);
  border-radius: 24px;
}

.hero-copy {
  max-width: none;
}

.eyebrow {
  justify-content: center;
  margin-bottom: 24px;
  color: #94a2bd;
  font-size: 11px;
  letter-spacing: 1.8px;
}

.status-dot {
  background: #9dbdf3;
  box-shadow: 0 0 0 4px rgba(157, 189, 243, 0.12), 0 0 16px rgba(157, 189, 243, 0.55);
}

h1 {
  max-width: 980px;
  margin-inline: auto;
  color: #d9e6ff;
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 1.02;
}

h1 span {
  display: block;
  color: #a9c8fb;
}

.hero-subtitle {
  max-width: 520px;
  margin: 23px auto 32px;
  color: #a1aec6;
  font-size: 17px;
  line-height: 1.65;
}

.analyze-form {
  display: flex;
  align-items: center;
  max-width: 620px;
  gap: 10px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid rgba(160, 185, 229, 0.19);
  border-radius: 15px;
  background: rgba(15, 22, 37, 0.87);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.025);
  text-align: left;
  backdrop-filter: blur(16px);
}

.field {
  flex: 2 1 auto;
  min-width: 0;
}

.submit-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
}

.field label {
  color: #c3cde0;
  font-size: 11px;
}

.input-icon {
  color: #8291ac;
}

.input-wrap input {
  height: 47px;
  border-color: rgba(158, 181, 220, 0.17);
  border-radius: 8px;
  color: #edf2fc;
  background: rgba(6, 11, 21, 0.7);
  font-size: 12px;
}
 
.input-wrap input::placeholder {
  color: #68758e;
}

.input-wrap input:hover {
  border-color: rgba(163, 190, 238, 0.35);
}

.input-wrap input:focus {
  border-color: #99baf2;
  background: rgba(6, 11, 21, 0.9);
  box-shadow: 0 0 0 3px rgba(143, 177, 237, 0.12);
}

.submit-button {
  min-height: 48px;
  margin-top: 2px;
  border: 1px solid rgba(190, 213, 252, 0.34);
  border-radius: 8px;
  color: #0b1423;
  background: #a9c8fb;
  box-shadow: 0 7px 24px rgba(119, 159, 227, 0.16);
  font-size: 12px;
}

.submit-button:hover {
  color: #09111d;
  background: #c0d6fc;
  box-shadow: 0 9px 27px rgba(119, 159, 227, 0.24);
}

.submit-button:focus-visible,
a:focus-visible {
  outline-color: rgba(169, 200, 251, 0.65);
}

.form-note {
  color: #8794aa;
  font-size: 10px;
}

.form-note > span:first-child {
  color: #b3cefb;
}

.form-message {
  color: #f1a8a8;
}

.trust-note {
  justify-content: center;
  margin-top: 21px;
  color: #8794aa;
  font-size: 11px;
}

.trust-icon {
  color: #b7d1fb;
  background: rgba(153, 187, 242, 0.13);
}

.hero-visual {
  display: none;
}

.benefits {
  width: min(880px, calc(100% - 40px));
  gap: 14px;
  margin-bottom: 48px;
  padding: 17px 20px;
  border-color: rgba(160, 185, 229, 0.14);
  border-radius: 12px;
  background: rgba(15, 22, 37, 0.62);
}

.benefit-icon {
  color: #b2cbf4;
  background: rgba(151, 184, 239, 0.11);
}

.icon-score,
.icon-fix,
.icon-share {
  color: #b2cbf4;
  background: rgba(151, 184, 239, 0.11);
}

.benefit strong {
  color: #d0d9e9;
}

.benefit div span {
  color: #8794aa;
}

.footer-brand,
.site-footer > span {
  color: #8390a7;
}

/* Keep the report readable while matching the dark landing page. */
.results-modal {
  border-color: rgba(163, 187, 228, 0.2);
  color: #e7edf8;
  background: #0e1523;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.results-modal::backdrop {
  background: rgba(2, 5, 12, 0.78);
}

.modal-eyebrow {
  color: #a9c8fb;
}

.modal-header h2,
.modal-section-title {
  color: #e4ebf8;
}

.modal-site,
.result-description,
.result-list,
.post-text {
  color: #a0adc2;
}

.modal-icon-button,
.post-card {
  border-color: rgba(159, 182, 221, 0.17);
  color: #d3dced;
  background: #131d2e;
}

.modal-icon-button:hover {
  color: white;
  background: #1a2940;
}

.result-score {
  border-color: rgba(157, 189, 243, 0.16);
  background: linear-gradient(110deg, #142238, #111b2b);
}

.score-ring {
  border-color: #9dbdf3;
  border-right-color: #34445f;
  color: #c6d9fb;
}

.score-ring small,
.result-label,
.post-count,
.demo-disclaimer {
  color: #8392ab;
}

.result-score h3,
.post-card h3 {
  color: #dce6f7;
}

.summary-icon,
.fixes-icon,
.posts-icon,
.free-version-note span {
  color: #b9d0f7;
  background: rgba(151, 184, 239, 0.13);
}

.fixes-icon {
  color: #e2c38f;
  background: rgba(205, 163, 96, 0.13);
}

.posts-icon {
  color: #c6c1f4;
  background: rgba(159, 151, 225, 0.13);
}

.copy-button {
  border-color: rgba(159, 190, 242, 0.2);
  color: #c7d9f8;
  background: #19263a;
}

.copy-button:hover {
  border-color: rgba(159, 190, 242, 0.4);
  background: #20314c;
}

.free-version-note {
  border-color: rgba(159, 182, 221, 0.15);
  color: #aab6c9;
  background: #131d2e;
}

.premium-button {
  border: 1px solid rgba(190, 213, 252, 0.34);
  color: #0b1423;
  background: #a9c8fb;
}

.premium-button:hover {
  color: #09111d;
  background: #c0d6fc;
}

.premium-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.modal-close-link {
  color: #9aa8bd;
}

.modal-close-link:hover {
  color: #e1e9f6;
}

.modal-icon-button:focus-visible,
.copy-button:focus-visible,
.premium-button:focus-visible,
.modal-close-link:focus-visible {
  outline-color: rgba(169, 200, 251, 0.65);
}

@media (max-width: 700px) {
  .analyze-form {
    flex-direction: column;
  }

  .submit-button {
    width: 100%;
  }

  .hero {
    width: min(100% - 36px, 500px);
    padding-top: 82px;
    padding-bottom: 47px;
  }

  h1 {
    font-size: clamp(50px, 10vw, 66px);
    letter-spacing: -3.5px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .benefits {
    width: min(100% - 36px, 500px);
    gap: 14px;
    padding: 17px;
  }
}

@media (max-width: 380px) {
  .hero {
    width: calc(100% - 30px);
    padding-top: 65px;
  }

  .analyze-form {
    padding: 17px;
  }

  h1 {
    font-size: 54px;
    letter-spacing: -3px;
  }
}