:root {
  --bg: #0b1020;
  --card: #0f1724;
  --muted: #9aa4b2;
  /* header height used to offset main content so fixed header doesn't cover it */
  --header-height: 72px;
  --accent-1: #4f46e5;
  --accent-2: #7c3aed;
  --accent-3: #10b981;
  --accent-4: #ba39ff;
  --glass: rgba(255, 255, 255, 0.03);
  --radius: 12px;
}

* {
  box-sizing: border-box;
  font-family: Inter, Segoe UI, Roboto, Arial;
}
html,
body {
  height: 100%;
  margin: 0;
  background: linear-gradient(180deg, #030417 0%, #07102a 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  color: #e6eef8;
  /* Prefer native smooth scrolling where supported */
  scroll-behavior: smooth;
}

/* Keep main content visible below the fixed header */
main {
  padding-top: var(--header-height);
}

/* Prevent transient horizontal scrollbar caused by media reflow on load */
html,
body {
  overflow-x: hidden;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
  /* keep content away from edges when zoomed/scaled */
  padding-inline: clamp(16px, 4vw, 28px);
}
.site-top {
  /* Frosted-glass effect: use both standard and WebKit-prefixed properties
    so Safari and other WebKit-based browsers render the backdrop blur. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* Slightly more translucent so the blur is perceptible across engines. Keep
    a reasonably dark base color as a fallback for browsers without backdrop-filter. */
  background: rgba(14, 13, 41, 0.75);
  background-color: rgba(14, 13, 41, 0.75);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  /* Hint to browsers that the backdrop/filter and background will change; helps
    with rendering performance and reduces flicker in some WebKit builds. */
  will-change: backdrop-filter, -webkit-backdrop-filter, background-color;
  /* Ensure the translucent background composes correctly on iOS/Safari */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.site-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1300; /* above other UI but below full-screen overlays */
}
.site-top .container {
  display: flex;
  align-items: center;
  /* Use gap + auto margin on .nav so the nav and the lite toggle stay together on the right
     while the brand remains on the left. This reduces the large space between nav links and the toggle. */
  gap: 10px;
}
.brand {
  /* Use a slightly lighter weight to avoid overly-bold rendering on some browsers */
  font-weight: 700;
  /* anchors default to underlined in some UA stylesheets; remove it explicitly */
  text-decoration: none;
  /* ensure gradient text renders consistently across engines */
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative; /* needed so the shadow pseudo-element can be positioned behind */
  z-index: 2;
}

/* remove decorative brand shadow pseudo-element per user request */

.brand-icon {
  width: 26px;
  height: 26px;
  display: inline-block;
  /* give the icon a small drop shadow to match the brand text */
  filter: drop-shadow(0 6px 12px rgba(3, 6, 16, 0.55));
}

.brand-icon {
  width: 26px;
  height: 26px;
  display: inline-block;
}

/* mobile-only menu button (hidden by default; shown in media query) */
.mobile-menu-btn {
  display: none;
}
.nav {
  display: flex;
  gap: 8px;
  /* push nav (and any following siblings like the lite toggle) to the right */
  margin-left: auto;
}
.nav-link {
  color: var(--muted);
  text-decoration: none;
  /* slightly reduced padding so links sit tighter next to the Lite toggle */
  padding: 8px 6px;
  border-radius: 8px;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Hero */
.hero {
  padding: 48px 0;
}
.hero-inner {
  display: flex;
  gap: 28px;
  align-items: center;
}
.hero-copy {
  flex: 1;
  max-width: 560px;
}
/* Hero title: use clipped gradient only where supported; otherwise fall back to solid color */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .title {
    font-size: 56px;
    /* Reduce weight to avoid overly-heavy rendering with gradient text */
    font-weight: 700;
    margin: 0 0 10px 0;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-4));
    -webkit-background-clip: text;
    background-clip: text;
    /* ensure transparent fill and smoothing for consistent appearance */
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: transparent;
  }
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .title {
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 10px 0;
    background: none;
    color: #fff;
  }
}
.tag {
  color: var(--muted);
  margin: 0 0 18px;
}
.cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.btn.small {
  padding: 6px 8px;
  font-size: 13px;
}
.low-power-toggle {
  margin-left: 6px;
}

.os-icon {
  vertical-align: middle;
  margin-right: 0.35rem; /* reduced so icon + text are tighter */
  fill: currentColor;
  display: inline-block;
}
.windows-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  display: inline-block;
}
.macos-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  display: inline-block;
}
.download-icon {
  width: 1.3em;
  height: 1.3em;
  object-fit: contain;
  display: inline-block;
}
.btn.primary {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12);
}
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--muted);
}
.btn.large {
  padding: 14px 16px; /* tighter horizontal padding to bring text closer to edges */
  border-radius: 12px;
}
.bullets {
  margin-top: 18px;
  padding-left: 18px;
  color: var(--muted);
}

/* Mock app visual */
.hero-visual {
  width: 420px;
}
.mock-window {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.6);
  transform: translateY(12px);
  opacity: 0;
}
.mock-top {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
}
.dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.mock-title {
  color: var(--muted);
  font-size: 13px;
  margin-left: auto;
}
.mock-body {
  padding: 14px;
}
.files {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.005)
  );
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.file:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
  background: rgba(255, 255, 255, 0.02);
}
.thumb {
  width: 64px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: inset 0 -6px 18px rgba(0, 0, 0, 0.2);
}
.thumb-video {
  background: linear-gradient(135deg, #10b981, #06b6a4);
}
.thumb-img {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.meta {
  flex: 1;
}
.name {
  font-weight: 700;
}
.progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  width: 0%;
  transition: width 900ms cubic-bezier(0.22, 0.9, 0.32, 1);
}

/* make feature cards lift on hover */
.card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55);
  outline: none;
  /* additional glow */
  box-shadow: 0 40px 100px rgba(79, 70, 229, 0.14),
    0 30px 80px rgba(2, 6, 23, 0.55);
}

/* refine mock window to look closer to app */
.mock-top {
  padding: 8px 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  display: flex;
  align-items: center;
}
.mock-top .dots span {
  width: 9px;
  height: 9px;
}
.mock-title {
  margin-left: 12px;
  color: var(--muted);
  font-size: 13px;
}
.mock-body {
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0)
  );
}
.files {
  gap: 12px;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* initial hidden state for additional elements we want to fade in */
.title,
.tag,
.cta-row,
.bullets,
.hero-visual,
.mock-body,
.section-title,
.how .step,
.download .lead,
.download .cta-row,
.site-foot {
  opacity: 0;
  transform: translateY(12px);
}

/* play-animate targets for additional elements */
.play-animate .title {
  animation: fadeUp 700ms ease forwards var(--delay, 0ms);
}
.play-animate .tag {
  animation: fadeUp 680ms ease forwards var(--delay, 40ms);
}
.play-animate .cta-row {
  animation: fadeUp 700ms ease forwards var(--delay, 80ms);
}
.play-animate .bullets {
  animation: fadeUp 700ms ease forwards var(--delay, 120ms);
}
.play-animate .hero-visual,
.play-animate .mock-body {
  animation: fadeUp 700ms ease forwards var(--mock-delay, 160ms);
}
.play-animate .section-title {
  animation: fadeUp 640ms ease forwards var(--delay, 0ms);
}
.play-animate .how .step {
  animation: fadeUp 640ms ease forwards var(--delay, 0ms);
}
.play-animate .download .lead,
.play-animate .download .cta-row,
.play-animate .site-foot {
  animation: fadeUp 640ms ease forwards var(--delay, 0ms);
}

/* Features */
.features {
  padding: 36px 0;
}
.section-title {
  font-size: 20px;
  margin-bottom: 18px;
}
/* About page specific styles */
.about-title {
  font-size: 40px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-inline {
  /* make inline brand text slightly lighter and consistent with .brand */
  font-weight: 700;
  text-decoration: none;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-lead {
  color: var(--muted);
  margin-bottom: 18px;
  font-size: 18px;
}
.about-sub {
  color: #e6eef8;
  margin-top: 18px;
  margin-bottom: 8px;
}

/* About reveal helper: elements marked .to-reveal start hidden and will get .visible added by JS */
.about .to-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.about .to-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(2, 6, 23, 0.35);
  transform: translateY(18px);
  opacity: 0;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* animations are applied when the body has .play-animate so JS can set delays first */
.play-animate .mock-window {
  animation: fadeUp 700ms ease forwards var(--mock-delay, 120ms);
}
.play-animate .card {
  animation: fadeUp 600ms ease forwards var(--delay, 0ms);
}
/* hovering state for keyboard focus and JS-added class */
.card.hovering,
.btn.hovering {
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55),
    0 0 18px rgba(124, 58, 237, 0.12) inset;
}

/* ripple element */
.ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.12);
  animation: ripple 600ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
/* Removed .play-animate rules for .about elements to avoid conflicting
   animations with the JS-driven .to-reveal /.visible reveal sequence. */
@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.card-emoji {
  font-size: 28px;
}
.card h3 {
  margin: 8px 0;
}
.card p {
  color: var(--muted);
  margin: 0;
}

/* How */
.how {
  padding: 36px 0;
}
.steps {
  display: flex;
  gap: 12px;
}
.step {
  background: var(--card);
  padding: 14px;
  border-radius: 10px;
  flex: 1;
}
.num {
  font-weight: 800;
  font-size: 18px;
  color: var(--accent-1);
}
.desc {
  color: var(--muted);
  margin-top: 6px;
}

/* Download */
.download {
  padding: 36px 0;
}
.lead {
  color: var(--muted);
}

/* Footer */
.site-foot {
  padding: 20px 0;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}

/* Responsive */
@media (max-width: 900px) {
  .container {
    padding: 18px; /* a bit less padding on small screens */
  }

  /* slightly reduce header offset on mobile to better match compressed header */
  :root {
    --header-height: 64px;
  }

  /* Center layout on mobile */
  .site-top .container {
    display: flex;
    align-items: center;
    justify-content: center; /* center brand and toggle */
    gap: 8px;
    position: relative;
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-visual {
    width: 100%;
    margin-top: 16px;
  }
  .cards {
    grid-template-columns: 1fr;
  }

  /* Mobile nav: hidden by default, revealed by toggle */
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 18px; /* default: stick to right edge of header container */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    z-index: 1100;
    cursor: pointer;
  }

  /* If a Lite toggle exists, position the hamburger to the right of it */
  .site-top .container .low-power-toggle {
    position: relative;
    z-index: 1101; /* ensure toggle sits above nav when needed */
  }
  .site-top .container .low-power-toggle + .mobile-menu-btn {
    /* place the mobile menu button immediately to the right of the Lite button */
    right: auto;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hamburger / cross SVG styling. We'll crossfade hamburger -> X for a stable effect */
  .mobile-menu-btn .hamburger {
    display: block;
  }

  .mobile-menu-btn .hamburger .ham,
  .mobile-menu-btn .hamburger .cross {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    transition: opacity 200ms ease,
      transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
    transform-origin: 12px 12px;
    transform-box: fill-box;
  }

  /* initial states: hamburger visible, cross hidden/compact */
  .mobile-menu-btn .hamburger .ham {
    opacity: 1;
    transform: scale(1);
  }
  .mobile-menu-btn .hamburger .cross {
    opacity: 0;
    transform: scale(0.85);
  }

  /* When open: hide hamburger lines and reveal the cross */
  .mobile-menu-btn.open .hamburger .ham {
    opacity: 0;
    transform: scale(0.9);
  }
  .mobile-menu-btn.open .hamburger .cross {
    opacity: 1;
    transform: scale(1);
  }

  /* hide default desktop nav; mobile nav becomes a centered dropdown */
  .nav {
    display: none;
    /* Use fixed so the menu will appear above any transformed/staked content */
    position: fixed;
    top: calc(
      56px + 8px
    ); /* approximate header offset; gives space below header */
    left: 50%;
    transform: translateX(-50%);
    /* translucent background with blur for contrast */
    background: rgba(11, 16, 32, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.6);
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 32px);
    max-width: 420px;
    z-index: 2147483647; /* extremely high to ensure it sits above everything */
    align-items: center;
  }

  .nav-link {
    padding: 10px 12px;
    display: block;
    width: 100%;
    text-align: center;
  }

  /* when the document is in nav-open state show the mobile nav */
  .nav-open .nav {
    display: flex;
    /* scale/opacity animation for nicer entrance */
    animation: menuOpen 220ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  }

  /* Use a slightly different title accent on small screens for better contrast */
  /* Only use gradient-clipped text where supported. Otherwise fall back to solid color. */
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .title {
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: transparent;
    }
  }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .title {
      /* Some browsers don't support clipping to text; fall back to a solid color */
      background: none;
      color: #fff;
    }
  }

  /* center CTAs on mobile */
  .cta-row {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .cta-row .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Ensure feature bullet lists remain left-aligned on mobile so text aligns
     immediately to the right of the bullet markers (prevents centering
     inherited from .hero-inner on small screens). */
  .bullets,
  .bullets ul,
  .bullets ol {
    text-align: left;
    list-style-position: outside;
    /* use a small, consistent left inset so wrapped lines align under text */
    padding-inline-start: 20px;
  }
}

@keyframes menuOpen {
  from {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* closing animation: reverse of open for a smooth hide */
.nav-closing .nav {
  animation: menuClose 200ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes menuClose {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -6px) scale(0.98);
  }
}

/* Responsive video wrapper and video rules used on download.html */
.video-wrap {
  max-width: 960px;
  margin: 111 auto;
  padding: 8px 0;
}
.responsive-video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(
    100vh - 220px
  ); /* reserve space for header/footers - tweak as needed */
  object-fit: contain;
  border-radius: 8px;
  background: transparent;
}

/* Low-power mode: reduce animations, blurs, and heavy shadows for low-end devices */
.low-power .bg-blobs {
  display: none !important;
}
.low-power .site-top {
  /* Instead of removing the blur on lite mode, make the header fully opaque
     so it remains readable while keeping effects lightweight. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
}
.low-power .mock-window,
.low-power .card,
.low-power .btn {
  box-shadow: none !important;
}
.low-power * {
  transition: none !important;
  animation: none !important;
}
.low-power .mock-window {
  transform: none !important;
}
.low-power .card {
  transform: none !important;
}
.low-power .ripple {
  display: none !important;
}
.low-power .blob {
  display: none !important;
}

/* In low-power mode many elements start hidden and rely on animations/transitions
   to become visible. Disable that hiding so content is accessible immediately. */
.low-power .title,
.low-power .tag,
.low-power .cta-row,
.low-power .bullets,
.low-power .hero-visual,
.low-power .mock-body,
.low-power .section-title,
.low-power .how .step,
.low-power .download .lead,
.low-power .download .cta-row,
.low-power .site-foot,
.low-power .mock-window,
.low-power .card {
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure about page to-reveal elements are visible immediately in low-power mode */
.low-power .about .to-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Background decorative blobs */
.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Background decorative blobs - tuned for visibility and performance */
.bg-blobs .blob {
  position: absolute;
  border-radius: 50%;
  /* larger blur for soft edges */
  filter: blur(56px);
  /* very low base opacity so shapes are subtle */
  opacity: 0.08;
  mix-blend-mode: screen;
  /* hint to the browser that transform/opacity will animate */
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}
.bg-blobs .b1 {
  width: 540px;
  height: 540px;
  left: -140px;
  top: -100px;
  background: radial-gradient(circle at 30% 30%, #7c3aed, #4f46e5);
  /* slightly faster and larger drift so motion is noticeable */
  animation: blobDrift 22s ease-in-out infinite;
  animation-delay: 0s;
}
.bg-blobs .b2 {
  width: 420px;
  height: 420px;
  right: -100px;
  top: 38%;
  background: radial-gradient(circle at 50% 40%, #06b6a4, #10b981);
  animation: blobDrift 28s ease-in-out infinite;
  animation-delay: 6s;
}
.bg-blobs .b3 {
  width: 320px;
  height: 320px;
  left: 8%;
  bottom: -100px;
  background: radial-gradient(circle at 60% 60%, #f97316, #f59e0b);
  animation: blobDrift 24s ease-in-out infinite;
  animation-delay: 10s;
}
@keyframes blobDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.08;
  }
  20% {
    transform: translate3d(36px, -22px, 0) scale(1.03) rotate(2deg);
    opacity: 0.1;
  }
  40% {
    transform: translate3d(-28px, 26px, 0) scale(0.97) rotate(-1deg);
    opacity: 0.07;
  }
  60% {
    transform: translate3d(22px, 14px, 0) scale(1.01) rotate(1deg);
    opacity: 0.095;
  }
  80% {
    transform: translate3d(-16px, -10px, 0) scale(0.995) rotate(-0.5deg);
    opacity: 0.075;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.08;
  }
}
/* new blob styles appear below (blobDrift) */

/* CTA shimmer */
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.06)
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.btn.primary:hover::after {
  animation: shimmer 900ms linear forwards;
}
@keyframes shimmer {
  to {
    transform: translateX(120%);
  }
}

/* mock-window glow */
.mock-window {
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.mock-window:hover {
  transform: translateY(-6px);
  box-shadow: 0 60px 160px rgba(79, 70, 229, 0.12),
    0 30px 80px rgba(2, 6, 23, 0.6);
}

/* floating slight animation for cards when idle */
.card {
  animation: subtleFloat 10s ease-in-out infinite;
}
@keyframes subtleFloat {
  0% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(6px);
  }
}

/* Respect user prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .bg-blobs {
    display: none !important;
  }
  .ripple {
    display: none !important;
  }
}

/* Custom scrollbar (WebKit/Chromium + Firefox fallbacks) */
:root {
  --scrollbar-track: rgba(2, 6, 23, 0.48);
  /* use brand accents top -> bottom (vertical) for the thumb */
  --scrollbar-thumb-start: var(--accent-1);
  --scrollbar-thumb-end: var(--accent-2);
  --scrollbar-thumb-highlight: rgba(255, 255, 255, 0.08);
  --scrollbar-width: 12px;
}

/* WebKit/Chromium browsers */
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
  margin: 6px 0; /* create a little breathing room at ends */
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--scrollbar-thumb-start),
    var(--scrollbar-thumb-end)
  );
  border-radius: 999px;
  border: 3px solid transparent; /* gives the rounded pill shape with spacing */
  background-clip: padding-box;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.45),
    inset 0 -6px 10px rgba(255, 255, 255, 0.02);
}
/* subtle inner highlight to imitate the tiny lighter knob shown in the design */
*::-webkit-scrollbar-thumb:vertical {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 12%,
      transparent 20%
    ),
    linear-gradient(
      180deg,
      var(--scrollbar-thumb-start),
      var(--scrollbar-thumb-end)
    );
}
*::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.06);
}

/* Firefox: limited API (no gradients), set thin and colors as best-effort fallback */
html {
  scrollbar-width: thin;
  /* Firefox cannot use gradients; pick the brand's deeper accent as a fallback thumb color */
  scrollbar-color: var(--accent-2) var(--scrollbar-track);
}

/* Make sure scrollable elements with custom overflow also show our styling where possible */
.mock-body,
.files,
.mock-window,
.card {
  scrollbar-width: thin;
}