/* =========================================================
   THE WORKING FILE — landing page
   ========================================================= */

:root {
  --bg: #0e0e16;
  --gold: #f2c96b;
  --gold-hover: #f7d98c;
  --white: #ffffff;
  --text: #f3f2f6;
  --ink: #17151c;
  --font: "Figtree", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(24px, 7vw, 130px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 4px;
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ================= HEADER ================= */
.site-header {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: clamp(14px, 2.2vw, 40px) 20px;
  background:
    radial-gradient(60% 140% at 8% 0%, rgba(70, 40, 140, .35), transparent 60%),
    radial-gradient(45% 140% at 96% 0%, rgba(60, 140, 150, .38), transparent 60%),
    #0b0b12;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, #4a3a9e, #3a5fa8 50%, #4fb0c4);
  opacity: .8;
}
.logo { display: block; width: clamp(150px, 14.5vw, 300px); }
.logo img { width: 100%; height: auto; }

/* ================= HERO ================= */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(560px, 55vw, 1100px);
  padding: clamp(48px, 6vw, 120px) var(--gutter);
  /* gradient fallback shows until hero-background.jpg is supplied */
  background:
    url("images/hero-background.jpg") center / cover no-repeat,
    linear-gradient(135deg, #5a3a8a 0%, #15151f 40%, #2a2a38 70%, #9a9aa4 100%);
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #3b6fd0, #8f6ad0, #d06aa8) 1;
}
.hero__content { max-width: min(46%, 720px); }

.hero__title {
  font-size: clamp(2.6rem, 4.5vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
}
.hero__title span { display: block; }
.t-bold { font-weight: 700; }
.t-regular { font-weight: 400; }
.t-italic { font-weight: 300; font-style: italic; }

.hero__lead {
  margin-top: clamp(20px, 2.4vw, 44px);
  font-size: clamp(1.1rem, 1.95vw, 2.3rem);
  line-height: 1.28;
  font-weight: 400;
  color: var(--white);
}

.btn-gold {
  display: inline-block;
  margin-top: clamp(20px, 2vw, 36px);
  padding: .95em 2.4em;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(.9rem, 1.2vw, 1.4rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s, transform .2s;
}
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); }

.hero__credit {
  margin-top: clamp(12px, 1.2vw, 22px);
  max-width: 24em;
  font-size: clamp(.95rem, 1.35vw, 1.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--white);
}

/* ================= SIGNUP ================= */
.signup {
  position: relative;
  min-height: clamp(560px, 46vw, 940px);
  padding: clamp(56px, 8.5vw, 170px) 20px clamp(48px, 6vw, 100px);
  text-align: center;
  background:
    url("images/signup-background.jpg") center / cover no-repeat,
    linear-gradient(120deg, #12121c 0%, #12121c 55%, #6a4a2a 85%, #e0b070 100%);
}
.signup__content { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }

.signup__title { font-weight: 500; line-height: 1.2; }
.signup__title span { display: block; }
.signup__title-main {
  font-size: clamp(1.5rem, 2.55vw, 3rem);
  font-weight: 500;
  color: var(--white);
}
.signup__title-sub {
  font-size: clamp(1.4rem, 2.55vw, 3rem);
  font-weight: 400;
  color: var(--gold);
  margin-top: .1em;
}
.signup__text {
  margin: clamp(12px, 1.2vw, 22px) auto 0;
  max-width: 30em;
  font-size: clamp(1rem, 1.3vw, 1.5rem);
  line-height: 1.3;
  color: var(--white);
}

.signup__form {
  display: flex; align-items: center;
  max-width: 720px;
  margin: clamp(24px, 3vw, 52px) auto 0;
  padding: 4px;
  background: var(--white);
  border-radius: 4px;
}
.signup__form input[type="email"] {
  flex: 1; min-width: 0;
  padding: .9em 1em;
  border: 0; background: transparent;
  font: inherit; font-size: clamp(.95rem, 1.15vw, 1.3rem);
  color: var(--ink);
}
.signup__form input[type="email"]::placeholder { color: #333; opacity: .85; }
.signup__form input[type="email"]:focus-visible { outline-offset: 0; border-radius: 3px; }
.signup__form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #c0392b; border-radius: 3px; }
.signup__form button {
  flex: none;
  padding: .95em 1.8em;
  border: 0; border-radius: 6px;
  background: #2a2230; color: var(--white);
  font: inherit; font-weight: 700;
  font-size: clamp(.8rem, 1vw, 1.15rem);
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.signup__form button:hover { background: #3d3247; }
.signup__form button[disabled] { opacity: .6; cursor: progress; }

.form-status { min-height: 1.5em; margin-top: 14px; font-size: 1rem; color: var(--white); }
.form-status.is-error { color: #ffb4a8; }
.form-status.is-success { color: var(--gold); }

.signup__quote {
  position: absolute; z-index: 1;
  left: 62%; bottom: 8%;
  font-size: clamp(1rem, 1.4vw, 1.7rem);
  font-style: italic; font-weight: 300; line-height: 1.25;
  text-align: left; color: var(--white);
}

/* honeypot: invisible to people, still in DOM for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= DESKTOP (1025px and up) =================
   Fixed, capped sizes so the page looks the same on every desktop monitor.
   Tweak the three variables below to fine-tune the hero image. */
@media (min-width: 1025px) {
  :root {
    --hero-height: 680px;                      /* hero section height */
    --hero-bg-size: min(100vw, 1500px) auto;   /* smaller = smaller cube */
    --hero-bg-pos: center 35%;                 /* move image up/down */
    --page-max: 1500px;                        /* content/image max width */
  }

  /* Header + logo */
  .site-header { padding: 22px 20px; }
  .logo { width: 210px; }

  /* Hero */
  .hero {
    height: var(--hero-height);
    min-height: 0;
    align-items: center;                       /* text stays vertically centered */
    padding: 0 var(--gutter);
    padding-left: max(80px, calc((100vw - var(--page-max)) / 2 + 80px));
    background-color: #181822;
    background-image:
      url("images/hero-background.jpg"),
      linear-gradient(135deg, #5a3a8a 0%, #15151f 40%, #2a2a38 70%, #9a9aa4 100%);
    background-size: var(--hero-bg-size), cover;
    background-position: var(--hero-bg-pos), center;
    background-repeat: no-repeat;
  }
  .hero__content { max-width: 560px; }
  .hero__title { font-size: 4rem; }            /* 64px */
  .hero__lead { margin-top: 24px; font-size: 1.75rem; }  /* 28px */
  .btn-gold { margin-top: 24px; font-size: 1rem; }
  .hero__credit { margin-top: 14px; font-size: 1.05rem; }

  /* Signup */
  .signup {
    min-height: 640px;
    padding-top: 110px;
    padding-bottom: 70px;
    background-color: #12121c;
    background-image:
      url("images/signup-background.jpg"),
      linear-gradient(120deg, #12121c 0%, #12121c 55%, #6a4a2a 85%, #e0b070 100%);
    background-size: min(100vw, 1500px) auto, cover;
    background-position: center bottom, center;
    background-repeat: no-repeat;
  }
  .signup__content { max-width: 720px; }
  .signup__title-main, .signup__title-sub { font-size: 2rem; }
  .signup__text { margin-top: 14px; font-size: 1.1rem; }
  .signup__form { margin-top: 30px; max-width: 600px; }
  .signup__form input[type="email"] { font-size: 1rem; }
  .signup__form button { font-size: .85rem; }
  .signup__quote {
    left: calc(50% + min(12vw, 180px));
    bottom: 8%;
    font-size: 1.25rem;
  }
}

/* ================= DESKTOP: SEAMLESS FULL-WIDTH BACKGROUNDS =================
   Each section gets two image layers:
   ::before = the same image, stretched edge to edge and softly blurred (ambient color)
   ::after  = the sharp artwork at its capped size, with its left/right edges feathered
   so there is no visible boundary. Artwork size is controlled by the same
   --hero-bg-size / --hero-bg-pos variables as before. */
@media (min-width: 1025px) {
  .hero, .signup {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image: none;
  }
  .hero { background-image: linear-gradient(135deg, #5a3a8a 0%, #15151f 40%, #2a2a38 70%, #9a9aa4 100%); }
  .signup { background-image: linear-gradient(120deg, #12121c 0%, #12121c 55%, #6a4a2a 85%, #e0b070 100%); }

  .hero::before, .hero::after,
  .signup::before, .signup::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  /* blurred full-width layer */
  .hero::before, .signup::before {
    inset: -80px;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(45px) saturate(1.05);
  }
  .hero::before { background-image: url("images/hero-background.jpg"); background-position: var(--hero-bg-pos); }
  .signup::before { background-image: url("images/signup-background.jpg"); background-position: center bottom; }

  /* sharp artwork layer, centered, feathered at the sides */
  .hero::after, .signup::after {
    top: 0; bottom: 0;
    left: 50%;
    width: min(100vw, 1500px);
    transform: translateX(-50%);
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%);
  }
  .hero::after {
    background-image: url("images/hero-background.jpg");
    background-size: 100% auto;
    background-position: center 35%;
  }
  .signup::after {
    background-image: url("images/signup-background.jpg");
    background-size: 100% auto;
    background-position: center bottom;
  }

  .hero__content, .signup__content, .signup__quote { position: relative; z-index: 1; }
  .signup__quote { position: absolute; }
}

/* ================= DESKTOP: FLUID 1025px–1499px =================
   At 1500px and wider nothing below changes the large-desktop design: every
   clamp() hits its cap at or before 1500px. Below that, text and section
   height scale down with the viewport and the text column stays left of the cube. */
@media (min-width: 1025px) {
  .hero {
    height: clamp(540px, 50vw, 680px);
    padding-left: max(min(80px, 5.4vw), calc((100vw - var(--page-max)) / 2 + 80px));
  }
  .hero__content { max-width: min(560px, 40.6vw); }
  .hero__title { font-size: clamp(2.6rem, 4.4vw, 4rem); }
  .hero__lead { margin-top: clamp(16px, 1.7vw, 24px); font-size: clamp(1.15rem, 1.95vw, 1.75rem); }
  .btn-gold { margin-top: clamp(16px, 1.7vw, 24px); font-size: clamp(.85rem, 1.15vw, 1rem); }
  .hero__credit { font-size: clamp(.9rem, 1.2vw, 1.05rem); }

  .signup {
    min-height: clamp(520px, 45vw, 640px);
    padding-top: clamp(72px, 7.4vw, 110px);
  }
  .signup__title-main, .signup__title-sub { font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .signup__text { font-size: clamp(1rem, 1.5vw, 1.1rem); }

  /* "cover" guarantees the artwork always fills the full section height,
     so its top edge (and any divider line baked into the image) can never
     float in the middle of the text. At 1500px+ this is identical to before. */
  .hero::after { background-size: cover; background-position: center 35%; }
  .signup::after { background-size: cover; background-position: right bottom; }
}

/* Readability insurance where the cube sits closest to the text */
@media (min-width: 1025px) and (max-width: 1499px) {
  .hero__title, .hero__lead, .hero__credit { text-shadow: 0 2px 22px rgba(10, 10, 20, .45); }
}

/* ================= TABLET ================= */
@media (max-width: 1024px) {
  .hero__content { max-width: 52%; }
  .signup__quote { left: auto; right: 8%; }
}

/* ================= TABLET 721px–1024px =================
   Text on top, artwork underneath: the cube and doorway can never overlap copy.
   Each section = blurred full-width layer (::before) + sharp artwork (::after)
   whose top edge fades into it, so there are no seams. */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero, .signup { position: relative; overflow: hidden; isolation: isolate; }

  .hero::before, .hero::after, .signup::before, .signup::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    background-repeat: no-repeat;
  }
  .hero::before, .signup::before { inset: -60px; background-size: cover; background-position: center bottom; filter: blur(40px); }
  .hero::after, .signup::after {
    left: 0; right: 0; bottom: 0;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .hero::before { background-image: url("images/hero-background.jpg"); }
  .hero::after  { background-image: url("images/hero-background.jpg"); height: 56vw; background-position: center 35%; }
  .signup::before { background-image: url("images/signup-background.jpg"); }
  .signup::after  { background-image: url("images/signup-background.jpg"); height: 47vw; background-position: right bottom; }

  .hero__content, .signup__content, .signup__quote { position: relative; z-index: 1; }

  .hero {
    display: block; height: auto; min-height: 0;
    padding: 56px 48px 50vw;
    background: linear-gradient(135deg, #5a3a8a 0%, #15151f 40%, #2a2a38 70%, #9a9aa4 100%);
  }
  .hero__content { max-width: 640px; }
  .hero__title { font-size: clamp(2.8rem, 7.4vw, 4rem); }
  .hero__lead { max-width: 30em; font-size: clamp(1.15rem, 2.8vw, 1.5rem); }
  .btn-gold { font-size: .95rem; }
  .hero__credit { font-size: 1rem; max-width: 26em; }

  .signup {
    min-height: 0;
    padding: 64px 32px 46vw;
    background: linear-gradient(120deg, #12121c 0%, #12121c 55%, #6a4a2a 85%, #e0b070 100%);
  }
  .signup__title-main, .signup__title-sub { font-size: clamp(1.5rem, 3.6vw, 2rem); }
  .signup__text { font-size: 1.05rem; }
  .signup__form { max-width: 560px; }
  .signup__quote { position: absolute; left: auto; right: 7%; bottom: 6%; }
}

/* ================= MOBILE ================= */
@media (max-width: 720px) {
  .hero {
    align-items: flex-start;
    min-height: 0;
    /* tall enough to reveal the cube image below the text */
    padding-top: 44px;
    padding-bottom: 92vw;
    background-position: 62% bottom;
    background-size: auto 100%, cover;
  }
  .hero {
    background:
      linear-gradient(180deg, rgba(14,14,22,.55) 0%, rgba(14,14,22,0) 55%),
      url("images/hero-background.jpg") 65% bottom / cover no-repeat,
      linear-gradient(135deg, #5a3a8a 0%, #15151f 50%, #9a9aa4 100%);
  }
  .hero__content { max-width: 100%; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .hero__lead { font-size: 1.15rem; }
  .btn-gold { width: 100%; text-align: center; font-size: .95rem; }
  .hero__credit { font-size: 1rem; }

  .signup { min-height: 0; padding-top: 56px; padding-bottom: 96vw; background-position: 78% bottom; }
  .signup {
    background:
      linear-gradient(180deg, rgba(14,14,22,.6) 0%, rgba(14,14,22,0) 50%),
      url("images/signup-background.jpg") 78% bottom / cover no-repeat,
      linear-gradient(120deg, #12121c 0%, #12121c 55%, #6a4a2a 85%, #e0b070 100%);
  }
  .signup__form { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
  .signup__form input[type="email"] { text-align: center; padding: 1em; }
  .signup__form button { padding: 1.1em; }
  .signup__quote { right: 6%; bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}