:root {
      color-scheme: light;
      --ink: oklch(22% 0.025 220);
      --ink-soft: oklch(38% 0.028 220);
      --muted: oklch(55% 0.025 220);
      --paper: oklch(98% 0.012 196);
      --paper-2: oklch(95% 0.026 194);
      --paper-3: oklch(91% 0.043 196);
      --line: oklch(83% 0.035 202);
      --blue-green: oklch(63% 0.115 211);
      --blue-green-deep: oklch(43% 0.106 214);
      --blue-ice: oklch(88% 0.08 190);
      --mint: oklch(78% 0.105 166);
      --citrus: oklch(78% 0.13 87);
      --coral: oklch(68% 0.13 38);
      --violet: oklch(60% 0.09 292);
      --shadow: 0 24px 80px oklch(38% 0.08 215 / 0.17);
      --soft-shadow: 0 12px 36px oklch(38% 0.08 215 / 0.11);
      --radius: 8px;
      --radius-sm: 6px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);

      /* Typography scale (Phase 1) */
      --fs-display: clamp(3.25rem, 5vw + 1rem, 5.75rem);   /* 52–92 hero h1 */
      --fs-h2: clamp(2.125rem, 3.5vw + 0.75rem, 4.25rem);  /* 34–68 section h2 */
      --fs-h3: clamp(1.25rem, 1.5vw, 1.75rem);              /* 20–28 sub h3 */
      --fs-h4: 1.375rem;                                    /* 22 fixed (path-panel h2, trust-item h3, flow-copy h3) */
      --fs-lead: clamp(1.0625rem, 0.6vw + 0.875rem, 1.3125rem); /* 17–21 hero copy */
      --fs-body: 1.0625rem;                                 /* 17 body / node strong */
      --fs-small: 0.9375rem;                                /* 15 small body / service-chip b */
      --fs-meta: 0.875rem;                                  /* 14 kicker / request-title / nav-links */
      --fs-mini: 0.8125rem;                                 /* 13 role-index / ladder / legal / notice */
      --fs-tiny: 0.75rem;                                   /* 12 request-meta / quote-pill / service-chip span */

      /* Font weights (Noto Sans TC 實際僅 100/300/400/500/700/900；其餘為瀏覽器合成) */
      --fw-bold: 700;
      --fw-bold-heavy: 800;
      --fw-extrabold: 850;
      --fw-black: 900;

      /* Line heights */
      --lh-display: 0.96;
      --lh-heading: 1.05;
      --lh-subhead: 1.18;
      --lh-body: 1.65;
      --lh-snug: 1.4;

      font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 36%, oklch(96% 0.019 184) 100%);
      color: var(--ink);
      line-height: var(--lh-body);
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "palt" 1, "kern" 1;
    }

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

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid oklch(78% 0.13 87 / 0.7);
      outline-offset: 3px;
    }

    p,
    h1,
    h2,
    h3 {
      margin: 0;
    }

    /* Numbers: align digits vertically & horizontally (Phase 1) */
    .quote-pill,
    .ladder-row b,
    .role-index,
    .footer-brand,
    .flow-step,
    .request-row .request-meta {
      font-variant-numeric: tabular-nums;
    }

    .site-shell {
      min-height: 100vh;
      position: relative;
      isolation: isolate;
      --pointer-x: 0;
      --pointer-y: 0;
    }

    .site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        linear-gradient(90deg, oklch(72% 0.06 202 / 0.10) 1px, transparent 1px),
        linear-gradient(180deg, oklch(72% 0.06 202 / 0.08) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(180deg, oklch(0% 0 0 / 0.62), transparent 62%);
      animation: gridDrift 28s linear infinite;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      background: oklch(98% 0.012 196 / 0.88);
      backdrop-filter: blur(18px) saturate(1.15);
      border-bottom: 1px solid oklch(84% 0.045 202 / 0.75);
    }

    .nav {
      width: min(1180px, calc(100% - 32px));
      height: 68px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: var(--fw-bold-heavy);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .mark {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--paper);
      background: var(--blue-green);
      box-shadow: 0 10px 24px oklch(48% 0.11 211 / 0.22);
    }

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

    .nav-links a {
      padding: 8px 12px;
      color: var(--ink-soft);
      font-size: var(--fs-meta);
      border-radius: 999px;
      transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
    }

    .nav-links a:hover {
      color: var(--ink);
      background: oklch(91% 0.04 194 / 0.82);
      transform: translateY(-1px);
    }

    .nav-links .nav-cta {
      color: oklch(98% 0.012 196);
      background: var(--ink);
      box-shadow: 0 10px 28px oklch(24% 0.04 220 / 0.14);
    }

    .nav-links .nav-cta:hover {
      color: oklch(98% 0.012 196);
    }

    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: oklch(98% 0.012 196);
      color: var(--ink);
      cursor: pointer;
    }

    .mobile-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      border-radius: 999px;
      background: currentColor;
    }

    .mobile-panel {
      display: none;
      border-top: 1px solid var(--line);
      padding: 10px 16px 16px;
      background: oklch(98% 0.012 196);
    }

    .mobile-panel.open {
      display: grid;
      gap: 4px;
    }

    .mobile-panel a {
      padding: 12px 10px;
      border-radius: 8px;
      color: var(--ink-soft);
    }

    .section {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .hero {
      min-height: calc(100vh - 68px);
      display: grid;
      grid-template-columns: minmax(0, 0.84fr) minmax(440px, 1.16fr);
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      padding: clamp(54px, 8vw, 94px) 0 clamp(42px, 6vw, 84px);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--blue-green-deep);
      font-size: var(--fs-meta);
      font-weight: var(--fw-bold);
    }

    .kicker::before {
      content: "";
      width: 36px;
      height: 2px;
      background: var(--blue-green);
      border-radius: 999px;
      transform-origin: left center;
    }

    .hero h1 {
      max-width: 10ch;
      font-size: var(--fs-display);
      line-height: var(--lh-display);
      letter-spacing: 0;
      font-weight: var(--fw-black);
    }

    .hero-copy {
      margin-top: 28px;
      max-width: 66ch;
      color: var(--ink-soft);
      font-size: var(--fs-lead);
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 11px 16px;
      border: 1px solid oklch(75% 0.045 202);
      border-radius: 8px;
      font-weight: var(--fw-extrabold);
      line-height: 1;
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button.primary {
      color: oklch(97% 0.014 196);
      background: var(--ink);
      border-color: var(--ink);
      box-shadow: 0 18px 42px oklch(24% 0.04 220 / 0.2);
    }

    .button.primary:hover {
      background: var(--blue-green-deep);
      box-shadow: 0 20px 48px oklch(43% 0.106 214 / 0.25);
    }

    .button.secondary {
      color: var(--blue-green-deep);
      background: oklch(98% 0.012 196 / 0.76);
    }

    .role-router {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 26px;
      max-width: 720px;
    }

    .role-card {
      position: relative;
      min-height: 106px;
      display: grid;
      align-content: space-between;
      gap: 10px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: oklch(98% 0.012 196 / 0.72);
      overflow: hidden;
      transition: border-color 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease);
    }

    .role-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0 42%, oklch(86% 0.09 190 / 0.38) 50%, transparent 58% 100%);
      opacity: 0;
      transform: translateX(-90%);
      transition: opacity 220ms var(--ease), transform 620ms var(--ease);
      pointer-events: none;
    }

    .role-card:hover {
      border-color: oklch(64% 0.11 211 / 0.75);
      background: oklch(96% 0.03 190 / 0.86);
      box-shadow: 0 16px 46px oklch(38% 0.08 215 / 0.13);
    }

    .role-card:hover::after {
      opacity: 1;
      transform: translateX(92%);
    }

    .role-card b,
    .role-card span {
      position: relative;
      z-index: 1;
    }

    .role-card b {
      font-size: 16px;
      line-height: 1.25;
    }

    .role-card span {
      color: var(--ink-soft);
      font-size: var(--fs-mini);
      line-height: 1.45;
    }

    .role-arrow {
      position: absolute;
      top: 14px;
      right: 16px;
      font-size: 18px;
      color: var(--blue-green-deep);
      opacity: 0.55;
      font-weight: var(--fw-bold);
    }

    .dual-path {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 34px;
      max-width: 680px;
    }

    .path-panel {
      min-height: 160px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: oklch(98% 0.012 196 / 0.82);
      padding: 18px;
      box-shadow: var(--soft-shadow);
    }

    .path-label {
      color: var(--muted);
      font-size: var(--fs-mini);
      font-weight: var(--fw-bold);
      margin-bottom: 8px;
    }

    .path-panel h2 {
      font-size: var(--fs-h4);
      line-height: 1.22;
      margin-bottom: 10px;
      letter-spacing: 0;
    }

    .path-panel p {
      color: var(--ink-soft);
      font-size: var(--fs-small);
    }

    .hero-visual {
      min-height: 650px;
      position: relative;
      overflow: visible;
    }

    .orbital {
      position: absolute;
      inset: 24px 0 0 0;
      border-radius: 30px;
      background:
        linear-gradient(145deg, oklch(88% 0.08 190 / 0.92), oklch(96% 0.022 180 / 0.72)),
        repeating-linear-gradient(90deg, oklch(62% 0.09 210 / 0.16) 0 1px, transparent 1px 58px);
      box-shadow: var(--shadow);
      border: 1px solid oklch(84% 0.045 202 / 0.8);
      overflow: hidden;
      transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px), 0);
      transition: transform 360ms var(--ease);
    }

    .orbital::before {
      content: "";
      position: absolute;
      inset: -44% -30%;
      background: linear-gradient(105deg, transparent 0 43%, oklch(98% 0.012 196 / 0.42) 50%, transparent 57% 100%);
      opacity: 0.62;
      transform: translateX(-62%);
      animation: signalSweep 9s var(--ease) infinite;
      pointer-events: none;
    }

    .orbit-line {
      position: absolute;
      border: 1px solid oklch(45% 0.1 211 / 0.28);
      border-radius: 999px;
      transform: rotate(var(--orbit-angle));
      transform-origin: center;
    }

    .orbit-line.one {
      --orbit-angle: -18deg;
      width: 78%;
      height: 46%;
      left: 11%;
      top: 17%;
    }

    .orbit-line.two {
      --orbit-angle: 16deg;
      width: 92%;
      height: 62%;
      left: 4%;
      top: 9%;
      border-color: oklch(61% 0.1 176 / 0.25);
    }

    .orbit-line.three {
      --orbit-angle: 7deg;
      width: 58%;
      height: 33%;
      left: 19%;
      top: 39%;
      border-color: oklch(76% 0.11 88 / 0.28);
    }

    .node {
      position: absolute;
      width: min(196px, 32vw);
      min-height: 124px;
      padding: 16px;
      border-radius: 8px;
      background: oklch(97% 0.014 196 / 0.94);
      border: 1px solid oklch(80% 0.045 202);
      box-shadow: 0 18px 50px oklch(38% 0.08 215 / 0.14);
    }

    .node strong {
      display: block;
      font-size: var(--fs-body);
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .node span {
      display: block;
      color: var(--ink-soft);
      font-size: var(--fs-mini);
      line-height: 1.45;
    }

    .node.consumer {
      top: 54px;
      left: 34px;
      --float-delay: -1s;
    }

    .node.provider {
      right: 42px;
      top: 138px;
      --float-delay: -3s;
    }

    .node.agent {
      left: 68px;
      bottom: 78px;
      --float-delay: -5s;
    }

    .node.platform {
      right: 72px;
      bottom: 34px;
      --float-delay: -7s;
    }

    .device {
      position: absolute;
      width: min(290px, 46vw);
      height: 540px;
      left: 50%;
      top: 50%;
      transform: translate(-48%, -46%) rotate(-5deg) translate3d(calc(var(--pointer-x) * 12px), calc(var(--pointer-y) * 10px), 0);
      border-radius: 34px;
      padding: 14px;
      background: linear-gradient(160deg, oklch(31% 0.03 220), oklch(18% 0.02 220));
      box-shadow: 0 32px 90px oklch(24% 0.08 220 / 0.34);
      transition: transform 360ms var(--ease);
    }

    .screen {
      height: 100%;
      overflow: hidden;
      border-radius: 24px;
      background: oklch(97% 0.016 195);
      border: 1px solid oklch(76% 0.04 202 / 0.35);
    }

    .screen-head {
      padding: 24px 18px 18px;
      background: linear-gradient(145deg, var(--blue-green), var(--mint));
      color: oklch(98% 0.012 180);
    }

    .screen-head .mini {
      font-size: var(--fs-tiny);
      font-weight: var(--fw-bold);
      opacity: 0.9;
    }

    .screen-head .query {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      background: oklch(98% 0.012 190 / 0.88);
      color: var(--ink);
      font-weight: var(--fw-bold-heavy);
      font-size: var(--fs-small);
    }

    .screen-body {
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .request {
      border: 1px solid oklch(84% 0.04 202);
      background: oklch(99% 0.01 190);
      border-radius: 8px;
      padding: 12px;
      transform: translateZ(0);
      animation: requestBreathe 7s var(--ease) infinite;
      animation-delay: var(--request-delay, 0s);
    }

    .request:nth-child(2) {
      --request-delay: -2.5s;
    }

    .request:nth-child(3) {
      --request-delay: -5s;
    }

    .request-title {
      font-weight: var(--fw-bold-heavy);
      font-size: var(--fs-meta);
      margin-bottom: 6px;
    }

    .request-meta {
      color: var(--muted);
      font-size: var(--fs-tiny);
    }

    .request-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-top: 10px;
      align-items: center;
    }

    .quote-pill {
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--blue-ice);
      color: var(--blue-green-deep);
      font-size: var(--fs-tiny);
      font-weight: var(--fw-bold-heavy);
      white-space: nowrap;
    }

    .service-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 26px 0 12px;
    }

    .service-chip {
      min-height: 76px;
      display: grid;
      align-content: center;
      gap: 3px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: oklch(98% 0.012 196 / 0.74);
    }

    .service-chip b {
      font-size: var(--fs-small);
    }

    .service-chip span {
      color: var(--muted);
      font-size: var(--fs-tiny);
    }

    .band {
      padding: clamp(72px, 9vw, 124px) 0;
      border-top: 1px solid oklch(86% 0.04 202 / 0.75);
    }

    .band.alt {
      width: 100%;
      background:
        linear-gradient(180deg, oklch(92% 0.06 190 / 0.72), oklch(97% 0.016 196 / 0.5));
    }

    .band-inner {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1fr);
      gap: clamp(24px, 5vw, 78px);
      align-items: end;
      margin-bottom: 42px;
    }

    .section-heading h2 {
      font-size: var(--fs-h2);
      line-height: var(--lh-heading);
      letter-spacing: 0;
      font-weight: var(--fw-black);
    }

    .section-heading p {
      color: var(--ink-soft);
      max-width: 70ch;
      font-size: var(--fs-body);
    }

    .ecosystem {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: oklch(98% 0.012 196 / 0.82);
      box-shadow: var(--soft-shadow);
    }

    .role-band {
      background:
        linear-gradient(180deg, transparent, oklch(93% 0.045 190 / 0.48));
    }

    .role {
      min-height: 250px;
      padding: 24px;
      border-right: 1px solid var(--line);
      display: grid;
      align-content: space-between;
      gap: 24px;
      transition: background 220ms var(--ease), transform 220ms var(--ease);
    }

    .role:hover {
      background: oklch(96% 0.025 190 / 0.76);
      transform: translateY(-2px);
    }

    .role:last-child {
      border-right: 0;
    }

    .role-index {
      color: var(--blue-green-deep);
      font-weight: var(--fw-black);
      font-size: var(--fs-mini);
    }

    .role h3 {
      font-size: var(--fs-h3);
      line-height: 1.15;
      margin-bottom: 10px;
    }

    .role p {
      color: var(--ink-soft);
      font-size: var(--fs-small);
    }

    .role small {
      color: var(--muted);
      font-size: var(--fs-tiny);
    }

    .trust-layout {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: clamp(24px, 5vw, 64px);
      align-items: start;
    }

    .trust-copy {
      position: sticky;
      top: 96px;
    }

    .trust-copy h2 {
      font-size: var(--fs-h2);
      line-height: var(--lh-heading);
      font-weight: var(--fw-black);
    }

    .trust-copy p {
      margin-top: 18px;
      color: var(--ink-soft);
      font-size: var(--fs-body);
      max-width: 62ch;
    }

    .trust-stack {
      display: grid;
      gap: 14px;
    }

    .trust-item {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: oklch(98% 0.012 196 / 0.82);
      box-shadow: var(--soft-shadow);
    }

    .trust-symbol {
      width: 54px;
      height: 54px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: oklch(97% 0.014 196);
      background: var(--blue-green);
      font-weight: var(--fw-black);
      font-size: 20px;
    }

    .trust-item:nth-child(2) .trust-symbol {
      background: var(--mint);
      color: var(--ink);
    }

    .trust-item:nth-child(3) .trust-symbol {
      background: var(--citrus);
      color: var(--ink);
    }

    .trust-item:nth-child(4) .trust-symbol {
      background: var(--violet);
    }

    .trust-item h3 {
      font-size: var(--fs-h4);
      margin-bottom: 5px;
    }

    .trust-item p {
      color: var(--ink-soft);
      font-size: var(--fs-small);
    }

    .flow {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      border-radius: var(--radius);
    }

    .flow-row {
      display: grid;
      grid-template-columns: 170px 1fr;
      min-height: 96px;
      background: oklch(98% 0.012 196 / 0.82);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--soft-shadow);
    }

    .flow-step {
      display: grid;
      place-items: center;
      padding: 16px;
      background: oklch(88% 0.08 190 / 0.8);
      font-weight: var(--fw-black);
      color: var(--blue-green-deep);
    }

    .flow-copy {
      padding: 18px 22px;
    }

    .flow-copy h3 {
      font-size: var(--fs-h4);
      margin-bottom: 4px;
    }

    .flow-copy p {
      color: var(--ink-soft);
      font-size: var(--fs-small);
    }

    .income {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .income-panel {
      min-height: 360px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: oklch(98% 0.012 196 / 0.82);
      box-shadow: var(--soft-shadow);
      padding: 24px;
    }

    .income-panel h3 {
      font-size: var(--fs-h3);
      line-height: 1.16;
      margin-bottom: 14px;
    }

    .income-panel p {
      color: var(--ink-soft);
      margin-bottom: 20px;
    }

    .ladder {
      display: grid;
      gap: 8px;
    }

    .ladder-row {
      display: grid;
      grid-template-columns: 72px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 8px;
      background: oklch(93% 0.045 195 / 0.78);
      font-size: var(--fs-mini);
    }

    .ladder-row b {
      color: var(--blue-green-deep);
    }

    .notice {
      margin-top: 18px;
      color: var(--muted);
      font-size: var(--fs-mini);
    }

    .principles {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: clamp(24px, 5vw, 64px);
      align-items: center;
    }

    .principles h2 {
      font-size: var(--fs-h2);
      line-height: var(--lh-heading);
      margin-bottom: 20px;
    }

    .principles p {
      color: var(--ink-soft);
      font-size: var(--fs-body);
      max-width: 70ch;
    }

    .principle-list {
      display: grid;
      gap: 12px;
    }

    .principle {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: oklch(98% 0.012 196 / 0.82);
      box-shadow: var(--soft-shadow);
    }

    .principle b {
      display: block;
      margin-bottom: 5px;
      font-size: 18px;
    }

    .principle span {
      color: var(--ink-soft);
      font-size: var(--fs-small);
    }

    .legal {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 36px 0 50px;
      color: var(--muted);
      font-size: var(--fs-mini);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-weight: var(--fw-black);
      white-space: nowrap;
    }

    @keyframes gridDrift {
      from {
        background-position: 0 0, 0 0;
      }

      to {
        background-position: 72px 36px, 36px 72px;
      }
    }

    @keyframes signalSweep {
      0%, 46% {
        transform: translateX(-62%);
      }

      68%, 100% {
        transform: translateX(62%);
      }
    }

    @keyframes requestBreathe {
      0%, 100% {
        transform: translate3d(0, 0, 0);
        box-shadow: none;
      }

      50% {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 10px 26px oklch(38% 0.08 215 / 0.09);
      }
    }

    @media (max-width: 980px) {
      .nav-links {
        display: none;
      }

      .mobile-toggle {
        display: block;
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .hero h1 {
        max-width: 11ch;
      }

      .hero-visual {
        min-height: 590px;
      }

      .section-heading,
      .trust-layout,
      .principles {
        grid-template-columns: 1fr;
      }

      .trust-copy {
        position: static;
      }

      .ecosystem {
        grid-template-columns: repeat(2, 1fr);
      }

      .role:nth-child(2) {
        border-right: 0;
      }

      .role:nth-child(1),
      .role:nth-child(2) {
        border-bottom: 1px solid var(--line);
      }

      .income {
        grid-template-columns: 1fr;
      }

      .nav-links .nav-cta {
        display: none;
      }
    }

    @media (max-width: 680px) {
      .nav {
        width: min(100% - 24px, 1180px);
      }

      .section,
      .band-inner,
      .legal {
        width: min(100% - 24px, 1180px);
      }

      .hero {
        padding-top: 38px;
      }

      .hero h1 {
        font-size: clamp(3rem, 13vw, 4rem);
      }

      .dual-path,
      .role-router,
      .service-strip,
      .ecosystem {
        grid-template-columns: 1fr;
      }

      .role,
      .role:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .role:last-child {
        border-bottom: 0;
      }

      .hero-visual {
        min-height: 660px;
      }

      .orbital {
        inset: 20px 0 0 0;
      }

      .device {
        width: min(282px, 82vw);
        height: 520px;
        transform: translate(-50%, -42%) rotate(-3deg);
      }

      .node {
        width: 44%;
        min-height: 102px;
        padding: 12px;
      }

      .node strong {
        font-size: var(--fs-meta);
      }

      .node span {
        font-size: 11px;
      }

      .node.consumer {
        top: 8px;
        left: 6px;
      }

      .node.provider {
        right: 6px;
        top: 36px;
      }

      .node.agent {
        left: 6px;
        bottom: 26px;
      }

      .node.platform {
        right: 6px;
        bottom: 6px;
      }

      .flow-row {
        grid-template-columns: 1fr;
      }

      .flow-step {
        place-items: start;
      }

      .ladder-row {
        grid-template-columns: 58px 1fr;
      }

      .ladder-row span:last-child {
        grid-column: 2;
      }

      .legal {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .site-shell::before,
      .orbital::before,
      .orbit-line,
      .node,
      .request {
        animation: none;
      }
    }