:root {

      --bg: #070b12;

      --panel: #0d1420;

      --panel-2: #111b2b;

      --text: #f4f7fb;

      --muted: #a8b3c7;

      --line: rgba(255,255,255,.11);

      --blue: #22c7ff;

      --purple: #8b5cf6;

      --orange: #ff9f1c;

      --green: #35d07f;

      --shadow: 0 24px 80px rgba(0,0,0,.45);

    }



    * { box-sizing: border-box; }



    html { scroll-behavior: smooth; }



    body {

      margin: 0;

      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      background:

        radial-gradient(circle at top left, rgba(34,199,255,.18), transparent 34rem),

        radial-gradient(circle at 78% 8%, rgba(139,92,246,.2), transparent 32rem),

        radial-gradient(circle at 45% 28%, rgba(255,159,28,.1), transparent 30rem),

        var(--bg);

      color: var(--text);

      line-height: 1.55;

    }



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



    .container {

      width: min(1120px, calc(100% - 40px));

      margin: 0 auto;

    }



    .nav {

      position: sticky;

      top: 0;

      z-index: 20;

      backdrop-filter: blur(18px);

      background: rgba(7,11,18,.72);

      border-bottom: 1px solid var(--line);

    }



    .nav-inner {

      display: flex;

      align-items: center;

      justify-content: space-between;

      padding: 16px 0;

      gap: 20px;

    }



    .brand {

      display: flex;

      align-items: center;

      gap: 12px;

      font-weight: 800;

      letter-spacing: -.03em;

      font-size: 20px;

    }



    .brand-mark {

      width: 38px;

      height: 38px;

      border-radius: 12px;

      display: grid;

      place-items: center;

      background: linear-gradient(135deg, rgba(34,199,255,.95), rgba(139,92,246,.95));

      box-shadow: 0 0 28px rgba(34,199,255,.22);

      color: white;

      font-weight: 900;

    }



    .nav-links {

      display: flex;

      align-items: center;

      gap: 18px;

      color: var(--muted);

      font-size: 14px;

    }



    .nav-links a:hover { color: var(--text); }



    .button {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-height: 46px;

      padding: 0 18px;

      border-radius: 14px;

      font-weight: 800;

      border: 1px solid var(--line);

      transition: transform .18s ease, border-color .18s ease, background .18s ease;

      cursor: pointer;

    }



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



    .button-primary {

      background: linear-gradient(135deg, var(--orange), #ffd166);

      color: #111827;

      border-color: transparent;

      box-shadow: 0 18px 46px rgba(255,159,28,.25);

    }



    .button-secondary {

      background: rgba(255,255,255,.06);

      color: var(--text);

    }



    .hero {

      padding: 86px 0 64px;

    }



    .hero-grid {

      display: grid;

      grid-template-columns: 1.08fr .92fr;

      gap: 46px;

      align-items: center;

    }



    .eyebrow {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      padding: 7px 11px;

      border: 1px solid var(--line);

      border-radius: 999px;

      background: rgba(255,255,255,.05);

      color: var(--muted);

      font-size: 13px;

      font-weight: 700;

    }



    .dot {

      width: 8px;

      height: 8px;

      background: var(--green);

      border-radius: 50%;

      box-shadow: 0 0 18px rgba(53,208,127,.75);

    }



    h1 {

      margin: 20px 0 18px;

      max-width: 760px;

      font-size: clamp(42px, 6vw, 72px);

      line-height: .96;

      letter-spacing: -.07em;

    }



    .gradient-text {

      background: linear-gradient(135deg, #fff, #b5e9ff 42%, #ffd166);

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

    }



    .hero-copy {

      max-width: 650px;

      color: var(--muted);

      font-size: 19px;

      margin: 0 0 28px;

    }



    .cta-row {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      gap: 14px;

    }



    .microcopy {

      margin-top: 16px;

      color: var(--muted);

      font-size: 14px;

    }



    .product-card {

      position: relative;

      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));

      border: 1px solid var(--line);

      border-radius: 30px;

      box-shadow: var(--shadow);

      overflow: hidden;

    }



    .product-card::before {

      content: "";

      position: absolute;

      inset: -2px;

      background: linear-gradient(135deg, rgba(34,199,255,.26), rgba(139,92,246,.18), rgba(255,159,28,.2));

      z-index: -1;

      filter: blur(24px);

    }



    .window-bar {

      display: flex;

      gap: 7px;

      padding: 16px;

      border-bottom: 1px solid var(--line);

      background: rgba(255,255,255,.04);

    }



    .pill { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }

    .pill:nth-child(2) { background: #ffbd2e; }

    .pill:nth-child(3) { background: #28c840; }



    .app-preview {

      padding: 22px;

    }



    .preview-header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 16px;

    }



    .preview-title {

      font-size: 20px;

      font-weight: 900;

      letter-spacing: -.04em;

    }



    .badge {

      font-size: 12px;

      padding: 6px 9px;

      border-radius: 999px;

      color: #001018;

      background: #8be9fd;

      font-weight: 900;

    }



    .code-box {

      font-family: "Cascadia Code", Consolas, monospace;

      background: #060a10;

      border: 1px solid rgba(255,255,255,.1);

      border-radius: 18px;

      padding: 18px;

      color: #d7e4f5;

      min-height: 180px;

      font-size: 14px;

      white-space: pre-wrap;

    }



    .test-row {

      display: grid;

      grid-template-columns: 1fr auto;

      gap: 10px;

      margin-top: 12px;

      padding: 12px;

      border-radius: 16px;

      background: rgba(255,255,255,.05);

      border: 1px solid var(--line);

    }



    .status-pass { color: var(--green); font-weight: 900; }

    .status-fail { color: #ff6b6b; font-weight: 900; }



    .section {

      padding: 68px 0;

    }



    .section-heading {

      max-width: 720px;

      margin-bottom: 28px;

    }



    h2 {

      font-size: clamp(32px, 4vw, 48px);

      line-height: 1.05;

      margin: 0 0 12px;

      letter-spacing: -.055em;

    }



    .section-heading p {

      margin: 0;

      color: var(--muted);

      font-size: 18px;

    }



    .features {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 16px;

    }



    .feature {

      padding: 22px;

      border-radius: 22px;

      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));

      border: 1px solid var(--line);

    }



    .feature-icon {

      width: 42px;

      height: 42px;

      display: grid;

      place-items: center;

      border-radius: 14px;

      background: rgba(34,199,255,.14);

      color: #8be9fd;

      font-size: 20px;

      margin-bottom: 14px;

    }



    .feature h3 {

      margin: 0 0 8px;

      font-size: 18px;

      letter-spacing: -.025em;

    }



    .feature p {

      margin: 0;

      color: var(--muted);

      font-size: 15px;

    }



    .steps {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 14px;

      counter-reset: steps;

    }



    .step {

      position: relative;

      padding: 22px;

      border-radius: 22px;

      background: var(--panel);

      border: 1px solid var(--line);

      counter-increment: steps;

    }



    .step::before {

      content: counter(steps);

      display: grid;

      place-items: center;

      width: 34px;

      height: 34px;

      border-radius: 12px;

      background: linear-gradient(135deg, var(--blue), var(--purple));

      font-weight: 900;

      margin-bottom: 16px;

    }



    .pricing {

      display: grid;

      grid-template-columns: .9fr 1.1fr;

      gap: 24px;

      align-items: center;

      padding: 30px;

      border-radius: 30px;

      background: linear-gradient(135deg, rgba(34,199,255,.09), rgba(139,92,246,.11), rgba(255,159,28,.08));

      border: 1px solid var(--line);

      box-shadow: var(--shadow);

    }



    .price-card {

      padding: 26px;

      border-radius: 24px;

      background: rgba(7,11,18,.72);

      border: 1px solid var(--line);

    }



    .price {

      font-size: 48px;

      font-weight: 950;

      letter-spacing: -.06em;

      margin: 6px 0;

    }



    .checklist {

      list-style: none;

      padding: 0;

      margin: 18px 0 0;

      color: var(--muted);

    }



    .checklist li {

      margin: 10px 0;

      padding-left: 28px;

      position: relative;

    }



    .checklist li::before {

      content: "✓";

      position: absolute;

      left: 0;

      color: var(--green);

      font-weight: 900;

    }



    .faq {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 16px;

    }



    details {

      padding: 20px;

      border-radius: 18px;

      background: rgba(255,255,255,.045);

      border: 1px solid var(--line);

    }



    summary {

      cursor: pointer;

      font-weight: 850;

      letter-spacing: -.02em;

    }



    details p {

      color: var(--muted);

      margin: 12px 0 0;

    }



    footer {

      border-top: 1px solid var(--line);

      padding: 28px 0;

      color: var(--muted);

      font-size: 14px;

    }



    .footer-inner {

      display: flex;

      justify-content: space-between;

      gap: 20px;

      flex-wrap: wrap;

    }



    .footer-links {

      display: flex;

      gap: 16px;

      flex-wrap: wrap;

    }



    @media (max-width: 900px) {

      .hero-grid, .pricing { grid-template-columns: 1fr; }

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

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

      .nav-links { display: none; }

    }



    @media (max-width: 620px) {

      .features, .steps, .faq { grid-template-columns: 1fr; }

      .container { width: min(100% - 26px, 1120px); }

      .hero { padding-top: 54px; }

      .cta-row .button { width: 100%; }

    }