/* Odd Fleet placeholder · fonts self-hosted (no third-party requests) */
@font-face{font-family:"Unbounded";src:url(assets/fonts/unbounded-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Unbounded";src:url(assets/fonts/unbounded-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Mono";src:url(assets/fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --space:#10162F; --space-2:#18203f; --coral:#FF5A4E; --foam:#7FE0C2; --buoy:#FFC845; --cream:#FFF6E9;
  --muted:rgba(255,246,233,.72);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; min-height:100svh;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,246,233,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,246,233,.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 34%, rgba(255,246,233,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 72%, rgba(255,246,233,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 66%, rgba(255,246,233,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255,246,233,.3) 50%, transparent 51%),
    radial-gradient(1200px 600px at 85% -10%, #1b2550 0%, transparent 60%),
    var(--space);
  color:var(--cream);
  font:400 17px/1.55 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; flex-direction:column;
}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 24px}
header{padding:28px 0}
header .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.logo{display:block; height:34px; width:auto}
.status{font:400 13px/1 "DM Mono",ui-monospace,monospace; color:var(--muted); display:flex; align-items:center; gap:8px; letter-spacing:.02em}
.dot{width:8px; height:8px; border-radius:50%; background:var(--buoy); box-shadow:0 0 0 0 rgba(255,200,69,.6); animation:pulse 2.4s ease-out infinite}
main{flex:1; display:flex; align-items:center; padding:24px 0 56px}
.kicker{font:400 13px/1 "DM Mono",ui-monospace,monospace; color:var(--foam); letter-spacing:.1em; margin:0 0 20px}
h1{font:500 clamp(34px,6vw,64px)/1.06 "Unbounded",system-ui,sans-serif; letter-spacing:-.015em; margin:0 0 22px; max-width:16ch; text-wrap:balance}
.lead{font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:36em; margin:0}
.fleet{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:48px; max-width:860px}
.ship{border-radius:16px; padding:18px 18px 20px; color:var(--space); min-height:120px; display:flex; flex-direction:column; justify-content:space-between; animation:bob 6s ease-in-out infinite}
.ship:nth-child(1){background:var(--coral)}
.ship:nth-child(2){background:var(--foam); animation-delay:-2s}
.ship:nth-child(3){background:transparent; color:var(--cream); border:1.5px dashed rgba(255,246,233,.45); animation-delay:-4s}
.ship .no{font:400 12px/1 "DM Mono",ui-monospace,monospace; opacity:.75}
.ship b{font:600 16px/1.25 "Unbounded",system-ui,sans-serif; display:block; margin-top:14px}
.ship span{font-size:14px}
footer{padding:28px 0 36px; font:400 13px/1.5 "DM Mono",ui-monospace,monospace; color:rgba(255,246,233,.55)}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
a{color:inherit}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,200,69,.55)}80%,100%{box-shadow:0 0 0 10px rgba(255,200,69,0)}}
@media (max-width:700px){
  .wrap{padding:0 16px}
  header{padding:20px 0}
  .logo{height:28px}
  .fleet{grid-template-columns:1fr; margin-top:36px}
  .ship{min-height:0; flex-direction:row; justify-content:flex-start; align-items:center; gap:16px; padding:16px}
  .ship .no{flex:none; width:64px}
  .ship b{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.ship,.dot{animation:none}}