/* =========================================================
   PIXELORIGEN — LANDING PAGE
   FINAL RESPONSIVE / OVERFLOW-SAFE VERSION

   IMPORTANT:
   Header visual structure is intentionally kept stable.
   Main responsive fixes are applied to content below header.
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
  --bg: #06101d;
  --bg-soft: #0a1726;
  --surface: #0d1d2e;
  --surface-2: #102338;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f7fbff;
  --text-soft: #b4c1d0;
  --text-muted: #7e8da0;

  --primary: #72e6ff;
  --primary-2: #8c7cff;
  --green: #72e0a1;

  --radius: 24px;

  /*
     Content width.
     Header is handled separately so its positioning
     remains stable.
  */
  --content-width: 1280px;

  --page-padding: 24px;

  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);

  --header-height: 60px;
}

html[data-theme="light"] {
  --bg: #f4f8fc;
  --bg-soft: #eaf1f8;
  --surface: #ffffff;
  --surface-2: #edf5fb;
  --line: rgba(18, 50, 76, 0.11);
  --line-strong: rgba(18, 50, 76, 0.2);
  --text: #10283d;
  --text-soft: #405d73;
  --text-muted: #6d8395;
  --primary: #087f9f;
  --primary-2: #6554df;
  --green: #168453;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;

  min-width: 320px;

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

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  overflow-x: hidden;
}

img,
video,
svg,
canvas {
  display: block;

  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .site-header { background: rgba(244, 248, 252, .88); }
html[data-theme="light"] .mobile-menu { background: rgba(255, 255, 255, .98); }
html[data-theme="light"] .cta-section { background: var(--bg-soft); }
html[data-theme="light"] .site-footer { background: #e8f0f7; }

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

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip-link {
  position: fixed;

  top: 12px;
  left: 12px;

  z-index: 9999;

  padding: 10px 16px;

  border-radius: 10px;

  background: white;

  color: #07111f;

  transform: translateY(-150%);

  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}


/* =========================================================
   COMMON CONTENT CONTAINER
========================================================= */

.container {
  width: min(
    calc(100% - (var(--page-padding) * 2)),
    var(--content-width)
  );

  margin-inline: auto;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
  padding: clamp(72px, 8vw, 120px) 0;
}


/* =========================================================
   HEADER
   KEEPING HEADER STRUCTURE STABLE
========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 1000;

  width: 100%;

  border-bottom: 1px solid transparent;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    backdrop-filter 0.3s ease;

  overflow: visible;
}

.site-header.scrolled {
  background: rgba(6, 16, 29, 0.82);

  border-color: var(--line);

  backdrop-filter: blur(18px);
}


/*
   Header container gets its own sizing.
   This prevents content container changes from
   disturbing header positioning.
*/

.site-header .container {
  width: min(
    calc(100% - 48px),
    1730px
  );
}


.nav-inner {
  min-height: 60px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  white-space: nowrap;
}

.brand-name {
  font-size: 19px;

  font-weight: 800;

  letter-spacing: -0.5px;
}

.brand-name span {
  color: var(--primary);
}


/* =========================================================
   BRAND MARK
========================================================= */

.brand-mark {
  position: relative;

  width: 28px;
  height: 28px;

  display: grid;

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

  gap: 3px;

  flex-shrink: 0;

  background: url("/assets/pixelorigen-icon.svg?v=36") center / contain no-repeat;
}

.brand-mark span,
.brand-mark i {
  display: none;

  min-width: 0;

  border-radius: 4px;

  background: #3862b6;
}

.brand-mark span:nth-child(2),
.brand-mark i:nth-child(2) {
  background: #5881c1;
}

.brand-mark span:nth-child(3),
.brand-mark i:nth-child(3) {
  background: #7593cd;
}

.brand-mark span:nth-child(4),
.brand-mark i:nth-child(4) {
  background: #96b0d8;
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: clamp(22px, 2.2vw, 34px);

  margin-inline: auto;
}

.desktop-nav a {
  color: var(--text-soft);

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;

  transition: color 0.2s ease;
}

.desktop-nav a:hover {
  color: white;
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 44px;

  padding: 0 19px;

  border: 1px solid transparent;

  border-radius: 12px;

  font-weight: 700;

  white-space: nowrap;

  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

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

.btn-small {
  min-height: 40px;

  padding-inline: 15px;

  font-size: 13px;
}

.btn-large {
  min-height: 54px;

  padding-inline: 22px;

  border-radius: 14px;
}

.btn-primary {
  color: #04101a;

  background:
    linear-gradient(
      135deg,
      #8cecff,
      #8f86ff
    );

  box-shadow:
    0 10px 30px rgba(114, 230, 255, 0.15);
}

.btn-primary:hover {
  box-shadow:
    0 16px 40px rgba(114, 230, 255, 0.22);
}

.btn-secondary {
  color: white;

  background: rgba(255, 255, 255, 0.045);

  border-color: var(--line-strong);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-white {
  color: #07111f;

  background: white;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.2);
}

.btn-white:hover {
  background: #f2fbff;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.nav-menu-btn {
  display: none;

  width: 42px;
  height: 42px;

  padding: 9px;

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

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.04);
}

.nav-menu-btn span {
  display: block;

  height: 2px;

  margin: 5px 0;

  background: var(--text);

  border-radius: 5px;
}

.mobile-menu {
  display: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  /*
     Header is fixed, therefore hero gets top padding.
     No huge fixed min-height.
  */

  min-height: min(820px, 100vh);

  padding:
    calc(var(--header-height) + clamp(60px, 7vw, 105px))
    0
    clamp(70px, 8vw, 100px);

  display: flex;

  align-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 30%,
      rgba(91, 107, 255, 0.14),
      transparent 32%
    ),
    radial-gradient(
      circle at 15% 65%,
      rgba(65, 219, 255, 0.08),
      transparent 30%
    ),
    var(--bg);
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-glow {
  position: absolute;

  width: clamp(280px, 35vw, 500px);
  height: clamp(280px, 35vw, 500px);

  border-radius: 50%;

  filter: blur(100px);

  opacity: 0.12;

  pointer-events: none;
}

.hero-glow-one {
  top: 100px;

  right: -180px;

  background: #7467ff;
}

.hero-glow-two {
  bottom: -220px;

  left: -180px;

  background: #48dfff;
}


/* =========================================================
   PIXEL FIELD
========================================================= */

.pixel-field {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.3;

  overflow: hidden;
}

.pixel-field span {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 1px;

  background: rgba(142, 235, 255, 0.5);

  animation:
    pixelFloat 6s ease-in-out infinite;
}

.pixel-field span:nth-child(1) {
  left: 8%;
  top: 25%;
}

.pixel-field span:nth-child(2) {
  left: 20%;
  top: 70%;
  animation-delay: -2s;
}

.pixel-field span:nth-child(3) {
  left: 36%;
  top: 18%;
  animation-delay: -4s;
}

.pixel-field span:nth-child(4) {
  left: 50%;
  top: 75%;
  animation-delay: -1s;
}

.pixel-field span:nth-child(5) {
  left: 65%;
  top: 20%;
  animation-delay: -3s;
}

.pixel-field span:nth-child(6) {
  left: 79%;
  top: 65%;
  animation-delay: -5s;
}

.pixel-field span:nth-child(7) {
  left: 91%;
  top: 30%;
}

.pixel-field span:nth-child(8) {
  left: 74%;
  top: 84%;
  animation-delay: -2.5s;
}

.pixel-field span:nth-child(9) {
  left: 43%;
  top: 44%;
  animation-delay: -4.5s;
}

.pixel-field span:nth-child(10) {
  left: 14%;
  top: 46%;
  animation-delay: -1.5s;
}

@keyframes pixelFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);

    opacity: 0.25;
  }

  50% {
    transform: translate3d(0, -12px, 0);

    opacity: 0.8;
  }
}


/* =========================================================
   HERO GRID
========================================================= */

.hero-grid {
  position: relative;

  z-index: 2;

  display: grid;

  /*
     minmax(0, 1fr) is VERY important.
     It prevents grid children from forcing
     the page wider than viewport.
  */

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

  align-items: center;

  gap: clamp(35px, 5vw, 80px);

  width: 100%;
}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
  min-width: 0;

  width: 100%;
}

.eyebrow,
.section-kicker {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--primary);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.eyebrow {
  max-width: 100%;

  padding: 8px 11px;

  margin-bottom: 25px;

  border:
    1px solid rgba(114, 230, 255, 0.15);

  border-radius: 999px;

  background:
    rgba(114, 230, 255, 0.05);

  white-space: nowrap;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 12px var(--green);
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero h1 {
  max-width: 680px;

  margin: 0 0 24px;

  font-size:
    clamp(42px, 5vw, 76px);

  line-height: 1.04;

  letter-spacing:
    clamp(-3.5px, -0.25vw, -2px);

  font-weight: 800;
}

.gradient-text {
  display: inline;

  background:
    linear-gradient(
      110deg,
      #ffffff 5%,
      #80e9ff 45%,
      #9d91ff 95%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* =========================================================
   HERO TYPEWRITER PROMISE
========================================================= */

.hero-typewriter-line {
  max-width: 610px;
  min-height: 2.7em;
  margin: -8px 0 18px;
  color: var(--text);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.hero-typewriter-line #hero-typewriter-text {
  background: linear-gradient(110deg, var(--text) 8%, #22b8d5 55%, #6f7cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: var(--primary);
  animation: heroTypewriterBlink 0.82s steps(1, end) infinite;
}

.hero-typewriter-line.is-complete .hero-typewriter-cursor {
  animation-duration: 1.05s;
}

@keyframes heroTypewriterBlink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-typewriter-cursor {
    animation: none;
    opacity: 0;
  }
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {
  max-width: 610px;

  margin: 0 0 32px;

  color: var(--text-soft);

  font-size: clamp(14px, 1.2vw, 17px);

  line-height: 1.8;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.hero-trust {
  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 28px;

  color: var(--text-muted);

  font-size: 12px;
}

.hero-trust div {
  display: flex;

  align-items: center;

  gap: 7px;
}

.trust-icon {
  color: var(--green);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
  position: relative;

  min-width: 0;

  width: 100%;

  max-width: 720px;

  margin-inline: auto;
}


/* =========================================================
   VIDEO SHELL
========================================================= */

.hero-video-shell {
  position: relative;

  width: 100%;

  min-width: 0;

  overflow: hidden;

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

  border-radius: clamp(18px, 2vw, 25px);

  background: #0a1725;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.45);

  /*
     IMPORTANT:
     Do not rotate on desktop in a way that
     increases the visual bounding box.
  */

  transform: none;
}


/* =========================================================
   VIDEO TOP BAR
========================================================= */

.video-topbar {
  min-height: 46px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 15px;

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

  color: var(--text-muted);

  font-size: 11px;

  overflow: hidden;
}

.video-topbar > span:not(.live-indicator) {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.window-dots {
  display: flex;

  gap: 5px;

  flex-shrink: 0;
}

.window-dots i {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.25);
}

.live-indicator {
  margin-left: auto;

  color: var(--green);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1px;

  flex-shrink: 0;
}


/* =========================================================
   VIDEO AREA
========================================================= */

.hero-video-wrap {
  position: relative;

  width: 100%;

  /*
     Responsive video ratio.
  */

  aspect-ratio: 16 / 10;

  min-height: 0;

  overflow: hidden;

  background: #081421;
}

.hero-video {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  object-position: center;

  background: #081421;
}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.video-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  padding: 18px;

  background:
    linear-gradient(
      transparent 60%,
      rgba(0, 0, 0, 0.45)
    );

  pointer-events: none;
}

.processing-pill {
  display: flex;

  align-items: center;

  gap: 8px;

  max-width: 100%;

  padding: 7px 11px;

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

  border-radius: 999px;

  background:
    rgba(5, 15, 25, 0.72);

  backdrop-filter: blur(10px);

  color: white;

  font-size: 10px;

  white-space: nowrap;
}

.processing-pill span {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px var(--green);
}


/* =========================================================
   VIDEO CAPTION
========================================================= */

.video-caption {
  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 12px 17px;

  color: var(--text-muted);

  font-size: 11px;
}

.video-caption > div:first-child {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.video-caption strong {
  color: white;
}

.video-caption span {
  margin-left: 5px;
}

.caption-arrow {
  flex-shrink: 0;

  color: var(--primary);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {
  position: absolute;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 9px;

  max-width: 170px;

  padding: 11px 13px;

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

  border-radius: 14px;

  background:
    rgba(11, 27, 43, 0.84);

  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.25);

  animation:
    cardFloat 5s ease-in-out infinite;
}

.floating-card-one {
  left: -18px;

  top: 15%;
}

.floating-card-two {
  right: -18px;

  bottom: 17%;

  animation-delay: -2.2s;
}

.floating-icon {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 9px;

  background:
    rgba(114, 230, 255, 0.08);

  color: var(--primary);
}

.floating-card strong {
  display: block;

  font-size: 11px;

  white-space: nowrap;
}

.floating-card small {
  display: block;

  color: var(--text-muted);

  font-size: 9px;

  white-space: nowrap;
}

@keyframes cardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}


/* =========================================================
   HERO BOTTOM FADE
========================================================= */

.hero-bottom-fade {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 100px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--bg)
    );
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {
  max-width: 700px;

  margin:
    0 auto 55px;

  text-align: center;
}

.section-heading h2 {
  margin:
    10px 0 15px;

  font-size:
    clamp(34px, 4vw, 53px);

  line-height: 1.05;

  letter-spacing: -2px;
}

.section-heading h2 span,
.why-copy h2 span,
.cta-box h2 span {
  color: var(--text-muted);
}

.section-heading p {
  margin: 0;

  color: var(--text-soft);

  font-size: 15px;
}


/* =========================================================
   TOOLS
========================================================= */

.tools-section {
  position: relative;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      #081625
    );

  overflow: hidden;
}

.tools-grid {
  display: grid;

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

  gap: 18px;

  width: 100%;
}

.tool-card {
  min-width: 0;

  overflow: hidden;

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

  border-radius: var(--radius);

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    transform 0.35s var(--ease),
    border-color 0.35s ease,
    box-shadow 0.35s ease;

  content-visibility: auto;

  contain-intrinsic-size: 450px;
}

.tool-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(114, 230, 255, 0.24);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.25);
}

.tool-card-featured {
  grid-column: span 2;
}


/* =========================================================
   TOOL VISUAL
========================================================= */

.tool-visual {
  position: relative;

  width: 100%;

  min-height: 235px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #0a1828;
}

.tool-badge {
  position: absolute;

  top: 15px;
  right: 15px;

  max-width: calc(100% - 30px);

  padding: 6px 8px;

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

  border-radius: 7px;

  background:
    rgba(0, 0, 0, 0.2);

  color: var(--text-muted);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   TOOL VISUALS
========================================================= */


/* =========================================================
   COMPRESSOR
========================================================= */

.compression-bars {
  display: flex;

  align-items: flex-end;

  gap: 8px;

  height: 100px;
}

.compression-bars span {
  width: 23px;

  flex-shrink: 0;

  border-radius:
    6px 6px 2px 2px;

  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--primary-2)
    );

  animation:
    barPulse 2.4s ease-in-out infinite;
}

.compression-bars span:nth-child(1) {
  height: 90px;
}

.compression-bars span:nth-child(2) {
  height: 75px;

  animation-delay: -0.3s;
}

.compression-bars span:nth-child(3) {
  height: 55px;

  animation-delay: -0.6s;
}

.compression-bars span:nth-child(4) {
  height: 38px;

  animation-delay: -0.9s;
}

.compression-bars span:nth-child(5) {
  height: 24px;

  animation-delay: -1.2s;
}

@keyframes barPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.size-pill {
  position: absolute;

  bottom: 24px;

  padding: 8px 12px;

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

  border-radius: 9px;

  background:
    rgba(5, 15, 25, 0.7);

  font-size: 11px;
}

.size-pill span {
  color: var(--primary);

  margin: 0 5px;
}


/* =========================================================
   RESIZER
========================================================= */

.resize-box {
  position: relative;

  width: min(150px, 60%);

  height: 110px;

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

  background:
    rgba(114, 230, 255, 0.06);

  box-shadow:
    0 0 50px rgba(114, 230, 255, 0.1);
}

.resize-corner {
  position: absolute;

  width: 9px;
  height: 9px;

  border:
    2px solid white;
}

.c1 {
  top: -5px;
  left: -5px;
}

.c2 {
  top: -5px;
  right: -5px;
}

.c3 {
  bottom: -5px;
  left: -5px;
}

.c4 {
  bottom: -5px;
  right: -5px;
}

.dimension-label {
  position: absolute;

  bottom: 25px;

  max-width: calc(100% - 30px);

  padding: 7px 10px;

  border-radius: 8px;

  background:
    rgba(0, 0, 0, 0.5);

  color: var(--primary);

  font-size: 11px;

  white-space: nowrap;
}


/* =========================================================
   TARGET SIZE
========================================================= */

.target-circle {
  width: 130px;
  height: 130px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid rgba(114, 230, 255, 0.25);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(114, 230, 255, 0.13),
      transparent 70%
    );
}

.target-circle strong {
  font-size: 38px;

  line-height: 1;
}

.target-circle span {
  color: var(--primary);

  font-size: 11px;

  font-weight: 800;
}

.target-arrow {
  position: absolute;

  right: 32%;

  color: var(--green);

  font-size: 25px;
}


/* =========================================================
   CONVERTER
========================================================= */

.converter-visual {
  gap: 14px;
}

.format-card {
  width: 80px;
  height: 65px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 12px;

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

  background:
    rgba(255, 255, 255, 0.05);

  font-weight: 800;

  font-size: 13px;
}

.format-one {
  color: #ffca72;
}

.format-two {
  color: var(--primary);
}

.format-arrow {
  color: var(--text-muted);

  font-size: 22px;

  flex-shrink: 0;
}


/* =========================================================
   SIGNATURE
========================================================= */

.signature-line {
  max-width: 80%;

  font-family: cursive;

  font-size: clamp(28px, 4vw, 36px);

  transform: rotate(-6deg);

  color: white;

  opacity: 0.85;

  overflow: hidden;

  text-overflow: ellipsis;
}

.signature-clean {
  position: absolute;

  bottom: 27px;

  padding: 5px 8px;

  border-radius: 6px;

  background:
    rgba(114, 224, 161, 0.08);

  color: var(--green);

  font-size: 9px;

  letter-spacing: 1px;
}


/* =========================================================
   PASSPORT
========================================================= */

.portrait-frame {
  width: 100px;
  height: 130px;

  position: relative;

  overflow: hidden;

  flex-shrink: 0;

  border:
    5px solid white;

  border-radius: 5px;

  background: #eaf5fa;
}

.portrait-head {
  position: absolute;

  top: 25px;
  left: 33px;

  width: 34px;
  height: 38px;

  border-radius: 50%;

  background: #c99f8a;
}

.portrait-body {
  position: absolute;

  bottom: -15px;
  left: 18px;

  width: 65px;
  height: 70px;

  border-radius:
    40px 40px 0 0;

  background: #52667f;
}

.passport-label {
  position: absolute;

  bottom: 25px;

  color: #172638;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1px;
}


/* =========================================================
   BULK
========================================================= */

.bulk-stack {
  position: relative;

  width: 100px;
  height: 115px;

  flex-shrink: 0;
}

.bulk-stack div {
  position: absolute;

  width: 75px;
  height: 48px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(114, 230, 255, 0.22);

  border-radius: 8px;

  background: #12273b;

  color: var(--primary);

  font-size: 10px;

  font-weight: 800;
}

.bulk-stack div:nth-child(1) {
  top: 0;
  left: 0;
}

.bulk-stack div:nth-child(2) {
  top: 18px;
  left: 8px;
}

.bulk-stack div:nth-child(3) {
  top: 36px;
  left: 16px;
}

.bulk-stack div:nth-child(4) {
  top: 54px;
  left: 24px;
}

.bulk-count {
  position: absolute;

  right: 31%;

  bottom: 25px;

  padding: 7px 10px;

  border-radius: 7px;

  background:
    rgba(114, 224, 161, 0.08);

  color: var(--green);

  font-size: 9px;

  font-weight: 800;
}


/* =========================================================
   TOOL CONTENT
========================================================= */

.tool-content {
  position: relative;

  min-width: 0;

  padding: 26px;
}

.tool-number {
  margin-bottom: 8px;

  color: var(--primary);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
}

.tool-content h3 {
  margin: 0 0 8px;

  font-size: 21px;

  letter-spacing: -0.5px;

  overflow-wrap: break-word;
}

.tool-content p {
  margin: 0 0 20px;

  color: var(--text-muted);

  font-size: 13px;

  line-height: 1.7;
}

.tool-link {
  max-width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  font-size: 12px;

  font-weight: 800;

  text-align: left;

  transition: color 0.2s ease;
}

.tool-link span {
  margin-left: 5px;

  color: var(--primary);

  transition:
    transform 0.2s ease;
}

.tool-link:hover {
  color: var(--primary);
}

.tool-link:hover span {
  display: inline-block;

  transform: translateX(4px);
}


/* =========================================================
   WORKFLOW
========================================================= */

.workflow-section {
  background: var(--bg-soft);

  overflow: hidden;
}

.workflow-grid {
  display: grid;

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

  align-items: center;

  gap: 20px;
}

.workflow-step {
  min-width: 0;

  text-align: left;
  padding: 14px 14px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .12);
}

.step-number {
  color: var(--primary);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
  display: inline-block;
  margin: 6px 6px 10px;
}

.workflow-image {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #071320;
  aspect-ratio: 4 / 3;
}

.workflow-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.workflow-step:hover .workflow-image img { transform: scale(1.035); }

.step-icon {
  width: 58px;
  height: 58px;

  margin: 16px auto;

  display: grid;

  place-items: center;

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

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.035);

  color: var(--primary);

  font-size: 22px;
}

.workflow-step h3 {
  margin: 0 0 7px;

  font-size: 19px;
  padding-inline: 6px;
}

.workflow-step p {
  margin: 0;

  color: var(--text-muted);

  font-size: 13px;
  padding-inline: 6px;
}

.workflow-line {
  display: none;
}


/* =========================================================
   WHY SECTION
========================================================= */

.why-section {
  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(121, 100, 255, 0.09),
      transparent 30%
    ),
    var(--bg);

  overflow: hidden;
}

.why-grid {
  display: grid;

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

  gap: clamp(50px, 8vw, 100px);

  align-items: center;
}

.why-copy {
  min-width: 0;
}

.why-copy h2 {
  max-width: 550px;

  margin:
    12px 0 18px;

  font-size:
    clamp(35px, 4vw, 53px);

  line-height: 1.05;

  letter-spacing: -2px;
}

.why-copy > p {
  max-width: 550px;

  color: var(--text-soft);

  font-size: 15px;
}

.why-list {
  margin-top: 35px;

  display: grid;

  gap: 18px;
}

.why-item {
  display: flex;

  gap: 13px;
}

.why-item > span {
  width: 27px;
  height: 27px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background:
    rgba(114, 224, 161, 0.08);

  color: var(--green);

  font-size: 12px;
}

.why-item strong {
  display: block;

  margin-bottom: 3px;

  font-size: 13px;
}

.why-item p {
  margin: 0;

  color: var(--text-muted);

  font-size: 12px;
}


/* =========================================================
   WHY VISUAL
========================================================= */

.why-visual {
  min-width: 0;

  min-height: 430px;

  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;
}

.pixel-orbit {
  position: relative;

  width: min(330px, 80vw);
  height: min(330px, 80vw);

  display: grid;

  place-items: center;
}

.orbit {
  position: absolute;

  inset: 0;

  border:
    1px solid rgba(114, 230, 255, 0.12);

  border-radius: 50%;
}

.orbit-one {
  transform:
    rotate(25deg)
    scaleY(0.55);
}

.orbit-two {
  transform:
    rotate(-25deg)
    scaleY(0.55);
}

.orbit-center {
  width: 120px;
  height: 120px;

  display: grid;

  place-items: center;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      #122b42,
      #0b1827
    );

  border:
    1px solid rgba(114, 230, 255, 0.22);

  box-shadow:
    0 0 70px rgba(114, 230, 255, 0.1);
}

.orbit-center strong {
  font-size: 15px;
}

.brand-mark.large {
  width: 35px;
  height: 35px;
}

.mini-card {
  position: absolute;

  max-width: 160px;

  padding: 11px 13px;

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

  border-radius: 12px;

  background:
    rgba(11, 27, 43, 0.85);

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.2);
}

.mini-card span {
  margin-right: 7px;

  color: var(--primary);

  font-size: 10px;
}

.mini-card strong {
  font-size: 10px;
}

.mini-card-top {
  top: 40px;
  right: 30px;
}

.mini-card-bottom {
  bottom: 55px;
  left: 20px;
}



/* =========================================================
   v57 — WHY VISUAL INPUT / RESULT MOTION
   Lightweight CSS-only animation for the visual data flow.
========================================================= */

.pixel-orbit .orbit {
  transform-origin: 50% 50%;
  will-change: transform;
}

.pixel-orbit .orbit-one {
  animation: pixelorigenOrbitOne 14s linear infinite;
}

.pixel-orbit .orbit-two {
  animation: pixelorigenOrbitTwo 18s linear infinite reverse;
}

.mini-card {
  will-change: transform, box-shadow;
}

.mini-card-top {
  animation: pixelorigenInputFloat 4.2s ease-in-out infinite;
}

.mini-card-bottom {
  animation: pixelorigenResultFloat 4.2s ease-in-out infinite -2.1s;
}

.mini-card-top span,
.mini-card-top strong {
  animation: pixelorigenInputTextPulse 4.2s ease-in-out infinite;
}

.mini-card-bottom span,
.mini-card-bottom strong {
  animation: pixelorigenResultTextPulse 4.2s ease-in-out infinite -2.1s;
}

@keyframes pixelorigenOrbitOne {
  from {
    transform: rotate(25deg) scaleY(0.55);
  }
  to {
    transform: rotate(385deg) scaleY(0.55);
  }
}

@keyframes pixelorigenOrbitTwo {
  from {
    transform: rotate(-25deg) scaleY(0.55);
  }
  to {
    transform: rotate(335deg) scaleY(0.55);
  }
}

@keyframes pixelorigenInputFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  50% {
    transform: translate3d(-8px, 7px, 0);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      0 0 24px rgba(114, 230, 255, 0.12);
  }
}

@keyframes pixelorigenResultFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  50% {
    transform: translate3d(8px, -7px, 0);
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      0 0 24px rgba(114, 230, 255, 0.12);
  }
}

@keyframes pixelorigenInputTextPulse {
  0%,
  100% {
    opacity: 0.78;
  }

  50% {
    opacity: 1;
  }
}

@keyframes pixelorigenResultTextPulse {
  0%,
  100% {
    opacity: 0.82;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .mini-card-top {
    animation-name: pixelorigenInputFloatMobile;
  }

  .mini-card-bottom {
    animation-name: pixelorigenResultFloatMobile;
  }
}

@keyframes pixelorigenInputFloatMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-5px, 5px, 0);
  }
}

@keyframes pixelorigenResultFloatMobile {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(5px, -5px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-orbit .orbit,
  .mini-card,
  .mini-card span,
  .mini-card strong {
    animation: none !important;
  }
}

/* =========================================================
   CTA
========================================================= */

.cta-section {
  padding:
    40px 0 110px;

  background: #071320;

  overflow: hidden;
}

.cta-box {
  position: relative;

  overflow: hidden;

  padding:
    clamp(55px, 7vw, 80px)
    30px;

  text-align: center;

  /* This panel stays dark in both themes, so its content must not
     inherit the light theme's dark text tokens. */
  color: #f7fbff;

  border:
    1px solid rgba(114, 230, 255, 0.14);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(114, 230, 255, 0.13),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #0c2033,
      #0a1726
    );
}

.cta-box h2 {
  max-width: 650px;

  margin:
    12px auto 15px;

  font-size:
    clamp(35px, 4.5vw, 58px);

  line-height: 1.05;

  letter-spacing: -2px;

  color: #f7fbff;
}

.cta-box h2 span {
  color: #a9c9e8;
}

.cta-box .section-kicker {
  color: #72e6ff;
}

.cta-box p {
  max-width: 500px;

  margin:
    0 auto 28px;

  color: #b9cad9;

  font-size: 14px;
}

.cta-pixels {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.cta-pixels span {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 2px;

  background: #72e6ff;

  opacity: 0.15;
}

.cta-pixels span:nth-child(1) {
  top: 20%;
  left: 15%;
}

.cta-pixels span:nth-child(2) {
  top: 65%;
  left: 28%;
}

.cta-pixels span:nth-child(3) {
  top: 25%;
  right: 18%;
}

.cta-pixels span:nth-child(4) {
  bottom: 20%;
  right: 30%;
}

.cta-pixels span:nth-child(5) {
  bottom: 35%;
  left: 8%;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  padding:
    55px 0 25px;

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

  background: #040b13;

  overflow: hidden;
}

.footer-main {
  display: grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap: 40px;

  padding-bottom: 45px;
}

.footer-brand {
  min-width: 0;
}

.footer-brand p {
  max-width: 270px;

  color: var(--text-muted);

  font-size: 12px;
}

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 9px;
}

.footer-column h3 {
  margin:
    0 0 7px;

  color: white;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.footer-column a {
  color: var(--text-muted);

  font-size: 12px;

  transition:
    color 0.2s ease;
}

.footer-column a:hover {
  color: white;
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-top: 20px;

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

  color: #637286;

  font-size: 10px;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}

.reveal-delay {
  transition-delay: 0.12s;
}


/* =========================================================
   LARGE LAPTOP
   1200px and below
========================================================= */

@media (max-width: 1200px) {

  :root {
    --page-padding: 22px;
  }

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

    gap: 40px;
  }

  .hero h1 {
    font-size:
      clamp(40px, 5vw, 62px);
  }

  .floating-card-one {
    left: -10px;
  }

  .floating-card-two {
    right: -10px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   1000px and below
========================================================= */

@media (max-width: 1000px) {

  /*
     Header:
     desktop nav disappears,
     mobile menu button appears.
  */

  .desktop-nav {
    display: none;
  }

  .nav-menu-btn {
    display: block;
  }

  /*
     Hero becomes vertical.
  */

  .hero {
    min-height: auto;

    padding:
      calc(var(--header-height) + 70px)
      0
      80px;
  }

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 60px;

    width: 100%;
  }

  .hero-copy {
    max-width: 760px;

    margin-inline: auto;

    text-align: center;
  }

  .hero h1,
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    width: 100%;

    max-width: 760px;

    margin-inline: auto;
  }

  .hero-video-shell {
    width: 100%;
  }

  .why-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .why-copy {
    text-align: center;
  }

  .why-copy h2,
  .why-copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .why-list {
    max-width: 520px;

    margin-left: auto;
    margin-right: auto;

    text-align: left;
  }

  .workflow-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .workflow-line {
    width: 1px;

    height: 35px;

    margin-inline: auto;
  }

  .footer-main {
    grid-template-columns:
      1.5fr 1fr 1fr;
  }
}


/* =========================================================
   TABLET PORTRAIT
   768px and below
========================================================= */

@media (max-width: 768px) {

  :root {
    --page-padding: 18px;

    --header-height: 60px;
  }

  /*
     Header remains visually clean.
  */

  .site-header .container {
    width: min(
      calc(100% - 32px),
      1730px
    );
  }

  .nav-inner {
    min-height: 60px;
  }

  .nav-actions .btn {
    display: none;
  }

  .mobile-menu {
    padding:
      12px 18px 18px;

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

    background:
      rgba(6, 16, 29, 0.96);
  }

  .mobile-menu.open {
    display: grid;

    gap: 4px;
  }

  .mobile-menu a {
    padding: 13px 0;

    color: var(--text-soft);

    font-size: 14px;

    font-weight: 600;
  }


  /* HERO */

  .hero {
    padding:
      calc(var(--header-height) + 60px)
      0
      70px;
  }

  .hero-grid {
    gap: 48px;
  }

  .hero h1 {
    font-size:
      clamp(40px, 9vw, 58px);

    letter-spacing: -2.5px;
  }

  .hero-description {
    font-size: 15px;

    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;

    align-items: stretch;

    width: min(100%, 420px);

    margin-inline: auto;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust {
    display: grid;

    justify-content: center;

    gap: 10px;
  }


  /* VIDEO */

  .hero-video-shell {
    border-radius: 18px;

    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.35);
  }

  .video-topbar {
    min-height: 42px;

    padding-inline: 12px;
  }

  .hero-video-wrap {
    aspect-ratio: 16 / 10;
  }

  .video-overlay {
    padding: 12px;
  }

  .video-caption {
    padding:
      11px 13px;
  }


  /*
     Floating cards are removed on tablet.
     They are decorative and otherwise create
     unnecessary overflow.
  */

  .floating-card {
    display: none;
  }


  /* TOOLS */

  .tools-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .tool-card-featured {
    grid-column: span 1;
  }

  .tool-visual {
    min-height: 210px;
  }

  .tool-content {
    padding: 23px;
  }


  /* WHY */

  .why-visual {
    min-height: 340px;
  }

  .pixel-orbit {
    width: 270px;
    height: 270px;
  }


  /* CTA */

  .cta-box {
    border-radius: 22px;
  }


  /* FOOTER */

  .footer-main {
    grid-template-columns:
      1fr 1fr;

    gap: 30px;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    flex-direction: column;
  }
}


/* =========================================================
   MOBILE
   600px and below
========================================================= */

@media (max-width: 600px) {

  :root {
    --page-padding: 14px;
  }

  .container {
    width:
      calc(100% - 28px);
  }

  .site-header .container {
    width:
      calc(100% - 28px);
  }


  /* Header */

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 26px;
    height: 26px;
  }

  .brand-name {
    font-size: 17px;
  }


  /* Hero */

  .hero {
    padding:
      calc(var(--header-height) + 52px)
      0
      60px;
  }

  .hero-grid {
    gap: 40px;
  }

  .eyebrow {
    max-width: 100%;

    padding:
      7px 9px;

    margin-bottom: 20px;

    font-size: 9px;

    letter-spacing: 1.1px;
  }

  .hero h1 {
    font-size:
      clamp(36px, 11vw, 50px);

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 20px;
  }

  .hero-description {
    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 25px;
  }

  .hero-trust {
    font-size: 11px;
  }


  /* Video */

  .hero-video-shell {
    border-radius: 15px;
  }

  .video-topbar {
    min-height: 38px;

    gap: 8px;

    padding-inline: 10px;

    font-size: 9px;
  }

  .window-dots {
    gap: 4px;
  }

  .window-dots i {
    width: 6px;
    height: 6px;
  }

  .live-indicator {
    font-size: 8px;
  }

  .hero-video-wrap {
    aspect-ratio: 16 / 10;
  }

  .video-caption {
    min-height: 42px;

    padding:
      9px 11px;

    font-size: 9px;
  }

  .video-caption span {
    display: none;
  }

  .processing-pill {
    padding: 6px 9px;

    font-size: 9px;
  }


  /* Section */

  .section {
    padding:
      70px 0;
  }

  .section-heading {
    margin-bottom: 38px;
  }

  .section-heading h2 {
    font-size:
      clamp(32px, 9vw, 43px);

    letter-spacing: -1.5px;
  }

  .section-heading p {
    font-size: 13px;
  }


  /* Tools */

  .tool-visual {
    min-height: 200px;
  }

  .tool-content {
    padding: 20px;
  }

  .tool-content h3 {
    font-size: 19px;
  }

  .tool-content p {
    font-size: 12px;
  }


  /* CTA */

  .cta-section {
    padding:
      25px 0 70px;
  }

  .cta-box {
    padding:
      55px 18px;
  }

  .cta-box h2 {
    font-size:
      clamp(32px, 9vw, 44px);

    letter-spacing: -1.5px;
  }

  .cta-box p {
    font-size: 13px;
  }


  /* Footer */

  .footer-main {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .footer-brand {
    grid-column: span 1;
  }
}


