/* PhotoFitly — "vibrant photo studio" light theme.
   Art gallery meets photo lab. Soft white, rainbow-mesh accents, tilted gallery frames.
   Fonts: Lexend (headings) + Atkinson Hyperlegible (body), SIL OFL 1.1, $0. */

:root {
  --paper: #fffdf8;
  --ink: #23202e;
  --ink-soft: #55516a;
  --coral: #ff5d73;
  --violet: #8b5cf6;
  --lime: #84cc16;
  --amber: #fbbf24;
  --cyan: #22d3ee;
  --frame: #ffffff;
  --line: #ece7f5;
  --radius: 18px;
  --shadow-frame: 0 18px 40px -18px rgba(60, 40, 120, 0.28), 0 4px 12px rgba(60, 40, 120, 0.08);
  --shadow-pop: 0 24px 48px -16px rgba(255, 93, 115, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Rainbow mesh wash behind everything — subtle, shifts slowly */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 8% 4%, rgba(255, 93, 115, 0.10), transparent 60%),
    radial-gradient(42rem 34rem at 92% 10%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(40rem 32rem at 50% 100%, rgba(132, 204, 22, 0.10), transparent 60%),
    radial-gradient(30rem 24rem at 85% 78%, rgba(34, 211, 238, 0.08), transparent 60%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 4rem 2rem, -3rem 3rem, 2rem -3rem, -4rem -2rem; }
}

h1, h2, h3 {
  font-family: "Lexend", system-ui, sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  max-width: 72rem;
  margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 0.6rem; font-family: "Lexend", sans-serif; font-weight: 800; font-size: 1.35rem; }
.logo-mark { width: 34px; height: 34px; }
.pill {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, var(--coral), var(--violet));
  box-shadow: 0 6px 16px -6px rgba(255, 93, 115, 0.5);
}

/* ---------- Hero ---------- */
.hero { padding: 0 0 clamp(2rem, 5vw, 3.5rem); }
.hero-inner { max-width: 62rem; margin: 0 auto; text-align: center; padding: clamp(2rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2.5rem) 0; }

.eyebrow {
  display: inline-block;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 1rem;
}
.eyebrow::before, .eyebrow::after { content: "✦"; color: var(--coral); margin: 0 0.5em; }

