:root {
  --bg: #080e1c;
  --bg-soft: #0b1324;
  --white: #ffffff;
  --ice: #dce8f4;
  --ice-muted: rgba(220, 232, 244, 0.66);
  --footer: rgba(220, 232, 244, 0.44);
  --gold: #c9a96e;
  --gold-bright: #d8b979;
  --gold-deep: #8f7343;
  --line: rgba(201, 169, 110, 0.36);
  --max-width: 1240px;
  --font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  animation: pageAwake 900ms ease-out both;
}

/* Subtle, non-gradient grain for a printed editorial finish. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 22px 22px;
}

.site-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2.5rem, 6vh, 4.75rem) clamp(1rem, 4vw, 3.25rem) clamp(1.2rem, 3vh, 2rem);
}

.site-shell::before,
.site-shell::after {
  position: fixed;
  top: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: -1;
  width: 1px;
  content: "";
  background: rgba(201, 169, 110, 0.16);
  transform: scaleY(0);
  transform-origin: center;
  animation: lineReveal 1200ms cubic-bezier(0.16, 1, 0.3, 1) 420ms forwards;
}

.site-shell::before {
  left: clamp(0.8rem, 2.5vw, 2.1rem);
}

.site-shell::after {
  right: clamp(0.8rem, 2.5vw, 2.1rem);
}

.hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(0.5rem, 2vh, 1.25rem);
}

.logo {
  display: block;
  width: clamp(300px, 45vw, 650px);
  max-width: 92vw;
  height: auto;
  margin: 0 auto clamp(2.35rem, 5.8vh, 4.6rem);
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  animation: logoReveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-copy::before {
  display: block;
  width: clamp(4.5rem, 9vw, 7.5rem);
  height: 1px;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  content: "";
  background: var(--gold);
  opacity: 0;
  transform: scaleX(0);
  animation: markReveal 980ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
}

h1 {
  width: 100%;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.55rem, 4.05vw, 4rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: clamp(0.48em, 0.92em, 1.12em);
  text-indent: clamp(0.48em, 0.92em, 1.12em);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: headlineReveal 1100ms cubic-bezier(0.16, 1, 0.3, 1) 360ms forwards;
}

h1 span {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(201, 169, 110, 0.16);
}

.funnel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vh, 1.35rem);
  width: 100%;
  margin: clamp(2.6rem, 6vh, 4.1rem) auto 0;
  font-family: inherit;
  text-transform: uppercase;
}

.funnel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  color: var(--ice);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: quietRise 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.funnel-row span {
  white-space: nowrap;
}

.row-1 { max-width: 650px; }
.row-2 { max-width: 520px; }
.row-3 { max-width: 400px; }
.row-4 { max-width: 300px; }

.funnel-row:nth-child(1) { animation-delay: 610ms; }
.funnel-row:nth-child(2) { animation-delay: 710ms; }
.funnel-row:nth-child(3) { animation-delay: 810ms; }
.funnel-row:nth-child(4) { animation-delay: 910ms; }

.email-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  max-width: calc(100vw - 2rem);
  margin-top: clamp(2.2rem, 5.6vh, 3.8rem);
  padding: 0.92rem clamp(1.6rem, 4vw, 3.3rem);
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  background-color: rgba(201, 169, 110, 0.035);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 38px rgba(201, 169, 110, 0.08);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: quietRise 820ms cubic-bezier(0.16, 1, 0.3, 1) 1060ms forwards;
  transition:
    border-color 220ms ease,
    color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.email-cta span {
  position: relative;
  z-index: 1;
  transition: color 220ms ease, text-shadow 220ms ease;
}

.email-cta:hover,
.email-cta:focus-visible {
  border-color: rgba(230, 201, 143, 0.92);
  color: #080e1c;
  background-color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 24px rgba(143, 115, 67, 0.18),
    0 14px 42px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(201, 169, 110, 0.16);
  transform: translateY(-3px);
}

.email-cta:hover span,
.email-cta:focus-visible span {
  color: #080e1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.email-cta:focus-visible {
  outline: 2px solid rgba(230, 201, 143, 0.42);
  outline-offset: 4px;
}

.closing {
  margin: clamp(2.05rem, 5.2vh, 3.4rem) 0 0;
  color: var(--ice-muted);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  font-weight: 300;
  letter-spacing: clamp(0.22em, 0.54vw, 0.36em);
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: quietRise 760ms cubic-bezier(0.16, 1, 0.3, 1) 1180ms forwards;
}

/* ===== FOOTER ===== */
.footer {
  width: min(100%, var(--max-width));
  margin: clamp(2.1rem, 5vh, 4rem) auto 0;
  padding-top: clamp(1.1rem, 2.7vh, 1.8rem);
  padding-bottom: 40px;
  border-top: 0;
  text-align: center;
  opacity: 0;
  animation: footerReveal 900ms ease-out 1300ms forwards;
}

.footer::before {
  display: block;
  width: clamp(3.2rem, 8vw, 6.5rem);
  height: 1px;
  margin: 0 auto clamp(1rem, 2.2vh, 1.45rem);
  content: "";
  background: rgba(201, 169, 110, 0.42);
}

/* ---------- Premium footer LinkedIn icon ---------- */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 999px;
  color: var(--gold);
  background: transparent;
  transition: all 220ms ease;
  text-decoration: none;
}

.footer-social a svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  display: block;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--gold-bright);
  color: #080e1c;
  background-color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 169, 110, 0.15);
}

.footer p {
  margin: 0;
  color: var(--footer);
  font-size: clamp(0.62rem, 0.76vw, 0.74rem);
  font-weight: 400;
  line-height: 2.18;
  letter-spacing: clamp(0.12em, 0.28vw, 0.2em);
  text-transform: uppercase;
}

/* ===== RESPONSIVE (unchanged) ===== */
@media (max-width: 768px) {
  .site-shell {
    padding-right: clamp(0.9rem, 4vw, 1.4rem);
    padding-left: clamp(0.9rem, 4vw, 1.4rem);
  }

  .site-shell::before,
  .site-shell::after {
    display: none;
  }

  .logo {
    width: clamp(260px, 78vw, 460px);
    margin-bottom: clamp(2rem, 5vh, 3.1rem);
  }

  h1 {
    font-size: clamp(1.35rem, 5.5vw, 2.45rem);
    letter-spacing: clamp(0.2em, 1.7vw, 0.34em);
    text-indent: clamp(0.2em, 1.7vw, 0.34em);
  }

  .funnel-container {
    gap: 0.65rem;
    margin-top: clamp(1.9rem, 4.6vh, 2.7rem);
  }

  .row-1 { max-width: 90%; }
  .row-2 { max-width: 80%; }
  .row-3 { max-width: 70%; }
  .row-4 { max-width: 60%; }

  .funnel-row {
    font-size: clamp(0.66rem, 2.5vw, 0.78rem);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 430px) {
  .site-shell {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
  }

  .logo {
    width: min(86vw, 360px);
  }

  h1 {
    font-size: clamp(1.38rem, 7.7vw, 2.15rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  .funnel-container {
    gap: 0.62rem;
    margin-top: 1.7rem;
  }

  .funnel-row {
    font-size: clamp(0.62rem, 2.45vw, 0.72rem);
    letter-spacing: 0.035em;
    line-height: 1.45;
  }

  .email-cta {
    width: min(100%, 21.5rem);
    min-height: 3.25rem;
    padding-right: 1.4rem;
    padding-left: 1.4rem;
    font-size: 0.73rem;
    letter-spacing: 0.105em;
  }

  .footer p {
    letter-spacing: 0.075em;
  }
}

@media (max-height: 690px) and (min-width: 680px) {
  .site-shell {
    padding-top: 1.4rem;
    padding-bottom: 1rem;
  }

  .logo {
    width: clamp(220px, 30vw, 390px);
    margin-bottom: 1.65rem;
  }

  h1 {
    font-size: clamp(2rem, 4.8vw, 4.1rem);
  }

  .funnel-container {
    margin-top: 1.25rem;
  }

  .email-cta {
    margin-top: 1.7rem;
  }

  .footer {
    margin-top: 1.5rem;
  }
}

@media (max-height: 620px) and (max-width: 679px) {
  .site-shell {
    padding-top: 1rem;
    padding-bottom: 0.85rem;
  }

  .hero {
    justify-content: flex-start;
  }

  .logo {
    width: clamp(210px, 64vw, 330px);
    margin-bottom: 1.25rem;
  }

  .funnel-container {
    margin-top: 1rem;
  }

  .funnel-row {
    line-height: 1.45;
  }

  .email-cta {
    min-height: 3rem;
    margin-top: 1.15rem;
  }

  .closing {
    margin-top: 0.8rem;
  }

  .footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
  }
}

@media (max-width: 360px) {
  h1 {
    font-size: clamp(1.08rem, 6vw, 1.45rem);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .email-cta {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ===== KEYFRAMES (unchanged) ===== */
@keyframes pageAwake {
  from { background-color: #050914; }
  to { background-color: var(--bg); }
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes headlineReveal {
  0% {
    opacity: 0;
    letter-spacing: 0.01em;
    text-indent: 0.01em;
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes quietRise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes footerReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lineReveal {
  to { transform: scaleY(1); }
}

@keyframes markReveal {
  to {
    opacity: 0.8;
    transform: scaleX(1);
  }
}