/* ------------------------------------------------------------------
   LAYOUT — page structure, grids, sections, status bar, footer.
------------------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; width: 100%; }
.wrap.narrow { max-width: 900px; }

.section { position: relative; z-index: 10; padding: 6rem 0.5rem; }
.section::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* section header */
.section-head { position: relative; margin: 0 auto 3.5rem; max-width: 1200px; padding: 0 1rem; }
.ghost-num {
  position: absolute; top: -2.6rem; left: 0; font-size: clamp(6rem, 14vw, 10rem);
  font-weight: 700; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--foreground) 35%, transparent);
  opacity: 0.14; pointer-events: none; user-select: none;
}
.head-rule { position: relative; display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; }
.head-rule .rule { flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--alert) 70%, transparent), color-mix(in oklab, var(--violet) 50%, transparent), transparent); }
.section-head h2 { position: relative; margin-top: 1.1rem; font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; }
.head-desc { position: relative; margin-top: 0.8rem; max-width: 42rem; }

/* grids */
.grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: 1.25rem; }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .col-3 { grid-column: span 3; } .col-2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* status bar */
.statusbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 40;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--background) 70%, transparent);
  backdrop-filter: blur(16px);
}
.statusbar-inner {
  max-width: 1200px; margin: 0 auto; height: 44px; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.65rem; letter-spacing: 0.2em; color: var(--muted-foreground);
}
.sb-left, .sb-right { display: flex; align-items: center; gap: 0.75rem; }
.sb-nav { display: none; gap: 1.25rem; text-transform: uppercase; }
.sb-nav a:hover { color: var(--foreground); }
@media (min-width: 860px) { .sb-nav { display: flex; } }
.sep { color: var(--border); }
.pill { border: 1px solid color-mix(in oklab, var(--alert) 50%, transparent); color: var(--alert);
  border-radius: 99px; padding: 2px 8px; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* hero */
.hero { position: relative; z-index: 10; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; padding-top: 4rem; }
.hero-wrap { position: relative; z-index: 10; padding-block: 6rem; }
.hero-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.35fr 0.65fr; align-items: end; } }
.hero-title { font-weight: 700; line-height: 0.82; font-size: clamp(3.2rem, 12vw, 8rem); }
.hero-title span { display: block; }
.hero-lede { margin-top: 2rem; max-width: 34rem; padding-left: 1.25rem;
  border-left: 2px solid color-mix(in oklab, var(--alert) 70%, transparent); }
.hero-lede .role { font-size: 1.15rem; }
.kicker { font-size: 0.62rem; letter-spacing: 0.45em; text-transform: uppercase; color: var(--alert); margin-bottom: 1.5rem; }
.typed-wrap { margin-top: 0.75rem; min-height: 1.5rem; font-size: 0.9rem; }
.hero-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-right { display: grid; gap: 0.75rem; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.hud-corner { position: absolute; top: 3.5rem; font-size: 0.6rem; letter-spacing: 0.3em;
  color: var(--muted-foreground); z-index: 10; }
.hud-tl { left: 1rem; } .hud-tr { right: 1rem; text-align: right; }

/* footer */
.footer { position: relative; z-index: 10; border-top: 1px solid var(--border);
  background: var(--background); padding: 2.5rem 1rem; }
.footer .prompt { font-size: 0.85rem; color: var(--muted-foreground); }
.footer-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; }
.social { display: flex; gap: 0.5rem; }
.social a { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.6rem; font-size: 0.7rem; }
.social a:hover { border-color: var(--alert); color: var(--alert); }

.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 1rem; position: relative; z-index: 10; }