*{ box-sizing:border-box } 
:root {
	--navy:#020c16;
	--blue:#087df1;
	--cyan:#25d8ff;
	--white:#f5fbff;
	--muted:#a8bdcb;
	--line:rgba(116,190,226,.22);
	--display:"Space Grotesk",sans-serif;--body:"IBM Plex Sans",sans-serif;
	--mono:"IBM Plex Mono",monospace
}
		
body {
	margin:0
	background:var(--navy);
	color:var(--white);
	font-family:var(--body)
	}
a{color:inherit}
	
.page{
	min-height:100vh;overflow:hidden;position:relative;
	/* background:radial-gradient(circle at 78% 8%,rgba(27,151,218,.17),transparent 28%), linear-gradient(180deg,#04192a,#02111f 55%,#010a13);  */
	position:relative
}
.page:after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            180deg,
            rgba(1, 10, 20, 0.16),
            rgba(1, 8, 17, 0.72)
        ),
        url("underwater-background.png");

    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #020d17;

    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.header,main,footer{width:min(1120px,calc(100% - 48px));margin:auto;position:relative;z-index:2}

.header{padding:28px 0;display:flex;justify-content:space-between;align-items:center}

.brand{display:grid;grid-template-columns:45px auto;grid-template-rows:auto auto;column-gap:10px;text-decoration:none}

.mark{grid-row:1/3;width:45px;color:var(--blue)}

.mark svg{width:100%;height:100%}

.mark circle, .mark path:not(:last-child){stroke:currentColor;stroke-width:2.5}

.name{font:600 29px var(--display);letter-spacing:-.05em}

.name span,.footer-brand>span span{color:var(--blue)}

