:root {

      --bg: #050816;

      --bg-soft: #0b1020;

      --accent: #4f46e5;

      --accent-soft: rgba(79, 70, 229, 0.15);

      --accent-strong: #6366f1;

      --text-primary: #f9fafb;

      --text-secondary: #9ca3af;

      --border-subtle: #1f2937;

      --danger: #f97373;

      --radius-lg: 18px;

      --radius-full: 999px;

      --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.65);

      --shadow-glow: 0 0 40px rgba(79, 70, 229, 0.45);

    }



    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }



    html, body {

      height: 100%;

    }



    body {

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

      font-size: 15px;

      background-color: var(--tbg-1);

      background-image: radial-gradient(circle at top, var(--tbg-2) 0, var(--tbg-1) 45%, var(--tbg-3) 100%);

      background-repeat: no-repeat;

      background-attachment: fixed;

      color: var(--text-primary);

      -webkit-font-smoothing: antialiased;

      text-rendering: optimizeLegibility;

    }



    a {

      text-decoration: none;

      color: inherit;

    }



    .page {

      min-height: 100vh;

      display: flex;

      flex-direction: column;

    }



    .container {

      width: 100%;

      max-width: 1120px;

      margin: 0 auto;

      padding: 24px 20px 64px;

    }



    /* Top bar */

    .top-bar {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 16px;

    }



    .logo {

      display: inline-flex;

      align-items: center;

      gap: 10px;

    }



    .logo-img {

      width: 130px;

      height: 130px;

      display: block;

      object-fit: contain;

    }



    .logo-text {

      display: flex;

      flex-direction: column;

      gap: 2px;

    }



    .logo-title {

      font-weight: 600;

      letter-spacing: 0.04em;

      text-transform: uppercase;

      font-size: 13px;

    }



    .logo-sub {

      font-size: 11px;

      color: var(--text-secondary);

    }



    .top-cta {

      display: flex;

      align-items: center;

      gap: 12px;

      font-size: 13px;

      color: var(--text-secondary);

    }



    .top-cta-pill {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      border-radius: 999px;

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

      padding: 4px 10px 4px 6px;

      background: var(--tbg-14);

      backdrop-filter: blur(12px);

    }



    .top-cta-dot {

      width: 8px;

      height: 8px;

      border-radius: 999px;

      background: #22c55e;

      box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.25);

    }



    .top-cta-link {

      color: var(--accent-strong);

      font-weight: 500;

    }



    .top-cta-link.use-cases-btn {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      padding: 6px 14px;

      border-radius: 999px;

      border: 1px solid rgba(129, 140, 248, 0.6);

      background: rgba(79, 70, 229, 0.15);

      color: var(--accent-strong);

      font-weight: 600;

      transition: all 0.15s ease;

      box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);

    }



    .top-cta-link.use-cases-btn:hover {

      background: rgba(79, 70, 229, 0.25);

      border-color: rgba(129, 140, 248, 0.9);

      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);

      transform: translateY(-1px);

    }



    /* Hero */

    .hero {

      display: grid;

      grid-template-columns: minmax(0, 1.5fr) minmax(0, 240px);

      gap: 40px;

      align-items: flex-start;

      margin-bottom: 56px;

    }



    .pill {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      border-radius: 999px;

      border: 1px solid var(--tbd-4);

      background: radial-gradient(circle at top, rgba(59, 130, 246, 0.25), var(--tbg-4));

      padding: 4px 10px 4px 6px;

      margin-bottom: 16px;

      font-size: 11px;

      color: var(--text-secondary);

    }



    .pill-badge {

      padding: 3px 7px;

      border-radius: 999px;

      font-size: 10px;

      font-weight: 600;

      letter-spacing: 0.08em;

      text-transform: uppercase;

      color: var(--ttx-2);

      background: rgba(22, 163, 74, 0.18);

      border: 1px solid rgba(74, 222, 128, 0.6);

    }



    .pill-text-strong {

      color: var(--ttx-2);

      font-weight: 500;

    }



    .hero-title {

      font-size: clamp(32px, 5vw, 40px);

      line-height: 1.1;

      font-weight: 700;

      letter-spacing: -0.04em;

      margin-bottom: 14px;

    }



    .hero-highlight {

      background: radial-gradient(circle at 0 0, #22d3ee, #4f46e5 40%, #a855f7 75%);

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

    }



    .hero-subtitle {

      color: var(--text-secondary);

      font-size: 15px;

      line-height: 1.7;

      max-width: 480px;

      margin-bottom: 24px;

    }



    .hero-subtitle strong {

      color: var(--ttx-2);

      font-weight: 500;

    }



    .hero-ctas {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      gap: 14px;

      margin-bottom: 22px;

    }

    .hero-downloads {

      display: flex;

      flex-wrap: wrap;

      align-items: flex-start;

      gap: 18px 36px;

      margin-bottom: 20px;

    }

    .dl-group {

      display: flex;

      flex-direction: column;

      gap: 9px;

    }

    .dl-row {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      gap: 10px;

    }

    .hero-downloads .dl-label {

      font-size: 10.5px;

      font-weight: 600;

      letter-spacing: 0.12em;

      text-transform: uppercase;

      color: var(--ttx-13);

    }



    .app-store-badge {

      display: inline-block;

      height: 40px;

      transition: opacity 0.2s ease, transform 0.2s ease;

    }

    .app-store-badge:hover {

      opacity: 0.9;

      transform: scale(1.02);

    }

    .app-store-badge img,

    .app-store-badge svg {

      height: 100%;

      width: auto;

      display: block;

      border-radius: 5px;

    }



    .btn-primary {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 8px;

      padding: 10px 18px;

      border-radius: var(--radius-full);

      border: none;

      font-size: 14px;

      font-weight: 600;

      color: var(--ttx-5);

      background: radial-gradient(circle at 0 0, #22d3ee, #4f46e5 45%, #a855f7 85%);

      box-shadow: var(--shadow-glow);

      cursor: pointer;

      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;

    }



    .btn-primary span.icon {

      font-size: 16px;

      translate: 0 0;

      transition: translate 0.12s ease;

    }



    .btn-primary:hover {

      transform: translateY(-1px);

      filter: brightness(1.05);

      box-shadow: 0 18px 40px rgba(79, 70, 229, 0.75);

    }



    .btn-primary:hover span.icon {

      translate: 1px 0;

    }



    .btn-ghost {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      height: 42px;

      padding: 0 16px;

      border-radius: var(--radius-full);

      border: 1px solid var(--tbd-4);

      background: var(--tbg-13);

      color: var(--text-secondary);

      font-size: 13px;

      cursor: pointer;

      transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;

    }



    .btn-ghost:hover {

      background: var(--tbg-15);

      border-color: var(--tbd-5);

      color: var(--ttx-2);

    }



    .btn-icon {

      width: 18px;

      height: 18px;

      display: block;

      object-fit: contain;

    }



    .hero-meta {

      display: flex;

      flex-wrap: wrap;

      gap: 14px;

      font-size: 11px;

      color: var(--text-secondary);

    }



    .meta-label {

      display: inline-flex;

      align-items: center;

      gap: 8px;

    }



    .meta-dot {

      width: 2px;

      height: 2px;

      border-radius: 999px;

      background: var(--tbg-16);

    }



    .hero-card {

      position: relative;

      border-radius: 26px;

      padding: 0;

      background: transparent;

      box-shadow: none;

      border: none;

      max-width: 320px;

      justify-self: center;

    }



    .hero-card::before {

      content: none;

    }



    .hero-card-inner {

      position: relative;

      display: flex;

      justify-content: center;

      align-items: center;

      z-index: 1;

    }



    .phone {

      border-radius: 24px;

      padding: 10px 9px;

      background: radial-gradient(circle at 0 0, var(--tbg-4), var(--tbg-1));

      border: 1px solid var(--tbd-6);

      box-shadow: 0 14px 35px var(--tsh-1);

      display: flex;

      justify-content: center;

      align-items: center;

    }



    .phone-screen {

      width: 100%;

      aspect-ratio: 9 / 18;

      border-radius: 18px;

      padding: 10px 10px 12px;

      background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.2), var(--tbg-1));

      border: 1px solid var(--tbd-4);

      display: flex;

      flex-direction: column;

      gap: 8px;

    }



    .phone-top {

      display: flex;

      justify-content: space-between;

      align-items: center;

      font-size: 9px;

      color: var(--ttx-11);

    }



    .phone-notch {

      width: 42%;

      height: 8px;

      border-radius: 999px;

      background: var(--tbg-17);

      border: 1px solid var(--tbd-7);

    }



    .phone-main {

      flex: 1;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      gap: 10px;

    }



    .scan-box {

      width: 100%;

      aspect-ratio: 4 / 3;

      border-radius: 14px;

      border: 1px solid var(--tbd-6);

      background:

        repeating-linear-gradient(

          90deg,

          var(--tbg-4) 0,

          var(--tbg-4) 10px,

          var(--tbg-18) 10px,

          var(--tbg-18) 20px

        );

      position: relative;

      overflow: hidden;

    }



    .scan-corners {

      position: absolute;

      inset: 6px;

      border-radius: 12px;

      border: 1px dashed var(--tbd-8);

      box-shadow: inset 0 0 0 1px var(--tsh-2);

    }



    .scan-line {

      position: absolute;

      left: 0;

      right: 0;

      top: 50%;

      height: 2px;

      background: linear-gradient(90deg, transparent, #22c55e, transparent);

      box-shadow: 0 0 16px rgba(22, 163, 74, 0.95);

    }



    .barcode-bars {

      position: absolute;

      inset: 16px 18px;

      display: flex;

      align-items: center;

      justify-content: space-evenly;

      gap: 2px;

      opacity: 0.9;

    }



    .barcode-bars span {

      display: block;

      width: 2px;

      height: 75%;

      background: linear-gradient(to bottom, var(--tbg-19), var(--tbg-20));

      border-radius: 999px;

    }



    .barcode-bars span:nth-child(2),

    .barcode-bars span:nth-child(5),

    .barcode-bars span:nth-child(8) {

      height: 90%;

    }



    .barcode-bars span:nth-child(3),

    .barcode-bars span:nth-child(7) {

      height: 65%;

    }



    .phone-label {

      font-size: 10px;

      color: var(--ttx-11);

    }



    .phone-chip-row {

      display: flex;

      justify-content: center;

      gap: 8px;

      margin-top: 4px;

    }



    .phone-chip {

      padding: 3px 7px;

      border-radius: 999px;

      font-size: 9px;

      background: var(--tbg-13);

      border: 1px solid var(--tbd-9);

      color: var(--ttx-12);

    }



    .desktop-card {

      border-radius: 20px;

      padding: 12px 12px 14px;

      background: var(--tbg-5);

      border: 1px solid var(--tbd-4);

      box-shadow: 0 12px 32px var(--tsh-1);

      position: relative;

      overflow: hidden;

    }



    .desktop-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      margin-bottom: 10px;

      font-size: 9px;

      color: var(--ttx-13);

    }



    .desktop-dots {

      display: flex;

      gap: 4px;

    }



    .desktop-dots span {

      width: 7px;

      height: 7px;

      border-radius: 999px;

    }



    .desktop-dots span:nth-child(1) { background: #f97373; }

    .desktop-dots span:nth-child(2) { background: #fbbf24; }

    .desktop-dots span:nth-child(3) { background: #22c55e; }



    .desktop-body {

      border-radius: 14px;

      padding: 10px;

      background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.15), var(--tbg-6));

      border: 1px solid var(--tbd-10);

      display: grid;

      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

      gap: 10px;

      position: relative;

      overflow: hidden;

    }



    .desktop-body::after {

      content: "";

      position: absolute;

      inset: -40%;

      background-image: radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.18), transparent 50%);

      opacity: 0.9;

      pointer-events: none;

    }



    .desktop-stream {

      position: relative;

      z-index: 1;

      display: flex;

      flex-direction: column;

      gap: 6px;

      font-size: 10px;

    }



    .stream-label {

      color: var(--ttx-14);

      display: flex;

      align-items: center;

      gap: 6px;

    }



    .stream-label-dot {

      width: 6px;

      height: 6px;

      border-radius: 999px;

      background: rgba(56, 189, 248, 0.6);

      box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);

    }



    .stream-items {

      display: flex;

      flex-direction: column;

      gap: 4px;

    }



    .stream-item {

      display: flex;

      justify-content: space-between;

      align-items: center;

      border-radius: 10px;

      padding: 5px 7px;

      background: var(--tbg-6);

      border: 1px solid var(--tbd-2);

      color: var(--ttx-15);

    }



    .stream-code {

      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      font-size: 10px;

    }



    .stream-meta {

      font-size: 9px;

      color: var(--ttx-16);

    }



    .desktop-status {

      position: relative;

      z-index: 1;

      border-radius: 12px;

      padding: 7px 8px;

      background: linear-gradient(

        135deg,

        var(--tbg-4),

        var(--tbg-5)

      );

      border: 1px solid var(--tbd-11);

      display: flex;

      flex-direction: column;

      gap: 6px;

      font-size: 10px;

    }



    .status-title {

      display: flex;

      align-items: center;

      justify-content: space-between;

      color: var(--ttx-15);

    }



    .status-pill {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      border-radius: 999px;

      padding: 2px 7px 2px 3px;

      background: rgba(22, 163, 74, 0.12);

      border: 1px solid rgba(74, 222, 128, 0.65);

      color: rgba(187, 247, 208, 0.98);

      font-size: 9px;

      font-weight: 500;

    }



    .status-dot {

      width: 7px;

      height: 7px;

      border-radius: 999px;

      background: #22c55e;

      box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);

    }



    .status-row {

      display: flex;

      justify-content: space-between;

      align-items: center;

      color: var(--ttx-16);

    }



    .status-row span:last-child {

      color: var(--ttx-17);

      font-weight: 500;

    }



    .status-badge-row {

      display: flex;

      flex-wrap: wrap;

      gap: 4px;

    }



    .status-badge {

      padding: 2px 6px;

      border-radius: 999px;

      border: 1px solid var(--tbd-11);

      background: var(--tbg-6);

      color: var(--ttx-18);

      font-size: 9px;

    }



    .hero-footer {

      position: relative;

      margin-top: 10px;

      font-size: 10px;

      color: var(--ttx-6);

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 10px;

    }



    .hero-footer span strong {

      color: var(--ttx-15);

    }



    /* Sections wrapper */

    .sections {

      display: block;

    }



    .sections > div {

      display: contents;

    }



    section {

      margin-bottom: 26px;

    }



    .section-label {

      font-size: 11px;

      letter-spacing: 0.2em;

      text-transform: uppercase;

      color: var(--ttx-13);

      margin-bottom: 8px;

    }



    .section-title {

      font-size: 18px;

      font-weight: 600;

      margin-bottom: 12px;

    }



    .section-text {

      font-size: 14px;

      color: var(--text-secondary);

      line-height: 1.7;

    }



    /* Documentation / Collage CTA */

    .doc-cta {

      margin: 32px 0 40px;

      text-align: left;

    }



    .doc-cta-inner {

      width: 100%;

      max-width: 100%;

      margin: 0;

      padding: 24px 20px;

      border-radius: 20px;

      background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(56, 189, 248, 0.08));

      border: 1px solid rgba(129, 140, 248, 0.35);

      box-shadow: 0 12px 32px var(--tsh-3);

    }



    .doc-cta-btn {

      display: inline-block;

      padding: 12px 24px;

      border-radius: var(--radius-full);

      font-size: 16px;

      font-weight: 600;

      color: var(--ttx-2);

      background: transparent;

      border: 1px solid rgba(129, 140, 248, 0.85);

      text-decoration: none;

      transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    }



    .doc-cta-btn:hover {

      transform: translateY(-2px);

      border-color: rgba(167, 139, 250, 0.95);

      color: var(--ttx-5);

    }



    .doc-cta-desc {

      margin: 14px 0 0;

      font-size: 13px;

      color: var(--text-secondary);

      line-height: 1.5;

    }

    .featured-guide {
      display: block;
      margin: 0 0 28px;
      padding: 18px 20px;
      border-radius: 16px;
      border: 1px solid rgba(129, 140, 248, 0.28);
      background: rgba(15, 23, 42, 0.35);
      text-decoration: none;
      color: inherit;
      transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    }

    .featured-guide:hover {
      border-color: rgba(129, 140, 248, 0.55);
      background: rgba(79, 70, 229, 0.12);
      transform: translateY(-1px);
    }

    .featured-guide__eyebrow {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent-strong, #6366f1);
      margin-bottom: 6px;
    }

    .featured-guide__title {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: var(--ttx-2, #f9fafb);
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .featured-guide__cta {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-strong, #6366f1);
    }

    html[data-theme="light"] .featured-guide {
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(99, 102, 241, 0.22);
    }

    html[data-theme="light"] .featured-guide__title {
      color: var(--text-primary);
    }

    html[data-theme="light"] .doc-cta-btn {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      color: var(--ttx-5);

      background: radial-gradient(circle at 0 0, #22d3ee, #4f46e5 45%, #a855f7 85%);

      border: none;

      box-shadow: var(--shadow-glow);

    }

    html[data-theme="light"] .doc-cta-btn:hover {

      transform: translateY(-1px);

      filter: brightness(1.05);

      box-shadow: 0 18px 40px rgba(79, 70, 229, 0.75);

      color: var(--ttx-5);

      border-color: transparent;

    }



    .steps {

      display: grid;

      gap: 10px;

      font-size: 13px;

    }



    .step-item {

      display: flex;

      align-items: flex-start;

      gap: 10px;

      padding: 8px 10px;

      border-radius: 12px;

      background: var(--tbg-4);

      border: 1px solid var(--tbd-2);

    }



    .step-badge {

      width: 20px;

      height: 20px;

      border-radius: 999px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 11px;

      font-weight: 600;

      color: var(--ttx-2);

      background: rgba(79, 70, 229, 0.25);

      border: 1px solid rgba(129, 140, 248, 0.8);

      flex-shrink: 0;

    }



    .step-text strong {

      color: var(--ttx-2);

      font-weight: 600;

    }



    .pill-row {

      display: flex;

      flex-wrap: wrap;

      gap: 6px;

      margin-top: 10px;

    }



    .mini-pill {

      padding: 3px 8px;

      border-radius: 999px;

      font-size: 11px;

      background: var(--tbg-5);

      border: 1px solid var(--tbd-2);

      color: var(--ttx-18);

    }



    /* Why choose */

    .why-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      gap: 16px;

      margin-top: 14px;

    }



    .why-card {

      border-radius: 14px;

      padding: 10px 11px;

      background: var(--tbg-6);

      border: 1px solid var(--tbd-2);

      font-size: 13px;

      display: flex;

      flex-direction: column;

      gap: 4px;

    }



    .why-icon {

      width: 22px;

      height: 22px;

      border-radius: 999px;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 13px;

      margin-bottom: 2px;

      background: var(--tbg-21);

      border: 1px solid rgba(59, 130, 246, 0.85);

    }



    .why-title {

      font-weight: 600;

      color: var(--ttx-2);

    }



    .why-text {

      font-size: 12px;

      color: var(--text-secondary);

    }



    /* Pricing */

    .pricing-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

      gap: 16px;

      margin-top: 14px;

    }



    .pricing-card {

      border-radius: 16px;

      padding: 20px 18px 22px;

      background: var(--tbg-5);

      border: 1px solid var(--tbd-2);

      display: flex;

      flex-direction: column;

      gap: 5px;

      font-size: 13px;

    }



    .pricing-card.highlight {

      border-color: rgba(129, 140, 248, 0.95);

      box-shadow: 0 14px 35px rgba(79, 70, 229, 0.7);

      background: radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.25), var(--tbg-5));

    }



    .pricing-name {

      font-weight: 600;

      color: var(--ttx-2);

    }



    .pricing-sub {

      font-size: 11px;

      color: var(--text-secondary);

    }



    .pricing-price {

      margin-top: 4px;

      font-size: 18px;

      font-weight: 600;

    }



    .pricing-price span {

      font-size: 11px;

      font-weight: 400;

      color: var(--text-secondary);

    }



    .pricing-cta {

      margin-top: 8px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 6px;

      padding: 7px 10px;

      border-radius: var(--radius-full);

      border: 1px solid var(--tbd-9);

      font-size: 12px;

      color: var(--ttx-2);

      background: var(--tbg-6);

      cursor: pointer;

      transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;

      text-decoration: none;

    }



    .pricing-card.highlight .pricing-cta {

      background: linear-gradient(135deg, #4f46e5, #6366f1);

      border-color: rgba(129, 140, 248, 0.95);

      box-shadow: 0 10px 25px rgba(79, 70, 229, 0.7);

    }



    .pricing-cta:hover {

      background: var(--tbg-15);

      color: var(--ttx-5);

    }



    .pricing-card.highlight .pricing-cta:hover {

      filter: brightness(1.05);

    }



    .pricing-tag {

      margin-left: auto;

      padding: 2px 7px;

      border-radius: 999px;

      border: 1px solid rgba(129, 140, 248, 0.95);

      background: rgba(79, 70, 229, 0.2);

      font-size: 10px;

      color: rgba(199, 210, 254, 0.96);

      text-transform: uppercase;

      letter-spacing: 0.08em;

    }

    html[data-theme="light"] .pricing-tag {

      background: rgba(79, 70, 229, 0.14);

      border-color: rgba(79, 70, 229, 0.45);

      color: #4338ca;

    }

    html[data-theme="light"] .pricing-card.highlight {

      box-shadow: 0 12px 32px rgba(79, 70, 229, 0.14);

      background: radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.1), var(--tbg-5));

      border-color: rgba(99, 102, 241, 0.55);

    }

    html[data-theme="light"] .pricing-card.highlight .pricing-cta {

      color: #ffffff;

    }

    /* Compare table */

    .compare-card {

      border-radius: 0;

      padding: 0;

      background: transparent;

      border: none;

      font-size: 12px;

    }



    .compare-header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 10px;

    }



    .compare-label {

      font-size: 11px;

      color: var(--ttx-18);

    }



    .compare-pill {

      padding: 2px 7px;

      border-radius: 999px;

      border: 1px solid var(--tbd-12);

      background: var(--tbg-5);

      font-size: 10px;

      color: var(--ttx-18);

    }



    .info-grid {

      display: block;

      margin-top: 60px;

    }



    .compare-table {

      width: 100%;

      border-collapse: collapse;

      margin-top: 4px;

    }



    .compare-table th,

    .compare-table td {

      padding: 6px 4px;

      text-align: left;

      font-size: 11px;

    }



    .compare-table th {

      color: var(--ttx-7);

      font-weight: 500;

    }



    .compare-table td {

      color: var(--ttx-18);

    }



    .compare-table tr + tr td {

      border-top: 1px solid var(--tbd-2);

    }



    .check {

      width: 14px;

      height: 14px;

      border-radius: 999px;

      border: 1px solid rgba(34, 197, 94, 0.95);

      display: inline-flex;

      align-items: center;

      justify-content: center;

      font-size: 10px;

      color: rgba(187, 247, 208, 0.96);

      background: rgba(22, 163, 74, 0.18);

    }

    html[data-theme="light"] .check {

      color: #ffffff;

      background: #16a34a;

      border-color: #15803d;

      font-weight: 700;

    }

    /* Screenshot slider */

    .screenshot-section {

      margin-top: 24px;

    }



    .screenshot-header {

      display: flex;

      justify-content: space-between;

      align-items: baseline;

      margin-bottom: 10px;

      gap: 10px;

    }



    .screenshot-subtitle {

      font-size: 11px;

      color: var(--text-secondary);

    }



    .screenshot-slider {

      position: relative;

      border-radius: 16px;

      background: var(--tbg-5);

      border: 1px solid var(--tbd-2);

      overflow: hidden;

    }



    .screenshot-viewport {

      position: relative;

      overflow: hidden;

    }



    .screenshot-track {

      display: flex;

      transition: transform 0.3s ease;

    }



    .screenshot-slide {

      min-width: 100%;

      aspect-ratio: 9 / 20;

      background: var(--tbg-1);

      display: flex;

      align-items: center;

      justify-content: center;

    }



    .screenshot-slide img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;

    }



    .hero-screenshot-slider {

      border-radius: 24px;

      border: 1px solid var(--tbd-6);

      background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.2), var(--tbg-1));

      box-shadow: 0 14px 35px var(--tsh-1);

    }



    .screenshot-nav {

      position: absolute;

      inset: 0;

      display: flex;

      align-items: center;

      justify-content: space-between;

      pointer-events: none;

    }



    .screenshot-arrow {

      pointer-events: auto;

      width: 28px;

      height: 28px;

      border-radius: 999px;

      border: 1px solid var(--tbd-13);

      background: var(--tbg-4);

      color: var(--ttx-15);

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 16px;

      cursor: pointer;

      margin-inline: 8px;

      box-shadow: 0 8px 20px var(--tsh-4);

      transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;

      opacity: 0.9;

    }



    .screenshot-arrow:hover {

      background: var(--tbg-15);

      transform: translateY(-1px);

      opacity: 1;

    }



    .screenshot-dots {

      display: flex;

      justify-content: center;

      gap: 6px;

      padding: 8px 10px 10px;

    }



    .screenshot-dot {

      width: 6px;

      height: 6px;

      border-radius: 999px;

      background: var(--tbg-22);

      border: none;

      padding: 0;

      cursor: pointer;

    }



    .screenshot-dot.is-active {

      background: rgba(129, 140, 248, 0.95);

    }



    /* FAQ */

    .faq-list {

      display: grid;

      gap: 12px;

      margin-top: 14px;

    }



    .faq-item {

      border-radius: 16px;

      background: var(--tbg-6);

      border: 1px solid var(--tbd-2);

      font-size: 13px;

      overflow: hidden;

      width: 100%;

      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;

    }



    .faq-item:hover {

      border-color: var(--tbd-5);

    }



    .faq-item.open {

      border-color: rgba(129, 140, 248, 0.55);

      box-shadow: 0 10px 30px rgba(79, 70, 229, 0.18);

    }



    .faq-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 14px;

      width: 100%;

      padding: 16px 20px;

      min-height: 56px;

      cursor: pointer;

      background: transparent;

      border-radius: 0;

      border: none;

      appearance: none;

      -webkit-appearance: none;

      color: inherit;

      outline: none;

      text-align: left;

    }



    .faq-q {

      font-size: 14px;

      font-weight: 600;

      color: var(--ttx-2);

      margin: 0;

    }



    .faq-toggle {

      flex: 0 0 auto;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      width: 26px;

      height: 26px;

      border-radius: 50%;

      font-size: 16px;

      line-height: 1;

      color: var(--ttx-6);

      background: var(--tbg-13);

      transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;

    }



    .faq-item.open .faq-toggle {

      transform: rotate(90deg);

      color: var(--ttx-5);

      background: rgba(129, 140, 248, 0.9);

    }



    .faq-body {

      max-height: 0;

      opacity: 0;

      overflow: hidden;

      transition: max-height 0.26s ease, opacity 0.2s ease;

      padding: 0 20px;

    }



    .faq-item.open .faq-body {

      max-height: 400px;

      opacity: 1;

    }



    .faq-a {

      margin: 0;

      padding: 14px 0 18px;

      border-top: 1px solid var(--tbd-2);

      color: var(--text-secondary);

      font-size: 13.5px;

      line-height: 1.65;

    }



    /* Contact */

    .contact-card {

      border-radius: 18px;

      padding: 26px 28px 28px;

      background: radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.25), var(--tbg-5));

      border: 1px solid rgba(129, 140, 248, 0.9);

      box-shadow: 0 14px 35px rgba(79, 70, 229, 0.7);

      font-size: 13px;

      display: grid;

      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

      gap: 18px 36px;

      align-items: start;

    }



    .contact-intro {

      display: flex;

      flex-direction: column;

      gap: 12px;

    }



    @media (max-width: 760px) {

      .contact-card {

        grid-template-columns: minmax(0, 1fr);

        gap: 18px;

      }

    }



    .contact-text {

      color: var(--ttx-19);

    }



    .contact-legal {

      font-size: 11px;

      color: var(--text-secondary);

    }



    .contact-legal a {

      color: rgba(129, 140, 248, 0.96);

      text-decoration: underline;

      text-decoration-style: dashed;

    }



    .contact-form {

      display: grid;

      gap: 8px;

    }



    .field {

      display: flex;

      flex-direction: column;

      gap: 4px;

      font-size: 12px;

    }



    .field label {

      color: var(--ttx-19);

    }



    .field input,

    .field textarea {

      border-radius: 10px;

      border: 1px solid var(--tbd-12);

      background: var(--tbg-5);

      padding: 6px 8px;

      color: var(--ttx-2);

      font-family: inherit;

      font-size: 12px;

      resize: vertical;

      min-height: 32px;

    }



    .field input::placeholder,

    .field textarea::placeholder {

      color: var(--ttx-8);

    }



    .field input:focus,

    .field textarea:focus {

      outline: none;

      border-color: rgba(129, 140, 248, 0.95);

      box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.7);

    }



    .checkbox-row {

      display: flex;

      align-items: flex-start;

      gap: 8px;

      font-size: 11px;

      color: var(--text-secondary);

    }



    .checkbox-row input[type="checkbox"] {

      margin-top: 2px;

      accent-color: #4f46e5;

    }



    .contact-submit {

      margin-top: 4px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 6px;

      padding: 8px 12px;

      border-radius: var(--radius-full);

      border: none;

      font-size: 12px;

      font-weight: 500;

      color: var(--ttx-5);

      background: linear-gradient(135deg, #4f46e5, #6366f1);

      cursor: pointer;

      box-shadow: 0 12px 30px rgba(79, 70, 229, 0.8);

      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;

    }



    .contact-submit:hover {

      transform: translateY(-1px);

      filter: brightness(1.05);

      box-shadow: 0 16px 40px rgba(79, 70, 229, 0.9);

    }



    /* Footer */

    .footer {

      border-top: 1px solid var(--tbd-2);

      padding: 14px 20px 26px;

      font-size: 11px;

      color: var(--text-secondary);

      margin-top: auto;

    }



    .footer-inner {

      max-width: 1120px;

      margin: 0 auto;

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 10px;

      flex-wrap: wrap;

    }



    .footer-links {

      display: flex;

      gap: 10px;

      flex-wrap: wrap;

    }



    .footer-links a {

      color: var(--ttx-6);

    }



    .footer-links a:hover {

      color: var(--ttx-7);

    }



    /* Feature bands (counting module + sales channels) */

    .feature-band {

      margin: 0 0 30px;

      padding: clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 26px);

      border-radius: 22px;

      background: linear-gradient(135deg, rgba(79, 70, 229, 0.07), rgba(56, 189, 248, 0.045));

      border: 1px solid var(--tbd-2);

    }

    .feature-band .section-title {

      font-size: 22px;

    }

    .feature-band .section-text {

      max-width: 760px;

    }

    .feature-band .why-grid {

      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

      gap: 14px;

      margin-top: 18px;

    }

    .feature-band .why-card {

      padding: 16px 16px 18px;

      border-radius: 16px;

      gap: 7px;

      background: var(--tbg-6);

    }

    .feature-band .why-icon {

      width: 36px;

      height: 36px;

      font-size: 19px;

      margin-bottom: 4px;

    }

    .feature-band .why-title {

      font-size: 15px;

    }

    .feature-band .why-text {

      font-size: 13px;

      line-height: 1.6;

    }

    .band-why .why-grid {

      grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));

    }

    .channel-pills {

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

      margin: 16px 0 4px;

    }

    .channel-pill {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      box-sizing: border-box;

      width: 112px;

      padding: 12px 16px;

      border-radius: var(--radius-full);

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

      background: var(--bg-soft);

      min-height: 44px;

      text-align: center;

    }

    .channel-brand {

      font-size: 15px;

      font-weight: 700;

      line-height: 1;

      letter-spacing: -0.02em;

      white-space: nowrap;

    }

    .channel-brand--shopify {

      color: #95bf47;

      font-style: italic;

      font-family: "Helvetica Neue", Arial, sans-serif;

    }

    .channel-brand--etsy {

      color: #f1641e;

      font-family: Georgia, "Times New Roman", serif;

      font-size: 16px;

    }

    .channel-brand--ikas {

      color: #deff37;

      font-family: "Helvetica Neue", Arial, sans-serif;

    }

    .channel-brand--lightfunnels {

      color: #fbbf24;

      font-family: "Plus Jakarta Sans", "Circular Std", "Helvetica Neue", Arial, sans-serif;

      font-size: 12px;

    }

    .channel-brand--woocommerce {

      color: #96588a;

      font-family: "Nunito Sans", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;

      font-size: 12px;

    }

    .channel-pill.channel-brand--lightfunnels,
    .channel-pill.channel-brand--woocommerce {

      width: auto;

      min-width: 112px;

      padding-left: 14px;

      padding-right: 14px;

    }

    html[data-theme="light"] .channel-pill {

      background: #eef2f7;

      border-color: #cbd5e1;

      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);

    }

    html[data-theme="light"] .channel-brand--shopify {

      color: #008060;

    }

    html[data-theme="light"] .channel-brand--etsy {

      color: #c7510a;

    }

    html[data-theme="light"] .channel-brand--ikas {

      color: #121926;

    }

    html[data-theme="light"] .channel-brand--lightfunnels {

      color: #d97706;

    }

    html[data-theme="light"] .channel-brand--woocommerce {

      color: #720eec;

    }

    /* Responsive */

    @media (max-width: 900px) {

      .hero {

        grid-template-columns: minmax(0, 1fr);

      }



      .hero-card-inner {

        grid-template-columns: minmax(0, 1fr);

      }



      .sections {

        grid-template-columns: minmax(0, 1fr);

      }



      .info-grid {

        grid-template-columns: minmax(0, 1fr);

      }

    }



    @media (max-width: 640px) {

      .container {

        padding-inline: 16px;

      }



      .top-bar {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

      }



      .hero-meta {

        flex-direction: column;

        align-items: flex-start;

      }



      .hero-card {

        margin-top: 8px;

      }

    }