/* ==========================================================================
   Opening — the same shop without marketing, then with it.

   Calm by design: copy and proof in one column, the film in a framed panel
   beside it — a real shop, filmed: dusk and an empty counter, then the lamps
   come on and customers line up to pay (assets/hero/photo, hero.js).
   ========================================================================== */

.hero{
  position:relative;
  background:var(--bg);            /* the 3D field starts below the opening */
  padding:calc(var(--nav-h) + 36px) 0 64px;
  min-height:100svh;
  display:flex;align-items:center;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(32px,4.5vw,64px);align-items:center;width:100%;
  max-width:1280px;
}

/* ---------- copy ---------- */
.hero-title{
  font-size:clamp(2.3rem,3.55vw,3.3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.03em;margin:0 0 22px;color:var(--ink);
}
@media (min-width:961px){.hero-title > span > span,.hero-title > span:first-child{white-space:nowrap}}
.hero-title > span{display:block}
.hero-title > .h-swap{display:grid}
.h-swap > span{grid-area:1/1;align-self:start;transition:opacity .45s var(--ease), transform .6s var(--ease)}
.h-a{color:var(--muted-2)}
.h-b{color:var(--v-700);opacity:0;transform:translateY(.35em);position:relative;justify-self:start;padding-bottom:.08em}
.hero[data-state="b"] .h-a{opacity:0;transform:translateY(-.35em)}
.hero[data-state="b"] .h-b{opacity:1;transform:none;transition-delay:.15s}
.h-b svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.26em;overflow:visible}
.h-b path{fill:none;stroke:var(--v-300);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset .9s var(--ease)}
.hero[data-state="b"] .h-b path{stroke-dashoffset:0;transition-delay:.5s}

.hero-lead{font-size:1.14rem;line-height:1.65;color:var(--ink-2);max-width:42ch;margin:0 0 30px;text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.link-cta{
  font-weight:700;font-size:1rem;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;
  text-decoration-color:var(--v-300);transition:color .25s, text-decoration-color .25s;
}
.link-cta:hover{color:var(--v-700);text-decoration-color:var(--v-700)}

.hero-trust{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);
}
.hero-trust li{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;color:var(--ink-2)}
.hero-trust svg{width:19px;height:19px;flex:none;color:var(--v-600)}

/* ---------- the panel ---------- */
.hero-panel{
  position:relative;margin:0;
  aspect-ratio:1.08;
  border-radius:28px;
  box-shadow:0 1px 0 rgba(23,18,58,.04), 0 34px 70px -38px rgba(23,18,58,.45);
}
.scene{
  position:absolute;inset:0;z-index:0;overflow:hidden;   /* own stacking context: the card and switch sit above it */
  border-radius:inherit;
  background:#2f3540;
}
/* ~600-byte blurred thumbnail of the "a" frame: fills the panel at once on a
   slow connection, and the sharp still fades in over it when it is decoded. */
.lq{
  position:absolute;inset:-6%;z-index:0;
  background:url("data:image/webp;base64,UklGRvAAAABXRUJQVlA4IOQAAACwBQCdASogACAAPu1mq0+ppSOiMBgIATAdiUAWI3iwGtOgaUZ+qjGwVM2RKqdrwPBqHuwtPAAA/un54D5kpc7u2uAS60BYvtf2QklmJo8KlxQitueOgJq3QmBxREEgSDagBMlWlAnqzU8UD2BQSKuA09HJ9LyZRe73AT5nStXDUsOnwjTyyXnqj5TvlefjCoEJnPCQyVVFBuG4zVo06+JOmgkdsgy5wE2hZo0PhIf2FwNdVJ9V2oiuKTJebgIx0XanuBLJ2RXlSQhIYn1AOzd3FFeplny3vc0rAywV8RQqu6hgIAA=") 50% 40%/cover no-repeat;
  filter:blur(14px);transition:opacity .8s var(--ease);
}
.hero.is-ready .lq{opacity:0}
.scene::before{ /* hairline over the film keeps the edge crisp on a white page */
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(23,18,58,.1);
}

/* The film: two stills and three clips stacked in one place. hero.js puts one
   layer on top (.on); .cut swaps instantly when the frames match, otherwise
   they cross-fade. Later layers sit above earlier ones. The frame is square,
   so on a wide panel the crop keeps the heads (object-position leans up). */
.film{position:absolute;inset:0;z-index:1}   /* the "a" still shows the moment it arrives, JS or not */
.film > *{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
  opacity:0;transition:opacity .45s var(--ease);
}
.film > .on{opacity:1}
.film > .cut{transition:none}

