/* qwito-hero-loop.css
 * Pure-CSS animated hero loop — 15s, no React render loop, mobile-friendly.
 * Only `opacity` + `transform` are animated (GPU compositor).
 * Master timeline:
 *   0–3s    INTRO CHAOS         (0% – 20%)
 *   3–6s    PROBLEM ESCALATES   (20% – 40%)
 *   6–9s    QWITO ENTERS        (40% – 60%)
 *   9–12s   SUCCESS CASCADE     (60% – 80%)
 *   12–15s  UNIFIED FLOW + reset (80% – 100%)
 */

:root {
  --stage-w: 1440px;
  --stage-h: 900px;
  --orange: #E04A00;
  --orange-light: #FF8A3D;
  --cream: #FFF9ED;
  --ink: #1A1A1A;
  --muted: #6B6458;
  --beige: #F2ECE0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stage wrapper — keeps aspect ratio 1440:900, no letterboxing.
   Width = 100% of container, height auto-scales. */
.stage-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: var(--cream);
}
.stage {
  position: absolute;
  left: 0; top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  background: var(--cream);
  overflow: hidden;
  transform-origin: top left;
  /* JS sets --scale */
  transform: scale(var(--scale, 1));
}

/* Mute button (only interactive control) */
.mute-btn {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  -webkit-tap-highlight-color: transparent;
}
.mute-btn svg { width: 20px; height: 20px; }

/* ============================================================
 *  BACKGROUND
 * ============================================================ */
.bg-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFF9ED 0%, #FFF3E0 100%);
  z-index: 0;
}
.bg-warm-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(255,205,150,0.5) 0%, transparent 60%),
              radial-gradient(ellipse 40% 40% at 85% 25%, rgba(255,220,180,0.35) 0%, transparent 55%);
  opacity: 0;
  animation: bg-warm 15s linear infinite;
  z-index: 1;
}
.bg-cool-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 40% at 15% 25%, rgba(200,195,180,0.32) 0%, transparent 55%);
  animation: bg-cool 15s linear infinite;
  z-index: 1;
}
.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(224,74,0,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.7;
  z-index: 2;
}
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(139,134,128,0.12) 100%);
  z-index: 3;
  pointer-events: none;
}

