@layer reset, tokens, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --ink: #f6f7fb;
    --muted: #bcc3d2;
    --canvas: #070b17;
    --surface: #0e1425;
    --line: #252d42;
    --blue: #2788ff;
    --cyan: #32d4ff;
    --violet: #7248ff;
    --focus: #8fe8ff;
    --page: min(1180px, calc(100% - 48px));
    --radius: 1.25rem;
  }
}

@layer base {
  body {
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
  }
  body::before {
    position: fixed; inset: 0; z-index: -1; content: "";
    background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
  }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
  .site-shell { width: var(--page); margin-inline: auto; }
  .skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 20; padding: .75rem 1rem; background: var(--ink); color: var(--canvas); transform: translateY(-160%); }
  .skip-link:focus { transform: none; }
}

@layer components {
  .site-header, footer { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; border-block-end: 1px solid var(--line); }
  .wordmark { display: inline-flex; align-items: center; gap: .7rem; font-size: 1.1rem; font-weight: 750; letter-spacing: -.03em; }
  .wordmark > span:last-child > span { color: var(--muted); font-weight: 550; }
  .wordmark-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; background: linear-gradient(145deg, var(--cyan), var(--blue) 48%, var(--violet)); color: white; font-weight: 850; transform: rotate(-8deg); }
  .status { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .status span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 .3rem rgba(50,212,255,.12); }
  .hero { min-height: calc(100svh - 5.5rem); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4rem; padding-block: clamp(4rem, 8vh, 7rem); }
  .eyebrow { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  h1 { max-width: 12ch; margin-block: 1.4rem 1.6rem; font-size: clamp(3.3rem, 7.3vw, 7.2rem); font-weight: 760; letter-spacing: -.075em; line-height: .91; text-wrap: balance; }
  h1 em { color: transparent; background: linear-gradient(100deg, var(--cyan), var(--blue) 48%, #9c69ff); background-clip: text; font-style: normal; }
  .lede { max-width: 37rem; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 2.2rem; }
  .button { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; padding-inline: 1.25rem; border: 1px solid var(--line); border-radius: .7rem; font-size: .92rem; font-weight: 700; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
  .button-primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
  .button-secondary { background: rgba(255,255,255,.03); }
  .button:hover { transform: translateY(-2px); border-color: var(--cyan); }
  .signal { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
  .signal::before { position: absolute; width: 45%; height: 45%; content: ""; background: var(--blue); border-radius: 50%; filter: blur(6rem); opacity: .18; }
  .signal-orbit { position: absolute; border: 1px solid rgba(143,232,255,.3); border-radius: 50%; }
  .orbit-one { width: 78%; height: 78%; animation: orbit 18s linear infinite; }
  .orbit-two { width: 52%; height: 52%; border-style: dashed; animation: orbit 12s linear infinite reverse; }
  .signal-core { width: 10rem; height: 10rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 2.3rem; background: linear-gradient(145deg, var(--cyan), var(--blue) 45%, var(--violet)); box-shadow: 0 1.5rem 6rem rgba(39,136,255,.26); transform: rotate(-9deg); }
  .signal-core span { font-size: 5rem; font-weight: 850; transform: rotate(9deg); }
  .signal-label { position: absolute; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface); color: var(--muted); font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .14em; }
  .label-ai { inset-block-start: 12%; inset-inline-end: 12%; }
  .label-code { inset-block-end: 18%; inset-inline-start: 3%; }
  .label-open { inset-block-end: 10%; inset-inline-end: 18%; }
  @keyframes orbit { to { transform: rotate(1turn); } }
  .building, .updates { border-block-start: 1px solid var(--line); padding-block: clamp(5rem, 10vw, 9rem); }
  .section-heading { display: grid; grid-template-columns: .55fr 1.45fr; align-items: start; gap: 2rem; margin-block-end: 3rem; }
  h2 { font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
  .project-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
  .project-card { min-height: 25rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .project-card-featured { background: linear-gradient(145deg, rgba(39,136,255,.21), rgba(114,72,255,.08) 62%), var(--surface); }
  .card-index, .card-status, .card-kicker { color: var(--muted); font-family: ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
  .card-kicker { color: var(--cyan); margin-block-end: .8rem; }
  .project-card h3 { margin-block-end: 1rem; font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.1; }
  .project-card h3 small { display: block; margin-block-start: .4rem; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .project-card div > p:last-child { color: var(--muted); }
  .sleekai-logo { width: 100%; height: auto; border-radius: .5rem; background: white; }
  .updates { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
  .updates h2 { margin-block-start: 1.3rem; }
  .updates-content > p { max-width: 32rem; color: var(--muted); font-size: 1.1rem; }
  .signup { margin-block-start: 2rem; }
  .signup label { display: block; margin-block-end: .55rem; font-size: .85rem; font-weight: 700; }
  .signup-row { display: flex; gap: .65rem; }
  .signup input { width: 100%; min-height: 3.5rem; padding-inline: 1rem; border: 1px solid #46516c; border-radius: .65rem; background: #090e1c; color: var(--ink); font-size: 1rem; }
  .signup input::placeholder { color: #95a0b8; }
  .signup input:user-invalid { border-color: #ff8b9a; }
  .signup button { min-width: 9rem; min-height: 3.5rem; border: 0; border-radius: .65rem; background: var(--blue); color: white; cursor: pointer; font-weight: 750; }
  .signup button:hover { background: #1479ec; }
  .form-note, .form-status { margin-block-start: .65rem; color: var(--muted); font-size: .75rem; }
  .form-status { min-height: 1.2em; color: var(--cyan); }
  footer { min-height: 8rem; border-block: 1px solid var(--line) 0; color: var(--muted); font-size: .78rem; }
  .wordmark-small { color: var(--ink); }
  .prose { max-width: 42rem; padding-block: 4rem 2rem; }
  .prose h1 { font-size: clamp(2rem, 4vw, 3rem); }
  .prose h2 { margin-block-start: 2.5rem; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: 0; }
  .prose p { color: var(--muted); }
  .prose ul { padding-inline-start: 1.25rem; color: var(--muted); }
  .prose li { margin-block: .4rem; }
  .back-link { margin-block-start: 3rem; }
  .back-link a { color: var(--cyan); }
  footer nav a { color: var(--muted); text-decoration: underline; font-size: .78rem; }
  footer nav a:hover { color: var(--ink); }
}

@layer responsive {
  @media (max-width: 800px) {
    :root { --page: min(100% - 32px, 42rem); }
    .site-header { min-height: 4.75rem; }
    .status { font-size: 0; }
    .hero { min-height: calc(100svh - 4.75rem); grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem 2rem; }
    h1 { font-size: clamp(3.1rem, 15vw, 5.5rem); }
    .signal { display: none; }
    .hero-actions { flex-direction: column; }
    .button { width: 100%; }
    .section-heading, .updates { grid-template-columns: 1fr; }
    .section-heading { gap: 1.5rem; }
    .project-grid { grid-template-columns: 1fr; }
    .project-card { min-height: 20rem; }
    .updates { gap: 2rem; }
    .signup-row { flex-direction: column; }
    .signup button { width: 100%; }
    footer { min-height: 10rem; flex-wrap: wrap; gap: 1rem; padding-block: 2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .signal-orbit { animation: none; }
    .button { transition: none; }
  }
  @media (forced-colors: active) {
    .wordmark-mark, .signal-core, .project-card-featured { background: Canvas; border: 2px solid CanvasText; }
    h1 em { color: CanvasText; background: none; }
  }
}