/* =========================================================
   VERY SMALL PHONES
   420px and below
========================================================= */

@media (max-width: 420px) {

  .site-header .container {
    width:
      calc(100% - 24px);
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
  }

  .nav-menu-btn {
    width: 40px;
    height: 40px;
  }

  .hero {
    padding-top:
      calc(var(--header-height) + 45px);
  }

  .hero h1 {
    font-size: 37px;

    letter-spacing: -1.8px;
  }

  .hero-description {
    font-size: 13.5px;
  }

  .hero-trust {
    gap: 8px;
  }

  .tool-visual {
    min-height: 185px;
  }

  .tool-content {
    padding: 18px;
  }

  .target-circle {
    width: 115px;
    height: 115px;
  }

  .format-card {
    width: 65px;
    height: 55px;
  }

  .format-arrow {
    font-size: 18px;
  }

  .resize-box {
    width: 130px;
    height: 95px;
  }

  .portrait-frame {
    width: 88px;
    height: 115px;
  }

  .bulk-stack {
    transform: scale(0.9);
  }

  .why-visual {
    min-height: 300px;
  }

  .pixel-orbit {
    width: 235px;
    height: 235px;
  }

  .orbit-center {
    width: 100px;
    height: 100px;

    border-radius: 24px;
  }

  .mini-card {
    display: none;
  }
}

/* =========================================================
   ULTRA SMALL
   360px and below
========================================================= */

@media (max-width: 360px) {

  .hero h1 {
    font-size: 34px;
  }

  .hero-actions .btn {
    min-height: 50px;

    padding-inline: 15px;
  }

  .hero-trust {
    font-size: 10px;
  }

  .video-topbar > span:not(.live-indicator) {
    max-width: 130px;
  }

  .tool-content h3 {
    font-size: 18px;
  }
}


/* =========================================================
   LARGE SCREENS
   1600px+
========================================================= */

@media (min-width: 1600px) {

  /*
     Keep content centered rather than stretching
     across the entire screen.
  */

  .hero-grid {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(600px, 1.1fr);

    gap: 80px;
  }

  .hero-visual {
    max-width: 760px;
  }

  .hero h1 {
    font-size: 76px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }

  .hero-video {
    animation: none;
  }
}

/* =========================================================
   FINAL RESPONSIVE SCALE & OVERFLOW CONSOLIDATION
========================================================= */

html,
body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.nav-inner,
.nav-actions,
.hero-grid,
.tools-grid,
.workflow-grid,
.why-grid,
.footer-main,
.footer-bottom,
.tool-card,
.workflow-step {
  min-width: 0;
}

.tool-visual {
  height: 210px;
  min-height: 210px;
}

.tool-content {
  padding: 22px;
}

.footer-main > *,
.footer-bottom > *,
.workflow-step > * {
  min-width: 0;
  max-width: 100%;
}

