/* VCLab shared stylesheet. Each page loads this file once.
 * Zero-specificity page guards preserve the existing cascade while keeping
 * legacy layouts isolated. Edit the relevant named section below.
 */


/* ===== _cx.html ===== */
:root:where([data-page="_cx"]) { color-scheme: dark; }
    *:where(html[data-page="_cx"], html[data-page="_cx"] *) { box-sizing: border-box; }
    :where(html[data-page="_cx"]) body {
      margin: 0;
      padding: 28px;
      background: #15171d;
      color: #f6f7fb;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    :where(html[data-page="_cx"]) #status { color: #8c909b; font-size: 13px; letter-spacing: .04em; }
    :where(html[data-page="_cx"]) address { margin: 0; font-style: normal; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
    :where(html[data-page="_cx"]) address.visible { opacity: 1; transform: none; }
    :where(html[data-page="_cx"]) .name { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
    :where(html[data-page="_cx"]) p { margin: 0 0 5px; color: #b8bbc5; font-size: 14px; line-height: 1.5; }
    :where(html[data-page="_cx"]) a { color: #42d7ff; text-decoration: none; border-bottom: 1px solid rgba(66,215,255,.35); }
    :where(html[data-page="_cx"]) a:hover { border-color: #42d7ff; }
    @media (prefers-reduced-motion: reduce) { :where(html[data-page="_cx"]) address { transition: none; } }


/* ===== about.html ===== */
:root:where([data-page="about"]) {
      color-scheme: dark;
      --surface: #090b10;
      --ink: #f6f7fb;
      --muted: #9a9eaa;
      --line: rgba(255,255,255,.13);
      --cyan: #42d7ff;
      --violet: #9d7cff;
      --lime: #b7f34d;
      --content: min(1180px, calc(100vw - 48px));
    }

    *:where(html[data-page="about"], html[data-page="about"] *) { box-sizing: border-box; }
    html:where([data-page="about"]) { scroll-behavior: smooth; }

    :where(html[data-page="about"]) body {
      margin: 0;
      background:
        radial-gradient(circle at 78% 15%, rgba(157,124,255,.12), transparent 25%),
        var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    :where(html[data-page="about"]) body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .16;
      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: 64px 64px;
      mask-image: linear-gradient(to right, black, transparent 75%);
    }

    :where(html[data-page="about"]) a { color: inherit; text-decoration: none; }

    :where(html[data-page="about"]) header, :where(html[data-page="about"]) main, :where(html[data-page="about"]) footer { position: relative; z-index: 1; width: var(--content); margin: auto; }

    :where(html[data-page="about"]) header {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }

    :where(html[data-page="about"]) .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 14px;
      font-weight: 760;
    }
    :where(html[data-page="about"]) .brand small {
      color: #777b87;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .mark {
      position: relative;
      width: 25px;
      height: 25px;
      transform: rotate(30deg) skewY(-10deg);
    }

    :where(html[data-page="about"]) .mark::before, :where(html[data-page="about"]) .mark::after {
      content: "";
      position: absolute;
      inset: 2px;
      border: 1.5px solid var(--cyan);
      border-radius: 3px;
    }

    :where(html[data-page="about"]) .mark::after {
      transform: translate(5px, -5px);
      border-color: var(--violet);
    }

    :where(html[data-page="about"]) .back {
      padding-bottom: 4px;
      border-bottom: 1px solid #4b4e57;
      color: #b9bdc8;
      font-size: 13px;
      transition: color .2s ease, border-color .2s ease;
    }

    :where(html[data-page="about"]) .back:hover { color: white; border-color: white; }

    :where(html[data-page="about"]) .hero {
      min-height: 76svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 110px 0 100px;
    }

    :where(html[data-page="about"]) .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: #b9bdc8;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--cyan);
      box-shadow: 0 0 14px var(--cyan);
    }

    :where(html[data-page="about"]) h1 {
      max-width: 1050px;
      margin: 0;
      font-size: clamp(60px, 8.4vw, 124px);
      font-weight: 620;
      letter-spacing: -.072em;
      line-height: .87;
    }

    :where(html[data-page="about"]) h1 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.48);
    }

    :where(html[data-page="about"]) .intro {
      max-width: 590px;
      margin: 42px 0 0 auto;
      color: #b2b5bf;
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.6;
    }

    :where(html[data-page="about"]) .principles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    :where(html[data-page="about"]) .principle {
      min-height: 260px;
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 1px solid var(--line);
    }

    :where(html[data-page="about"]) .principle:last-child { border-right: 0; }
    :where(html[data-page="about"]) .principle-number { color: var(--cyan); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
    :where(html[data-page="about"]) .principle h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.035em; }
    :where(html[data-page="about"]) .principle p { margin: 0; color: var(--muted); line-height: 1.55; }

    :where(html[data-page="about"]) .publisher {
      padding: 140px 0;
      display: grid;
      grid-template-columns: .7fr 1.3fr;
      gap: 10vw;
      align-items: start;
    }

    :where(html[data-page="about"]) .kicker {
      color: #777b87;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html[data-page="about"]) .publisher h2 {
      margin: 20px 0 0;
      font-size: clamp(38px, 5vw, 72px);
      line-height: .98;
      letter-spacing: -.055em;
      font-weight: 560;
    }

    :where(html[data-page="about"]) .frame-wrap {
      padding: 26px 0 0;
      border-top: 1px solid var(--line);
    }

    :where(html[data-page="about"]) .frame-wrap p { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }

    :where(html[data-page="about"]) iframe {
      width: 100%;
      min-height: 260px;
      display: block;
      border: 1px solid var(--line);
      background: #232323;
    }

    :where(html[data-page="about"]) footer {
      padding: 24px 0 35px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      color: #70747f;
      font-size: 11px;
    }
    :where(html[data-page="about"]) .footer-links { display: flex; gap: 20px; }
    :where(html[data-page="about"]) .footer-links a:hover { color: white; }

    @media (max-width: 760px) {
      :root:where([data-page="about"]) { --content: min(100% - 32px, 620px); }
      :where(html[data-page="about"]) header { height: 64px; }
      :where(html[data-page="about"]) .hero { min-height: auto; padding: 100px 0; }
      :where(html[data-page="about"]) h1 { font-size: clamp(62px, 19vw, 96px); }
      :where(html[data-page="about"]) .intro { margin: 38px 0 0; }
      :where(html[data-page="about"]) .principles { grid-template-columns: 1fr; }
      :where(html[data-page="about"]) .principle { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--line); }
      :where(html[data-page="about"]) .principle:last-child { border-bottom: 0; }
      :where(html[data-page="about"]) .publisher { grid-template-columns: 1fr; gap: 55px; padding: 100px 0; }
      :where(html[data-page="about"]) footer { flex-direction: column; gap: 10px; }
    }


/* ===== contact.html ===== */
:root:where([data-page="contact"]) {
      color-scheme: dark;
      --surface: #090b10;
      --ink: #f6f7fb;
      --muted: #9a9eaa;
      --line: rgba(255,255,255,.13);
      --cyan: #42d7ff;
      --violet: #9d7cff;
    }

    *:where(html[data-page="contact"], html[data-page="contact"] *) { box-sizing: border-box; }

    :where(html[data-page="contact"]) body {
      min-height: 100svh;
      margin: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow: hidden;
      background:
        radial-gradient(circle at 78% 28%, rgba(157,124,255,.14), transparent 30%),
        radial-gradient(circle at 58% 72%, rgba(66,215,255,.07), transparent 32%),
        var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    :where(html[data-page="contact"]) body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      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: 64px 64px;
      mask-image: linear-gradient(to right, black, transparent 72%);
    }

    :where(html[data-page="contact"]) a { color: inherit; text-decoration: none; }

    :where(html[data-page="contact"]) header, :where(html[data-page="contact"]) footer {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100vw - 48px));
      margin: 0 auto;
    }

    :where(html[data-page="contact"]) header {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    :where(html[data-page="contact"]) .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 14px;
      font-weight: 760;
    }

    :where(html[data-page="contact"]) .mark {
      position: relative;
      width: 25px;
      height: 25px;
      transform: rotate(30deg) skewY(-10deg);
    }

    :where(html[data-page="contact"]) .mark::before, :where(html[data-page="contact"]) .mark::after {
      content: "";
      position: absolute;
      inset: 2px;
      border: 1.5px solid var(--cyan);
      border-radius: 3px;
    }

    :where(html[data-page="contact"]) .mark::after {
      transform: translate(5px, -5px);
      border-color: var(--violet);
    }

    :where(html[data-page="contact"]) .back {
      padding-bottom: 4px;
      border-bottom: 1px solid #4b4e57;
      color: #b9bdc8;
      font-size: 13px;
      transition: color .2s ease, border-color .2s ease;
    }

    :where(html[data-page="contact"]) .back:hover { color: white; border-color: white; }

    :where(html[data-page="contact"]) main {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100vw - 48px));
      margin: auto;
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 11vw;
      align-items: center;
    }

    :where(html[data-page="contact"]) .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      color: #b9bdc8;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html[data-page="contact"]) .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--cyan);
      box-shadow: 0 0 14px var(--cyan);
    }

    :where(html[data-page="contact"]) h1 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(60px, 8.5vw, 126px);
      font-weight: 620;
      letter-spacing: -.075em;
      line-height: .86;
    }

    :where(html[data-page="contact"]) h1 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.48);
    }

    :where(html[data-page="contact"]) .details {
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

    :where(html[data-page="contact"]) .status {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 35px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    :where(html[data-page="contact"]) .pulse {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 0 rgba(66,215,255,.4);
      animation: pulse 1.8s infinite;
    }

    :where(html[data-page="contact"]) .mail-button {
      width: 100%;
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 22px;
      border-radius: 999px;
      background: #f5f6f8;
      color: #090b10;
      font-size: 13px;
      font-weight: 760;
      transition: transform .2s ease, background .2s ease;
    }

    :where(html[data-page="contact"]) .mail-button:hover { transform: translateY(-2px); background: white; }
    :where(html[data-page="contact"]) .address { margin: 17px 0 0; color: #717582; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }

    :where(html[data-page="contact"]) footer {
      padding: 24px 0 35px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      color: #70747f;
      font-size: 11px;
    }
    :where(html[data-page="contact"]) .footer-links { display: flex; gap: 20px; }
    :where(html[data-page="contact"]) .footer-links a:hover { color: white; }

    @keyframes pulse {
      70% { box-shadow: 0 0 0 10px rgba(66,215,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(66,215,255,0); }
    }

    @media (max-width: 760px) {
      :where(html[data-page="contact"]) body { overflow: auto; }
      :where(html[data-page="contact"]) header, :where(html[data-page="contact"]) main, :where(html[data-page="contact"]) footer { width: min(100% - 32px, 620px); }
      :where(html[data-page="contact"]) header { height: 64px; }
      :where(html[data-page="contact"]) main { grid-template-columns: 1fr; gap: 60px; padding: 100px 0; }
      :where(html[data-page="contact"]) h1 { font-size: clamp(64px, 20vw, 96px); }
      :where(html[data-page="contact"]) footer { flex-direction: column; gap: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *:where(html[data-page="contact"], html[data-page="contact"] *), *:where(html[data-page="contact"], html[data-page="contact"] *)::before, *:where(html[data-page="contact"], html[data-page="contact"] *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }


/* ===== imprint.html ===== */
:root:where([data-page="imprint"]) {
      color-scheme: dark;
      --surface: #090b10;
      --ink: #f6f7fb;
      --muted: #9a9eaa;
      --line: rgba(255,255,255,.13);
      --cyan: #42d7ff;
      --violet: #9d7cff;
      --content: min(1180px, calc(100vw - 48px));
    }
    *:where(html[data-page="imprint"], html[data-page="imprint"] *) { box-sizing: border-box; }
    :where(html[data-page="imprint"]) body {
      min-height: 100svh;
      margin: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background:
        radial-gradient(circle at 78% 28%, rgba(157,124,255,.13), transparent 29%),
        var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    :where(html[data-page="imprint"]) body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .15;
      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: 64px 64px;
      mask-image: linear-gradient(to right, black, transparent 72%);
    }
    :where(html[data-page="imprint"]) a { color: inherit; text-decoration: none; }
    :where(html[data-page="imprint"]) header, :where(html[data-page="imprint"]) main, :where(html[data-page="imprint"]) footer { position: relative; z-index: 1; width: var(--content); margin: auto; }
    :where(html[data-page="imprint"]) header {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }
    :where(html[data-page="imprint"]) .brand { display: inline-flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 760; }
    :where(html[data-page="imprint"]) .mark { position: relative; width: 25px; height: 25px; transform: rotate(30deg) skewY(-10deg); }
    :where(html[data-page="imprint"]) .mark::before, :where(html[data-page="imprint"]) .mark::after { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--cyan); border-radius: 3px; }
    :where(html[data-page="imprint"]) .mark::after { transform: translate(5px, -5px); border-color: var(--violet); }
    :where(html[data-page="imprint"]) .back { padding-bottom: 4px; border-bottom: 1px solid #4b4e57; color: #b9bdc8; font-size: 13px; }
    :where(html[data-page="imprint"]) .back:hover { color: white; border-color: white; }
    :where(html[data-page="imprint"]) main {
      padding: 110px 0;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 10vw;
      align-items: center;
    }
    :where(html[data-page="imprint"]) .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #b9bdc8; font-size: 11px; font-weight: 720; letter-spacing: .14em; text-transform: uppercase; }
    :where(html[data-page="imprint"]) .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
    :where(html[data-page="imprint"]) h1 { margin: 0; font-size: clamp(68px, 9vw, 130px); font-weight: 620; letter-spacing: -.075em; line-height: .84; }
    :where(html[data-page="imprint"]) h1 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.48); }
    :where(html[data-page="imprint"]) .details { padding-top: 23px; border-top: 1px solid var(--line); }
    :where(html[data-page="imprint"]) .details h2 { margin: 0 0 25px; font-size: 26px; letter-spacing: -.035em; }
    :where(html[data-page="imprint"]) address { margin: 0; font-style: normal; }
    :where(html[data-page="imprint"]) .details p { margin: 0 0 7px; color: var(--muted); line-height: 1.55; }
    :where(html[data-page="imprint"]) .details a { color: var(--cyan); border-bottom: 1px solid rgba(66,215,255,.35); }
    :where(html[data-page="imprint"]) .contact-frame { width: 100%; min-height: 285px; border: 1px solid var(--line); background: #15171d; }
    :where(html[data-page="imprint"]) .responsibility { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
    :where(html[data-page="imprint"]) .responsibility strong { display: block; margin-bottom: 8px; color: #e3e5ea; font-size: 13px; }
    :where(html[data-page="imprint"]) footer { padding: 24px 0 35px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #70747f; font-size: 11px; }
    :where(html[data-page="imprint"]) .footer-links { display: flex; gap: 20px; }
    :where(html[data-page="imprint"]) .footer-links a:hover { color: white; }
    @media (max-width: 760px) {
      :root:where([data-page="imprint"]) { --content: min(100% - 32px, 620px); }
      :where(html[data-page="imprint"]) header { height: 64px; }
      :where(html[data-page="imprint"]) main { grid-template-columns: 1fr; gap: 70px; padding: 95px 0; }
      :where(html[data-page="imprint"]) h1 { font-size: clamp(72px, 22vw, 104px); }
      :where(html[data-page="imprint"]) footer { flex-direction: column; gap: 14px; }
    }


/* ===== index.html ===== */
:root:where([data-page="index"]) {
      color-scheme: dark;
      --ink: #f6f7fb;
      --muted: #9a9eaa;
      --line: rgba(255, 255, 255, .12);
      --surface: #090b10;
      --violet: #9d7cff;
      --cyan: #42d7ff;
      --lime: #b7f34d;
      --orange: #ff8a47;
      --content: min(1180px, calc(100vw - 48px));
    }

    *:where(html[data-page="index"], html[data-page="index"] *) { box-sizing: border-box; }
    html:where([data-page="index"]) { scroll-behavior: smooth; }
    :where(html[data-page="index"]) body {
      margin: 0;
      background: var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    :where(html[data-page="index"]) a { color: inherit; text-decoration: none; }
    :where(html[data-page="index"]) button, :where(html[data-page="index"]) a { -webkit-tap-highlight-color: transparent; }
    :where(html[data-page="index"]) :focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    :where(html[data-page="index"]) .skip-link {
      position: fixed;
      left: 20px;
      top: -60px;
      z-index: 100;
      padding: 12px 18px;
      background: var(--ink);
      color: #090b10;
      border-radius: 999px;
      transition: top .2s ease;
    }
    :where(html[data-page="index"]) .skip-link:focus { top: 20px; }

    :where(html[data-page="index"]) .nav {
      position: fixed;
      z-index: 20;
      top: 0;
      left: 0;
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid transparent;
      transition: background .25s ease, border-color .25s ease;
    }
    :where(html[data-page="index"]) .nav.scrolled {
      background: rgba(9, 11, 16, .76);
      border-color: var(--line);
      backdrop-filter: blur(20px);
    }
    :where(html[data-page="index"]) .nav-inner {
      width: var(--content);
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :where(html[data-page="index"]) .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 14px;
      font-weight: 760;
      letter-spacing: -.01em;
    }
    :where(html[data-page="index"]) .brand small {
      color: #777b87;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    :where(html[data-page="index"]) .mark {
      position: relative;
      width: 25px;
      height: 25px;
      transform: rotate(30deg) skewY(-10deg);
    }
    :where(html[data-page="index"]) .mark::before, :where(html[data-page="index"]) .mark::after {
      content: "";
      position: absolute;
      inset: 2px;
      border: 1.5px solid var(--cyan);
      border-radius: 3px;
    }
    :where(html[data-page="index"]) .mark::after {
      transform: translate(5px, -5px);
      border-color: var(--violet);
    }
    :where(html[data-page="index"]) .nav-links { display: flex; align-items: center; gap: 24px; }
    :where(html[data-page="index"]) .nav-links > a:not(.nav-cta) {
      color: #c7c9d0;
      font-size: 13px;
      transition: color .2s ease;
    }
    :where(html[data-page="index"]) .nav-links > a:hover { color: #fff; }
    :where(html[data-page="index"]) .nav-cta, :where(html[data-page="index"]) .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 0 19px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    :where(html[data-page="index"]) .nav-cta:hover, :where(html[data-page="index"]) .button:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.38);
      background: rgba(255,255,255,.08);
    }
    :where(html[data-page="index"]) .menu-toggle {
      display: none;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      background: transparent;
      color: white;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    :where(html[data-page="index"]) .mobile-menu { display: none; }

    :where(html[data-page="index"]) .hero {
      position: relative;
      min-height: min(100svh, 820px);
      display: flex;
      align-items: center;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 72% 38%, rgba(110, 77, 240, .13), transparent 31%),
        radial-gradient(circle at 42% 72%, rgba(28, 170, 220, .07), transparent 31%),
        #090b10;
    }
    :where(html[data-page="index"]) .hero::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      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: 64px 64px;
      mask-image: linear-gradient(to right, black, transparent 62%);
    }
    :where(html[data-page="index"]) #cityCanvas {
      position: absolute;
      z-index: 0;
      right: -4vw;
      bottom: -7vh;
      width: 70vw;
      height: 93vh;
      opacity: 0;
      animation: city-in 1.5s .15s cubic-bezier(.2,.7,.2,1) forwards;
      filter: saturate(1.18);
    }
    :where(html[data-page="index"]) .hero-content {
      width: var(--content);
      margin: auto;
      padding-top: 76px;
      position: relative;
      z-index: 2;
    }
    :where(html[data-page="index"]) .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: #b9bdc8;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .14em;
      text-transform: uppercase;
      opacity: 0;
      animation: rise-in .8s .15s ease forwards;
    }
    :where(html[data-page="index"]) .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--cyan);
      box-shadow: 0 0 14px var(--cyan);
    }
    :where(html[data-page="index"]) h1 {
      max-width: 720px;
      margin: 0;
      font-size: clamp(62px, 8.1vw, 126px);
      font-weight: 640;
      letter-spacing: -.075em;
      line-height: .82;
      opacity: 0;
      animation: rise-in .9s .25s cubic-bezier(.2,.7,.2,1) forwards;
    }
    :where(html[data-page="index"]) h1 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.48);
    }
    :where(html[data-page="index"]) .hero-copy {
      max-width: 470px;
      margin: 34px 0 0;
      color: #aeb2bd;
      font-size: clamp(16px, 1.45vw, 20px);
      line-height: 1.55;
      opacity: 0;
      animation: rise-in .9s .38s ease forwards;
    }
    :where(html[data-page="index"]) .hero-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 34px;
      opacity: 0;
      animation: rise-in .9s .5s ease forwards;
    }
    :where(html[data-page="index"]) .button.primary {
      min-height: 50px;
      padding: 0 23px;
      border: 0;
      background: #f5f6f8;
      color: #0a0c11;
    }
    :where(html[data-page="index"]) .button.primary:hover { background: #fff; }
    :where(html[data-page="index"]) .button .arrow { transition: transform .2s ease; }
    :where(html[data-page="index"]) .button:hover .arrow { transform: translateX(4px); }
    :where(html[data-page="index"]) .text-link {
      color: #b9bdc8;
      font-size: 13px;
      border-bottom: 1px solid #4b4e57;
      padding-bottom: 4px;
      transition: color .2s ease, border-color .2s ease;
    }
    :where(html[data-page="index"]) .text-link:hover { color: #fff; border-color: #fff; }
    :where(html[data-page="index"]) .scroll-note {
      position: absolute;
      z-index: 2;
      left: 24px;
      bottom: 31px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #717582;
      font-size: 10px;
      letter-spacing: .15em;
      text-transform: uppercase;
      transform: rotate(-90deg);
      transform-origin: left bottom;
    }
    :where(html[data-page="index"]) .scroll-note::before { content: ""; width: 42px; height: 1px; background: #474a52; }

    :where(html[data-page="index"]) .section { width: var(--content); margin: auto; }
    :where(html[data-page="index"]) .manifesto {
      padding: 104px 0 88px;
      display: grid;
      grid-template-columns: .7fr 1.6fr;
      gap: 10vw;
      border-bottom: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .section-kicker {
      color: #777b87;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    :where(html[data-page="index"]) .manifesto h2, :where(html[data-page="index"]) .workflow h2, :where(html[data-page="index"]) .cta h2 {
      margin: 0;
      font-size: clamp(38px, 5.4vw, 76px);
      line-height: .98;
      letter-spacing: -.055em;
      font-weight: 560;
    }
    :where(html[data-page="index"]) .manifesto h2 em { color: var(--cyan); font-style: normal; }

    :where(html[data-page="index"]) .demo {
      padding: 96px 0 104px;
      border-bottom: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .demo-head {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
      gap: 9vw;
      align-items: end;
      margin-bottom: 38px;
    }
    :where(html[data-page="index"]) .demo h2 {
      max-width: 780px;
      margin: 12px 0 0;
      font-size: clamp(42px, 6.4vw, 92px);
      font-weight: 590;
      line-height: .91;
      letter-spacing: -.065em;
    }
    :where(html[data-page="index"]) .demo-copy {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }
    :where(html[data-page="index"]) .demo-frame {
      position: relative;
      margin: 0;
      padding: 10px;
      border: 1px solid rgba(255,255,255,.15);
      background: #12151c;
      box-shadow: 0 34px 100px rgba(0,0,0,.38);
    }
    :where(html[data-page="index"]) .demo-frame video {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      background: #05070a;
    }
    :where(html[data-page="index"]) .demo-caption {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 16px 8px 7px;
      color: #818691;
      font-size: 12px;
      line-height: 1.5;
    }
    :where(html[data-page="index"]) .demo-caption strong { color: #f2f3f6; font-weight: 640; }
    :where(html[data-page="index"]) #case-study { scroll-margin-top: 96px; }
    :where(html[data-page="index"]) #case-study h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.02; }
    :where(html[data-page="index"]) .case-study-note { max-width: 780px; margin: 28px 0 22px; color: var(--muted); line-height: 1.65; }

    :where(html[data-page="index"]) .map-story { padding: 96px 0; scroll-margin-top: 96px; border-bottom: 1px solid var(--line); }
    :where(html[data-page="index"]) .map-story-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 50px;
      margin-bottom: 56px;
    }
    :where(html[data-page="index"]) .map-story-head h2 {
      margin: 12px 0 0;
      max-width: 700px;
      font-size: clamp(42px, 6.4vw, 92px);
      font-weight: 590;
      line-height: .91;
      letter-spacing: -.065em;
    }
    :where(html[data-page="index"]) .map-story-head p { max-width: 315px; margin: 0; color: var(--muted); line-height: 1.6; }
    :where(html[data-page="index"]) .map-explainer {
      display: grid;
      grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr);
      gap: 40px;
      align-items: center;
    }
    :where(html[data-page="index"]) .map-figure { margin: 0; min-width: 0; }
    :where(html[data-page="index"]) .map-image { position: relative; }
    :where(html[data-page="index"]) .map-image img { display: block; width: 100%; height: auto; }
    :where(html[data-page="index"]) .map-pin { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; }
    :where(html[data-page="index"]) .map-pin span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #090b10; border: 2px solid #090b10; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 2px var(--cyan); transition: transform .2s ease; }
    :where(html[data-page="index"]) .map-pin:hover span, :where(html[data-page="index"]) .map-pin:focus-visible span { transform: scale(1.15); }
    :where(html[data-page="index"]) .map-pin-1 { left: 43%; top: 37%; }
    :where(html[data-page="index"]) .map-pin-2 { left: 51%; top: 53%; }
    :where(html[data-page="index"]) .map-pin-3 { left: 84%; top: 27%; }
    :where(html[data-page="index"]) .map-figure figcaption { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
    :where(html[data-page="index"]) .map-figure figcaption a { text-decoration: underline; text-underline-offset: 4px; padding: 4px 0; }
    :where(html[data-page="index"]) .map-steps { list-style: none; margin: 0; padding: 0; }
    :where(html[data-page="index"]) .map-steps li { display: flex; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
    :where(html[data-page="index"]) .map-step-number { color: var(--cyan); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding-top: 5px; }
    :where(html[data-page="index"]) .map-steps h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
    :where(html[data-page="index"]) .map-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
    :where(html[data-page="index"]) .map-steps li:target h3 { color: var(--cyan); }
    :where(html[data-page="index"]) .map-next { display: inline-flex; gap: 12px; margin-top: 32px; }

    :where(html[data-page="index"]) .new-features {
      padding: 112px 0 118px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .new-features-head {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
      gap: 9vw;
      align-items: end;
      margin-bottom: 58px;
    }
    :where(html[data-page="index"]) .new-features h2 {
      max-width: 850px;
      margin: 12px 0 0;
      font-size: clamp(48px, 7.2vw, 104px);
      font-weight: 580;
      line-height: .88;
      letter-spacing: -.07em;
    }
    :where(html[data-page="index"]) .new-features h2 span {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.52);
    }
    :where(html[data-page="index"]) .new-features-intro {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
    }
    :where(html[data-page="index"]) .product-shot {
      position: relative;
      margin: 0 0 84px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.15);
      background: #12151c;
      box-shadow: 0 34px 100px rgba(0,0,0,.38);
    }
    :where(html[data-page="index"]) .product-shot > img {
      display: block;
      width: 100%;
      height: auto;
    }
    :where(html[data-page="index"]) .shot-label {
      position: absolute;
      top: 32px;
      left: 32px;
      z-index: 2;
      padding: 9px 12px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      background: rgba(9,11,16,.78);
      color: #fff;
      font-size: 10px;
      font-weight: 760;
      letter-spacing: .1em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
    }
    :where(html[data-page="index"]) .shot-inset {
      position: absolute;
      right: -20px;
      bottom: -48px;
      width: min(49%, 580px);
      padding: 8px;
      border: 1px solid rgba(255,255,255,.2);
      background: #0d1016;
      box-shadow: 0 24px 70px rgba(0,0,0,.55);
    }
    :where(html[data-page="index"]) .shot-inset img { display: block; width: 100%; height: auto; }
    :where(html[data-page="index"]) .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .feature {
      min-height: 265px;
      padding: 25px 24px 28px;
      border-right: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .feature:last-child { border-right: 0; }
    :where(html[data-page="index"]) .feature-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 70px;
      color: #686d79;
      font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    :where(html[data-page="index"]) .feature-meta b { color: var(--feature-color, var(--cyan)); font-weight: 700; }
    :where(html[data-page="index"]) .feature h3 { margin: 0 0 12px; font-size: 23px; letter-spacing: -.035em; }
    :where(html[data-page="index"]) .feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58; }
    :where(html[data-page="index"]) .feature-rail {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      padding-top: 24px;
      color: #aeb2bd;
      font-size: 12px;
    }
    :where(html[data-page="index"]) .feature-rail span {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }
    :where(html[data-page="index"]) .feature-rail span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 10px var(--cyan);
    }
    :where(html[data-page="index"]) .gallery-intro {
      display: grid;
      grid-template-columns: minmax(0, .75fr) minmax(280px, 1.25fr);
      gap: 8vw;
      align-items: end;
      margin: 94px 0 30px;
    }
    :where(html[data-page="index"]) .gallery-intro h3 {
      max-width: 580px;
      margin: 10px 0 0;
      font-size: clamp(34px, 4.4vw, 62px);
      font-weight: 590;
      line-height: .98;
      letter-spacing: -.055em;
    }
    :where(html[data-page="index"]) .gallery-intro p {
      max-width: 560px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }
    :where(html[data-page="index"]) .dark-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      padding: 1px;
      background: rgba(255,255,255,.12);
    }
    :where(html[data-page="index"]) .gallery-item {
      min-width: 0;
      margin: 0;
      background: #090c11;
    }
    :where(html[data-page="index"]) .gallery-item--wide { grid-column: 1 / -1; }
    :where(html[data-page="index"]) .gallery-media {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #05070a;
    }
    :where(html[data-page="index"]) .gallery-media::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
    }
    :where(html[data-page="index"]) .gallery-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s cubic-bezier(.2,.75,.2,1);
    }
    :where(html[data-page="index"]) .gallery-item:hover .gallery-media img { transform: scale(1.012); }
    :where(html[data-page="index"]) .gallery-item figcaption {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 18px;
      min-height: 112px;
      padding: 22px 24px 24px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    :where(html[data-page="index"]) .gallery-number {
      color: var(--cyan);
      font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: .08em;
    }
    :where(html[data-page="index"]) .gallery-copy strong {
      display: block;
      margin-bottom: 7px;
      color: #f2f3f6;
      font-size: 16px;
      font-weight: 640;
      letter-spacing: -.02em;
    }
    :where(html[data-page="index"]) .gallery-copy span {
      display: block;
      max-width: 560px;
      color: #818691;
      font-size: 12px;
      line-height: 1.55;
    }

    :where(html[data-page="index"]) .workflow {
      padding: 96px 0 100px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 9vw;
    }
    :where(html[data-page="index"]) .workflow h2 { position: sticky; top: 120px; }
    :where(html[data-page="index"]) .steps { counter-reset: step; }
    :where(html[data-page="index"]) .step {
      counter-increment: step;
      padding: 24px 0 30px;
      border-top: 1px solid var(--line);
    }
    :where(html[data-page="index"]) .step:last-child { border-bottom: 1px solid var(--line); }
    :where(html[data-page="index"]) .step::before {
      content: "0" counter(step);
      display: block;
      margin-bottom: 26px;
      color: var(--cyan);
      font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    :where(html[data-page="index"]) .step h3 { margin: 0 0 11px; font-size: 25px; letter-spacing: -.03em; }
    :where(html[data-page="index"]) .step p { margin: 0; color: var(--muted); line-height: 1.6; }

    :where(html[data-page="index"]) .signal {
      position: relative;
      padding: 84px 0;
      background: #e7ff55;
      color: #090b10;
      overflow: hidden;
    }
    :where(html[data-page="index"]) .signal::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -80px;
      top: -190px;
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 50%;
      box-shadow: 0 0 0 60px rgba(0,0,0,.03), 0 0 0 120px rgba(0,0,0,.03);
    }
    :where(html[data-page="index"]) .signal-inner {
      width: var(--content);
      margin: auto;
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 12vw;
      align-items: end;
    }
    :where(html[data-page="index"]) .signal blockquote {
      margin: 0;
      max-width: 820px;
      font-size: clamp(38px, 5.3vw, 75px);
      font-weight: 600;
      line-height: .98;
      letter-spacing: -.055em;
    }
    :where(html[data-page="index"]) .signal p { margin: 0; font-size: 15px; line-height: 1.6; }

    :where(html[data-page="index"]) .cta {
      min-height: clamp(440px, 58vh, 620px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 88px 0 72px;
    }
    :where(html[data-page="index"]) .cta h2 { max-width: 880px; font-size: clamp(58px, 9vw, 132px); }
    :where(html[data-page="index"]) .cta .button { margin-top: 45px; }
    :where(html[data-page="index"]) footer {
      width: var(--content);
      margin: auto;
      padding: 24px 0 35px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      color: #70747f;
      font-size: 11px;
    }
    :where(html[data-page="index"]) .footer-links { display: flex; gap: 20px; }
    :where(html[data-page="index"]) .footer-links a:hover { color: white; }

    :where(html[data-page="index"]) .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
    :where(html[data-page="index"]) .reveal.visible { opacity: 1; transform: none; }
    @keyframes rise-in { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(24px); } }
    @keyframes city-in { to { opacity: 1; transform: translateY(0) scale(1); } from { opacity: 0; transform: translateY(60px) scale(.96); } }

    @media (max-width: 820px) {
      :root:where([data-page="index"]) { --content: min(100% - 32px, 680px); }
      :where(html[data-page="index"]) .nav { height: 64px; }
      :where(html[data-page="index"]) .nav-links > a { display: none; }
      :where(html[data-page="index"]) .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
      :where(html[data-page="index"]) .mobile-menu:not([hidden]) {
        position: fixed;
        top: 72px;
        left: 16px;
        right: 16px;
        display: grid;
        padding: 10px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 18px;
        background: rgba(14,16,22,.96);
        box-shadow: 0 22px 60px rgba(0,0,0,.4);
        backdrop-filter: blur(24px);
      }
      :where(html[data-page="index"]) .mobile-menu a {
        padding: 14px 13px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: #d5d7de;
        font-size: 14px;
      }
      :where(html[data-page="index"]) .mobile-menu a:last-child { border-bottom: 0; color: var(--cyan); }
      :where(html[data-page="index"]) .hero { min-height: min(100svh, 760px); align-items: flex-start; padding-bottom: 36px; }
      :where(html[data-page="index"]) .hero-content { padding-top: 104px; }
      :where(html[data-page="index"]) h1 { font-size: clamp(62px, 19vw, 100px); }
      :where(html[data-page="index"]) .hero-copy { max-width: 390px; }
      :where(html[data-page="index"]) #cityCanvas { width: 115vw; height: 58vh; right: -36vw; bottom: -1vh; opacity: .64; animation: none; }
      :where(html[data-page="index"]) .eyebrow, :where(html[data-page="index"]) h1, :where(html[data-page="index"]) .hero-copy, :where(html[data-page="index"]) .hero-actions { opacity: 1; animation: none; }
      :where(html[data-page="index"]) .scroll-note { display: none; }
      :where(html[data-page="index"]) .manifesto, :where(html[data-page="index"]) .workflow { grid-template-columns: 1fr; gap: 32px; padding: 68px 0; }
      :where(html[data-page="index"]) .demo { padding: 68px 0 72px; }
      :where(html[data-page="index"]) .demo-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
      :where(html[data-page="index"]) .workflow h2 { position: static; }
      :where(html[data-page="index"]) .map-story { padding: 68px 0; }
      :where(html[data-page="index"]) .map-story-head { display: block; margin-bottom: 38px; }
      :where(html[data-page="index"]) .map-story-head p { margin-top: 20px; }
      :where(html[data-page="index"]) .new-features { padding: 76px 0 82px; }
      :where(html[data-page="index"]) .new-features-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 38px; }
      :where(html[data-page="index"]) .product-shot { margin-bottom: 54px; }
      :where(html[data-page="index"]) .shot-inset { right: -8px; bottom: -28px; width: 54%; }
      :where(html[data-page="index"]) .feature-grid { grid-template-columns: 1fr 1fr; }
      :where(html[data-page="index"]) .feature:nth-child(2) { border-right: 0; }
      :where(html[data-page="index"]) .feature:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      :where(html[data-page="index"]) .gallery-intro { grid-template-columns: 1fr; gap: 16px; margin-top: 72px; }
      :where(html[data-page="index"]) .map-explainer { grid-template-columns: 1fr; gap: 32px; }
      :where(html[data-page="index"]) .signal-inner { grid-template-columns: 1fr; gap: 28px; }
      :where(html[data-page="index"]) .signal { padding: 64px 0; }
      :where(html[data-page="index"]) .cta { min-height: auto; padding: 72px 0 64px; }
    }

    @media (max-width: 520px) {
      :where(html[data-page="index"]) .hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
      :where(html[data-page="index"]) .demo-frame { padding: 5px; }
      :where(html[data-page="index"]) .demo-caption { flex-direction: column; gap: 5px; padding: 13px 7px 7px; }
      :where(html[data-page="index"]) .map-story-head h2 { font-size: 48px; }
      :where(html[data-page="index"]) .product-shot { padding: 5px; margin-bottom: 32px; }
      :where(html[data-page="index"]) .shot-label { top: 14px; left: 14px; }
      :where(html[data-page="index"]) .shot-inset { position: static; width: 100%; margin-top: 6px; padding: 5px; }
      :where(html[data-page="index"]) .feature-grid { grid-template-columns: 1fr; }
      :where(html[data-page="index"]) .feature { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
      :where(html[data-page="index"]) .feature:last-child { border-bottom: 0; }
      :where(html[data-page="index"]) .feature-meta { margin-bottom: 38px; }
      :where(html[data-page="index"]) .dark-gallery { grid-template-columns: 1fr; }
      :where(html[data-page="index"]) .gallery-item--wide { grid-column: auto; }
      :where(html[data-page="index"]) .gallery-item figcaption { min-height: 0; }
      :where(html[data-page="index"]) footer { flex-direction: column; gap: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html:where([data-page="index"]) { scroll-behavior: auto; }
      *:where(html[data-page="index"], html[data-page="index"] *), *:where(html[data-page="index"], html[data-page="index"] *)::before, *:where(html[data-page="index"], html[data-page="index"] *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      :where(html[data-page="index"]) .reveal { opacity: 1; transform: none; }
    }


/* ===== legal.html ===== */
:where(html[data-page="legal"]) h1, :where(html[data-page="legal"]) h2, :where(html[data-page="legal"]) h3 { margin:0; padding:0; font-weight:normal; font-style:normal; }
:where(html[data-page="legal"]) a { color:#0280E1; }
:where(html[data-page="legal"]) a:visited { color:#0280E1; }
:where(html[data-page="legal"]) a:active { color:#0280E1; }
:where(html[data-page="legal"]) a:hover { color:#B2B3B4; }
:where(html[data-page="legal"]) a.wsp30cbec7a{ color:#FFFFFF; text-decoration: none}
:where(html[data-page="legal"]) a.wsp30cbec7a:visited{ color:#FFFFFF; text-decoration: none}
:where(html[data-page="legal"]) a.wsp30cbec7a:active{ color:#FFFFFF; text-decoration: none}
:where(html[data-page="legal"]) a.wsp30cbec7a:hover{ color:#E3B4F3; text-decoration: underline}
:where(html[data-page="legal"]) #menu_62cf37c8 a { text-decoration: none; }
:where(html[data-page="legal"]) #menu_62cf37c8_pane { background-color: #2C2C2C; border: 1px solid #646464; padding-top: 10px; padding-bottom: 10px; box-shadow: 2px 2px 6px 0px rgba(8, 8, 8, 0.784314); }
:where(html[data-page="legal"]) #menu_62cf37c8_hr { background-color: #646464; height: 1px; border: none; }
:where(html[data-page="legal"]) #menu_62cf37c8_entry { padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px; }
:where(html[data-page="legal"]) #menu_62cf37c8_entry:hover { background-color: #323232; color: #FFFFFF !important; }
:where(html[data-page="legal"]) #menu_62cf37c8_entry:hover span { color:#FFFFFF !important; }
:where(html[data-page="legal"]) .menu_62cf37c8_mainMenuEntry { text-align: center; }
:where(html[data-page="legal"]) .menu_62cf37c8_mainMenuEntry:hover {	background-color:#FFFFFF; }
:where(html[data-page="legal"]) .menu_62cf37c8_mainMenuEntry:hover span {	color:#808080 !important; }
:where(html[data-page="legal"]) #menu_62cf37c8 .mobileEntry { display: none; }
:where(html[data-page="legal"]) #menu_62cf37c8 .normalEntry { display: block; }
@media only screen and (max-width:640px) {
:where(html[data-page="legal"]) #menu_62cf37c8 .mobileEntry { display: block; }
:where(html[data-page="legal"]) #menu_62cf37c8 .normalEntry { display: none; }
}
:where(html[data-page="legal"]) body { background-color:#20242E; padding:0;  margin: 0; }
:where(html[data-page="legal"]) .textstyle1 { text-align:center; }
:where(html[data-page="legal"]) #container_48303f72 { vertical-align: top; position:relative; display: inline-block; width:100%; min-height:150px; max-width:1600px; background-color:#20242E;  }
:where(html[data-page="legal"]) #container_157c0625 { vertical-align: top; position:relative; display: inline-block; width:100%; min-height:65px; background-color:#222222;  }
:where(html[data-page="legal"]) #container_157c0625_padding { margin: 10px; display: block;  }
:where(html[data-page="legal"]) .textstyle2 { text-align:left; }
:where(html[data-page="legal"]) #container_61aa482 { vertical-align: top; position:relative; display: inline-block; width:39%; min-height:57px; background:none;  }
:where(html[data-page="legal"]) #container_61aa482_padding { margin: 10px; display: block;  }
:where(html[data-page="legal"]) .textstyle3 { font-size:20pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#FFFFFF; font-weight:bold;  }
:where(html[data-page="legal"]) #container_e386fb8 { vertical-align: top; position:relative; display: inline-block; width:60%; min-height:45px; background:none;  }
:where(html[data-page="legal"]) #container_e386fb8_padding { margin: 10px; display: block;  }
:where(html[data-page="legal"]) .textstyle4 { text-align:right; }
:where(html[data-page="legal"]) #menu_62cf37c8 { vertical-align: bottom; position:relative; display: inline-block; width:220px; height:38px; text-align:left; background:none;  }
:where(html[data-page="legal"]) .menuholder1 { position: relative; overflow: hidden; width: 100%; height: 100%; }
:where(html[data-page="legal"]) .menustyle1 { position:absolute; width:43px; height:38px; left:10px;  }
:where(html[data-page="legal"]) .menuentry_text1 { position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto; height:51px;  }
:where(html[data-page="legal"]) .textstyle5 { font-size:36pt; font-family:'Palatino Linotype', 'Book Antiqua3', Palatino, serif; color:#FFFFFF;  white-space: nowrap; }
:where(html[data-page="legal"]) .menustyle2 { position:absolute; width:60px; height:38px; left:10px;  }
:where(html[data-page="legal"]) .menuentry_text2 { position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin-top:auto; margin-bottom:auto; margin-left:auto; margin-right:auto; height:18px;  }
:where(html[data-page="legal"]) .textstyle6 { font-size:12pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#FFFFFF;  white-space: nowrap; }
:where(html[data-page="legal"]) .menustyle3 { position:absolute; width:60px; height:38px; left:70px;  }
:where(html[data-page="legal"]) .menustyle4 { position:absolute; width:73px; height:38px; left:130px;  }
:where(html[data-page="legal"]) .textstyle7 { font-size:14pt; font-family:'Palatino Linotype', 'Book Antiqua3', Palatino, serif; color:#FFFFFF;  white-space: nowrap; }
:where(html[data-page="legal"]) .textstyle8 { font-size:15pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#20242E; line-height: 1.5;  }
:where(html[data-page="legal"]) #heading_4e2dc648 { vertical-align: bottom; position:relative; display: inline-block; background:none; font-size:24pt; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center;  }
:where(html[data-page="legal"]) .textstyle9 { font-size:15pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#20242E;  }
:where(html[data-page="legal"]) .textstyle10 { font-size:15pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#FFFFFF;  }
:where(html[data-page="legal"]) #iframe_50dff902 { box-sizing: border-box; vertical-align: bottom; position:relative; display: inline-block; width:50%; height:250px; background-color:#20242E; border: 1px solid #A0A0A0;  }
:where(html[data-page="legal"]) .textstyle11 { font-size:32pt; font-family:Tahoma, Geneva, sans-serif; color:#20242E;  }
@media only screen and (max-width: 640px)
{
:where(html[data-page="legal"]) #container_61aa482 * span { font-size:15pt;  }
:where(html[data-page="legal"]) #menu_62cf37c8 { width:50px;  }
}


/* ===== privacy.html ===== */
:root:where([data-page="privacy"]) {
      color-scheme: dark;
      --surface: #090b10;
      --ink: #f6f7fb;
      --muted: #9a9eaa;
      --line: rgba(255,255,255,.13);
      --cyan: #42d7ff;
      --violet: #9d7cff;
      --content: min(1180px, calc(100vw - 48px));
    }

    *:where(html[data-page="privacy"], html[data-page="privacy"] *) { box-sizing: border-box; }
    html:where([data-page="privacy"]) { scroll-behavior: smooth; }

    :where(html[data-page="privacy"]) body {
      margin: 0;
      background:
        radial-gradient(circle at 82% 12%, rgba(66,215,255,.08), transparent 24%),
        var(--surface);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    :where(html[data-page="privacy"]) body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .14;
      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: 64px 64px;
      mask-image: linear-gradient(to right, black, transparent 72%);
    }

    :where(html[data-page="privacy"]) a { color: inherit; text-decoration: none; }
    :where(html[data-page="privacy"]) header, :where(html[data-page="privacy"]) main, :where(html[data-page="privacy"]) footer { position: relative; z-index: 1; width: var(--content); margin: auto; }

    :where(html[data-page="privacy"]) header {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }

    :where(html[data-page="privacy"]) .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 14px;
      font-weight: 760;
    }

    :where(html[data-page="privacy"]) .mark {
      position: relative;
      width: 25px;
      height: 25px;
      transform: rotate(30deg) skewY(-10deg);
    }

    :where(html[data-page="privacy"]) .mark::before, :where(html[data-page="privacy"]) .mark::after {
      content: "";
      position: absolute;
      inset: 2px;
      border: 1.5px solid var(--cyan);
      border-radius: 3px;
    }

    :where(html[data-page="privacy"]) .mark::after {
      transform: translate(5px, -5px);
      border-color: var(--violet);
    }

    :where(html[data-page="privacy"]) .back {
      padding-bottom: 4px;
      border-bottom: 1px solid #4b4e57;
      color: #b9bdc8;
      font-size: 13px;
      transition: color .2s ease, border-color .2s ease;
    }

    :where(html[data-page="privacy"]) .back:hover { color: white; border-color: white; }

    :where(html[data-page="privacy"]) .hero {
      padding: 120px 0 110px;
      border-bottom: 1px solid var(--line);
    }

    :where(html[data-page="privacy"]) .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: #b9bdc8;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html[data-page="privacy"]) .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--cyan);
      box-shadow: 0 0 14px var(--cyan);
    }

    :where(html[data-page="privacy"]) h1 {
      margin: 0;
      font-size: clamp(66px, 10vw, 148px);
      font-weight: 620;
      line-height: .82;
      letter-spacing: -.078em;
    }

    :where(html[data-page="privacy"]) h1 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.48);
    }

    :where(html[data-page="privacy"]) .hero p {
      max-width: 590px;
      margin: 42px 0 0 auto;
      color: #b2b5bf;
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.6;
    }

    :where(html[data-page="privacy"]) .policy-layout {
      display: grid;
      grid-template-columns: 260px minmax(0, 720px);
      justify-content: space-between;
      gap: 9vw;
      padding: 110px 0 140px;
    }

    :where(html[data-page="privacy"]) .toc {
      position: sticky;
      top: 34px;
      align-self: start;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    :where(html[data-page="privacy"]) .toc-title {
      margin-bottom: 24px;
      color: #777b87;
      font-size: 10px;
      font-weight: 720;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html[data-page="privacy"]) .toc a {
      display: block;
      padding: 7px 0;
      color: #818591;
      font-size: 13px;
      transition: color .2s ease, transform .2s ease;
    }

    :where(html[data-page="privacy"]) .toc a:hover { color: white; transform: translateX(4px); }

    :where(html[data-page="privacy"]) .policy section {
      padding: 0 0 54px;
      margin-bottom: 54px;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 35px;
    }

    :where(html[data-page="privacy"]) .policy section:last-child { margin-bottom: 0; }

    :where(html[data-page="privacy"]) .section-number {
      display: block;
      margin-bottom: 28px;
      color: var(--cyan);
      font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    :where(html[data-page="privacy"]) .policy h2 {
      margin: 0 0 22px;
      font-size: clamp(28px, 3vw, 42px);
      font-weight: 570;
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    :where(html[data-page="privacy"]) .policy p {
      margin: 0 0 18px;
      color: #a7abb6;
      font-size: 16px;
      line-height: 1.75;
    }

    :where(html[data-page="privacy"]) .policy p:last-child { margin-bottom: 0; }
    :where(html[data-page="privacy"]) .policy a { color: var(--cyan); border-bottom: 1px solid rgba(66,215,255,.35); }
    :where(html[data-page="privacy"]) .policy a:hover { border-color: var(--cyan); }

    :where(html[data-page="privacy"]) .privacy-note {
      margin-top: 26px;
      padding: 24px 0 0;
      border-top: 1px solid var(--line);
      color: #d7d9df;
      font-size: 14px;
      line-height: 1.65;
    }
    :where(html[data-page="privacy"]) .contact-frame { width: 100%; min-height: 285px; border: 1px solid var(--line); background: #15171d; }

    :where(html[data-page="privacy"]) footer {
      padding: 24px 0 35px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      color: #70747f;
      font-size: 11px;
    }
    :where(html[data-page="privacy"]) .footer-links { display: flex; gap: 20px; }
    :where(html[data-page="privacy"]) .footer-links a:hover { color: white; }

    @media (max-width: 800px) {
      :root:where([data-page="privacy"]) { --content: min(100% - 32px, 660px); }
      :where(html[data-page="privacy"]) header { height: 64px; }
      :where(html[data-page="privacy"]) .hero { padding: 100px 0 90px; }
      :where(html[data-page="privacy"]) h1 { font-size: clamp(70px, 21vw, 110px); }
      :where(html[data-page="privacy"]) .hero p { margin: 36px 0 0; }
      :where(html[data-page="privacy"]) .policy-layout { grid-template-columns: 1fr; padding: 80px 0 100px; }
      :where(html[data-page="privacy"]) .toc { display: none; }
      :where(html[data-page="privacy"]) footer { flex-direction: column; gap: 10px; }
    }

/* ===== Dark palette with compact editorial layout — local preview =====
 * The original page rules above remain intact for easy theme comparison.
 * Product screenshots and video pixels are deliberately not recolored.
 */
html[data-page] {
  color-scheme: dark;
  --surface: #090b10;
  --ink: #f6f7fb;
  --muted: #a8aeba;
  --line: #2b303b;
  --cyan: #42d7ff;
  --violet: #9d7cff;
  --lime: #b7f34d;
  --orange: #ff8a47;
}
html[data-page] body { background: var(--surface); color: var(--ink); }
html[data-page] body::before,
html[data-page="index"] .hero::before,
html[data-page="index"] .signal::after { display: none; }
html[data-page] .hero { background: transparent; }
html[data-page] h1 span { color: var(--cyan); -webkit-text-stroke: 0; }
html[data-page] :is(.brand small, .back, .eyebrow, .intro, .kicker, .address, footer, .hero-copy, .hero > p, .section-kicker, .scroll-note, .feature-meta, .feature-rail, .gallery-copy span, .demo-caption, .toc a, .policy p, .policy li, .policy h3, #status) { color: var(--muted); }
html[data-page="_cx"] p { color: var(--muted); }
html[data-page="_cx"] .name { color: var(--ink); }
html[data-page] :is(.eyebrow::before, .feature-rail span::before) { box-shadow: none; }
html[data-page] .pulse { box-shadow: none; animation: none; }
html[data-page] :is(.back, .text-link) { color: var(--cyan); border-color: var(--line); }
html[data-page] :is(.back:hover, .text-link:hover, .footer-links a:hover, .toc a:hover) { color: var(--ink); border-color: var(--cyan); }
html[data-page="index"] .nav,
html[data-page="index"] .nav.scrolled { background: rgba(9,11,16,.96); border-color: var(--line); backdrop-filter: blur(16px); }
html[data-page="index"] .nav-links > a:not(.nav-cta) { color: var(--muted); }
html[data-page="index"] .nav-links > a:hover { color: var(--cyan); }
html[data-page="index"] :is(.button, .nav-cta, .menu-toggle),
html[data-page="contact"] .mail-button { background: var(--ink); color: var(--surface); border-color: var(--ink); }
html[data-page="index"] :is(.button:hover, .nav-cta:hover, .menu-toggle:hover),
html[data-page="contact"] .mail-button:hover { background: var(--cyan); color: var(--surface); border-color: var(--cyan); }
html[data-page="index"] .button.primary { background: var(--ink); color: var(--surface); }
html[data-page="index"] .button.primary:hover { background: var(--cyan); }
html[data-page="index"] .mobile-menu:not([hidden]) { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 24px rgba(32,37,34,.08); }
html[data-page="index"] .mobile-menu a { color: var(--ink); border-color: var(--line); }
html[data-page="index"] :is(.demo-frame, .product-shot, .shot-inset) { background: #12151c; border-color: var(--line); box-shadow: none; }
html[data-page="index"] :is(.demo-caption strong, .gallery-copy strong) { color: var(--ink); }
html[data-page="index"] .dark-gallery { background: var(--line); }
html[data-page="index"] .gallery-item { background: var(--surface); }
html[data-page="index"] .gallery-item figcaption { border-color: var(--line); }
html[data-page="index"] .feature-meta b { color: var(--cyan); }
html[data-page="index"] .signal { background: #12151c; color: var(--ink); }
html[data-page="index"] .map-pin span { background: var(--cyan); color: var(--surface); border-color: var(--surface); box-shadow: 0 0 0 2px var(--cyan); }
html[data-page] :is(.contact-frame, .frame-wrap iframe) { background: #15171d; border-color: var(--line); }
html[data-page="index"] .skip-link { background: var(--ink); color: var(--surface); }
/* Keep the older legal page readable without changing its structure. */
html[data-page="legal"] :is(#container_48303f72, #container_157c0625, #menu_62cf37c8_pane, #iframe_50dff902) { background: var(--surface); border-color: var(--line); box-shadow: none; }
html[data-page="legal"] :is([class^="textstyle"], #heading_4e2dc648) { color: var(--ink); }
html[data-page="legal"] a,
html[data-page="legal_en"] a,
html[data-page="privacy_en"] a { color: var(--cyan); }
html[data-page="privacy"] .policy { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  html[data-page="privacy"] h1 { font-size: clamp(58px, 16vw, 110px); }
}

/* Compact introduction with the original decorative city canvas. */
html[data-page="index"] .scroll-note { display: none; }
html[data-page="index"] .hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 124px 0 0;
  gap: 42px;
  background: var(--surface);
}
html[data-page="index"] .hero-content {
  order: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  column-gap: 64px;
  row-gap: 20px;
  padding: 0;
  align-items: start;
}
html[data-page="index"] .hero .eyebrow { grid-column: 1 / -1; margin: 0; font-size: 10px; letter-spacing: .1em; }
html[data-page="index"] .hero h1 {
  grid-column: 1;
  grid-row: 2 / 4;
  font-size: clamp(40px, 4.5vw, 66px);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 640px;
}
html[data-page="index"] .hero h1 span { color: var(--ink); }
html[data-page="index"] .hero-copy { grid-column: 2; grid-row: 2; margin: 0; max-width: 440px; font-size: 16px; line-height: 1.6; }
html[data-page="index"] .hero-actions { grid-column: 2; grid-row: 3; margin: 0; flex-wrap: wrap; gap: 16px; }
html[data-page="index"] #cityCanvas {
  display: block;
  position: relative;
  order: 2;
  right: auto;
  bottom: auto;
  width: var(--content);
  height: clamp(300px, 38vw, 540px);
  /* Original color intensity and translucent faces against the dark surface. */
  filter: saturate(1.18);
  opacity: 1;
  animation: city-in .8s ease both;
}
html[data-page="index"] :is(.button, .nav-cta, .menu-toggle),
html[data-page="contact"] .mail-button { border-radius: 5px; }
html[data-page="index"] .brand { font-size: 16px; letter-spacing: -.035em; }
html[data-page="index"] .nav-links { gap: 18px; }
html[data-page="index"] :is(.manifesto, .demo, .map-story, .new-features, .workflow) { padding-top: 64px; padding-bottom: 64px; }
html[data-page="index"] :is(.manifesto h2, .demo h2, .map-story-head h2, .new-features-head h2, .workflow h2, #case-study h2) { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.06; letter-spacing: -.045em; }
html[data-page="index"] :is(.demo-head, .map-story-head, .new-features-head) { margin-bottom: 32px; }
html[data-page="index"] .manifesto { gap: 6vw; }
html[data-page="index"] .feature { min-height: 220px; padding: 24px 20px; }
html[data-page="index"] .feature-meta { margin-bottom: 38px; }
html[data-page="index"] .feature h3 { font-size: 21px; }
html[data-page="index"] :is(.demo-frame, .product-shot, .shot-inset) { padding: 0; background: #101418; border-color: #222b27; }
html[data-page="index"] .demo-caption { padding: 16px 20px; color: #afb8b3; }
html[data-page="index"] .demo-caption strong { color: #fff; }
html[data-page="index"] .dark-gallery { gap: 16px; padding: 0; background: transparent; }
html[data-page="index"] .gallery-item { background: #101418; }
html[data-page="index"] .gallery-item figcaption { border-color: #303a34; }
html[data-page="index"] .gallery-copy strong { color: #fff; }
html[data-page="index"] .gallery-copy span { color: #afb8b3; }
html[data-page="index"] .gallery-number { color: #75d2cb; }
html[data-page="index"] .gallery-intro { margin-top: 64px; }
html[data-page="index"] .gallery-intro h3 { font-size: clamp(30px, 3.5vw, 46px); }
html[data-page="index"] .signal { background: #101413; color: #fff; padding: 58px 0; }
html[data-page="index"] .signal blockquote { font-size: clamp(32px, 4vw, 56px); }
html[data-page="index"] .signal p { color: #c6cec9; }
html[data-page="index"] .cta { min-height: 0; padding: 72px 0; }
html[data-page="index"] .cta h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; }
html[data-page="index"] .cta .button { margin-top: 28px; }
html[data-page="about"] .hero,
html[data-page="privacy"] .hero { min-height: 0; padding: 72px 0; }
html[data-page="about"] h1,
html[data-page="contact"] h1,
html[data-page="imprint"] h1 { font-size: clamp(42px, 5.8vw, 82px); line-height: 1.02; }
html[data-page="privacy"] h1 { font-size: clamp(42px, 5.4vw, 78px); line-height: 1.02; }
html[data-page="about"] .publisher { padding: 72px 0; }
html[data-page="privacy"] .policy-layout { padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 1050px) and (min-width: 821px) {
  html[data-page="index"] .nav-links > a:not(.nav-cta) { display: none; }
}
@media (max-width: 820px) {
  html[data-page="index"] .hero { padding-top: 96px; gap: 30px; }
  html[data-page="index"] .hero-content { grid-template-columns: 1fr; row-gap: 20px; }
  html[data-page="index"] .hero :is(h1, .hero-copy, .hero-actions, .eyebrow) { grid-column: 1; grid-row: auto; }
  html[data-page="index"] .hero h1 { font-size: clamp(37px, 7vw, 54px); }
  html[data-page="index"] .hero-copy { max-width: 540px; font-size: 15px; }
  html[data-page="index"] .hero-actions { flex-direction: row; align-items: center; gap: 14px; }
  html[data-page="index"] .hero .eyebrow { font-size: 9px; line-height: 1.5; }
  html[data-page="index"] :is(.manifesto, .demo, .map-story, .new-features, .workflow) { padding-top: 48px; padding-bottom: 48px; }
  html[data-page="index"] .brand { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-page="index"] #cityCanvas { animation: none; }
}

/* ===== Standalone case study ===== */
html[data-page="study"] { --content: min(1100px, calc(100% - 48px)); }
html[data-page="study"] * { box-sizing: border-box; }
html[data-page="study"] body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
html[data-page="study"] a { color: var(--cyan); text-underline-offset: 4px; }
html[data-page="study"] a:hover { color: var(--ink); }
html[data-page="study"] :focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
html[data-page="study"] :is(.study-header, .study-main, .study-footer) { width: var(--content); margin: auto; }
html[data-page="study"] .study-header { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
html[data-page="study"] .study-brand { color: var(--ink); font-size: 16px; font-weight: 750; text-decoration: none; }
html[data-page="study"] .study-brand small { margin-left: 10px; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
html[data-page="study"] nav { display: flex; gap: 24px; font-size: 13px; }
html[data-page="study"] .study-intro { max-width: 900px; padding: 64px 0 36px; }
html[data-page="study"] .study-kicker { color: var(--cyan); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
html[data-page="study"] h1 { margin: 24px 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.05em; }
html[data-page="study"] .study-lead { max-width: 720px; color: var(--muted); font-size: 20px; line-height: 1.6; }
html[data-page="study"] .study-meta { color: var(--muted); font-size: 12px; line-height: 1.6; }
html[data-page="study"] .study-replay { margin: 0; border: 1px solid var(--line); background: #12151c; }
html[data-page="study"] video { display: block; width: 100%; aspect-ratio: 16/9; }
html[data-page="study"] figcaption { padding: 20px; color: var(--muted); font-size: 13px; line-height: 1.65; }
html[data-page="study"] .study-copy { max-width: 760px; margin: 56px auto 72px; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
html[data-page="study"] h2 { margin: 44px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
html[data-page="study"] :is(.study-copy p, .study-copy li) { color: #c4c9d2; }
html[data-page="study"] .study-copy li { margin: 10px 0; }
html[data-page="study"] code { font-size: .9em; color: var(--ink); }
html[data-page="study"] .study-actions { display: flex; flex-wrap: wrap; gap: 18px 32px; padding-top: 28px; border-top: 1px solid var(--line); }
html[data-page="study"] .study-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
html[data-page="study"] .study-skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--ink); color: var(--surface); }
html[data-page="study"] .study-skip:focus { top: 12px; }
@media (max-width: 600px) {
  html[data-page="study"] { --content: calc(100% - 32px); }
  html[data-page="study"] .study-header { flex-wrap: wrap; padding: 18px 0; gap: 16px; }
  html[data-page="study"] .study-intro { padding-top: 40px; }
  html[data-page="study"] .study-lead { font-size: 18px; }
  html[data-page="study"] .study-copy { margin-top: 32px; font-size: 16px; }
}