@keyframes bg-warm {
  0%   { opacity: 0.3; }
  40%  { opacity: 0.5; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes bg-cool {
  0%, 100% { opacity: 1; }
  40% { opacity: 1; }
  60% { opacity: 0.4; }
  93% { opacity: 0.4; }
}

/* ============================================================
 *  HEADLINE — three phases
 * ============================================================ */
.headline {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 25;
}
.headline span {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  display: block;
  font-family: 'League Spartan', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.headline .h1 {
  color: var(--muted);
  animation: headline-1 15s linear infinite;
}
.headline .h2 {
  color: var(--ink);
  animation: headline-2 15s linear infinite;
}
.headline .h3 {
  color: var(--ink);
  animation: headline-3 15s linear infinite;
}

/* h1: 0.4–5.8s -> visible 0.9–5.3, fade out by 5.8 */
@keyframes headline-1 {
  0%       { opacity: 0; transform: translateY(14px); }
  2.67%    { opacity: 0; transform: translateY(14px); }   /* 0.4s */
  6%       { opacity: 1; transform: translateY(0); }      /* 0.9s */
  35.33%   { opacity: 1; transform: translateY(0); }      /* 5.3s */
  38.67%   { opacity: 0; transform: translateY(-10px); }  /* 5.8s */
  100%     { opacity: 0; transform: translateY(-10px); }
}
/* h2: 6.2–8.6 */
@keyframes headline-2 {
  0%, 41.33%  { opacity: 0; transform: translateY(14px); }   /* 6.2s */
  44.67%      { opacity: 1; transform: translateY(0); }       /* 6.7s */
  54%         { opacity: 1; transform: translateY(0); }       /* 8.1s */
  57.33%      { opacity: 0; transform: translateY(-10px); }   /* 8.6s */
  100%        { opacity: 0; transform: translateY(-10px); }
}
/* h3: 9.0–14.2 */
@keyframes headline-3 {
  0%, 60%   { opacity: 0; transform: translateY(14px); }     /* 9.0s */
  63.33%    { opacity: 1; transform: translateY(0); }         /* 9.5s */
  91%       { opacity: 1; transform: translateY(0); }         /* 13.65s */
  94.67%    { opacity: 0; transform: translateY(-10px); }     /* 14.2s */
  100%      { opacity: 0; }
}

/* ============================================================
 *  CHAOS CLUSTER (left) — Marek tired
 * ============================================================ */
.chaos {
  position: absolute;
  left: 60px; top: 160px;
  width: 280px;
  height: 580px;
  z-index: 6;
  opacity: 0;
  transform: translateX(0);
  animation: chaos-cluster 15s linear infinite;
  will-change: opacity, transform;
}
@keyframes chaos-cluster {
  0%        { opacity: 0; transform: translateX(0); }
  4%        { opacity: 1; transform: translateX(0); }       /* 0.6s */
  40%       { opacity: 1; transform: translateX(-12px); }   /* 6s */
  50%       { opacity: 0.35; transform: translateX(-80px); } /* 7.5s */
  56.67%    { opacity: 0; transform: translateX(-120px); }  /* 8.5s */
  100%      { opacity: 0; transform: translateX(-120px); }
}

.fachowiec-card {
  position: absolute;
  left: 0; top: 0;
  width: 240px;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  background: #2A2520;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.45),
              0 6px 16px -4px rgba(0,0,0,0.18),
              inset 0 0 0 1.5px rgba(255,255,255,0.06);
}
.fachowiec-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.fachowiec-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 35%, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.fachowiec-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(106,140,170,0.20) 0%, transparent 50%, rgba(50,55,70,0.30) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fachowiec-label {
  position: absolute;
  left: 14px; bottom: 14px;
  background: rgba(255,255,255,0.95);
  padding: 6px 12px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1A1A1A;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Excel laptop */
.excel-laptop {
  position: absolute;
  left: 18px; top: 320px;
  width: 220px;
  transform: rotate(-3deg);
  opacity: 0;
  animation: pop-in 15s linear infinite;
  animation-delay: 0s;
  will-change: opacity, transform;
}
.excel-laptop .lp {
  background: linear-gradient(145deg, #f5f0e8, #e8dfd0);
  border-radius: 8px 8px 4px 4px;
  padding: 5px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.excel-laptop .scr {
  background: #fff;
  border-radius: 4px;
  padding: 7px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  color: #2C7A2C;
  line-height: 1.3;
}
.excel-laptop .scr .row { display: flex; gap: 2px; }
.excel-laptop .scr .cell {
  flex: 1;
  background: #f8f8f8;
  border: 0.5px solid #d0d0d0;
  padding: 1.5px 3px;
  font-size: 7px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
}
.excel-laptop .scr .cell.green { background: #d4f0d4; color: #2C7A2C; }
.excel-laptop .scr .cell.red { background: #ffe5e5; color: #c92424; }
.excel-laptop .scr .cell.yellow { background: #fff4cc; color: #8a6914; }
.excel-laptop .base {
  height: 4px;
  background: #c8c0b0;
  border-radius: 0 0 8px 8px;
  margin: 0 -3px;
}

/* paper sheets scattered */
.paper-stack {
  position: absolute;
  z-index: -1;
}
.paper-1 { left: -10px; top: 360px; transform: rotate(-12deg); }
.paper-2 { left: 200px; top: 380px; transform: rotate(8deg); }
.paper {
  width: 60px; height: 78px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  border-radius: 2px;
  padding: 6px 5px;
}
.paper .ln { height: 2px; background: #d8d8d8; margin-bottom: 3px; border-radius: 1px; }
.paper .ln.s { width: 60%; }
.paper .ln.m { width: 80%; }
.paper .ln.l { width: 95%; }

/* calculator */
.calculator {
  position: absolute;
  left: 130px; top: 530px;
  width: 60px; height: 80px;
  background: #2A2520;
  border-radius: 8px;
  padding: 5px;
  transform: rotate(8deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  opacity: 0;
  animation: pop-in 15s linear infinite;
  animation-delay: 0.8s;
}
.calculator .scr {
  background: #b8c5a0;
  height: 16px;
  border-radius: 3px;
  margin-bottom: 4px;
  text-align: right;
  padding: 2px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #2A3520;
  font-weight: 700;
}
.calculator .keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.calculator .key {
  background: #4A453F;
  height: 9px;
  border-radius: 1.5px;
}
.calculator .key.orange { background: var(--orange); }

/* phone (call icon) */
.chaos-phone {
  position: absolute;
  left: 200px; top: 250px;
  width: 36px; height: 60px;
  background: #1A1A1A;
  border-radius: 8px;
  padding: 4px;
  transform: rotate(-15deg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.30);
  opacity: 0;
  animation: pop-in 15s linear infinite, phone-shake 0.4s linear infinite;
  animation-delay: 1.2s, 0s;
}
.chaos-phone .scr {
  background: #FF5F00;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
@keyframes phone-shake {
  0%, 100% { transform: rotate(-15deg) translateX(0); }
  25%      { transform: rotate(-13deg) translateX(1px); }
  50%      { transform: rotate(-17deg) translateX(-1px); }
  75%      { transform: rotate(-13deg) translateX(1px); }
}

@keyframes pop-in {
  0%      { opacity: 0; transform: var(--rest, none) scale(0.6); }
  4%      { opacity: 0; transform: var(--rest, none) scale(0.6); }
  10%     { opacity: 1; transform: var(--rest, none) scale(1); }
  40%     { opacity: 1; transform: var(--rest, none) scale(1); }
  53.33%  { opacity: 0; transform: var(--rest, none) scale(0.9); }
  100%    { opacity: 0; transform: var(--rest, none) scale(0.9); }
}

/* ============================================================
 *  CLIENT KLIENTKI (right) — three personas, stacked
 * ============================================================ */
.clients {
  position: absolute;
  right: 80px; top: 150px;
  width: 340px;
  height: 580px;
  z-index: 5;
  opacity: 0;
  animation: clients-cluster 15s linear infinite;
  will-change: opacity;
}
@keyframes clients-cluster {
  0%, 5.33%   { opacity: 0; }                 /* 0.8s */
  8%          { opacity: 1; }                 /* 1.2s */
  40%         { opacity: 1; }                 /* 6s */
  50%         { opacity: 0.4; }               /* 7.5s */
  56.67%      { opacity: 0; }                 /* 8.5s */
  100%        { opacity: 0; }
}

.klientka {
  position: absolute;
  width: 200px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.30),
              0 4px 12px -2px rgba(0,0,0,0.10);
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  will-change: opacity, transform;
}
.klientka .photo-wrap {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.klientka .photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.klientka .info {
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff 0%, #fdfaf3 100%);
}
.klientka .name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.klientka .tag {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.k1 { left: 0; top: 0; transform-origin: top left; animation: kli-1 15s linear infinite; }
.k2 { left: 80px; top: 200px; animation: kli-2 15s linear infinite; }
.k3 { left: 0; top: 380px; animation: kli-3 15s linear infinite; }

@keyframes kli-1 {
  0%, 2.67% { opacity: 0; transform: translateX(40px) scale(0.9); }
  8%        { opacity: 1; transform: translateX(0) scale(1); }
  43.33%    { opacity: 1; transform: translateX(0) scale(1); }
  48%       { opacity: 0; transform: translateX(40px) scale(0.95); }
  100%      { opacity: 0; transform: translateX(40px) scale(0.95); }
}
@keyframes kli-2 {
  0%, 16%   { opacity: 0; transform: translateX(40px) scale(0.9); }
  21.33%    { opacity: 1; transform: translateX(0) scale(1); }
  45.33%    { opacity: 1; transform: translateX(0) scale(1); }
  49.33%    { opacity: 0; transform: translateX(40px) scale(0.95); }
  100%      { opacity: 0; transform: translateX(40px) scale(0.95); }
}
@keyframes kli-3 {
  0%, 28%   { opacity: 0; transform: translateX(40px) scale(0.9); }
  33.33%    { opacity: 1; transform: translateX(0) scale(1); }
  48%       { opacity: 1; transform: translateX(0) scale(1); }
  52%       { opacity: 0; transform: translateX(40px) scale(0.95); }
  100%      { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* ============================================================
 *  QUESTION AVALANCHE — 6 floating speech bubbles over phone
 * ============================================================ */
.avalanche {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  animation: aval-cluster 15s linear infinite;
}
@keyframes aval-cluster {
  0%, 4%   { opacity: 0; }       /* 0.6s */
  6.67%    { opacity: 1; }       /* 1s */
  41.33%   { opacity: 1; }       /* 6.2s */
  50%      { opacity: 0.3; }     /* 7.5s */
  54.67%   { opacity: 0; }       /* 8.2s */
  100%     { opacity: 0; }
}

.bubble {
  position: absolute;
  padding: 12px 16px 13px;
  background: #fff;
  border: 1.5px solid rgba(139,134,128,0.18);
  border-radius: 18px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #3A3530;
  white-space: pre-line;
  box-shadow: 0 18px 36px -10px rgba(0,0,0,0.28),
              0 8px 16px -4px rgba(0,0,0,0.12);
  opacity: 0;
  will-change: transform, opacity;
}
.bubble.angry {
  background: #FFF5F0;
  border-color: rgba(220,38,38,0.3);
  color: #8B1C1C;
  box-shadow: 0 18px 36px -10px rgba(220,38,38,0.28),
              0 8px 16px -4px rgba(0,0,0,0.12);
}
.bubble .tail {
  position: absolute;
  width: 12px; height: 12px;
  background: inherit;
  border: inherit;
  border-radius: 0;
  top: 18px;
  transform: rotate(45deg);
}
.bubble.tail-left .tail { left: -6px; }
.bubble.tail-right .tail { right: -6px; }

/* Each bubble: pop-in + float; combined via single animation */
.b1 { left: -280px; top: -180px; width: 230px; --rot: -4deg; animation: bub-1 15s linear infinite; }
.b2 { left: 60px;   top: -200px; width: 200px; --rot:  3deg; animation: bub-2 15s linear infinite; }
.b3 { left: -260px; top: -30px;  width: 220px; --rot: -2deg; animation: bub-3 15s linear infinite; }
.b4 { left: 90px;   top: -20px;  width: 210px; --rot:  4deg; animation: bub-4 15s linear infinite; }
.b5 { left: -290px; top: 130px;  width: 260px; --rot: -3deg; animation: bub-5 15s linear infinite; }
.b6 { left: 80px;   top: 160px;  width: 240px; --rot:  3deg; animation: bub-6 15s linear infinite; }

/* Pop in then float gently, then fade out at ~7.5s
   Times in % of 15s:
     0.8s = 5.33%, 1.6s = 10.67%, 2.4s = 16%, 3.2s = 21.33%, 4.0s = 26.67%, 4.9s = 32.67%
     pop completes after 0.5s (3.33%); fade out at 50% (7.5s) */

@keyframes bub-1 {
  0%, 5.33%  { opacity: 0; transform: rotate(-4deg) scale(0.7) translateY(-30px); }
  8.67%      { opacity: 1; transform: rotate(-4deg) scale(1) translateY(0); }
  20%        { transform: rotate(-3deg) scale(1) translateY(-4px); }
  32%        { transform: rotate(-5deg) scale(1) translateY(4px); }
  44%        { transform: rotate(-3deg) scale(1) translateY(-4px); }
  46%        { opacity: 1; }
  54.67%     { opacity: 0; transform: rotate(-4deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}
@keyframes bub-2 {
  0%, 10.67% { opacity: 0; transform: rotate(3deg) scale(0.7) translateY(-30px); }
  14%        { opacity: 1; transform: rotate(3deg) scale(1) translateY(0); }
  24%        { transform: rotate(4deg) scale(1) translateY(-4px); }
  36%        { transform: rotate(2deg) scale(1) translateY(4px); }
  46%        { opacity: 1; transform: rotate(3deg) scale(1) translateY(-4px); }
  54.67%     { opacity: 0; transform: rotate(3deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}
@keyframes bub-3 {
  0%, 16%    { opacity: 0; transform: rotate(-2deg) scale(0.7) translateY(-30px); }
  19.33%     { opacity: 1; transform: rotate(-2deg) scale(1) translateY(0); }
  28%        { transform: rotate(-1deg) scale(1) translateY(-4px); }
  40%        { transform: rotate(-3deg) scale(1) translateY(4px); }
  46%        { opacity: 1; transform: rotate(-2deg) scale(1) translateY(-4px); }
  54.67%     { opacity: 0; transform: rotate(-2deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}
@keyframes bub-4 {
  0%, 21.33% { opacity: 0; transform: rotate(4deg) scale(0.7) translateY(-30px); }
  24.67%     { opacity: 1; transform: rotate(4deg) scale(1) translateY(0); }
  32%        { transform: rotate(5deg) scale(1) translateY(-4px); }
  44%        { transform: rotate(3deg) scale(1) translateY(4px); }
  46%        { opacity: 1; transform: rotate(4deg) scale(1) translateY(-4px); }
  54.67%     { opacity: 0; transform: rotate(4deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}
@keyframes bub-5 {
  0%, 26.67% { opacity: 0; transform: rotate(-3deg) scale(0.7) translateY(-30px); }
  30%        { opacity: 1; transform: rotate(-3deg) scale(1) translateY(0); }
  38%        { transform: rotate(-2deg) scale(1) translateY(-4px); }
  46%        { opacity: 1; transform: rotate(-4deg) scale(1) translateY(4px); }
  54.67%     { opacity: 0; transform: rotate(-3deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}
@keyframes bub-6 {
  0%, 32.67% { opacity: 0; transform: rotate(3deg) scale(0.7) translateY(-30px); }
  36%        { opacity: 1; transform: rotate(3deg) scale(1) translateY(0); }
  44%        { transform: rotate(4deg) scale(1) translateY(-4px); }
  46%        { opacity: 1; }
  54.67%     { opacity: 0; transform: rotate(3deg) scale(0.95) translateY(-10px); }
  100%       { opacity: 0; }
}

/* ============================================================
 *  CENTER PHONE
 * ============================================================ */
.phone-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 694px;
  margin-left: -160px;
  margin-top: -347px;
  z-index: 10;
  opacity: 0.35;
  will-change: opacity, transform;
  animation: phone-master 15s linear infinite, phone-float 6s ease-in-out infinite;
}
@keyframes phone-master {
  0%      { opacity: 0.35; transform: scale(1); }
  16.67%  { opacity: 0.40; transform: scale(1); }   /* 2.5s */
  36.67%  { opacity: 0.55; transform: scale(1); }   /* 5.5s */
  39.33%  { opacity: 0.70; transform: scale(1); }   /* 5.9s */
  41.33%  { opacity: 0.95; transform: scale(1.08); } /* 6.2s */
  44%     { opacity: 1; transform: scale(1); }      /* 6.6s */
  100%    { opacity: 1; transform: scale(1); }
}
@keyframes phone-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Phone body */
.phone-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #2C2C2E, #1C1C1E);
  border-radius: 48px;
  padding: 8px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.4),
              inset 0 0 0 1.5px rgba(255,255,255,0.1),
              inset 0 0 0 3px rgba(0,0,0,0.6);
}
.phone-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 220%; height: 130%;
  transform: translate(-50%, -45%);
  background: radial-gradient(ellipse at center, rgba(255,95,0,0.42) 0%, rgba(255,95,0,0.18) 30%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
  animation: phone-glow 15s linear infinite, phone-glow-pulse 2s ease-in-out infinite;
}
@keyframes phone-glow {
  0%      { opacity: 0.2; }
  36.67%  { opacity: 0.3; }
  43.33%  { opacity: 1; }
  60%     { opacity: 0.9; }
  80%     { opacity: 1; }
  100%    { opacity: 0.95; }
}
@keyframes phone-glow-pulse {
  0%, 100% { transform: translate(-50%, -45%) scale(1); }
  50%      { transform: translate(-50%, -45%) scale(1.04); }
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFF9ED;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dynamic-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
}

/* Status bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px 28px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.status-bar svg { display: inline-block; vertical-align: middle; }
.status-bar .battery {
  display: inline-block;
  width: 24px; height: 11px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 1px;
  position: relative;
  vertical-align: middle;
}
.status-bar .battery::after {
  content: '';
  position: absolute;
  right: -4px; top: 3px;
  width: 2px; height: 4px;
  background: var(--ink);
  border-radius: 1px;
}
.status-bar .battery > div {
  background: var(--ink);
  width: 80%; height: 100%;
  border-radius: 1px;
}

/* App header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  flex-shrink: 0;
}
.app-logo {
  width: 28px; height: 28px;
  background: linear-gradient(180deg, #FF8A3D, #FF5F00);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(224,74,0,0.3);
}
.app-name {
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-left: 8px;
}
.app-version {
  font-size: 11px;
  font-weight: 600;
  color: var(--orange);
  background: #FFF0D6;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* Title */
.app-title { padding: 14px 20px 4px; flex-shrink: 0; }
.app-title .num {
  font-size: 10px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.08em;
}
.app-title .heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 3px;
  line-height: 1.15;
}
.app-title .addr {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Items */
.items {
  flex: 1;
  padding: 10px 16px 0;
  overflow: hidden;
}
.item-cat {
  font-size: 9px;
  font-weight: 700;
  color: #8B8680;
  letter-spacing: 0.1em;
  margin-top: 10px;
  margin-bottom: 4px;
  padding-left: 4px;
  opacity: 0;
  animation: item-reveal 15s linear infinite;
}
.item-cat:first-child { margin-top: 0; }
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  opacity: 0;
  transform: translateY(8px);
  animation: item-reveal 15s linear infinite;
  will-change: opacity, transform;
}
.item-row.highlight {
  background: #FFF0D6;
  border-left-color: #FF5F00;
}
.item-row .title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-row .qty {
  font-size: 9px;
  color: #8B8680;
  margin-top: 1px;
}
.item-row .price {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Stagger via animation-delay (negative values ok) */
.item-cat:nth-child(1)  { animation-delay: -8.7s; } /* won't be used - first cat */
.item-row:nth-of-type(1) { animation-delay: 0s; }

/* simpler: rely on inline delay attribs / nth-of-type */
@keyframes item-reveal {
  0%, 36.67% { opacity: 0; transform: translateY(8px); }
  41.33%     { opacity: 1; transform: translateY(0); }
  100%       { opacity: 1; transform: translateY(0); }
}
/* Each item: stagger by 0.4s starting at 6.2s (41.33%) */
.stagger-0 { animation-delay: 0s; }
.stagger-1 { animation-delay: 0.3s; }
.stagger-2 { animation-delay: 0.6s; }
.stagger-3 { animation-delay: 0.9s; }
.stagger-4 { animation-delay: 1.2s; }
.stagger-5 { animation-delay: 1.5s; }
.stagger-6 { animation-delay: 1.8s; }
.stagger-7 { animation-delay: 2.1s; }
.stagger-8 { animation-delay: 2.4s; }

/* Total */
.total {
  padding: 10px 20px;
  border-top: 1px solid rgba(26,26,26,0.06);
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.total .lo {
  font-size: 10px;
  color: #8B8680;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.total .vat { margin-top: 1px; }
.total .amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: amount-reveal 15s linear infinite;
}
@keyframes amount-reveal {
  0%, 53.33% { opacity: 0; transform: translateY(6px); }
  56.67%     { opacity: 1; transform: translateY(0); }
  100%       { opacity: 1; }
}

/* CTA */
.cta {
  padding: 0 16px 14px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cta-primary {
  flex: 1;
  padding: 13px 0;
  background: linear-gradient(180deg, #FF8A3D, #FF5F00);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px rgba(224,74,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cta-more {
  width: 46px;
  padding: 13px 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: 12px;
  font-size: 15px;
}
.home-indicator {
  width: 120px; height: 4px;
  background: var(--ink);
  border-radius: 2px;
  margin: 0 auto 6px;
  flex-shrink: 0;
}

/* ============================================================
 *  HAPPY FACHOWIEC + SUCCESS CASCADE
 * ============================================================ */
.happy-fachowiec {
  position: absolute;
  left: 60px; top: 160px;
  width: 240px;
  height: 300px;
  z-index: 6;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: happy-cluster 15s linear infinite;
  will-change: opacity, transform;
}
@keyframes happy-cluster {
  0%, 60%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  66.67%    { opacity: 1; transform: translateY(0) scale(1); }
  93.33%    { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 1; }
}
.happy-fachowiec .card {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #2A2520;
  box-shadow: 0 20px 44px -10px rgba(255,95,0,0.25),
              0 8px 18px -3px rgba(0,0,0,0.20),
              inset 0 0 0 1.5px rgba(255,180,120,0.15);
  position: relative;
}
.happy-fachowiec img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.happy-fachowiec .rim {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255,160,90,0.18) 0%, transparent 45%, rgba(255,200,150,0.12) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.happy-fachowiec .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 35%, transparent 50%, rgba(0,0,0,0.35) 100%);
}
.happy-fachowiec .pill {
  position: absolute;
  left: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.96);
  padding: 6px 10px 6px 8px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ink);
}
.happy-fachowiec .pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2DAA50;
  box-shadow: 0 0 0 3px rgba(45,170,80,0.20);
}

/* Success cluster on right */
.success {
  position: absolute;
  right: 80px; top: 150px;
  width: 360px;
  height: 580px;
  z-index: 6;
  opacity: 0;
  animation: success-cluster 15s linear infinite;
}
@keyframes success-cluster {
  0%, 56.67% { opacity: 0; }
  60%        { opacity: 1; }
  96.67%     { opacity: 1; }
  100%       { opacity: 1; }
}

.check {
  position: absolute;
  width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #5BCC7B, #2DAA50);
  box-shadow: 0 14px 28px -6px rgba(45,170,80,0.35);
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.4);
  will-change: opacity, transform;
}
.check.c1 { left: 0;   top: 30px;  animation: pop-bounce 15s linear infinite; animation-delay: 0s; }
.check.c2 { left: 110px; top: 0;   animation: pop-bounce 15s linear infinite; animation-delay: 0.35s; }
.check.c3 { left: 220px; top: 50px; animation: pop-bounce 15s linear infinite; animation-delay: 0.7s; }
.check.c4 { left: 80px; top: 120px; animation: pop-bounce 15s linear infinite; animation-delay: 1.05s; }
@keyframes pop-bounce {
  0%, 58.67% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  62%        { opacity: 1; transform: scale(1.15) rotate(0); }
  64%        { transform: scale(0.95) rotate(0); }
  66%        { transform: scale(1) rotate(0); }
  100%       { opacity: 1; transform: scale(1) rotate(0); }
}

/* BLIK card */
.blik {
  position: absolute;
  left: 0; top: 230px;
  width: 220px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff 0%, #fffdf5 100%);
  border-radius: 16px;
  border: 1.5px solid rgba(45,170,80,0.20);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,0.18);
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  animation: blik-in 15s linear infinite;
}
@keyframes blik-in {
  0%, 68%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  72%       { opacity: 1; transform: scale(1.06) translateY(0); }
  74%       { transform: scale(0.98) translateY(0); }
  76%       { transform: scale(1) translateY(0); }
  100%      { opacity: 1; transform: scale(1) translateY(0); }
}
.blik .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.12em;
}
.blik .amount {
  font-size: 28px;
  font-weight: 800;
  color: #2DAA50;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.blik .meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  display: flex; gap: 8px; align-items: center;
}
.blik .meta .pill {
  background: linear-gradient(135deg, #5BCC7B, #2DAA50);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* KSeF card */
.ksef {
  position: absolute;
  left: 60px; top: 380px;
  width: 230px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.16);
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  animation: ksef-in 15s linear infinite;
}
@keyframes ksef-in {
  0%, 70.67% { opacity: 0; transform: scale(0.6) translateY(20px); }
  75.33%     { opacity: 1; transform: scale(1.06) translateY(0); }
  77%        { transform: scale(0.98); }
  79%        { transform: scale(1); }
  100%       { opacity: 1; transform: scale(1) translateY(0); }
}
.ksef .header {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.10em;
}
.ksef .header .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2DAA50;
}
.ksef .filename {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 6px;
}
.ksef .meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

/* Speech bubble for happy fachowiec */
.happy-bubble {
  position: absolute;
  left: 280px; top: 80px;
  width: 230px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid rgba(139,134,128,0.20);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #3A3530;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.20);
  opacity: 0;
  transform: scale(0.8) translateX(-20px);
  animation: happy-bubble-in 15s linear infinite;
  z-index: 7;
}
.happy-bubble::before {
  content: '';
  position: absolute;
  left: -7px; top: 18px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1.5px solid rgba(139,134,128,0.20);
  border-bottom: 1.5px solid rgba(139,134,128,0.20);
  transform: rotate(45deg);
}
@keyframes happy-bubble-in {
  0%, 73.33% { opacity: 0; transform: scale(0.8) translateX(-20px); }
  77.33%     { opacity: 1; transform: scale(1) translateX(0); }
  100%       { opacity: 1; transform: scale(1) translateX(0); }
}

/* ============================================================
 *  TRANSFORMATION FLOW (bottom curve)
 * ============================================================ */
.flow {
  position: absolute;
  left: 0; bottom: 80px;
  width: 100%;
  height: 220px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  animation: flow-show 15s linear infinite;
}
@keyframes flow-show {
  0%, 42%   { opacity: 0; }
  46.67%    { opacity: 1; }
  86.67%    { opacity: 1; }
  96.67%    { opacity: 0.3; }
  100%      { opacity: 0; }
}
.flow svg { width: 100%; height: 100%; display: block; }
.flow .draw-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: flow-draw 15s linear infinite;
}
@keyframes flow-draw {
  0%, 43.33% { stroke-dashoffset: 1200; }
  60%        { stroke-dashoffset: 0; }
  100%       { stroke-dashoffset: 0; }
}

/* ============================================================
 *  LOOP WASH — small flash at 14.3–14.7s
 * ============================================================ */
.loop-wash {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,1);
  opacity: 0;
  z-index: 50;
  pointer-events: none;
  animation: loop-wash 15s linear infinite;
}
@keyframes loop-wash {
  0%, 95.33% { opacity: 0; }
  97.33%     { opacity: 0.25; }
  100%       { opacity: 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* === MOBILE FULLSCREEN COVER (added by deploy 2026-04-26) === */
@media (max-width: 768px) {
  html, body { margin: 0 !important; padding: 0 !important; height: 100% !important; overflow: hidden !important; background: #FFF9ED !important; }
  .stage-wrap { aspect-ratio: auto !important; width: 100vw !important; height: 100svh !important; min-height: 480px !important; overflow: hidden !important; position: relative !important; background: #FFF9ED !important; }
  .stage { position: absolute !important; top: 50% !important; left: 50% !important; transform-origin: center center !important; transform: translate(-50%, -50%) scale(var(--scale, 1)) !important; }
}