/* Sealix Systems — one-page front (matches the Framer design) */
:root { --ease: cubic-bezier(0.4, 0, 0.1, 1); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  color: #fff;
  background: #14100c;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* Full-screen stage */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; place-items: center;
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
}

/* Background photo, slow living zoom */
.hero__media { position: absolute; inset: 0; z-index: 0; animation: fade-in 1.6s var(--ease) both; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  animation: kenburns 34s ease-in-out infinite alternate;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 55%, rgba(0,0,0,0.38), rgba(0,0,0,0.12) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0.38) 100%);
}

/* Logo top-left */
.brand {
  position: relative; z-index: 5; justify-self: start;
  animation: fade-down 0.9s var(--ease) 0.3s both;
}
.brand img {
  display: block; width: auto;
  height: clamp(44px, 6vw, 64px);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.45));
}

/* Centre */
.hero__content { position: relative; z-index: 5; max-width: 900px; display: grid; justify-items: center; gap: 28px; }
.hero__title {
  font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  animation: fade-up 1s var(--ease) 0.55s both;
}

/* Contact line */
.hero__line {
  font-weight: 400; font-size: clamp(0.9rem, 1.6vw, 1.02rem);
  color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  animation: fade-up 1s var(--ease) 0.75s both;
}
.hero__line a { text-decoration: underline; text-underline-offset: 3px; }
.hero__line a:hover { color: #fff; text-shadow: 0 0 16px rgba(255,255,255,0.4); }

/* Foot */
.foot {
  position: relative; z-index: 5;
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
  animation: fade-in 1.4s var(--ease) 1.3s both;
}

/* Keyframes */
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes kenburns  { from { transform: scale(1); } to { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}