/* landing-overrides.css — thin additive layer on top of the platform stylesheets.
   Only the deltas the marketing landing needs: full-cover hero with the new Q+lines
   artwork, a locked "Launch QAI" button, signup status states, and legal/404 styles.
   The platform's styles.css / theme.css / animations.css / mobile.css are untouched. */

/* ============ HERO COVER ============ */
/* The hero fills the first viewport and blocks out the cosmic starfield behind it
   until the user scrolls down to the rest of the page. */
body.landing .hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* SOLID first screen — same colour as the header / .section--solid (#050611).
     The cosmic starfield (body background) only shows through the transparent
     sections further down the page (stats, etc.), not behind the hero. */
  background: #050611;
  /* Trim the platform hero's 82/96px padding so the whole hero fits in one screen. */
  padding-top: 4rem;
  padding-bottom: 1.5rem;
}
body.landing .hero::before { display: none; }
/* Pull the hero content left to balance the right-bleeding artwork. Full-bleed with a
   scaling left margin (instead of a centred 1200px container that leaves a dead gap). */
body.landing .hero > .container {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  /* Left margin shrinks faster than the viewport so narrower screens give the text more
     room WITHOUT resizing/moving the title or artwork. Big monitors (~1900px) keep ~304px;
     laptops (~1536px) drop to ~140px; clamped 2rem–20rem. */
  padding-left: clamp(2rem, calc(45vw - 551px), 20rem);
  padding-right: 2rem;
}

/* Keep the ORIGINAL hero grid (1fr 1fr, text-align:left) untouched so the title,
   taglines and signup stay locked in their left-hand positions. With the artwork
   pulled out of the flow, the single child (.hero-text) sits in the left column. */
body.landing .hero-content {
  position: relative;
  z-index: 2;
}

/* Desktop only: raise the text + signup block straight up (no horizontal change, internal
   alignment unchanged). The artwork is positioned independently, so it stays put. */
@media (min-width: 861px) {
  body.landing .hero-content { transform: translateY(-110px); }
}

/* Artwork is taken OUT of the column flow and pinned to the right half so it can be
   large and bleed off the right edge without being squeezed by the title or colliding
   with the signup card. Static (no animation) — the artwork carries its own glow. */
body.landing .hero-visual {
  position: absolute;
  top: 44%;
  right: 3%;
  width: 62%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
body.landing .hero-cover-logo {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

/* "Coming Soon" under the logo — same brand font as the H1 ("DEVELOPED TO DEVELOP":
   Poppins, weight 100, uppercase, letter-spaced), just smaller. */
body.landing .hero-visual { text-align: center; }
/* Pinned inside the artwork so it sits just under the glow, centred on the Q
   (knobs: top % = vertical under the glow; left % = horizontal centre on the Q). */
body.landing .hero-coming-soon {
  max-width: 430px;          /* matches the signup box, so it centres under it */
  margin: 1.5rem 0 0;        /* gap below the box */
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--cos-text, #f4f5fb);
}

/* Scroll cue near the bottom of the cover hero (raised so it clears the fold). */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--cos-text, #cfd2e6);
  opacity: 0.7;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  animation: scrollBob 2.2s ease-in-out infinite;
}
.scroll-cue svg { width: 22px; height: 22px; }
@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============ LOCKED LAUNCH BUTTON ============ */
.launch-button.locked {
  cursor: not-allowed;
  opacity: 0.85;
  position: relative;
}
.launch-button.locked .lock-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}
.launch-button.locked[aria-disabled="true"] { pointer-events: auto; }

/* "Coming Soon" nav item parity with the reference. */
.nav-links .coming-soon > a { cursor: default; }

/* ============ SIGNUP VISIBILITY ============ */
/* The platform hides the waitlist by default (theme.css: body.cosmic-pro .signup-waitlist
   { display:none }); on the landing it IS the primary CTA, so show it. */
body.landing .signup-waitlist { display: block !important; }
body.landing .hero-signup { justify-content: flex-start; margin-top: 2rem; }

/* Signup card — compact, centred, clearly bounded; input + inline arrow button.
   Scoped to .hero-signup .signup-box to beat theme.css's
   `body.cosmic-pro .hero-signup .signup-box { padding:0; background:transparent }`. */
body.landing .hero-signup .signup-box {
  max-width: 430px;
  margin: 0;
  padding: 1.6rem 1.6rem 1.7rem;
  border: 1px solid rgba(168, 85, 247, 0.28);
  border-radius: 18px;
  background: rgba(12, 14, 26, 0.72);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
  text-align: center;
}
/* "Join The Queue" — the box's title line, above the slogan. */
body.landing .queue-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--cos-text, #f4f5fb);
  margin: 0 0 0.6rem;
  text-align: center;
}

body.landing .signup-title {
  font-family: 'Inter', sans-serif; /* match the "The all-in-one AI platform." tagline */
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  text-align: center;
}
body.landing .signup-title .accent-text { color: var(--cos-magenta, #d946ef); }
body.landing .signup-description {
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 1.2rem;
  text-align: center;
  color: var(--cos-text-muted, #aeb2c6);
}

/* Input + arrow button on one rounded row. */
body.landing .signup-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
}
body.landing .signup-form .email-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 9, 18, 0.85);
  color: var(--cos-text, #f4f5fb);
  font-size: 0.95rem;
}
body.landing .signup-form .email-input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22);
}
body.landing .signup-form .signup-button {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* Match the "Launch QAI BETA" button colouring (magenta --cos-magenta #d946ef). */
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.30), rgba(217, 70, 239, 0.14));
  border: 1px solid rgba(217, 70, 239, 0.86);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.15s ease;
}
body.landing .signup-form .signup-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.42), rgba(217, 70, 239, 0.18));
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.36), 0 18px 36px rgba(0, 0, 0, 0.40), var(--cos-glow-magenta);
}
body.landing .signup-form .signup-button:disabled { opacity: 0.55; cursor: default; transform: none; }
body.landing .signup-form .signup-button svg { width: 20px; height: 20px; }
body.landing #signupStatus { text-align: center; margin-top: 0.7rem; }
/* Collapse the status line while empty so the card ends snug under the input. */
body.landing #signupStatus:empty { display: none; }

