:root {
  --background: #fefaf6;
  --ink: #6b1f26;
  --body: #75484d;
  --accent: #6b1f26;
  --accent-secondary: #9a4a52;
  --accent-dark: #4e1319;
  --ring: rgba(154, 74, 82, 0.2);
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--background);
  font-family: "Alexandria", "Tahoma", sans-serif;
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  width: min(100% - 96px, 1300px);
  margin: 0 auto;
  padding-top: 58px;
}

.brand {
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.08em;
  text-decoration: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - 96px, 1300px);
  margin: clamp(6.25rem, 13vh, 9rem) auto 0;
  padding-right: clamp(0rem, 6vw, 5.75rem);
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.05em;
}

.hero__content > p:not(.success-message) {
  max-width: 700px;
  margin: 1.4rem 0 2.45rem;
  color: var(--body);
  font-size: clamp(1.05rem, 1.7vw, 1.48rem);
  font-weight: 500;
  line-height: 1.9;
}

.cta {
  min-width: 218px;
  padding: 1.18rem 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 15px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 16px 30px rgba(107, 31, 38, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.cta:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 20px 38px rgba(107, 31, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.cta:focus-visible { outline: 4px solid rgba(154, 74, 82, 0.28); outline-offset: 4px; }
.cta:active { transform: translateY(0); }

.hero__art { position: absolute; z-index: 1; inset: 0 auto 0 0; width: min(42vw, 650px); pointer-events: none; }

.orbit, .arc { position: absolute; display: block; border: 1.5px solid var(--ring); border-radius: 50%; }
.orbit--large { width: 760px; height: 760px; top: 10%; left: -420px; }
.orbit--medium { width: 600px; height: 600px; top: 20%; left: -335px; }
.orbit--small { width: 435px; height: 435px; top: 31%; left: -240px; }

.arc { border-width: 52px; border-color: rgba(154, 74, 82, 0.36); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(29deg); }
.arc--one { width: 560px; height: 560px; top: 24%; left: -295px; }
.arc--two { width: 365px; height: 365px; top: 39%; left: -195px; border-width: 45px; border-color: rgba(154, 74, 82, 0.68); border-bottom-color: transparent; border-left-color: transparent; }

.dot { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-secondary); box-shadow: 0 0 0 8px rgba(154, 74, 82, 0.08); }
.dot--one { top: 31%; left: 18%; }
.dot--two { top: 68%; left: 39%; width: 14px; height: 14px; }

.hero.is-active .dot { animation: pulse 900ms ease-out 1; }
@keyframes pulse { 50% { transform: scale(1.8); } }

@media (max-width: 820px) {
  .site-header, .hero__content { width: min(100% - 44px, 560px); }
  .site-header { padding-top: 34px; }
  .brand { font-size: 1.35rem; }
  .hero__content { margin-top: clamp(8.5rem, 20vh, 11rem); padding-right: 0; }
  h1 { max-width: 100%; font-size: clamp(2.2rem, 10vw, 3.25rem); line-height: 1.36; }
  .hero__content > p:not(.success-message) { margin: 1.15rem 0 2rem; font-size: 1rem; line-height: 2; }
  .cta { width: 100%; padding-block: 1.1rem; }
  .hero__art { inset: auto auto -170px -145px; width: 520px; height: 520px; opacity: 0.3; transform: scale(0.72); transform-origin: left bottom; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }