/* ===========================================================================
   Pesito — Marketing site, single source of truth for styles.

   Heritage palette (verde / hueso / rojo) — deliberately distinct from the
   in-app Cash palette used inside app.pesito.la. App mockups embedded in
   the showcase band render with the app palette to signal "same family,
   different surface".

   Design tokens mirror docs/website-prompt.md §3–§4.
   =========================================================================== */

:root {
  /* Color tokens */
  --verde-900: #003D26;
  --verde-700: #006847;
  --verde-500: #00A651;
  --verde-300: #6FCF97;
  --verde-100: #E6F4EC;
  --verde-050: #F4FAF6;

  --rojo-700: #A50F20;
  --rojo-500: #CE1126;
  --rojo-200: #F7C9CE;
  --rojo-050: #FDECEE;

  --blanco: #FFFFFF;
  --hueso: #FAF7F2;
  --crema: #F2EEE6;
  --tinta-900: #0B0B0B;
  --tinta-700: #2A2A2E;
  --tinta-500: #6B6B70;
  --tinta-300: #C7C7CC;

  --oro: #D4A94A;
  --app-green: #00D632;

  /* Type scale — desktop values (mobile reduced via media queries) */
  --fs-display-xl: 104px;
  --fs-display-l: 80px;
  --fs-display-m: 56px;
  --fs-title: 40px;
  --fs-headline: 24px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Layout */
  --container-max: 1200px;
  --container-inner: 1040px;
  --reading-max: 640px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-card: 0 2px 12px rgba(11, 11, 11, 0.06);
  --shadow-hover: 0 12px 32px rgba(0, 61, 38, 0.12);
  --shadow-modal: 0 24px 64px rgba(11, 11, 11, 0.24);

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-deliberate: 520ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
}

/* Mobile scale overrides. */
@media (max-width: 768px) {
  :root {
    --fs-display-xl: 64px;
    --fs-display-l: 48px;
    --fs-display-m: 36px;
    --fs-title: 28px;
    --fs-headline: 20px;
    --fs-body-l: 17px;
    --fs-body: 15px;
  }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta-900);
  font-family: 'Inter', 'SF Pro Display', -apple-system, system-ui,
    Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

/* ---------- Inter self-host ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations');
}

/* ---------- Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}
.container-inner {
  width: 100%;
  max-width: var(--container-inner);
  margin: 0 auto;
  padding: 0 24px;
}
.reading {
  width: 100%;
  max-width: var(--reading-max);
  margin: 0 auto;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-700);
}
.display-xl { font-size: var(--fs-display-xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.display-l  { font-size: var(--fs-display-l);  font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.display-m  { font-size: var(--fs-display-m);  font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.title      { font-size: var(--fs-title);      font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--tinta-700); }
.headline   { font-size: var(--fs-headline);   font-weight: 700; line-height: 1.25; color: var(--tinta-700); }
.body-l     { font-size: var(--fs-body-l);     font-weight: 500; line-height: 1.5; }
.caption    { font-size: var(--fs-caption);    font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; color: var(--tinta-500); }

.section {
  padding: 120px 0;
}
@media (max-width: 768px) {
  .section { padding: 80px 0; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-l);
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-emphasized),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--verde-500); color: var(--blanco); }
.btn-primary:hover { background: var(--verde-700); box-shadow: var(--shadow-hover); }
.btn-rojo { background: var(--rojo-500); color: var(--blanco); }
.btn-rojo:hover { background: var(--rojo-700); }
.btn-outline {
  background: transparent;
  color: var(--tinta-700);
  border: 1.5px solid var(--tinta-300);
}
.btn-outline:hover { border-color: var(--tinta-700); }
.btn-ghost { color: var(--verde-700); padding: 12px 16px; }
.btn-ghost:hover { color: var(--verde-900); }

/* Focus rings — ALWAYS visible, restyled only. */
:focus-visible {
  outline: 2px solid var(--verde-500);
  outline-offset: 2px;
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 72px;
  background: rgba(250, 247, 242, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.nav.nav--scrolled { border-bottom-color: var(--tinta-300); }
.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}
.nav-links {
  display: flex;
  gap: 32px;
  margin: 0 auto;
}
.nav-links a {
  font-size: var(--fs-body);
  color: var(--tinta-700);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--verde-700); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tinta-300);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.lang-toggle a {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--tinta-500);
  transition: color var(--dur-fast) var(--ease-standard);
}
.lang-toggle a.lang-toggle--active {
  background: var(--tinta-900);
  color: var(--blanco);
}
.nav-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--tinta-900);
}
.nav-hamburger:hover { background: var(--verde-050); }