.footer-main,
.footer-bottom,
.site-footer nav {
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .tool-card-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  }

  .tool-card-featured .tool-visual {
    height: 100%;
    min-height: 210px;
  }

  .tool-card-featured .tool-content {
    display: grid;
    align-content: center;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .tools-section > .container {
    width: min(860px, calc(100% - 32px));
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tool-card-featured {
    grid-column: auto;
  }

  .tool-visual {
    height: 180px;
    min-height: 180px;
  }

  .tool-content {
    padding: 18px;
  }

  .tool-content h3 {
    font-size: 18px;
  }

  .tool-content p {
    margin-bottom: 15px;
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .section {
    padding-block: 64px;
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-card-featured {
    grid-column: auto;
  }

  .tool-visual {
    height: 165px;
    min-height: 165px;
    padding: 10px;
  }

  .tool-content {
    padding: 17px;
  }

  .tool-content h3 {
    margin-bottom: 6px;
    font-size: 18px;
  }

  .tool-content p {
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.55;
  }

  .workflow-step {
    padding: 10px 10px 18px;
    border-radius: 18px;
  }

  .workflow-image {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
  }

  .why-visual {
    min-height: 280px;
  }

  .footer-main,
  .footer-bottom,
  .footer-links {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .section {
    padding-block: 52px;
  }

  .tool-visual {
    height: 145px;
    min-height: 145px;
  }

  .tool-content {
    padding: 15px;
  }

  .tool-content h3 {
    font-size: 17px;
  }

  .tool-content p {
    font-size: 12px;
  }

  .tool-visual > .tool-badge {
    top: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px);
  }

  .why-visual {
    min-height: 245px;
  }
}

/* =========================================================
   PIXELORIGEN — FINAL TOOL SECTION FIX
   Header and hero are intentionally NOT changed.
   This block replaces the previous experimental overrides.
========================================================= */

/* ---------- Global layout safety ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main,
section,
.container,
.tools-section,
.tools-section .container,
.tools-grid,
.tool-card,
.tool-visual,
.tool-content {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Tools section ---------- */
.tools-section {
  width: 100%;
  overflow: hidden;
}

.tools-section .container {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- Tool grid ---------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  align-items: stretch;
}

/* Featured card occupies the complete first row. */
.tool-card-featured {
  grid-column: 1 / -1;
}

/* ---------- Cards ---------- */
.tool-card {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
}

/* ---------- Visual area ---------- */
.tool-visual {
  position: relative !important;
  width: 100%;
  height: 235px;
  min-height: 235px;
  max-width: 100%;
  overflow: hidden !important;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  isolation: isolate;
}

/* Every visual badge stays inside the visual, top-right. */
.tool-visual > .tool-badge {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  left: auto !important;
  bottom: auto !important;

  z-index: 20;
  width: max-content !important;
  max-width: calc(100% - 30px);

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ---------- Compressor ---------- */
.compression-visual {
  position: relative;
}

.compression-bars {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.compression-visual .size-pill {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  max-width: calc(100% - 30px);
}

/* ---------- Resizer ---------- */
.resize-visual {
  position: relative;
}

.resize-box {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.resize-visual .dimension-label {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
  max-width: calc(100% - 30px);
}

/* ---------- Target size ---------- */
.target-visual {
  position: relative;
}

.target-circle {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.target-visual .target-arrow {
  position: absolute !important;
  left: auto !important;
  top: 50% !important;
  right: 28% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  z-index: 5;
}

/* ---------- Format converter ---------- */
.converter-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.converter-visual .format-card {
  position: relative;
  z-index: 2;
  flex: 0 0 80px;
}

.converter-visual .format-arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

/* ---------- Signature ---------- */
.signature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signature-visual .signature-line {
  position: relative !important;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: calc(100% - 50px);
  white-space: nowrap;
}

.signature-visual .signature-clean {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
}

/* ---------- Passport ---------- */
.passport-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passport-visual .portrait-frame {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.passport-visual .passport-label {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
}

/* ---------- Bulk processor ---------- */
.bulk-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulk-visual .bulk-stack {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.bulk-visual .bulk-count {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  z-index: 5;
  white-space: nowrap;
}

/* ---------- Content ---------- */
.tool-content {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}

.tool-content h3,
.tool-content p,
.tool-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.tool-link {
  white-space: normal;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .tools-section .container {
    width: min(760px, calc(100% - 32px));
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .tool-card-featured {
    grid-column: auto;
  }

  .tool-visual {
    height: 220px;
    min-height: 220px;
  }

  .tool-content {
    padding: 23px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  .tools-section .container {
    width: calc(100% - 28px);
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .tool-card {
    width: 100%;
    border-radius: 18px;
  }

  .tool-visual {
    height: 205px;
    min-height: 205px;
    padding: 15px;
  }

  .tool-content {
    padding: 20px;
  }

  .tool-visual > .tool-badge {
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px);
    font-size: 7px !important;
  }

  .compression-bars {
    transform: scale(.82);
  }

  .resize-box {
    transform: scale(.85);
  }

  .target-circle {
    transform: scale(.85);
  }

  .signature-line {
    font-size: 30px;
  }

  .portrait-frame {
    transform: scale(.9);
  }

  .bulk-stack {
    transform: scale(.85);
  }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
  .tools-section .container {
    width: calc(100% - 20px);
  }

  .tool-visual {
    height: 190px;
    min-height: 190px;
  }

  .tool-content {
    padding: 18px;
  }

  .tool-content h3 {
    font-size: 18px;
  }

  .tool-content p {
    font-size: 12px;
  }

  .signature-line {
    font-size: 26px;
  }

  .target-circle {
    transform: scale(.72);
  }

  .bulk-stack {
    transform: scale(.72);
  }

  .portrait-frame {
    transform: scale(.78);
  }
}

/* ---------- Very small phone ---------- */
@media (max-width: 350px) {
  .tools-section .container {
    width: calc(100% - 16px);
  }

  .tool-visual {
    height: 175px;
    min-height: 175px;
  }

  .tool-content {
    padding: 16px;
  }

  .tool-content h3 {
    font-size: 17px;
  }
}

/* =========================================================
   PIXELORIGEN — FINAL OVERFLOW FIX
   DOES NOT REMOVE / DISABLE ANY ANIMATION
========================================================= */

/* Prevent horizontal page overflow */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   IMPORTANT:
   Decorative animations can move outside the viewport.
   They are still visible, but they won't create scrollbar.
--------------------------------------------------------- */

.site-header,
.hero,
.tools-section,
.workflow-section,
.why-section,
.cta-section,
.site-footer {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* ---------------------------------------------------------
   COMMON CONTAINERS
--------------------------------------------------------- */

.container {
    width: min(
        calc(100% - 48px),
        1280px
    );

    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.hero > .container {
    width: min(
        calc(100% - 48px),
        1280px
    );

    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-grid {
    width: 100%;
    max-width: 100%;

    display: grid;

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

    gap: clamp(30px, 5vw, 80px);
}

.hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.hero-visual {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* ---------------------------------------------------------
   HERO HEADING
--------------------------------------------------------- */

.hero h1 {
    width: 100%;
    max-width: 680px;

    overflow-wrap: break-word;
    word-break: normal;
}

/* ---------------------------------------------------------
   HERO VIDEO
--------------------------------------------------------- */

.hero-video-shell {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
}

.hero-video-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
}

.hero-video,
.hero-video video {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    object-fit: cover;
}

/* ---------------------------------------------------------
   FLOATING HERO CARDS
   Animation stays enabled.
--------------------------------------------------------- */

.floating-card {
    max-width: calc(100% - 20px);
}

.floating-card-one,
.floating-card-two {
    z-index: 5;
}

/* ---------------------------------------------------------
   TOOLS SECTION
--------------------------------------------------------- */

.tools-section {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.tools-section > .container {
    width: min(
        calc(100% - 48px),
        1280px
    );

    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------
   TOOL GRID
--------------------------------------------------------- */

.tools-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: grid;

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

    gap: 18px;
}

/* ---------------------------------------------------------
   TOOL CARD
--------------------------------------------------------- */

.tool-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
}

.tool-card * {
    max-width: 100%;
}

.tool-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
}

.tool-content h3,
.tool-content p {
    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
}

/* ---------------------------------------------------------
   TOOL VISUAL
--------------------------------------------------------- */

.tool-visual {
    position: relative;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
}

/* ---------------------------------------------------------
   ANIMATED VISUALS
   Don't disable these.
--------------------------------------------------------- */

.compression-visual,
.resize-visual,
.target-visual,
.converter-visual,
.signature-visual,
.passport-visual,
.bulk-visual {
    max-width: 100%;
    min-width: 0;
}

/* ---------------------------------------------------------
   IMAGES / SVG / CANVAS / VIDEO
--------------------------------------------------------- */

img,
video,
svg,
canvas {
    max-width: 100%;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    .container,
    .hero > .container,
    .tools-section > .container {
        width: calc(100% - 32px);
        max-width: 100%;
    }

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

        gap: 45px;
    }

    .hero-copy,
    .hero-visual {
        width: 100%;
        max-width: 100%;
    }

    .hero h1 {
        max-width: 100%;
    }

    .hero-video-shell {
        width: 100%;
        max-width: 100%;
    }

    .tools-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    .container,
    .hero > .container,
    .tools-section > .container {
        width: calc(100% - 28px);
        max-width: 100%;
    }

    .hero {
        width: 100%;
        max-width: 100%;
    }

    .hero-grid {
        width: 100%;
        max-width: 100%;

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

        gap: 35px;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(
            38px,
            10vw,
            58px
        );

        overflow-wrap: break-word;
    }

    .hero-description {
        width: 100%;
        max-width: 100%;

        font-size: 14px;
    }

    .hero-actions {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-wrap: wrap;
    }

    .hero-trust {
        width: 100%;
        max-width: 100%;

        flex-wrap: wrap;
    }

    .hero-visual {
        width: 100%;
        max-width: 100%;
    }

    .hero-video-shell {
        width: 100%;
        max-width: 100%;

        border-radius: 18px;
    }

    .tools-grid {
        width: 100%;
        max-width: 100%;

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

        gap: 16px;
    }

    .tool-card {
        width: 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   SMALL PHONE
--------------------------------------------------------- */

@media (max-width: 420px) {

    .container,
    .hero > .container,
    .tools-section > .container {
        width: calc(100% - 20px);
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(
            34px,
            10.5vw,
            48px
        );

        letter-spacing: -2px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-actions .btn {
        max-width: 100%;
    }

    .hero-trust {
        gap: 10px;
    }

    .tool-card {
        border-radius: 18px;
    }
}

/* ---------------------------------------------------------
   VERY SMALL PHONE
--------------------------------------------------------- */

@media (max-width: 350px) {

    .container,
    .hero > .container,
    .tools-section > .container {
        width: calc(100% - 16px);
    }

    .hero h1 {
        font-size: 32px;
    }
}


/* =========================================================
   LIGHT THEME — CONTRAST & DEPTH PASS
========================================================= */

html[data-theme="light"] {
  --bg: #e8f0f7;
  --bg-soft: #dce7f1;
  --surface: #f8fbfd;
  --surface-2: #e4edf5;
  --line: rgba(12, 43, 66, 0.14);
  --line-strong: rgba(12, 43, 66, 0.25);
  --text: #0b2236;
  --text-soft: #2d4d65;
  --text-muted: #526e82;
  --primary: #067c9c;
  --primary-2: #594bd2;
  --green: #11794a;
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="light"] .site-header {
  background: rgba(232, 240, 247, 0.92);
  border-bottom-color: rgba(12, 43, 66, 0.1);
  box-shadow: 0 8px 28px rgba(25, 56, 78, 0.08);
}

html[data-theme="light"] .hero {
  background:
    radial-gradient(circle at 80% 24%, rgba(89, 75, 210, 0.14), transparent 35%),
    radial-gradient(circle at 14% 72%, rgba(6, 124, 156, 0.14), transparent 34%),
    linear-gradient(135deg, #edf4f9 0%, #e5eef6 55%, #e9e8f7 100%);
}

html[data-theme="light"] .gradient-text {
  background: linear-gradient(110deg, #075f7c 5%, #0789aa 45%, #6755d8 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] .eyebrow {
  color: #075f7c;
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(6, 124, 156, 0.24);
}

html[data-theme="light"] .hero-description,
html[data-theme="light"] .hero-trust {
  color: var(--text-soft);
}

html[data-theme="light"] .btn-secondary {
  color: #173a52;
  background: rgba(248, 251, 253, 0.82);
  border-color: rgba(12, 43, 66, 0.24);
  box-shadow: 0 8px 24px rgba(25, 56, 78, 0.08);
}

html[data-theme="light"] .btn-secondary:hover {
  color: #061d2e;
  background: #ffffff;
  border-color: rgba(6, 124, 156, 0.45);
}

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .workflow-step {
  background: rgba(248, 251, 253, 0.94);
  border-color: rgba(12, 43, 66, 0.14);
  box-shadow: 0 18px 48px rgba(25, 56, 78, 0.1);
}

html[data-theme="light"] .mobile-menu {
  background: rgba(240, 246, 251, 0.98);
}

html[data-theme="light"] .cta-section {
  background: #dce7f1;
}

html[data-theme="light"] .site-footer {
  background: #d2e0eb;
}

html[data-theme="light"] .tools-section {
  background: linear-gradient(180deg, var(--bg), var(--bg-soft));
}

html[data-theme="light"] .tool-content h3,
html[data-theme="light"] .tool-link {
  color: #0b2236;
}

html[data-theme="light"] .tool-link:hover {
  color: var(--primary);
}

html[data-theme="light"] .section-heading h2 span,
html[data-theme="light"] .why-copy h2 span {
  color: #365a72;
}

html[data-theme="light"] .orbit {
  border-color: rgba(6, 124, 156, 0.18);
}

html[data-theme="light"] .orbit-center {
  border-color: rgba(6, 124, 156, 0.35);
  box-shadow: 0 22px 55px rgba(25, 56, 78, 0.16);
}

html[data-theme="light"] .orbit-center strong,
html[data-theme="light"] .mini-card strong {
  color: #f6fbff;
}

html[data-theme="light"] .mini-card {
  border-color: rgba(6, 124, 156, 0.22);
  background: rgba(14, 37, 56, 0.94);
  box-shadow: 0 18px 38px rgba(25, 56, 78, 0.22);
}

html[data-theme="light"] .site-footer .brand-name,
html[data-theme="light"] .footer-column h3 {
  color: #0b2236;
}

html[data-theme="light"] .site-footer .brand-name span,
html[data-theme="light"] .footer-column a:hover {
  color: #067c9c;
}

html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-column a,
html[data-theme="light"] .footer-bottom {
  color: #3c5e76;
}

html[data-theme="light"] .footer-bottom {
  border-top-color: rgba(12, 43, 66, 0.16);
}


/* =========================================================
   ACCESSIBLE FEEDBACK WIDGET
========================================================= */

.feedback-open { overflow: hidden; }

/* Keep the optional form out of view until a user explicitly opens it. */
.feedback-modal-layer[hidden],
.feedback-modal-layer.hidden {
  display: none !important;
}

.feedback-launch {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid rgba(114, 230, 255, .35);
  border-radius: 999px;
  color: #f7fbff;
  background: rgba(9, 27, 43, .94);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease;
}

.feedback-launch:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 20px 55px rgba(0, 0, 0, .34); }
.feedback-launch span { color: var(--primary); font-size: 1rem; }
.feedback-launch strong { font-size: .78rem; letter-spacing: .02em; }

.feedback-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 9, 16, .74);
  backdrop-filter: blur(10px);
}

.feedback-dialog {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .42);
}

.feedback-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-soft);
  background: var(--surface-2);
  font-size: 1.25rem;
  cursor: pointer;
}

.feedback-heading { padding-right: 34px; }
.feedback-heading h2 { margin: 0 0 5px; font-size: clamp(1.28rem, 4vw, 1.55rem); line-height: 1.15; }
.feedback-heading p { margin: 0 0 12px; color: var(--text-soft); font-size: .78rem; line-height: 1.45; }
.feedback-rating { margin: 0 0 8px; padding: 0; border: 0; }
.feedback-rating legend, .feedback-field { color: var(--text-soft); font-size: .78rem; font-weight: 800; }
.feedback-stars { display: flex; gap: 6px; margin-top: 5px; }
.feedback-stars button { padding: 1px 2px; border: 0; color: var(--line-strong); background: transparent; font-size: 1.32rem; cursor: pointer; }
.feedback-stars button.is-active { color: #f5b942; }
.feedback-stars button:focus-visible, .feedback-close:focus-visible, .feedback-launch:focus-visible { outline: 3px solid rgba(114, 230, 255, .3); outline-offset: 3px; }
.feedback-field { position: relative; display: grid; gap: 5px; margin-bottom: 8px; }
.feedback-field small { color: var(--text-muted); font-weight: 500; }
.feedback-field input, .feedback-field select, .feedback-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--bg-soft);
  font: inherit;
  outline: none;
}
.feedback-field textarea { resize: vertical; min-height: 74px; }
.feedback-field input:focus, .feedback-field select:focus, .feedback-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(114, 230, 255, .11); }
.feedback-field > span { position: absolute; right: 9px; bottom: 7px; color: var(--text-muted); font-size: .65rem; font-weight: 500; }
.feedback-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.feedback-status { min-height: 16px; margin: 0 0 5px; color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.feedback-status.is-error { color: #d84a5d; }
.feedback-status.is-success { color: var(--green); }
.feedback-submit { width: 100%; justify-content: center; border: 0; }
.feedback-direct { margin: 12px 0 0; color: var(--text-muted); text-align: center; font-size: .7rem; }
.feedback-direct a { color: var(--primary); }

html[data-theme="light"] .feedback-launch {
  color: #f7fbff;
  background: rgba(11, 34, 52, .96);
  box-shadow: 0 16px 42px rgba(25, 56, 78, .24);
}

html[data-theme="light"] .feedback-dialog {
  background: #f8fbfd;
  box-shadow: 0 30px 90px rgba(25, 56, 78, .28);
}

@media (max-width: 600px) {
  .feedback-launch { right: 14px; bottom: 14px; }
  .feedback-launch { min-height: 42px; padding: 8px 12px; }
  .feedback-modal-layer { padding: 10px; }
  .feedback-dialog { width: min(100%, 420px); max-height: calc(100dvh - 20px); border-radius: 18px; padding: 17px 15px; scrollbar-gutter: auto; }
}


/* =========================================================
   SUBTLE PRODUCT MOTION
========================================================= */

@keyframes pixelOrigenRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pixelOrigenFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes pixelOrigenGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pixelOrigenGlowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(16px, -10px, 0) scale(1.05); }
}

/* Keep the first paint visually stable. The old staggered rise animation
   moved the entire hero for ~1 second and could look like load-time jitter on
   slower phones. Continuous decorative motion starts without shifting layout. */
.hero-copy > * {
  animation: none;
}

.hero-video-shell {
  animation: pixelOrigenFloat 6s 1.1s ease-in-out infinite;
}

.gradient-text {
  background-size: 210% 210%;
  animation: pixelOrigenGradient 7s ease-in-out infinite;
}

.hero-glow {
  animation: pixelOrigenGlowDrift 8s ease-in-out infinite;
}

.hero-glow-two { animation-delay: -3s; }

.tool-card,
.workflow-step,
.btn,
.theme-toggle {
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease),
    background-color 0.28s var(--ease),
    color 0.2s ease;
}

.workflow-step:hover {
  transform: translateY(-5px);
  border-color: rgba(114, 230, 255, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-video-shell,
  .gradient-text,
  .hero-glow {
    animation: none !important;
  }

  .tool-card,
  .workflow-step,
  .btn,
  .theme-toggle {
    transition-duration: 0.01ms !important;
  }
}


/* First-load paint containment. These sections are below the hero and do not
   need to be fully painted before the first viewport becomes interactive. */
.workflow-section,
.why-section,
.cta-section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}

@media (max-width: 700px) {
  .workflow-section,
  .why-section,
  .cta-section,
  .site-footer {
    contain-intrinsic-size: 1px 980px;
  }

  /* Blur-heavy glow animation is decorative; keeping it static on small
     screens avoids a needless GPU spike during the first second. */
  .hero-glow {
    animation: none !important;
  }
}

/* Authoritative device overrides: kept last to resolve legacy blocks above. */
@media (min-width: 901px) {
  .tool-card-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  }

  .tool-card-featured .tool-visual {
    height: 100%;
    min-height: 210px;
  }

  .tool-card-featured .tool-content {
    display: grid;
    align-content: center;
  }
}

html,
body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.nav-inner,
.nav-actions,
.hero-grid,
.tools-grid,
.workflow-grid,
.why-grid,
.footer-main,
.footer-bottom,
.tool-card,
.workflow-step {
  min-width: 0;
}

.tool-visual {
  height: 210px;
  min-height: 210px;
}

.tool-content {
  padding: 22px;
}

.footer-main > *,
.footer-bottom > *,
.workflow-step > * {
  min-width: 0;
  max-width: 100%;
}

.footer-main,
.footer-bottom,
.site-footer nav {
  overflow-wrap: anywhere;
}

@media (min-width: 721px) and (max-width: 900px) {
  .tools-section > .container {
    width: min(860px, calc(100% - 32px));
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .tool-card-featured {
    grid-column: auto;
  }

  .tool-visual {
    height: 180px;
    min-height: 180px;
  }

  .tool-content {
    padding: 18px;
  }

  .tool-content h3 {
    font-size: 18px;
  }

  .tool-content p {
    margin-bottom: 15px;
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .section {
    padding-block: 64px;
  }

  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-card-featured {
    grid-column: auto;
  }

  .tool-visual {
    height: 165px;
    min-height: 165px;
    padding: 10px;
  }

  .tool-content {
    padding: 17px;
  }

  .tool-content h3 {
    margin-bottom: 6px;
    font-size: 18px;
  }

  .tool-content p {
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.55;
  }

  .workflow-step {
    padding: 10px 10px 18px;
    border-radius: 18px;
  }

  .workflow-image {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
  }

  .why-visual {
    min-height: 280px;
  }

  .footer-main,
  .footer-bottom,
  .footer-links {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .section {
    padding-block: 52px;
  }

  .tool-visual {
    height: 145px;
    min-height: 145px;
  }

  .tool-content {
    padding: 15px;
  }

  .tool-content h3 {
    font-size: 17px;
  }

  .tool-content p {
    font-size: 12px;
  }

  .tool-visual > .tool-badge {
    top: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px);
  }

  .why-visual {
    min-height: 245px;
  }
}

/* Authoritative mobile hero parity: complete copy first, centered desktop visual second. */
@media (max-width: 600px) {
  .hero {
    align-items: flex-start;
    padding: calc(var(--header-height) + 36px) 0 58px;
  }

  .hero-grid { gap: 32px; }

  .hero .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-copy > * { animation: none; }

  .hero-copy {
    display: grid;
    justify-items: start;
    text-align: left;
  }

  .hero-copy .eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    white-space: normal;
  }

  .hero h1 {
    display: block;
    margin-bottom: 18px;
    font-size: clamp(36px, 10.8vw, 48px);
    line-height: 1.06;
  }

  .hero-description {
    display: block;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
  }

  .hero-actions {
    align-items: stretch;
    width: 100%;
    margin-inline: 0;
  }

  .hero-actions .btn { width: 100%; }

  .hero-trust {
    justify-content: start;
    width: 100%;
    margin-top: 20px;
  }

  .hero-visual,
  .hero-video-shell {
    width: 100%;
    margin-inline: auto;
  }

  .hero-video-wrap { aspect-ratio: 16 / 10; }
}

/* PDF tool card visuals reuse the existing PixelOrigen tool-card design system. */
.pdf-converter-visual,
.pdf-editor-visual {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 30%, rgba(114, 230, 255, .14), transparent 32%),
    radial-gradient(circle at 78% 72%, rgba(140, 124, 255, .15), transparent 34%),
    linear-gradient(145deg, rgba(8, 27, 44, .96), rgba(6, 19, 34, .96));
}
.pdf-card-sheet,
.pdf-editor-sheet {
  position: absolute;
  width: 112px;
  height: 144px;
  border: 1px solid rgba(114, 230, 255, .24);
  border-radius: 12px;
  box-shadow: 0 18px 35px rgba(0,0,0,.25);
}
.pdf-card-sheet-back {
  left: 26%;
  top: 24%;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: linear-gradient(145deg, rgba(23, 65, 91, .86), rgba(11, 31, 51, .96));
  transform: rotate(-8deg);
  font-size: .76rem;
  font-weight: 900;
}
.pdf-card-sheet-front {
  left: 47%;
  top: 16%;
  padding: 22px 16px;
  color: #092033;
  background: linear-gradient(155deg, #f7fdff, #dcebf5);
  transform: rotate(5deg);
}
.pdf-card-sheet-front strong { display: block; color: #137493; font-size: 1.1rem; }
.pdf-card-sheet-front i { display: block; height: 4px; margin-top: 13px; border-radius: 999px; background: rgba(16, 78, 108, .22); }
.pdf-card-sheet-front i:nth-of-type(2) { width: 78%; }
.pdf-card-sheet-front i:nth-of-type(3) { width: 58%; }
.pdf-card-arrow {
  position: absolute;
  left: 42%;
  bottom: 17%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #06101d;
  background: var(--primary);
  box-shadow: 0 12px 30px rgba(114, 230, 255, .25);
  font-size: 1.1rem;
  font-weight: 900;
}
.pdf-editor-sheet {
  left: 34%;
  top: 16%;
  padding: 22px 17px;
  background: linear-gradient(155deg, #f8fdff, #dcecf6);
  transform: rotate(-3deg);
}
.pdf-editor-sheet b { color: #147594; font-size: .9rem; }
.pdf-editor-sheet span { display: block; height: 4px; margin-top: 13px; border-radius: 999px; background: rgba(16, 78, 108, .19); }
.pdf-editor-sheet span:nth-child(2) { width: 78%; }
.pdf-editor-sheet span:nth-child(3) { width: 58%; }
.pdf-editor-pen {
  position: absolute;
  left: 57%;
  top: 51%;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(114,230,255,.28);
  border-radius: 22px;
  color: var(--primary);
  background: rgba(6, 26, 44, .9);
  box-shadow: 0 16px 35px rgba(0,0,0,.28);
  font-size: 1.7rem;
  transform: rotate(8deg);
}
html[data-theme="light"] .pdf-converter-visual,
html[data-theme="light"] .pdf-editor-visual {
  background:
    radial-gradient(circle at 28% 30%, rgba(14, 135, 168, .1), transparent 32%),
    linear-gradient(145deg, #e4f0f7, #d2e3ee);
}

/* =========================================================
   v44 — FOCUSED HOME TOOL DISCOVERY
   Show three primary tools first; reveal the full toolkit only
   when the user asks for it. Mobile stays single-column.
========================================================= */

.tools-grid [hidden] {
  display: none !important;
}

.tools-more-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}

.tools-more-btn {
  min-width: 180px;
  min-height: 48px;
  gap: 10px;
  border-radius: 14px;
}

.tools-more-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(114, 230, 255, .08);
  transition: transform .18s ease;
}

.tools-more-btn[aria-expanded="true"] .tools-more-icon {
  transform: translateY(-1px);
}

/* Equal visual weight for the three default choices. */
.tools-grid-collapsed .home-featured-tool {
  grid-column: auto;
}

@media (min-width: 1101px) {
  .tools-grid-collapsed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .tools-grid-collapsed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-grid-collapsed .home-featured-tool:last-of-type {
    grid-column: 1 / -1;
    width: min(100%, 620px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .tools-grid-collapsed,
  .tools-grid-expanded {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-more-wrap {
    margin-top: 18px;
  }

  .tools-more-btn {
    width: 100%;
    max-width: 420px;
    min-height: 50px;
  }
}

/* In the compact three-card home row, the supplied tool artwork already
   contains the visual story; hide legacy decorative overlays that would
   otherwise crowd or clip at the narrower card width. */
.tools-grid-collapsed [data-tool="target-size"] .target-circle,
.tools-grid-collapsed [data-tool="target-size"] .target-arrow,
.tools-grid-collapsed [data-tool="compressor"] .compression-bars,
.tools-grid-collapsed [data-tool="compressor"] .size-pill {
  display: none !important;
}


/* v49 — homepage copy: preserve existing visual system while accommodating longer privacy messaging. */
.hero-supporting {
  max-width: 650px;
  margin: -8px 0 22px;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.7;
}
.hero-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-width: 690px;
}
.hero-benefits > div {
  align-items: flex-start;
  line-height: 1.5;
}
.footer-credit-link { color: var(--text-soft); font-weight: 750; }
.footer-credit-link:hover { color: var(--primary); }
@media (max-width: 600px) {
  .hero-supporting {
    width: 100%;
    max-width: 100%;
    margin-top: -6px;
    margin-bottom: 22px;
    font-size: 13px;
    line-height: 1.65;
  }
  .hero-benefits {
    width: 100%;
    max-width: 100%;
    gap: 9px;
  }
  .hero-benefits > div {
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
}


/* Privacy verification note — statement is specifically about image data, not all network requests. */
.hero-network-proof {
  max-width: 690px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .hero-network-proof {
    width: 100%;
    max-width: 100%;
    font-size: 11.5px;
  }
}


/* =========================================================
   v50 — HOME TRUST CARD, LIGHT HERO CONTRAST & MORE TOOLS MOTION
   UI-only. Processing behavior is intentionally untouched.
========================================================= */

/* Present the privacy benefits as compact cards beside the existing
   PixelOrigen orbit visual, matching the earlier landing-page treatment. */
.why-list {
  gap: 14px;
}

.why-item {
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(114, 230, 255, 0.09);
  border-radius: 14px;
  background: rgba(114, 230, 255, 0.025);
}

.why-item > span {
  flex: 0 0 auto;
}

.why-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.why-item p {
  margin-top: 4px;
  line-height: 1.55;
}

/* The hero shell stays dark, but its copy must remain readable when the
   global theme switches to light. Explicit contrast avoids inherited or
   animated text colors becoming too pale/transparent. */
html[data-theme="light"] .hero h1 {
  color: #0b2236 !important;
}

html[data-theme="light"] .hero-description,
html[data-theme="light"] .hero-supporting,
html[data-theme="light"] .hero-network-proof {
  color: #2d4d65 !important;
}

html[data-theme="light"] .gradient-text {
  background-image: linear-gradient(110deg, #075f7c 5%, #0789aa 45%, #6755d8 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text,
  html[data-theme="light"] .gradient-text {
    background: none;
    color: var(--primary);
    -webkit-text-fill-color: currentColor;
  }
}

html[data-theme="light"] .why-item {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(12, 43, 66, 0.12);
}

/* More Tools reveal: cards become visible first, then animate into place.
   A small stagger preserves responsiveness without slowing interaction. */
.home-extra-tool.more-tool-enter {
  animation: pixelOrigenMoreToolIn 320ms ease-out both;
}

@keyframes pixelOrigenMoreToolIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tools-more-icon {
  display: inline-block;
  transition: transform 220ms var(--ease);
}

.tools-more-btn[aria-expanded="true"] .tools-more-icon {
  transform: rotate(180deg);
}

@media (max-width: 600px) {
  .why-list {
    gap: 10px;
  }

  .why-item {
    padding: 11px 12px;
  }

  .why-item strong {
    font-size: 12.5px;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-extra-tool.more-tool-enter {
    animation: none !important;
  }
  .tools-more-icon {
    transition: none !important;
  }
}

/* =========================================================
   v51 — HERO LIGHT CONTRAST + BENEFIT PLACEMENT
   Benefits live in the existing Why PixelOrigen section, not in the hero.
========================================================= */
html[data-theme="light"] .hero-copy {
  color: #0b2236;
}

html[data-theme="light"] .hero-copy h1,
html[data-theme="light"] .hero-copy .hero-description,
html[data-theme="light"] .hero-copy .hero-supporting,
html[data-theme="light"] .hero-copy .hero-network-proof {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .hero-copy h1 {
  color: #0b2236 !important;
}

html[data-theme="light"] .hero-copy .hero-description,
html[data-theme="light"] .hero-copy .hero-supporting {
  color: #29485f !important;
}

html[data-theme="light"] .hero-copy .hero-network-proof {
  color: #24465f !important;
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(7, 137, 170, 0.25);
}

html[data-theme="light"] .hero-copy .eyebrow {
  color: #075f7c !important;
}


/* =========================================================
   v53 — MOBILE-SAFE LIGHT HERO CONTRAST
   Some mobile WebKit/Chromium variants can report support for
   background-clip:text while failing to paint the transparent
   gradient text. In light mode use a solid branded foreground so
   the hero can never disappear. Dark mode keeps the gradient.
========================================================= */
html[data-theme="light"] .hero .hero-copy,
html[data-theme="light"] .hero .hero-copy h1 {
  color: #0b2236 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .hero .gradient-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #087ea4 !important;
  -webkit-text-fill-color: #087ea4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="light"] .hero .eyebrow {
  color: #075f7c !important;
}

html[data-theme="light"] .hero .hero-description,
html[data-theme="light"] .hero .hero-supporting {
  color: #29485f !important;
  opacity: 1 !important;
}

html[data-theme="light"] .hero .hero-network-proof {
  color: #173e56 !important;
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(7,126,164,.28) !important;
  opacity: 1 !important;
}


/* =========================================================
   v54 — LIGHT THEME CONTRAST FOR DARK HERO VISUAL
   The video shell and floating cards intentionally stay dark in both themes,
   so their internal copy must not inherit light-theme dark text tokens.
========================================================= */
html[data-theme="light"] .hero-video-shell .video-topbar {
  color: #9fb0c1 !important;
}

html[data-theme="light"] .hero-video-shell .video-caption {
  color: #9fb0c1 !important;
}

html[data-theme="light"] .hero-video-shell .video-caption strong {
  color: #f7fbff !important;
}

html[data-theme="light"] .hero-video-shell .caption-arrow,
html[data-theme="light"] .hero-video-shell .live-indicator {
  color: #72e6ff !important;
}

html[data-theme="light"] .floating-card {
  color: #f7fbff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(11, 27, 43, 0.92) !important;
}

html[data-theme="light"] .floating-card strong {
  color: #f7fbff !important;
}

html[data-theme="light"] .floating-card small {
  color: #aebdcb !important;
}

html[data-theme="light"] .floating-card .floating-icon {
  color: #72e6ff !important;
  background: rgba(114, 230, 255, 0.12) !important;
}

html[data-theme="light"] .processing-pill {
  color: #ffffff !important;
}

/* =========================================================
   v55 — MOBILE DECORATIVE CARDS + FIRST-PAINT STABILITY
   Keep desktop visual details on phones without clipping them,
   and remove the one-second hero entrance/layout wobble.
========================================================= */

@media (max-width: 768px) {
  /* The hero reveal is already decorative. On mobile render it in its
     final position immediately so the page does not visibly jump after load. */
  .hero-visual.reveal,
  .hero-visual.reveal-delay {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-video-shell {
    /* Keep the box dimensionally stable, but do not kill transform-only
       decorative motion on phones. The mobile animation below uses only
       transform, so surrounding content does not reflow. */
    transition: none !important;
  }

  /* Keep the media box dimensionally stable before/after video metadata loads.
     This overrides the legacy mobile-safe rule that changed the video to
     height:auto and could visually resize the first frame. */
  .hero-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    contain: layout paint;
  }

  .hero-video,
  .hero-video video {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: none !important;
    animation: none !important;
  }

  /* Desktop floating details stay visible on mobile, but are kept fully
     inside the hero visual so they cannot create horizontal overflow. */
  .hero-visual {
    padding-block: 14px;
    overflow: visible;
  }

  .floating-card {
    display: flex;
    max-width: calc(100% - 24px);
    padding: 8px 10px;
    gap: 7px;
    border-radius: 12px;
    pointer-events: none;
  }

  .floating-card-one {
    left: 8px;
    top: 0;
  }

  .floating-card-two {
    right: 8px;
    bottom: 0;
  }

  .floating-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12px;
  }

  .floating-card strong {
    font-size: 10px;
    line-height: 1.2;
  }

  .floating-card small {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.2;
  }

  /* Keep IMG INPUT / RESULT visible on phone layouts too. */
  .why-visual {
    overflow: hidden;
  }

  .mini-card {
    display: flex;
    align-items: center;
    z-index: 4;
    max-width: calc(100% - 20px);
    padding: 8px 10px;
    border-radius: 11px;
    pointer-events: none;
  }

  .mini-card-top {
    top: 18px;
    right: 10px;
  }

  .mini-card-bottom {
    bottom: 18px;
    left: 10px;
  }

  .mini-card span,
  .mini-card strong {
    font-size: 9px;
    line-height: 1.2;
  }
}

@media (max-width: 420px) {
  /* Explicitly override the old .mini-card { display:none; } phone rule. */
  .mini-card {
    display: flex;
    padding: 7px 9px;
  }

  .mini-card-top {
    top: 12px;
    right: 6px;
  }

  .mini-card-bottom {
    bottom: 12px;
    left: 6px;
  }

  .floating-card {
    max-width: calc(100% - 16px);
    padding: 7px 9px;
  }

  .floating-card-one {
    left: 4px;
  }

  .floating-card-two {
    right: 4px;
  }

  .floating-card strong {
    font-size: 9.5px;
  }

  .floating-card small {
    font-size: 7.5px;
  }
}



/* =========================================================
   v61 — MOBILE HERO MOTION PARITY
   Re-enable the desktop-style visual motion on phones without
   moving document layout. Only transforms/opacity are animated.
========================================================= */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-video-shell {
    animation: pixelOrigenFloatMobile 5.8s ease-in-out infinite !important;
    will-change: transform;
  }

  .floating-card {
    animation: cardFloatMobile 4.8s ease-in-out infinite !important;
    will-change: transform;
  }

  .floating-card-two {
    animation-delay: -2.2s !important;
  }

  .processing-pill span {
    animation: processingDotPulseMobile 1.5s ease-in-out infinite;
  }
}

@keyframes pixelOrigenFloatMobile {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@keyframes cardFloatMobile {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes processingDotPulseMobile {
  0%, 100% { opacity: .68; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* =========================================================
   v56 — IMAGE TO TEXT TOOL CARD
========================================================= */
.image-to-text-visual{position:relative;overflow:hidden;background:radial-gradient(circle at 25% 24%,rgba(114,230,255,.16),transparent 34%),radial-gradient(circle at 78% 75%,rgba(124,108,255,.18),transparent 32%),linear-gradient(145deg,rgba(8,27,44,.98),rgba(5,17,31,.98))}
.ocr-card-sheet{position:absolute;left:29%;top:14%;width:126px;height:158px;padding:24px 18px;border:1px solid rgba(114,230,255,.26);border-radius:14px;background:linear-gradient(155deg,#fbfdff,#dceaf3);box-shadow:0 20px 42px rgba(0,0,0,.28);transform:rotate(-3deg)}
.ocr-card-sheet span{display:block;height:5px;margin-top:13px;border-radius:999px;background:rgba(12,76,108,.2)}
.ocr-card-sheet span:nth-child(1){width:62%;margin-top:0;height:8px;background:#1688aa}.ocr-card-sheet span:nth-child(2){width:88%}.ocr-card-sheet span:nth-child(3){width:75%}.ocr-card-sheet span:nth-child(4){width:92%}.ocr-card-sheet span:nth-child(5){width:58%}
.ocr-scan-beam{position:absolute;left:22%;right:20%;top:49%;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 20px rgba(114,230,255,.75)}
.ocr-text-chip{position:absolute;right:16%;bottom:20%;padding:10px 13px;border:1px solid rgba(114,230,255,.3);border-radius:12px;color:var(--primary);background:rgba(5,20,34,.92);box-shadow:0 12px 28px rgba(0,0,0,.3);font-size:.74rem;font-weight:900;letter-spacing:.04em}
html[data-theme="light"] .image-to-text-visual{background:radial-gradient(circle at 25% 24%,rgba(14,135,168,.1),transparent 34%),linear-gradient(145deg,#e6f1f7,#d4e4ee)}
@media(max-width:520px){.ocr-card-sheet{left:27%;top:16%;width:112px;height:142px}.ocr-text-chip{right:11%;bottom:18%}}



/* =========================================================
   INSTALL APP CTA
   Contextual only: hidden until the browser exposes installability.
========================================================= */
.pwa-install-btn[hidden],
.mobile-install-action[hidden] { display: none !important; }
.pwa-install-btn { white-space: nowrap; }
.mobile-install-action {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 13px 16px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.mobile-install-action:hover,
.mobile-install-action:focus-visible { background: rgba(114,230,255,.07); outline: none; }
.pwa-install-help {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,8,14,.72);
  backdrop-filter: blur(10px);
}
.pwa-install-help.hidden { display: none !important; }
.pwa-install-help-card {
  position: relative;
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-strong, #0b1726);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  color: var(--text);
}
.pwa-install-help-card h2 { margin: 8px 0 8px; font-size: 1.45rem; }
.pwa-install-help-card p,
.pwa-install-help-card li { color: var(--text-soft); line-height: 1.6; font-size: .84rem; }
.pwa-install-help-card ol { margin: 16px 0 22px; padding-left: 22px; }
.pwa-install-help-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(114,230,255,.25), rgba(140,124,255,.25));
  color: var(--primary); font-weight: 900; font-size: 1.35rem;
}
.pwa-install-help-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent;
  color: var(--text); font-size: 1.35rem; cursor: pointer;
}
html[data-theme="light"] .pwa-install-help-card { background: #fff; }
@media (max-width: 768px) {
  .nav-actions > .pwa-install-btn { display: none !important; }
}



/* =========================================================
   HERO TYPEWRITER HEADING — ORIGINAL PARTIAL GRADIENT + STABLE LAYOUT
   The plain prefix keeps the original heading color. The accent span uses
   the existing .gradient-text rules, including the existing light theme.
========================================================= */

.hero-typewriter-heading {
  position: relative;
}

.hero-typewriter-heading #hero-typewriter-text,
.hero-typewriter-heading .hero-typewriter-plain,
.hero-typewriter-heading .hero-typewriter-accent {
  display: inline;
}

.hero-typewriter-heading .hero-typewriter-plain {
  color: inherit;
}

.hero-typewriter-measure {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100% - 8px);
  visibility: hidden;
  pointer-events: none;
  white-space: normal;
  color: transparent;
}



/* ========================================================================== */
/* v63 — denser tool discovery grid                                            */
/* Inspiration: compact, scannable all-tools collections used by major PDF    */
/* utilities. No tool routes/cards are removed.                                */
/* ========================================================================== */

/* Full toolkit: 5 columns on wide desktop, 4 on normal desktop, 3 on tablet,
   and 2 on phones. The three-featured collapsed state keeps its product
   hierarchy on desktop but becomes 2 columns on mobile. */
@media (min-width: 1440px) {
  .tools-grid.tools-grid-expanded {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .tools-grid.tools-grid-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .tools-grid.tools-grid-expanded {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
  .tools-grid.tools-grid-collapsed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .tools-grid.tools-grid-collapsed .home-featured-tool:last-of-type {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
}
@media (max-width: 760px) {
  .tools-grid.tools-grid-collapsed,
  .tools-grid.tools-grid-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .tools-section > .container {
    width: min(calc(100% - 20px), 720px) !important;
  }

  .tools-grid .tool-card {
    min-width: 0 !important;
    border-radius: 16px !important;
  }
  .tools-grid .tool-visual {
    height: 108px !important;
    min-height: 108px !important;
    padding: 7px !important;
  }
  .tools-grid .tool-content {
    padding: 11px !important;
  }
  .tools-grid .tool-number {
    margin-bottom: 5px !important;
    font-size: .56rem !important;
  }
  .tools-grid .tool-content h3 {
    display: -webkit-box;
    min-height: 2.5em;
    margin: 0 0 5px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }
  .tools-grid .tool-content p {
    display: -webkit-box;
    min-height: 2.7em;
    margin: 0 0 8px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text-muted);
    font-size: .62rem !important;
    line-height: 1.35 !important;
  }
  .tools-grid .tool-link {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }
  .tools-grid .tool-link::before {
    content: "Open";
    font-size: .67rem;
    font-weight: 850;
  }
  .tools-grid .tool-link span {
    font-size: .7rem !important;
  }
  .tools-grid .tool-visual > .tool-badge {
    top: 6px !important;
    right: 6px !important;
    max-width: calc(100% - 12px) !important;
    padding: 4px 6px !important;
    font-size: .49rem !important;
  }
}

@media (max-width: 360px) {
  .tools-section > .container {
    width: calc(100% - 14px) !important;
  }
  .tools-grid.tools-grid-collapsed,
  .tools-grid.tools-grid-expanded {
    gap: 8px !important;
  }
  .tools-grid .tool-visual {
    height: 96px !important;
    min-height: 96px !important;
  }
  .tools-grid .tool-content {
    padding: 9px !important;
  }
  .tools-grid .tool-content h3 {
    font-size: .76rem !important;
  }
  .tools-grid .tool-content p {
    font-size: .57rem !important;
  }
}

/* Expanded desktop cards are intentionally denser than the original two-column
   marketing layout so users can scan tools quickly without excessive scroll. */
@media (min-width: 761px) {
  .tools-grid.tools-grid-expanded .tool-card {
    border-radius: 18px !important;
  }
  .tools-grid.tools-grid-expanded .tool-visual {
    height: 128px !important;
    min-height: 128px !important;
  }
  .tools-grid.tools-grid-expanded .tool-content {
    padding: 14px !important;
  }
  .tools-grid.tools-grid-expanded .tool-content h3 {
    margin-bottom: 5px !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }
  .tools-grid.tools-grid-expanded .tool-content p {
    display: -webkit-box;
    min-height: 2.7em;
    margin-bottom: 10px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .65rem !important;
    line-height: 1.35 !important;
  }
  .tools-grid.tools-grid-expanded .tool-link {
    min-height: 38px !important;
    padding: 7px 10px !important;
    font-size: .65rem !important;
  }
}

/* ========================================================================== */
/* v64 — category-first dense tool discovery                                  */
/* Inspired by major PDF utility tool collections: compact filters + scanable */
/* grids. Routes and tool behavior are unchanged.                             */
/* ========================================================================== */

.tool-category-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 18px;
  padding: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tool-category-filter::-webkit-scrollbar { display: none; }
.tool-category-chip {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.tool-category-chip:hover,
.tool-category-chip:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  color: var(--text);
}
.tool-category-chip:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent),
    0 8px 22px rgba(91, 177, 255, .16);
}
.tool-category-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 54%, transparent);
  color: #06101d;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 22px rgba(91, 177, 255, .16);
}
html[data-theme="light"] .tool-category-chip {
  color: #36536a;
  background: rgba(255,255,255,.78);
  border-color: rgba(52,94,121,.18);
}
html[data-theme="light"] .tool-category-chip.is-active,
html[data-theme="light"] .tool-category-chip[aria-selected="true"] {
  color: #071728;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: color-mix(in srgb, var(--primary) 62%, rgba(36, 86, 120, .28));
  box-shadow:
    0 8px 22px rgba(40, 145, 207, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .34);
}

/* Android/WebView must not paint a rectangular native tap box around these
   pill controls. Keyboard users keep the rounded focus ring above. */
@media (hover: none), (pointer: coarse) {
  .tool-category-chip:focus,
  .tool-category-chip:focus-visible { outline: 0; }
}

/* Make the actual grid rule independent of expanded/collapsed state so old
   cached class state cannot fall back to the historical two-column desktop. */
#tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#tools-grid .tool-card,
#tools-grid .home-featured-tool,
#tools-grid .home-extra-tool {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

@media (min-width: 1440px) {
  #tools-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  #tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  #tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .tool-category-filter { margin-bottom: 12px; gap: 6px; padding-inline: 0; }
  .tool-category-chip { min-height: 40px; padding-inline: 12px; font-size: .66rem; }
}
@media (max-width: 340px) {
  #tools-grid { gap: 8px !important; }
  .tool-category-chip { padding-inline: 10px; }
}

/* Category views already provide intentional filtering, so the cards stay
   compact even when the historical More Tools state is not involved. */
#tools-grid[data-active-category]:not([data-active-category="all"]) .tool-card {
  border-radius: 18px !important;
}
@media (min-width: 761px) {
  #tools-grid[data-active-category]:not([data-active-category="all"]) .tool-visual {
    height: 128px !important;
    min-height: 128px !important;
  }
  #tools-grid[data-active-category]:not([data-active-category="all"]) .tool-content {
    padding: 14px !important;
  }
  #tools-grid[data-active-category]:not([data-active-category="all"]) .tool-content h3 {
    margin-bottom: 5px !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }
  #tools-grid[data-active-category]:not([data-active-category="all"]) .tool-content p {
    display: -webkit-box;
    min-height: 2.7em;
    margin-bottom: 10px !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .65rem !important;
    line-height: 1.35 !important;
  }
}


/* ========================================================================== */
/* v65 — five-tool landing start                                               */
/* Five high-value everyday tools are visible before More Tools. The same      */
/* responsive density is preserved: 2 phone / 3 tablet / 4 desktop / 5 wide. */
/* ========================================================================== */

@media (min-width: 1440px) {
  .tools-section > .container {
    width: min(calc(100% - 48px), 1400px) !important;
  }
  #tools-grid.tools-grid-collapsed {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  #tools-grid.tools-grid-collapsed {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  #tools-grid.tools-grid-collapsed {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #tools-grid.tools-grid-collapsed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ========================================================================== */
/* v66 — category views never show More Tools / Show Less                    */
/* Author display rules can override the browser's default [hidden] rule,    */
/* so enforce it explicitly for this control.                                 */
/* ========================================================================== */
.tools-more-wrap[hidden],
.tools-more-btn[hidden] {
  display: none !important;
}


/* ========================================================================== */
/* v67 — balanced collapsed landing on phones                                 */
/* Keep five featured tools on larger screens, but show four in the collapsed */
/* two-column phone grid so a fifth card never sits alone on its own row.      */
/* The PDF Converter remains available immediately after More Tools expands.   */
/* ========================================================================== */
@media (max-width: 760px) {
  #tools-grid.tools-grid-collapsed[data-active-category="all"]
  .home-featured-tool[data-tool="pdf-converter"] {
    display: none !important;
  }
}

/* =========================================================
   v68 — MOBILE SCROLL PERFORMANCE PROFILE
   Reduce scroll-time compositing/late-paint work on phones and tablets.
   Desktop visual motion is preserved. No tool processing logic is affected.
========================================================= */
@media (max-width: 900px) {
  /* Touch scrolling should move only the document, not trigger long reveal
     transforms on every section as it enters the viewport. */
  .reveal,
  .reveal.is-visible,
  .hero-visual.reveal,
  .hero-visual.reveal-delay {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-extra-tool.more-tool-enter {
    animation: none !important;
  }

  /* content-visibility is valuable on desktop, but on shorter mobile pages the
     late activation of cards/sections can feel like a small scroll hitch. */
  .tool-card,
  .workflow-section,
  .why-section,
  .cta-section,
  .site-footer {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  /* Fixed translucent blur layers are expensive to continuously composite over
     moving page content on mid-range Android GPUs. Use visually equivalent
     opaque surfaces on mobile instead. */
  .site-header,
  .site-header.scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .14s ease, border-color .14s ease !important;
  }

  .site-header.scrolled {
    background: #06101d !important;
  }

  html[data-theme="light"] .site-header.scrolled {
    background: #f4f8fc !important;
  }

  .feedback-launch {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #091b2b !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22) !important;
  }

  html[data-theme="light"] .feedback-launch {
    color: #0b2235 !important;
    background: #ffffff !important;
    border-color: rgba(12, 43, 66, .18) !important;
    box-shadow: 0 8px 22px rgba(25, 56, 78, .14) !important;
  }

  html[data-theme="light"] .feedback-launch strong {
    color: #0b2235 !important;
  }

  /* Decorative motion is kept on desktop. On mobile it competes with scroll
     compositing and provides little task value. */
  .hero-video-shell,
  .floating-card,
  .processing-pill span,
  .gradient-text,
  .pixel-field span,
  .pixel-orbit .orbit,
  .mini-card,
  .mini-card span,
  .mini-card strong {
    animation: none !important;
    will-change: auto !important;
  }

  .hero-glow {
    animation: none !important;
    will-change: auto !important;
  }

  /* Glass badges move through the viewport with every tool card. Replace blur
     with a slightly more opaque fill on mobile to avoid per-card backdrop work. */
  .tool-visual.has-tool-image .tool-badge,
  .image-to-text-visual.has-tool-image .ocr-text-chip,
  .mini-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(4, 16, 28, .94) !important;
  }

  .tool-image {
    transition: none !important;
  }

  .tool-card:hover .tool-image {
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   v70 — MOBILE: KEEP ONLY TWO HIGH-VALUE VISUAL MOTIONS
   The v68 mobile profile intentionally disables decorative animation for
   smooth scrolling. Re-enable only the two user-facing motion groups that
   communicate the product flow:
     1) Hero "Smart tools" / "Ready to export" cards
     2) Why visual INPUT / RESULT cards + the PO orbit rings
   These animations are transform-only and stay compositor-friendly. All
   other mobile decorative motion remains disabled by v68.
========================================================= */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .floating-card {
    animation: cardFloatMobile 5.2s ease-in-out infinite !important;
    will-change: transform !important;
    backface-visibility: hidden;
  }

  .floating-card-two {
    animation-delay: -2.6s !important;
  }

  .pixel-orbit .orbit-one {
    animation: pixelorigenOrbitOne 18s linear infinite !important;
    will-change: transform !important;
    backface-visibility: hidden;
  }

  .pixel-orbit .orbit-two {
    animation: pixelorigenOrbitTwo 22s linear infinite reverse !important;
    will-change: transform !important;
    backface-visibility: hidden;
  }

  .mini-card-top {
    animation: pixelorigenInputFloatMobile 5.4s ease-in-out infinite !important;
    will-change: transform !important;
    backface-visibility: hidden;
  }

  .mini-card-bottom {
    animation: pixelorigenResultFloatMobile 5.4s ease-in-out infinite -2.7s !important;
    will-change: transform !important;
    backface-visibility: hidden;
  }
}

/* v72 — task-first privacy hero with compact mobile actions */
.hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr)!important;
  gap:clamp(30px,4.5vw,68px)!important;
  align-items:center!important;
}
.hero-copy{max-width:690px}
.hero h1{
  max-width:690px!important;
  margin-bottom:18px!important;
  font-size:clamp(2.65rem,5.2vw,4.65rem)!important;
  line-height:1.01!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}
.hero h1 .gradient-text{display:block}
.hero-description{
  max-width:650px!important;
  margin-bottom:12px!important;
  font-size:clamp(.94rem,1.25vw,1.08rem)!important;
  line-height:1.65!important;
}
.hero-supporting{
  max-width:610px!important;
  margin:0 0 22px!important;
  color:var(--text-muted)!important;
  font-size:.82rem!important;
  line-height:1.6!important;
}
.hero-actions{gap:10px!important;margin:0!important}
.hero-actions .btn{
  width:auto!important;
  min-height:46px!important;
  padding:10px 16px!important;
  border-radius:12px!important;
  font-size:.76rem!important;
  line-height:1.1!important;
}
.hero-actions .btn-secondary{
  border-color:color-mix(in srgb,var(--line) 82%,var(--primary) 18%)!important;
  background:color-mix(in srgb,var(--panel) 72%,transparent)!important;
}
.hero-proof-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.hero-proof-row span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--line) 84%,var(--primary) 16%);
  border-radius:999px;
  color:var(--text-soft);
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  font-size:.63rem;
  font-weight:800;
  white-space:nowrap;
}
.hero-video-shell{max-width:620px;margin-inline:auto}

@media(max-width:900px){
  .hero{min-height:auto!important;padding-bottom:50px!important}
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  .hero-copy{max-width:720px}
  .hero-visual{max-width:680px;margin-inline:auto}
  .floating-card{animation:none!important;will-change:auto!important}
}

@media(max-width:600px){
  .hero{padding:calc(var(--header-height) + 24px) 0 42px!important}
  .hero-grid{gap:22px!important}
  .hero-copy .eyebrow{margin-bottom:13px!important;font-size:.58rem!important}
  .hero h1{
    margin-bottom:14px!important;
    font-size:clamp(2.12rem,10.5vw,2.85rem)!important;
    line-height:1.04!important;
    letter-spacing:-.045em!important;
  }
  .hero-description{margin-bottom:9px!important;font-size:.82rem!important;line-height:1.55!important}
  .hero-supporting{margin-bottom:16px!important;font-size:.7rem!important;line-height:1.5!important}
  .hero-actions{display:flex!important;align-items:center!important;flex-direction:column!important;gap:7px!important;width:100%!important}
  .hero-actions .btn{min-height:44px!important;max-width:100%!important;padding:9px 14px!important;font-size:.71rem!important}
  .hero-actions .btn-primary{width:min(100%,252px)!important}
  .hero-actions .btn-secondary{width:auto!important;min-height:40px!important;padding:7px 10px!important;border-color:transparent!important;background:transparent!important}
  .hero-proof-row{gap:5px;margin-top:12px}
  .hero-proof-row span{min-height:28px;padding:5px 7px;font-size:.55rem}
  .hero-visual{padding-block:8px!important}
  .hero-video-shell{border-radius:16px!important}
}

@media(max-width:350px){
  .hero h1{font-size:2rem!important}
  .hero-proof-row span{font-size:.52rem}
}

@media(prefers-reduced-motion:reduce){
  .hero-video,.floating-card,.hero-glow{animation:none!important;transition:none!important}
}

/* v74 — lightweight interactive product hero */
.hero-grid{grid-template-areas:"copy visual" "proof visual";grid-template-rows:auto auto;row-gap:0!important}
.hero-copy{grid-area:copy;align-self:end}
.hero-visual{grid-area:visual}
.hero-proof-row{grid-area:proof;align-self:start}
.hero-product-demo{
  position:relative;
  width:min(100%,620px);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 72%,var(--primary) 28%);
  border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 97%,var(--primary) 3%),color-mix(in srgb,var(--panel) 94%,#6f64ff 6%));
  box-shadow:0 30px 80px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.08) inset;
  isolation:isolate;
}
.hero-product-demo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-40% 32% 40% -30%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 20%,transparent),transparent 70%);
  pointer-events:none;
}
.hero-demo-topbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:9px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  color:var(--text-soft);
  font-size:.68rem;
  font-weight:800;
}
.hero-demo-topbar .window-dots{display:flex;gap:5px}
.hero-demo-topbar .window-dots i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--text-muted) 45%,transparent)}
.hero-demo-topbar .window-dots i:first-child{background:#ff6e72}
.hero-demo-topbar .window-dots i:nth-child(2){background:#ffca62}
.hero-demo-topbar .window-dots i:last-child{background:#53d99a}
.hero-local-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid color-mix(in srgb,#53d99a 36%,var(--line));border-radius:999px;color:color-mix(in srgb,#53d99a 80%,var(--text));background:color-mix(in srgb,#53d99a 8%,transparent);text-transform:uppercase;letter-spacing:.08em;font-size:.55rem}
.hero-local-badge i,.hero-demo-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#53d99a;box-shadow:0 0 0 4px color-mix(in srgb,#53d99a 14%,transparent)}
.hero-demo-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);
}
.hero-demo-tabs button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  min-height:40px;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--text-muted);
  background:transparent;
  font:inherit;
  font-size:.63rem;
  font-weight:850;
  cursor:pointer;
  transition:transform .16s ease,color .16s ease,border-color .16s ease,background-color .16s ease;
}
.hero-demo-tabs button span{font-size:.8rem}
.hero-demo-tabs button:hover{color:var(--text);background:color-mix(in srgb,var(--panel) 72%,transparent)}
.hero-demo-tabs button[aria-selected="true"]{color:#72e6ff!important;border-color:rgba(114,230,255,.42)!important;background:#12384a!important;box-shadow:0 7px 18px rgba(13,190,228,.12)}
.hero-demo-tabs button:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:2px}
.hero-demo-stage{min-height:330px;padding:14px}
.hero-demo-panel{min-height:302px}
.hero-demo-panel.is-entering{animation:hero-panel-in .22s ease both}
@keyframes hero-panel-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero-compare{position:relative;overflow:hidden;min-height:252px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:15px;background:#0e1c2c;touch-action:pan-y}
.hero-compare>img,.hero-compare-after img{display:block;width:100%;height:252px;object-fit:cover}
.hero-compare>img{filter:grayscale(.82) saturate(.55) brightness(.7)}
.hero-compare-after{position:absolute;inset:0;width:100%;overflow:hidden;border-right:0;clip-path:inset(0 calc(100% - var(--hero-compare-position)) 0 0)}
.hero-compare-after::after{content:"";position:absolute;top:0;bottom:0;left:var(--hero-compare-position);width:2px;background:#fff;transform:translateX(-1px)}
.hero-compare-after img{width:100%;max-width:none;filter:saturate(1.12) contrast(1.04)}
.hero-compare-label{position:absolute;top:12px;padding:5px 8px;border-radius:999px;color:#fff;background:rgba(5,16,28,.72);font-size:.55rem;font-weight:850;letter-spacing:.03em;pointer-events:none}
.hero-compare-label.is-before{left:12px}.hero-compare-label.is-after{right:12px}
.hero-compare-handle{position:absolute;z-index:2;top:50%;left:var(--hero-compare-position);display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;border-radius:50%;color:#092034;background:#f7fbff;box-shadow:0 6px 20px rgba(0,0,0,.3);transform:translate(-50%,-50%);pointer-events:none}
.hero-compare-handle i{font-style:normal;font-size:.75rem}
.hero-compare-range{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.hero-compare-range:focus-visible{opacity:1;height:38px;top:auto;bottom:7px;left:5%;width:90%;accent-color:var(--primary)}
.hero-demo-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:9px 4px 0;color:var(--text-muted);font-size:.6rem;font-weight:750}
.hero-demo-status span{display:inline-flex;align-items:center;gap:8px}.hero-demo-status strong{color:var(--text);font-size:.62rem}
.hero-pipeline,.hero-privacy-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:252px;padding:24px 12px}
.hero-pipeline{grid-template-columns:minmax(0,1fr) minmax(116px,.8fr) minmax(0,1fr)}
.hero-file-card,.hero-process-step,.hero-privacy-flow>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:150px;padding:16px 10px;border:1px solid color-mix(in srgb,var(--line) 82%,var(--primary) 18%);border-radius:16px;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.hero-file-card>span,.hero-process-step>i,.hero-privacy-flow>div>span{display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;border-radius:12px;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--panel));font-style:normal;font-size:.72rem;font-weight:900}
.hero-file-card strong,.hero-process-step strong,.hero-privacy-flow strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:.66rem;white-space:nowrap}
.hero-file-card small,.hero-process-step small,.hero-privacy-flow small{margin-top:5px;color:var(--text-muted);font-size:.55rem}
.hero-process-step{min-height:128px;border-style:dashed;background:color-mix(in srgb,var(--primary) 6%,transparent)}
.hero-file-card.is-result>span{color:#53d99a;background:color-mix(in srgb,#53d99a 12%,var(--panel))}
.hero-media-preview,.hero-audio-preview{min-height:252px;padding:16px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:15px;background:color-mix(in srgb,#061728 86%,var(--surface-strong));color:#eef8ff}
.hero-film-frame{position:relative;display:grid;place-items:center;height:150px;overflow:hidden;border-radius:11px;background:linear-gradient(145deg,#103857,#251d51)}
.hero-film-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(100,220,255,.28),transparent 34%),linear-gradient(25deg,transparent 48%,rgba(255,255,255,.08) 49% 51%,transparent 52%)}
.hero-film-frame i{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.9);color:#102438;font-style:normal;font-size:.75rem}.hero-film-frame>span{position:absolute;right:9px;bottom:8px;padding:4px 7px;border-radius:6px;background:rgba(0,0,0,.58);font-size:.54rem}
.hero-timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:38px;margin-top:10px}.hero-timeline>b{border-radius:4px;background:linear-gradient(135deg,#1f5879,#4e4a91)}
.hero-trim-selection{position:absolute;inset:-3px 18% -3px 22%;border:2px solid #59d7ff;border-radius:6px}.hero-trim-selection i{position:absolute;top:50%;width:5px;height:20px;border-radius:3px;background:#59d7ff;transform:translateY(-50%)}.hero-trim-selection i:first-child{left:-4px}.hero-trim-selection i:last-child{right:-4px}
.hero-media-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:.59rem}.hero-media-meta span{color:#9ab1c4}
.hero-audio-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.hero-play-button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#59d7ff;color:#082033;font-size:.66rem}.hero-audio-head strong,.hero-audio-head small{display:block}.hero-audio-head strong{font-size:.67rem}.hero-audio-head small,.hero-audio-head time{color:#9ab1c4;font-size:.54rem}
.hero-waveform{display:flex;align-items:center;gap:5px;height:110px;margin:14px 0;padding:0 8px;border-radius:12px;background:rgba(255,255,255,.035)}.hero-waveform i{flex:1;min-width:3px;height:var(--wave,45%);border-radius:999px;background:linear-gradient(#59d7ff,#7569ff)}.hero-waveform i:nth-child(3n){--wave:75%}.hero-waveform i:nth-child(4n){--wave:35%}.hero-waveform i:nth-child(5n){--wave:92%}.hero-waveform i:nth-child(7n){--wave:58%}
.hero-audio-range{position:relative;height:6px;border-radius:999px;background:#263f54}.hero-audio-range span{position:absolute;inset:0 22% 0 16%;border-radius:inherit;background:#59d7ff}.hero-audio-range b{position:absolute;top:14px;left:16%;font-size:.54rem;color:#b8c9d8}
.hero-privacy-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);min-height:218px;padding:16px 6px}.hero-privacy-flow>div{min-height:132px;padding:13px 7px}.hero-privacy-flow>i{color:var(--text-muted);font-style:normal}.hero-privacy-flow .is-engine{border-color:color-mix(in srgb,var(--primary) 44%,var(--line));box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 6%,transparent)}
.hero-no-upload{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:8px 10px;border:1px solid color-mix(in srgb,#53d99a 30%,var(--line));border-radius:10px;color:color-mix(in srgb,#53d99a 75%,var(--text));background:color-mix(in srgb,#53d99a 7%,transparent);font-size:.58rem;font-weight:800;text-align:center}
html[data-theme="light"] .hero-product-demo{background:linear-gradient(145deg,#fbfdff,#eef5ff);box-shadow:0 28px 70px rgba(28,62,95,.18),0 1px 0 #fff inset}
html[data-theme="light"] .hero-demo-tabs button[aria-selected="true"]{color:#075f78!important;border-color:#9ed9e8!important;background:#e3f5fa!important}
html[data-theme="light"] .hero-media-preview,html[data-theme="light"] .hero-audio-preview{background:#102337}
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"copy" "visual" "proof";grid-template-rows:auto auto auto;row-gap:0!important}
  .hero-copy{align-self:auto}
  .hero-product-demo{width:min(100%,680px)}
  .hero-proof-row{justify-content:center;margin-top:4px!important}
}
@media(max-width:600px){
  .hero-product-demo{border-radius:17px}
  .hero-demo-topbar{min-height:43px;padding:8px 10px;font-size:.6rem}
  .hero-demo-tabs{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:8px 9px;gap:4px}.hero-demo-tabs::-webkit-scrollbar{display:none}
  .hero-demo-tabs button{flex:1 0 auto;min-height:38px;padding:6px 9px;font-size:.58rem}
  .hero-demo-stage{min-height:280px;padding:9px}
  .hero-demo-panel{min-height:262px}
  .hero-compare,.hero-compare>img,.hero-compare-after img{min-height:216px;height:216px}
  .hero-pipeline{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:6px;min-height:216px;padding:16px 4px}
  .hero-file-card{min-height:132px;padding:12px 6px}.hero-process-step{min-height:104px;padding:9px 4px}.hero-process-step>i{width:34px;height:34px;margin-bottom:8px}.hero-file-card strong,.hero-process-step strong{font-size:.57rem}.hero-file-card small,.hero-process-step small{font-size:.48rem}
  .hero-media-preview,.hero-audio-preview{min-height:216px;padding:12px}.hero-film-frame{height:124px}.hero-waveform{height:88px}
  .hero-privacy-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-height:183px;padding:10px 2px}.hero-privacy-flow>i{display:none}.hero-privacy-flow>div{min-height:118px;padding:9px 4px}.hero-privacy-flow strong{font-size:.54rem}.hero-privacy-flow small{font-size:.47rem}.hero-privacy-flow>div>span{width:34px;height:34px;margin-bottom:8px}
  .hero-demo-status{font-size:.52rem}.hero-demo-status strong{font-size:.54rem}
}
@media(max-width:350px){
  .hero-demo-tabs button{padding-inline:7px}.hero-demo-tabs button span{display:none}
  .hero-compare,.hero-compare>img,.hero-compare-after img{min-height:198px;height:198px}
  .hero-privacy-flow small{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-demo-panel.is-entering{animation:none}.hero-demo-tabs button{transition:none}}

/* v75 — original-copy typewriter + asset-free Image command center */
.hero-typewriter-heading{
  min-height:0;
  contain:layout style;
}
.hero-typewriter-reserve{display:block;visibility:hidden;pointer-events:none}
.hero-typewriter-visual{
  position:absolute;
  inset:0;
  display:block;
  opacity:1;
  transform:translateY(0);
  transition:opacity .24s ease,transform .24s ease;
}
.hero-typewriter-heading.is-transitioning .hero-typewriter-visual{
  opacity:0;
  transform:translateY(-5px);
}
.hero-typewriter-heading .hero-typewriter-cursor{
  animation:heroTypewriterBlink 1.05s steps(1,end) infinite;
}
.hero-typewriter-heading.is-complete .hero-typewriter-cursor{animation:none;opacity:.32}
.hero-typewriter-heading.is-final .hero-typewriter-cursor{opacity:0}
.hero-image-workbench{
  min-height:252px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:15px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--surface-strong) 94%,var(--primary) 6%),color-mix(in srgb,var(--panel) 94%,#6f64ff 6%));
}
.hero-image-actions{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}
.hero-image-actions::-webkit-scrollbar{display:none}
.hero-image-actions span{flex:0 0 auto;padding:6px 9px;border:1px solid color-mix(in srgb,var(--line) 86%,transparent);border-radius:8px;color:var(--text-muted);background:color-mix(in srgb,var(--surface-strong) 82%,transparent);font-size:.54rem;font-weight:850}
.hero-image-actions span.is-active{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,var(--surface-strong))}
.hero-image-flow{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:8px;margin-top:16px}
.hero-image-file{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;min-width:0;min-height:112px;padding:12px;border:1px solid color-mix(in srgb,var(--line) 80%,var(--primary) 20%);border-radius:13px;background:color-mix(in srgb,var(--surface-strong) 90%,transparent);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.hero-image-file>div:last-of-type{min-width:0}.hero-image-file strong,.hero-image-file span,.hero-image-file small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-image-file strong{color:var(--text);font-size:.65rem}.hero-image-file span{margin-top:5px;color:var(--text-soft);font-size:.59rem;font-weight:800}.hero-image-file small{margin-top:3px;color:var(--text-muted);font-size:.5rem}
.hero-image-file em{position:absolute;right:8px;top:8px;padding:4px 6px;border-radius:999px;color:#2fb87a;background:color-mix(in srgb,#53d99a 11%,var(--surface-strong));font-size:.48rem;font-style:normal;font-weight:900}
.hero-sample-photo{position:relative;width:64px;height:68px;overflow:hidden;border-radius:10px;background:linear-gradient(150deg,#75ddff 0 38%,#5a55d7 39% 63%,#f5965f 64% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero-sample-photo::before{content:"";position:absolute;left:8px;bottom:9px;width:52px;height:29px;background:linear-gradient(140deg,transparent 0 24%,#193c57 25% 56%,#15314a 57%);clip-path:polygon(0 100%,35% 30%,52% 64%,72% 12%,100% 100%)}
.hero-sample-photo i{position:absolute;right:9px;top:9px;width:14px;height:14px;border-radius:50%;background:#ffe59b}.hero-sample-photo b{position:absolute;inset:auto 0 0;height:10px;background:rgba(8,35,54,.35)}
.hero-image-file.is-result{border-color:color-mix(in srgb,#53d99a 34%,var(--line));background:color-mix(in srgb,#53d99a 5%,var(--surface-strong))}
.hero-local-process{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--primary)}
.hero-local-process span{font-size:1rem}.hero-local-process i{display:block;width:28px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--primary),#7569ff)}.hero-local-process small{font-size:.47rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.hero-image-savings{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin-top:14px;color:var(--text-muted);font-size:.5rem}.hero-image-savings>span{height:6px;overflow:hidden;border-radius:99px;background:color-mix(in srgb,var(--line) 76%,transparent)}.hero-image-savings>span i{display:block;width:75%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#53d99a,var(--primary))}.hero-image-savings strong{color:#2fb87a;font-size:.55rem}.hero-image-savings small{font-size:.48rem}
html[data-theme="light"] .hero-image-workbench{background:linear-gradient(145deg,#f8fbfe,#eef4fb)}
html[data-theme="light"] .hero-image-actions span.is-active{color:#075f78!important;border-color:#9ed9e8!important;background:#e3f5fa!important}
@media(max-width:600px){
  .hero-image-workbench{min-height:216px;padding:10px}
  .hero-image-flow{grid-template-columns:minmax(0,1fr) 35px minmax(0,1fr);gap:5px;margin-top:12px}
  .hero-image-file{grid-template-columns:42px minmax(0,1fr);gap:7px;min-height:96px;padding:8px 6px}.hero-sample-photo{width:42px;height:53px;border-radius:8px}.hero-sample-photo::before{left:4px;bottom:7px;width:36px;height:22px}.hero-image-file strong{font-size:.55rem}.hero-image-file span{font-size:.5rem}.hero-image-file small{font-size:.44rem}.hero-image-file em{right:4px;top:4px;padding:3px 4px;font-size:.4rem}.hero-local-process span{font-size:.75rem}.hero-local-process i{width:21px}.hero-local-process small{font-size:.39rem}
}
@media(max-width:350px){.hero-sample-photo{display:none}.hero-image-file{grid-template-columns:minmax(0,1fr)}.hero-image-file em{position:static;justify-self:start;margin-top:5px}}
@media(prefers-reduced-motion:reduce){.hero-typewriter-heading .hero-typewriter-visual{transition:none}.hero-typewriter-heading .hero-typewriter-cursor{animation:none!important;opacity:0!important}}

/* v77 — keep the typewriter caret attached to the live accent word. */
.hero-typewriter-heading .hero-typewriter-accent{
  white-space:normal;
}
.hero-typewriter-heading .hero-typewriter-cursor{
  display:none!important;
}
.hero-typewriter-heading #hero-typewriter-text::after{
  content:"";
  display:inline-block;
  width:2px;
  height:.88em;
  margin-left:.08em;
  vertical-align:-.08em;
  border-radius:2px;
  background:var(--primary);
  animation:heroTypewriterBlink 1.05s steps(1,end) infinite;
}
.hero-typewriter-heading.is-complete #hero-typewriter-text::after{
  animation:none;
  opacity:.32;
}
@media(prefers-reduced-motion:reduce){
  .hero-typewriter-heading #hero-typewriter-text::after{display:none}
}

/* v79 — reference-video type/delete loop with a caret attached to the glyph. */
.hero .hero-typewriter-heading .hero-typewriter-accent{
  display:inline!important;
}
.hero-typewriter-heading .hero-typewriter-visual{
  transition:none!important;
}
.hero-typewriter-heading.is-transitioning .hero-typewriter-visual{
  opacity:1!important;
  transform:none!important;
}
.hero-typewriter-heading #hero-typewriter-text::after{
  margin-left:.04em;
  vertical-align:-.06em;
}


/* =========================================================
   v19 — PIXELORIGEN BRAND REFRESH
   Uses the selected PixelOrigen P/pixel logo and its navy → blue → cyan → teal palette.
   Visual-only overrides; tool processing logic is unchanged.
========================================================= */
:root{
  --brand-navy:#061a49;
  --brand-blue:#0b67f2;
  --brand-cyan:#18cfe3;
  --brand-teal:#18c5a9;
  --primary:#72e8ff;
  --primary-2:#2a78ff;
  --green:#5fe0b3;
}
html[data-theme="light"]{
  --bg:#eef6fb;
  --bg-soft:#e4eff7;
  --surface:#ffffff;
  --surface-2:#edf6fb;
  --line:rgba(7,42,82,.12);
  --line-strong:rgba(7,42,82,.22);
  --text:#071c3d;
  --text-soft:#365873;
  --text-muted:#637f93;
  --primary:#087fa3;
  --primary-2:#176cf2;
  --green:#128368;
}
body{
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb,var(--brand-cyan) 8%,transparent), transparent 31%),
    radial-gradient(circle at 91% 8%, color-mix(in srgb,var(--brand-blue) 8%,transparent), transparent 32%),
    var(--bg);
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 10% 0%, rgba(24,207,227,.10), transparent 31%),
    radial-gradient(circle at 91% 8%, rgba(11,103,242,.08), transparent 33%),
    var(--bg);
}

/* The selected full wordmark is the source of truth in header/footer. */
.site-header .brand,
.site-footer .brand{
  width:152px;
  height:42px;
  gap:0;
  flex:0 0 auto;
  position:relative;
}
.site-header .brand .brand-mark,
.site-header .brand .brand-name,
.site-footer .brand .brand-mark,
.site-footer .brand .brand-name{
  display:none!important;
}
.site-header .brand::before,
.site-footer .brand::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/pixelorigen-brand-header.png?v=33") left center/contain no-repeat;
}
@media(max-width:520px){
  .site-header .brand{width:142px;height:40px}
  .site-footer .brand{width:146px;height:40px}
}

/* Keep stand-alone brand marks (hero/footer illustration) on the new icon. */
.brand-mark{
  background-image:url("/assets/pixelorigen-symbol-transparent.png?v=33")!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Brand-aligned CTA and accent surfaces: no purple dependency. */
.btn-primary,
.process-btn,
.hero-primary,
.cta-primary{
  background:linear-gradient(115deg,var(--brand-cyan),var(--brand-blue) 56%,var(--brand-teal))!important;
  color:#061a35!important;
  box-shadow:0 12px 30px rgba(11,103,242,.18);
}
.btn-primary:hover,
.process-btn:hover,
.hero-primary:hover,
.cta-primary:hover{
  box-shadow:0 16px 36px rgba(11,103,242,.24);
}
.hero h1 .accent,
.hero-typewriter-accent,
.gradient-text{
  background:linear-gradient(105deg,var(--brand-blue),var(--brand-cyan) 55%,var(--brand-teal))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

/* Cards and controls use the logo's blue/cyan/teal edge language. */
.tool-card,
.workflow-step,
.why-card,
.workspace-card{
  border-color:color-mix(in srgb,var(--primary) 16%,var(--line))!important;
}
html[data-theme="light"] .tool-card,
html[data-theme="light"] .workflow-step,
html[data-theme="light"] .why-card{
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 14px 38px rgba(7,42,82,.07);
}

/* Consistent desktop hover for every landing-page tool card. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tools-grid .tool-card{
    transition:transform .28s var(--ease),border-color .28s ease,box-shadow .28s ease!important;
  }
  .tools-grid .tool-card:hover{
    transform:translateY(-5px)!important;
    border-color:color-mix(in srgb,var(--brand-blue) 38%,var(--line))!important;
    box-shadow:0 22px 48px rgba(7,42,82,.15)!important;
  }
  .tools-grid .tool-card .tool-visual{
    transition:transform .34s var(--ease)!important;
  }
  .tools-grid .tool-card:hover .tool-visual{
    transform:translateY(-1px) scale(1.01);
  }
  .tools-grid .tool-card:hover .tool-image,
  .tools-grid .tool-card:hover .new-tool-card-image{
    transform:scale(1.035)!important;
    filter:saturate(1.04);
  }
}
@media(prefers-reduced-motion:reduce){
  .tools-grid .tool-card,
  .tools-grid .tool-card .tool-visual,
  .tools-grid .tool-card .tool-image,
  .tools-grid .tool-card .new-tool-card-image{
    transition:none!important;
    transform:none!important;
  }
}

/* Selection/focus treatment follows brand blue instead of violet. */
:focus-visible{
  outline-color:var(--brand-blue);
}
::selection{
  background:rgba(11,103,242,.22);
}

/* v19 dark-surface wordmark variant keeps the selected logo legible without changing its icon. */
.site-header .brand::before,
.site-footer .brand::before{
  background-image:url("/assets/pixelorigen-brand-header-dark.png?v=33");
}
html[data-theme="light"] .site-header .brand::before,
html[data-theme="light"] .site-footer .brand::before{
  background-image:url("/assets/pixelorigen-brand-header.png?v=33");
}

/* =========================================================
   v29 — LOCAL PROCESSING STORY HERO
   CSS-only motion, no screenshots/video/carousel/timers.
   Animation is restricted to transform/opacity and disabled for reduced motion.
========================================================= */
.hero-local-story{
  position:relative;
  width:min(100%,680px);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--brand-cyan) 24%,var(--line));
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 44%,rgba(24,207,227,.10),transparent 34%),
    linear-gradient(145deg,#071527 0%,#081d31 54%,#061725 100%);
  box-shadow:0 34px 88px rgba(2,14,34,.34),inset 0 1px 0 rgba(255,255,255,.06);
  isolation:isolate;
}
.hero-story-topbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 15px;
  border-bottom:1px solid rgba(132,197,223,.12);
  background:rgba(6,18,33,.78);
}
.hero-story-topbar .window-dots{display:flex;gap:5px}
.hero-story-topbar .window-dots i{width:7px;height:7px;border-radius:50%;background:#456178}
.hero-story-topbar .window-dots i:nth-child(2){opacity:.7}.hero-story-topbar .window-dots i:nth-child(3){opacity:.45}
.hero-story-domain{display:flex;min-width:0;flex-direction:column;line-height:1.15}
.hero-story-domain strong{overflow:hidden;color:#edf9ff;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}
.hero-story-domain small{margin-top:4px;color:#7795aa;font-size:.52rem}
.hero-story-live{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 9px;border:1px solid rgba(82,226,173,.28);border-radius:999px;background:rgba(61,205,156,.07);color:#88e7c2;font-size:.52rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.hero-story-live i,.hero-node-status i{width:7px;height:7px;border-radius:50%;background:#53dca7;box-shadow:0 0 0 4px rgba(83,220,167,.10)}
.hero-story-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(130px,.88fr) minmax(54px,.34fr) minmax(180px,1.1fr) minmax(54px,.34fr) minmax(130px,.88fr);
  align-items:center;
  gap:8px;
  min-height:390px;
  padding:42px 24px 32px;
}
.hero-story-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(121,194,220,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(121,194,220,.15) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);pointer-events:none}
.hero-story-glow{position:absolute;width:250px;height:250px;border-radius:50%;filter:blur(60px);opacity:.13;pointer-events:none}
.hero-story-glow-a{top:-90px;right:10%;background:#0b67f2}.hero-story-glow-b{bottom:-130px;left:22%;background:#18c5a9}
.hero-story-node{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(133,196,221,.20);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(16,43,65,.94),rgba(7,28,46,.94));
  box-shadow:0 16px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-story-node strong{display:block;color:#f0f9ff;font-size:.72rem;line-height:1.25}
.hero-story-node small{display:block;margin-top:3px;color:#7390a5;font-size:.51rem;line-height:1.35}
.hero-story-kicker{position:absolute;top:-25px;left:4px;color:#5e8199;font-size:.47rem;font-weight:900;letter-spacing:.13em}
.hero-file-glyph,.hero-ready-glyph{display:grid;place-items:center;width:44px;height:48px;border:1px solid rgba(99,214,235,.24);border-radius:12px;background:linear-gradient(145deg,rgba(24,207,227,.16),rgba(11,103,242,.10));color:#75eafb;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero-file-glyph b{font-size:.47rem;letter-spacing:.08em}.hero-ready-glyph{border-color:rgba(82,226,173,.28);background:rgba(58,196,150,.10);color:#76e5bb;font-size:1.2rem;font-weight:900}
.hero-node-status{grid-column:1/-1;display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;margin-top:2px;padding:5px 7px;border-radius:999px;background:rgba(8,20,35,.45);color:#8ea6b8;font-size:.47rem;font-weight:800}
.hero-node-status.is-ready{color:#8bdfbe}
.hero-story-link{position:relative;z-index:2;height:32px}
.hero-link-line{position:absolute;top:50%;left:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(57,142,181,.12),rgba(72,215,225,.68),rgba(57,142,181,.12));transform:translateY(-50%)}
.hero-story-link i{position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:#67e6ef;box-shadow:0 0 12px rgba(103,230,239,.76);opacity:0;transform:translate3d(0,-50%,0)}
.hero-story-link i:nth-of-type(2){animation-delay:-1.35s}
.hero-local-engine{position:relative;z-index:3;display:grid;place-items:center;aspect-ratio:1/1;min-width:0}
.hero-engine-core{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;width:146px;height:146px;padding:18px;border:1px solid rgba(91,225,231,.28);border-radius:38px;background:linear-gradient(145deg,rgba(13,56,75,.96),rgba(7,31,49,.98));box-shadow:0 22px 52px rgba(0,0,0,.26),0 0 42px rgba(24,207,227,.08),inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
.hero-engine-core img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.hero-engine-core span{margin-top:7px;color:#6fe4ec;font-size:.43rem;font-weight:900;letter-spacing:.14em}
.hero-engine-core strong{margin-top:4px;color:#f2fbff;font-size:.68rem;line-height:1.2}
.hero-engine-core small{margin-top:4px;color:#7695a8;font-size:.47rem}
.hero-engine-orbit{position:absolute;z-index:2;border:1px solid rgba(66,207,219,.18);border-radius:50%;pointer-events:none}
.hero-engine-orbit.orbit-a{width:190px;height:190px;border-top-color:rgba(92,230,235,.56);border-right-color:rgba(24,197,169,.34)}
.hero-engine-orbit.orbit-b{width:224px;height:224px;border-bottom-color:rgba(31,114,244,.46);border-left-color:rgba(92,230,235,.22)}
.hero-engine-pulse{position:absolute;z-index:1;width:184px;height:184px;border-radius:50%;background:radial-gradient(circle,rgba(24,207,227,.14),rgba(11,103,242,.05) 45%,transparent 70%)}
.hero-tool-satellite{position:absolute;z-index:6;display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:4px 7px;border:1px solid rgba(120,193,220,.20);border-radius:8px;background:#0b2539;color:#8eb2c6;font-size:.42rem;font-weight:900;letter-spacing:.06em;box-shadow:0 8px 16px rgba(0,0,0,.14)}
.sat-image{top:4%;left:-3%}.sat-pdf{top:14%;right:-7%}.sat-video{bottom:10%;left:-8%}.sat-audio{right:-5%;bottom:1%}
.hero-story-rail{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px 15px;border-top:1px solid rgba(132,197,223,.10);background:rgba(5,17,31,.46);color:#738fa2;font-size:.48rem;font-weight:800}
.hero-story-rail span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.hero-story-rail b{display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(86,201,219,.18);border-radius:50%;color:#67dfe9;font-size:.42rem}.hero-story-rail>i{width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(95,194,214,.32),transparent)}

@media (prefers-reduced-motion:no-preference){
  .hero-story-link i{animation:heroSignal 2.7s linear infinite}
  .hero-engine-orbit.orbit-a{animation:heroOrbit 14s linear infinite}
  .hero-engine-orbit.orbit-b{animation:heroOrbitReverse 20s linear infinite}
  .hero-engine-pulse{animation:heroCorePulse 3.4s ease-in-out infinite}
  .hero-tool-satellite{animation:heroSatellite 5.4s ease-in-out infinite}
  .sat-pdf{animation-delay:-1.4s}.sat-video{animation-delay:-2.8s}.sat-audio{animation-delay:-4.1s}
  .hero-story-input{animation:heroNodeFloat 5.8s ease-in-out infinite}
  .hero-story-output{animation:heroNodeFloat 5.8s ease-in-out infinite -2.9s}
}
@keyframes heroSignal{0%{opacity:0;transform:translate3d(0,-50%,0)}12%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate3d(calc(100% - 7px),-50%,0)}}
@keyframes heroOrbit{to{transform:rotate(360deg)}}
@keyframes heroOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes heroCorePulse{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes heroSatellite{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes heroNodeFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}

html[data-theme="light"] .hero-local-story{border-color:rgba(20,137,174,.20);background:linear-gradient(145deg,#f9fdff,#eef7fb 58%,#f5fbf9);box-shadow:0 28px 70px rgba(24,71,99,.15),inset 0 1px 0 #fff}
html[data-theme="light"] .hero-story-topbar{border-color:rgba(30,102,136,.10);background:rgba(248,252,254,.90)}
html[data-theme="light"] .hero-story-domain strong{color:#0a2941}html[data-theme="light"] .hero-story-domain small{color:#6b8495}
html[data-theme="light"] .hero-story-stage{background:transparent}
html[data-theme="light"] .hero-story-grid{opacity:.22;background-image:linear-gradient(rgba(38,135,161,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(38,135,161,.10) 1px,transparent 1px)}
html[data-theme="light"] .hero-story-node{border-color:rgba(39,124,153,.14);background:linear-gradient(145deg,#fff,#f3f9fb);box-shadow:0 14px 30px rgba(35,78,101,.10),inset 0 1px 0 #fff}
html[data-theme="light"] .hero-story-node strong{color:#102f45}html[data-theme="light"] .hero-story-node small{color:#688393}html[data-theme="light"] .hero-node-status{background:#edf6f7;color:#587682}
html[data-theme="light"] .hero-local-engine .hero-engine-core{border-color:rgba(24,172,190,.22);background:linear-gradient(145deg,#e9fafb,#edf5ff);box-shadow:0 18px 42px rgba(30,101,125,.14),inset 0 1px 0 #fff}
html[data-theme="light"] .hero-engine-core strong{color:#13374b}html[data-theme="light"] .hero-engine-core small{color:#69889a}
html[data-theme="light"] .hero-tool-satellite{border-color:rgba(34,128,157,.14);background:#fff;color:#497084;box-shadow:0 7px 18px rgba(31,77,99,.10)}
html[data-theme="light"] .hero-story-rail{border-color:rgba(30,102,136,.09);background:rgba(244,250,251,.80);color:#607d8b}

@media(max-width:1100px){
  .hero-story-stage{grid-template-columns:minmax(118px,.9fr) 42px minmax(170px,1.05fr) 42px minmax(118px,.9fr);padding-inline:16px}
  .hero-engine-core{width:136px;height:136px}.hero-engine-orbit.orbit-a{width:176px;height:176px}.hero-engine-orbit.orbit-b{width:204px;height:204px}
}
@media(max-width:900px){
  .hero-local-story{width:min(100%,650px)}
  .hero-story-stage{min-height:360px}
}
@media(max-width:600px){
  .hero-local-story{border-radius:19px}
  .hero-story-topbar{grid-template-columns:auto minmax(0,1fr);min-height:52px;padding:9px 10px}.hero-story-live{grid-column:1/-1;justify-self:start;margin-left:20px;margin-top:-3px;min-height:25px;padding:4px 7px;font-size:.46rem}.hero-story-domain strong{font-size:.64rem}.hero-story-domain small{font-size:.48rem}
  .hero-story-stage{grid-template-columns:1fr;grid-template-rows:auto 40px auto 40px auto;min-height:0;gap:5px;padding:34px 28px 28px}
  .hero-story-input,.hero-local-engine,.hero-story-output{justify-self:center;width:min(100%,230px)}
  .hero-story-input{grid-row:1}.hero-story-link-in{grid-row:2}.hero-local-engine{grid-row:3;aspect-ratio:1/1;width:220px}.hero-story-link-out{grid-row:4}.hero-story-output{grid-row:5}
  .hero-story-link{width:32px;height:40px;justify-self:center}.hero-link-line{top:0;left:50%;width:1px;height:100%;background:linear-gradient(180deg,rgba(57,142,181,.12),rgba(72,215,225,.68),rgba(57,142,181,.12));transform:translateX(-50%)}.hero-story-link i{top:0;left:50%;transform:translate3d(-50%,0,0)}
  .hero-engine-core{width:138px;height:138px}.hero-engine-orbit.orbit-a{width:180px;height:180px}.hero-engine-orbit.orbit-b{width:210px;height:210px}.hero-engine-pulse{width:176px;height:176px}
  .sat-image{left:1%}.sat-pdf{right:-1%}.sat-video{left:-1%}.sat-audio{right:1%}
  .hero-story-rail{flex-wrap:wrap;gap:6px;padding:10px}.hero-story-rail>i{width:18px}.hero-story-rail span{font-size:.44rem}
  @keyframes heroSignal{0%{opacity:0;transform:translate3d(-50%,0,0)}12%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate3d(-50%,33px,0)}}
  @media (prefers-reduced-motion:no-preference){.hero-story-input,.hero-story-output{animation:none}}
}
@media(max-width:360px){
  .hero-story-stage{padding-inline:18px}.hero-local-engine{width:205px}.hero-engine-orbit.orbit-b{width:198px;height:198px}.hero-tool-satellite{font-size:.38rem}
  .hero-story-rail>i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-story-link i,.hero-engine-orbit,.hero-engine-pulse,.hero-tool-satellite,.hero-story-node{animation:none!important;transition:none!important;transform:none!important}
  .hero-story-link i{display:none}
}

/* =========================================================
   v30 — HERO CACHE/OVERFLOW HARDENING
   Keeps the v29 local-processing story inside its grid track at every width.
========================================================= */
.hero-grid,
.hero-copy,
.hero-visual,
.hero-local-story,
.hero-story-stage,
.hero-story-node,
.hero-local-engine{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.hero-grid{
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;
  gap:clamp(24px,3.2vw,48px)!important;
}

.hero-visual{
  overflow:visible;
}

.hero-local-story{
  width:100%;
  max-width:620px;
  overflow:hidden;
}

.hero-story-stage{
  width:100%;
  grid-template-columns:
    minmax(96px,.88fr)
    minmax(24px,.26fr)
    minmax(142px,1.08fr)
    minmax(24px,.26fr)
    minmax(96px,.88fr);
  gap:clamp(5px,.7vw,9px);
  padding:42px clamp(12px,1.45vw,20px) 32px;
  overflow:hidden;
}

.hero-story-node{
  width:100%;
  padding:clamp(10px,1vw,14px);
}

.hero-story-node > div{
  min-width:0;
}

.hero-story-node strong,
.hero-story-node small{
  overflow-wrap:anywhere;
}

.hero-local-engine{
  width:100%;
  justify-self:stretch;
}

.hero-engine-core{
  width:clamp(126px,10.7vw,146px);
  height:clamp(126px,10.7vw,146px);
  max-width:100%;
}

.hero-engine-orbit.orbit-a{
  width:clamp(164px,14vw,190px);
  height:clamp(164px,14vw,190px);
}

.hero-engine-orbit.orbit-b{
  width:clamp(190px,16.4vw,224px);
  height:clamp(190px,16.4vw,224px);
}

.hero-engine-pulse{
  width:clamp(158px,13.5vw,184px);
  height:clamp(158px,13.5vw,184px);
}

/* Keep decorative satellites inside the illustration instead of creating
   accidental horizontal overflow at intermediate laptop widths. */
.sat-image{left:0}
.sat-pdf{right:0}
.sat-video{left:0}
.sat-audio{right:0}

@media(max-width:1060px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"copy" "visual" "proof"!important;
    gap:28px!important;
  }
  .hero-copy{
    grid-area:copy;
    width:min(100%,760px);
    max-width:760px;
  }
  .hero-visual{
    grid-area:visual;
    width:min(100%,680px);
    max-width:680px;
    margin-inline:auto;
  }
  .hero-proof-row{
    grid-area:proof;
    margin-top:-10px;
  }
  .hero-local-story{
    max-width:650px;
  }
}

@media(max-width:700px){
  .hero > .container{
    width:min(calc(100% - 32px),1280px)!important;
  }
  .hero-grid{
    gap:20px!important;
  }
  .hero-copy,
  .hero-visual{
    width:100%;
  }
  .hero-story-topbar{
    grid-template-columns:auto minmax(0,1fr);
  }
  .hero-story-live{
    grid-column:1/-1;
    justify-self:start;
    margin-left:19px;
  }
  .hero-story-stage{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 34px auto 34px auto;
    gap:4px;
    min-height:0;
    padding:34px clamp(16px,6vw,28px) 26px;
    overflow:hidden;
  }
  .hero-story-input,
  .hero-story-output{
    width:min(100%,250px);
    justify-self:center;
  }
  .hero-story-input{grid-row:1}
  .hero-story-link-in{grid-row:2}
  .hero-local-engine{
    grid-row:3;
    width:min(100%,220px);
    justify-self:center;
    aspect-ratio:1/1;
  }
  .hero-story-link-out{grid-row:4}
  .hero-story-output{grid-row:5}
  .hero-story-link{
    width:30px;
    height:34px;
    justify-self:center;
  }
  .hero-link-line{
    top:0;
    left:50%;
    width:1px;
    height:100%;
    transform:translateX(-50%);
    background:linear-gradient(180deg,rgba(57,142,181,.12),rgba(72,215,225,.68),rgba(57,142,181,.12));
  }
  .hero-story-link i{
    top:0;
    left:50%;
    transform:translate3d(-50%,0,0);
  }
  .hero-story-rail{
    flex-wrap:wrap;
  }
}

@media(max-width:420px){
  .hero > .container{
    width:min(calc(100% - 24px),1280px)!important;
  }
  .hero-local-story{
    border-radius:17px;
  }
  .hero-story-topbar{
    gap:8px;
    padding-inline:9px;
  }
  .hero-story-stage{
    padding-inline:14px;
  }
  .hero-local-engine{
    width:200px;
  }
  .hero-engine-core{
    width:132px;
    height:132px;
  }
  .hero-engine-orbit.orbit-a{width:170px;height:170px}
  .hero-engine-orbit.orbit-b{width:196px;height:196px}
  .hero-engine-pulse{width:166px;height:166px}
  .hero-story-rail{
    gap:5px;
    padding:9px 7px;
  }
  .hero-story-rail > i{display:none}
}


/* =========================================================
   v33 — authoritative PixelOrigen brand shell
   Prevent stale/legacy CSS marks from resurfacing in workspace/PDF/media headers.
========================================================= */
body .site-header .container.nav-inner > a.brand,
body .site-footer a.brand{
  display:block!important;
  position:relative!important;
  width:166px!important;
  height:46px!important;
  min-width:166px!important;
  flex:0 0 166px!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  overflow:visible!important;
}
body .site-header .container.nav-inner > a.brand > .brand-mark,
body .site-header .container.nav-inner > a.brand > .brand-name,
body .site-footer a.brand > .brand-mark,
body .site-footer a.brand > .brand-name{
  display:none!important;
}
body .site-header .container.nav-inner > a.brand::before,
body .site-footer a.brand::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  display:block!important;
  background-image:url("/assets/pixelorigen-brand-header-dark.png?v=33")!important;
  background-position:left center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
}
html[data-theme="light"] body .site-header .container.nav-inner > a.brand::before,
html[data-theme="light"] body .site-footer a.brand::before{
  background-image:url("/assets/pixelorigen-brand-header.png?v=33")!important;
}
@media(max-width:600px){
  body .site-header .container.nav-inner > a.brand,
  body .site-footer a.brand{
    width:150px!important;
    height:42px!important;
    min-width:150px!important;
    flex-basis:150px!important;
  }
}
@media(max-width:380px){
  body .site-header .container.nav-inner > a.brand{
    width:140px!important;
    height:40px!important;
    min-width:140px!important;
    flex-basis:140px!important;
  }
}

/* Hero uses the transparent product symbol, never the opaque launcher/PWA tile. */
.hero-engine-core img{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}