:root { color-scheme: light dark; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F8FAFC;
    color: #0F172A;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.dark body {
    background-color: #090D16;
    color: #F1F5F9;
  }

  .bg-grid {
    background-image:
      radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.16) 0%, transparent 65%),
      linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 32px 32px, 32px 32px;
  }

  .glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
  }
  html.dark .glass {
    background: rgba(17, 23, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  }
  html.dark .glass-card {
    background: rgba(22, 31, 51, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.3);
  }

  /* Smooth Staggered Scroll Reveal */
  .reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 999px; }

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366F1 var(--val, 50%), rgba(148,163,184,0.2) var(--val, 50%));
    outline: none;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6366F1;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
  html.dark input[type="range"]::-webkit-slider-thumb { border-color: #111726; }

  .tab-btn { position: relative; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
  .tab-btn.active { color: #6366F1; font-weight: 700; transform: translateY(-1.5px); }
  .tab-btn.active::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 2.5px;
    background: linear-gradient(90deg, #6366F1, #818CF8);
    border-radius: 999px;
    animation: tabGlow 0.3s ease-out forwards;
  }
  @keyframes tabGlow { from { transform: scaleX(0.4); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

  .dropzone { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .dropzone.drag-active {
    border-color: #6366F1 !important;
    background-color: rgba(99, 102, 241, 0.08);
    transform: scale(0.985);
  }

  .checker-bg {
    background-image:
      linear-gradient(45deg, rgba(148,163,184,0.12) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(148,163,184,0.12) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.12) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.12) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  }

  .fade-in { animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  .btn-primary {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: white;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
  }
  .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
  }
  .btn-primary:active:not(:disabled) { transform: scale(0.98); }
  .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

  .tag-pill { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .tag-pill:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
  }
  .tag-pill:active { transform: scale(0.96); }

  .toast { animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both, toastOut 0.25s ease 2.6s both; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes toastOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: translateY(10px) scale(0.95); } }

  .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .accordion-content.open { max-height: 800px; }

  .format-pill.active {
    background: #6366F1;
    color: white;
    border-color: #6366F1;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    transform: scale(1.02);
  }

  .spinner {
    border: 2.5px solid rgba(148,163,184,0.25);
    border-top-color: #6366F1;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .comparison-slider-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
  .comparison-slider-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
  .comparison-slider-container .img-after-layer { clip-path: inset(0 0 0 var(--slider-split, 50%)); }
  .comparison-divider-line { position: absolute; top: 0; bottom: 0; left: var(--slider-split, 50%); width: 2px; background: #6366F1; transform: translateX(-50%); pointer-events: none; }
  .comparison-divider-handle { position: absolute; top: 50%; left: var(--slider-split, 50%); width: 34px; height: 34px; background: #6366F1; color: white; border-radius: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.35); border: 2px solid white; }
  .split-range-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 25; margin: 0; }

  /* ============================================================
     ADVANCED VISUAL POLISH — gradient text, ambient blobs,
     tilt cards, stagger reveal, scroll progress, back-to-top
     ============================================================ */

  /* Animated gradient headline shimmer */
  .text-shimmer {
    background: linear-gradient(90deg, #6366F1 0%, #818CF8 25%, #4F46E5 50%, #818CF8 75%, #6366F1 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmerMove 6s linear infinite;
  }
  @keyframes shimmerMove { to { background-position: -250% center; } }
  @media (prefers-reduced-motion: reduce) { .text-shimmer { animation: none; } }

  /* Ambient floating gradient blobs behind hero */
  .ambient-blobs { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
  .ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: blobDrift 16s ease-in-out infinite;
  }
  html.dark .ambient-blob { opacity: 0.22; }
  .ambient-blob.b1 { width: 320px; height: 320px; top: -80px; left: -60px; background: radial-gradient(circle, #6366F1, transparent 70%); animation-duration: 18s; }
  .ambient-blob.b2 { width: 260px; height: 260px; top: 20px; right: -60px; background: radial-gradient(circle, #10B981, transparent 70%); animation-duration: 22s; animation-delay: -4s; }
  .ambient-blob.b3 { width: 220px; height: 220px; bottom: -100px; left: 30%; background: radial-gradient(circle, #818CF8, transparent 70%); animation-duration: 20s; animation-delay: -8s; }
  @keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.12); }
    66% { transform: translate(-24px, 18px) scale(0.94); }
  }
  @media (prefers-reduced-motion: reduce) { .ambient-blob { animation: none; } }

  /* Gentle pulse for hero micro-badges */
  .pulse-dot { animation: pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

  /* Staggered child reveal — pairs with the existing IntersectionObserver on .reveal */
  .reveal-stagger.active > * {
    animation: staggerUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .reveal-stagger > *:nth-child(1) { animation-delay: 0.03s; }
  .reveal-stagger > *:nth-child(2) { animation-delay: 0.09s; }
  .reveal-stagger > *:nth-child(3) { animation-delay: 0.15s; }
  .reveal-stagger > *:nth-child(4) { animation-delay: 0.21s; }
  .reveal-stagger > *:nth-child(5) { animation-delay: 0.27s; }
  .reveal-stagger > *:nth-child(6) { animation-delay: 0.33s; }
  .reveal-stagger > *:nth-child(7) { animation-delay: 0.39s; }
  .reveal-stagger > *:nth-child(8) { animation-delay: 0.45s; }
  @keyframes staggerUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .reveal-stagger.active > * { animation: none; opacity: 1; transform: none; } }

  /* 3D tilt on feature / about cards, driven by JS custom properties */
  .tilt-card {
    --rx: 0deg; --ry: 0deg;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .tilt-card:hover { transition: transform 0.08s linear; }

  /* Scroll progress bar */
  #scrollProgressBar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #6366F1, #10B981);
    z-index: 60; box-shadow: 0 0 10px rgba(99,102,241,0.6);
    transition: width 0.1s linear;
  }

  /* Back to top button */
  #backToTopBtn {
    position: fixed; bottom: 24px; right: 24px; z-index: 45;
    width: 46px; height: 46px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.85);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #backToTopBtn.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  #backToTopBtn:hover { transform: translateY(-4px) scale(1.06); }

  /* FAQ accordion chevron + row polish */
  .faq-trigger { transition: color 0.25s ease; }
  .faq-chevron { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .accordion-content { transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; opacity: 0.001; }
  .accordion-content.open { opacity: 1; }

  /* Animated counter number */
  .count-up { font-variant-numeric: tabular-nums; }

  /* Marquee trust strip */
  .marquee-track { display: flex; width: max-content; animation: marqueeScroll 26s linear infinite; }
  .marquee-track:hover { animation-play-state: paused; }
  @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }