/* ─────────────────────────────────────────────
   Web Polished – Landing Page Styles
   Tokens follow the Web Polished design system
   (light by default, dark via prefers-color-scheme).
   ───────────────────────────────────────────── */

/* ════ TOKENS ════ */
:root {
  color-scheme: light dark;

  --surface:        #FAFAF8;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F1F1EE;
  --surface-glass:  rgba(250, 250, 248, 0.86);
  --ink:            #18181B;
  --ink-muted:      #52525B;
  --line:           #E4E4E0;
  --line-strong:    #8A8A93;
  --brand:          #4B5BD7;
  --brand-strong:   #3A48B8;
  --brand-tint:     #ECEEFC;
  --on-brand:       #FFFFFF;
  --shadow-card:    0 1px 2px rgba(24, 24, 27, 0.06), 0 8px 24px rgba(24, 24, 27, 0.06);

  --font-sans: 'Manrope', 'Heebo', system-ui, sans-serif;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* Strong ease-out (easeOutQuint) for anything entering or reacting to the user */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Softer ease-out (easeOutCubic) for slow, scroll-length motion like the hero polish */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:        #141416;
    --surface-raised: #1C1C1F;
    --surface-sunken: #0E0E10;
    --surface-glass:  rgba(20, 20, 22, 0.86);
    --ink:            #F4F4F2;
    --ink-muted:      #B4B4BB;
    --line:           #2A2A2E;
    --line-strong:    #6B6B74;
    --brand:          #7B87F0;
    --brand-strong:   #A3ACF5;
    --brand-tint:     #22243A;
    --on-brand:       #141416;
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/* ════ BASE ════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; }
::selection { background: var(--brand-tint); color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ════ LAYOUT ════ */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section { padding-block: var(--space-16); }
.section--sunken { background: var(--surface-sunken); }
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}
.section-head .lead { margin-top: var(--space-4); }

@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-8); }
  .section { padding-block: var(--space-24); }
}

/* ════ TYPE ════ */
.display-1 {
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.17;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.display-2 {
  font-size: clamp(28px, 4.5vw, 36px);
  line-height: 1.22;
  font-weight: 500;
}
.heading { font-size: 22px; line-height: 30px; font-weight: 500; }
.lead    { font-size: 18px; line-height: 30px; font-weight: 300; color: var(--ink-muted); }
.muted   { color: var(--ink-muted); }
.small   { font-size: 14px; line-height: 22px; }

/* ════ ICONS — stroke only, one detail in brand ════ */
.ico {
  width: 28px; height: 28px; flex-shrink: 0;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico .accent { stroke: var(--brand); }
.ico--sm { width: 20px; height: 20px; }
.ico--xs { width: 16px; height: 16px; }

/* ════ BUTTONS ════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.btn .ico { stroke: currentColor; }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--lg { min-height: 52px; padding: 14px var(--space-8); font-size: 16px; }
/* Hover only on real pointers — on touch a tap would leave the hover state stuck */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--brand-strong); }
  .btn--secondary:hover { background: var(--surface-sunken); }
}
/* Press feedback — after :hover so it wins while pressed */
.btn:active { transform: scale(0.97); }

/* ════ CARDS ════ */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow 200ms ease, translate 200ms var(--ease-out);
}
/* The lift uses the separate `translate` property so it never fights the
   reveal's `transform`; a card's shadow appears on hover only. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-card); }
  .card.hover-lift:hover { translate: 0 -4px; }
}

/* ════ HEADER ════ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-glass);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo { display: block; flex-shrink: 0; padding-block: var(--space-2); }
.site-logo img { height: 40px; width: auto; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-link {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color .2s ease;
}
.icon-link .ico { stroke: var(--ink-muted); }
.icon-link:hover { background: var(--surface-sunken); }
.icon-link:hover .ico { stroke: var(--ink); }
.header-cta { display: none; }
@media (min-width: 640px) {
  .site-logo img { height: 44px; }
  .header-cta { display: inline-flex; }
}

/* ════ FLOATING WHATSAPP ════ */
.wa-float {
  position: fixed;
  bottom: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: 50;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { transform: translateY(-2px); }
}
.wa-float:active { transform: scale(0.97); }
.wa-float svg { width: 26px; height: 26px; fill: var(--surface); }
/* One 2s pulse, then a 4s rest — the button is always on screen */
.wa-float::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  background: var(--ink);
  animation: pulseRing 6s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%        { transform: scale(1);   opacity: .3; }
  33%, 100% { transform: scale(1.6); opacity: 0;  }
}

