* { box-sizing: border-box; }
      html, body { height: 100%; margin: 0; }
      body {
        margin: 0;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
        background: radial-gradient(1200px 600px at 50% -10%, #1b2233 0%, #0d1117 60%);
        font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        color: #fff;
      }

      /* Floating island top bar, shaped like the landing-page nav. */
      .topbar {
        position: fixed;
        top: 18px;
        left: 50%;
        z-index: 60;
        transform: translateX(-50%);
        display: flex;
        width: max-content;
        max-width: calc(100vw - 24px);
        padding: 9px 10px 9px 18px;
        border-radius: 999px;
        background: rgba(13, 17, 23, 0.78);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(42, 47, 58, 0.9);
      }
      .topbar-inner {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .topbar .brand { font-size: 16px; font-weight: 800; white-space: nowrap; }
      .topbar .brand span { color: #1eb2ff; }
      .topbar .nav-btn {
        background: #1eb2ff;
        color: #08121f;
        font-size: 13px;
        font-weight: 700;
        padding: 8px 14px;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
      }
      .topbar .nav-btn:hover { background: #45c1ff; }

      /* Stage - centers the device frame and the demo banner together. */
      .stage {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 100px 24px 24px;
        min-height: 0;
      }

      /* Device frame - phone (portrait 390x844) or tablet (landscape 1024x768).
         The wrapper is sized to the SCALED dimensions by JS, so flexbox centers
         the device as it currently appears (not at its 1x layout size). */
      .device-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 390px;
        height: 844px;
      }
      .device-frame {
        position: absolute;
        left: 50%;
        top: 50%;
        background: #000;
        border-radius: 46px;
        overflow: hidden;
        box-shadow: 0 0 0 2px #2a2f3a, 0 0 0 7px #000, 0 30px 70px rgba(0,0,0,.65);
        transform: translate(-50%, -50%) scale(var(--s, 1));
        transform-origin: center center;
      }
      .device-frame.phone  { width: 390px; height: 844px; }
      .device-frame.tablet { width: 1024px; height: 768px; border-radius: 18px; }

      .device-frame .notch {
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 120px; height: 26px; background: #000; border-radius: 16px; z-index: 30;
      }
      .device-frame.tablet .notch { display: none; }

      .device-frame .status {
        height: 20px; padding: 10px 22px 0;
        display: flex; justify-content: space-between; align-items: center;
        color: #fff; font: 600 12px/1 system-ui; z-index: 20;
      }
      .device-frame.tablet .status { display: none; }
      .device-frame .status .icons { width: 54px; height: 10px; background: rgba(255,255,255,.85); border-radius: 3px; }

      .device-frame .screen { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; background: #fff; }
      .device-frame.tablet .screen { top: 0; }
      .device-frame .screen iframe { width: 100%; height: 100%; border: 0; display: block; }

      /* Demo banner card - sits beside the device frame, centered with it. */
      .demo-banner {
        width: 300px;
        flex: 0 0 auto;
        background: rgba(255,255,255,0.04);
        border: 1px solid #2a2f3a;
        border-radius: 16px;
        padding: 24px;
        backdrop-filter: blur(6px);
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .demo-banner .badge {
        align-self: flex-start;
        background: rgba(30,178,255,0.15);
        color: #7cc8ff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
      }
      .demo-banner h1 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 800; }
      .demo-banner h1 span { color: #1eb2ff; }
      .demo-banner p { margin: 0; color: #aab2bf; font-size: 13px; line-height: 1.5; }
      .demo-banner .creds { display: flex; flex-direction: column; gap: 6px; }
      .demo-banner .creds div { font-size: 12px; color: #c8d0dd; }
      .demo-banner .creds code {
        font-size: 12px;
        color: #7cc8ff;
        background: rgba(30,178,255,0.1);
        padding: 1px 6px;
        border-radius: 4px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }
      .demo-banner .note {
        font-size: 11px;
        color: #8b93a6;
        border-top: 1px solid #2a2f3a;
        padding-top: 12px;
        margin: 0;
      }
      .demo-banner button.action {
        background: #1eb2ff;
        border: none;
        color: #08121f;
        font-size: 13px;
        font-weight: 700;
        padding: 11px 14px;
        border-radius: 10px;
        cursor: pointer;
        white-space: nowrap;
      }
      .demo-banner button.action:hover { background: #45c1ff; }
      .demo-banner button.action:disabled { opacity: 0.6; cursor: default; }

      /* Device selector toggle */
      .device-selector {
        display: flex;
        gap: 0;
        background: rgba(255,255,255,0.06);
        border-radius: 10px;
        padding: 3px;
        border: 1px solid #2a2f3a;
      }
      .device-btn {
        flex: 1;
        padding: 8px 0;
        border: none;
        background: transparent;
        color: #8b93a6;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
      }
      .device-btn:hover { color: #c8d0dd; }
      .device-btn.active { background: #1eb2ff; color: #08121f; }
      .device-btn svg { width: 14px; height: 14px; }

      @media (max-width: 1400px) {
        .stage { gap: 28px; }
        .demo-banner { width: 280px; }
      }
      @media (max-width: 900px) {
        .stage { flex-direction: column; gap: 28px; justify-content: safe center; }
        .device-wrap { margin: auto; }
        .demo-banner { width: 390px; max-width: 100%; }
      }

      /* On a real phone (narrow/short window) show the app full-screen with a slim top bar. */
      @media (max-width: 519px), (max-height: 699px) {
        body { overflow: hidden; }
        .topbar { top: 10px; width: calc(100% - 20px); padding: 7px 8px 7px 14px; }
        .topbar .nav-btn { font-size: 12px; padding: 7px 12px; }
        .stage { padding: 0; }
        .demo-banner { display: none; }
        .device-wrap {
          flex: 1 1 auto;
          width: auto;
          height: auto;
          min-height: 0;
          margin: 0;
          align-self: stretch;
        }
        .device-frame {
          position: absolute;
          left: 0;
          top: 0;
          width: auto;
          height: auto;
          inset: 0;
          top: 52px;
          border-radius: 0;
          box-shadow: none;
          transform: none;
        }
        .device-frame.phone, .device-frame.tablet { width: auto; height: auto; }
        .device-frame .notch, .device-frame .status { display: none; }
        .device-frame .screen { top: 0; height: 100%; }
      }