:root {
      --bg: #0E0E0E;
      --bg-elev: #121216;
      --text: #F4F4F5;
      --muted: rgba(244, 244, 245, 0.58);
      --line: rgba(255, 255, 255, 0.08);
      --accent: #FE99FF;
      --accent-ink: #0E0E0E;
      --radius: 1rem;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      -webkit-user-drag: none !important;
      user-drag: none !important;
    }

    input,
    textarea,
    select,
    [contenteditable="true"] {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
    }

    img,
    svg,
    a {
      -webkit-user-drag: none !important;
      user-drag: none !important;
      -webkit-touch-callout: none !important;
    }

    html {
      scroll-behavior: smooth;
      scrollbar-width: none !important;
      scrollbar-color: #FE99FF transparent !important;
    }

    ::-webkit-scrollbar {
      display: none !important;
    }

    ::-webkit-scrollbar-track {
      background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
      background: #FE99FF !important;
      border-radius: 0 !important;
      min-height: 40px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #FE99FF !important;
    }

    ::-webkit-scrollbar-corner {
      background: transparent !important;
    }

    body {
      margin: 0;
      font-family: "DM Sans", system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .bg-atmosphere {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-color: var(--bg);
      /* background-image: url('images/intro-bg.webp'); */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.15;
    }

    .font-display {
      font-family: "Space Grotesk", system-ui, sans-serif;
    }

    /* Staggered entry animations */
    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(28px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes ticker {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .rise {
      opacity: 0;
      animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .fade-in {
      opacity: 0;
      animation: fade 1s ease forwards;
    }

    .d1 {
      animation-delay: 0.05s;
    }

    .d2 {
      animation-delay: 0.15s;
    }

    .d3 {
      animation-delay: 0.25s;
    }

    .d4 {
      animation-delay: 0.35s;
    }

    .d5 {
      animation-delay: 0.45s;
    }

    .d6 {
      animation-delay: 0.55s;
    }

    .d7 {
      animation-delay: 0.7s;
    }

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

      .rise,
      .fade-in {
        opacity: 1;
        animation: none;
        transform: none;
      }

      .ticker-track {
        animation: none !important;
      }

      * {
        transition-duration: 0.01ms !important;
      }
    }

    /* Glass pill nav */
    #main-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:16px 16px 0;}
    @media (min-width:640px){#main-header{padding-top:20px;}}
    .nav-glass {
      background: rgba(10, 10, 12, 0.55);
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .btn-primary {
      background: var(--accent);
      color: var(--accent-ink);
      font-weight: 600;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
      box-shadow: 0 0 0 0 rgba(254, 153, 255, 0);
    }

    .btn-primary:hover {
      background: #FFFFFF;
      box-shadow: none;
    }

    .btn-primary:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
    }

    .btn-ghost {
      border: 1px solid var(--line);
      color: var(--text);
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.04);
    }

    .btn-ghost:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    /* Logo ticker */
    .ticker-mask {
      mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    }

    .ticker-track {
      display: flex;
      width: max-content;
      gap: 3.5rem;
      animation: ticker 32s linear infinite;
    }

    .ticker-track:hover {
      animation-play-state: paused;
    }

    /* Bento cards */
    .bento-card {
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .bento-card:hover {
      border-color: rgba(254, 153, 255, 0.45);
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(254, 153, 255, 0.12);
    }

    .bento-card:focus-within {
      border-color: rgba(254, 153, 255, 0.45);
    }

    /* Pricing */
    .price-card {
      background: rgba(18, 18, 22, 0.7);
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      transition: border-color 0.25s ease, transform 0.25s ease;
    }

    .price-card:hover {
      transform: translateY(-3px);
    }

    .price-card.featured {
      border-color: rgba(254, 153, 255, 0.65);
      background:
        linear-gradient(160deg, rgba(254, 153, 255, 0.12), rgba(18, 18, 22, 0.9) 45%);
      position: relative;
    }

    .price-card.featured::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(140deg, rgba(254, 153, 255, 0.7), transparent 40%, transparent 60%, rgba(254, 153, 255, 0.35));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .toggle-track {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid var(--line);
      transition: background 0.25s ease;
    }

    .toggle-track[data-period="monthly"] {
      background: rgba(254, 153, 255, 0.25);
    }

    .toggle-thumb {
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
      background: #FE99FF;
    }

    .toggle-track[data-period="monthly"] .toggle-thumb {
      transform: translateX(1.5rem);
    }

    /* Hero mock */
    .hero-glow {
      background: radial-gradient(circle at 50% 40%, rgba(254, 153, 255, 0.28), transparent 65%);
      filter: blur(40px);
    }

    .glass-panel {
      background: rgba(18, 18, 22, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }

    .check-icon {
      color: #FE99FF;
    }

    @keyframes float-y {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    .float-slow {
      animation: float-y 7s ease-in-out infinite;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.35;
      }
    }

    .pulse-dot {
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .bg-\[var\(--background-color\)\] {
      background-color: transparent !important;
    }

    :root {
      --icon-color: rgba(255, 255, 255, 0.55);
      --secondary-color: rgba(255, 255, 255, 0.55);
      --background-color: transparent;
    }

    .g9-lang-wrap{position:relative;display:none;font-family:"DM Sans",sans-serif;z-index:60;}
    @media(min-width:640px){.g9-lang-wrap{display:inline-flex;}}
    .g9-lang-btn{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);cursor:pointer;padding:8px 12px;font-size:14px;font-weight:500;transition:color .2s;font-family:inherit;}
    .g9-lang-btn:hover{color:#fff;}
    .g9-lang-menu{position:absolute;top:100%;right:0;margin-top:8px;background:rgba(10,10,12,.98);border:1px solid rgba(255,255,255,.1);border-radius:10px;width:130px;padding:4px;opacity:0;visibility:hidden;transform:translateY(4px);transition:all .2s ease;box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
    .g9-lang-wrap.open .g9-lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
    .g9-lang-menu a{display:flex;align-items:center;gap:10px;padding:6px 12px;color:var(--muted);text-decoration:none;font-size:13.5px;border-radius:6px;transition:color .2s;}
    .g9-lang-menu a:hover{color:#fff;}
    .g9-lang-menu a.active{color:#FE99FF;}
    .g9-lang-arr{opacity:0.5;transition:transform .2s;}
    .g9-lang-wrap.open .g9-lang-arr{transform:rotate(180deg);}html{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}