:root {
  --ink: #e9ffff;
  --muted: #a6ccd0;
  --deep: #042d41;
  --ocean: #075c72;
  --aqua: #9cf3df;
  --lime: #c9ff74;
  --line: rgba(200, 255, 249, 0.2);
  --shell: min(1192px, calc(100% - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink);
  background: #053c51; font-family: Manrope, Arial, sans-serif;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .18;
  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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; position: relative; }

.water-light { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.water-light--one { width: 58vw; height: 68vw; top: -35vw; right: -16vw; background: radial-gradient(ellipse, rgba(68, 216, 221, .24), transparent 65%); }
.water-light--two { width: 55vw; height: 55vw; top: 60vw; left: -32vw; background: radial-gradient(ellipse, rgba(83, 233, 193, .13), transparent 67%); }

.site-header { height: 104px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 600 14px/1 Unbounded, sans-serif; letter-spacing: .08em; }
.brand-mark { width: 29px; height: 29px; border: 1px solid rgba(212, 255, 251, .75); display: grid; place-items: center; transform: rotate(45deg); }
.brand-mark span { width: 10px; height: 10px; display: block; background: var(--lime); box-shadow: 0 0 15px var(--lime); }
.main-nav { display: flex; gap: 35px; font-size: 12px; font-weight: 700; color: #d3f1ef; }
.main-nav a { transition: color .2s; }.main-nav a:hover { color: var(--lime); }
.header-cta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; }
.header-cta span { color: var(--lime); font-size: 18px; }

.hero { min-height: 630px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; padding: 45px 0 80px; z-index: 1; }
.hero-copy { padding-top: 23px; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 23px; font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .16em; color: var(--aqua); }
.eyebrow span { width: 8px; height: 8px; background: var(--lime); transform: rotate(45deg); }
h1, h2 { margin: 0; font-family: Unbounded, sans-serif; font-weight: 600; letter-spacing: -.06em; }
h1 { max-width: 630px; font-size: clamp(42px, 5.4vw, 75px); line-height: 1.1; }
h1 em, h2 em { color: var(--lime); font-style: normal; }
.hero-text { max-width: 420px; margin: 29px 0 35px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 29px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 19px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.button--primary { padding: 17px 19px 17px 23px; color: #073d4d; background: var(--lime); box-shadow: 0 10px 28px rgba(157, 255, 119, .15); transition: transform .2s, box-shadow .2s; }
.button--primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(157, 255, 119, .28); }
.button--primary span { font-size: 18px; }.button--text { color: #d8f4f1; }.button--text span { color: var(--aqua); font-size: 17px; }

.hero-aquarium { height: 455px; margin: 0 -37px 0 0; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(210, 255, 252, .36); border-radius: 200px 200px 20px 20px; background: linear-gradient(160deg, rgba(186,255,246,.24), rgba(4,89,116,.5) 27%, rgba(3,62,84,.8) 80%), #0b7589; box-shadow: inset 18px 10px 50px rgba(195, 255, 251, .12), 0 35px 80px rgba(0, 16, 36, .27); }
.hero-aquarium::before { content: ""; position: absolute; inset: 0; opacity: .7; background: linear-gradient(108deg, transparent 22%, rgba(221,255,255,.28) 30%, transparent 31%); z-index: 4; pointer-events: none; }
.aquarium-glow { position: absolute; width: 350px; height: 250px; left: 38%; bottom: 70px; border-radius: 50%; background: rgba(104, 255, 210, .33); filter: blur(45px); }
.waterline { position: absolute; top: 53px; left: -2%; width: 104%; height: 18px; border-top: 3px solid rgba(223,255,254,.85); border-radius: 50%; opacity: .85; }
.ripple { position: absolute; left: 9%; width: 65%; height: 27px; border-top: 2px solid rgba(195, 255, 249, .4); border-radius: 50%; }.ripple--a { top: 72px; transform: rotate(1deg); }.ripple--b { top: 93px; left: 36%; width: 50%; opacity: .55; }
.sand { position: absolute; height: 96px; bottom: -31px; left: -10%; right: -10%; border-radius: 50% 50% 0 0; background: linear-gradient(#bfd89f, #779574); transform: rotate(-3deg); }
.plant { position: absolute; bottom: 61px; width: 80px; height: 190px; z-index: 2; }.plant--left { left: 19%; }.plant--right { right: 12%; transform: scale(.75) rotate(4deg); opacity: .88; }
.plant b { position: absolute; bottom: 0; width: 28px; height: 170px; transform-origin: bottom; border-radius: 100% 0 100% 0; background: linear-gradient(90deg, #317c70, #8fe0a8); box-shadow: inset 5px 0 7px rgba(2, 71, 83, .45); }
.plant b:nth-child(1) { left: 22px; transform: rotate(-24deg); }.plant b:nth-child(2) { left: 40px; height: 134px; transform: rotate(26deg) scaleX(-1); }.plant b:nth-child(3) { left: 10px; height: 100px; transform: rotate(-45deg) scale(.7); }
.coral { position: absolute; bottom: 62px; z-index: 3; border-radius: 28px 28px 11px 11px; background: #b3f188; box-shadow: -15px 13px 0 -3px #81c383, 13px 11px 0 -5px #c9fda2; }.coral--one { left: 49%; width: 30px; height: 70px; }.coral--two { right: 35%; width: 19px; height: 44px; background: #daef96; }
.fish { position: absolute; z-index: 3; width: 73px; height: 39px; border-radius: 55% 43% 45% 55%; background: #dbfb91; box-shadow: inset -9px -7px 0 rgba(76, 160, 124, .3), 0 8px 15px rgba(1, 47, 67, .18); }.fish::after { content: ""; position: absolute; left: -20px; top: 7px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 26px solid #aedf84; }.fish span { position: absolute; right: 12px; top: 11px; width: 5px; height: 5px; background: #164d57; border-radius: 50%; }.fish b { position: absolute; width: 10px; height: 12px; left: 20px; top: -8px; border-radius: 8px 0; background: #8ecb81; }.fish--one { top: 145px; left: 27%; transform: scale(.8) rotate(-7deg); animation: drift 6s ease-in-out infinite; }.fish--two { top: 250px; right: 20%; transform: scale(.58) scaleX(-1); animation: drift 8s -3s ease-in-out infinite reverse; }
.glass-reflection { position: absolute; z-index: 5; inset: 0; background: linear-gradient(115deg, transparent 17%, rgba(255,255,255,.2) 19%, transparent 21%, transparent 63%, rgba(224,255,252,.1) 65%, transparent 68%); pointer-events: none; }
.aquarium-label { position: absolute; z-index: 6; display: flex; align-items: flex-start; gap: 13px; right: 23px; bottom: 20px; padding: 9px 12px; border: 1px solid rgba(240, 255, 252, .34); background: rgba(3, 72, 91, .28); backdrop-filter: blur(5px); }.aquarium-label span { color: var(--lime); font: 500 10px "DM Mono"; }.aquarium-label p { margin: 0; font: 600 8px/1.45 "DM Mono"; letter-spacing: .08em; }
.hero-meta { position: absolute; bottom: 31px; left: 0; right: 0; display: flex; justify-content: space-between; color: #8fbec1; font: 500 9px/1 "DM Mono"; letter-spacing: .12em; }.hero-meta p { margin: 0; }.hero-meta span { width: 4px; height: 4px; margin: 0 8px 2px; display: inline-block; background: var(--lime); transform: rotate(45deg); }

.marquee { overflow: hidden; padding: 15px 0; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(3, 59, 78, .55); }.marquee-track { width: max-content; display: flex; align-items: center; gap: 24px; animation: scroll 26s linear infinite; font: 500 10px "DM Mono"; letter-spacing: .16em; color: #d7f5f1; }.marquee b { color: var(--lime); font-size: 13px; }

.about { padding: 152px 0 144px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 90px; }.section-intro h2, .world-copy h2, .start h2 { font-size: clamp(33px, 4vw, 53px); line-height: 1.2; }.about-copy { padding-top: 44px; }.about-copy > p { max-width: 450px; margin: 0 0 32px; color: #b7d5d5; font-size: 15px; line-height: 1.82; }.underlined-link { display: inline-flex; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid var(--lime); color: var(--lime); font-size: 12px; font-weight: 800; }.underlined-link span { font-size: 17px; line-height: .7; }
.feature-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 76px; }.feature-card { min-height: 270px; padding: 25px; position: relative; overflow: hidden; border: 1px solid rgba(206,255,250,.18); }.feature-card--aqua { background: linear-gradient(140deg, #117b83, #096274); }.feature-card--deep { background: linear-gradient(145deg, #063d55, #062f47); }.feature-card--glass { background: linear-gradient(145deg, rgba(38, 154, 155, .8), rgba(7, 86, 105, .85)); }.feature-card::after { content: ""; position: absolute; width: 280px; height: 190px; border: 1px solid rgba(191,255,244,.22); border-radius: 50%; right: -120px; top: -95px; }.feature-number { color: #c9eeea; font: 500 10px "DM Mono"; }.feature-icon { height: 88px; margin: 13px 0 2px; position: relative; }.feature-icon i { position: absolute; display: block; }.icon-water i { width: 72px; height: 25px; left: 0; top: 24px; border-top: 3px solid var(--lime); border-radius: 50%; transform: rotate(-9deg); }.icon-water i:nth-child(2) { top: 40px; left: 17px; width: 60px; opacity: .75; }.icon-water i:nth-child(3) { top: 56px; left: 0; width: 47px; opacity: .5; }.icon-cube i { left: 9px; top: 11px; width: 45px; height: 45px; transform: rotate(30deg) skew(-1deg, -1deg); border: 2px solid var(--lime); box-shadow: 12px 9px 0 -2px transparent; }.icon-people i { width: 18px; height: 18px; border: 2px solid var(--lime); border-radius: 50%; top: 20px; left: 26px; }.icon-people i::after { content:""; position:absolute; width: 28px; height: 17px; border: 2px solid var(--lime); border-bottom: 0; border-radius: 25px 25px 0 0; top: 22px; left: -7px; }.icon-people i:nth-child(2) { transform: scale(.66); left: 1px; top: 33px; opacity: .65; }.icon-people i:nth-child(3) { transform: scale(.66); left: 48px; top: 33px; opacity: .65; }.feature-card h3 { margin: 0 0 9px; font: 600 19px/1.2 Unbounded; letter-spacing: -.05em; }.feature-card p { max-width: 270px; margin: 0; font-size: 12px; line-height: 1.65; color: #b9d8d5; }

.world-section { padding: 111px 0; position: relative; background: #052f45; overflow: hidden; }.world-section::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(35, 159, 163, .23), transparent 64%); left: 45%; top: -310px; }.world-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 110px; }.world-card { height: 393px; position: relative; overflow: hidden; background: linear-gradient(#178c9d, #9ed9bd 63%, #438e7a 63%); border: 1px solid rgba(211, 255, 247, .24); box-shadow: 20px 20px 0 rgba(4, 76, 95, .6); }.world-card__sun { position: absolute; width: 83px; height: 83px; right: 79px; top: 56px; border-radius: 50%; background: #dffff3; box-shadow: 0 0 40px rgba(210,255,227,.5); }.world-card__hills { position: absolute; left: -8%; right: -4%; height: 150px; transform: skewX(-17deg); }.world-card__hills--back { top: 143px; background: #277c79; }.world-card__hills--front { top: 191px; background: #1b685f; }.world-card__water { position: absolute; left: -3%; right: -3%; bottom: 0; height: 115px; background: repeating-linear-gradient(176deg, #217f84 0 8px, #51a5a0 8px 12px); }.world-card__block { position: absolute; z-index: 3; width: 72px; height: 85px; bottom: 65px; background: linear-gradient(135deg, #8fbf73 0 31%, #558755 31% 67%, #416f58 67%); box-shadow: inset 0 10px 0 rgba(199, 236, 141, .75); }.block--one { left: 80px; }.block--two { left: 150px; width: 49px; height: 52px; background: linear-gradient(135deg, #87b469 0 31%, #4f8050 31% 67%, #356451 67%); }.world-card__cloud { position: absolute; width: 90px; height: 11px; background: rgba(218,255,247,.7); }.cloud--one { top: 72px; left: 74px; }.cloud--two { top: 123px; right: 64px; width: 51px; opacity: .7; }.world-card p { position: absolute; z-index: 5; left: 26px; bottom: 20px; margin: 0; color: #eaffef; font: 600 13px/1.45 Unbounded; letter-spacing: -.05em; text-shadow: 0 2px 8px #135a64; }.world-copy > p:not(.eyebrow) { max-width: 450px; margin: 25px 0 37px; color: #aacccf; font-size: 14px; line-height: 1.8; }.world-stats { display: flex; gap: 31px; }.world-stats div { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; }.world-stats strong { color: var(--lime); font: 600 28px/1 Unbounded; letter-spacing: -.09em; }.world-stats span { color: #90bbc0; font: 500 8px/1.4 "DM Mono"; letter-spacing: .07em; }

.start { padding: 155px 0 132px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }.start-title { align-self: start; }.start-description { max-width: 340px; margin: 25px 0 0; color: #a8cacc; font-size: 13px; line-height: 1.75; }.join-panel { padding: 27px 30px 25px; position: relative; background: linear-gradient(135deg, rgba(22, 128, 135, .85), rgba(5, 66, 88, .82)); border: 1px solid rgba(202, 255, 249, .27); box-shadow: 0 22px 55px rgba(2, 25, 43, .2); }.join-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(107deg, transparent 24%, rgba(206, 255, 252, .11) 25%, transparent 26%); pointer-events: none; }.join-panel__top, .join-panel__bottom { display: flex; align-items: center; justify-content: space-between; position: relative; }.join-panel__top { padding-bottom: 27px; border-bottom: 1px solid rgba(203,255,249,.21); }.status { font: 500 9px "DM Mono"; color: #d5f5ed; letter-spacing: .09em; }.status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }.join-panel__top > p { margin: 0; color: #94c4c7; font: 500 9px "DM Mono"; letter-spacing: .08em; }.ip-row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }.ip-row span, .join-panel__bottom > span { display: block; color: #93c0c2; font: 500 9px "DM Mono"; letter-spacing: .11em; }.ip-row strong { display: block; margin-top: 10px; color: #f0ffff; font: 500 21px/1.1 Unbounded; letter-spacing: -.06em; }.copy-button { display: flex; gap: 9px; align-items: center; padding: 12px 14px; border: 1px solid var(--lime); color: var(--lime); background: rgba(2, 58, 74, .2); cursor: pointer; font: 600 9px "DM Mono"; letter-spacing: .07em; transition: background .2s, color .2s; }.copy-button:hover { color: #063c4b; background: var(--lime); }.copy-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }.discord-apply { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 16px; margin-bottom: 22px; color: #073c4b; background: var(--lime); transition: transform .2s, box-shadow .2s; }.discord-apply:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(157,255,119,.22); }.discord-apply span { font: 500 10px "DM Mono"; }.discord-apply strong { font: 700 10px Manrope, sans-serif; letter-spacing: .04em; }.discord-apply b { font-size: 20px; font-weight: 400; }.join-panel__bottom { padding-top: 22px; border-top: 1px solid rgba(203,255,249,.21); }.join-panel__bottom strong { color: var(--aqua); font: 500 12px "DM Mono"; }.join-note { position: absolute; right: 0; top: 48px; color: #9ac9c5 !important; opacity: .7; font-size: 7px !important; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 29px 0; border-top: 1px solid var(--line); }.site-footer p { margin: 0; color: #83b0b4; font: 500 9px "DM Mono"; letter-spacing: .07em; }.site-footer p:last-child { text-align: right; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 13px 17px; transform: translate(-50%, 80px); opacity: 0; color: #053a4a; background: var(--lime); box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: 11px; font-weight: 800; transition: opacity .25s, transform .25s; }.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.bubbles { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }.bubbles i { position: absolute; border: 1px solid rgba(194,255,251,.27); border-radius: 50%; animation: float 10s infinite linear; }.bubbles i:nth-child(1) { width: 15px; height: 15px; top: 190px; left: 8%; animation-duration: 8s; }.bubbles i:nth-child(2) { width: 6px; height: 6px; top: 380px; left: 88%; animation-delay: -3s; }.bubbles i:nth-child(3) { width: 12px; height: 12px; top: 800px; left: 13%; animation-delay: -7s; }.bubbles i:nth-child(4) { width: 23px; height: 23px; top: 1050px; left: 93%; animation-duration: 13s; animation-delay: -1s; }.bubbles i:nth-child(5) { width: 7px; height: 7px; top: 1510px; left: 6%; animation-delay: -4s; }.bubbles i:nth-child(6) { width: 18px; height: 18px; top: 1870px; left: 85%; animation-duration: 12s; }.bubbles i:nth-child(7) { width: 10px; height: 10px; top: 2220px; left: 23%; animation-delay: -6s; }.bubbles i:nth-child(8) { width: 5px; height: 5px; top: 2680px; left: 75%; }.bubbles i:nth-child(9) { width: 16px; height: 16px; top: 2400px; left: 90%; animation-delay: -8s; }
@keyframes float { 50% { transform: translateY(-43px) translateX(15px); } 100% { transform: translateY(-90px) translateX(-3px); } }
@keyframes drift { 50% { translate: 19px -8px; rotate: 3deg; } }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (max-width: 820px) { :root { --shell: min(100% - 40px, 640px); }.site-header { height: 82px; }.main-nav { display: none; }.hero { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: 54px 0 85px; }.hero-copy { padding: 0; }.hero-aquarium { height: min(105vw, 430px); margin: 54px -8px 0; }.hero-meta { bottom: 31px; }.about, .world-layout, .start { display: block; }.about { padding: 91px 0 89px; }.about-copy { padding-top: 26px; }.feature-grid { grid-template-columns: 1fr; margin-top: 53px; }.feature-card { min-height: 225px; }.world-section { padding: 80px 0; }.world-card { height: 330px; margin-bottom: 68px; }.world-copy > p:not(.eyebrow) { margin-bottom: 28px; }.start { padding: 96px 0 82px; }.join-panel { margin-top: 45px; padding: 22px 19px; }.join-panel__bottom { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; }.join-note { position: static; grid-column: 1 / -1; margin-top: 10px; }.site-footer { grid-template-columns: 1fr; gap: 21px; }.site-footer p:last-child { text-align: left; }.site-footer p:nth-of-type(1) { order: 3; }.world-stats { gap: 20px; }.world-stats strong { font-size: 23px; } }
@media (max-width: 450px) { h1 { font-size: 38px; }.hero-text { font-size: 13px; }.hero-actions { gap: 17px; }.button { font-size: 10px; }.button--primary { padding-left: 16px; padding-right: 13px; }.header-cta { font-size: 11px; }.brand { font-size: 11px; }.world-stats { display: grid; grid-template-columns: 1fr 1fr; }.ip-row strong { font-size: 15px; }.copy-button span { display: none; }.copy-button { padding: 11px; }.aquarium-label { right: 12px; bottom: 13px; } }