*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--void:#05070b;
--void-2:#0a0e15;
--ink:#d6eaff; /* pale blue-white for display type */
--white:#ffffff;
--muted:#8b96a8;
--line:rgba(214,234,255,0.14);
--brand:#0d9488; /* logo teal */
--brand-hi:#2dd4bf;
--blue:#2f6fe0;
--blue-hi:#4a86f0;
--display:'Inter Tight',sans-serif;
--ui:'Archivo Narrow',sans-serif;
--gutter:clamp(16px,3.2vw,48px);
}
html{scroll-behavior:smooth}
body{font-family:var(--display);background:var(--void);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
/* ACCESSIBILITY ----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.visually-hidden{
position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
.skip-link{
position:absolute;left:50%;top:0;transform:translate(-50%,-140%);z-index:200;
background:var(--blue);color:var(--white);
font-family:var(--ui);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
padding:.7rem 1.2rem;transition:transform .18s ease;
}
.skip-link:focus{transform:translate(-50%,0)}
/* FILM GRAIN — one fixed layer over everything, the texture that keeps the
flat blacks from reading as a screen. Static noise, so no motion cost. */
.grain{
position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.09;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* UI TYPE — the small condensed uppercase voice for nav, chips, labels */
.ui{font-family:var(--ui);text-transform:uppercase;letter-spacing:.02em}
/* NAV — links left, mark centred, contact right */
nav{
position:absolute;top:0;left:0;right:0;z-index:100;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
padding:1.6rem var(--gutter);
}
.nav-links{display:flex;gap:1.6rem;grid-column:1;grid-row:1}
.nav-links a{
font-family:var(--ui);font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;
text-decoration:none;color:var(--white);transition:opacity .2s;
}
.nav-links a:hover{opacity:.7}
.nav-links a[aria-current="page"]{color:var(--brand-hi)}
.nav-cta.btn{justify-self:end;font-size:.95rem;padding:.5rem 1.1rem;grid-column:3;grid-row:1}
.nav-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--white);grid-column:2;grid-row:1}
.nav-logo img{width:26px;height:26px;display:block;border-radius:5px}
.nav-logo span{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.04em}
/* HERO — black sky, giant spaced wordmark, and a bright horizon that curves
up out of the bottom of the screen with the seagrass photo inside it. */
.hero{
position:relative;overflow:hidden;
min-height:max(100svh,640px);
display:flex;flex-direction:column;justify-content:flex-end;
padding:0 var(--gutter) clamp(2.5rem,7vh,4.5rem);
background:radial-gradient(120% 70% at 50% 100%,#0d1a2e 0%,var(--void) 60%);
}
.hero-word{
position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(6.5rem,15vh,9.5rem);
display:flex;justify-content:space-between;
font-family:var(--display);font-weight:200;line-height:1;
font-size:clamp(3.2rem,9.5vw,9rem);
color:var(--ink);text-transform:uppercase;
user-select:none;
}
.horizon{
position:absolute;left:50%;top:57%;
width:max(170vw,1100px);aspect-ratio:1;
transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(closest-side,transparent 92%,rgba(214,234,255,.55) 99.4%,rgba(255,255,255,.9) 100%),
linear-gradient(180deg,rgba(214,234,255,.35) 0%,rgba(5,7,11,.15) 9%,rgba(5,7,11,.55) 22%),
url("hero-bg.jpg") center top/100% auto no-repeat,
#0b2a2c;
box-shadow:0 -30px 120px 10px rgba(110,160,255,.35),0 -6px 30px rgba(190,215,255,.35);
}
.hero-foot{
position:relative;z-index:2;
/* a tight dark halo plus a wide one keeps the copy readable where it crosses the bright rim */
filter:drop-shadow(0 0 3px rgba(5,7,11,.9)) drop-shadow(0 1px 18px rgba(5,7,11,.85));
display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.hero h1{
font-family:var(--display);font-weight:500;
font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.055em;
color:var(--white);max-width:16ch;
}
.hero-sub{margin-top:1rem;max-width:44ch;font-size:1rem;font-weight:300;line-height:1.6;color:#fff}
/* BACKED BY — small monochrome credit in the hero's bottom corner */
.backed{
position:relative;z-index:2;
display:flex;align-items:center;gap:1.6rem;
}
.backed-label{font-family:var(--ui);font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.backed-logo{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.backed-logo img{height:30px;width:auto;display:block}
.backed-logo span{font-family:var(--ui);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#fff}
/* BUTTONS — square, solid blue, condensed caps */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--ui);font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em;
padding:.7rem 1.8rem;background:var(--blue);color:var(--white);text-decoration:none;
border:0;cursor:pointer;transition:background .2s;
}
.btn:hover{background:var(--blue-hi)}
.btn:disabled{opacity:.6;cursor:progress}
/* Big type never leaves a lone word on its last line. */
.hero h1,.section-h,.statement-h,.page-lead{text-wrap:balance}
/* SECTIONS */
section.content{padding:clamp(4.5rem,10vw,8rem) var(--gutter);border-top:1px solid var(--line)}
section.vehicle{padding-bottom:0}
/* the pinned 3D canvas already leaves space below the model */
section.vehicle + section.content{padding-top:clamp(2.5rem,5vw,4rem)}
.inner{max-width:1180px;margin:0 auto}
.eyebrow{
font-family:var(--ui);font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;
color:var(--brand-hi);margin-bottom:1rem;
}
.section-h{
font-family:var(--display);font-weight:400;
font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-.045em;
color:var(--white);max-width:20ch;
}
.section-h em{font-style:normal;color:var(--ink);opacity:.55}
.section-p{font-size:1rem;font-weight:300;color:var(--muted);line-height:1.75;max-width:52ch;margin-top:1.1rem}
/* PAGE — the About-style layout Mission, Technology and Team share: a
giant spaced title, one lead line, then a single quiet column. */
.page{
padding:clamp(9rem,20vh,13rem) var(--gutter) clamp(5rem,10vw,8rem);
background:radial-gradient(90% 45% at 50% 0%,#0d1a2e 0%,var(--void) 70%);
}
.page-title{
display:flex;justify-content:space-between;max-width:960px;margin:0 auto;
font-weight:200;font-size:clamp(2.4rem,7.5vw,6.5rem);line-height:1;
color:var(--ink);text-transform:uppercase;
}
.page-lead{
text-align:center;margin:3rem auto 0;max-width:22ch;
font-weight:500;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.15;letter-spacing:-.045em;color:var(--white);
}
.page-lead em{font-style:normal;color:var(--ink);opacity:.55}
.page .tech-grid{margin-top:4rem}
/* MISSION STATEMENT — one big line, GRU-style */
.statement{text-align:center;padding-top:clamp(6rem,14vw,11rem);padding-bottom:clamp(6rem,14vw,11rem)}
.statement-h{
font-family:var(--display);font-weight:300;
font-size:clamp(2.2rem,5.4vw,4.8rem);line-height:1.04;letter-spacing:-.05em;
color:var(--white);max-width:18ch;margin:0 auto;
}
.statement-h em{font-style:normal;color:var(--brand-hi)}
.statement-p{margin:1.6rem auto 0;max-width:40ch;font-size:1.15rem;font-weight:300;color:var(--muted);line-height:1.6}
/* PROBLEM */
.problem{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.problem-list{list-style:none;border-top:1px solid var(--line)}
.problem-list li{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.problem-list .ui{grid-row:span 2;color:var(--brand-hi);font-size:.95rem;padding-top:.35rem}
.problem-list strong{font-weight:400;font-size:1.6rem;letter-spacing:-.04em;color:var(--white)}
.problem-list li > span:last-child{margin-top:.3rem;font-size:.95rem;font-weight:300;line-height:1.6;color:var(--muted)}
/* HOW IT WILL WORK — four stages as glass tiles over the open-ocean photo
(Unsplash, engin akyurt) */
.how{
padding-top:clamp(6rem,12vw,9rem);padding-bottom:clamp(8rem,16vw,13rem);
background:
linear-gradient(180deg,var(--void) 0%,rgba(5,7,11,.35) 25%,rgba(5,7,11,.2) 65%,var(--void) 100%),
linear-gradient(rgba(30,70,140,.18),rgba(30,70,140,.18)),
url("ocean-dawn.jpg") center 58%/cover no-repeat;
}
.steps{list-style:none}
.steps .num{display:block;font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.steps h3,.roadmap h3{margin-top:1.1rem;font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.03em;color:var(--white)}
.steps p,.roadmap p{margin-top:.5rem;font-size:.95rem;font-weight:300;line-height:1.65;color:rgba(214,234,255,.75)}
/* ROADMAP — every stage visible at once; the current one carries the teal rule */
.roadmap{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem}
.roadmap li{padding-top:1.2rem;border-top:1px solid rgba(214,234,255,.25)}
.roadmap li.is-now{border-top:2px solid var(--brand-hi)}
.roadmap li.is-now .ui{color:var(--brand-hi)}
.roadmap .ui{font-size:.85rem;color:var(--muted)}
.roadmap h3{margin-top:.7rem}
/* TECH PAGE — payload interface and the measures we hold ourselves to */
.tech-block{margin-top:clamp(4rem,8vw,6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.tech-block .section-p:first-child{margin-top:0}
.measures{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.measures li{padding:1rem 1.1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.95rem;font-weight:300;line-height:1.5;color:rgba(214,234,255,.85)}
/* TECH */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border:1px solid var(--line)}
.card{padding:2rem;transition:background .2s}
.card + .card{border-left:1px solid var(--line)}
.card:hover{background:rgba(214,234,255,.03)}
.card-icon{color:var(--blue-hi);margin-bottom:1.4rem}
.card-icon svg{width:22px;height:22px;display:block}
.card h2{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.03em;color:var(--white);margin-bottom:.6rem}
.card p{font-size:.92rem;font-weight:300;color:var(--muted);line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.tag{
font-family:var(--ui);font-size:.85rem;text-transform:uppercase;letter-spacing:.02em;
color:#cfe0ff;border:1px solid rgba(120,165,255,.45);padding:.2rem .5rem;
}
/* TEAM — portrait cards: photo (or placeholder) fills the card, social
buttons top-right, and a dark glass panel with name and role at the foot.
Drop a real photo in as ![]()
in place of the div. */
.members{
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));
justify-content:center;gap:1.25rem;margin-top:4rem;
}
.member{
position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;
background:linear-gradient(180deg,#1a1f27,#11151b);border:1px solid var(--line);
}
.member-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
div.member-photo{display:flex;align-items:flex-start;justify-content:center;padding-top:14%;color:#2a3240}
div.member-photo svg{width:72%;height:auto;display:block}
.member-social{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.member-social a{
width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;
background:rgba(60,64,70,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
color:var(--white);transition:background .2s;
}
.member-social a:hover{background:rgba(60,64,70,.8)}
.member-social svg{width:20px;height:20px}
.member-info{
position:absolute;left:12px;right:12px;bottom:12px;
padding:1.1rem 1.25rem 1.2rem;border-radius:12px;
background:rgba(10,12,16,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.member-name{font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:-.035em;color:var(--white)}
.member-role{margin-top:.35rem;font-family:var(--ui);font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
/* CLOSING CTA */
.closing{
text-align:center;padding-top:clamp(6rem,14vw,10rem);padding-bottom:clamp(6rem,14vw,10rem);
background:radial-gradient(60% 80% at 50% 120%,rgba(47,111,224,.18),transparent 70%);
}
.closing .btn{margin-top:2.4rem}
/* CONTACT POPUP — native