/* RoomScanner — new.roomscanner.ru
   Design: iOS 27 / Liquid Glass. Baseline layout 1920×1080, fluid down to 360px. */

:root {
  --bg: #F2F2F7;
  --ink: #0B0C0F;
  --ink-2: #2B2D33;
  --ink-3: #3A3D45;
  --muted: #4A4D55;
  --muted-2: #5B5E66;
  --line: #ECECF0;
  --accent: #2FD6A0;
  --accent-ink: #0A7D5A;
  --accent-soft: #EAF7F1;
  --logo-b: #12B283;
  --card-shadow: 0 0 0 0.5px rgba(0,0,0,0.06), 0 1px 2px rgba(16,20,34,0.04), 0 10px 30px rgba(16,20,34,0.05);
  --pad: clamp(16px, 8.333vw, 160px);
  --maxw: 1600px;
  --r-xl: clamp(28px, 2.08vw, 40px);
  --r-lg: clamp(26px, 1.98vw, 38px);
  --gap: clamp(12px, 1.04vw, 20px);
  --t-body: clamp(16px, 0.9375vw, 18px);
  --t-h3: clamp(22px, 1.5625vw, 30px);
  --sec-top: clamp(64px, 7.3vw, 140px);
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.4; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
section[id], #pricing, #download { scroll-margin-top: 110px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
.muted { color: var(--muted-2); }
.nowrap { white-space: nowrap; }
.accent-tx { color: var(--accent); }

/* ---------- Liquid Glass ---------- */
.glass {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  backdrop-filter: blur(26px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 0.5px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.08), 0 12px 32px rgba(16,20,34,0.12);
}
.glass-dark {
  background: rgba(28,30,36,0.48);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 0.5px rgba(0,0,0,0.4), 0 14px 36px rgba(0,0,0,0.35);
}
.card { background: #fff; box-shadow: var(--card-shadow); }

/* ---------- Logo ---------- */
.logo { font-family: 'Poppins', var(--font); font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.logo-a { color: var(--ink); }
.logo-b { color: var(--logo-b); }
.logo { display: inline-flex; align-items: baseline; font-family: 'Montserrat', 'Poppins', var(--font); font-weight: 900; letter-spacing: -0.01em; }
.logo .logo-a, .logo .logo-b { font-size: 1.32em; line-height: 1; }
.logo .logo-a { color: var(--ink); }
.logo .logo-b { color: #2FD3A8; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease; }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn svg { flex-shrink: 0; }
.btn-lg { height: clamp(54px, 3.54vw, 68px); padding: 0 clamp(22px, 1.46vw, 28px); font-size: clamp(16px, 0.99vw, 19px); gap: 12px; }
.btn-md { height: clamp(48px, 2.81vw, 54px); padding: 0 22px; font-size: 16px; }
.btn-sm { height: clamp(44px, 2.71vw, 52px); padding: 0 20px; font-size: 16px; }
.btn:has(.btn-ic) { padding-left: 8px; }
.btn-lg:has(.btn-ic) { padding-left: 9px; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 12px 28px rgba(11,12,15,0.18); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1), 0 6px 18px rgba(16,20,34,0.06); }
.btn-accent { background: var(--accent); color: var(--ink); font-weight: 700; }
.btn-ghost-light { background: rgba(255,255,255,0.12); color: #fff; }
.btn-glass-dark { color: #fff; }
.btn-block { width: 100%; }
.btn-ic { width: clamp(38px, 2.6vw, 50px); height: clamp(38px, 2.6vw, 50px); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-md .btn-ic { width: 38px; height: 38px; }
.btn-ic-accent { background: var(--accent); color: var(--ink); }
.btn-ic-dark { background: var(--ink); color: var(--accent); }
.btn-ic-dark2 { background: var(--ink); color: var(--accent); }
.btn-ic-glass { background: rgba(255,255,255,0.14); }

/* ---------- Top bar ---------- */
.topbar { position: fixed; top: 24px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav { pointer-events: auto; width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; height: 72px; padding: 0 10px 0 32px; border-radius: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .logo { font-size: 27px; }
.nav-links { display: flex; flex-shrink: 0; gap: 4px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.nav-links a { padding: 12px 16px; border-radius: 22px; white-space: nowrap; transition: background .15s; }
.nav-links a:hover { background: rgba(11,12,15,0.06); }
.nav-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Common text ---------- */
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 8px; border-radius: 21px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.pill-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.h1 { font-size: clamp(44px, 6.25vw, 120px); line-height: .97; font-weight: 800; letter-spacing: -0.045em; }
.hl { display: inline-block; margin-top: .08em; padding: 0 .23em .08em; border-radius: .32em; background: var(--accent); }
.lead { max-width: 600px; font-size: clamp(17px, 1.25vw, 24px); line-height: 1.45; color: var(--muted); }
.h2 { font-size: clamp(32px, 3.96vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: clamp(15px, .9375vw, 18px); font-weight: 600; color: var(--ink-3); }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.eyebrow-light { color: rgba(255,255,255,0.75); }
.section { padding-top: var(--sec-top); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 2.92vw, 56px); }
.sec-title { display: flex; flex-direction: column; gap: 18px; }
.sec-note { max-width: 460px; margin-bottom: 10px; font-size: clamp(16px, .99vw, 19px); line-height: 1.45; color: var(--muted); }
.link-play { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, .99vw, 19px); font-weight: 600; padding-bottom: 10px; white-space: nowrap; }
.link-play > span { width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--bg); font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.tag-accent { background: var(--accent); color: var(--ink); }
.ic-tile { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic-tile-lg { width: 60px; height: 60px; border-radius: 18px; }
.ic-tile-xl { width: 88px; height: 88px; border-radius: 26px; }
.ic-tile-dark { background: rgba(255,255,255,0.1); color: var(--accent); }
.ic-tile-gray { width: 64px; height: 64px; border-radius: 20px; background: var(--bg); color: var(--ink); }

/* ---------- Hero ---------- */
.hero { min-height: clamp(720px, 100svh, 1200px); display: flex; align-items: center; padding: 120px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 780fr); gap: clamp(24px, 3.1vw, 60px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: clamp(20px, 1.67vw, 32px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.stats { margin-top: 8px; width: min(720px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 28px; overflow: hidden; }
.stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-size: 18px; }
.stat > span:last-child { font-size: 15px; line-height: 1.35; color: var(--muted-2); }

.hero-visual { display: flex; justify-content: flex-end; }
.stage { position: relative; width: 100%; max-width: 780px; aspect-ratio: 780 / 840; container-type: inline-size; }
.stage-in { position: absolute; inset: 0; --u: calc(100cqw / 780); }
.stage-bg { position: absolute; left: 0; top: 0; width: 100%; height: calc(790 * var(--u)); border-radius: calc(56 * var(--u)); background: #DCEAE3; }
.scene { position: absolute; left: calc(-4 * var(--u)); top: calc(128 * var(--u)); width: calc(788 * var(--u)); height: calc(621 * var(--u)); overflow: visible; }
.scene-fx { pointer-events: none; }
.note { position: absolute; left: calc(-44 * var(--u)); top: calc(40 * var(--u)); width: calc(390 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(30 * var(--u)); display: flex; gap: calc(14 * var(--u)); align-items: center; }
.note-ic { width: calc(48 * var(--u)); height: calc(48 * var(--u)); flex-shrink: 0; border-radius: calc(13 * var(--u)); background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.note-ic svg { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.note-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(14 * var(--u)); color: var(--ink-3); }
.note-top { display: flex; justify-content: space-between; font-size: calc(13 * var(--u)); color: var(--muted-2); font-weight: 500; }
.note-tx b { font-size: calc(17 * var(--u)); color: var(--ink); }
.time-chip { position: absolute; left: calc(32 * var(--u)); top: calc(716 * var(--u)); height: calc(50 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(9 * var(--u)); border-radius: calc(25 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; }
.time-chip > span { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.time-chip svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.phone { position: absolute; right: calc(-36 * var(--u)); top: calc(206 * var(--u)); width: calc(304 * var(--u)); height: calc(628 * var(--u)); padding: calc(11 * var(--u)); border-radius: calc(62 * var(--u)); background: var(--ink); box-shadow: inset 0 0 0 1.5px #3A3C42, 0 36px 70px rgba(16,20,34,0.28), 0 10px 22px rgba(16,20,34,0.16); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: calc(52 * var(--u)); overflow: hidden; background: #EFE9E1; }
.island { position: absolute; top: calc(13 * var(--u)); left: calc(90 * var(--u)); width: calc(102 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(15 * var(--u)); background: #000; }
.ph-body { position: absolute; left: 0; top: calc(64 * var(--u)); width: 100%; padding: 0 calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.ph-head { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); }
.ph-head > span { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--muted-2); }
.ph-head b { font-size: calc(25 * var(--u)); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.ph-card { padding: calc(18 * var(--u)); border-radius: calc(26 * var(--u)); background: #fff; display: flex; flex-direction: column; gap: calc(14 * var(--u)); box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08), 0 8px 22px rgba(16,20,34,0.06); }
.ph-row { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.ph-ic { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.ph-ic svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ph-big { font-size: calc(30 * var(--u)); font-weight: 800; letter-spacing: -0.03em; }
.ph-dark { background: var(--ink); color: #fff; box-shadow: none; }
.ph-dark .ph-ic { background: rgba(255,255,255,0.1); color: var(--accent); }
.ph-price { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.ph-price b { font-size: calc(40 * var(--u)); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.ph-price span { font-size: calc(16 * var(--u)); font-weight: 500; color: rgba(255,255,255,0.7); }
.home-ind { position: absolute; bottom: calc(10 * var(--u)); left: calc(84 * var(--u)); width: calc(114 * var(--u)); height: calc(5 * var(--u)); border-radius: 3px; background: rgba(11,12,15,0.85); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.step { min-height: clamp(360px, 22.9vw, 440px); padding: clamp(24px, 1.77vw, 34px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; }
.step-dark { background: var(--ink); color: #fff; }
.step-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.step-n { font-size: 17px; font-weight: 600; color: #6A6D75; }
.step-dark .step-n { color: rgba(255,255,255,0.6); }
.step h3 { margin-top: 12px; font-size: var(--t-h3); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.step p { font-size: var(--t-body); line-height: 1.45; color: var(--muted); }
.step-dark p { color: rgba(255,255,255,0.72); }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: clamp(15px, .885vw, 17px); line-height: 1.35; color: var(--ink-3); }
.checks li { display: flex; gap: 12px; }
.checks li > span { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.bignum { display: flex; align-items: baseline; gap: 10px; }
.bignum b { font-size: clamp(44px, 3.33vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.05em; }
.bignum span { font-size: clamp(17px, 1.04vw, 20px); font-weight: 600; }
.step-foot .btn { align-self: flex-start; white-space: normal; text-align: left; height: auto; min-height: 50px; padding: 6px 18px 6px 6px; font-weight: 700; line-height: 1.2; }
.link-row { height: 60px; padding: 0 10px 0 18px; border-radius: 30px; background: var(--bg); display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.link-row > span:not(.round-dark) { flex: 1; }
.round-dark { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Pricing ---------- */
.pricing { margin-top: var(--gap); display: flex; flex-direction: column; gap: var(--gap); }
.tariffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tariff { min-height: clamp(250px, 15.6vw, 300px); padding: clamp(24px, 1.77vw, 34px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; }
.tariff-free { background: var(--accent); }
.tariff-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tariff-free .tariff-head { align-items: center; }
.tariff-head b { font-size: 20px; font-weight: 700; }
.tariff-head .muted { font-size: 17px; font-weight: 600; }
.tariff-head .tariff-pts { font-size: clamp(24px, 1.5625vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.tariff-zero { margin-top: auto; font-size: clamp(64px, 5vw, 96px); line-height: .9; font-weight: 800; letter-spacing: -0.05em; }
.tariff-free p { font-size: 17px; line-height: 1.4; font-weight: 500; }
.dots { display: grid; grid-template-columns: repeat(12, 12px); gap: 8px; margin-top: 6px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #E6E6EC; }
.dots i.on { background: var(--ink); }
.tariff-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tariff-price b { font-size: clamp(44px, 3.33vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.tariff-price span { font-size: clamp(16px, .9375vw, 18px); font-weight: 600; color: var(--muted-2); }
.trial { min-height: 132px; padding: 20px 20px 20px 36px; border-radius: var(--r-lg); background: var(--ink); color: #fff; display: flex; align-items: center; gap: 28px; }
.trial-ic { width: 72px; height: 72px; border-radius: 22px; background: rgba(255,255,255,0.1); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trial-tx { display: flex; flex-direction: column; gap: 6px; }
.trial-tx b { font-size: clamp(22px, 1.5625vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.trial-tx > span { font-size: 17px; line-height: 1.4; color: rgba(255,255,255,0.72); }
.trial .btn { margin-left: auto; flex-shrink: 0; }

/* ---------- Shooting tips ---------- */
.tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tip { padding: 14px 14px clamp(24px, 1.77vw, 34px); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 18px; }
.tip-dark { background: var(--ink); color: #fff; }
.tip-art { position: relative; height: clamp(220px, 14.6vw, 280px); border-radius: clamp(22px, 1.56vw, 30px); background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.tip-art-mint { background: var(--accent-soft); }
.tip-art-dark { background: #1C1E24; color: #fff; }
.tip-art > svg { width: clamp(180px, 12.5vw, 240px); height: auto; }
.tip-badge { position: absolute; top: 16px; right: 16px; }
.tip-body { padding: 0 clamp(10px, 1.04vw, 20px); display: flex; flex-direction: column; gap: 12px; }
.tip-body h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.tip-body p { font-size: var(--t-body); line-height: 1.45; color: var(--muted); }
.tip-dark .tip-body p { color: rgba(255,255,255,0.72); }
.meter { display: flex; align-items: center; gap: 12px; }
.meter-segs { display: flex; gap: 6px; }
.meter-segs i { width: 40px; height: 8px; border-radius: 4px; background: #E3E3E8; }
.meter-segs i.on { background: var(--accent); }
.tip-dark .meter-segs i:not(.on) { background: rgba(255,255,255,0.18); }
.meter > span { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.tip-dark .meter > span { color: rgba(255,255,255,0.8); }

/* ---------- Yandex maps ---------- */
.maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.map-card { position: relative; aspect-ratio: 790 / 560; border-radius: var(--r-xl); overflow: hidden; background: #E9EEEA; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pop { position: absolute; left: 40.25%; top: 16.43%; width: 37.97%; padding: clamp(8px, .52vw, 10px); border-radius: clamp(20px, 1.46vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.map-pop-img { position: relative; aspect-ratio: 280 / 150; border-radius: clamp(14px, 1.04vw, 20px); overflow: hidden; background: #EFE7DA; }
.map-pop-img img { position: absolute; left: -7%; top: 5%; width: 121%; height: auto; }
.map-pop-img span { position: absolute; left: 10px; top: 10px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(11,12,15,0.8); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; }
.map-pop-tx { padding: 0 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.map-pop-tx b { font-size: clamp(14px, .885vw, 17px); }
.map-pop-tx span { font-size: clamp(12px, .73vw, 14px); color: var(--ink-3); }
.map-opts { display: flex; flex-direction: column; gap: var(--gap); }
.map-opt-dark { flex-grow: 1; padding: clamp(24px, 1.98vw, 38px); border-radius: var(--r-xl); background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.map-opt-dark h3 { margin-top: 8px; font-size: clamp(24px, 1.77vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.map-opt-dark p { font-size: var(--t-body); line-height: 1.45; color: rgba(255,255,255,0.72); }
.map-opt-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.map-opt-foot .bignum b { font-size: clamp(48px, 3.75vw, 72px); }
.map-opt-self { padding: clamp(22px, 1.77vw, 34px) clamp(22px, 1.98vw, 38px); border-radius: var(--r-xl); display: flex; align-items: center; gap: 24px; }
.self-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.self-title b { font-size: clamp(21px, 1.35vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.self-title span { font-size: 17px; font-weight: 700; color: var(--accent-ink); }
.map-opt-self p { margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--muted); }

/* ---------- Video ---------- */
.video-card { position: relative; height: clamp(480px, 40.6vw, 780px); border-radius: clamp(32px, 2.7vw, 52px); overflow: hidden; background: #111216; color: #fff; }
.video-art { position: absolute; left: 35%; top: 11.5%; width: 62.5%; height: auto; opacity: .92; }
.video-copy { position: absolute; left: 4.5%; top: clamp(40px, 3.75vw, 72px); width: min(620px, 42%); display: flex; flex-direction: column; gap: 20px; }
.video-copy h2 { color: #fff; font-size: clamp(34px, 3.54vw, 68px); }
.video-copy p { font-size: clamp(16px, 1.04vw, 20px); line-height: 1.45; color: rgba(255,255,255,0.72); }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(96px, 7.3vw, 140px); height: clamp(96px, 7.3vw, 140px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .2s ease; }
.video-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.video-play svg { width: 40%; height: 40%; }
.video-bar { position: absolute; left: 4.5%; bottom: clamp(32px, 3.33vw, 64px); width: min(640px, 40%); height: 72px; padding: 0 12px 0 26px; border-radius: 36px; display: flex; align-items: center; gap: 18px; color: #fff; font-size: 16px; font-weight: 600; }
.video-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.22); position: relative; }
.video-track span { position: absolute; left: 0; top: 0; width: 18%; height: 6px; border-radius: 3px; background: var(--accent); }
.video-btn { height: 50px; padding: 0 20px; border-radius: 25px; background: rgba(255,255,255,0.14); display: flex; align-items: center; }

/* ---------- Tours ---------- */
.tours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tour { padding: 12px; border-radius: var(--r-xl); display: flex; flex-direction: column; }
.tour-img { position: relative; aspect-ratio: 496 / 400; border-radius: clamp(22px, 1.56vw, 30px); overflow: hidden; }
.tour-img img { position: absolute; left: -3.6%; top: 11%; width: 108.9%; height: auto; }
.tour-img-1 { background: #EFE7DA; } .tour-img-2 { background: #E3E9F2; } .tour-img-3 { background: #E6E4E0; }
.tour-chip { position: absolute; left: 16px; top: 16px; height: 38px; padding: 0 14px 0 10px; border-radius: 19px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.tour-foot { padding: 24px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-foot b { display: block; font-size: clamp(20px, 1.25vw, 24px); font-weight: 700; letter-spacing: -0.01em; }
.tour-foot div > span { font-size: clamp(15px, .885vw, 17px); color: var(--muted-2); }

/* ---------- Cases ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(240px, 15.6vw, 300px), auto); gap: var(--gap); }
.case { padding: clamp(24px, 1.77vw, 34px); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 14px; }
.case h3 { margin-top: auto; font-size: clamp(22px, 1.46vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.case p { font-size: var(--t-body); line-height: 1.45; color: var(--muted); }
.case-hotel { grid-row: span 2; padding: clamp(28px, 2.08vw, 40px); background: var(--ink); color: #fff; }
.case-hotel h3 { margin-top: 32px; }
.hotel-num { margin-top: auto; font-size: clamp(110px, 9.9vw, 190px); line-height: .85; font-weight: 800; letter-spacing: -0.06em; }
.hotel-sub { margin-top: 18px; font-size: clamp(19px, 1.25vw, 24px); font-weight: 600; }
.hotel-chip { margin-top: 24px; align-self: flex-start; min-height: 50px; padding: 8px 18px 8px 12px; border-radius: 25px; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; background: rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.case-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(24px, 2.5vw, 48px); padding: clamp(28px, 2.08vw, 40px) clamp(28px, 2.29vw, 44px); }
.case-wide-tx { display: flex; flex-direction: column; gap: 12px; width: min(640px, 45%); }
.case-wide-tx h3 { margin-top: 0; font-size: clamp(24px, 1.77vw, 34px); }
.bubbles { margin-left: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.bubbles span { padding: 14px 20px; border-radius: 24px 24px 6px 24px; background: var(--bg); font-size: clamp(15px, .885vw, 17px); font-weight: 500; }
.bubbles .bubble-me { align-self: flex-start; border-radius: 24px 24px 24px 6px; background: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* ---------- Contact ---------- */
.contact-card { position: relative; height: clamp(640px, 36.5vw, 700px); border-radius: clamp(32px, 2.7vw, 52px); overflow: hidden; background: var(--ink); color: #fff; }
.contact-art { position: absolute; left: 45%; top: 60px; width: 57.5%; height: auto; opacity: .95; }
.contact-copy { position: absolute; left: 4.5%; top: clamp(48px, 3.75vw, 72px); width: min(580px, 40%); display: flex; flex-direction: column; gap: 16px; }
.contact-copy .h2 { color: #fff; white-space: nowrap; }
.contact-copy p { font-size: clamp(16px, 1.04vw, 20px); line-height: 1.45; color: rgba(255,255,255,0.72); }
.form-box { position: absolute; left: 4.5%; top: clamp(250px, 16.25vw, 312px); width: min(560px, 40%); padding: clamp(20px, 1.46vw, 28px); border-radius: clamp(26px, 1.875vw, 36px); }
.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-form label { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); }
.lead-form input[type="tel"] { height: 64px; padding: 0 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff; font: inherit; font-size: 20px; outline: none; transition: border-color .15s; }
.lead-form input[type="tel"]::placeholder { color: rgba(255,255,255,0.45); }
.lead-form input[type="tel"]:focus { border-color: var(--accent); }
.lead-form input.is-bad { border-color: #FF8A80; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lead-form button[disabled] { opacity: .6; cursor: progress; }
.form-err { font-size: 14px; color: #FF9E94; }
.form-err a { text-decoration: underline; }
.consent { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.6); }
.form-ok { min-height: 252px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.form-ok[hidden], .lead-form[hidden], .form-err[hidden] { display: none; }
.ok-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.form-ok b { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.form-ok > span:not(.ok-ic) { font-size: 17px; color: rgba(255,255,255,0.72); }
.contact-links { position: absolute; right: clamp(24px, 2.5vw, 48px); bottom: clamp(24px, 2.5vw, 48px); display: flex; gap: 12px; }

/* ---------- Footer ---------- */
.footer { padding: clamp(40px, 3.33vw, 64px) 0; font-size: 17px; color: var(--muted); }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .logo { font-size: 25px; }
.footer-links { display: flex; gap: 28px; font-weight: 600; color: var(--ink); flex-wrap: wrap; }

/* ---------- Mobile tab bar ---------- */
.tabbar { display: none; }

/* ---------- Video modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(11,12,15,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-box { position: relative; width: min(1200px, 100%); }
.modal-video { aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.modal-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-x { position: absolute; top: -60px; right: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
body.is-locked { overflow: hidden; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1439px) {
  .nav-links a { padding: 12px 12px; }
}
@media (max-width: 1179px) {
  .nav-links { display: none; }
}
@media (max-width: 1279px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tariffs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1099px) {
  /* hero stacks */
  .hero { min-height: 0; padding: 112px 0 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { display: contents; }
  .hero-grid > * , .hero-copy > * { order: 10; }
  .hero-copy .pill { order: 1; }
  .hero-copy .h1 { order: 2; }
  .hero-copy .lead { order: 3; }
  .hero-visual { order: 4; justify-content: center; }
  .hero-copy .hero-actions { order: 5; }
  .hero-copy .stats { order: 6; }
  .stage { max-width: 640px; }

  .scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--pad)); padding: 4px var(--pad) 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .scroller::-webkit-scrollbar { display: none; }
  .scroller > * { flex: 0 0 min(420px, 82%); scroll-snap-align: start; scroll-margin-left: var(--pad); }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-note { margin: 0; }
  .link-play { padding: 0; }
  .maps { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .case { min-height: 220px; }
  .case-hotel { grid-column: 1 / -1; grid-row: auto; min-height: 0; order: -1; }
  .case-wide { flex-direction: column; align-items: flex-start; }
  .case-wide-tx { width: auto; }
  .bubbles { margin-left: 0; align-self: stretch; }

  .video-card { height: auto; display: flex; flex-direction: column; }
  .video-copy { position: static; width: auto; padding: 28px 28px 0; }
  .video-art { position: relative; left: auto; top: auto; width: 100%; max-width: 640px; margin: 8px auto -6%; }
  .video-play { top: auto; bottom: 22%; }
  .video-bar { display: none; }

  .contact-card { height: auto; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
  .contact-art { display: none; }
  .contact-copy, .form-box, .contact-links { position: static; width: auto; }
  .form-box { max-width: 560px; }
  .contact-links { flex-wrap: wrap; }

  .tabbar { display: flex; transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; gap: 10px; align-items: center; max-width: 560px; margin: 0 auto; }
  body.show-tabbar .tabbar { transform: none; opacity: 1; }
  .tabbar-tabs { flex: 1; height: 64px; padding: 4px; border-radius: 32px; display: flex; gap: 2px; }
  .tabbar-tabs a { flex: 1; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--ink-3); transition: background .15s; }
  .tabbar-tabs a.is-on { background: rgba(11,12,15,0.09); color: var(--ink); }
  .tabbar-cta { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 0.5px rgba(0,0,0,0.12), 0 12px 28px rgba(16,20,34,0.18); }
  .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .nav-cta { display: none; }
}

@media (max-width: 640px) {
  :root { --pad: 16px; --gap: 12px; }
  .topbar { top: 12px; }
  .nav { height: 56px; padding: 0 8px 0 18px; border-radius: 28px; }
  .nav .logo { font-size: 21px; }
  .nav-actions .btn { width: 40px; height: 40px; padding: 0; }
  .nav-actions .btn span { display: none; }

  .hero { padding-top: 88px; }
  .hero-grid { gap: 16px; }
  .pill { height: 32px; padding: 0 12px 0 5px; gap: 6px; font-size: 13px; }
  .pill-dot { width: 22px; height: 22px; }
  .pill-dot svg { width: 13px; height: 13px; }
  .h1 { font-size: clamp(40px, 12.8vw, 56px); }
  .lead { font-size: 16px; }
  .hero-actions { flex-direction: column; gap: 8px; margin-top: 4px; }
  .hero-actions .btn { width: 100%; height: 54px; font-size: 16px; }
  .stats { grid-template-columns: minmax(0, 1fr); margin-top: 4px; border-radius: 24px; }
  .stat { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "ic t" "ic s"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .stat .ic-tile { grid-area: ic; width: 40px; height: 40px; border-radius: 12px; }
  .stat b { grid-area: t; font-size: 16px; }
  .stat > span:last-child { grid-area: s; font-size: 14px; }

  .stage { aspect-ratio: 780 / 800; }
  .stage-bg { height: 100%; border-radius: 30px; }
  .phone { display: none; }
  .scene { top: calc(150 * var(--u)); }
  .note { left: 12px; right: 12px; top: 12px; width: auto; padding: 10px 12px; border-radius: 20px; gap: 10px; font-size: 12px; }
  .note-ic { width: 34px; height: 34px; border-radius: 9px; }
  .note-ic svg { width: 20px; height: 20px; }
  .note-tx { font-size: 12px; gap: 1px; }
  .note-top { font-size: 11px; }
  .note-tx b { font-size: 14px; }
  .time-chip { left: 12px; top: auto; bottom: 12px; height: 36px; padding: 0 12px 0 6px; border-radius: 18px; gap: 6px; font-size: 12px; }
  .time-chip > span { width: 24px; height: 24px; }
  .time-chip svg { width: 13px; height: 13px; }

  .section { padding-top: 64px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .sec-title { gap: 10px; }
  .h2 { font-size: 32px; letter-spacing: -0.035em; }
  .h2 br { display: none; }
  .sec-note { font-size: 15px; margin: 0; }
  .link-play { font-size: 15px; padding: 0; }
  .link-play > span { width: 40px; height: 40px; }

  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; padding: 22px; border-radius: 28px; gap: 12px; }
  .step h3 { margin-top: 4px; font-size: 22px; }
  .step p { font-size: 15px; }
  .step-foot { margin-top: 8px; }
  .bignum b { font-size: 44px; }
  .tag { height: 30px; padding: 0 12px; font-size: 12px; }
  .tariffs { grid-template-columns: minmax(0, 1fr); }
  .tariff { min-height: 0; padding: 22px; border-radius: 28px; }
  .tariff-free .tariff-zero { font-size: 64px; margin-top: 12px; }
  .tariff-free p { font-size: 15px; }
  .dots { grid-template-columns: repeat(20, 8px); gap: 5px; }
  .dots i { width: 8px; height: 8px; }
  .tariff-price { margin-top: 8px; }
  .tariff-price b { font-size: 40px; }
  .trial { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; border-radius: 28px; }
  .trial-ic { width: 56px; height: 56px; border-radius: 18px; }
  .trial-tx b { font-size: 22px; }
  .trial-tx > span { font-size: 15px; }
  .trial .btn { margin-left: 0; width: 100%; height: 54px; font-size: 16px; }

  .tip-art { height: 200px; }
  .tip-art > svg { width: 170px; }
  .tip-body h3 { font-size: 22px; }
  .tip-body p { font-size: 15px; }

  .map-card { aspect-ratio: 1 / 1; border-radius: 28px; }
  .map-art { object-fit: cover; }
  .map-pop { left: calc(63% - 96px); top: 18px; width: 192px; padding: 8px; border-radius: 20px; gap: 6px; }
  .map-pop-img { border-radius: 14px; }
  .map-pop-img span { height: 24px; font-size: 11px; left: 8px; top: 8px; padding: 0 8px; }
  .map-pop-tx b { font-size: 14px; }
  .map-pop-tx span { font-size: 12px; }
  .map-opt-dark { padding: 22px; border-radius: 28px; }
  .map-opt-dark h3 { font-size: 24px; margin-top: 4px; }
  .map-opt-dark p { font-size: 15px; }
  .map-opt-foot .bignum b { font-size: 48px; }
  .map-opt-self { padding: 20px; border-radius: 28px; gap: 16px; align-items: flex-start; }
  .map-opt-self .ic-tile-gray { width: 48px; height: 48px; border-radius: 14px; }
  .map-opt-self .ic-tile-gray svg { width: 24px; height: 24px; }
  .self-title b { font-size: 19px; }
  .self-title span, .map-opt-self p { font-size: 15px; }

  .video-card { border-radius: 28px; }
  .video-copy { padding: 22px 22px 0; gap: 12px; }
  .video-copy h2 { font-size: 30px; }
  .video-copy p { font-size: 15px; }
  .video-play { width: 84px; height: 84px; }

  .tour { padding: 10px; border-radius: 28px; }
  .tour-img { border-radius: 20px; }
  .tour-chip { left: 10px; top: 10px; height: 32px; font-size: 12px; }
  .tour-foot { padding: 16px 8px 6px; flex-direction: column; align-items: stretch; }
  .tour-foot .btn { width: 100%; }

  .bento { gap: 12px; }
  .case { min-height: 170px; padding: 16px; border-radius: 24px; gap: 6px; }
  .case .ic-tile-lg { width: 40px; height: 40px; border-radius: 12px; }
  .case .ic-tile-lg svg { width: 22px; height: 22px; }
  .case h3 { font-size: 16px; line-height: 1.2; }
  .case p { font-size: 13px; line-height: 1.35; }
  .case-hotel { padding: 20px; border-radius: 28px; }
  .case-hotel h3 { margin-top: 12px; font-size: 20px; }
  .hotel-num { margin-top: 12px; font-size: 88px; }
  .hotel-sub { margin-top: 8px; font-size: 16px; }
  .hotel-chip { margin-top: 14px; font-size: 13px; min-height: 40px; }
  .case-wide { padding: 18px; gap: 14px; }
  .case-wide .ic-tile-xl { width: 48px; height: 48px; border-radius: 14px; }
  .case-wide .ic-tile-xl svg { width: 26px; height: 26px; }
  .case-wide-tx h3 { font-size: 20px; }
  .bubbles span { font-size: 14px; padding: 10px 14px; }

  .contact-card { padding: 22px; border-radius: 28px; gap: 18px; }
  .contact-copy .h2 { font-size: 34px; }
  .form-box { padding: 18px; border-radius: 26px; }
  .lead-form input[type="tel"] { height: 56px; font-size: 18px; border-radius: 18px; }
  .lead-form .btn { height: 56px; }
  .contact-links { flex-direction: column; }
  .contact-links .btn { width: 100%; justify-content: flex-start; height: 56px; font-size: 15px; }

  .footer { font-size: 15px; }
  .footer-in, .footer-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-links { gap: 18px; }

  .modal { padding: 12px; }
  .modal-video { border-radius: 18px; }
}

/* Hero scene animation (walking operator) */
@keyframes rsw-walk{0.000%{transform:translate(322.0px,355.0px);opacity:0}5.634%{transform:translate(322.0px,355.0px);opacity:1}9.390%{transform:translate(322.0px,355.0px);opacity:1}45.540%{transform:translate(322.0px,355.0px);opacity:1}54.930%{transform:translate(186.0px,396.5px);opacity:1}91.080%{transform:translate(186.0px,396.5px);opacity:1}99.531%{transform:translate(186.0px,396.5px);opacity:0}100.000%{transform:translate(322.0px,355.0px);opacity:0}}
@keyframes rsw-spin{0.000%{transform:rotate(30deg)}9.390%{transform:rotate(30deg)}9.390%{transform:rotate(30deg)}12.676%{transform:rotate(30deg)}15.962%{transform:rotate(90deg)}19.249%{transform:rotate(90deg)}22.535%{transform:rotate(150deg)}25.822%{transform:rotate(150deg)}29.108%{transform:rotate(210deg)}32.394%{transform:rotate(210deg)}35.681%{transform:rotate(270deg)}38.967%{transform:rotate(270deg)}42.254%{transform:rotate(330deg)}45.540%{transform:rotate(330deg)}45.540%{transform:rotate(330deg)}54.930%{transform:rotate(390deg)}54.930%{transform:rotate(390deg)}58.216%{transform:rotate(390deg)}61.502%{transform:rotate(450deg)}64.789%{transform:rotate(450deg)}68.075%{transform:rotate(510deg)}71.362%{transform:rotate(510deg)}74.648%{transform:rotate(570deg)}77.934%{transform:rotate(570deg)}81.221%{transform:rotate(630deg)}84.507%{transform:rotate(630deg)}87.793%{transform:rotate(690deg)}91.080%{transform:rotate(690deg)}100.000%{transform:rotate(750deg)}}
@keyframes rsw-unspin{0.000%{transform:rotate(-30deg)}9.390%{transform:rotate(-30deg)}9.390%{transform:rotate(-30deg)}12.676%{transform:rotate(-30deg)}15.962%{transform:rotate(-90deg)}19.249%{transform:rotate(-90deg)}22.535%{transform:rotate(-150deg)}25.822%{transform:rotate(-150deg)}29.108%{transform:rotate(-210deg)}32.394%{transform:rotate(-210deg)}35.681%{transform:rotate(-270deg)}38.967%{transform:rotate(-270deg)}42.254%{transform:rotate(-330deg)}45.540%{transform:rotate(-330deg)}45.540%{transform:rotate(-330deg)}54.930%{transform:rotate(-390deg)}54.930%{transform:rotate(-390deg)}58.216%{transform:rotate(-390deg)}61.502%{transform:rotate(-450deg)}64.789%{transform:rotate(-450deg)}68.075%{transform:rotate(-510deg)}71.362%{transform:rotate(-510deg)}74.648%{transform:rotate(-570deg)}77.934%{transform:rotate(-570deg)}81.221%{transform:rotate(-630deg)}84.507%{transform:rotate(-630deg)}87.793%{transform:rotate(-690deg)}91.080%{transform:rotate(-690deg)}100.000%{transform:rotate(-750deg)}}
@keyframes rsw-flash{0%{opacity:0}9.977%{opacity:0}10.540%{opacity:1}12.606%{opacity:0}16.549%{opacity:0}17.113%{opacity:1}19.178%{opacity:0}23.122%{opacity:0}23.685%{opacity:1}25.751%{opacity:0}29.695%{opacity:0}30.258%{opacity:1}32.324%{opacity:0}36.268%{opacity:0}36.831%{opacity:1}38.897%{opacity:0}42.840%{opacity:0}43.404%{opacity:1}45.469%{opacity:0}55.516%{opacity:0}56.080%{opacity:1}58.146%{opacity:0}62.089%{opacity:0}62.653%{opacity:1}64.718%{opacity:0}68.662%{opacity:0}69.225%{opacity:1}71.291%{opacity:0}75.235%{opacity:0}75.798%{opacity:1}77.864%{opacity:0}81.808%{opacity:0}82.371%{opacity:1}84.437%{opacity:0}88.380%{opacity:0}88.944%{opacity:1}91.009%{opacity:0}100%{opacity:0}}
@keyframes rsw-over{0%{opacity:0}27.371%{opacity:0}27.465%{opacity:1}50.141%{opacity:1}50.235%{opacity:0}72.911%{opacity:0}73.005%{opacity:1}95.681%{opacity:1}95.775%{opacity:0}100%{opacity:0}}
@keyframes rsw-done0{0%{opacity:0}45.070%{opacity:0}47.418%{opacity:1}94.366%{opacity:1}100%{opacity:0}}
@keyframes rsw-done1{0%{opacity:0}90.610%{opacity:0}92.958%{opacity:1}94.366%{opacity:1}100%{opacity:0}}
@keyframes rsw-ring{0%{opacity:0}8.451%{opacity:0}10.329%{opacity:1}44.601%{opacity:1}46.009%{opacity:0}53.991%{opacity:0}55.869%{opacity:1}90.141%{opacity:1}91.549%{opacity:0}100%{opacity:0}}
.rsw-walk{animation:rsw-walk 10.65s linear infinite}
.rsw-spin{transform-origin:0 0;animation:rsw-spin 10.65s ease-in-out infinite}
.rsw-unspin{transform-origin:0 0;animation:rsw-unspin 10.65s ease-in-out infinite}
.rsw-flash{opacity:0;animation:rsw-flash 10.65s linear infinite}
.rsw-over{opacity:0;animation:rsw-over 10.65s linear infinite}
.rsw-ring{opacity:0;animation:rsw-ring 10.65s linear infinite}
.rsw-done0{opacity:0;animation:rsw-done0 10.65s linear infinite}
.rsw-done1{opacity:0;animation:rsw-done1 10.65s linear infinite}
@media (prefers-reduced-motion: reduce){.rsw-walk,.rsw-spin,.rsw-unspin,.rsw-flash,.rsw-over,.rsw-ring{animation-play-state:paused}}

/* ---------- Обучающая анимация из приложения ---------- */
.rv-card { border-radius: clamp(28px, 2.7vw, 52px); background: #0C0E0D; padding: clamp(24px, 3vw, 56px) 16px; display: flex; justify-content: center; }
.rv-wrap { --s: 1.3; width: calc(350px * var(--s)); height: calc(440px * var(--s)); }
.rv { width: 350px; height: 440px; transform: scale(var(--s)); transform-origin: 0 0; position: relative; overflow: hidden; border-radius: 24px; background: #151816; color: #F2F4F1; font-family: 'Onest', -apple-system, 'Segoe UI', sans-serif; }
.rv-stage { position: absolute; left: 0; top: 0; width: 350px; height: 292px; overflow: hidden; }
.rv-fade { position: absolute; inset: 0; background: #151816; pointer-events: none; }
.rv-cap { position: absolute; left: 18px; right: 18px; top: 300px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: #F2F4F1; }
.rv-ctl { position: absolute; left: 12px; right: 16px; top: 378px; height: 48px; display: flex; align-items: center; gap: 10px; }
.rv-btn { width: 44px; height: 44px; flex-shrink: 0; border: 0; padding: 0; border-radius: 50%; background: #1D211F; color: #F2F4F1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rv-btn.is-paused { background: #2EE59D; color: #06160F; }
.rv-seek { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: #2EE59D; cursor: pointer; }
.rv-time { flex-shrink: 0; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: #A2A9A5; }
#how-video { margin-top: var(--gap, 20px); }
@media (max-width: 900px) { .rv-wrap { --s: 1.1; } }
@media (max-width: 640px) { .rv-card { border-radius: 28px; padding: 16px 8px; } .rv-wrap { --s: 1; } }
@media (max-width: 380px) { .rv-wrap { --s: 0.86; } }