/* ════ HERO ════ */
.hero {
  /* Polish phone height: as tall as fits under the header */
  --phone-h: min(520px, calc(100svh - var(--header-h) - 48px));
  /* Extra scrolling while the phone stays pinned and the polish plays */
  --pin-len: 150vh;
  text-align: center;
}
.hero-pin { padding-block: var(--space-16); }
.hero .inner { max-width: 760px; margin-inline: auto; }
.hero h1 { margin-bottom: var(--space-6); }
.hero .lead { max-width: 640px; margin: 0 auto var(--space-8); }
.trust {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--space-3) var(--space-6);
  font-size: 14px; line-height: 22px;
  color: var(--ink-muted);
}
.trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust .ico { stroke: var(--ink-muted); }
@media (min-width: 1024px) {
  .hero { --phone-h: min(572px, calc(100svh - var(--header-h) - 96px)); }
  .hero-pin { padding-block: var(--space-24); }
  /* Two columns: text at the start (right in RTL), polish phone at the end */
  .hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
  }
  .hero .inner { margin-inline: 0; text-align: start; }
  .hero .lead  { margin-inline: 0; }
  .hero .trust { justify-content: flex-start; }
}

/* Pinned stage — the phone stays put on screen while the polish plays.
   .polish-on is set in <head> (skipped for reduced motion). Desktop pins the
   whole hero, text and phone; smaller screens let the text scroll away and
   pin the phone alone, centred under the header. */
@media (min-width: 1024px) {
  .polish-on .hero { height: calc(100svh - var(--header-h) + var(--pin-len)); }
  .polish-on .hero-pin {
    position: sticky; top: var(--header-h);
    height: calc(100svh - var(--header-h));
    padding-block: 0;
    display: flex; align-items: center;
  }
}
@media (max-width: 1023px) {
  .polish-on .polish-track { height: calc(var(--phone-h) + var(--pin-len)); }
  .polish-on .polish {
    position: sticky;
    top: calc(var(--header-h) + (100svh - var(--header-h) - var(--phone-h)) / 2);
  }
}

/* ════ HERO POLISH — a messy "before" site is polished into a clean
   "after" site behind a brand-blue scan line, then the gem grows over the
   phone and sparkles. No glow, shadow or gradient; the scan line and the
   gem's facet are the only blue. ════ */

.polish-track { margin-top: var(--space-12); }
@media (min-width: 1024px) { .polish-track { margin-top: 0; justify-self: center; } }

.polish {
  position: relative;
  height: var(--phone-h);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  padding: 8px;
  background: #18181B;
  border: 1px solid var(--line);
  border-radius: 44px;
}

.polish-island {
  position: absolute; top: 16px; left: 50%; z-index: 3;
  width: 30%; height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0E0E10;
}
.polish-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: var(--surface-sunken);
}
.polish-layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 40px 14px 14px;
}
.polish-before { background: var(--surface-sunken); }
.polish-after  { background: var(--surface-raised); }

