* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: #f8f5ff;
  background:
    radial-gradient(circle at 85% 10%, rgba(244,34,193,.25), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(78,95,255,.22), transparent 35%),
    linear-gradient(135deg,#050208 0%,#0d0415 45%,#08030d 100%);
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

nav {
  width: min(1180px,92vw);
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}

.logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #ffb13b;
  clip-path: polygon(50% 0,94% 22%,94% 78%,50% 100%,6% 78%,6% 22%);
  color: #ffd88b;
  font-weight: 900;
}

nav a {
  color: #cac3d8;
  text-decoration: none;
}

.hero {
  width: min(1180px,92vw);
  margin: 0 auto;
  min-height: 72vh;
  display: grid;
  align-items: center;
  grid-template-columns: 1.2fr .8fr;
  gap: 44px;
}

.eyebrow {
  color: #ffbc61;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1 {
  margin: 18px 0;
  font-size: clamp(60px,9vw,120px);
  line-height: .85;
  letter-spacing: -.06em;
}

h1 span {
  background: linear-gradient(90deg,#ffb13b,#ff3ab8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 700px;
  color: #c7bfd2;
  font-size: 20px;
  line-height: 1.65;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.button {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
}

.primary {
  color: #0b0610;
  background: linear-gradient(90deg,#ffb13b,#ff4aba);
}

.secondary {
  color: #eee9f7;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

.console {
  position: relative;
  padding: 28px;
  border-radius: 24px;
  background: rgba(13,7,22,.82);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.console:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  pointer-events: none;
  background: linear-gradient(135deg,#ffb13b44,#ff39b744,transparent 60%);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.status {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.status:last-child {
  border: 0;
}

.online {
  color: #6cffae;
}

.signed {
  color: #ffcc6d;
}

section.features {
  width: min(1180px,92vw);
  margin: 40px auto 100px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.card {
  padding: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
}

.card h3 {
  margin-top: 0;
}

.card p {
  color: #aaa2b8;
  line-height: 1.6;
}

footer {
  width: min(1180px,92vw);
  margin: auto;
  padding: 30px 0 50px;
  color: #746c80;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media(max-width:850px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 60px 0;
  }

  section.features {
    grid-template-columns: 1fr;
  }
}

/* Stage-only improvements to the existing ShipForge OS design */
.logo {border:0;background:linear-gradient(135deg,#ffb13b,#ff3ab8);color:#120718;
  clip-path:polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%);
  width:52px;height:52px;flex:0 0 52px;font-size:16px;letter-spacing:0}
.skip-link {position:absolute;top:-100px;left:16px;padding:12px 18px;background:#fff;color:#000;z-index:50}
.skip-link:focus {top:12px}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:3px solid #ffd57b;outline-offset:4px;
}
.nav-links {display:flex;flex-wrap:wrap;gap:26px}
.nav-links a {min-height:44px;display:inline-flex;align-items:center}
.catalog-shell {width:min(1180px,92vw);margin:24px auto 74px}
.catalog-shell h2 {font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.catalog-intro {color:#c7bfd2;max-width:790px;line-height:1.65}
.catalog-controls {display:flex;flex-wrap:wrap;align-items:end;gap:18px;margin:28px 0}
.catalog-controls label {display:block;margin-bottom:9px;font-size:14px;font-weight:700;color:#f8e4ff}
.catalog-controls input, .catalog-controls select {
  background:#171025;color:#fff;border:1px solid #9c85b5;border-radius:10px;padding:14px 16px;
  min-height:48px;min-width:250px;font:inherit;
}
.catalog-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.software-card {background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:28px}
.software-card p {line-height:1.7;color:#cfc7d9}
.software-card h3 {font-size:23px;line-height:1.35}
.software-card .catalog-meta {font-size:14px;color:#ffcf92}
.release-card {grid-column:1/-1}
#catalog-status {color:#e6dbee;min-height:24px}
#release-message {max-width:800px;word-wrap:break-word}
@media (max-width:600px) {
  nav {align-items:flex-start;gap:10px}
  .nav-links {gap:12px}
  .catalog-controls {display:block}
  .catalog-controls > div {margin-top:15px}
  .catalog-controls input,.catalog-controls select {width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
}