:root {
  --navy-900: #04101f;
  --navy-800: #071528;
  --navy-700: #0b2545;
  --gold-400: #e8c86a;
  --gold-500: #d4af37;
  --gold-600: #b8912a;
  --silver: #c7ced8;
  --ink-100: rgba(255, 255, 255, 0.94);
  --ink-70: rgba(255, 255, 255, 0.72);
  --ink-50: rgba(255, 255, 255, 0.52);
  --hairline: rgba(232, 200, 106, 0.28);
  --font: "Montserrat", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--ink-100);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- backdrop */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.backdrop__image,
.backdrop__grid,
.backdrop__scan,
.backdrop__tint,
.backdrop__vignette,
.backdrop__fx {
  position: absolute;
  inset: 0;
}

/* Oversized box so parallax translation never exposes an edge. The wrapper
   carries the pointer parallax, the child carries the slow ken-burns move,
   so the two transforms never overwrite each other. */
.backdrop__image {
  inset: -6%;
  will-change: transform;
}

.backdrop__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/alcy-bg.webp") center / cover no-repeat var(--navy-800);
  transform: scale(1.06);
  animation: kenburns 34s var(--ease) infinite alternate;
  will-change: transform;
}

/* Blueprint grid that drifts over the photograph */
.backdrop__grid {
  background-image:
    linear-gradient(to right, rgba(199, 206, 216, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199, 206, 216, 0.16) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(120% 90% at 22% 45%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 22% 45%, #000 0%, transparent 72%);
  opacity: 0.5;
  animation: drift 26s linear infinite;
}

/* Slow light sweep, like a plotter pass across a drawing */
.backdrop__scan {
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(232, 200, 106, 0.09) 47%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 60%
  );
  background-size: 260% 100%;
  animation: sweep 13s ease-in-out infinite;
  mix-blend-mode: screen;
}

.backdrop__tint {
  background:
    linear-gradient(180deg, rgba(4, 16, 31, 0.72) 0%, rgba(4, 16, 31, 0.34) 45%, rgba(4, 16, 31, 0.82) 100%),
    linear-gradient(95deg, rgba(11, 37, 69, 0.78) 0%, rgba(7, 21, 40, 0.18) 62%, rgba(4, 16, 31, 0.5) 100%);
}

.backdrop__vignette {
  background: radial-gradient(78% 66% at 50% 44%, transparent 0%, rgba(3, 11, 22, 0.62) 100%);
}

.backdrop__fx { width: 100%; height: 100%; }

/* ------------------------------------------------------------------- stage */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 3.5rem) 1.5rem clamp(1.5rem, 4vh, 2.5rem);
}

.shell {
  width: 100%;
  max-width: 46rem;
  text-align: center;
  will-change: transform;
}

/* Frosted plate keeps the navy + gold logo fully legible on the dark photo */
.plate {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  padding: clamp(0.85rem, 2.2vw, 1.3rem) clamp(1.4rem, 3.4vw, 2.1rem);
  border-radius: 20px;
  /* Solid white, identical to the logo artwork's own backdrop, so the image
     edge is invisible and the plate reads as one clean card. */
  background: #fff;
  box-shadow:
    0 24px 60px -22px rgba(0, 0, 0, 0.75),
    0 0 0 1px var(--hairline);
}

.plate__logo {
  display: block;
  width: clamp(7.5rem, 19vw, 10rem);
  height: auto;
  mix-blend-mode: multiply;
}

.eyebrow {
  margin: clamp(1.2rem, 3.2vh, 1.8rem) auto 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--silver);
}

.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  animation: pulse 2.6s ease-out infinite;
}

