:root {
        --bg: #f7f8fb;
        --surface: rgba(255, 255, 255, 0.92);
        --panel: #ffffff;
        --text: #0b1220;
        --muted: rgba(11, 18, 32, 0.72);
        --muted2: rgba(11, 18, 32, 0.55);
        --border: rgba(11, 18, 32, 0.12);
        --brand: #5166ff;
        --brand2: #7c4dff;
        --ok: #0ea5e9;
        --shadow: 0 18px 48px rgba(11, 18, 32, 0.10);
        --shadow2: 0 10px 26px rgba(11, 18, 32, 0.08);
        --ring: 0 0 0 4px rgba(81, 102, 255, 0.20);
        --r-xl: 28px;
        --r-lg: 20px;
        --r-md: 14px;
        --r-sm: 12px;
        --container: 1120px;
        --gutter: clamp(16px, 3vw, 28px);
        --pad: clamp(56px, 9vw, 110px);
        --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji";
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #060b14;
          --surface: rgba(255, 255, 255, 0.08);
          --panel: rgba(255, 255, 255, 0.06);
          --text: #f1f5ff;
          --muted: rgba(241, 245, 255, 0.78);
          --muted2: rgba(241, 245, 255, 0.58);
          --border: rgba(241, 245, 255, 0.14);
          --shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
          --shadow2: 0 14px 44px rgba(0, 0, 0, 0.40);
          --ring: 0 0 0 4px rgba(81, 102, 255, 0.32);
          --brand: #6c7bff;
          --brand2: #a86bff;
        }
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

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

      body {
        margin: 0;
        font-family: var(--font);
        color: var(--text);
        background:
          radial-gradient(1200px 700px at 18% -10%, rgba(81, 102, 255, 0.16), transparent 60%),
          radial-gradient(1100px 700px at 88% 5%, rgba(124, 77, 255, 0.14), transparent 58%),
          radial-gradient(900px 650px at 45% 110%, rgba(14, 165, 233, 0.10), transparent 55%),
          var(--bg);
        line-height: 1.55;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

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

      a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
      }

      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible {
        outline: none;
        box-shadow: var(--ring);
        border-color: rgba(81, 102, 255, 0.6);
      }

      .container {
        width: min(var(--container), calc(100% - (var(--gutter) * 2)));
        margin: 0 auto;
      }

      .skip {
        position: absolute;
        left: 12px;
        top: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: var(--shadow2);
        transform: translateY(-140%);
        transition: transform 180ms ease;
        z-index: 2000;
      }

      .skip:focus {
        transform: translateY(0);
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: var(--shadow2);
        font-weight: 760;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
      }

      .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow);
        border-color: rgba(81, 102, 255, 0.28);
        text-decoration: none;
      }

      .btn:active {
        transform: translateY(0);
      }

      .btn.primary {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.14);
        background: linear-gradient(135deg, var(--brand), var(--brand2));
        box-shadow: 0 16px 42px rgba(81, 102, 255, 0.28);
      }

      .btn.ghost {
        background: transparent;
        box-shadow: none;
      }

      .appstore-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
      }

      .appstore-badge:hover {
        text-decoration: none;
      }

      .appstore-badge img {
        display: block;
        height: 44px;
        width: auto;
      }

      header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: rgba(247, 248, 251, 0.62);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(11, 18, 32, 0.05);
      }

      @media (prefers-color-scheme: dark) {
        header {
          background: rgba(6, 11, 20, 0.55);
          border-bottom-color: rgba(241, 245, 255, 0.08);
        }
      }

      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 0;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-weight: 820;
        letter-spacing: -0.02em;
      }

      .mark {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        background:
          radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.08)),
          linear-gradient(135deg, var(--brand), var(--brand2));
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 14px 32px rgba(81, 102, 255, 0.22);
      }

      nav.primary {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      nav.primary a {
        color: var(--muted);
        font-weight: 700;
      }

      nav.primary a:hover {
        color: var(--text);
        text-decoration: none;
      }

      .actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .hamburger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: var(--shadow2);
        cursor: pointer;
        position: relative;
      }

      .hamburger span {
        position: absolute;
        left: 12px;
        right: 12px;
        height: 2px;
        background: var(--text);
        border-radius: 2px;
        transition: transform 160ms ease, opacity 160ms ease, top 160ms ease;
      }

      .hamburger span:nth-child(1) {
        top: 16px;
      }

      .hamburger span:nth-child(2) {
        top: 21px;
      }

      .hamburger span:nth-child(3) {
        top: 26px;
      }

      nav.mobile {
        display: none;
        border-top: 1px solid var(--border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 240ms ease;
      }

      nav.mobile[data-open="true"] {
        max-height: 360px;
      }

      nav.mobile .menu {
        display: grid;
        gap: 10px;
        padding: 14px 0 18px;
      }

      nav.mobile a:not(.appstore-badge) {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--panel);
        color: var(--muted);
        font-weight: 760;
      }

      nav.mobile a:not(.appstore-badge):hover {
        color: var(--text);
        border-color: rgba(81, 102, 255, 0.28);
        text-decoration: none;
      }

      nav.mobile .appstore-badge {
        justify-content: center;
        padding: 6px 0;
      }

      nav.mobile .appstore-badge img {
        height: 40px;
      }

      .hero {
        padding: calc(var(--pad) * 0.95) 0 var(--pad);
      }

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

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--shadow2);
        backdrop-filter: blur(10px);
        color: var(--muted);
        font-weight: 740;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--brand), var(--brand2));
        box-shadow: 0 10px 22px rgba(81, 102, 255, 0.28);
      }

      h1 {
        margin: 16px 0 12px;
        font-size: clamp(38px, 5vw, 60px);
        line-height: 1.04;
        letter-spacing: -0.04em;
      }

      p.lead {
        margin: 0;
        color: var(--muted);
        font-size: clamp(16px, 1.25vw, 18px);
        max-width: 60ch;
      }

      .cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin: 20px 0 14px;
      }

      .trust {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--muted2);
        font-weight: 700;
      }

      .trust svg {
        width: 18px;
        height: 18px;
      }

      .carousel {
        border-radius: 34px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
      }

      .carousel-frame {
        border-radius: 34px;
        border: 1px solid var(--border);
        height: clamp(520px, 62vh, 680px);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow);
      }

      .carousel-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transform: scale(1.01);
        pointer-events: none;
        transition: opacity 520ms ease, transform 740ms ease;
      }

      .carousel-slide[data-active="true"] {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
        pointer-events: auto;
      }

      section {
        padding: var(--pad) 0;
      }

      .head2 {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
      }

      h2 {
        margin: 0;
        font-size: clamp(26px, 3vw, 36px);
        line-height: 1.12;
        letter-spacing: -0.03em;
      }

      .sub {
        margin: 10px 0 0;
        color: var(--muted);
        max-width: 64ch;
      }

      .grid {
        display: grid;
        gap: 16px;
      }

      .card {
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: var(--shadow2);
        padding: 18px;
      }

      .features {
        grid-template-columns: repeat(12, 1fr);
      }

      .feat {
        grid-column: span 6;
        min-height: 170px;
        display: grid;
        gap: 10px;
        position: relative;
        overflow: hidden;
      }

      .feat::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: radial-gradient(360px 220px at 20% -10%, rgba(81, 102, 255, 0.10), transparent 62%);
        pointer-events: none;
      }

      .ic {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(81, 102, 255, 0.18);
        background: linear-gradient(135deg, rgba(81, 102, 255, 0.16), rgba(124, 77, 255, 0.12));
      }

      .ic svg {
        width: 22px;
        height: 22px;
        color: var(--brand);
      }

      .feat h3 {
        margin: 0;
        font-size: 16px;
        letter-spacing: -0.01em;
      }

      .feat p {
        margin: 0;
        color: var(--muted);
        max-width: 54ch;
      }

      footer {
        padding: 32px 0 52px;
        border-top: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.03);
      }

      .foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
      }

      .links {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        align-items: center;
        color: var(--muted);
        font-weight: 720;
      }

      .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: var(--shadow2);
      }

      .icon svg {
        width: 18px;
        height: 18px;
      }

      .reveal {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 520ms ease, transform 520ms ease;
      }

      .reveal.on {
        opacity: 1;
        transform: translateY(0);
      }

      @media (prefers-reduced-motion: reduce) {
        .reveal {
          transition: none;
          opacity: 1;
          transform: none;
        }

        .carousel-slide {
          transition: none;
          transform: none;
        }

        .btn,
        .hamburger span,
        nav.mobile {
          transition: none;
        }
      }

      @media (max-width: 980px) {
        .hero-grid {
          grid-template-columns: 1fr;
        }

        .carousel {
          max-width: 520px;
          margin: 0 auto;
        }

      }

      @media (max-width: 820px) {
        nav.primary,
        .actions .desktop {
          display: none;
        }

        .hamburger,
        nav.mobile {
          display: block;
        }
      }

      @media (max-width: 720px) {
        .feat {
          grid-column: span 12;
        }
      }
      @media (max-width: 980px) {
      .carousel {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
      }

      .carousel-frame {
        width: 90%;
        height: auto;            /* ok now */
        aspect-ratio: 9 / 19.5;    /* pick what looks best */
        min-height: 420px;       /* safety net for weird browsers */
      }

      .carousel-slide {
        object-fit: cover;       /* keeps it from becoming a thin line */
        object-position: center; /* adjust if needed */
      }
    }