:root {
      --bg: #0b1020;
      --panel: #0f172a;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --brand: #0ea5e9;
      --brand-2: #22d3ee;
      --accent: #a78bfa;
      --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
      --radius: 16px;
      --shadow: 0 10px 30px rgba(2, 6, 23, 0.5);
      --shadow-soft: 0 8px 20px rgba(2, 6, 23, 0.35);
  }

  * {
      box-sizing: border-box;
  }

  html,
  body {
      height: 100%;
  }

  body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, 0.1), transparent 60%),
          radial-gradient(800px 400px at 10% 20%, rgba(14, 165, 233, 0.12), transparent 60%),
          var(--bg);
      line-height: 1.6;
  }

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

  .container {
      width: min(1120px, 92%);
      margin-inline: auto;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .9rem 1.2rem;
      border-radius: 999px;
      border: 1px solid transparent;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: white;
      font-weight: 600;
      letter-spacing: .2px;
      box-shadow: var(--shadow);
      transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
      cursor: pointer;
  }

  .btn:hover {
      transform: translateY(-1px);
  }

  .btn:active {
      transform: translateY(0);
      box-shadow: var(--shadow-soft);
  }

  .btn-outline {
      background: transparent;
      color: var(--text);
      border-color: color-mix(in oklab, var(--text) 14%, transparent);
      box-shadow: none;
  }

  .chip {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem .7rem;
      border-radius: 999px;
      background: color-mix(in oklab, var(--brand) 16%, transparent);
      color: color-mix(in oklab, white 90%, var(--brand));
      border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
      font-weight: 600;
      font-size: .85rem;
  }

  /* Nav */
  .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: color-mix(in oklab, var(--bg) 70%, transparent);
      border-bottom: 1px solid color-mix(in oklab, white 6%, transparent);
  }

  .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .8rem 0;
  }

  .brand {
      display: flex;
      align-items: center;
      gap: .7rem;
      font-weight: 800;
      letter-spacing: .2px;
  }

  .logo {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: white;
      background: conic-gradient(from 180deg, var(--brand), var(--accent));
      box-shadow: var(--shadow-soft);
  }

  .nav-links {
      display: flex;
      gap: 1rem;
      align-items: center;
  }

  .nav-links a {
      opacity: .9;
      padding: .6rem .9rem;
      border-radius: 10px;
  }

  .nav-links a:hover {
      background: color-mix(in oklab, white 5%, transparent);
  }

  .menu-btn {
      display: none;
      border: 1px solid color-mix(in oklab, white 10%, transparent);
      background: transparent;
      border-radius: 10px;
      padding: .5rem .6rem;
  }

  @media (max-width: 860px) {
      .nav-links {
          display: none;
          position: absolute;
          inset: 64px 0 auto 0;
          background: color-mix(in oklab, var(--bg) 80%, transparent);
          border-bottom: 1px solid color-mix(in oklab, white 6%, transparent);
          padding: .7rem;
      }

      .nav-links.open {
          display: grid;
          grid-template-columns: 1fr;
          gap: .3rem;
      }

      .nav-links a {
          padding: .8rem;
      }

      .menu-btn {
          display: inline-flex;
          align-items: center;
          gap: .5rem;
          color: var(--text);
      }
  }

  /* Hero */
  .hero {
      padding: clamp(3rem, 7vw, 6rem) 0;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: center;
  }

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

  .headline {
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: .2px;
  }

  .headline strong {
      background: linear-gradient(135deg, var(--brand), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .subhead {
      color: var(--muted);
      font-size: clamp(1rem, 1.3vw, 1.1rem);
      max-width: 60ch;
  }

  .hero-cta {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 1.1rem;
          justify-content: center;
  }

  .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: color-mix(in oklab, white 8%, transparent);
      border: 1px solid color-mix(in oklab, white 15%, transparent);
      padding: .4rem .6rem;
      border-radius: 8px;
  }

  .mock {
      background: linear-gradient(135deg, color-mix(in oklab, var(--panel) 85%, transparent), color-mix(in oklab, var(--panel) 70%, transparent));
      border: 1px solid color-mix(in oklab, white 6%, transparent);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1rem;
      position: relative;
      overflow: hidden;
  }

  .status {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .8rem;
      margin-top: 1.4rem;
  }

  .card {
      background: color-mix(in oklab, var(--panel) 72%, transparent);
      border: 1px solid color-mix(in oklab, white 7%, transparent);
      border-radius: 14px;
      padding: 1rem;
  }

  .eyebrow {
      color: var(--muted);
      font-size: .85rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 700;
  }

  .stat {
      font-size: 1.6rem;
      font-weight: 900;
  }

  /* Features */
  section {
      padding: clamp(2.6rem, 6vw, 4.5rem) 0;
  }

  .section-head {
      display: grid;
      gap: .6rem;
      text-align: center;
      margin-bottom: 1.4rem;
  }

  .section-head h2 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      margin: 0;
  }

  .section-head p {
      margin: 0;
      color: var(--muted);
  }

  .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
  }

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

  .feature {
      background: color-mix(in oklab, var(--panel) 68%, transparent);
      border: 1px solid color-mix(in oklab, white 7%, transparent);
      border-radius: 16px;
      padding: 1rem;
      box-shadow: var(--shadow-soft);
  }

  .feature h3 {
      margin: .2rem 0 .6rem;
  }

  .icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--brand), var(--accent));
      color: white;
      font-weight: 900;
  }

  /* Testimonials */
  .testimonials {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
  }

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

  .quote {
      background: color-mix(in oklab, var(--panel) 72%, transparent);
      border: 1px solid color-mix(in oklab, white 7%, transparent);
      border-radius: 16px;
      padding: 1rem;
  }

  .quote footer {
      margin-top: .8rem;
      color: var(--muted);
      font-size: .95rem;
  }

  /* Pricing */
  .pricing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      align-items: stretch;
  }

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

  .plan {
      background: color-mix(in oklab, var(--panel) 68%, transparent);
      border: 1px solid color-mix(in oklab, white 7%, transparent);
      border-radius: 18px;
      padding: 1.2rem;
      display: grid;
      gap: .8rem;
  }

  .plan.popular {
      outline: var(--ring);
      border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  }

  .price {
      font-size: 2rem;
      font-weight: 900;
  }

  .checklist {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: .5rem;
  }

  .checklist li {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: flex-start;
      gap: .6rem;
  }

  /* FAQ */
  details {
      background: color-mix(in oklab, var(--panel) 68%, transparent);
      border: 1px solid color-mix(in oklab, white 7%, transparent);
      border-radius: 14px;
      padding: .8rem 1rem;
  }

  details+details {
        margin-top: 1.6rem;
  }

  summary {
      cursor: pointer;
      font-weight: 700;
  }

  /* CTA */
  .cta {
      background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, transparent), transparent);
      border: 1px solid color-mix(in oklab, white 6%, transparent);
      border-radius: 20px;
      padding: 1.4rem;
      text-align: center;
      box-shadow: var(--shadow);
  }

  /* Footer */
  footer {
      color: var(--muted);
      border-top: 1px solid color-mix(in oklab, white 6%, transparent);
      padding: 2rem 0;
      font-size: .95rem;
  }

  /* Animations (respect accessibility) */
  @media (prefers-reduced-motion: no-preference) {
      .fade-up {
          opacity: 0;
          transform: translateY(10px);
          animation: fadeUp .6s ease forwards;
      }

      .delay-1 {
          animation-delay: .1s;
      }

      .delay-2 {
          animation-delay: .2s;
      }

      .delay-3 {
          animation-delay: .3s;
      }

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