:root {
  --black: #04070c;
  --black-2: #07111d;
  --white: #ffffff;
  --aqua: #2ec7e0;
  --aqua-soft: #83e7f3;
  --cyan: #48d6ec;
  --ocean: #17388f;
  --ocean-deep: #0c1c55;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { background: var(--black); }
body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  font-family: Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 34%, rgba(131,231,243,.10), transparent 17%),
    radial-gradient(circle at 18% 16%, rgba(46,199,224,.08), transparent 26%),
    radial-gradient(circle at 84% 24%, rgba(23,56,143,.16), transparent 27%),
    linear-gradient(180deg, #03050a 0%, #07131f 48%, #02050a 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }

.site-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

.scene, .glow, .beam, .liquid, .glass-ring, .ripple, .droplets, .grain {
  position: absolute;
  pointer-events: none;
}
.scene { inset: 0; z-index: -1; overflow: hidden; }
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 18%, transparent 82%, rgba(255,255,255,.025)),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 18%, transparent 75%, rgba(0,0,0,.26));
}

.glow { border-radius: 50%; filter: blur(52px); mix-blend-mode: screen; }
.glow-a {
  width: min(60vw, 760px); height: min(60vw, 760px);
  left: 50%; top: 45%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(131,231,243,.28), rgba(46,199,224,.15) 32%, rgba(23,56,143,.08) 51%, transparent 70%);
  animation: glowPulse 10s var(--ease) infinite alternate;
}
.glow-b {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  left: 8%; top: 10%; background: radial-gradient(circle, rgba(46,199,224,.13), transparent 70%);
  animation: driftA 16s var(--ease) infinite alternate;
}
.glow-c {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: 5%; bottom: 4%; background: radial-gradient(circle, rgba(23,56,143,.25), transparent 70%);
  animation: driftB 19s var(--ease) infinite alternate;
}

.beam {
  top: -18vh; width: 25vw; height: 136vh; filter: blur(14px); opacity: .15;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.11) 30%, rgba(131,231,243,.18) 49%, transparent 82%);
}
.beam-left { left: 18%; transform: rotate(10deg); animation: beamA 18s var(--ease) infinite alternate; }
.beam-right { right: 18%; transform: rotate(-10deg); animation: beamB 22s var(--ease) infinite alternate; }

.liquid {
  border: 1px solid rgba(131,231,243,.12);
  background:
    radial-gradient(circle at 27% 20%, rgba(255,255,255,.13), transparent 20%),
    radial-gradient(circle at 75% 72%, rgba(12,28,85,.42), transparent 52%),
    linear-gradient(138deg, rgba(255,255,255,.07), rgba(46,199,224,.06) 42%, rgba(23,56,143,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 44px rgba(131,231,243,.04), 0 30px 90px rgba(0,0,0,.18);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.liquid-one {
  width: clamp(540px, 58vw, 960px); height: clamp(220px, 25vw, 360px);
  left: 50%; bottom: -10%; transform: translateX(-50%) rotate(-3deg);
  border-radius: 52% 48% 46% 54% / 61% 56% 44% 39%; opacity: .30;
  animation: liquidA 18s var(--ease) infinite alternate;
}
.liquid-two {
  width: clamp(420px, 42vw, 720px); height: clamp(170px, 18vw, 260px);
  left: -9%; top: 61%; transform: rotate(9deg);
  border-radius: 61% 39% 49% 51% / 58% 46% 54% 42%; opacity: .14;
  animation: liquidB 21s var(--ease) infinite alternate;
}
.liquid-three {
  width: clamp(370px, 40vw, 650px); height: clamp(180px, 19vw, 280px);
  right: -8%; top: 13%; transform: rotate(-12deg);
  border-radius: 44% 56% 54% 46% / 44% 56% 44% 56%; opacity: .13;
  animation: liquidC 23s var(--ease) infinite alternate;
}

.glass-ring {
  left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.glass-ring-one { width: min(72vw, 900px); height: min(72vw, 900px); opacity: .08; }
.glass-ring-two { width: min(52vw, 650px); height: min(52vw, 650px); opacity: .07; }

.ripple {
  left: 50%; top: 59%; transform: translate(-50%, -50%);
  border: 1px solid rgba(131,231,243,.15); border-radius: 50%;
  box-shadow: inset 0 0 26px rgba(131,231,243,.025);
}
.ripple-one { width: min(43vw,560px); height: min(10vw,125px); animation: ripple 7s ease-out infinite; }
.ripple-two { width: min(58vw,760px); height: min(14vw,170px); opacity:0; animation: ripple 7s ease-out 1.8s infinite; }
.ripple-three { width: min(72vw,940px); height: min(18vw,225px); opacity:0; animation: ripple 7s ease-out 3.6s infinite; }

.droplets { inset: 0; }
.droplets i {
  position: absolute; display: block; width: 7px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(131,231,243,.55) 45%, transparent 74%);
  box-shadow: 0 0 18px rgba(131,231,243,.22); opacity: .22;
  animation: droplet 18s linear infinite;
}
.droplets i:nth-child(1){left:24%;top:68%;animation-delay:-2s}.droplets i:nth-child(2){left:37%;top:22%;width:5px;animation-delay:-8s}.droplets i:nth-child(3){left:58%;top:16%;width:6px;animation-delay:-5s}.droplets i:nth-child(4){left:71%;top:62%;width:8px;animation-delay:-11s}.droplets i:nth-child(5){left:49%;top:76%;width:4px;animation-delay:-15s}.droplets i:nth-child(6){left:82%;top:34%;width:5px;animation-delay:-6s}

.grain {
  inset: -30%; opacity: .035; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain .9s steps(2) infinite;
}

.hero {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 1.1rem; padding: 4rem 1.5rem; text-align: center;
}
.logo-stage {
  position: relative; width: clamp(185px, 25vw, 365px); aspect-ratio: 912 / 1098;
  display: grid; place-items: center; animation: enter 1.1s var(--ease) both, logoFloat 8s var(--ease) 1.1s infinite alternate;
}
.logo-halo, .logo-glass, .logo-reflection { position: absolute; pointer-events: none; }
.logo-halo {
  inset: 7% -22%; border-radius: 50%; filter: blur(34px);
  background: radial-gradient(circle, rgba(131,231,243,.22), rgba(46,199,224,.08) 46%, transparent 72%);
}
.logo-glass {
  inset: 9% -15%; border-radius: 42% 58% 52% 48% / 44% 40% 60% 56%;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 23%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle at 74% 76%, rgba(12,28,85,.36), transparent 45%),
    linear-gradient(138deg, rgba(255,255,255,.07), rgba(46,199,224,.08) 43%, rgba(23,56,143,.17));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 42px rgba(131,231,243,.05), 0 28px 110px rgba(12,28,85,.25);
  backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.logo-glass::before {
  content:""; position:absolute; width:29%; height:51%; top:12%; left:16%; border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 78%); filter:blur(18px); opacity:.55;
}
.logo-reflection {
  width: 75%; height: 9%; left: 50%; bottom: -9%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(131,231,243,.34), rgba(23,56,143,.13) 46%, transparent 73%);
  filter: blur(18px); opacity: .82;
}
.brand-logo {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 52px rgba(0,0,0,.48)) drop-shadow(0 0 28px rgba(131,231,243,.14));
}
.status, .tagline { margin: 0; }
.status {
  color: rgba(255,255,255,.94); font-size: clamp(.66rem,.95vw,.85rem); font-weight: 700;
  letter-spacing: .42em; text-transform: uppercase;
  animation: enter 1s var(--ease) .18s both;
}
.tagline {
  color: rgba(255,255,255,.74); font-size: clamp(.96rem,1.3vw,1.1rem); font-weight: 400;
  letter-spacing: .01em; line-height: 1.75;
  animation: enter 1s var(--ease) .32s both;
}

