:root {
  --sans: 'Inter', sans-serif;
  --serif: 'Fraunces', serif;
  --mono: 'JetBrains Mono', monospace;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 550;
}

.founding-status .status-dot {
  background: #ff5b5b;
  box-shadow: 0 0 0 4px rgba(255, 91, 91, 0.12), 0 0 12px rgba(255, 91, 91, 0.9);
  animation: founding-pulse 1.35s ease-in-out infinite;
}

@keyframes founding-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.7); }
}

.score-engine {
  padding: 92px 0;
  background: linear-gradient(180deg, #0d1419, #0a1015);
}

.score-engine::before { content: none; }

.score-engine-panel {
  overflow: hidden;
  border: 1px solid rgba(142, 203, 207, 0.22);
  border-radius: 16px;
  background: #121a20;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.04);
}

.score-engine-bar {
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 29px;
  border-bottom: 1px solid rgba(193, 230, 232, 0.08);
  color: #d3e2e3;
  font: 9px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.window-controls { display: flex; gap: 8px; }
.window-controls i { width: 10px; height: 10px; border-radius: 50%; background: #3c464d; }
.score-engine-bar > b { justify-self: end; font: inherit; }
.score-engine-bar > b i { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(94, 234, 212, 0.75); }

.score-engine-body { padding: 49px 29px 24px; text-align: center; }
.score-engine-body > .eyebrow { color: #71898f; }
.score-engine-body h2 { margin: 23px 0 18px; color: #f4f8f7; font-size: clamp(43px, 5.2vw, 64px); line-height: 0.98; letter-spacing: -0.055em; }
.score-engine-body h2 em { color: inherit; font-style: italic; font-weight: 450; }
.score-engine-body h2 sup { position: relative; top: -0.72em; margin-left: 4px; font: 500 13px var(--mono); letter-spacing: 0; }
.score-engine-intro { max-width: 820px; margin: 0 auto; color: #9baab0; font-size: 15px; line-height: 1.5; }

.score-engine-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; text-align: left; }
.score-engine-cards article { min-height: 223px; padding: 21px 20px; border: 1px solid rgba(163, 210, 213, 0.15); border-radius: 14px; background: linear-gradient(145deg, rgba(8, 21, 27, 0.6), rgba(16, 26, 32, 0.82)); }
.score-card-heading { display: flex; justify-content: space-between; gap: 12px; }
.score-card-heading h3 { margin: 0 0 5px; color: #f0f5f4; font-family: var(--serif); font-size: 20px; font-weight: 550; letter-spacing: -0.035em; }
.score-card-heading span { display: block; color: #84959b; font: 8px var(--mono); letter-spacing: 0.15em; text-transform: uppercase; }
.score-card-heading > b { align-self: start; padding: 5px 8px; border: 1px solid rgba(187, 220, 221, 0.28); border-radius: 999px; color: #bdd2d3; font: 8px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.score-value { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.score-value strong { color: #f5f9f8; font-family: var(--serif); font-size: 58px; font-weight: 450; line-height: 0.9; letter-spacing: -0.075em; }
.score-value span { color: #a6b5b9; font: 10px var(--sans); }
.score-meter { height: 4px; margin-top: 17px; overflow: hidden; border-radius: 99px; background: rgba(159, 188, 193, 0.12); }
.score-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #397a87, var(--aqua)); }
.score-engine-cards article > p { margin: 17px 0 0; color: #b5c3c6; font: 12px/1.55 var(--mono); }
.score-disclaimer { margin: 20px 0 0; color: #718288; font-size: 10px; }

.price span {
  margin-left: 8px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .score-engine { padding: 70px 0; }
  .score-engine-panel { border-radius: 12px; }
  .score-engine-bar { height: 42px; padding: 0 16px; font-size: 7px; letter-spacing: 0.12em; }
  .score-engine-bar > span { display: none; }
  .score-engine-bar { grid-template-columns: 1fr auto; }
  .score-engine-body { padding: 38px 16px 20px; }
  .score-engine-intro { font-size: 14px; }
  .score-engine-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .score-engine-cards article { min-height: 0; padding: 18px; }
}

.brand { width: 82px; height: 43px; }
.brand img { width: 82px; left: 0; top: 0; }
.footer-brand { width: 72px; height: 38px; }
.footer-brand img { width: 72px; left: 0; top: 0; }

/* Clean, dimensional grid in place of the previous grain overlay. */
.background-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(119, 218, 222, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 218, 222, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(119, 218, 222, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 218, 222, 0.075) 1px, transparent 1px);
  background-position: center top;
  background-size: 48px 48px, 48px 48px, 240px 240px, 240px 240px;
  -webkit-mask-image: radial-gradient(ellipse 105% 82% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 105% 82% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 100%);
}

body > main,
body > .site-footer {
  position: relative;
  z-index: 1;
}

.final-cta {
  padding-bottom: 32px;
}

.social-section {
  padding-bottom: 105px;
}

.social-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) 1.18fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  padding: 36px;
  border: 1px solid rgba(126, 221, 222, 0.22);
  border-radius: 16px;
  background: linear-gradient(125deg, rgba(13, 42, 51, 0.92), rgba(15, 28, 34, 0.96) 57%, rgba(11, 21, 27, 0.95));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
}

.social-panel::after {
  content: '';
  position: absolute;
  width: 310px;
  height: 310px;
  right: -130px;
  top: -180px;
  border-radius: 50%;
  background: rgba(72, 212, 223, 0.12);
  filter: blur(42px);
  pointer-events: none;
}

.social-copy,
.social-actions {
  position: relative;
  z-index: 1;
}

.social-copy h2 {
  margin: 14px 0 13px;
  font-size: clamp(33px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.social-copy p {
  max-width: 360px;
  margin: 0;
  color: #9eafb4;
  font-size: 13px;
  line-height: 1.65;
}

.social-actions {
  display: grid;
  gap: 9px;
}

.social-button {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 11px 14px;
  border: 1px solid rgba(196, 231, 232, 0.16);
  border-radius: 10px;
  background: rgba(4, 15, 20, 0.32);
  color: #e6f0f0;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.social-button:hover {
  transform: translateX(4px);
  border-color: rgba(103, 222, 221, 0.56);
  background: rgba(72, 212, 223, 0.09);
}

.social-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(123, 230, 228, 0.3);
  border-radius: 9px;
  background: rgba(72, 212, 223, 0.09);
  color: #92e8e6;
  font: 17px var(--sans);
}

.social-button small,
.social-button strong {
  display: block;
}

.social-button small {
  color: #7f989e;
  font: 7px var(--mono);
  letter-spacing: 0.13em;
}

.social-button strong {
  margin-top: 4px;
  font-size: 12px;
}

.social-button > b {
  color: #83e2df;
  font-size: 17px;
  font-weight: 400;
}

/* Floating navigation with a layered, iOS-inspired glass finish. */
.site-header {
  position: sticky;
  top: 14px;
  width: calc(100% - 40px);
  max-width: 1160px;
  height: 64px;
  margin: 14px auto 0;
  padding: 0 12px 0 20px;
  border: 1px solid rgba(219, 244, 245, 0.2);
  border-radius: 19px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 34%, rgba(72, 212, 223, 0.07)),
    rgba(11, 21, 27, 0.7);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(4, 16, 21, 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(102deg, rgba(255, 255, 255, 0.09), transparent 28%, transparent 72%, rgba(113, 230, 232, 0.05));
  pointer-events: none;
}

.desktop-nav {
  gap: 25px;
  margin-left: 55px;
}

.desktop-nav a {
  color: rgba(224, 238, 240, 0.76);
}

.header-cta {
  min-height: 42px;
  border-radius: 12px;
  font-family: inherit;
}

.beta-scroll-button {
  cursor: pointer;
}

.mobile-nav {
  top: 74px;
  left: 0;
  right: 0;
  padding: 10px;
  border: 1px solid rgba(219, 244, 245, 0.2);
  border-radius: 16px;
  background: rgba(13, 25, 31, 0.84);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

.mobile-nav .beta-scroll-button {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8ce5e5;
  font: 700 13px var(--sans);
  text-align: left;
}

@media (max-width: 850px) {
  .social-panel { gap: 28px; padding: 28px; }

  .site-header {
    width: calc(100% - 32px);
    padding: 0 12px 0 18px;
  }

  .mobile-nav { top: 74px; }
}

@media (max-width: 620px) {
  .final-cta { padding-bottom: 24px; }
  .social-section { padding-bottom: 75px; }
  .social-panel { grid-template-columns: 1fr; gap: 24px; padding: 23px 18px; border-radius: 13px; }
  .social-copy h2 { font-size: 36px; }
  .social-button { min-height: 64px; }

  .site-header {
    top: 10px;
    width: calc(100% - 24px);
    height: 58px;
    margin-top: 10px;
    padding: 0 10px 0 16px;
    border-radius: 17px;
  }

  .mobile-nav { top: 67px; }
  .brand { width: 72px; height: 38px; }
  .brand img { width: 72px; left: 0; top: 0; }
  .footer-brand { width: 68px; height: 35px; }
  .footer-brand img { width: 68px; left: 0; top: 0; }
}