:root {
  --navy: #073a78;
  --blue: #0b4f9c;
  --sky: #3d9be8;
  --orange: #ff7a1a;
  --gold: #f0c14b;
  --ink: #0c1b33;
  --paper: #f4f8fc;
  --white: #ffffff;
  --glass: rgba(8, 36, 74, 0.48);
  --radius: 14px;
  --font-display: "Outfit", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "Outfit", sans-serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
}

.stage {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.04);
  animation: drift 18s ease-in-out infinite alternate;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 40, 90, 0.15) 0%, rgba(7, 40, 90, 0.28) 42%, rgba(5, 24, 56, 0.88) 78%, rgba(4, 18, 42, 0.96) 100%),
    radial-gradient(ellipse 80% 50% at 70% 18%, rgba(61, 155, 232, 0.28), transparent 60%);
  pointer-events: none;
}

.panel {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100% - 2rem));
  margin: 0 auto 8vh;
  padding: 1.25rem 0 0;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.brand__mark {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.headline {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--paper);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

.lede {
  margin: 0 0 1.35rem;
  font-size: 0.98rem;
  font-weight: 400;
  color: rgba(244, 248, 252, 0.82);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.cta {
  display: grid;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  color: var(--ink);
  background: linear-gradient(135deg, var(--orange) 0%, #ff9a3c 55%, var(--gold) 100%);
  box-shadow: 0 12px 30px rgba(255, 122, 26, 0.35);
}

.btn--primary:hover {
  filter: brightness(1.05);
}

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

@keyframes drift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
  }
}

@media (min-width: 900px) {
  .stage {
    align-items: center;
  }

  .panel {
    margin: 0 0 0 8vw;
    width: min(480px, 42vw);
  }

  .hero__img {
    object-position: center center;
  }

  .hero__veil {
    background:
      linear-gradient(90deg, rgba(5, 24, 56, 0.92) 0%, rgba(5, 24, 56, 0.72) 38%, rgba(5, 24, 56, 0.28) 68%, rgba(5, 24, 56, 0.12) 100%),
      linear-gradient(180deg, transparent 55%, rgba(5, 24, 56, 0.35) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .panel,
  .brand,
  .headline,
  .lede,
  .cta {
    animation: none;
  }
}