.tagline{font:500 8px var(--mono);letter-spacing:.17em;color:#9eb4c1}

.status{font:500 10px var(--mono);color:#8da9b8}

.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:8px;box-shadow:0 0 14px var(--cyan)}

.hero{position:relative;min-height:700px;padding:70px 0 50px;display:grid;grid-template-columns:1fr 470px;gap:55px;align-items:center}

.hero-copy{position:relative;z-index:3}

.eyebrow,.notify-title{color:var(--cyan);font:500 11px var(--mono);letter-spacing:.2em}

.hero h1{font:600 clamp(48px,6vw,76px)/.98 var(--display);letter-spacing:-.055em;margin:20px 0 0;max-width:650px}

.hero h1 em{display:block;font-style:normal;color:transparent;background:linear-gradient(90deg,#0e91ff,#28d6ff);background-clip:text;-webkit-background-clip:text}

.wave{display:flex;align-items:center;gap:13px;color:var(--cyan);margin:28px 0 20px}

.wave span{width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(37,216,255,.7))}

.wave b{font-size:24px;font-weight:400}

.lead{max-width:630px;color:#b5c7d2;font-size:16px;line-height:1.72}

.construction{
	position:relative;
	z-index:5;
	text-align:center;
	padding:38px 32px 30px;
	border:1px solid rgba(95,192,237,.36);
	border-radius:18px;
	background:linear-gradient(145deg,rgba(5,35,58,.66),rgba(1,13,25,.80));
	box-shadow:0 25px 70px rgba(0,0,0,.35);
	backdrop-filter:blur(10px)
}
.helmet{font-size:40px;color:var(--blue);margin-bottom:15px}
.construction>p{color:#1db9ff;font:500 12px var(--mono);letter-spacing:.22em}
.construction h2{font:600 23px var(--display);margin:14px 0 8px}
.construction>div:not(.progress){color:#b4c5d0;line-height:1.65;font-size:14px}
.progress{height:3px;background:rgba(255,255,255,.08);margin:24px 0 8px;border-radius:8px;overflow:hidden}
.progress span{display:block;width:63%;height:100%;background:linear-gradient(90deg,#0678f0,#22d5ff);animation:progress 3s ease-in-out infinite alternate}
.construction small{display:flex;justify-content:space-between;color:#6f8998;font:500 8px var(--mono);letter-spacing:.1em}@keyframes progress{to{width:73%}}

.head{position:absolute;left:175px;top:63px;width:43px;height:33px;border-radius:60%;background:#27586a}
.f{position:absolute;width:85px;height:25px;border-radius:80% 20% 70% 20%;background:#214d5e}
.a{left:15px;top:30px;transform:rotate(-28deg)}
.b{left:25px;top:102px;transform:rotate(28deg)}.c{right:13px;top:27px;transform:rotate(18deg)}
.d{right:8px;top:108px;transform:rotate(-20deg)}
.reef{position:absolute;right:0;bottom:-2%;width:40%;height:28%;border-radius:70% 30% 0 0;background:linear-gradient(#0c3c48,#061d29)}
.particles{
	position:absolute;inset:0;background-image:radial-gradient(circle,rgba(180,238,255,.6) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(180,238,255,.3) 0 1px,transparent 1.5px);
background-size:110px 130px,170px 180px;animation:drift 12s linear infinite}

@keyframes drift{to{background-position:20px -100px,80px 0}}
.capabilities{position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.capabilities article{text-align:center;min-height:175px;padding:30px 22px}
.capabilities article+article{border-left:1px solid var(--line)}
.capabilities strong{display:block;color:#13aaff;font-size:28px;margin-bottom:12px}
.capabilities h3{font:600 17px var(--display);margin:0}
.capabilities p{color:#8fa8b7;font-size:12px;line-height:1.55;max-width:190px;margin:8px auto}
.notify{width:min(900px,100%);margin:42px auto 38px;padding:26px 32px;
display:grid;grid-template-columns:55px 1fr;gap:0 20px;align-items:center;border:1px solid rgba(65,165,213,.32);border-radius:16px;
background:linear-gradient(135deg,rgba(6,37,59,.86),rgba(3,23,38,.82))}
.mail{width:48px;height:48px;display:grid;place-items:center;
border:1px solid rgba(44,177,237,.5);border-radius:50%;color:var(--blue);font-size:22px}
.notify-title{margin:0}
.notify p:not(.notify-title){margin:5px 0 0;color:#c1ced6;font-size:13px}
.notify form{grid-column:2;display:flex;gap:7px;margin-top:17px}
.notify input{flex:1;min-width:0;height:48px;padding:0 15px;color:white;border:1px solid rgba(96,166,204,.35);border-radius:6px;background:rgba(0,10,20,.38);outline:0}
.notify input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,155,255,.12)}
.notify button{height:48px;padding:0 25px;color:#fff;border:0;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#087df1,#1161dd);font-weight:600}
.notify small{grid-column:2;margin-top:8px;color:#507080;font-size:10px}footer{padding:26px 0 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;border-top:1px solid rgba(116,190,226,.16)}
.footer-brand{display:grid;grid-template-columns:33px auto;width:max-content;align-items:center}
.footer-mark{grid-row:span 2;font-size:30px;color:var(--blue)}
.footer-brand>span:not(.footer-mark){font:500 22px var(--display)}
.footer-brand small{grid-column:1/3;color:#506a79;font-size:9px;margin-top:7px}
.social{text-align:center}.social p{margin:0 0 13px;color:#7e96a4;font:500 9px var(--mono);letter-spacing:.25em}
.social div{display:flex;justify-content:center;gap:16px}
.social a{text-decoration:none;color:#8ca5b3;font-weight:600}
.location{justify-self:end;display:flex;gap:10px;color:#718a98;font-size:10px;line-height:1.5}
.location:first-letter{color:var(--blue);font-size:25px}
.location b{color:#9fb4bf;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:900px){
	.hero{grid-template-columns:1fr;min-height:auto;padding:55px 0 40px}
	.scene{inset:0 -25% -10px 20%;opacity:.35}
	.construction{width:100%}
	.capabilities{grid-template-columns:1fr 1fr}
	.capabilities article:nth-child(3){border-left:0;border-top:1px solid var(--line)}
	.capabilities article:nth-child(4){border-top:1px solid var(--line)}footer{grid-template-columns:1fr 1fr}
	.social{grid-column:1/-1;grid-row:2}}
		
@media(max-width:620px){
	.header,main,footer{width:calc(100% - 30px)}
	.header{padding:20px 0}
	.status{display:none}
	.tagline{display:none}
	.hero{padding-top:35px}
	.hero h1{font-size:clamp(43px,14vw,62px)}
	.lead{font-size:14px}
	.construction{padding:30px 20px 25px}
	.capabilities{grid-template-columns:1fr 1fr}
	.capabilities article{padding:25px 12px;min-height:155px}
	.capabilities h3{font-size:15px}
	.capabilities p{font-size:11px}
	.notify {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 25px 20px;
	}

	.mail {
		margin: 0 auto 25px;
	}

	.notify form,
	.notify small {
		grid-column: 1;
	}

	.notify form {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}

	.notify input {
		width: 100%;
		height: 48px;
		min-height: 48px;
		max-height: 48px;
		padding: 0 15px;
		box-sizing: border-box;
		flex: none;
		font-size: 14px;
		line-height: 48px;
	}

	.notify button {
		width: 100%;
		height: 48px;
		min-height: 48px;
	}

	footer {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.footer-brand,.location{justify-self:center}
	.social{grid-column:auto;grid-row:auto}.location{justify-content:center}
}

@media(prefers-reduced-motion:reduce)
{*{animation:none!important;scroll-behavior:auto!important}}