/* Mock-site building blocks */
.mk {
  display: block; flex-shrink: 0;
  width: var(--w, 100%);
  height: var(--h, 6px);
  border-radius: 2px;
}
.mk-row   { display: flex; align-items: center; justify-content: space-between; }
.mk-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mk-stack--center { align-items: center; }
.mk-fill  { flex: 1 1 auto; min-height: 32px; }
.mk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-card  {
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mk-list     { display: flex; flex-direction: column; gap: 6px; }
.mk-list-row { display: flex; align-items: center; gap: 8px; }
.mk-dot {
  width: 12px; height: 12px; flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.mk-burger { display: flex; flex-direction: column; gap: 3px; }
.mk-burger span { display: block; width: 14px; height: 2px; border-radius: 1px; background: var(--ink); }
.mk-foot {
  display: flex; justify-content: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* Before: grey, crooked, out of focus */
.polish-before .mk {
  background: var(--line-strong);
  opacity: .3;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
}
.polish-before .mk--blur { opacity: .5; filter: blur(1.6px); }
.polish-before .mk--box  { opacity: .2; border-radius: 3px; }
.polish-before .mk-pile  { display: flex; flex-direction: column; align-items: flex-start; }
.polish-before .mk-cards { align-items: start; }
.polish-before .mk-foot--messy { justify-content: flex-start; border-top-color: transparent; }

/* After: aligned, ink on white */
.polish-after .mk         { background: var(--ink); }
.polish-after .mk--muted  { background: var(--line-strong); }
.polish-after .mk--img    { background: var(--surface-sunken); border-radius: 6px; }
.polish-after .mk--btn    { background: var(--ink); border-radius: 6px; margin-top: 4px; }

/* The gem — exact mark, brand-token colours (matches mark-ink / mark-white).
   A small one in the mock site's footer, and a large one for the finale. */
.polish-gem { display: block; width: 40px; }
.polish-gem svg,
.polish-crown-gem > svg:first-child { display: block; width: 100%; height: auto; overflow: visible; }
.polish-gem .facet,   .polish-crown .facet   { fill: var(--brand); }
.polish-gem .outline, .polish-crown .outline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }

/* Finale: covers the whole phone; the gem sits on the faded-out site */
.polish-crown {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.polish-crown-gem { position: relative; display: block; width: 84%; }
.polish-spark {
  position: absolute;
  height: auto; aspect-ratio: 1;
  fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round;
  opacity: 0;
  transform: scale(0);
}
.polish-spark--1 { top: -16%;   inset-inline-end: 2%;    width: 22%; }
.polish-spark--2 { top: 4%;     inset-inline-start: -4%; width: 14%; }
.polish-spark--3 { bottom: 2%;  inset-inline-end: 16%;   width: 11%; }

/* Scan line: a full-height layer whose top edge is the bar; it travels
   from the top of the screen to the bottom, in step with the reveal */
.polish-scan {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
}
.polish-scan::before {
  content: '';
  position: absolute; top: 0; inset-inline: 0;
  height: 2px;
  background: var(--brand);
}

@keyframes polishReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes polishScan {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* The gem grows from the mock site's footer to cover the phone,
   while the site behind it fades back */
@keyframes gemGrow {
  0%   { opacity: 0; transform: translateY(42%) scale(.18); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes siteFade { to { opacity: .1; } }

/* Without JS (or with reduced motion) the page simply shows the finished
   site. .polish-on (from <head>) starts it in "before"; JS then adds one
   driver: .is-scroll or .is-play. */
.polish-on .polish-after { clip-path: inset(0 0 100% 0); }

/* Driver 1 — scroll-driven (CSS scroll timeline; JS sets each range in px) */
.polish.is-scroll .polish-after,
.polish.is-scroll .polish-scan,
.polish.is-scroll .polish-crown,
.polish.is-scroll .polish-after > * {
  animation-duration: auto;
  /* Milder than --ease-out-soft: the scroll itself already adds softness */
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
}
.polish.is-scroll .polish-after       { animation-name: polishReveal; animation-range: var(--polish-start) var(--polish-end); }
.polish.is-scroll .polish-scan        { animation-name: polishScan;   animation-range: var(--polish-start) var(--polish-end); }
.polish.is-scroll .polish-crown       { animation-name: gemGrow;      animation-range: var(--gem-start) var(--gem-end); }
.polish.is-scroll .polish-after > *   { animation-name: siteFade;     animation-range: var(--gem-start) var(--gem-end); }

/* Driver 2 — fallback: plays once when the phone comes into view */
.polish.is-play .polish-after       { animation: polishReveal 2.8s var(--ease-out-soft) .3s both; }
.polish.is-play .polish-scan        { animation: polishScan   2.8s var(--ease-out-soft) .3s both; }
.polish.is-play .polish-crown       { animation: gemGrow      1.4s var(--ease-out-soft) 3.5s both; }
.polish.is-play .polish-after > *   { animation: siteFade     1.4s var(--ease-out-soft) 3.5s both; }

/* Once the gem is full size it sparkles: the facet blinks and three
   thin stars twinkle around it, one after another */
.polish.is-polished .polish-crown .facet { animation: facetBlink 1.1s var(--ease-out-soft) 1; }
.polish.is-polished .polish-spark--1     { animation: sparkle 1s var(--ease-out-soft) 1; }
.polish.is-polished .polish-spark--2     { animation: sparkle 1s var(--ease-out-soft) .18s 1; }
.polish.is-polished .polish-spark--3     { animation: sparkle 1s var(--ease-out-soft) .36s 1; }
@keyframes facetBlink {
  0%, 100% { opacity: 1; }
  35%      { opacity: .3; }
}
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0)   rotate(0deg); }
  40%  { opacity: 1; transform: scale(1)   rotate(45deg); }
  100% { opacity: 0; transform: scale(.4)  rotate(90deg); }
}

/* ════ CARD GRID ════ */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.pain-card .ico { margin-bottom: var(--space-4); }
.pain-card h3 { margin-bottom: var(--space-3); }

/* ════ FEATURE LIST ════ */
.feature-list {
  max-width: 720px; margin-inline: auto;
  display: grid; gap: var(--space-4);
}
.feature-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.check {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-sunken);
}
.feature-item h3 { font-size: 17px; line-height: 26px; font-weight: 500; }
.feature-item p  { margin-top: var(--space-1); font-size: 15px; line-height: 24px; color: var(--ink-muted); }

/* ════ DEMOS ════ */
/* Three across on desktop, two on tablets (an odd last card stays half-width, centred), one on phones */
.demos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.demo { flex: 1 1 300px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 700px)  { .demo { max-width: calc((100% - var(--space-6)) / 2); } }
@media (min-width: 1024px) { .demo { max-width: none; } }
.demo-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}
.demo-img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

/* Site ↔ dashboard crossfade, driven by the card's two buttons.
   Default: the demo site. Pointing at "לממשק הניהול" (hover, or keyboard focus) fades the
   dashboard in over it; leaving it, or pointing at "לאתר הדמו", brings the site back.
   Touch screens have no hover, so script.js toggles .show-admin every 3s instead. The site
   image stays put underneath the dashboard, so the picture never dips in brightness mid-fade. */
.demo-img--admin { opacity: 0; transition: opacity 500ms ease-in-out; }
.demo--swap:is(.show-admin, :has(.demo-link:focus-visible)) .demo-img--admin { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .demo--swap:has(.demo-link:hover) .demo-img--admin { opacity: 1; }
}

/* Entrance: when the row comes into view the cards rise in one after another,
   in reading order (right to left), 120ms apart. On phones they stack, so each
   card simply reveals when it arrives. */
@media (min-width: 700px) {
  .demos .demo:nth-child(2) { --stagger: .12s; }
  .demos .demo:nth-child(3) { --stagger: .24s; }
}
.demo-body {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
}
.demo-links {
  margin-top: auto;
  padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-6);
}
/* Quiet link: ink text, brand-blue arrow (the design system's "quiet" button) */
.demo-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  font-size: 15px; line-height: 20px; font-weight: 500;
}
.demo-link span { color: var(--brand); transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .demo-link:hover span { translate: -3px 0; }   /* nudges toward the reading direction (RTL) */
}