.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  font-weight: 800;
  max-width: 20ch;
  margin: 0 auto 0.7em;
}
.hero h1 .pop {
  background: linear-gradient(100deg, var(--coral) 10%, var(--violet) 55%, var(--cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 auto 2rem;
}

/* ---------- Email capture ---------- */
.capture { max-width: 34rem; margin: 0 auto; }
.capture-label {
  display: block;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.capture-row { display: flex; gap: 0.6rem; }
.capture-row input {
  flex: 1;
  min-height: 60px;
  font-size: 1.05rem;
  font-family: inherit;
  padding: 0 1.2rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
.capture-row input::placeholder { color: #a09bb8; }
.capture-row input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18); }
.capture-row button {
  min-height: 60px;
  padding: 0 1.8rem;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(100deg, var(--coral), var(--violet));
  box-shadow: var(--shadow-pop);
  transition: transform 0.18s ease, box-shadow 0.18s ease, translate 0.25s ease;
  white-space: nowrap;
}
.capture-row button:hover { transform: translateY(-2px); box-shadow: 0 28px 54px -16px rgba(255, 93, 115, 0.45); }
.microcopy { color: var(--ink-soft); font-size: 0.95rem; margin: 0.8rem 0 0; }
.form-msg { min-height: 1.6em; font-weight: 700; margin: 0.5rem 0 0; }
.form-msg.ok { color: #4d7c0f; }
.form-msg.err { color: #dc2626; }

/* ---------- Gallery wall ---------- */
.gallery { padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
.gallery-inner { max-width: 72rem; margin: 0 auto; }
.gallery h2 { text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; }
.gallery-sub { text-align: center; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 2.5rem; }

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}
.frame {
  background: var(--frame);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 0.9rem 0.4rem;
  box-shadow: var(--shadow-frame);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.35s ease;
}
.frame:nth-child(1) { transform: rotate(-2.2deg); }
.frame:nth-child(2) { transform: rotate(1.6deg) translateY(0.8rem); }
.frame:nth-child(3) { transform: rotate(-1.2deg) translateY(-0.4rem); }
.frame:nth-child(4) { transform: rotate(2.1deg) translateY(0.5rem); }
.frame:hover, .frame:focus-within {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px -20px rgba(60, 40, 120, 0.35);
  z-index: 2;
}
/* washi tape corners */
.frame::before, .frame::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 92px;
  height: 28px;
  opacity: 0.85;
  border-left: 1px dashed rgba(255,255,255,0.6);
  border-right: 1px dashed rgba(255,255,255,0.6);
  box-shadow: 0 2px 5px rgba(60, 40, 120, 0.12);
}
.frame::before { left: 8px; transform: rotate(-8deg); background: linear-gradient(100deg, rgba(255,93,115,0.75), rgba(255,93,115,0.55)); }
.frame::after { right: 8px; transform: rotate(8deg); background: linear-gradient(100deg, rgba(139,92,246,0.75), rgba(139,92,246,0.55)); }
.frame:nth-child(even)::before { background: linear-gradient(100deg, rgba(132,204,22,0.75), rgba(132,204,22,0.55)); }
.frame:nth-child(even)::after { background: linear-gradient(100deg, rgba(34,211,238,0.75), rgba(34,211,238,0.55)); }

.frame img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 3px;
  background: #f3effc;
}
.frame figcaption {
  font-family: "Lexend", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  text-align: center;
  padding: 0.9rem 0.4rem 0.7rem;
  color: var(--ink-soft);
}
.frame figcaption strong { color: var(--ink); display: block; font-size: 1.02rem; }

/* ---------- Teasers ---------- */
.teasers { padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.teasers-inner { max-width: 72rem; margin: 0 auto; }
.teasers h2 { text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: 2.2rem; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px -18px rgba(60, 40, 120, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--coral), var(--violet), var(--cyan), var(--lime));
  background-size: 200% 100%;
  animation: stripe-shift 8s linear infinite;
}
.card:nth-child(2)::before { animation-delay: -2.6s; }
.card:nth-child(3)::before { animation-delay: -5.2s; }
@keyframes stripe-shift { from { background-position: 0 0; } to { background-position: 200% 0; } }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(60, 40, 120, 0.32); }
.card-icon { width: 52px; height: 52px; margin-bottom: 1rem; }
.card:nth-child(1) .card-icon { color: var(--coral); }
.card:nth-child(2) .card-icon { color: var(--violet); }
.card:nth-child(3) .card-icon { color: #65a30d; }
.card h3 { font-size: 1.25rem; font-weight: 700; }
.card p { color: var(--ink-soft); margin: 0; }

/* ---------- How it'll work ---------- */
.how { padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 0; }
.how-inner { max-width: 62rem; margin: 0 auto; }
.how h2 { text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; }
.how-sub { text-align: center; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 2rem; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  counter-reset: step;
}
.steps li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  box-shadow: 0 12px 30px -20px rgba(60, 40, 120, 0.25);
}
.step-n {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Lexend", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--violet));
  box-shadow: 0 8px 18px -8px rgba(255, 93, 115, 0.55);
}
.steps li:nth-child(2) .step-n { background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 8px 18px -8px rgba(139, 92, 246, 0.55); }
.steps li:nth-child(3) .step-n { background: linear-gradient(135deg, var(--cyan), var(--lime)); box-shadow: 0 8px 18px -8px rgba(34, 211, 238, 0.5); }
.steps strong { font-family: "Lexend", sans-serif; font-size: 1.1rem; display: block; margin-bottom: 0.25rem; }
.steps p { color: var(--ink-soft); margin: 0; font-size: 0.98rem; }

/* ---------- Before/after demo ---------- */
.demo { padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) 0; }
.demo-inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.demo h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; }
.demo-sub { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 2rem; }
.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-frame);
  border: 1px solid var(--line);
  background: #fff;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  margin: 0 auto;
}
.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* "Before" layer: same photo, dulled with CSS filters, clipped to the left portion.
   JS drives the clip so the divider and the reveal stay in sync. */
