:root {
      color-scheme: dark;
      --bg: #05080b;
      --panel: rgba(9, 15, 20, .78);
      --panel-2: rgba(12, 22, 28, .88);
      --line: rgba(195, 226, 236, .16);
      --line-strong: rgba(39, 216, 255, .40);
      --text: #f2f7f9;
      --muted: #afbec5;
      --cyan: #27d8ff;
      --green: #75f0a7;
      --shadow: 0 22px 60px rgba(0, 0, 0, .38);
      --radius: 8px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5;
      background: var(--bg);
      color: var(--text);
    }

    .clockwork-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background: #02050b;
    }

    .clockwork-bg iframe {
      width: 100%;
      height: 100%;
      display: block;
      border: 0;
      opacity: .58;
      filter: saturate(.92) contrast(1.08);
      pointer-events: none;
    }

    .clockwork-shade {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(2, 5, 8, .64), rgba(2, 5, 8, .18) 32%, rgba(2, 5, 8, .76) 100%),
        radial-gradient(circle at 50% 12%, rgba(39, 216, 255, .10), transparent 32%),
        radial-gradient(circle at 74% 38%, rgba(255, 49, 95, .10), transparent 28%);
    }

    .site-header,
    main,
    .footer {
      position: relative;
      z-index: 2;
    }

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

    img {
      display: block;
      max-width: 100%;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid var(--line);
      background: rgba(5, 8, 11, .86);
      backdrop-filter: blur(16px);
    }

    .nav {
      width: min(100% - 32px, var(--max));
      min-height: 76px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: linear-gradient(145deg, rgba(39, 216, 255, .18), rgba(117, 240, 167, .08));
      color: var(--cyan);
      font-weight: 900;
      box-shadow: 0 0 22px rgba(39, 216, 255, .10);
      animation: brandPulse 4s ease-in-out infinite;
    }

    .brand-name {
      display: block;
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 900;
      letter-spacing: .02em;
      background: linear-gradient(90deg, #f4fbff, var(--cyan), #f4fbff);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: brandSweep 5.8s ease-in-out infinite;
    }

    .brand-domain {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    @keyframes brandSweep {
      0%, 100% { background-position: 0 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes brandPulse {
      0%, 100% { box-shadow: 0 0 18px rgba(39, 216, 255, .10); }
      50% { box-shadow: 0 0 30px rgba(39, 216, 255, .24); }
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    [hidden] { display: none !important; }

    .member-name {
      max-width: 220px;
      overflow: hidden;
      color: var(--muted);
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .button {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 10px 15px;
      font-weight: 900;
      font-size: 14px;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      white-space: nowrap;
    }

    .button:hover { transform: translateY(-1px); }
    .button.primary {
      background: var(--cyan);
      color: #041014;
      box-shadow: 0 12px 28px rgba(39, 216, 255, .18);
    }
    .button.secondary {
      border-color: var(--line);
      background: rgba(255, 255, 255, .04);
      color: var(--text);
    }

    .glyph {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, .18);
      font-size: 13px;
      line-height: 1;
    }

    .hero {
      width: min(100% - 32px, var(--max));
      margin: 0 auto;
      padding: 76px 0 34px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 16px;
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--green);
    }

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

    h1 {
      max-width: 960px;
      margin-bottom: 18px;
      font-size: clamp(42px, 7vw, 84px);
      line-height: .95;
      letter-spacing: 0;
    }

    .title-kicker {
      display: block;
      color: var(--cyan);
    }

    .title-subline {
      display: block;
      font-size: 75%;
      line-height: 1.05;
    }

    .hero-copy {
      max-width: 800px;
      color: #cfdae0;
      font-size: 18px;
    }

    .section {
      border-top: 1px solid var(--line);
      padding: 68px 0;
    }

    .section-inner {
      width: min(100% - 32px, var(--max));
      margin: 0 auto;
    }

    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }

    .section-heading h2 {
      margin-bottom: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .section-heading p {
      max-width: 520px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .app-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .app-library-note {
      max-width: 720px;
      margin: 24px auto 0;
      color: var(--muted);
      text-align: center;
    }

    .app-card,
    .workflow-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
      box-shadow: var(--shadow);
    }

    .app-card {
      display: flex;
      flex-direction: column;
      padding: 20px;
      color: inherit;
      transition: border-color .18s ease, transform .18s ease, background .18s ease;
    }

    .app-card:hover,
    .app-card:focus-visible {
      border-color: var(--line-strong);
      background: linear-gradient(180deg, rgba(39, 216, 255, .08), rgba(255, 255, 255, .03));
      transform: translateY(-2px);
      outline: none;
    }

    .app-top {
      display: grid;
      grid-template-columns: minmax(190px, .72fr) minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }

    .app-thumb {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 6px;
      aspect-ratio: 16 / 9;
      background: #050708;
    }

    .app-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .app-card h3,
    .workflow-card h3 {
      margin-bottom: 7px;
      font-size: 23px;
      line-height: 1.15;
    }

    .app-card p,
    .workflow-card p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .app-availability {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      color: var(--cyan);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 14px rgba(117, 240, 167, .8);
    }

    .workflow-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .offline-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .offline-card {
      display: grid;
      gap: 16px;
      align-content: start;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      background: var(--panel-2);
      box-shadow: var(--shadow);
    }

    .offline-card h3 { margin-bottom: 4px; }

    .product-price {
      color: var(--green);
      font-size: 22px;
      font-weight: 900;
    }

    .product-meta {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 13px;
    }

    .product-hash {
      overflow-wrap: anywhere;
      color: #8ea4ae;
      font-family: Consolas, "Courier New", monospace;
      font-size: 11px;
    }

    .member-status {
      min-height: 24px;
      margin: 0 0 16px;
      color: var(--muted);
    }

    .member-status.error { color: #ff8ba4; }

    .retail-callout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 24px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      padding: 18px 20px;
      background: linear-gradient(135deg, rgba(39, 216, 255, .09), rgba(117, 240, 167, .04));
      box-shadow: var(--shadow);
    }

    .retail-callout strong {
      display: block;
      margin-bottom: 3px;
      color: var(--cyan);
      font-size: 18px;
    }

    .retail-callout p {
      margin: 0;
      color: var(--muted);
    }

    .retail-callout .button {
      margin-top: 14px;
    }

    .coming-soon-badge {
      flex: 0 0 auto;
      border: 1px solid rgba(117, 240, 167, .34);
      border-radius: 999px;
      padding: 8px 12px;
      color: var(--green);
      background: rgba(117, 240, 167, .08);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .button[disabled] {
      cursor: not-allowed;
      opacity: .58;
      transform: none;
    }

    .workflow-card {
      display: grid;
      gap: 14px;
      padding: 20px;
    }

    .workflow-visual-stack {
      display: grid;
      gap: 0;
      width: 75%;
      margin-inline: auto;
    }

    .workflow-visual-stack-portrait {
      max-width: 560px;
    }

    .workflow-logo,
    .workflow-image {
      overflow: visible;
      border: 1px solid rgba(39, 216, 255, .2);
      background: #020607;
    }

    .workflow-logo {
      border-radius: 6px 6px 0 0;
      border-bottom: 0;
    }

    .workflow-image {
      border-radius: 0 0 6px 6px;
    }

    .workflow-logo img,
    .workflow-image img {
      display: block;
      width: 100%;
      height: auto;
    }

    .footer {
      border-top: 1px solid var(--line);
      padding: 28px 0;
      color: var(--muted);
      font-size: 13px;
    }

    .footer-inner {
      width: min(100% - 32px, var(--max));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .footer a {
      color: var(--cyan);
      font-weight: 900;
    }

    @media (max-width: 940px) {
      .nav {
        min-height: auto;
        padding: 12px 0;
      }

      .section-heading,
      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero {
        padding-top: 48px;
      }
    }

    @media (max-width: 720px) {
      .nav {
        align-items: flex-start;
        flex-direction: column;
      }

      .header-actions {
        width: 100%;
      }

      .header-actions .button {
        flex: 1;
      }

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

      .workflow-visual-stack,
      .workflow-visual-stack-portrait {
        width: 100%;
        max-width: none;
      }

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

      .app-top {
        grid-template-columns: 1fr;
      }

      .button {
        width: 100%;
      }

      .retail-callout {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.app-actions .button { white-space: normal; text-align: center; }
.app-card .app-connection-note { margin-top: 14px; font-size: 13px; }
.offline-card { scroll-margin-top: 120px; }
.profile-password { max-width: 560px; display: grid; gap: 16px; }
.profile-password label { display: grid; gap: 8px; }
.profile-password input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #0a1118; color: var(--text); font: inherit; }
#profile-identity { overflow-wrap: anywhere; }
#profile-purchases, #profile-apps { margin: 22px 0; }
#profile-apps .button, #profile-purchases .button { white-space: normal; text-align: center; }
@media (max-width: 640px) {
  .header-actions .member-name { display: none; }
  .header-actions { flex-wrap: wrap; }
}