@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{--deep:#010a1a;--navy:#042d55;--ocean:#087dcc;--aqua:#35d2ff;--ice:#c9f2ff;--foam:#f2fbff;--sand:#eaf7fc;--coral:#ff603f;--orange:#ff873c;--gold:#f5bd42;--ink:#041c38;--line:rgba(128,216,255,.24)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--deep),#02152b);color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.site-header{position:absolute;z-index:20;top:0;left:0;width:100%;height:72px;padding:0 clamp(24px,6vw,96px);display:flex;align-items:center;gap:42px;border-bottom:1px solid rgba(53,210,255,.26);background:rgba(1,10,26,.48);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:12px;font:800 21px/1 "Barlow Condensed",sans-serif;letter-spacing:1.2px}
.brand em{font-style:normal;color:var(--aqua)}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--aqua);color:var(--deep);font:900 25px/1 "Barlow Condensed";box-shadow:6px 6px 0 rgba(2,17,27,.55)}
.logo-brand{align-self:stretch;width:270px;justify-content:flex-start}
.logo-brand img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.48))}
.header-wordmark{gap:5px;font-size:19px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.header-wordmark span{color:#dff8ff}
.header-wordmark em{color:var(--coral)}
nav{display:flex;gap:34px;margin-left:auto}
nav a{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.76;transition:.2s}
nav a:hover{opacity:1;color:var(--aqua)}
.nav-cta{padding:13px 18px;background:linear-gradient(135deg,var(--coral),#ff8d48);font:800 13px "Barlow Condensed";letter-spacing:1.3px;text-transform:uppercase;box-shadow:5px 5px 0 #05131b;border:1px solid rgba(255,210,120,.38)}
.hero{min-height:820px;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background:url("oceanworld-hero.png") center 42%/cover no-repeat;overflow:hidden}
.hero:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,transparent 49.6%,rgba(53,210,255,.1) 50%,transparent 50.4%);pointer-events:none}
.hero:after{content:"";position:absolute;z-index:1;left:-5%;right:-5%;bottom:-86px;height:170px;background:var(--sand);border-radius:50% 50% 0 0/32% 32% 0 0;box-shadow:0 -8px 45px rgba(53,210,255,.22)}
.hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(7,125,204,.22) 0%,rgba(2,31,65,.38) 40%,rgba(1,10,26,.91) 100%),linear-gradient(0deg,rgba(1,10,26,.9) 0%,rgba(4,45,85,.16) 62%,rgba(1,10,26,.72) 100%)}
.hero-content{position:relative;z-index:2;width:min(1320px,96%);margin:0 auto;padding:82px 22px 105px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-logo-stage{position:relative;width:min(1180px,94vw);display:grid;place-items:center;margin:0 auto -8px}
.hero-logo-stage:before{content:"";position:absolute;width:72%;height:66%;border-radius:50%;background:radial-gradient(circle,rgba(53,210,255,.25),rgba(7,125,204,.08) 48%,transparent 72%);filter:blur(24px)}
.hero-logo{position:relative;z-index:1;display:block;width:100%;max-height:58vh;object-fit:contain;filter:drop-shadow(0 24px 34px rgba(0,0,0,.72));animation:logo-rise .8s ease-out both}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes logo-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--aqua);font:800 13px "Barlow Condensed";letter-spacing:2.6px;text-transform:uppercase}
.hero .eyebrow{margin:0 0 8px;color:var(--gold);text-shadow:0 2px 10px #001226}
.eyebrow span{width:26px;height:3px;background:currentColor}
h1,h2,h3{margin:0;font-family:"Barlow Condensed",Impact,sans-serif;text-transform:uppercase}
h1{font-size:clamp(62px,8vw,122px);line-height:.78;letter-spacing:-3px;margin:27px 0 30px}
h1 strong,h2 strong{color:var(--aqua)}
.hero-copy{max-width:720px;color:rgba(233,249,255,.86);font-size:15px;line-height:1.6;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hero-actions{display:flex;align-items:stretch;justify-content:center;gap:15px;margin-top:26px}
.server-address,.big-copy{border:1px solid rgba(255,255,255,.7);background:linear-gradient(135deg,#62e3ff,var(--aqua) 58%,#149fe7);color:var(--deep);cursor:pointer;display:flex;align-items:center;gap:13px;padding:15px 20px;text-align:left;box-shadow:7px 7px 0 rgba(0,0,0,.4);transition:transform .15s,box-shadow .15s}
.server-address:hover,.big-copy:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 rgba(0,0,0,.34)}
.server-address small,.big-copy small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;opacity:.64}
.server-address b{font-size:14px}
.status-dot{width:9px;height:9px;background:#0b9b57;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 3px rgba(11,155,87,.25)}
.copy-icon{font-size:19px;margin-left:8px}
.ghost-button{display:flex;align-items:center;gap:16px;padding:0 18px;border:1px solid rgba(53,210,255,.55);background:rgba(2,33,67,.48);font:700 12px "Barlow Condensed";letter-spacing:1.5px;text-transform:uppercase}
.server-facts{display:flex;justify-content:center;gap:0;padding:0;margin:34px 0 0;list-style:none}
.server-facts li{min-width:128px;padding-right:27px;margin-right:27px;border-right:1px solid var(--line)}
.server-facts li:last-child{border:0}
.server-facts b,.server-facts span{display:block}
.server-facts b{font:800 18px "Barlow Condensed";letter-spacing:1px}
.server-facts span{margin-top:3px;font-size:9px;text-transform:uppercase;letter-spacing:1.3px;opacity:.5}
.scroll-cue{position:absolute;right:3.5vw;bottom:105px;z-index:2;display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;font:700 9px Inter;letter-spacing:2px;opacity:.65}
.scroll-cue span{height:42px;width:1px;background:white}
.bubbles{position:absolute;z-index:1;border:1px solid rgba(92,211,255,.3);border-radius:50%;width:12px;height:12px;right:15%;top:34%;box-shadow:35px 85px 0 4px rgba(92,211,255,.09),-18px 170px 0 -2px rgba(92,211,255,.16)}
.bubbles-two{right:35%;top:25%;transform:scale(.6)}
.section{padding:110px clamp(24px,8vw,130px)}
.portals{background:linear-gradient(180deg,#f4fcff,var(--sand));color:var(--ink)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:80px;margin-bottom:55px}
.section-heading>div{flex:1}
.section-heading>p{max-width:410px;color:#3b6480;line-height:1.7;font-size:14px}
.eyebrow.dark{color:var(--ocean)}
h2{font-size:clamp(45px,5.2vw,76px);line-height:.9;letter-spacing:-1.5px}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.portal-card{min-height:340px;padding:28px;position:relative;display:flex;flex-direction:column;justify-content:space-between;border:0;text-align:left;cursor:pointer;overflow:hidden;transition:transform .2s}
.portal-card:hover{transform:translateY(-7px)}
.portal-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-80px;border:30px solid rgba(255,255,255,.06)}
.map-card{background:linear-gradient(145deg,#063d78,var(--ocean));color:#fff;box-shadow:0 18px 38px rgba(4,45,85,.14)}
.discord-card{background:linear-gradient(145deg,#03365e,#087ba4);color:#fff;box-shadow:0 18px 38px rgba(4,45,85,.14)}
.join-card{background:linear-gradient(145deg,var(--coral),var(--orange));color:var(--deep);box-shadow:0 18px 38px rgba(255,96,63,.16)}
.card-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);font-size:24px}
.card-number{position:absolute;right:25px;top:24px;font:700 12px "Barlow Condensed";opacity:.55}
.portal-card p{font:700 10px Inter;text-transform:uppercase;letter-spacing:1.7px;opacity:.65}
.portal-card h3{font-size:32px;line-height:1;margin:11px 0 24px}
.card-link{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.24);padding-top:15px;font:700 11px Inter;text-transform:uppercase;letter-spacing:1.2px}
.world{background:linear-gradient(135deg,#05345f,var(--deep) 76%);display:grid;grid-template-columns:1fr 1fr;gap:10vw;position:relative}
.world:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(50,200,242,.16),transparent 28%),linear-gradient(135deg,transparent 70%,rgba(244,184,61,.05) 70%);pointer-events:none}
.world-copy{position:relative}
.world-copy>p:not(.eyebrow){color:rgba(235,250,248,.62);font-size:14px;line-height:1.8;max-width:510px;margin:30px 0}
.text-link{font:800 12px Inter;text-transform:uppercase;letter-spacing:1.3px;color:var(--aqua);display:inline-flex;gap:18px;border-bottom:1px solid rgba(33,213,207,.3);padding-bottom:8px}
.features{position:relative}
.features article{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.features article>span{font:800 13px "Barlow Condensed";color:var(--aqua);padding-top:5px}
.features h3{font-size:23px;letter-spacing:.4px}
.features p{color:rgba(235,250,248,.56);font-size:13px;line-height:1.65;margin:8px 0 0;max-width:430px}
.join-strip{background:linear-gradient(110deg,#21baf1 0%,#55ddf7 58%,var(--gold) 130%);color:var(--deep);padding:58px clamp(24px,8vw,130px);display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:3px solid rgba(255,255,255,.55)}
.join-strip p{margin:0 0 6px;font:800 11px Inter;text-transform:uppercase;letter-spacing:2px;opacity:.55}
.join-strip h2{font-size:clamp(38px,5vw,66px)}
.big-copy{background:var(--deep);color:white;min-width:300px;justify-content:space-between;box-shadow:7px 7px 0 rgba(5,52,58,.27)}
.big-copy span{font-weight:700}
.big-copy b{font-size:22px;color:var(--aqua)}
footer{padding:35px clamp(24px,8vw,130px);display:flex;align-items:center;gap:40px;background:#020b19;border-top:1px solid rgba(92,202,255,.12)}
.footer-brand{font-size:16px;width:200px;height:66px}
.footer-brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.footer-brand .brand-mark{width:29px;height:29px;font-size:20px;box-shadow:none}
footer p{margin:auto;font-size:10px;opacity:.4}
footer>div{display:flex;gap:22px;font-size:10px;opacity:.55}
.toast{position:fixed;z-index:50;left:50%;bottom:28px;transform:translate(-50%,90px);padding:13px 20px;background:#fff;color:var(--deep);font-weight:700;font-size:12px;box-shadow:6px 6px 0 rgba(0,0,0,.25);opacity:0;transition:.25s}
.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:900px){nav{display:none}.site-header{height:70px}.nav-cta{margin-left:auto}.hero{min-height:790px}.hero-logo-stage{width:98vw}.hero-logo{max-height:53vh}.portal-grid{grid-template-columns:1fr}.portal-card{min-height:270px}.section-heading,.join-strip{align-items:flex-start;flex-direction:column}.world{grid-template-columns:1fr;gap:55px}.scroll-cue{display:none}}
@media(max-width:580px){.site-header{padding:0 14px;height:66px;gap:10px}.brand{font-size:16px}.header-wordmark{font-size:16px}.brand-mark{width:30px;height:30px;font-size:21px}.nav-cta{padding:10px 10px;font-size:11px}.hero{min-height:760px}.hero-content{width:100%;padding:70px 12px 90px}.hero-logo-stage{width:110vw;margin-left:-5vw}.hero-logo{max-height:43vh}.hero .eyebrow{margin-top:6px}.hero-copy{font-size:14px;max-width:94%}.hero-actions{width:100%;flex-direction:column;align-items:stretch}.ghost-button{min-height:50px;justify-content:center}.server-address{justify-content:center}.server-facts{width:100%;margin-top:25px}.server-facts li{min-width:0;flex:1;padding-right:8px;margin-right:8px}.server-facts b{font-size:15px}.server-facts span{font-size:8px}.section{padding:80px 22px}.section-heading{gap:25px}.join-strip{padding:45px 22px}.big-copy{min-width:100%;width:100%}footer{align-items:flex-start;flex-direction:column;gap:20px}footer p{margin:0}.footer-brand{width:190px}.portal-card h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}