@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-actions .btn-primary { display: none; }
}

.nav-sheet {
  position: fixed;
  inset: 0;
  background: var(--hueso);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 80px 24px 40px;
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-decelerate);
}
.nav-sheet.nav-sheet--open { transform: translateY(0); }
.nav-sheet a {
  font-size: 22px;
  font-weight: 700;
  padding: 16px 0;
  border-bottom: 1px solid var(--tinta-300);
}
.nav-sheet-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 128px 0 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}
.hero-copy { grid-column: span 6; }
.hero-art { grid-column: span 6; position: relative; }
.hero h1 {
  margin-top: 24px;
  color: var(--tinta-900);
}
.hero h1 .oro-dot { color: var(--oro); }
.hero-sub {
  margin-top: 24px;
  color: var(--tinta-500);
  max-width: 480px;
}
.hero-ctas { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-store-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  flex-direction: column;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tinta-300);
  background: var(--blanco);
  font-size: 11px;
  line-height: 1.2;
  color: var(--tinta-500);
  font-weight: 600;
  min-width: 160px;
}
.store-badge strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta-900);
}
.hero-device {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hero-ambient {
  position: absolute;
  right: -40px;
  top: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--verde-300) 0%, transparent 70%);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}
.hero-ambient-dot {
  position: absolute;
  left: 40px;
  bottom: 40px;
  width: 16px;
  height: 16px;
  background: var(--rojo-500);
  opacity: 0.6;
  border-radius: 50%;
}

@media (max-width: 1023px) {
  .hero-copy, .hero-art { grid-column: span 12; }
  .hero-device { max-width: 340px; margin: 0 auto; }
  .hero-ambient { display: none; }
}

/* ---------- Trust strip ---------- */

.trust {
  background: var(--verde-900);
  color: var(--blanco);
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 40px 0;
}
.trust-cell {
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.trust-cell + .trust-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.trust-value { color: var(--blanco); margin-bottom: 4px; }
.trust-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust-cell + .trust-cell::before { display: none; }
}

/* ---------- Generic section header ---------- */

.section-head {
  text-align: center;
  margin-bottom: 64px;
}
.section-head h2 { color: var(--tinta-900); }
.section-head .kicker {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--tinta-500);
}

/* ---------- Pillars ---------- */

.pillars {
  background: var(--hueso);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pillar {
  background: var(--blanco);
  border: 1px solid var(--verde-100);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.pillar-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--verde-700);
  margin-bottom: 20px;
}
.pillar-title { color: var(--tinta-700); margin-bottom: 8px; }
.pillar-body { color: var(--tinta-500); }

@media (max-width: 1023px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ---------- How it works ---------- */

.how {
  background: var(--crema);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.how-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.how-num {
  font-size: var(--fs-display-l);
  font-weight: 800;
  color: var(--verde-300);
  line-height: 1;
}
.how-title { color: var(--tinta-900); }
.how-body { color: var(--tinta-500); }
.how-device {
  width: 120px;
  aspect-ratio: 9 / 18;
  margin-top: 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--tinta-300);
}
.how-cta { text-align: center; margin-top: 48px; }

@media (max-width: 768px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* ---------- App showcase ---------- */

.showcase-band {
  padding: 80px 0;
  background: var(--hueso);
}
.showcase-band:nth-child(even) { background: var(--blanco); }
.showcase-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: center;
}
.showcase-copy { grid-column: span 6; }
.showcase-art { grid-column: span 6; display: flex; justify-content: center; }
.showcase-band--reverse .showcase-copy { grid-column: 7 / span 6; order: 2; }
.showcase-band--reverse .showcase-art { grid-column: 1 / span 6; order: 1; }

.showcase-copy h2 { color: var(--tinta-700); margin-top: 16px; }
.showcase-copy p { margin-top: 20px; color: var(--tinta-500); max-width: 480px; }
.showcase-device {
  width: 280px;
  aspect-ratio: 9 / 18;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

@media (max-width: 1023px) {
  .showcase-copy, .showcase-art,
  .showcase-band--reverse .showcase-copy,
  .showcase-band--reverse .showcase-art { grid-column: span 12; order: initial; }
  .showcase-art { margin-top: 40px; }
}

/* ---------- Pricing ---------- */

.pricing {
  background: var(--verde-700);
  color: var(--blanco);
  text-align: center;
}
.pricing .eyebrow { color: var(--verde-300); }
.pricing h2 { color: var(--blanco); margin-top: 12px; }
.pricing-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-col {
  padding: 24px 16px;
  position: relative;
}
.pricing-col + .pricing-col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.pricing-amount {
  font-size: var(--fs-display-l);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--blanco);
}
.pricing-label {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-body-l);
}
.pricing-note {
  margin-top: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-caption);
  color: rgba(230, 244, 236, 0.8);
}