/* ============ NAV (landing) ============ */
/* Only two short links + the locked Launch button — keep them visible and hide the
   platform hamburger (its toggle handler isn't loaded on the landing). */
body.landing .nav-toggle { display: none !important; }
body.landing .nav-links { display: flex !important; gap: 1.6rem; align-items: center; margin: 0; list-style: none; }

/* ============ SIGNUP STATUS ============ */
#signupStatus {
  margin-top: 0.8rem;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--cos-text-dim, #aeb2c6);
}
#signupStatus[data-state="success"] { color: #4ade80; }
#signupStatus[data-state="error"] { color: #f87171; }
#signupStatus[data-state="pending"] { color: #22d3ee; }
form[data-done="true"] .signup-form { display: none; }

/* ============ RESPONSIVE HERO ============ */
@media (max-width: 860px) {
  body.landing .hero { flex-direction: column; justify-content: center; align-items: stretch; padding-top: 6rem; }
  body.landing .hero > .container { padding-left: 1.5rem; padding-right: 1.5rem; width: 100%; }
  body.landing .hero-content { max-width: 100%; width: 100%; text-align: center; order: 2; }
  body.landing .hero-text, body.landing .hero-text p { text-align: center; }
  body.landing .hero-signup { justify-content: center; }
  body.landing .signup-box { margin: 1.5rem auto 0; }
  body.landing .hero-visual {
    position: relative;
    width: 88%;
    max-width: 460px;
    margin: 0 auto 1rem;
    transform: none;
    order: 1;
  }
  /* Mobile already shows "Coming Soon" in the header strip — hide the under-logo one. */
  body.landing .hero-coming-soon { display: none; }

  /* Mobile header: logo (left) + minimised Launch button (right) only. */
  body.landing .logo { font-size: 1.3rem; white-space: nowrap; }
  body.landing .launch-button { padding: 0.4rem 0.7rem; font-size: 0.68rem; }
  body.landing .launch-button .lock-icon { width: 11px; height: 11px; margin-right: 4px; }

  /* "Coming Soon" drops out of the header row and centres just beneath the fixed header. */
  body.landing .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0.45rem 0;
    background: rgba(5, 6, 17, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 999;
  }
  body.landing .nav-links li a { font-size: 0.9rem; white-space: nowrap; }

  /* Scroll cue isn't needed on mobile — the user scrolls anyway. */
  body.landing .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
}

/* ============ FEATURED-PRODUCTS MARQUEE ============ */
/* Rotating carousel of products/words, just below the stats banner. Same font as the
   "The all-in-one AI platform." tagline (Inter). Seamless infinite scroll. */
body.landing .qai-marquee {
  overflow: hidden;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 6, 17, 0.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.landing .qai-marquee-viewport { display: flex; }
body.landing .qai-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: qaiMarquee 55s linear infinite;
}
body.landing .qai-marquee:hover .qai-marquee-track { animation-play-state: paused; }
body.landing .qai-marquee-track li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--cos-text, #f4f5fb);
  white-space: nowrap;
  padding: 0 2.2rem;
}
body.landing .qai-marquee-track li::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 2.2rem;
  border-radius: 50%;
  background: var(--cos-magenta, #d946ef);
  box-shadow: 0 0 8px rgba(217, 70, 239, 0.6);
}
@keyframes qaiMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .qai-marquee-track { animation: none; }
}

/* ============ UK-BASED AI COMPANY BADGE (footer) ============ */
.uk-badge-wrap { display: flex; justify-content: center; margin-top: 0.9rem; }
.uk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  background: rgba(12, 14, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cos-text, #f4f5fb);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.uk-badge .uk-flag {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============ INTRO STATEMENT (below the stats banner) ============ */
body.landing .intro-statement { padding: 3.5rem 0; }
body.landing .intro-statement .container { max-width: 920px; text-align: center; }
body.landing .intro-lead {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--cos-text, #f4f5fb);
  margin: 0 0 1.2rem;
}
body.landing .intro-body {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: var(--cos-text-muted, #aeb2c6);
  margin: 0;
}
body.landing .intro-emphasis { color: var(--cos-magenta, #d946ef); font-weight: 500; }

/* ============ LEGAL + 404 PAGES ============ */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 7rem 1.5rem 4rem;
}
.legal h1 { font-size: 2.2rem; margin-bottom: 0.3rem; }
.legal .updated { color: var(--cos-text-dim, #8b8fa6); font-size: 0.9rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.legal p, .legal li { color: var(--cos-text-dim, #c2c5d6); margin-bottom: 0.7rem; line-height: 1.7; }
.legal ul { padding-left: 1.3rem; }
.legal a { color: #a855f7; }
.back-link { display: inline-block; margin-bottom: 1.4rem; color: var(--cos-text-dim, #aeb2c6); text-decoration: none; }
.back-link:hover { color: var(--cos-text, #fff); }

.notfound { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.notfound h1 { font-size: clamp(3rem, 10vw, 6rem); }
.notfound p { color: var(--cos-text-dim, #aeb2c6); margin: 0.5rem 0 1.5rem; }
.notfound a { color: #a855f7; text-decoration: none; font-weight: 600; }