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

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

@layer base {
  :root {
    --ink: #131210;
    --paper: #edeae3;
    --body-high: #d8d3c6;
    --body-image: #c9c3b6;
    --body: #b7b1a2;
    --muted: #6f6a5d;
    --champagne: #c8b08c;
    --stone: #a99277;
    --line: #26221b;
    --diagram-line: #3a352b;
    --connector: #4a443a;
    --page-padding: 64px;
    --nav-height: 86px;
  }

  html {
    background: var(--ink);
    color-scheme: dark;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
  }

  body {
    min-width: 320px;
    background: var(--ink);
    color: var(--paper);
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body.menu-open { overflow: hidden; }

  a { color: inherit; text-decoration: none; }
  button { color: inherit; }

  :focus-visible {
    outline: 1px solid var(--champagne);
    outline-offset: 5px;
  }

  ::selection {
    background: var(--champagne);
    color: var(--ink);
  }

  .skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 100;
    padding: 12px 18px;
    transform: translateY(-180%);
    background: var(--paper);
    color: var(--ink);
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .skip-link:focus { transform: translateY(0); }

  .eyebrow,
  .pillars h3,
  .technology-card h3,
  .technology-card__body > span,
  .concept-facts,
  .market-list,
  .site-footer p {
    font-family: "IBM Plex Mono", monospace;
    text-transform: uppercase;
  }

  .eyebrow {
    display: block;
    color: var(--stone);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 5px;
    line-height: 1.5;
  }

  .section-title {
    margin-top: 32px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.2;
  }
}

@layer components {
  .wordmark {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    color: var(--paper);
    font-family: "Space Grotesk", sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2.5px;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }

  .button--filled {
    background: var(--champagne);
    color: var(--ink);
  }

  .button--filled:hover { background: var(--paper); }

  .button--outline {
    border: 1px solid var(--stone);
    color: var(--champagne);
    padding: 14px 28px;
  }

  .button--outline:hover {
    background: var(--champagne);
    color: var(--ink);
  }

  .menu-toggle {
    position: relative;
    z-index: 2;
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    left: 8px;
    width: 26px;
    height: 1px;
    background: var(--paper);
    transition: transform 150ms ease, top 150ms ease;
  }

  .menu-toggle span:first-child { top: 16px; }
  .menu-toggle span:last-child { top: 25px; }
  .menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
}

@layer layout {
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-height);
    padding: 22px var(--page-padding);
    border-bottom: 1px solid var(--line);
    background: rgb(19 18 16 / 88%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 44px;
  }

  .nav-links > a:not(.button) {
    color: var(--body);
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    transition: color 150ms ease;
  }

  .nav-links > a:not(.button):hover { color: var(--paper); }

  .nav-cta { padding: 12px 24px; }

  .hero {
    position: relative;
    height: 92vh;
    height: 92svh;
    min-height: 640px;
    overflow: hidden;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
    filter: grayscale(0.45) sepia(0.3) brightness(0.8) contrast(1.05);
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(19 18 16 / 96%) 0%, rgb(19 18 16 / 55%) 45%, rgb(19 18 16 / 25%) 100%);
    pointer-events: none;
  }

  .hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--page-padding) 88px;
    pointer-events: none;
  }

  .hero h1 {
    max-width: 1100px;
    margin-top: 24px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(64px, 9vw, 128px);
    font-weight: 500;
    letter-spacing: -4px;
    line-height: 1;
  }

  .hero p {
    max-width: 640px;
    margin-top: 32px;
    color: var(--body-image);
    font-size: 21px;
    line-height: 1.6;
  }

  .section {
    padding: 140px var(--page-padding);
    border-bottom: 1px solid var(--line);
  }

  .section-shell { width: 100%; }
  .platform__title { max-width: 1000px; }

  .pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
    margin-top: 88px;
    padding-top: 56px;
    border-top: 1px solid var(--line);
  }

  .pillars article { min-width: 0; }

  .pillars h3,
  .technology-card h3 {
    color: var(--champagne);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.5;
  }

  .pillars p {
    margin-top: 16px;
    color: var(--body);
    font-size: 18px;
    line-height: 1.65;
  }

  .architecture {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
  }

  .architecture__neo {
    padding: 22px 72px;
    background: var(--paper);
    color: var(--ink);
    text-align: center;
  }

  .architecture__neo strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 26px;
    font-weight: 600;
  }

  .architecture__neo span {
    display: block;
    margin-top: 4px;
    color: #8a7a5f;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .connector {
    width: 1px;
    height: 36px;
    flex: 0 0 36px;
    background: var(--connector);
  }

  .architecture__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .architecture__row span {
    padding: 14px 32px;
    border: 1px solid var(--diagram-line);
    color: var(--body-high);
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }

  .architecture__portfolio {
    padding: 16px 56px;
    border: 1px solid var(--diagram-line);
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 500;
  }

  .architecture__locations span { padding: 12px 28px; color: var(--body); border-color: var(--connector); }
  .architecture__locations .planned { border-style: dashed; color: var(--muted); }

  .architecture > p {
    margin-top: 40px;
    color: var(--muted);
    font-size: 16px;
    text-align: center;
  }

  .secret-club {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 640px;
    border-bottom: 1px solid var(--line);
  }

  .secret-club__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(64px, 8vw, 120px) clamp(28px, 5vw, 72px) clamp(56px, 7vw, 100px) clamp(28px, 4.5vw, 64px);
  }

  .secret-club h2 {
    margin-top: 28px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.1;
  }

  .secret-club__intro {
    max-width: 520px;
    margin-top: 32px;
    color: var(--body-image);
    font-size: 19px;
    line-height: 1.65;
  }

  .concept-facts {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }

  .concept-facts > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .concept-facts > div:last-child { border-bottom: 0; }

  .concept-facts dt,
  .concept-facts dd {
    font-size: 13px;
    letter-spacing: 2.5px;
    line-height: 1.55;
  }

  .concept-facts dt { color: var(--champagne); }
  .concept-facts dd { color: var(--muted); text-align: right; }

  .concept-facts__location {
    justify-content: flex-start !important;
    padding: 22px 0 !important;
  }

  .concept-facts__location dt {
    color: var(--paper);
    font-family: "Space Grotesk", sans-serif;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: none;
  }

  .secret-club .button { margin-top: 40px; }

  .secret-club__visual { position: relative; min-width: 0; min-height: clamp(420px, 50vw, 720px); overflow: hidden; }

  .secret-club__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.25) sepia(0.18) brightness(0.9) contrast(1.05);
  }

  .technology__title { max-width: 900px; }

  .technology-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 80px;
  }

  .technology-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--line);
  }

  .technology-card--featured { border-color: var(--stone); }

  .technology-card > img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: grayscale(0.45) sepia(0.3) brightness(0.85) contrast(1.05);
  }

  .technology-card:first-child > img { object-position: center 58%; }

  .technology-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 36px 40px;
  }

  .technology-card p {
    color: var(--body);
    font-size: 17px;
    line-height: 1.65;
  }

  .technology-card__body > span {
    margin-top: auto;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.5;
  }

  .network {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    align-items: center;
    gap: 40px;
  }

  .market-list {
    display: flex;
    flex-direction: column;
    margin-top: 48px;
    border-top: 1px solid var(--line);
  }

  .market-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  .market-list > div:last-child { border-bottom: 0; }

  .market-list dt {
    color: var(--body);
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.5;
  }

  .market-list dd {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: right;
  }

  .market-list__active dt { color: var(--paper); }
  .market-list__active dd { color: var(--champagne); }

  .network__note {
    margin-top: 28px;
    color: var(--muted);
    font-size: 15px;
  }

  .network__map { display: flex; min-width: 0; justify-content: center; }
  .network__map img { width: 100%; max-height: 720px; object-fit: contain; }

  .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 160px var(--page-padding) 120px;
  }

  .contact h2 {
    max-width: 1000px;
    margin-top: 32px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1.05;
  }

  .contact__button {
    margin-top: 48px;
    padding: 18px 40px;
    font-size: 15px;
  }

  .site-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    padding: 40px var(--page-padding);
    border-top: 1px solid var(--line);
  }

  .wordmark--footer { font-size: 20px; }

  .site-footer p {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: right;
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .technology-grid { grid-template-columns: 1fr; }
    .technology-card { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr); }
    .technology-card > img { height: 100%; min-height: 280px; }

    .network { grid-template-columns: 1fr; }
    .network__content { max-width: 680px; }
    .network__map img { max-width: 820px; }
  }

  @media (max-width: 920px) {
    :root { --page-padding: 32px; --nav-height: 76px; }

    .site-nav { min-height: var(--nav-height); padding-block: 17px; }
    .menu-toggle { display: block; }

    .nav-links {
      position: fixed;
      top: var(--nav-height);
      right: 0;
      left: 0;
      display: none;
      height: calc(100dvh - var(--nav-height));
      overflow-y: auto;
      overscroll-behavior: contain;
      align-items: stretch;
      flex-direction: column;
      gap: 0;
      padding: 28px var(--page-padding) 48px;
      border-top: 1px solid var(--line);
      background: rgb(19 18 16 / 98%);
    }

    .nav-links.is-open { display: flex; }

    .nav-links > a:not(.button) {
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    .nav-cta { width: 100%; margin-top: 28px; padding: 18px 24px; }

    .pillars { grid-template-columns: 1fr; gap: 36px; }
    .pillars article { max-width: 680px; }

    .secret-club { grid-template-columns: 1fr; }
    .secret-club__visual { min-height: clamp(360px, 70vw, 620px); }
  }

  @media (max-width: 700px) {
    :root { --page-padding: 24px; }

    .eyebrow { font-size: 12px; letter-spacing: 3.5px; }

    .hero { min-height: 620px; }
    .hero__content { padding-bottom: 52px; }
    .hero h1 { margin-top: 18px; font-size: clamp(54px, 17vw, 82px); letter-spacing: -3px; }
    .hero p { margin-top: 24px; font-size: 18px; line-height: 1.55; }

    .section { padding-block: 88px; }
    .section-title { margin-top: 24px; }

    .pillars { margin-top: 56px; padding-top: 40px; }
    .pillars p { font-size: 17px; }

    .architecture { margin-top: 80px; }
    .architecture__neo { width: 100%; max-width: 320px; padding-inline: 28px; }
    .architecture__row { width: 100%; gap: 12px; }
    .architecture__row span { width: 100%; max-width: 320px; padding-inline: 20px; text-align: center; }
    .architecture__portfolio { width: 100%; max-width: 320px; padding-inline: 20px; text-align: center; }
    .architecture__locations span { width: calc(50% - 6px); }
    .architecture__locations span:last-child { width: 100%; }

    .secret-club__content { padding: 88px var(--page-padding) 72px; }
    .secret-club__intro { font-size: 18px; }
    .concept-facts { margin-top: 44px; }
    .concept-facts > div { align-items: flex-start; flex-direction: column; }
    .concept-facts dd { text-align: left; }
    .concept-facts dt, .concept-facts dd { font-size: 12px; letter-spacing: 2px; }
    .concept-facts__location dt { font-size: 32px; }

    .technology-grid { margin-top: 56px; }
    .technology-card { display: flex; }
    .technology-card > img { height: 220px; min-height: 0; }
    .technology-card__body { padding: 30px 28px 34px; }

    .market-list > div { align-items: flex-start; flex-direction: column; gap: 6px; }
    .market-list dd { text-align: left; }
    .network__map { margin-inline: calc(var(--page-padding) * -1); }

    .contact { padding: 104px var(--page-padding) 88px; }
    .contact h2 { margin-top: 24px; letter-spacing: -1.5px; }

    .site-footer { align-items: flex-start; flex-direction: column; padding-block: 32px; }
    .site-footer p { text-align: left; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}