/* ════ ABOUT ════ */
.about-section { padding-bottom: 0; }   /* the CTA section below supplies the gap */
.about {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.about-text h2 { margin-bottom: var(--space-6); }
.about-text p {
  max-width: 640px;
  font-size: 18px; line-height: 30px; font-weight: 300;
  color: var(--ink-muted);
}
.about-text p + p { margin-top: var(--space-4); }
.about-photo {
  order: -1;                 /* mobile: face first, then the text */
  position: relative;
  width: 100%; max-width: 360px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  /* Text at the start (right in RTL), portrait at the end */
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--space-16); }
  .about-photo { order: 0; max-width: 400px; }
}

/* Portrait polish: until the photo is in view it sits under a grey,
   out-of-focus veil; the brand-blue line then sweeps down and the veil
   retracts behind it. Only with .polish-on (no reduced motion, JS on). */
.about-veil {
  position: absolute; inset: 0;
  display: none;
  background: color-mix(in srgb, var(--surface-sunken) 35%, transparent);
  -webkit-backdrop-filter: grayscale(1) blur(6px);
  backdrop-filter: grayscale(1) blur(6px);
}
.polish-on .about-veil { display: block; }
@keyframes veilRetract {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }
}
.about-photo.is-unveiled .about-veil  { animation: veilRetract 2s var(--ease-out-soft) .2s both; }
.about-photo.is-unveiled .polish-scan { animation: polishScan  2s var(--ease-out-soft) .2s both; }

/* ════ FOOTER ════ */
.cta-card {
  max-width: 760px; margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.cta-card h2 { margin-bottom: var(--space-4); }
.cta-card .lead { margin-bottom: var(--space-8); }
@media (min-width: 640px) {
  .cta-card { padding: var(--space-16) var(--space-12); }
}
.footer-bar { border-top: 1px solid var(--line); padding-block: var(--space-6); }
.footer-bar .container {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  font-size: 14px; line-height: 22px; color: var(--ink-muted);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-3); }
.footer-brand img { width: 28px; height: auto; }
.footer-ig { display: inline-flex; align-items: center; gap: var(--space-2); transition: color .2s ease; }
.footer-ig .ico { stroke: currentColor; }
.footer-ig:hover { color: var(--ink); }
@media (min-width: 640px) {
  /* Keep the Instagram link clear of the floating WhatsApp button */
  .footer-bar .container { flex-direction: row; padding-inline-end: 104px; }
}

/* ════ SCROLL REVEAL ════
   --stagger delays the reveal only, never the hover. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .55s var(--ease-out) var(--stagger, 0s),
    transform .55s var(--ease-out) var(--stagger, 0s);
}
.card.reveal {
  transition:
    opacity .55s var(--ease-out) var(--stagger, 0s),
    transform .55s var(--ease-out) var(--stagger, 0s),
    box-shadow 200ms ease,
    translate 200ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Gentler, not zero: keep a soft fade and the hover shadow, drop the movement */
  .reveal, .card.reveal { transform: none; transition: opacity .3s ease, box-shadow 200ms ease; }
  .card.hover-lift:hover { translate: none; }
  .wa-float::before { animation: none !important; }
  /* Demo cards: no movement on entry (handled by .reveal above); the site/dashboard swap becomes a quick, gentle fade */
  .demo-img--admin { transition-duration: 200ms; }
  /* Polish: show the finished "after" site straight away, unpinned */
  .polish .polish-after { animation: none !important; clip-path: none !important; }
  .polish .polish-after > * { animation: none !important; opacity: 1 !important; }
  .polish .polish-scan,
  .polish .polish-crown,
  .about-veil, .about-photo .polish-scan { display: none !important; }
  .polish-on .hero, .polish-on .polish-track { height: auto !important; }
  .polish-on .hero-pin, .polish-on .polish { position: relative; top: auto; height: auto; }
  .polish-on .polish { height: var(--phone-h); }
}