/* -----------------------------------------------------------------
   CX Strategies
   Monochrome. Atmospheric aurora backdrop. Prose over UI.
   Type: Inter Tight (300, 400, 500) · JetBrains Mono (400)
   -----------------------------------------------------------------
*/

:root {
  --bg:       #06070A;
  --bg-2:     #08090D;
  --fg:       #E6E4DE;
  --fg-mid:   #9A9CA3;
  --fg-dim:   #62646C;
  --fg-faint: #33353C;
  --rule:     #16181D;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--bg); color: var(--fg); }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }


/* -----------------------------------------------------------------
   Hero — atmospheric backdrop, single caption
*/
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 6vw, 88px) clamp(48px, 8vh, 96px);
  overflow: hidden;
  isolation: isolate;
}

/* Aurora — layered blurred radial gradients */
.hero__aurora {
  position: absolute;
  inset: -10%;
  z-index: -3;
  background:
    radial-gradient(ellipse 40% 30% at 22% 42%, rgba(80, 200, 175, 0.55), transparent 65%),
    radial-gradient(ellipse 38% 40% at 55% 22%, rgba(120, 100, 220, 0.48), transparent 68%),
    radial-gradient(ellipse 28% 24% at 78% 55%, rgba(60, 130, 220, 0.42), transparent 65%),
    radial-gradient(ellipse 24% 20% at 40% 78%, rgba(200, 120, 220, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% 88%, rgba(30, 40, 70, 0.6), transparent 80%),
    #05060A;
  filter: blur(58px) saturate(1.05);
  animation: drift 42s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1%, 0, 0) scale(1.02); }
  to   { transform: translate3d(2%,  1%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__aurora { animation: none; }
}

/* subtle vignette + bottom fade to solid bg */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 40%, rgba(6, 7, 10, 0.55) 100%),
    linear-gradient(180deg, transparent 55%, var(--bg) 100%);
  pointer-events: none;
}

/* grain */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__mast {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mid);
}
.hero__brand {
  color: var(--fg);
  font-weight: 400;
}
.hero__meta {
  display: inline-flex;
  gap: 20px;
}
.hero__meta span + span::before {
  content: "·";
  margin-right: 20px;
  color: var(--fg-faint);
}

.hero__spacer { flex: 1; }

.hero__caption {
  max-width: 780px;
}
.hero__caption-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mid);
  margin-bottom: 20px;
}
.hero__headline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 22ch;
}

/* -----------------------------------------------------------------
   Prose column
*/
.prose {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) clamp(28px, 6vw, 48px) clamp(64px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prose p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
}
.prose p.mid {
  color: var(--fg-mid);
  font-size: 16px;
}
.prose p a {
  color: var(--fg);
  border-bottom: 1px solid var(--fg-faint);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.prose p a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.prose p strong {
  color: var(--fg);
  font-weight: 500;
}

.prose__cta {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
}
.prose__cta a {
  color: var(--fg);
  border-bottom: 1px solid var(--fg-dim);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.prose__cta a:hover { border-bottom-color: var(--fg); }

.prose__hiring {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.prose__hiring span:not(:last-child)::after {
  content: "·";
  margin-left: 22px;
  color: var(--fg-faint);
}

/* -----------------------------------------------------------------
   Foot
*/
.foot {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 80px) clamp(28px, 6vw, 48px) 48px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.foot__right {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
}
.foot__right span:not(:last-child)::after {
  content: "·";
  margin-left: 20px;
  color: var(--fg-faint);
}
.foot__right a {
  color: var(--fg-mid);
  text-transform: none;
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}
.foot__right a:hover { color: var(--fg); }

/* -----------------------------------------------------------------
   Responsive
*/
@media (max-width: 640px) {
  .hero__mast {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .hero__meta { gap: 12px; }
  .hero__meta span + span::before { margin-right: 12px; }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 40px;
  }
  .foot__right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .foot__right span:not(:last-child)::after { display: none; }
  .foot__right a { font-size: 12px; }
}