.title {
  margin: 0.7rem 0 0;
  font-size: clamp(1.95rem, 5.4vw, 3.15rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(3, 11, 22, 0.55);
}

.title__accent {
  display: block;
  margin-top: 0.15em;
  font-weight: 800;
  background: linear-gradient(100deg, var(--gold-600) 0%, var(--gold-400) 34%, #fff6d8 50%, var(--gold-400) 66%, var(--gold-600) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

.lede {
  margin: 0.95rem auto 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.6vw, 1.06rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--ink-70);
  text-shadow: 0 1px 16px rgba(3, 11, 22, 0.6);
}

.services {
  margin: clamp(1.2rem, 3vh, 1.7rem) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.55rem;
}

.services li {
  padding: 0.44rem 0.9rem;
  border: 1px solid rgba(199, 206, 216, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ----------------------------------------------------------------- buttons */

.actions {
  margin: clamp(1.4rem, 3.6vh, 2rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
              background-color 0.28s var(--ease), border-color 0.28s var(--ease);
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn__label {
  line-height: 1.25;
}

.btn--gold {
  color: #1b1405;
  background: linear-gradient(140deg, var(--gold-400) 0%, var(--gold-500) 52%, var(--gold-600) 100%);
  box-shadow: 0 14px 34px -14px rgba(212, 175, 55, 0.72), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

/* Shine that crosses the button on hover */
.btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: left 0.65s var(--ease), opacity 0.2s linear;
}

.btn--ghost {
  color: var(--ink-100);
  border: 1px solid rgba(199, 206, 216, 0.34);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn:hover { transform: translateY(-2px); }

.btn--gold:hover { box-shadow: 0 20px 44px -14px rgba(212, 175, 55, 0.85), 0 1px 0 rgba(255, 255, 255, 0.5) inset; }

.btn--gold:hover::after { left: 120%; opacity: 1; }

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(232, 200, 106, 0.5);
}

.btn:active { transform: translateY(0); }

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

.btn.is-downloading .btn__icon { animation: nudge 0.7s var(--ease) 2; }

/* ---------------------------------------------------------------- progress */

.progress {
  margin: clamp(1.5rem, 4vh, 2.2rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  max-width: 19rem;
}

.progress__track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.progress__bar {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  animation: crawl 3.4s var(--ease) infinite;
}

.progress__label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ------------------------------------------------------------------ footer */

.footer {
  position: relative;
  z-index: 1;
  padding: 0 1.5rem clamp(1.25rem, 3.5vh, 2rem);
  text-align: center;
}

.footer__brand {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.footer__links {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.85rem;
}

.footer__links a {
  padding: 0.2rem 0;
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.footer__links a:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

.footer__links a:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 3px;
}

.footer__sep { color: rgba(255, 255, 255, 0.28); }

.footer__legal {
  margin: 0.9rem 0 0;
  font-size: 0.7rem;
  /* 0.34 alpha failed WCAG AA against the dark backdrop at this size */
  color: rgba(255, 255, 255, 0.55);
}

/* -------------------------------------------------------------- animations */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kenburns {
  from { transform: scale(1.05) translate3d(-1.4%, 0.6%, 0); }
  to   { transform: scale(1.16) translate3d(1.6%, -1.2%, 0); }
}

@keyframes drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 92px 46px, 92px 46px; }
}

@keyframes sweep {
  0%, 100% { background-position: 140% 0; }
  50%      { background-position: -40% 0; }
}

@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

@keyframes crawl {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(240%); }
}

@keyframes nudge {
  50% { transform: translateY(4px); }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 40rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .backdrop__grid { background-size: 64px 64px; }
  .footer__legal { font-size: 0.66rem; }
}

/* Laptop-height screens: everything stays on one screen without scrolling */
@media (max-height: 54rem) {
  .plate { padding: 0.7rem 1.25rem; border-radius: 16px; }
  .plate__logo { width: clamp(6.25rem, 14vw, 7.75rem); }
  .title { font-size: clamp(1.75rem, 4.4vw, 2.5rem); }
  .lede { font-size: 0.92rem; line-height: 1.62; }
  .services li { padding: 0.36rem 0.78rem; font-size: 0.68rem; }
  .btn { padding: 0.8rem 1.3rem; }
}

@media (max-height: 38rem) {
  .progress { display: none; }
  .stage { padding-top: 1.5rem; padding-bottom: 1rem; }
  .plate__logo { width: clamp(5.5rem, 12vw, 7rem); }
}

/* Landscape handsets: very little height, plenty of width. Shrink everything
   and drop the service chips so the logo, headline and buttons all fit. */
@media (max-height: 30rem) {
  .stage { padding: 1rem 1.25rem 0.75rem; }
  .plate { padding: 0.55rem 1rem; border-radius: 14px; }
  .plate__logo { width: 4.5rem; }
  .eyebrow { margin-top: 0.8rem; font-size: 0.64rem; }
  .title { margin-top: 0.45rem; font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
  .lede { margin-top: 0.6rem; max-width: 42rem; font-size: 0.84rem; line-height: 1.5; }
  .services { display: none; }
  .actions { margin-top: 1rem; }
  .footer__legal { display: none; }
  .footer { padding-bottom: 0.85rem; }
}

/* Phones: fewer wrapped lines and two chips per row, so the download button
   stays close to the top of the screen. Placed after the height queries so
   these values win on small handsets. */
@media (max-width: 26rem) {
  .stage { padding: 1.2rem 1.25rem 0.9rem; }
  .footer { padding-bottom: 0.85rem; }
  .footer__legal { margin-top: 0.65rem; }
  /* The headline already says "coming soon" — the progress strip is the first
     thing to go when vertical space is scarce. */
  .progress { display: none; }
  .plate { padding: 0.6rem 1.1rem; }
  .plate__logo { width: clamp(5.5rem, 26vw, 6.75rem); }
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.2em; }
  .title { font-size: clamp(1.6rem, 7.6vw, 1.95rem); }
  .lede { font-size: 0.875rem; line-height: 1.6; }
  .services { gap: 0.4rem; }
  .services li { padding: 0.32rem 0.6rem; font-size: 0.61rem; letter-spacing: 0.06em; }
  .footer__links { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop__image::before,
  .backdrop__grid,
  .backdrop__scan,
  .eyebrow__dot,
  .title__accent,
  .progress__bar {
    animation: none;
  }
  .reveal { opacity: 1; transform: none; animation: none; }
  .btn:hover { transform: none; }
  .progress__bar { width: 62%; background: var(--gold-500); }
}