@media (max-width: 640px) {
  .pricing-cols { grid-template-columns: 1fr; gap: 24px; }
  .pricing-col + .pricing-col::before { display: none; }
}

/* ---------- Security ---------- */

.security {
  background: var(--hueso);
}
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.security-body {
  margin-top: 20px;
  color: var(--tinta-500);
  max-width: 560px;
}
.security-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.security-badge {
  background: var(--blanco);
  border: 1px solid var(--verde-100);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.security-badge-icon {
  color: var(--verde-700);
  flex-shrink: 0;
}
.security-badge-text {
  font-size: var(--fs-body);
  color: var(--tinta-700);
  font-weight: 600;
}

@media (max-width: 1023px) {
  .security-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Audience scenarios ---------- */

.audiences {
  background: var(--crema);
}
.audiences-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.scenario {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.scenario:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.scenario-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--verde-700);
}
.scenario h3 { color: var(--tinta-900); margin-bottom: 8px; }
.scenario p { color: var(--tinta-500); }

@media (max-width: 1023px) {
  .audiences-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .audiences-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */

.faq .container { max-width: 720px; }
.faq-list { margin-top: 48px; }
.faq-item {
  border-bottom: 1px solid var(--tinta-300);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: var(--fs-body-l);
  font-weight: 600;
  color: var(--tinta-700);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev {
  transition: transform var(--dur-slow) var(--ease-emphasized);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-answer {
  padding: 0 0 24px;
  color: var(--tinta-500);
  animation: faq-fade var(--dur-slow) var(--ease-emphasized);
}
@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Final CTA ---------- */

.cta-final {
  background: linear-gradient(135deg, var(--verde-500) 0%, var(--verde-700) 100%);
  color: var(--blanco);
  padding: 120px 0;
  text-align: center;
}
.cta-final h2 { color: var(--blanco); }
.cta-final .sub { margin-top: 16px; color: var(--verde-100); }
.waitlist {
  margin-top: 48px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.waitlist-input {
  height: 56px;
  min-width: 320px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--blanco);
  color: var(--tinta-900);
  font-size: var(--fs-body-l);
  font-weight: 500;
}
.waitlist-success {
  color: var(--verde-100);
  font-size: var(--fs-body-l);
  font-weight: 600;
  margin-top: 24px;
  display: none;
}

/* Error state uses the same "rojo" the brand uses for negative balance and
   failed payments so users can key off color alone. Hidden by default via
   the `hidden` attribute the JS sets; when the form is in error, the input
   border lights up for extra affordance. */
.waitlist-error {
  color: var(--rojo-100, #b3261e);
  font-size: var(--fs-body-s);
  font-weight: 500;
  margin-top: 12px;
  max-width: 420px;
}

.waitlist.is-error .waitlist-input {
  border-color: var(--rojo-100, #b3261e);
}

.waitlist.is-submitting .waitlist-submit {
  opacity: 0.6;
  cursor: wait;
}
.waitlist.is-success .waitlist-input,
.waitlist.is-success .btn { display: none; }
.waitlist.is-success + .waitlist-success { display: block; }

@media (max-width: 640px) {
  .waitlist-input { min-width: 0; flex: 1 1 100%; }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--verde-900);
  color: var(--hueso);
  padding: 80px 0 40px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-col h4 {
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.6);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: var(--fs-body);
  color: var(--hueso);
  transition: color var(--dur-fast) var(--ease-standard);
}
.footer-col a:hover { color: var(--verde-300); }
.footer-bottom {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--verde-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-mouseprint {
  margin-top: 24px;
  font-size: var(--fs-caption);
  color: rgba(250, 247, 242, 0.5);
  line-height: 1.6;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(250, 247, 242, 0.7);
}
.footer-social a:hover { color: var(--verde-300); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 1023px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------- Wordmark (inline SVG-free, just type) ---------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--verde-700);
}
.wordmark-dot {
  width: 6px;
  height: 6px;
  background: var(--oro);
  border-radius: 50%;
  margin-left: 3px;
  align-self: flex-end;
  margin-bottom: 6px;
}
.wordmark--on-dark { color: var(--hueso); }

/* ---------- Reveal on scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-deliberate) var(--ease-emphasized),
              transform var(--dur-deliberate) var(--ease-emphasized);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-device { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}