/* ---------- analytics card: the chart that turns ---------- */
.leadcard{
  position:absolute;z-index:3;top:18px;left:18px;
  width:min(212px,36%);              /* over the window; stops short of the faces in line */
  padding:13px 15px 10px;
  background:rgba(255,255,255,.96);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(23,18,58,.05), 0 16px 34px -18px rgba(23,18,58,.5);
  font-size:.82rem;
}
.lc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.lc-label{font-weight:700;color:var(--ink);white-space:nowrap}
.lc-trend{display:grid;font-weight:700;font-size:.76rem}
.lc-trend b{grid-area:1/1;padding:2px 8px;border-radius:100px;transition:opacity .35s var(--ease);white-space:nowrap;text-align:center}
.lc-trend .t-a{color:#b42335;background:#fdecee}
.lc-trend .t-b{color:#15803d;background:#e8f6ed;opacity:0}
.hero[data-state="b"] .lc-trend .t-a{opacity:0}
.hero[data-state="b"] .lc-trend .t-b{opacity:1;transition-delay:.4s}
.lc-chart{display:block;width:100%;height:auto;overflow:visible}
.lc-chart .grid{stroke:rgba(23,18,58,.07);stroke-width:1}
.lc-chart .ln{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lc-chart .a .ln{stroke:#d1495b}
.lc-chart .a .ar{fill:#d1495b;opacity:.1}
.lc-chart .b .ln{stroke:var(--v-600);stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .25s}
.lc-chart .b .ar{fill:var(--v-500);opacity:0;transition:opacity .8s var(--ease) .7s}
.lc-chart .b .dot{fill:var(--v-600);opacity:0;transition:opacity .3s 1.25s}
.lc-chart .a{transition:opacity .4s var(--ease)}
.hero[data-state="b"] .lc-chart .a{opacity:0}
.hero[data-state="b"] .lc-chart .b .ln{stroke-dashoffset:0}
.hero[data-state="b"] .lc-chart .b .ar{opacity:.12}
.hero[data-state="b"] .lc-chart .b .dot{opacity:1}

/* ---------- before / after switch, docked on the panel ---------- */
.ba{
  position:absolute;z-index:3;left:50%;bottom:18px;translate:-50% 0;
  display:inline-grid;grid-template-columns:1fr 1fr;
  padding:4px;border-radius:100px;
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(23,18,58,.05), 0 14px 30px -16px rgba(23,18,58,.55);
  font-size:.9rem;font-weight:700;
}
.ba button{position:relative;z-index:1;padding:8px 18px;border-radius:100px;color:var(--ink-2);transition:color .35s var(--ease);white-space:nowrap}
.ba .thumb{
  position:absolute;z-index:0;top:4px;bottom:4px;width:calc(50% - 4px);
  inset-inline-start:4px;border-radius:100px;background:var(--ink);
  transition:transform .5s var(--ease), background .35s;
}
.ba button[aria-pressed="true"]{color:#fff}
.hero[data-state="b"] .ba .thumb{background:var(--v-700);transform:translateX(-100%)}
html[dir="ltr"] .hero[data-state="b"] .ba .thumb{transform:translateX(100%)}

/* ---------- tablets and phones: headline, panel, then the rest ---------- */
@media (max-width:960px){
  .hero{min-height:0;padding:calc(var(--nav-h) + 18px) 0 44px}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy{display:contents}
  .hero-title{order:1;font-size:clamp(1.75rem,8.6vw,3.2rem);margin-bottom:18px}
  .hero-panel{order:2;aspect-ratio:1.18;border-radius:22px;margin-bottom:26px}
  .hero-lead{order:3;font-size:1.04rem;margin-bottom:22px}
  .hero-cta{order:4;gap:16px}
  .hero-trust{order:5;margin-top:26px;padding-top:18px;gap:10px 20px}
  /* over the shelves on the right: on the left it would cover the faces in line */
  /* 39% keeps it clear of the owner's face, which ends at ~57% of the frame */
  .leadcard{top:10px;left:auto;right:10px;width:min(140px,39%);padding:7px 8px 5px;border-radius:12px;font-size:.7rem}
  .lc-top{margin-bottom:3px;gap:6px;flex-wrap:wrap}
  .lc-trend{font-size:.64rem}
  .lc-trend b{padding:1px 5px}
  .ba{bottom:12px;font-size:.84rem}
  .ba button{padding:7px 14px}
}
/* narrow phones: one short card row (the line's colour already says up or down)
   and a squarer panel, so the card never reaches the faces below it */
@media (max-width:400px){
  .hero-panel{aspect-ratio:1.05}
  .lc-trend{display:none}
}
@media (max-width:520px){
  .hero-cta .btn{flex:1 1 auto}
  .hero-trust li{font-size:.88rem}
}