.compare-before {
  filter: saturate(0.22) brightness(0.8) contrast(0.92);
  clip-path: inset(0 50% 0 0);
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(35, 32, 46, 0.35);
  pointer-events: none;
}
.compare-divider::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(35, 32, 46, 0.3);
  white-space: nowrap;
}
.compare-tag {
  position: absolute;
  top: 1rem;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(35, 32, 46, 0.72);
  color: #fff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  pointer-events: none;
}
.tag-before { left: 1rem; }
.tag-after { right: 1rem; }
.compare-label {
  display: block;
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  margin: 1.4rem 0 0.4rem;
}
.compare-range {
  width: 100%;
  max-width: 28rem;
  min-height: 48px;
  accent-color: var(--violet);
  cursor: pointer;
}
.demo-note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 46ch;
  margin: 0.6rem auto 0;
  font-style: italic;
}

/* ---------- FAQ ---------- */
.faq { padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
.faq-inner { max-width: 44rem; margin: 0 auto; }
.faq h2 { text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: 2rem; }
.qa {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
  box-shadow: 0 10px 26px -22px rgba(60, 40, 120, 0.3);
  overflow: hidden;
}
.qa summary {
  font-family: "Lexend", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--violet));
  transition: transform 0.25s ease;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { color: var(--ink-soft); margin: 0; padding: 0 1.4rem 1.3rem; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.logo-line {
  font-family: "Lexend", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.trust { font-size: 0.95rem; max-width: 44ch; margin: 0 auto 0.6rem; }
.copyright { font-size: 0.85rem; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .capture-row { flex-direction: column; }
  .capture-row button { width: 100%; }
  .frame img { height: 260px; }
  .frame:nth-child(2), .frame:nth-child(3), .frame:nth-child(4) { transform: rotate(-1deg); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .frame:nth-child(1), .frame:nth-child(2), .frame:nth-child(3), .frame:nth-child(4) { transform: none; }
  html { scroll-behavior: auto; }
}

/* Decorative motion layer — content fully readable with CSS/JS disabled. */

/* ---------- Hero: positioning context for canvas + parallax deco ---------- */
.hero { position: relative; overflow: clip; }
.hero-inner { position: relative; z-index: 1; }

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hl { position: absolute; display: block; }

/* Back layer: big soft coral glow — drifts slowest */
.hl-1 {
  width: 26rem; height: 26rem;
  left: -8rem; top: -10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 93, 115, 0.20), transparent 65%);
  --py: -46px;
}
/* Mid layer: violet ring — medium speed */
.hl-2 {
  width: 12rem; height: 12rem;
  right: -3rem; top: 6rem;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.28);
  box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.18);
  --py: 64px;
}
/* Front layer: cyan dot cluster — fastest */
.hl-3 {
  width: 16rem; height: 6rem;
  left: 6%; bottom: -2rem;
  background-image: radial-gradient(rgba(34, 211, 238, 0.5) 2.5px, transparent 2.6px);
  background-size: 22px 22px;
  --py: 110px;
  --px: 30px;
}
/* Accent: small lime blob — counter-drifts upward */
.hl-4 {
  width: 9rem; height: 9rem;
  right: 12%; bottom: 4rem;
  border-radius: 42% 58% 60% 40% / 45% 42% 58% 55%;
  background: radial-gradient(circle, rgba(132, 204, 22, 0.22), transparent 65%);
  --py: -84px;
}

/* Idle float, composed with the scroll drift below (separate properties). */
.hl { animation: floaty 9s ease-in-out infinite; }
.hl-2 { animation-duration: 11s; animation-delay: -3s; }
.hl-4 { animation-duration: 7.5s; animation-delay: -5s; }
@keyframes floaty { 50% { translate: 0 -14px; } }

/* Scroll-linked differential drift: 0 KB parallax, decorative layers only.
   Each layer travels a different distance as the hero scrolls out = depth. */
@supports (animation-timeline: view()) {
  .hl {
    animation: hero-drift linear both, floaty 9s ease-in-out infinite;
    animation-timeline: view(), auto;
    animation-range: entry 0% exit 100%, normal;
  }
  @keyframes hero-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
  }
}

/* ---------- CSS scroll-driven reveals (0 KB) ---------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  @keyframes rise-in {
    from { opacity: 0; translate: 0 22px; }
  }
}

/* ---------- IO stagger entrances ----------
   `.js` is added by script.js only when JS runs (progressive enhancement):
   no JS = no hiding, content fully visible. `.in` is added per item as its
   container scrolls into view. `translate` (not `transform`) is used so the
   gallery frames' base rotations are never clobbered. */
