:root {
  --bg: #061419;
  --bg-deep: #031014;
  --text: #eefbfb;
  --muted: #92aeb2;
  --teal: #4dd2d3;
  --blue: #3c82df;
  --line: rgba(178, 238, 237, 0.14);
  --surface: rgba(10, 34, 41, 0.58);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

html { background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, rgba(22, 102, 113, 0.17), transparent 36%),
    radial-gradient(circle at 8% 8%, rgba(39, 101, 160, 0.14), transparent 30%),
    linear-gradient(145deg, #07191e 0%, #051419 52%, #030d11 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .62;
}

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: screen;
}

.ambient-one {
  width: 28rem;
  height: 28rem;
  left: -12rem;
  top: 18%;
  background: #176f78;
  animation: driftOne 16s ease-in-out infinite alternate;
}

.ambient-two {
  width: 34rem;
  height: 34rem;
  right: -18rem;
  bottom: -10rem;
  background: #1e4f91;
  animation: driftTwo 20s ease-in-out infinite alternate;
}

.shell {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 5rem 1.5rem 6.5rem;
}

.hero {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem .85rem;
  border: 1px solid rgba(123, 224, 221, .18);
  border-radius: 999px;
  color: #a7c4c7;
  background: rgba(8, 31, 37, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 40px rgba(0,0,0,.13);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.status-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #6be1d9;
  box-shadow: 0 0 0 5px rgba(107,225,217,.08), 0 0 18px rgba(107,225,217,.65);
  animation: statusPulse 2.8s ease-in-out infinite;
}

.identity {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mark-wrap {
  position: relative;
  width: 106px;
  height: 207px;
  filter: drop-shadow(0 28px 34px rgba(8, 187, 190, .08));
}

.mark-wrap::before,
.mark-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(103, 225, 221, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ripple 3s 1.7s ease-out infinite;
}

.mark-wrap::before { width: 150px; height: 150px; }
.mark-wrap::after { width: 220px; height: 220px; animation-delay: 2.25s; }

.mark { width: 100%; height: 100%; overflow: visible; }

.mark-top {
  transform-origin: 100px 185px;
  animation: topArrive 1.4s cubic-bezier(.2,.84,.22,1) both;
}

.mark-bottom {
  transform-origin: 100px 192px;
  animation: bottomArrive 1.4s .1s cubic-bezier(.2,.84,.22,1) both;
}

.drop-path {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: drawDrop 1.55s .4s cubic-bezier(.61,.01,.26,1) forwards;
}

.join-pulse {
  transform-origin: center;
  opacity: 0;
  animation: joinFlash .95s 1.15s ease-out forwards;
}

.wordmark {
  margin: 1.8rem 0 0;
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  line-height: .9;
  font-weight: 720;
  letter-spacing: .085em;
  color: #f0ffff;
  text-shadow: 0 10px 46px rgba(49, 191, 200, .11);
}

.sub-two {
  display: inline-block;
  position: relative;
  top: .19em;
  margin: 0 .015em 0 -.018em;
  font-size: .57em;
  font-weight: 660;
  letter-spacing: 0;
}

.statement {
  max-width: 680px;
  margin: 2rem auto 0;
  color: #a7c1c4;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.6;
  font-weight: 390;
  letter-spacing: .015em;
}

.contact-block {
  margin-top: 2.75rem;
  padding-top: 2rem;
  width: min(510px, 100%);
  border-top: 1px solid var(--line);
}

.contact-block p {
  margin: 0 0 .75rem;
  color: #77999d;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #dcfafa;
  text-decoration: none;
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  font-weight: 560;
  letter-spacing: .025em;
  transition: color .25s ease, transform .25s ease;
}

.contact-link svg {
  width: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.contact-link:hover,
.contact-link:focus-visible { color: #76e1de; transform: translateY(-1px); }
.contact-link:hover svg,
.contact-link:focus-visible svg { transform: translateX(4px); }
.contact-link:focus-visible { outline: 2px solid #76e1de; outline-offset: 8px; border-radius: 2px; }

.footer {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: 1.55rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(147, 181, 184, .48);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-line { width: 24px; height: 1px; background: rgba(147, 181, 184, .27); }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.reveal-1 { animation-delay: .35s; }
.reveal-2 { animation-delay: 1.2s; }
.reveal-3 { animation-delay: 1.4s; }
.reveal-4 { animation-delay: 1.58s; }
.reveal-5 { animation-delay: 1.85s; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes topArrive {
  0% { opacity: 0; transform: translateY(-75px) scale(.72); filter: blur(7px); }
  70% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes bottomArrive {
  0% { opacity: 0; transform: translateY(70px) scale(.78); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes drawDrop { to { stroke-dashoffset: 0; } }
@keyframes joinFlash {
  0% { opacity: 0; transform: scale(.4); }
  45% { opacity: 1; transform: scale(4.5); }
  100% { opacity: .45; transform: scale(1); }
}
@keyframes ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: .35; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes statusPulse { 50% { opacity: .65; box-shadow: 0 0 0 8px rgba(107,225,217,.04), 0 0 25px rgba(107,225,217,.45); } }
@keyframes driftOne { to { transform: translate(4rem, -2rem) scale(1.08); } }
@keyframes driftTwo { to { transform: translate(-5rem, -2rem) scale(.92); } }

@media (max-width: 640px) {
  .shell { padding: 3.4rem 1.2rem 5.2rem; }
  .status { font-size: .62rem; }
  .mark-wrap { width: 80px; height: 156px; }
  .identity { margin-top: 1.8rem; }
  .wordmark { margin-top: 1.45rem; font-size: clamp(2.75rem, 15vw, 4.2rem); letter-spacing: .065em; }
  .statement { margin-top: 1.6rem; font-size: 1rem; }
  .desktop-break { display: none; }
  .contact-block { margin-top: 2.2rem; padding-top: 1.6rem; }
  .ambient-one { width: 20rem; height: 20rem; }
  .ambient-two { width: 23rem; height: 23rem; }
}

@media (max-height: 690px) and (min-width: 641px) {
  .shell { padding-top: 2.5rem; padding-bottom: 4.8rem; }
  .mark-wrap { width: 74px; height: 145px; }
  .identity { margin-top: 1.3rem; }
  .wordmark { margin-top: 1rem; font-size: 3.8rem; }
  .statement { margin-top: 1.2rem; }
  .contact-block { margin-top: 1.55rem; padding-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}