@keyframes enter { from { opacity:0; transform:translateY(16px) scale(.985) } to { opacity:1; transform:none } }
@keyframes logoFloat { from { transform:translateY(-2px) } to { transform:translateY(12px) } }
@keyframes glowPulse { from { transform:translate(-50%,-50%) scale(.97);opacity:.74 } to { transform:translate(-50%,-50%) scale(1.06);opacity:1 } }
@keyframes driftA { from { transform:translate(0,0) } to { transform:translate(24px,-14px) } }
@keyframes driftB { from { transform:translate(0,0) } to { transform:translate(-26px,16px) } }
@keyframes beamA { from { transform:rotate(10deg);opacity:.09 } to { transform:rotate(6deg) translateX(14px);opacity:.20 } }
@keyframes beamB { from { transform:rotate(-10deg);opacity:.08 } to { transform:rotate(-6deg) translateX(-14px);opacity:.18 } }
@keyframes liquidA { from { transform:translateX(-50%) rotate(-3deg) scale(1) } to { transform:translateX(calc(-50% + 12px)) rotate(0) scale(1.03) } }
@keyframes liquidB { from { transform:rotate(9deg) } to { transform:rotate(5deg) translate(24px,-16px) } }
@keyframes liquidC { from { transform:rotate(-12deg) } to { transform:rotate(-8deg) translate(-24px,14px) } }
@keyframes ripple { 0%{opacity:0;transform:translate(-50%,-50%) scale(.9)} 24%{opacity:.24} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)} }
@keyframes droplet { 0%{transform:translate(0,0) scale(.9);opacity:0} 12%{opacity:.22} 50%{transform:translate(16px,-42px);opacity:.3} 100%{transform:translate(-12px,-88px) scale(.72);opacity:0} }
@keyframes grain { 0%{transform:translate(-1%,-1%)}25%{transform:translate(1%,-2%)}50%{transform:translate(2%,1%)}75%{transform:translate(-1%,2%)}100%{transform:translate(-1%,-1%)} }

@media (max-width: 900px) {
  .logo-stage { width: clamp(175px, 31vw, 305px); }
  .glow-a { width: min(82vw,720px); height: min(82vw,720px); }
}
@media (max-width: 640px) {
  .site-shell { min-height: 500px; }
  .hero { gap: .95rem; padding-inline: 1.15rem; }
  .logo-stage { width: clamp(160px, 43vw, 240px); }
  .status { font-size:.62rem; letter-spacing:.34em; }
  .tagline { max-width:19rem; font-size:.94rem; line-height:1.7; }
  .beam { width:40vw; opacity:.11; }
  .liquid-one { width:94vw; height:34vw; bottom:2%; }
  .liquid-two,.liquid-three { opacity:.07; }
  .ripple { top:61%; }
}
@media (max-width: 420px) {
  .logo-stage { width: clamp(150px, 47vw, 215px); }
  .tagline { max-width:17rem; font-size:.9rem; }
}
@media (max-height: 680px) and (min-width: 641px) {
  .logo-stage { width: clamp(160px, 22vw, 300px); }
  .hero { gap:.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}