:root {
  --bg-glow: rgba(255,255,255,0.06);
  --bg-start: #080808;
  --bg-mid: #040404;
  --bg-end: #090909;
  --panel: rgba(255,255,255,0.05);
  --panel-top: rgba(255,255,255,0.08);
  --panel-bottom: rgba(255,255,255,0.02);
  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.08);
  --line: rgba(255,255,255,0.11);
  --text: #f5f5f5;
  --muted: rgba(255,255,255,0.72);
  --soft: rgba(255,255,255,0.48);
  --pattern-dot: rgba(255,255,255,0.04);
  --shadow: 0 24px 60px rgba(0,0,0,0.42);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --container: min(1380px, 100%);
  --transition: 320ms cubic-bezier(.2,.8,.2,1);
  --button-bg: #ffffff;
  --button-text: #0a0a0a;
  --button-shadow: 0 18px 34px rgba(255,255,255,0.12);
  --button-secondary-bg: rgba(255,255,255,0.04);
  --button-secondary-border: rgba(255,255,255,0.14);
  --spotlight-glow: radial-gradient(circle, rgba(255,255,255,0.24) 0%, rgba(176,176,176,0.14) 24%, rgba(82,82,82,0.08) 42%, transparent 72%);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;color-scheme:dark}
html[data-theme="light"]{color-scheme:light;--bg-glow:rgba(255,255,255,0.98);--bg-start:#fff;--bg-mid:#fff;--bg-end:#fff;--panel:rgba(255,255,255,0.9);--panel-top:rgba(255,255,255,0.98);--panel-bottom:rgba(255,255,255,0.84);--surface:rgba(255,255,255,0.82);--surface-strong:rgba(255,255,255,0.92);--line:rgba(20,20,20,0.1);--text:#161616;--muted:rgba(22,22,22,0.76);--soft:rgba(22,22,22,0.5);--pattern-dot:rgba(20,20,20,0.05);--shadow:0 24px 60px rgba(0,0,0,0.08);--button-bg:#161616;--button-text:#faf7f2;--button-shadow:0 18px 34px rgba(0,0,0,0.12);--button-secondary-bg:rgba(255,255,255,0.82);--button-secondary-border:rgba(20,20,20,0.12);--spotlight-glow:radial-gradient(circle, rgba(120,120,120,0.2) 0%, rgba(120,120,120,0.1) 24%, rgba(120,120,120,0.04) 42%, transparent 72%)}
body{margin:0;min-height:100vh;font-family:"Inter",sans-serif;color:var(--text);background:radial-gradient(circle at top,var(--bg-glow),transparent 32%),linear-gradient(180deg,var(--bg-start) 0%,var(--bg-mid) 48%,var(--bg-end) 100%);overflow-x:hidden;transition:background .55s ease,color .55s ease}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(var(--pattern-dot) .7px,transparent .7px);background-size:4px 4px;opacity:.22;z-index:0}
html[data-theme="light"] body::before{opacity:.12}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:"Cormorant Garamond",serif;font-weight:600;line-height:.98;letter-spacing:-.03em}
p{margin:0;color:var(--muted);line-height:1.78}
.site-shell{position:relative;z-index:1;padding-top:96px}.section-shell,.qr-hero{width:100%}.section-shell{padding:26px 0}#premiumFooterSlot{padding-top:28px}
section,[id]{scroll-margin-top:120px}
.qr-hero{display:grid;grid-template-columns:minmax(0,.98fr) minmax(360px,1.02fr);gap:28px;align-items:center;padding:34px 0 8px}
.hero-copy,.hero-visual,.benefit-card,.offer-card,.preview-card,.vcard-card,.stat-item,.cta-panel{display:grid;gap:12px}.hero-copy{gap:19px;padding:24px 0 10px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;width:fit-content;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;opacity:.85;flex:none}
h1{font-size:clamp(3.15rem,7.4vw,6rem);max-width:none}.hero-copy p{max-width:64ch;font-size:1.04rem}
.hero-actions,.hero-pills,.anchor-pills,.mini-pills{display:flex;flex-wrap:wrap;gap:12px}
.hero-pills span,.anchor-pills a,.mini-pills span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:1rem}
.btn,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;font-size:1rem;font-weight:600}.btn{background:var(--button-bg);color:var(--button-text);box-shadow:var(--button-shadow)}.btn-secondary{border:1px solid var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--text)}
.panel-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(10,10,10,.58);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}html[data-theme="light"] .panel-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84)),rgba(255,255,255,.88)}
.spotlight-card{position:relative;overflow:hidden;isolation:isolate;padding:28px}.spotlight-card>*:not(.spotlight-glow){position:relative;z-index:1}
.spotlight-glow{position:absolute;z-index:0;width:620px;height:620px;left:var(--glow-x,70%);top:var(--glow-y,24%);transform:translate(-50%,-50%);border-radius:50%;background:var(--spotlight-glow);filter:blur(22px);opacity:0;transition:opacity .26s ease}.spotlight-card.is-active .spotlight-glow{opacity:.95}
.qr-visual{position:relative;min-height:430px}.qr-device{position:absolute;border-radius:28px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:0 20px 46px rgba(0,0,0,.36);overflow:hidden}
.tablet-shell{width:min(100%,340px);height:400px;left:10px;top:0}.qr-card-shell{width:210px;height:210px;right:18px;bottom:30px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(235,235,235,.88))}
.qr-device img{width:100%;height:100%;object-fit:cover}.qr-card-shell img{object-fit:contain}
.qr-float-card{position:absolute;right:0;top:26px;width:min(270px,42%);padding:18px 20px;border-radius:22px;border:1px solid var(--line);background:rgba(0,0,0,.48);backdrop-filter:blur(14px);display:grid;gap:8px}html[data-theme="light"] .qr-float-card{background:rgba(255,255,255,.82)}
.section-head{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:end;column-gap:28px;row-gap:12px;margin-bottom:22px}.section-head .eyebrow,.section-head h2{grid-column:1}.section-head h2{font-size:clamp(3rem,5.5vw,5rem);max-width:none}.section-head p{grid-column:2;grid-row:1/span 2;align-self:end;max-width:72ch;padding-bottom:10px}
.benefit-grid,.stats-showcase,.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.offer-grid,.vcard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.offer-card h3,.benefit-card h3,.vcard-card h3,.cta-panel h2{font-size:clamp(2rem,3.4vw,3rem)} .preview-card{align-items:center;justify-items:center}.preview-card img{width:min(100%,320px);border-radius:26px}.feature-list{padding-left:18px;display:grid;gap:8px}.vcard-card img{width:min(100%,320px);justify-self:center;border-radius:26px}
.stat-item strong{font-size:2rem;font-family:"Cormorant Garamond",serif;color:var(--text)}.panel-kicker{display:inline-block;margin-bottom:4px;color:var(--soft);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.proof-card{display:grid;gap:12px}.proof-meta{color:var(--soft);font-size:.9rem;line-height:1.6}
.trust-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.trust-strip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.9rem}
.cta-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 24px}.cta-panel>div{max-width:66ch;display:grid;gap:12px}
.reveal{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity 700ms cubic-bezier(.2,.8,.2,1),transform 700ms cubic-bezier(.2,.8,.2,1),filter 700ms cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
@media (max-width:1080px){.qr-hero,.section-head,.benefit-grid,.offer-grid,.vcard-grid,.stats-showcase,.proof-grid{grid-template-columns:1fr}.section-head p{grid-column:auto;grid-row:auto}.spotlight-card{padding:24px}.qr-visual{min-height:500px}.qr-float-card{width:min(320px,62%)}}
@media (max-width:980px){.site-shell{padding-top:120px}}
@media (max-width:760px){.site-shell{padding-top:126px}.qr-hero{padding-top:26px}.section-shell,#premiumFooterSlot{padding-top:0}.spotlight-card{padding:22px}h1{font-size:clamp(2.9rem,12vw,4.8rem)}.qr-visual{min-height:420px}.tablet-shell{width:calc(100% - 24px);height:300px;left:12px}.qr-card-shell{width:160px;height:160px;right:8px;bottom:12px}.qr-float-card{display:none}.cta-panel{align-items:flex-start}}

/* ════════════════════════════════════════════════════════════
   SECTIONS DÉMO — phone mockups, QR cards, animations
   (identique aux démos de la page à-propos)
   ════════════════════════════════════════════════════════════ */

/* ── Layout rangée copie + démo ────────────────────────────── */
.sol-exp-list { display:flex; flex-direction:column; gap:88px; margin-top:16px; }
.sol-exp-row { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sol-exp-row--flip { direction:rtl; }
.sol-exp-row--flip > * { direction:ltr; }
.sol-exp-copy { display:flex; flex-direction:column; gap:16px; }
.sol-exp-h3 { font-size:clamp(1.25rem,2.2vw,1.5rem); font-family:"Cormorant Garamond",serif; font-weight:600; line-height:1.15; letter-spacing:-.03em; color:var(--text); margin:0; }
.sol-exp-p { font-size:.95rem; line-height:1.72; color:var(--muted); margin:0; }
.sol-exp-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.sol-exp-features li { font-size:.875rem; color:var(--muted); padding-left:18px; position:relative; line-height:1.5; }
.sol-exp-features li::before { content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--soft); opacity:.55; }
.text-link { display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:600; color:var(--text); }
.sol-exp-demo { display:flex; align-items:center; justify-content:center; }

/* ── Stage (conteneur relatif de la démo) ──────────────────── */
.sol-demo-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:390px; width:100%; max-width:380px; }

/* ── Téléphone ─────────────────────────────────────────────── */
.sol-demo-phone {
  width: clamp(200px, 20vw, 280px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  flex-shrink: 0;
  background: linear-gradient(135deg,
    #9ea4ab 0%, #e2e6ea 8%, #b8bcc3 16%,
    #4a4f57 28%, #0d0e10 44%,
    #2a2d32 58%, #a8adb4 74%,
    #d8dde3 86%, #8c9099 100%
  );
  border-radius: 54px;
  padding: 3px;
  box-shadow: 0 50px 100px rgba(0,0,0,.75), 0 20px 40px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.5);
}
.sol-demo-phone::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  background: #0d0e10;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  pointer-events: none;
}
.sol-demo-screen {
  background: #f5f5f7;
  border-radius: 52px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
  width: 100%;
}

