@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@400;500&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0 !important; padding: 0 !important; background: #FAFAFA; }

.hp {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 1.8vh, 22px);
  padding: clamp(24px, 4vh, 56px) 24px;
  color: #11223A; text-align: center; background: #FAFAFA;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* the real site background: from-white via-bg-light(#FAFAFA) to-secondary(#F3EED9),
   brought to life with slow drifting emerald + sand + olive brand glows */
.hp::before { content: ""; position: absolute; inset: -25%; z-index: 0;
  background:
    radial-gradient(38% 48% at 22% 26%, rgba(0,184,148,0.12), transparent 60%),
    radial-gradient(46% 56% at 82% 78%, rgba(243,238,217,0.70), transparent 62%),
    radial-gradient(46% 54% at 72% 16%, rgba(75,96,67,0.07), transparent 60%),
    linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 52%, #F3EED9 122%);
  background-size: 160% 160%, 170% 170%, 160% 160%, 200% 200%;
  background-repeat: no-repeat;
  animation: bgdrift 26s ease-in-out infinite alternate;
}
@keyframes bgdrift {
  0%   { background-position: 0% 0%, 100% 100%, 100% 0%, 0% 50%; }
  100% { background-position: 28% 18%, 68% 68%, 58% 30%, 100% 50%; }
}
.hp > * { position: relative; z-index: 1; }

.hp-lockup { display: inline-flex; align-items: center; gap: 10px; }
.hp-mark { height: clamp(50px, 6vw, 72px); width: auto; display: block; object-fit: contain; }
.hp-word { height: clamp(36px, 4.3vw, 52px); width: auto; display: block; }

/* 16:9 box so the art fills width with no letterbox; small negative top to absorb the
   art's own internal top padding and sit it tight under the lockup */
/* the artwork sits off-centre inside its 16:9 canvas (visible content is right- and low-shifted),
   so offset the box to optically centre what is actually visible. measured from the rendered alpha bbox. */
.hp-anim { width: min(820px, 90vw); aspect-ratio: 16 / 9; margin-top: clamp(-34px, -3vh, -14px);
  transform: translate(-10.3%, -2.5%); }
.hp-anim svg { display: block; width: 100%; height: 100%; }

.hp-text { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: clamp(-10px, -1vh, -4px); }
.hp-h1 { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; color: #11223A;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.hp-sub { font-family: 'Inter', sans-serif; font-weight: 500; color: #00A085;
  font-size: clamp(0.95rem, 1.4vw, 1.18rem); letter-spacing: 0.04em; margin: 0; }

@media (max-width: 640px) {
  .hp { gap: 8px; }
  .hp-anim { width: 96vw; margin-top: -2vh; }
}
@media (max-width: 360px) { .hp-h1 { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .hp::before { animation: none; } }