/* SEALOET Technologies — holding page
   Brand system: Michroma / DM Sans · #070C0F ground · #00E5FF signal */

@font-face{
  font-family:'Michroma';
  src:url('/assets/fonts/michroma-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('/assets/fonts/dmsans-light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src:url('/assets/fonts/dmsans-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --bg:#070C0F;
  --dimmer:#0E1C24;
  --dim:#2A3E4A;
  --cyan:#00E5FF;
  --white:#FFFFFF;
  --amb:#A8C8E0;
  --mich:'Michroma', ui-monospace, monospace;
  --body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--bg);
  color:var(--amb);
  font-family:var(--body);
  font-weight:300;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  align-items:center;
  padding:clamp(28px,6vw,56px);
  overflow:hidden;
  position:relative;
  /* faint depth: light from above the horizon */
  background-image:radial-gradient(120% 80% at 50% 8%, #0D1A22 0%, #070C0F 62%);
}

/* ── ambient mark ───────────────────────────────────────────── */
.ambient{
  position:fixed;
  left:50%;
  bottom:-3vh;
  width:min(112vw,1900px);
  transform:translateX(-50%);
  color:var(--dimmer);
  pointer-events:none;
  z-index:0;
  /* dissolve the band into the ground rather than cutting it off */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);
}
.ambient svg{
  display:block;
  width:100%;
  height:min(40vh,360px);
  opacity:1;
  animation:drift 26s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform:translate3d(-1.1%,0,0)   }
  50%    { transform:translate3d(1.1%,-.8%,0) }
}

/* ── content ────────────────────────────────────────────────── */
main{
  position:relative;
  z-index:1;
  max-width:620px;
  width:100%;
  text-align:center;
}

.logo{
  width:min(100%,420px);
  height:auto;
  display:block;
  margin:0 auto clamp(30px,5vw,44px);
}

.lede{
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.15rem,3.3vw,1.6rem);
  line-height:1.35;
  letter-spacing:.005em;
  color:var(--white);
  text-wrap:balance;
}

.sub{
  margin-top:clamp(16px,2.6vw,22px);
  font-size:clamp(.9rem,2.1vw,1rem);
  line-height:1.72;
  color:var(--amb);
  opacity:.82;
  max-width:52ch;
  margin-inline:auto;
  text-wrap:pretty;
}

.rule{
  width:3px;
  height:34px;
  border-radius:1.5px;
  background:var(--cyan);
  margin:clamp(34px,6vw,52px) auto clamp(26px,4vw,34px);
  box-shadow:0 0 22px rgba(0,229,255,.45);
}

.eyebrow{
  font-family:var(--mich);
  font-size:8px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#5C7A8A;
  padding-right:.28em;   /* optical: absorb trailing letterspace */
}

.contact{ margin-top:16px }
.contact a{
  font-family:var(--mich);
  font-size:clamp(11px,2.2vw,13px);
  letter-spacing:.14em;
  color:var(--white);
  text-decoration:none;
  border-bottom:1px solid var(--dim);
  padding-bottom:5px;
  transition:color .25s ease, border-color .25s ease;
}
.contact a:hover,
.contact a:focus-visible{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}
a:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:6px;
  border-radius:2px;
}

.hiring{
  margin-top:clamp(30px,5vw,42px);
  font-size:.8rem;
  line-height:1.6;
  color:var(--amb);
  opacity:.44;
  text-wrap:balance;
}

/* ── footer ─────────────────────────────────────────────────── */
footer{
  position:relative;
  z-index:1;
  padding-top:40px;
  font-size:.68rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:#3D5866;
  text-align:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 .5em;
}
.sep{ opacity:.6 }

@media (max-width:520px){
  body{ overflow-y:auto }
  .logo{ width:min(88%,300px) }
  .ambient svg{ opacity:.55 }
  footer .sep{ display:none }
  footer span{ display:block; width:100% }
}

@media (prefers-reduced-motion:reduce){
  .ambient svg{ animation:none }
  *{ transition-duration:.01ms !important }
}

/* ── hero scene (v0.80) ──────────────────────────────────────── */
#hero{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.ambient{ display:none }
main::before{
  content:""; position:absolute; z-index:-1;
  inset:-22% -18%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(7,12,15,.80) 0%, rgba(7,12,15,.42) 50%, rgba(7,12,15,0) 100%);
  pointer-events:none;
}

/* ── copy treatment ──────────────────────────────────────────── */
.lede{
  font-family:var(--mich);
  font-weight:400;
  font-size:clamp(1.0rem,2.5vw,1.42rem);
  letter-spacing:.06em;
  line-height:1.4;
}

/* ── designer's lockup (PNG), mark cropped —
      same letter scale as the 420 px full lockup ─────────────── */
.logo{ width:min(100%,301px) }
@media (max-width:520px){ .logo{ width:min(88%,215px) } }