:root {
  color-scheme: dark light;
  --ink: #eafcff;
  --ink-dim: rgba(234, 252, 255, 0.72);
  --accent: #5df0d6;
  --accent-2: #8ad2ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #06142f;
  display: flex;
  flex-direction: column;
}

/* ---------- Ocean background ---------- */

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

.ocean__gradient {
  position: absolute;
  inset: -10%;
  background: linear-gradient(
    120deg,
    #04101f 0%,
    #0a3250 16%,
    #0e5a73 32%,
    #126f82 44%,
    #1c3f78 58%,
    #0b2454 72%,
    #0a3250 86%,
    #04101f 100%
  );
  background-size: 400% 400%;
  animation: oceanShift 28s ease-in-out infinite;
  filter: saturate(1.08);
}

@keyframes oceanShift {
  0%   { background-position: 0% 30%; }
  25%  { background-position: 60% 70%; }
  50%  { background-position: 100% 40%; }
  75%  { background-position: 40% 90%; }
  100% { background-position: 0% 30%; }
}

.ocean__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}

.ocean__glow--a {
  width: 60vmax;
  height: 60vmax;
  left: -15vmax;
  top: -10vmax;
  background: radial-gradient(circle at 50% 50%, rgba(93, 240, 214, 0.55), transparent 70%);
  animation: driftA 26s ease-in-out infinite;
}

.ocean__glow--b {
  width: 55vmax;
  height: 55vmax;
  right: -18vmax;
  top: 10vmax;
  background: radial-gradient(circle at 50% 50%, rgba(138, 210, 255, 0.45), transparent 70%);
  animation: driftB 32s ease-in-out infinite;
}

.ocean__glow--c {
  width: 45vmax;
  height: 45vmax;
  left: 20vmax;
  bottom: -20vmax;
  background: radial-gradient(circle at 50% 50%, rgba(119, 106, 230, 0.35), transparent 70%);
  animation: driftC 38s ease-in-out infinite;
}

@keyframes driftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.15); }
}

@keyframes driftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10vmax, 8vmax) scale(1.1); }
}

@keyframes driftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vmax, -6vmax) scale(1.2); }
}

.ocean__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(2, 8, 20, 0.55) 100%);
}

/* ---------- Bubbles ---------- */

.bubbles {
  position: absolute;
  inset: 0;
}

.bubbles span {
  position: absolute;
  bottom: -10vh;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05) 70%);
  opacity: 0;
  animation: rise linear infinite;
}

@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.35; }
  100% { transform: translate(var(--drift, 20px), -120vh); opacity: 0; }
}

.bubbles span:nth-child(1)  { left: 4%;  width: 10px; height: 10px; animation-duration: 16s; animation-delay: 0s;  --drift: 30px; }
.bubbles span:nth-child(2)  { left: 12%; width: 6px;  height: 6px;  animation-duration: 12s; animation-delay: 2s;  --drift: -20px; }
.bubbles span:nth-child(3)  { left: 20%; width: 14px; height: 14px; animation-duration: 20s; animation-delay: 4s;  --drift: 40px; }
.bubbles span:nth-child(4)  { left: 28%; width: 8px;  height: 8px;  animation-duration: 14s; animation-delay: 1s;  --drift: -30px; }
.bubbles span:nth-child(5)  { left: 36%; width: 5px;  height: 5px;  animation-duration: 10s; animation-delay: 6s;  --drift: 15px; }
.bubbles span:nth-child(6)  { left: 44%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 3s;  --drift: -25px; }
.bubbles span:nth-child(7)  { left: 52%; width: 7px;  height: 7px;  animation-duration: 13s; animation-delay: 7s;  --drift: 20px; }
.bubbles span:nth-child(8)  { left: 60%; width: 16px; height: 16px; animation-duration: 22s; animation-delay: 0.5s; --drift: -35px; }
.bubbles span:nth-child(9)  { left: 68%; width: 9px;  height: 9px;  animation-duration: 15s; animation-delay: 5s;  --drift: 25px; }
.bubbles span:nth-child(10) { left: 75%; width: 6px;  height: 6px;  animation-duration: 11s; animation-delay: 8s;  --drift: -15px; }
.bubbles span:nth-child(11) { left: 82%; width: 11px; height: 11px; animation-duration: 19s; animation-delay: 2.5s; --drift: 30px; }
.bubbles span:nth-child(12) { left: 88%; width: 5px;  height: 5px;  animation-duration: 9s;  animation-delay: 4.5s; --drift: -10px; }
.bubbles span:nth-child(13) { left: 94%; width: 13px; height: 13px; animation-duration: 21s; animation-delay: 1.5s; --drift: 20px; }
.bubbles span:nth-child(14) { left: 8%;  width: 8px;  height: 8px;  animation-duration: 17s; animation-delay: 9s;  --drift: -20px; }
.bubbles span:nth-child(15) { left: 56%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 6.5s; --drift: 15px; }

/* ---------- Waves ---------- */

.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 32vh;
  min-height: 160px;
}

.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.wave--back  { opacity: 0.35; animation: swayBack 14s ease-in-out infinite; }
.wave--back path  { fill: rgba(93, 240, 214, 0.28); }

.wave--mid   { opacity: 0.55; animation: swayMid 10s ease-in-out infinite; }
.wave--mid path   { fill: rgba(138, 210, 255, 0.25); }

.wave--front { opacity: 0.9; animation: swayFront 8s ease-in-out infinite; }
.wave--front path { fill: rgba(4, 12, 28, 0.75); }

@keyframes swayBack {
  0%, 100% { transform: translate(-2%, 0) scaleY(1); }
  50% { transform: translate(2%, -1.5%) scaleY(1.04); }
}

@keyframes swayMid {
  0%, 100% { transform: translate(1.5%, 0); }
  50% { transform: translate(-2.5%, -1%); }
}

@keyframes swayFront {
  0%, 100% { transform: translate(-1.5%, 0); }
  50% { transform: translate(1.5%, 1%); }
}

/* ---------- Content ---------- */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 6vw 20vh;
  gap: 0.75rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}

.wordmark {
  font-size: clamp(3rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.wordmark__text {
  background: linear-gradient(90deg, #ffffff, var(--accent), var(--accent-2), #ffffff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
  text-shadow: 0 0 60px rgba(93, 240, 214, 0.25);
}

.dot {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

@keyframes shimmer {
  to { background-position: 300% center; }
}

.tagline {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
}

.pill {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.pill__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(93, 240, 214, 0.7);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(93, 240, 214, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(93, 240, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 240, 214, 0); }
}

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  font-size: 0.75rem;
  color: rgba(234, 252, 255, 0.45);
}

/* ---------- Motion & small-screen comfort ---------- */

@media (prefers-reduced-motion: reduce) {
  .ocean__gradient,
  .ocean__glow,
  .bubbles span,
  .wave,
  .wordmark__text,
  .pill__pulse {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 480px) {
  .waves { height: 22vh; }
  .hero { padding-bottom: 16vh; }
}