:root {
      --ink: #10233f;
      --muted: #52647d;
      --surface: #ffffff;
      --line: #dbe5f0;
      --blue: #1769e0;
      --blue-deep: #0d4fac;
      --mint: #75e4c3;
      --shadow: 0 18px 45px rgba(19, 48, 87, 0.12);
      --soft-shadow: 0 8px 22px rgba(19, 48, 87, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      width: 100%;
      min-width: 320px;
      margin: 0;
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

    a {
      color: inherit;
    }

    .page-shell {
      width: 100%;
      overflow: hidden;
    }

    .hub-container {
      width: min(1120px, calc(100% - 2rem));
      margin: 0 auto;
    }

    .site-header {
      position: relative;
      z-index: 2;
      border-bottom: 1px solid rgba(219, 229, 240, 0.8);
    }

    .header-inner {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand-lockup {
      display: inline-flex;
        align-items: center;
        text-decoration: none;
        background: transparent;
        border: none;
        padding: 0;
    }

    .brand-mark {
      display: contents;
    }

    .official-logo {
        display: block;
        width: auto;
        height: 50px;
        object-fit: contain;
        background: transparent;
        border: none;
        box-shadow: none;
    }



    .header-note {
      margin: 0;
      color: var(--muted);
      font-size: 0.875rem;
    }

    main {
      position: relative;
    }

    .ambient-orb {
      position: absolute;
      z-index: 0;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(1px);
      opacity: 0.8;
    }

    .orb-one {
      top: -100px;
      right: -160px;
      background: radial-gradient(circle, rgba(117, 228, 195, 0.38), rgba(117, 228, 195, 0));
    }

    .orb-two {
      top: 330px;
      left: -210px;
      background: radial-gradient(circle, rgba(39, 120, 231, 0.16), rgba(39, 120, 231, 0));
    }

    .content-area {
      position: relative;
      z-index: 1;
      padding: 3.5rem 0 4.5rem;
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(2rem, 6vw, 5rem);
      border: 1px solid rgba(255, 255, 255, 0.82);
      border-radius: 28px;
      box-shadow: var(--shadow);
    }

    .hero-panel::after {
      content: "";
      position: absolute;
      inset: auto 5% 0 auto;
      width: 180px;
      height: 180px;
      border: 1px solid rgba(255, 255, 255, 0.38);
      border-radius: 32px;
      transform: translateY(38%) rotate(28deg);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 720px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 1rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 8px;
      height: 8px;
      content: "";
      border-radius: 50%;
      background: currentColor;
    }

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

    .hero-title {
      max-width: 680px;
      margin-bottom: 1rem;
      font-size: clamp(2.5rem, 7vw, 5rem);
      line-height: 0.98;
      letter-spacing: -0.065em;
    }

    .hero-description {
      max-width: 600px;
      margin-bottom: 0;
      font-size: clamp(1rem, 2.5vw, 1.2rem);
      line-height: 1.65;
    }

    .demo-directory {
      margin-top: clamp(3rem, 7vw, 5.5rem);
    }

    .directory-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .directory-heading h2 {
      margin-bottom: 0;
      font-size: clamp(1.45rem, 3vw, 2rem);
      letter-spacing: -0.04em;
    }

    .heading-rule {
      flex: 1;
      max-width: 150px;
      height: 1px;
      margin-bottom: 0.45rem;
      background: var(--line);
    }

    .demo-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .demo-card {
      position: relative;
      display: flex;
      min-height: 210px;
      flex-direction: column;
      justify-content: space-between;
      padding: 1.5rem;
      overflow: hidden;
      text-decoration: none;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--soft-shadow);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .demo-card::before {
      position: absolute;
      top: 0;
      right: 1.2rem;
      width: 54px;
      height: 4px;
      content: "";
      border-radius: 0 0 10px 10px;
      background: currentColor;
      opacity: 0.85;
    }

    .demo-card:hover {
      transform: translateY(-5px);
      border-color: currentColor;
      box-shadow: 0 18px 35px rgba(19, 48, 87, 0.15);
    }

    .demo-card:active {
      transform: translateY(-1px);
    }

    .demo-card:focus-visible,
    .brand-lockup:focus-visible {
      outline: 3px solid #10233f;
      outline-offset: 4px;
    }

    .demo-card-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 1rem;
    }

    .demo-number {
      display: grid;
      width: 2.4rem;
      height: 2.4rem;
      place-items: center;
      border-radius: 50%;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: inset 0 0 0 1px rgba(16, 35, 63, 0.08);
    }

    .arrow-icon {
      width: 24px;
      height: 24px;
      transition: transform 180ms ease;
    }

    .demo-card:hover .arrow-icon,
    .demo-card:focus-visible .arrow-icon {
      transform: translate(3px, -3px);
    }

    .demo-card h3 {
      margin: 1.8rem 0 0.45rem;
      font-size: 1.45rem;
      line-height: 1.1;
      letter-spacing: -0.035em;
    }

    .demo-card p {
      margin-bottom: 0;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .glowcart-card {
      color: #073d77;
    }

    .blueprint-card {
      color: #36423b;
    }

    .architect-card {
      color: #552b6e;
    }

    .site-footer {
      border-top: 1px solid rgba(219, 229, 240, 0.88);
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.4rem 0;
    }

    .footer-text {
      margin: 0;
      font-size: 0.875rem;
    }

    .footer-mark {
      width: 34px;
      height: 6px;
      border-radius: 99px;
      background: var(--mint);
    }

    @media (min-width: 700px) {
      .hub-container {
        width: min(1120px, calc(100% - 4rem));
      }

      .content-area {
        padding: 5.5rem 0 6rem;
      }

      .demo-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .demo-card {
        min-height: 260px;
      }
    }

    @media (max-width: 460px) {
      .header-note {
        display: none;
      }

      .hero-panel {
        border-radius: 22px;
      }
    }

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

      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }