/* Motyw mobile: szkło, iOS-owy błękit, 20px radius, miękkie tło. */
:root[data-theme="mobile"] {
  --bg: #eef2f8; --bg-2: rgba(255,255,255,.62); --fg: #1C1C1E; --muted: #4a4a50; --border: rgba(255,255,255,.7);
  --accent: #0066D6; --accent-fg: #fff; --accent-text: #0052ad; --accent-soft: rgba(10,132,255,.14);
  --radius: 20px; --radius-s: 12px; --shadow: 0 1px 2px rgba(28,28,30,.06), 0 14px 40px rgba(28,28,30,.1);
}
:root[data-theme="mobile"] body { background: linear-gradient(160deg, #E8EEF7 0%, #F7F8FA 45%, #e6f0ff 100%) fixed; }
:root[data-theme="mobile"] .hero { background: radial-gradient(ellipse at 15% 30%, rgba(10,132,255,.16), transparent 50%), radial-gradient(ellipse at 90% 70%, rgba(255,55,95,.1), transparent 50%); }
:root[data-theme="mobile"] .hero-photo-cutout { background: radial-gradient(circle at 50% 35%, #cfe3ff 0%, #e8f0ff 70%, transparent 71%); }
:root[data-theme="mobile"] .stat, :root[data-theme="mobile"] .why-item, :root[data-theme="mobile"] .how-item, :root[data-theme="mobile"] .case, :root[data-theme="mobile"] .card, :root[data-theme="mobile"] .cta-box, :root[data-theme="mobile"] .demo-root, :root[data-theme="mobile"] .more-list a { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); }
:root[data-theme="mobile"] .top { background: rgba(238,242,248,.7); }
:root[data-theme="mobile"] .demo { background: rgba(255,255,255,.4); --accent-text: #0052ad; }
.cap { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.cap th, .cap td { padding: .5rem .4rem; text-align: center; border-bottom: 1px solid rgba(28,28,30,.08); }
.cap th:first-child, .cap td:first-child { text-align: left; }
.cap thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cap .ty { background: rgba(10,132,255,.12); font-weight: 700; }
.cap .ok { color: #1a7a31; } .cap .no { color: #b3261e; } .cap .part { color: #8a6508; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.7); }
.toggle i { width: 34px; height: 20px; border-radius: 999px; background: #d1d1d6; position: relative; display: inline-block; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.toggle.on i { background: #34c759; } .toggle.on i::after { left: 16px; }
.dev-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }