@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#06142d;--navy2:#0a2144;--cyan:#59e0f5;--mint:#8df6d1;--white:#f4fbff;--muted:#a7bad0}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 75% 35%,#103b62 0%,transparent 40%),linear-gradient(135deg,#040b1a,#071a34 55%,#041226);color:var(--white);font-family:'DM Sans',sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(#b5f6ff 0.7px,transparent .7px);background-size:27px 27px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.ambient{position:fixed;border-radius:50%;filter:blur(70px);opacity:.18;pointer-events:none}
.ambient-one{width:320px;height:320px;background:#00c9e8;top:10%;right:-100px}.ambient-two{width:280px;height:280px;background:#2865ff;bottom:-120px;left:-90px}
.page-shell{position:relative;max-width:1240px;margin:auto;padding:0 5.5%}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}
.brand-mini{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-dot{width:10px;height:10px;background:var(--cyan);border-radius:50%;box-shadow:0 0 18px #59e0f5}
.status{display:flex;align-items:center;gap:9px;color:#b7c9db;font-size:10px;font-weight:700;letter-spacing:.17em}
.status-light,.pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px #8df6d1;display:inline-block}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;min-height:600px;padding:52px 0 38px}
.hero-copy{position:relative;z-index:2;padding:20px 0}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--cyan);display:flex;align-items:center;gap:11px;margin:0 0 24px}
.eyebrow span{display:block;width:28px;height:1px;background:var(--cyan)}
h1{font-family:Manrope,sans-serif;font-size:clamp(36px,4.5vw,62px);line-height:1.13;letter-spacing:-.055em;margin:0;max-width:620px;font-weight:800}
h1 em{font-style:normal;color:var(--mint);text-shadow:0 0 32px #69f5d322}
.intro{font-size:15px;line-height:1.85;color:#b5c7d9;max-width:470px;margin:24px 0 28px}
.launch-line{display:flex;align-items:center;gap:13px;margin:0 0 34px}
.launch-icon{display:grid;place-items:center;width:43px;height:43px;border:1px solid #8df6d14d;border-radius:13px;color:var(--mint);font-size:22px;background:#8df6d10c}
.launch-line strong,.launch-line small{display:block}.launch-line strong{font-size:13px;letter-spacing:.04em}.launch-line small{font-size:11px;color:#8fa9c0;margin-top:5px}
.progress-wrap{max-width:370px}.progress-label{display:flex;justify-content:space-between;color:#8fa9c0;font-size:10px;margin-bottom:10px}.progress-label span:last-child{color:var(--mint);font-weight:700}
.progress-track{height:4px;background:#ffffff17;border-radius:20px;overflow:hidden}.progress-fill{display:block;height:100%;width:78%;border-radius:20px;background:linear-gradient(90deg,#42cfe9,#8df6d1);box-shadow:0 0 15px #59e0f5;animation:progress-in 1.5s ease-out both}
.visual{position:relative;min-height:480px;display:grid;place-items:center;isolation:isolate}
.visual:before{content:"";position:absolute;width:min(95%,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#30c9e31a,transparent 68%);border:1px solid #8beeff16}
.orbit{position:absolute;border:1px solid #7ce9ff20;border-radius:50%;pointer-events:none}
.orbit-a{width:390px;height:390px;animation:rotate 28s linear infinite}.orbit-b{width:460px;height:260px;transform:rotate(-28deg);border-color:#8df6d11b}
.orbit-a:before,.orbit-b:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan);top:14%;left:19%}
.orbit-b:after{background:var(--mint);box-shadow:0 0 14px var(--mint);top:auto;left:auto;bottom:10%;right:17%}
.logo-card{position:relative;z-index:2;width:min(88%,410px);padding:22px;border:1px solid #ffffff32;border-radius:24px;background:linear-gradient(145deg,#ffffff1b,#ffffff07);box-shadow:0 28px 80px #0007,inset 0 1px #ffffff26;backdrop-filter:blur(12px);transform:translateY(0);animation:float 5.5s ease-in-out infinite}
.logo-card img{position:relative;display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px #0003)}
.logo-glow{position:absolute;inset:15%;background:#00c9e8;filter:blur(70px);opacity:.12}
.fish{position:absolute;z-index:3;width:74px;height:35px;border-radius:60% 45% 45% 60%;background:linear-gradient(140deg,#ffb55b,#ff5c4c);box-shadow:0 0 22px #ff906433;opacity:.86;animation:swim 11s ease-in-out infinite}
.fish:before{content:"";position:absolute;left:12px;right:12px;top:3px;height:9px;border-radius:50%;background:#fff5}
.fish-tail{position:absolute;right:-17px;top:6px;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:21px solid #ff9b50}
.fish-eye{position:absolute;right:10px;top:10px;width:5px;height:5px;background:#06142d;border-radius:50%;box-shadow:1px 1px #fff9}
.fish-one{top:17%;left:4%;transform:scale(.76);animation-delay:-3s}.fish-two{bottom:16%;right:0;transform:scale(.55);background:linear-gradient(140deg,#80f6d6,#30bce9);animation-name:swim-reverse;animation-duration:13s;animation-delay:-5s}.fish-two .fish-tail{border-left-color:#58d9e8}
.bubble{position:absolute;border:1px solid #a4f4ff88;border-radius:50%;background:linear-gradient(135deg,#ffffff18,#4ed7ff08);animation:bubble-rise 7s ease-in infinite}
.bubble-1{width:12px;height:12px;left:15%;bottom:14%;animation-delay:-2s}.bubble-2{width:7px;height:7px;right:13%;top:23%;animation-delay:-4s}.bubble-3{width:17px;height:17px;right:9%;bottom:28%;animation-delay:-1s}.bubble-4{width:8px;height:8px;left:24%;top:13%;animation-delay:-5s}
.water-label{position:absolute;z-index:4;bottom:13px;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:.16em;color:#8faec5;font-weight:700}
.bottom-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:23px 0;border-top:1px solid #ffffff17;border-bottom:1px solid #ffffff17}
.bottom-strip>div{display:flex;align-items:center;gap:12px;padding:7px 12px}
.strip-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--cyan);font-size:20px;background:#59e0f50d;border:1px solid #59e0f51d}
.bottom-strip strong,.bottom-strip small{display:block}.bottom-strip strong{font-size:11px}.bottom-strip small{font-size:10px;color:#8fa9c0;margin-top:5px}
footer{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:64px;color:#6f8aa4;font-size:9px;letter-spacing:.1em}footer b{color:#ff7895}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.5deg)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes swim{0%,100%{translate:0 0;rotate:-5deg}50%{translate:28px -15px;rotate:5deg}}
@keyframes swim-reverse{0%,100%{translate:0 0;rotate:5deg}50%{translate:-30px 12px;rotate:-5deg}}
@keyframes bubble-rise{0%{transform:translateY(25px);opacity:0}20%{opacity:.8}80%{opacity:.5}100%{transform:translateY(-85px);opacity:0}}
@keyframes progress-in{from{width:0}to{width:78%}}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:8px;padding-top:45px}.hero-copy{padding:15px 0 0}.visual{min-height:440px}.intro{max-width:600px}.progress-wrap{max-width:450px}.bottom-strip{gap:5px}.bottom-strip>div{padding:6px}.bottom-strip small{line-height:1.5}.orbit-a{width:340px;height:340px}.orbit-b{width:400px;height:230px}}
@media(max-width:560px){.page-shell{padding:0 6%}.topbar{height:72px}.status{font-size:8px;letter-spacing:.08em;gap:6px}.brand-mini{font-size:12px}h1{font-size:clamp(35px,10vw,48px)}.eyebrow{font-size:8px}.intro{font-size:14px;line-height:1.75}.hero{padding-top:30px}.visual{min-height:340px;margin:0 -10px}.logo-card{width:82%;padding:13px;border-radius:18px}.orbit-a{width:270px;height:270px}.orbit-b{width:310px;height:190px}.fish{scale:.75}.water-label{font-size:7px;bottom:2px}.bottom-strip{grid-template-columns:1fr;gap:8px;padding:17px 0}.bottom-strip>div{padding:6px 0}.bottom-strip small{font-size:10px}footer{flex-wrap:wrap;justify-content:center;text-align:center;padding:18px 0;gap:10px;font-size:8px}footer span{flex:1 1 28%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