.frames.js > *, .cards.js > *, .steps.js > * {
  opacity: 0;
  translate: 0 18px;
}
.frames.js > * {
  transition: opacity 0.55s ease, translate 0.55s ease,
              transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.35s ease;
}
.cards.js > * {
  transition: opacity 0.55s ease, translate 0.55s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}
.steps.js > * {
  transition: opacity 0.55s ease, translate 0.55s ease;
}
.frames.js > *.in, .cards.js > *.in, .steps.js > *.in {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Wow-pass reduced-motion guards ----------
   (The global reduced-motion block at the end of this file also kills all
   animations/transitions with !important; these rules additionally make sure
   JS-gated states render their final static values.) */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .frames.js > *, .cards.js > *, .steps.js > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Visual design tokens — light + vibrant. */

:root {
  --display: "Space Grotesk", "Lexend", system-ui, sans-serif;
  --holo: linear-gradient(115deg, #ff5d73, #a855f7, #22d3ee, #a3e635, #ff5d73);
  --glass: rgba(255, 255, 255, 0.62);
}

/* --- Futuristic display headlines (body stays Atkinson Hyperlegible) --- */
h1, h2 { font-family: var(--display); letter-spacing: -0.03em; }

/* Holographic headline pop — animated sheen across the gradient */
.hero h1 .pop {
  background: linear-gradient(110deg, #ff5d73, #a855f7, #22d3ee, #a3e635, #ff5d73);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-flow 7s linear infinite;
  filter: drop-shadow(0 2px 14px rgba(168, 85, 247, 0.28));
}
@keyframes holo-flow { to { background-position: 220% center; } }

/* Holographic rule under each section headline */
.gallery h2::after, .teasers h2::after, .demo h2::after, .faq h2::after, .how h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 99px;
  margin: 0.7rem auto 0;
  background: var(--holo);
  background-size: 200% auto;
  animation: holo-flow 9s linear infinite;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.45);
}

/* --- Aurora layer: slow-rotating conic wash behind the page --- */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 93, 115, 0.055), rgba(139, 92, 246, 0.055),
    rgba(34, 211, 238, 0.055), rgba(163, 230, 53, 0.05),
    rgba(255, 93, 115, 0.055));
  filter: blur(48px);
  animation: aurora-spin 70s linear infinite;
}
@keyframes aurora-spin { to { transform: rotate(360deg); } }

/* --- Hero tech texture: fine lab-grid, faded at the edges --- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(65% 75% at 50% 32%, #000 25%, transparent 100%);
  mask-image: radial-gradient(65% 75% at 50% 32%, #000 25%, transparent 100%);
}

/* --- Glassmorphic cards: frosted, luminous edges --- */
.card, .steps li, .qa {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 40px -18px rgba(60, 40, 120, 0.3),
    0 0 44px -18px rgba(139, 92, 246, 0.35);
}
/* Luminous top hairline on step cards + FAQ items */
.steps li::before, .qa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 2px;
  border-radius: 2px;
  background: var(--holo);
  background-size: 200% auto;
  opacity: 0.85;
}
.card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 26px 48px -18px rgba(139, 92, 246, 0.42),
    0 0 60px -14px rgba(34, 211, 238, 0.3);
}
.card-icon { transition: filter 0.25s ease; }
.card:hover .card-icon { filter: drop-shadow(0 0 9px currentColor); }

/* AI scan sweep across step cards on hover (decorative) */
.steps li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 32%, rgba(34, 211, 238, 0.16) 50%, transparent 68%);
  background-size: 100% 230%;
  background-position: 0 -130%;
  opacity: 0;
}
.steps li:hover::after { opacity: 1; animation: scan-sweep 1.1s ease forwards; }
@keyframes scan-sweep { to { background-position: 0 130%; } }

/* --- Gallery frames: ambient halo per frame (spatial depth) --- */
.frame:nth-child(1) { box-shadow: var(--shadow-frame), 0 0 70px -12px rgba(255, 93, 115, 0.45); }
.frame:nth-child(2) { box-shadow: var(--shadow-frame), 0 0 70px -12px rgba(139, 92, 246, 0.45); }
.frame:nth-child(3) { box-shadow: var(--shadow-frame), 0 0 70px -12px rgba(34, 211, 238, 0.45); }
.frame:nth-child(4) { box-shadow: var(--shadow-frame), 0 0 70px -12px rgba(132, 204, 22, 0.5); }
.frame:hover, .frame:focus-within {
  box-shadow: 0 30px 60px -20px rgba(60, 40, 120, 0.35), 0 0 90px -10px rgba(139, 92, 246, 0.5);
}

/* --- Viewfinder corner marks on the compare box (photo-lab future) --- */
.vf { position: absolute; inset: 14px; pointer-events: none; }
.vf i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgba(34, 211, 238, 0.95);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8));
}
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 7px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 7px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 7px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 7px; }
.compare { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.28), var(--shadow-frame); }
.compare-divider::after {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.4), 0 6px 16px rgba(35, 32, 46, 0.3);
}

/* --- AI-native buttons: deeper gradient (contrast) + sheen sweep --- */
.pill { background: linear-gradient(100deg, #e11d48, #7c3aed); }
.capture-row button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #e11d48, #7c3aed);
}
.capture-row button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.capture-row button:hover::after, .capture-row button:focus-visible::after { transform: translateX(130%); }
.capture-row button:hover {
  box-shadow: 0 28px 54px -16px rgba(225, 29, 72, 0.5), 0 0 26px rgba(124, 58, 237, 0.35);
}

/* --- Holographic step badges + FAQ toggles --- */
.steps li:nth-child(1) .step-n { background: linear-gradient(135deg, #e11d48, #a855f7); box-shadow: 0 0 0 3px rgba(255,255,255,0.75), 0 10px 24px -8px rgba(168,85,247,0.65); }
.steps li:nth-child(2) .step-n { background: linear-gradient(135deg, #a855f7, #22d3ee); box-shadow: 0 0 0 3px rgba(255,255,255,0.75), 0 10px 24px -8px rgba(34,211,238,0.6); }
.steps li:nth-child(3) .step-n { background: linear-gradient(135deg, #22d3ee, #a3e635); box-shadow: 0 0 0 3px rgba(255,255,255,0.75), 0 10px 24px -8px rgba(163,230,53,0.55); }
.qa summary::after { background: linear-gradient(135deg, #e11d48, #a855f7); }

/* --- Logo glow + footer holo hairline --- */
.logo-mark { filter: drop-shadow(0 0 7px rgba(139, 92, 246, 0.55)); }
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: var(--holo);
  background-size: 200% auto;
  opacity: 0.55;
}

/* Calm motion is the default: parallax + particles off, gentle fades only. */

/* 1. PARALLAX OFF BY DEFAULT — hero deco layers become static (color pop kept). */
.hl { animation: none; }

/* 2. PARTICLES OFF BY DEFAULT — canvas hidden; script.js dust() bails. */
.hero-canvas { display: none; }

/* 3. SCROLL REVEALS GENTLE — subtle fade only, no rise. Later keyframes win.
   NOTE: the `animation` shorthand below resets animation-timeline to
   `auto`, so the longhands are re-declared after it. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise-in 0.9s ease-out both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  @keyframes rise-in {
    from { opacity: 0; }
  }
}

/* 4. HEADLINE REVEAL — single gentle fade-in (replaces the GSAP word cascade). */
.hero-inner { animation: hero-in 0.9s ease-out both; }
@keyframes hero-in { from { opacity: 0; } }

/* 5. IO stagger entrances — fade-only; hover transforms stay snappy. */
.frames.js > *, .cards.js > *, .steps.js > * { translate: 0 0; }

/* ---------- Full-top hero (W-11 close-out, 2026-10-23): the locked
   wall-break art as a full-bleed band across the entire top of the page —
   edge to edge, no frame, no side padding — with the headline below it.
   Art bytes unchanged; this is structure + CSS only. ---------- */
.hero-visual { position: relative; z-index: 1; margin: 0; max-width: none; width: 100%; }
.hero-visual img { display: block; width: 100%; height: clamp(340px, 72vh, 680px); object-fit: cover; object-position: 50% 30%; border-radius: 0; box-shadow: none; }
.hero-visual::after { content: ""; display: block; height: 6px; background: var(--holo); background-size: 200% auto; }

/* Wave C 2026-10-30: steps + teaser cards go image-led (library reuse) */
.steps .step-img{width:76px;height:76px;object-fit:cover;border-radius:14px;flex:0 0 auto;box-shadow:0 8px 20px -8px rgba(30,10,60,.35)}
.teasers .card-img{width:100%;height:160px;object-fit:cover;border-radius:12px;display:block;margin-bottom:.8rem}