/* ── Écran : dashboard QR ─────────────────────────────────── */
.sol-demo-screen--smartqr { padding:28px 10px 10px; background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); gap:8px; }
.sdemo-smart-header { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.sdemo-smart-kicker { font-size:8.5px; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; font-weight:700; }
.sdemo-smart-status { display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border-radius:999px; background:rgba(29,184,122,.12); color:#149a63; font-size:8px; font-weight:700; }
.sdemo-smart-status::before { content:''; width:5px; height:5px; border-radius:50%; background:#1db87a; flex-shrink:0; }
.sdemo-smart-hero { display:grid; gap:2px; padding:11px 12px; border-radius:15px; background:linear-gradient(135deg,#111827 0%,#1f2937 100%); color:#fff; box-shadow:0 10px 22px rgba(17,24,39,.22); }
.sdemo-smart-title { font-size:8.5px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.55); }
.sdemo-smart-hero strong { font-size:26px; line-height:1; letter-spacing:-.04em; }
.sdemo-smart-sub { font-size:9px; color:rgba(255,255,255,.6); }
.sdemo-smart-chart { height:52px; display:flex; align-items:flex-end; gap:5px; padding:0 2px; }
.sdemo-smart-chart span { flex:1; border-radius:4px 4px 3px 3px; background:linear-gradient(180deg,#334155 0%,#94a3b8 100%); opacity:.75; }
.sdemo-smart-chart span:nth-child(5) { background:linear-gradient(180deg,#111827 0%,#374151 100%); opacity:1; }
.sdemo-smart-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.sdemo-smart-metric { display:grid; gap:2px; padding:8px 9px; border-radius:12px; background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.04); }
.sdemo-smart-metric strong { font-size:13px; color:#111827; line-height:1.05; font-weight:700; }
.sdemo-smart-metric span { font-size:8.5px; text-transform:uppercase; letter-spacing:.07em; color:#6b7280; font-weight:600; }
.sdemo-smart-list { display:grid; gap:5px; }
.sdemo-smart-row { display:flex; align-items:center; justify-content:space-between; padding:5px 9px; border-radius:10px; background:rgba(255,255,255,.88); border:1px solid rgba(0,0,0,.04); }
.sdemo-smart-row span { font-size:9.5px; color:#6b7280; font-weight:600; }
.sdemo-smart-row strong { font-size:10px; color:#111827; font-weight:700; }

/* ── Écran : menu restaurant ──────────────────────────────── */
.sdemo-menu-header { display:flex; align-items:center; gap:8px; padding:4px 12px 8px; border-bottom:1px solid #f0f0f2; }
.sdemo-menu-logo { width:20px; height:20px; border-radius:6px; background:#e9ecef; border:1px solid #e5e7eb; flex-shrink:0; }
.sdemo-menu-header span { font-size:11px; font-weight:700; color:#111; }
.sdemo-menu-section { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#9ca3af; padding:6px 12px 3px; font-weight:600; }
.sdemo-menu-item { display:flex; justify-content:space-between; align-items:center; padding:6px 12px; border-bottom:1px solid #f3f4f6; }
.sdemo-mi-name { font-size:10px; color:#374151; }
.sdemo-mi-price { font-size:10px; font-weight:700; color:#111; }
.sdemo-menu-cta { margin:8px 12px; background:#111; color:#fff; border-radius:8px; text-align:center; padding:7px 0; font-size:10px; font-weight:700; letter-spacing:.04em; }

/* ── Écran : vCard ────────────────────────────────────────── */
.sol-demo-screen--vcard { background:#f8fafc; padding:0; gap:0; justify-content:flex-start; }
.sdemo-vcard-cover { height:52px; background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); position:relative; flex-shrink:0; }
.sdemo-vcard-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#1e293b,#334155); border:3px solid #f8fafc; position:absolute; bottom:-23px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#e2e8f0; letter-spacing:-.02em; }
.sdemo-vcard-info { padding:28px 12px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.sdemo-vcard-name { font-size:12px; font-weight:700; color:#111; line-height:1.3; }
.sdemo-vcard-role { font-size:8.5px; color:#6b7280; text-transform:uppercase; letter-spacing:.07em; }
.sdemo-vcard-contacts { margin:0 10px; padding:8px 0 0; border-top:1px solid #e5e7eb; display:flex; flex-direction:column; gap:5px; }
.sdemo-vcard-row { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:8px; background:#fff; border:1px solid #f0f0f2; }
.sdemo-vcard-row-icon { width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.sdemo-vcard-row-icon--phone { background:rgba(34,197,94,.85); }
.sdemo-vcard-row-icon--email { background:rgba(59,130,246,.85); }
.sdemo-vcard-row-icon--web { background:rgba(139,92,246,.85); }
.sdemo-vcard-row span { font-size:9px; color:#374151; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sdemo-vcard-save { margin:8px 10px 0; background:#111; color:#fff; border-radius:7px; padding:7px 0; font-size:9.5px; font-weight:700; text-align:center; letter-spacing:.04em; display:flex; align-items:center; justify-content:center; gap:5px; }

/* ── QR card physique ─────────────────────────────────────── */
.sol-demo-qr-card { position:absolute; left:6px; top:110px; z-index:7; width:144px; padding:12px; background:var(--surface-strong); border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 52px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06); display:grid; gap:9px; animation:sol-float-a 5.2s ease-in-out infinite; }
html[data-theme="light"] .sol-demo-qr-card { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 16px 40px rgba(0,0,0,.14); }
.sol-demo-qr-card-frame { width:120px; height:120px; border-radius:16px; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.sol-demo-qr-card-image { width:118px; height:118px; object-fit:cover; display:block; }
.sol-demo-qr-card-body { display:grid; gap:3px; }
.sol-demo-qr-card-body strong { font-size:11px; line-height:1.3; color:var(--text); font-weight:700; }
.sol-demo-qr-card-body span { font-size:10px; line-height:1.45; color:var(--soft); }

/* ── Stage smartqr (QR card gauche + téléphone droite) ───── */
.sol-demo-stage--smartqr { max-width:360px; min-height:500px; overflow:visible; }
.sol-demo-phone--smartqr { position:absolute; right:0; top:62px; width: clamp(180px, 18vw, 240px); z-index:6; height:auto; }
.sol-demo-phone--smartqr::before { width:70px; height:20px; }

/* ── Badges flottants ─────────────────────────────────────── */
.sol-demo-badge { position:absolute; z-index:10; display:flex; align-items:center; gap:7px; padding:8px 14px; background:var(--panel); border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--text); box-shadow:0 14px 34px rgba(0,0,0,.32); white-space:nowrap; }
html[data-theme="light"] .sol-demo-badge { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 8px 24px rgba(0,0,0,.1); color:#111; }
.sol-demo-badge strong { font-weight:700; }
.sol-demo-badge--scan { bottom:26px; right:10px; animation:sol-float-a 4s ease-in-out infinite; }
.sol-demo-badge--order { top:18px; right:4px; animation:sol-float-b 4.5s ease-in-out infinite; }
.sol-demo-badge--saved { top:14px; left:50%; animation:sol-float-notif 4s ease-in-out infinite; }
.sol-demo-badge--smartqr { left:6px; top:350px; right:auto; bottom:auto; min-width:max-content; padding:5px 10px; z-index:10; animation:sol-float-a 4.1s ease-in-out infinite; }

/* ── Cartes flottantes ────────────────────────────────────── */
.sol-demo-float-card { position:absolute; z-index:10; display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; font-size:12px; color:var(--muted); box-shadow:0 16px 40px rgba(0,0,0,.25); top:50px; left:14px; animation:sol-float-b 4.8s ease-in-out infinite; }
html[data-theme="light"] .sol-demo-float-card { background:#fff; border-color:rgba(0,0,0,.1); box-shadow:0 8px 24px rgba(0,0,0,.08); color:#374151; }
.sol-demo-float-card--right { top:auto; left:auto; right:0; bottom:60px; flex-direction:column; align-items:center; gap:3px; padding:12px 14px; animation:sol-float-card-r 5s ease-in-out infinite; }
.sol-demo-float-card--smartqr-update { top:64px; left:6px; right:auto; bottom:auto; min-width:0; max-width:fit-content; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; align-items:center; gap:7px; z-index:9; white-space:nowrap; animation:sol-float-b 4.6s ease-in-out infinite; }
.sdemo-fcard-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdemo-fcard-dot--active { background:#1db87a; box-shadow:0 0 7px rgba(29,184,122,.55); }
.sdemo-fcard-strong { display:block; font-size:12px; font-weight:700; color:var(--text); }
.sdemo-fcard-time { font-size:10px; color:var(--soft); opacity:.75; }
.sdemo-fcard-sub { font-size:11px; font-weight:700; color:var(--text); }
.sdemo-fcard-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--surface-strong); border:1px solid var(--line); flex-shrink:0; }

/* ── Analytics card ───────────────────────────────────────── */
.sol-demo-analytics-card { position:absolute; left:6px; top:286px; bottom:auto; z-index:8; padding:8px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); box-shadow:0 14px 36px rgba(0,0,0,.28); display:grid; gap:2px; white-space:nowrap; animation:sol-float-a 5.4s ease-in-out infinite; }
html[data-theme="light"] .sol-demo-analytics-card { background:#fff; border-color:rgba(0,0,0,.1); }
.sol-demo-analytics-label { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); font-weight:700; }
.sol-demo-analytics-card strong { font-size:14px; line-height:1.1; color:var(--text); font-weight:700; }
.sol-demo-analytics-card span:last-child { font-size:10px; color:var(--muted); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes sol-float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes sol-float-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes sol-float-notif { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-6px)} }
@keyframes sol-float-card-r { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* ── Responsive démos ─────────────────────────────────────── */
@media (max-width:900px) {
  .sol-exp-row { grid-template-columns:1fr; gap:32px; }
  .sol-exp-row--flip { direction:ltr; }
  .sol-exp-list { gap:60px; }
  .sol-demo-stage { max-width:100%; min-height:360px; }
  .sol-demo-stage--smartqr { max-width:360px; min-height:440px; }
}
@media (max-width:540px) {
  .sol-demo-phone { width:160px; height:310px; }
  .sol-demo-phone--smartqr { width:168px; height:324px; top:54px; }
  .sol-demo-qr-card { width:126px; top:96px; }
  .sol-demo-stage--smartqr { min-height:400px; }
}