/* The Orbita Ring — сайт продукту. Dark Nano-Glass, та сама система, що й застосунок.
   Рух лише transform/opacity; «Зменшити рух» — спокійна версія без обертань і польотів. */
:root {
  --bg: #05070B; --bg2: #0B0D12; --glass: rgba(18, 21, 30, 0.62); --glass2: rgba(24, 28, 40, 0.78);
  --line: rgba(0, 242, 254, 0.14); --line2: rgba(255, 255, 255, 0.08);
  --tx: #F5F7FA; --tx2: #B7C0CC; --tx3: #7E8896;
  --ac: #00F2FE; --ac2: #4FACFE; --hot: #E8FDFF; --vi: #A855F7; --ok: #00E676; --warn: #FFB800;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-display: 'Michroma', 'Inter', system-ui, sans-serif;
  --r: 22px; --wrap: 1200px; --nav-h: 68px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 17px/1.6 var(--font-ui); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--font-mono); }

/* ── Тло: зорі, сітка, сяйво ── */
#sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; }
.aurora { position: fixed; inset: -20% -10% auto; height: 120vh; z-index: -1; pointer-events: none; opacity: .9;
  background: radial-gradient(40% 35% at 70% 20%, rgba(0, 242, 254, .10), transparent 70%), radial-gradient(35% 30% at 15% 60%, rgba(168, 85, 247, .08), transparent 70%); }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

/* ── Прогрес скролу ── */
.progress { position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ac), var(--ac2), var(--vi)); box-shadow: 0 0 12px var(--ac); }

/* ── Шапка і меню ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(5, 7, 11, .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-color: var(--line2); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand .wm { display: flex; flex-direction: column; line-height: 1.05; }
.brand .wm b { font: 400 15px var(--font-display); letter-spacing: .2em; color: var(--tx); }
.brand .wm span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--tx3); margin-top: 3px; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { position: relative; white-space: nowrap; padding: 8px 10px; border-radius: 10px; font-size: 15px; color: var(--tx2); transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px; border-radius: 2px; background: var(--ac); box-shadow: 0 0 8px var(--ac);
  transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.menu a:hover, .menu a.on { color: var(--tx); }
.menu a.on::after, .menu a:hover::after { transform: scaleX(1); }
.nav .cta-s { flex: none; }
.burger { display: none; width: 44px; height: 44px; margin-left: auto; border-radius: 12px; border: 1px solid var(--line2); position: relative; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--tx); transition: transform .3s, opacity .3s; }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 21px; } .burger i:nth-child(3) { top: 27px; }
.nav-open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .burger i:nth-child(2) { opacity: 0; }
.nav-open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; padding: calc(var(--nav-h) + 16px) 16px 24px; background: rgba(5, 7, 11, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet a.it { font: 400 22px/1 var(--font-display); letter-spacing: .04em; padding: 18px 8px; border-bottom: 1px solid var(--line2);
  opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; display: flex; justify-content: space-between; align-items: center; }
.sheet a.it span { font: 400 13px var(--font-mono); color: var(--ac); }
.nav-open .sheet { opacity: 1; pointer-events: auto; }
.nav-open .sheet a.it { opacity: 1; transform: none; }
.sheet .btn { margin-top: 18px; justify-content: center; }
@media (max-width: 1360px) { .menu, .nav .cta-s { display: none; } .burger { display: block; } }

/* ── Кнопки ── */
.btn { --h: 52px; display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: 16px; font-weight: 600; font-size: 16px; white-space: nowrap;
  position: relative; isolation: isolate; transition: transform .25s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.btn.pri { color: #03141a; background: linear-gradient(135deg, var(--ac), var(--ac2)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 10px 40px -10px rgba(0, 242, 254, .7); }
.btn.pri::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 18px; background: linear-gradient(135deg, var(--ac), var(--vi)); filter: blur(14px); opacity: .45; transition: opacity .3s; }
.btn.pri:hover::before { opacity: .85; }
.btn.ghost { border: 1px solid rgba(0, 242, 254, .35); background: rgba(0, 242, 254, .06); color: var(--tx); }
.btn.ghost:hover { background: rgba(0, 242, 254, .12); }
.btn.sm { --h: 42px; padding: 0 18px; font-size: 15px; border-radius: 13px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }

/* ── Живий логотип (як у застосунку) ── */
.lg { --s: 40px; --T: 7s; --Tf: 1.5s; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; border-radius: 50%; }
.lg i { position: absolute; display: block; }
.lg-glow { inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 242, 254, .3), rgba(0, 242, 254, 0) 62%); opacity: .5; animation: lg-breathe 4.2s ease-in-out infinite; }
@keyframes lg-breathe { 50% { opacity: .95; } }
.lg-sphere { inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 56%, #182330 0%, #0b1118 62%, #05080c 100%);
  box-shadow: inset 0 0 0 1px rgba(154, 164, 178, .38), inset 0 -5px 10px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 242, 254, .2); }
.lg-lens { left: 29%; top: 29%; width: 42%; height: 42%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #04161c 0 34%, #0a3a45 35% 52%, #041c22 53% 100%);
  box-shadow: 0 0 0 1.5px var(--ac), 0 0 9px rgba(0, 242, 254, .7), inset 0 0 5px rgba(0, 242, 254, .6); }
.lg-ticks { inset: 6%; border-radius: 50%; opacity: .8; background: repeating-conic-gradient(rgba(0, 242, 254, .95) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58% 74%, transparent 77%); mask: radial-gradient(circle, transparent 56%, #000 58% 74%, transparent 77%); animation: spin 26s linear infinite; }
.lg-pupil { left: 41%; top: 41%; width: 18%; height: 18%; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f0feff 0 14%, #00F2FE 24%, #046a78 62%, #012027 100%); box-shadow: 0 0 8px var(--ac); animation: lg-pupil 3.8s ease-in-out infinite; }
@keyframes lg-pupil { 50% { transform: scale(.8); } }
.lg-ring, .lg-orbit { left: -12%; top: 35%; width: 124%; height: 30%; transform: rotate(-18deg); }
.lg-ring { border-radius: 50%; border: 1.6px solid var(--ac); box-shadow: 0 0 5px rgba(0, 242, 254, .8), inset 0 0 3px rgba(0, 242, 254, .6); }
.lg-back { clip-path: inset(-40% -10% 50% -10%); opacity: .5; }
.lg-front { clip-path: inset(50% -10% -40% -10%); }
.lg-sx, .lg-sy { left: 50%; top: 50%; width: 0; height: 0; }
.lg-sy { left: 0; top: 0; }
.lg-sat { left: -2.6px; top: -2.6px; width: 5.2px; height: 5.2px; border-radius: 50%; background: #f2feff; box-shadow: 0 0 5px #fff, 0 0 10px var(--ac); }
.lg-orbit .lg-sx { animation: lg-x calc(var(--T) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.lg-orbit .lg-sy { animation: lg-y calc(var(--T) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate calc(var(--T) * -.75); }
.lg-orbit .lg-sat { animation: lg-depth var(--T) linear infinite; }
.lg.fast { --T: 1.5s; }
@keyframes lg-x { from { transform: translateX(calc(var(--s) * .62)); } to { transform: translateX(calc(var(--s) * -.62)); } }
@keyframes lg-y { from { transform: translateY(calc(var(--s) * -.15)); } to { transform: translateY(calc(var(--s) * .15)); } }
@keyframes lg-depth { 0% { opacity: .9; transform: scale(1); } 10%, 40% { opacity: .22; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } 60%, 90% { opacity: 1; transform: scale(1.3); } 100% { opacity: .9; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Кільце-портал (з модуля застосунку portal.js) ── */
.rg { --S: 360px; position: relative; width: var(--S); height: var(--S); flex: none; }
.rg > * { position: absolute; inset: 0; border-radius: 50%; }
.rg-disc { inset: 7%; background: radial-gradient(circle, #06121a 0, #03070b 62%, rgba(0, 242, 254, .18) 86%, rgba(0, 242, 254, 0) 100%); overflow: hidden; }
.rg-swirl { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, rgba(0, 242, 254, .22), transparent 30%, rgba(79, 172, 254, .18), transparent 60%, rgba(168, 85, 247, .16), transparent 85%);
  -webkit-mask: radial-gradient(circle closest-side, #000 30%, transparent 90%); mask: radial-gradient(circle closest-side, #000 30%, transparent 90%); animation: spin 5s linear infinite reverse; }
.rg-warp i { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px; transform: rotate(var(--a)); }
.rg-warp i::after { content: ""; position: absolute; width: calc(var(--S) * .09); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--hot));
  opacity: 0; animation: rg-warp 1.6s linear infinite; animation-delay: var(--d); }
@keyframes rg-warp { 0% { opacity: 0; transform: translateX(calc(var(--S) * .03)) scaleX(.15); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateX(calc(var(--S) * .4)) scaleX(1); } }
.rg-eye { inset: 38%; border: 2px solid rgba(0, 242, 254, .75); box-shadow: 0 0 14px rgba(0, 242, 254, .6), inset 0 0 10px rgba(0, 242, 254, .45);
  background: radial-gradient(circle, #020507 0 42%, rgba(0, 242, 254, .25) 44%, transparent 70%); animation: rg-eye 2.4s ease-in-out infinite; }
@keyframes rg-eye { 50% { transform: scale(.88); } }
.rg-ring { -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 10px), #000 calc(100% - 2px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 13px), #000 calc(100% - 10px), #000 calc(100% - 2px), transparent 100%); }
.rg-r1 { background: conic-gradient(from 0deg, transparent 0 6%, var(--ac) 14%, var(--hot) 16%, var(--ac2) 21%, transparent 31%, transparent 39%, var(--ac) 49%, var(--hot) 51%, transparent 62%, transparent 69%, var(--ac2) 80%, var(--hot) 83%, var(--ac) 88%, transparent 97%); animation: spin 1.25s linear infinite; }
.rg-r2 { inset: 3%; background: conic-gradient(from 90deg, transparent 0 12%, rgba(79, 172, 254, .8) 22%, transparent 34%, transparent 52%, rgba(168, 85, 247, .55) 64%, transparent 76%); animation: spin 2.1s linear infinite reverse; }
.rg-glow { inset: -6%; background: conic-gradient(from 0deg, transparent, rgba(0, 242, 254, .55), transparent 35%, rgba(0, 242, 254, .45), transparent 70%, rgba(79, 172, 254, .5), transparent);
  -webkit-mask: radial-gradient(circle closest-side, transparent 80%, #000 93%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 80%, #000 93%, transparent 100%); opacity: .75; animation: spin 1.25s linear infinite; }
.rg-sparks { animation: spin 3.2s linear infinite; }
.rg-sparks i, .rg-emb i, .rg-st i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.rg-sparks i::after { content: ""; position: absolute; left: calc(var(--S) * .5 - 7px); top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 6px var(--ac), 0 0 2px #fff;
  animation: rg-tw .7s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes rg-tw { from { opacity: .15; } to { opacity: 1; } }
.rg-emb { animation: spin 1.25s linear infinite; }
.rg-emb i::after { content: ""; position: absolute; left: calc(var(--S) * .5 - 4px); top: -1px; width: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--hot), var(--ac));
  opacity: 0; animation: rg-fling var(--t, 1s) cubic-bezier(.2, .6, .4, 1) infinite; animation-delay: var(--d); }
@keyframes rg-fling { 0% { opacity: 0; transform: translate(0, 0) rotate(-70deg) scale(1); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--S) * .06), calc(var(--S) * -.13)) rotate(-70deg) scale(.3); } }
.rg-st { transform: rotate(-90deg); }
.rg-st i::after { content: ""; position: absolute; left: calc(var(--S) * .5 + 6px); top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #1A1F2B; border: 1px solid rgba(0, 242, 254, .35); transition: opacity .4s, background .4s; }
.rg-st i.done::after { background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.rg-st i.now::after { background: var(--hot); box-shadow: 0 0 12px var(--ac); animation: rg-tw .55s ease-in-out infinite alternate; }

/* ── Перший екран ── */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 24px) 0 64px; overflow: hidden; }
.hero-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hero-ring { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.hero-ring .rg { --S: min(86vw, 720px); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hero-ring .tilt { perspective: 900px; }
.hero-in { position: relative; z-index: 2; text-align: center; max-width: 1000px; padding: 0 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 242, 254, .05);
  font-size: 14px; color: var(--tx2); }
.eyebrow b { font: 400 11px var(--font-display); letter-spacing: .14em; color: #03141a; background: var(--ac); border-radius: 999px; padding: 4px 9px; }
h1 { font: 700 clamp(34px, 5.8vw, 80px)/1.04 var(--font-ui); letter-spacing: -.03em; margin: 22px 0 18px; text-wrap: balance; }
h1 .w { display: inline-block; opacity: 0; transform: translateY(40px) rotate(3deg); filter: none; transition: opacity .9s, transform .9s cubic-bezier(.16, .84, .3, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.ready h1 .w { opacity: 1; transform: none; }
.grad { background: linear-gradient(100deg, #fff 10%, var(--ac) 45%, var(--ac2) 70%, var(--vi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 2vw, 21px); color: var(--tx2); max-width: 680px; margin: 0 auto; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .9s .7s, transform .9s .7s cubic-bezier(.16, .84, .3, 1); }
.ready .fade-up { opacity: 1; transform: none; }
.inputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.inputs span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line2); font-size: 14px; color: var(--tx2); }
.inputs svg { width: 16px; height: 16px; color: var(--ac); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--tx3); }
.scroll-cue i { width: 22px; height: 34px; border: 1.5px solid var(--tx3); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ac); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ── Секції ── */
section { position: relative; }
.sec { padding: clamp(80px, 12vw, 150px) 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 400 12px var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--ac); }
.kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
h2 { font: 700 clamp(32px, 5vw, 60px)/1.06 var(--font-ui); letter-spacing: -.03em; margin: 16px 0 18px; }
.sub { color: var(--tx2); font-size: clamp(16px, 1.6vw, 19px); max-width: 640px; margin: 0; }
.head { margin-bottom: clamp(36px, 6vw, 64px); }
.head.c { text-align: center; } .head.c .sub { margin: 0 auto; }

[data-rv] { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16, .84, .3, 1), transform .9s cubic-bezier(.16, .84, .3, 1); transition-delay: calc(var(--d, 0) * 90ms); }
[data-rv="l"] { transform: translateX(-40px); } [data-rv="r"] { transform: translateX(40px); } [data-rv="z"] { transform: scale(.92); }
[data-rv].in { opacity: 1; transform: none; }

/* ── Біль → рішення (лічильник рядків) ── */
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain .c { padding: 26px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line2); }
.pain .c b { display: block; font-size: 19px; margin-bottom: 8px; }
.pain .c p { margin: 0; color: var(--tx2); font-size: 16px; }
.pain .c .n { font: 400 12px var(--font-mono); color: var(--ac); letter-spacing: .1em; margin-bottom: 18px; display: block; }
@media (max-width: 860px) { .pain { grid-template-columns: 1fr; } }

/* ── Сценарій за скролом ── */
.story { position: relative; }
.story-track { position: relative; height: calc(var(--n) * 90vh + 40vh); }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr minmax(300px, 400px); align-items: center; gap: 56px; padding-top: var(--nav-h); }
.story-text { position: relative; }
.st-stack { position: relative; min-height: 330px; }
.st { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .6s cubic-bezier(.16, .84, .3, 1); pointer-events: none; }
.st.on { opacity: 1; transform: none; pointer-events: auto; }
.st .num { font: 400 13px var(--font-mono); color: var(--ac); letter-spacing: .12em; }
.st h3 { font: 700 clamp(28px, 3.6vw, 44px)/1.1 var(--font-ui); letter-spacing: -.025em; margin: 12px 0 14px; }
.st p { margin: 0; color: var(--tx2); font-size: 18px; max-width: 520px; }
.st ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.st li { display: flex; gap: 10px; color: var(--tx2); font-size: 16px; }
.st li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.dots { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.dots button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13px; color: var(--tx3); transition: color .3s, border-color .3s, background .3s; }
.dots button.on { color: #03141a; background: var(--ac); border-color: var(--ac); }
.dots button.done { color: var(--tx2); border-color: var(--line); }

/* Телефон */
.phone { width: 360px; height: 760px; border-radius: 46px; padding: 12px; justify-self: center;
  background: linear-gradient(160deg, #1d2330, #0a0d13 40%, #141924); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 40px 120px -30px rgba(0, 242, 254, .35), 0 0 0 1px #000; }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 5; }
.screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #0B0D12; }
.scr-top { position: absolute; inset: 0 0 auto; height: 86px; padding: 46px 16px 0; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line2); background: rgba(11, 13, 18, .9); z-index: 3; }
.scr-top .lg { --s: 26px; }
.scr-top .live { margin-left: auto; font-size: 10px; color: var(--ac); opacity: 0; transition: opacity .4s; }
.scr-nav { position: absolute; inset: auto 0 0; height: 62px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid var(--line2); background: rgba(11, 13, 18, .95); z-index: 3; font-size: 9.5px; color: var(--tx3); }
.scr-nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.scr-nav span::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: currentColor; opacity: .5; }
.scr-nav span.on { color: var(--ac); }
.scr-nav span.on::before { opacity: 1; box-shadow: 0 0 8px var(--ac); }
.view { position: absolute; inset: 86px 0 62px; padding: 14px 14px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s, transform .55s cubic-bezier(.16, .84, .3, 1); overflow: hidden; font-size: 13px; }
.view.on { opacity: 1; transform: none; }
.v-h { font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.v-s { color: var(--tx3); font-size: 11.5px; margin: 0 0 12px; line-height: 1.4; }
.fld { border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); border-radius: 12px; padding: 9px 11px; margin-bottom: 9px; }
.fld small { display: block; font-size: 10px; color: var(--tx3); margin-bottom: 3px; }
.fld .val { min-height: 18px; font-size: 13px; }
.fld.plate .val { font-family: var(--font-mono); letter-spacing: .14em; font-size: 15px; }
.fld.ta .val { min-height: 54px; line-height: 1.45; }
.caret::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ac); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.chip { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line2); font-size: 10.5px; color: var(--tx2); }
.fakebtn { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; font-weight: 700; font-size: 13px; color: #03141a; background: linear-gradient(135deg, var(--ac), var(--ac2));
  box-shadow: 0 6px 22px -8px rgba(0, 242, 254, .8); transition: transform .2s; }
.fakebtn.press { animation: press .5s ease; }
@keyframes press { 40% { transform: scale(.94); } }
.fakebtn.alt { background: rgba(0, 242, 254, .08); color: var(--tx); border: 1px solid rgba(0, 242, 254, .35); box-shadow: none; }
.row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .025); margin-bottom: 7px;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .45s cubic-bezier(.16, .84, .3, 1); transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
.view.on .row { opacity: 1; transform: none; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 12.5px; font-weight: 600; }
.row .t span { font-size: 10.5px; color: var(--tx3); }
.tag { flex: none; padding: 3px 7px; border-radius: 7px; font-size: 10px; background: rgba(0, 242, 254, .1); color: var(--ac); border: 1px solid rgba(0, 242, 254, .2); }
.tag.ok { background: rgba(0, 230, 118, .1); color: var(--ok); border-color: rgba(0, 230, 118, .25); }
.tag.vi { background: rgba(168, 85, 247, .12); color: #c99bff; border-color: rgba(168, 85, 247, .3); }
.ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(0, 242, 254, .08); color: var(--ac); }
.ico svg { width: 15px; height: 15px; }
.car { border-radius: 16px; padding: 14px; background: linear-gradient(160deg, rgba(0, 242, 254, .1), rgba(18, 21, 30, .6)); border: 1px solid rgba(0, 242, 254, .3); margin-bottom: 10px;
  opacity: 0; transform: scale(.94); transition: opacity .5s .9s, transform .6s .9s cubic-bezier(.2, .9, .3, 1.2); }
.view.on .car { opacity: 1; transform: none; }
.car .pl { display: inline-block; font: 700 12px var(--font-mono); letter-spacing: .12em; padding: 3px 8px; border-radius: 6px; background: #f2f4f7; color: #0b0d12; }
.car h4 { margin: 8px 0 2px; font-size: 18px; }
.car .sp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 10.5px; color: var(--tx2); margin-top: 8px; }
.car .sp span b { display: block; color: var(--tx3); font-weight: 400; font-size: 9.5px; }
.src { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tx2); padding: 5px 0; opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i) * 220ms + 150ms); }
.view.on .src { opacity: 1; }
.src i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--tx3); flex: none; position: relative; }
.src.ok i { border-color: var(--ok); background: rgba(0, 230, 118, .2); }
.src.ok i::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.src.off { color: var(--tx3); }
.mini-ring { display: grid; place-items: center; margin: 10px 0 8px; }
.mini-ring .rg { --S: 210px; }
.stations { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px; }
.stations span { flex: 1; text-align: center; font-size: 10px; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--line2); color: var(--tx3); transition: all .4s; }
.stations span.done { color: var(--ac); border-color: rgba(0, 242, 254, .35); background: rgba(0, 242, 254, .07); }
.stations span.now { color: #03141a; background: var(--ac); border-color: var(--ac); }
.skel { display: inline-block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(0, 242, 254, .25), rgba(255, 255, 255, .06)); background-size: 200% 100%; vertical-align: middle; opacity: .9; }
.sup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 6px 0 12px; }
.sup span { position: relative; text-align: center; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line2); font-size: 10px; color: var(--tx2); overflow: hidden; }
.sup span b { display: block; font-size: 9px; color: var(--ac); font-weight: 600; margin-top: 2px; }
.sup span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 242, 254, .18), transparent); transform: translateX(-100%); }
.view.on .sup span::after { animation: sweep 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 250ms); }
@keyframes sweep { to { transform: translateX(100%); } }
.seg { display: flex; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); margin-bottom: 10px; position: relative; }
.seg span { flex: 1; text-align: center; font-size: 10.5px; padding: 6px 0; border-radius: 8px; color: var(--tx3); position: relative; z-index: 1; transition: color .3s; }
.seg span.on { color: #03141a; font-weight: 600; }
.seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--ac); transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ck { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--tx3); position: relative; transition: background .3s, border-color .3s; }
.ck.on { background: var(--ac); border-color: var(--ac); }
.ck.on::after { content: ""; position: absolute; left: 5.5px; top: 2px; width: 4px; height: 8px; border: solid #03141a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sum { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 242, 254, .07); border: 1px solid rgba(0, 242, 254, .25); font-size: 11.5px; }
.slider { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin: 8px 0 4px; position: relative; overflow: hidden; }
.slider i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ac), var(--vi)); transform-origin: 0 50%; transform: scaleX(.35); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) .6s; }
.view.on .slider i { transform: scaleX(.6); }
.bubble { max-width: 86%; padding: 9px 11px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); margin-bottom: 8px; font-size: 11.5px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * 300ms + 200ms); }
.bubble.me { margin-left: auto; border-radius: 14px 14px 4px 14px; background: rgba(0, 242, 254, .1); border-color: rgba(0, 242, 254, .3); }
.view.on .bubble { opacity: 1; transform: none; }
.note { font-size: 10.5px; color: var(--tx3); margin-top: 8px; }
.phone-box { justify-self: center; width: calc(360px * var(--ps, 1)); height: calc(760px * var(--ps, 1)); position: relative; }
.phone-box .phone { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--ps, 1)); }
@media (max-width: 900px) {
  .story-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; align-content: start; padding-top: calc(var(--nav-h) + 8px); }
  .story-text { order: 2; }
  .st-stack { min-height: 150px; }
  .phone-box { order: 1; }
  .st h3 { font-size: 22px; margin: 6px 0 6px; }
  .st p { font-size: 15px; line-height: 1.5; }
  .st ul, .dots { display: none; }
}

/* ── Живі демо ── */
.labs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.labs > * { min-width: 0; }
.lab { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: var(--glass); border: 1px solid var(--line2); overflow: hidden; }
.lab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(0, 242, 254, .45), transparent 35%, transparent 65%, rgba(168, 85, 247, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.lab h3 { margin: 0 0 6px; font-size: 22px; }
.lab > p { margin: 0 0 18px; color: var(--tx2); font-size: 15px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.presets button { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); font-size: 14px; color: var(--tx2); transition: border-color .2s, color .2s, background .2s; }
.presets button:hover, .presets button.on { border-color: rgba(0, 242, 254, .5); color: var(--tx); background: rgba(0, 242, 254, .07); }
.presets .mono { letter-spacing: .08em; }
.inrow { display: flex; gap: 8px; }
.inp { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); color: var(--tx); font: 500 16px var(--font-ui); outline: none; transition: border-color .2s; }
.inp:focus { border-color: rgba(0, 242, 254, .6); }
.inp.mono { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
textarea.inp { display: block; width: 100%; height: 110px; padding: 13px 16px; resize: vertical; line-height: 1.5; }
.out { margin-top: 16px; min-height: 220px; }
.casc { display: grid; gap: 6px; margin-bottom: 12px; }
.casc div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tx2); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.casc div.in { opacity: 1; transform: none; }
.casc i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--tx3); position: relative; }
.casc .run i { border-color: var(--ac); border-right-color: transparent; animation: spin .7s linear infinite; }
.casc .ok i { border-color: var(--ok); background: rgba(0, 230, 118, .2); }
.casc .ok i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 7px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.casc .skip { color: var(--tx3); }
.casc small { margin-left: auto; color: var(--tx3); font-size: 12px; text-align: right; }
.vcard { border-radius: 20px; padding: 18px; background: linear-gradient(160deg, rgba(0, 242, 254, .1), rgba(18, 21, 30, .5)); border: 1px solid rgba(0, 242, 254, .3);
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.15); }
.vcard.in { opacity: 1; transform: none; }
.vcard .pl { display: inline-block; font: 700 14px var(--font-mono); letter-spacing: .14em; padding: 4px 10px; border-radius: 7px; background: #f2f4f7; color: #0b0d12; }
.vcard .pl s { color: #c4374f; text-decoration-thickness: 2px; }
.vcard h4 { margin: 10px 0 2px; font-size: 24px; letter-spacing: -.01em; }
.vcard .sp { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; margin-top: 12px; font-size: 14px; }
.vcard .sp b { display: block; font-weight: 400; font-size: 12px; color: var(--tx3); }
.vcard .why { margin-top: 12px; font-size: 13px; color: var(--tx3); }
.vcard .why a { color: var(--ac); }
.cands { display: grid; gap: 6px; margin-top: 12px; }
.cands div { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--tx3); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line2); }
.cands div.hit { color: var(--tx); border-color: rgba(0, 230, 118, .45); background: rgba(0, 230, 118, .06); }
.cands .mono { min-width: 92px; }
.items { display: grid; gap: 8px; }
.item { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03);
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .45s cubic-bezier(.16, .84, .3, 1); }
.item.in { opacity: 1; transform: none; }
.item b { flex: 1 1 160px; font-weight: 600; font-size: 15px; }
.item .tag { font-size: 12px; padding: 3px 8px; }
.skipped { margin-top: 12px; font-size: 14px; color: var(--tx3); }
.skipped b { color: var(--tx2); font-weight: 500; }
.why2 { margin-top: 10px; font-size: 13px; color: var(--tx3); border-left: 2px solid var(--vi); padding-left: 10px; }
.cta-in { margin-top: 16px; font-size: 14px; color: var(--tx2); }
.cta-in a { color: var(--ac); border-bottom: 1px solid rgba(0, 242, 254, .4); }
@media (max-width: 920px) { .labs { grid-template-columns: minmax(0, 1fr); } }

/* ── Можливості (бенто) ── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell { position: relative; grid-column: span 2; min-height: 230px; padding: 26px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line2); overflow: hidden; isolation: isolate;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.cell:hover { border-color: rgba(0, 242, 254, .35); }
.cell .spot { position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 242, 254, .16), transparent 65%); opacity: 0; transform: translate(var(--mx, 50%), var(--my, 50%)); transition: opacity .3s; }
.cell:hover .spot { opacity: 1; }
.cell.w3 { grid-column: span 3; } .cell.w4 { grid-column: span 4; } .cell.w6 { grid-column: span 6; }
.cell h3 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -.01em; }
.cell p { margin: 0; color: var(--tx2); font-size: 15.5px; }
.cell .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--ac); background: rgba(0, 242, 254, .08); border: 1px solid rgba(0, 242, 254, .25); }
.cell .ic svg { width: 22px; height: 22px; }
.cell .vis { margin-top: 18px; }
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tri div { padding: 12px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .25); font-size: 13px; color: var(--tx2); transition: transform .3s; }
.tri div b { display: block; color: var(--tx); font-size: 15px; margin-bottom: 4px; }
.cell:hover .tri div:nth-child(1) { transform: translateY(-4px); } .cell:hover .tri div:nth-child(2) { transform: translateY(-8px); transition-delay: .05s; } .cell:hover .tri div:nth-child(3) { transform: translateY(-12px); transition-delay: .1s; }
.mq { display: flex; gap: 8px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq > div { display: flex; gap: 8px; flex: none; animation: marq 26s linear infinite; }
.mq span { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13.5px; color: var(--tx2); white-space: nowrap; }
@keyframes marq { to { transform: translateX(calc(-100% - 8px)); } }
.fix { font: 500 15px var(--font-mono); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fix s { color: #ff6b88; } .fix b { color: var(--ok); font-weight: 500; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .cell, .cell.w3, .cell.w4 { grid-column: span 1; } .cell.w6, .cell.w4 { grid-column: span 2; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .cell, .cell.w3, .cell.w4, .cell.w6 { grid-column: span 1; } .tri { grid-template-columns: 1fr; } }

/* ── Скріни (горизонтальна стрічка за скролом) ── */
.gal-track { position: relative; height: 320vh; }
.gal-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--nav-h); }
.gal-pin .head { margin-bottom: 26px; }
.reel { display: flex; gap: 22px; align-items: center; padding: 0 max(16px, (100vw - var(--wrap)) / 2); will-change: transform; }
.shot { flex: none; position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line2); background: #0b0d12; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.shot:hover { transform: translateY(-8px); border-color: rgba(0, 242, 254, .4); }
.shot img { height: 100%; width: 100%; object-fit: cover; object-position: top; }
.shot.ph { height: min(62vh, 560px); aspect-ratio: 390 / 844; border-radius: 30px; }
.shot.pc { height: min(52vh, 460px); aspect-ratio: 16 / 10; }
.shot figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; background: rgba(5, 7, 11, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line2); }
.gal-bar { width: min(var(--wrap), 100% - 32px); margin: 26px auto 0; height: 2px; background: var(--line2); border-radius: 2px; overflow: hidden; }
.gal-bar i { display: block; height: 100%; background: var(--ac); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 900px), (hover: none) {
  .gal-track { height: auto; }
  .gal-pin { position: relative; height: auto; padding: clamp(80px, 12vw, 150px) 0 40px; }
  .reel { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; transform: none !important; }
  .reel::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: center; }
  .shot.ph { height: 520px; max-height: 70vh; }
  .shot.pc { height: auto; width: 86vw; aspect-ratio: 16 / 10; }
  .gal-bar { display: none; }
}
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(3, 5, 8, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.lb.on { opacity: 1; pointer-events: auto; }
.lb img { max-height: 88vh; max-width: 100%; width: auto; border-radius: 18px; border: 1px solid var(--line2); transform: scale(.94); transition: transform .4s cubic-bezier(.2, .9, .3, 1.1); }
.lb.on img { transform: none; }
.lb button { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line2); background: var(--glass); font-size: 22px; }

/* ── Інтеграції: орбіта ── */
.integ { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.orb { --R: min(40vw, 230px); position: relative; width: calc(var(--R) * 2 + 120px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.orb::before, .orb::after { content: ""; position: absolute; inset: 60px; border-radius: 50%; border: 1px dashed rgba(0, 242, 254, .22); }
.orb::after { inset: calc(60px + var(--R) * .42); border-style: solid; border-color: rgba(168, 85, 247, .18); }
.orb .lg { --s: 92px; }
.orb-spin { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.orb-spin.paused, .orb:hover .orb-spin { animation-play-state: paused; }
.node { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); }
.node button { transform: translate(-50%, -50%); display: block; }
.node em { display: block; font-style: normal; animation: spin 60s linear infinite reverse; }
.orb:hover .node em { animation-play-state: paused; }
.node button span { display: block; padding: 9px 14px; border-radius: 999px; background: var(--glass2); border: 1px solid rgba(0, 242, 254, .3); font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 24px -6px rgba(0, 242, 254, .5); transition: transform .25s, background .25s; }
.node button:hover span, .node button.on span { transform: scale(1.08); background: rgba(0, 242, 254, .16); }
.idesc { min-height: 150px; }
.idesc .card { padding: 24px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.idesc h3 { margin: 0 0 8px; font-size: 22px; }
.idesc p { margin: 0; color: var(--tx2); }
@media (max-width: 900px) { .integ { grid-template-columns: minmax(0, 1fr); } .orb { --R: min(34vw, 150px); width: calc(var(--R) * 2 + 110px); } .orb .lg { --s: 64px; } .node button span { font-size: 12px; padding: 7px 10px; } }

/* ── Для кого ── */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.role { padding: 28px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line2); }
.role .who { font: 400 12px var(--font-display); letter-spacing: .2em; color: var(--ac); text-transform: uppercase; }
.role h3 { margin: 12px 0 10px; font-size: 22px; }
.role ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--tx2); font-size: 15.5px; }
.role li { display: flex; gap: 10px; }
.role li::before { content: "→"; color: var(--ac); flex: none; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

/* ── Кроки старту ── */
.start { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s; }
.start div { position: relative; padding: 24px 20px; border-radius: var(--r); border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); counter-increment: s; }
.start div::before { content: "0" counter(s); display: block; font: 400 30px var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(0, 242, 254, .7); margin-bottom: 14px; }
.start b { display: block; font-size: 17px; margin-bottom: 6px; }
.start p { margin: 0; color: var(--tx2); font-size: 15px; }
@media (max-width: 900px) { .start { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .start { grid-template-columns: 1fr; } }

/* ── Питання ── */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 18px; border: 1px solid var(--line2); background: var(--glass); overflow: hidden; transition: border-color .3s; }
.faq details[open] { border-color: rgba(0, 242, 254, .35); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 600; font-size: 17px; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: transform .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 1.5px; background: var(--ac); }
.faq summary i::after { transform: rotate(90deg); transition: transform .3s; }
.faq details[open] summary i::after { transform: rotate(0); }
.faq .a { padding: 0 22px 20px; color: var(--tx2); font-size: 16px; }

/* ── Фінальний заклик ── */
.final { text-align: center; overflow: hidden; }
.final .rg-wrap { display: grid; place-items: center; margin: 0 auto 30px; }
.final .rg { --S: min(70vw, 300px); transform: scale(var(--fs, .6)); opacity: var(--fo, .4); transition: transform .2s linear, opacity .2s linear; }
.final h2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.final .hero-cta { margin-top: 26px; }
.warp-out { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; place-items: center; background: radial-gradient(circle, rgba(0, 40, 60, .6), rgba(5, 7, 11, .96) 70%); opacity: 0; transition: opacity .4s; }
.warp-out.on { opacity: 1; }
.warp-out .rg { --S: min(80vw, 420px); transform: scale(.05) rotate(-540deg); opacity: 0; }
.warp-out.on .rg { animation: warp-in 1.1s cubic-bezier(.16, .84, .3, 1) forwards; }
@keyframes warp-in { 12% { opacity: 1; } 70% { transform: scale(1.06) rotate(-20deg); } 100% { opacity: 1; transform: scale(1.6) rotate(0); } }

footer { border-top: 1px solid var(--line2); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--tx3); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a:hover { color: var(--tx); }

/* Плаваюча кнопка на телефоні */
.dock { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: none; gap: 8px; transform: translateY(140%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.dock.on { transform: none; }
.dock .btn { flex: 1; justify-content: center; }
@media (max-width: 700px) { .dock { display: flex; } }

/* ── Зменшити рух ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  [data-rv], h1 .w, .fade-up, .row, .car, .src, .bubble, .item, .vcard, .casc div { opacity: 1 !important; transform: none !important; transition: opacity .3s !important; }
  .rg-warp, .rg-emb { display: none; }
  .hero-ring { transform: translate(-50%, -50%) !important; }
  .cell { transform: none !important; }
  .reel { transition: none; }
}

/* Знак The Orbita Ring (brand/orbita-mark.js) */
.final .om-orb { display: none; }
@media (max-width: 400px) { .nav .om { --h: 12.5px !important; } }

/* ── GHOST: фіолетовий неон, як у застосунку ── */
.ghost { --g1: #7C3AED; --g2: #A855F7; --g3: #C084FC; --gt: #E3CFFF; position: relative; overflow: hidden; }
.gx-veil { position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 45% at 80% 40%, rgba(168, 85, 247, .18), transparent 70%), radial-gradient(40% 40% at 10% 80%, rgba(124, 58, 237, .14), transparent 70%); }
.gx-k { color: var(--g3); } .gx-k::before { background: var(--g3); box-shadow: 0 0 8px var(--g2); }
.gx-title { display: flex; align-items: center; gap: 22px; margin: 18px 0 14px; }
.gx-title h2 { margin: 0; }
.gx-wm { font: 400 clamp(40px, 7vw, 76px)/1 var(--font-display); letter-spacing: .3em; color: var(--gt); text-shadow: 0 0 22px rgba(168, 85, 247, .85), 0 0 60px rgba(124, 58, 237, .5); margin-right: -.3em; }
.gh-mark { --g: 72px; position: relative; flex: none; width: var(--g); height: var(--g); display: inline-block; }
.gh-mark i { display: block; }
.gh-mark.gh-xs { --g: 18px; }
.gh-ring { position: absolute; left: -14%; right: -14%; top: 52%; height: 34%; margin-top: -17%; border-radius: 50%; border: 1.5px solid rgba(190, 140, 255, .6); transform: rotate(-16deg); }
.gh-back { z-index: 0; opacity: .55; }
.gh-front { z-index: 3; clip-path: inset(50% 0 0 0); box-shadow: 0 2px 10px rgba(168, 85, 247, .35); }
.gh-body { position: absolute; z-index: 2; left: 19%; top: 6%; width: 62%; height: 78%; overflow: visible; filter: drop-shadow(0 0 7px rgba(190, 140, 255, .8)); animation: gh-float 3.2s ease-in-out infinite; }
.gh-body path { fill: rgba(240, 230, 255, .94); }
.gh-eye { fill: #1b1030; animation: gh-blink 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gh-float { 50% { transform: translateY(-7%); } }
@keyframes gh-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.gh-scan { position: absolute; z-index: 2; left: 22%; right: 22%; top: 18%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ac), transparent); box-shadow: 0 0 8px var(--ac); opacity: 0; animation: gh-scan 2.8s ease-in-out infinite; }
@keyframes gh-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(calc(var(--g) * .55)); opacity: 1; } 70%, 100% { transform: translateY(calc(var(--g) * .55)); opacity: 0; } }
.gh-orbit { position: absolute; z-index: 4; inset: 0; transform: rotate(-16deg); pointer-events: none; }
.gh-sx, .gh-sy { position: absolute; width: 0; height: 0; }
.gh-sx { left: 50%; top: 52%; animation: gh-x 1.6s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.gh-sy { left: 0; top: 0; animation: gh-y 1.6s cubic-bezier(.37, 0, .63, 1) infinite alternate -2.4s; }
.gh-sat { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #e9fdff; box-shadow: 0 0 8px var(--ac), 0 0 3px #fff; animation: gh-depth 3.2s linear infinite; }
@keyframes gh-x { from { transform: translateX(calc(var(--g) * .64)); } to { transform: translateX(calc(var(--g) * -.64)); } }
@keyframes gh-y { from { transform: translateY(calc(var(--g) * -.17)); } to { transform: translateY(calc(var(--g) * .17)); } }
@keyframes gh-depth { 0% { opacity: .9; } 10%, 40% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } 60%, 90% { opacity: 1; transform: scale(1.3); } }
.gh-xs .gh-scan, .gh-xs .gh-back, .gh-xs .gh-orbit { display: none; }
.gh-xs .gh-ring { border-width: 1px; }

.gx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.gx-grid > * { min-width: 0; }
.gx-steps { list-style: none; margin: 0; padding: 0; counter-reset: gx; display: grid; gap: 12px; }
.gx-steps li { counter-increment: gx; position: relative; padding: 16px 18px 16px 62px; border-radius: 18px; border: 1px solid rgba(168, 85, 247, .22);
  background: radial-gradient(120% 120% at 0% 0%, rgba(168, 85, 247, .1), transparent 60%), var(--glass); }
.gx-steps li::before { content: counter(gx, decimal-leading-zero); position: absolute; left: 18px; top: 17px; font: 400 13px var(--font-display); color: var(--g3); text-shadow: 0 0 10px var(--g2); }
.gx-steps b { color: var(--gt); font-weight: 600; }
.gx-steps p { margin: 4px 0 0; color: var(--tx2); font-size: 15px; }
.gx-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; color: var(--tx2); font-size: 15px; }
.gx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(168, 85, 247, .5); background: rgba(168, 85, 247, .12);
  color: var(--gt); font-weight: 700; font-size: 13px; letter-spacing: .1em; box-shadow: 0 0 18px rgba(168, 85, 247, .25); }
.gx-or { color: var(--tx3); font-size: 14px; }

.gx-demo { position: relative; padding: 18px; border-radius: 26px; border: 1px solid rgba(168, 85, 247, .38);
  background: radial-gradient(140% 90% at 0% 0%, rgba(168, 85, 247, .16), transparent 55%), radial-gradient(120% 80% at 100% 100%, rgba(0, 242, 254, .06), transparent 60%), var(--glass2);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .1), 0 24px 70px rgba(76, 29, 149, .35); display: grid; gap: 14px; }
.gx-shot { position: relative; aspect-ratio: 260 / 170; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #12101c, #0a0910); border: 1px solid rgba(255, 255, 255, .06); }
.gx-part { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-p { fill: rgba(190, 150, 255, .07); stroke: var(--g3); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(168, 85, 247, .7)); }
.gx-h { fill: #0a0910; stroke: var(--g3); stroke-width: 1.4; }
.gx-lbl { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .3); }
.gx-lt { stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; }
.gx-ruler, .gx-tk { stroke: var(--ac); stroke-width: 1.4; opacity: .8; }
.gx-beam { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ac), transparent); box-shadow: 0 0 14px var(--ac), 0 0 30px rgba(168, 85, 247, .8);
  animation: gx-beam 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes gx-beam { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateY(calc(var(--bh, 210px))); opacity: 1; } 58%, 100% { transform: translateY(var(--bh, 210px)); opacity: 0; } }
.gx-tag { position: absolute; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--gt); background: rgba(20, 12, 36, .85); border: 1px solid rgba(168, 85, 247, .55);
  opacity: 0; transform: translateY(6px) scale(.96); animation: gx-tag 7.2s ease-in-out infinite; white-space: nowrap; }
.gx-tag.t1 { left: 36%; top: 12%; animation-delay: .6s; } .gx-tag.t2 { left: 6%; bottom: 20%; animation-delay: 1.3s; } .gx-tag.t3 { right: 5%; top: 30%; animation-delay: 2s; }
@keyframes gx-tag { 0%, 4% { opacity: 0; transform: translateY(6px) scale(.96); } 10%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
.gx-run { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 13px; color: var(--tx3); }
.gx-run li { position: relative; padding-left: 16px; transition: color .4s; }
.gx-run li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(168, 85, 247, .6); transition: background .4s, box-shadow .4s; }
.gx-run li.on { color: var(--gt); } .gx-run li.on::before { background: var(--g2); box-shadow: 0 0 10px var(--g2); }
.gx-run li.done { color: var(--tx2); } .gx-run li.done::before { background: rgba(168, 85, 247, .5); }
.gx-res { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(168, 85, 247, .2); }
.gx-gauge { position: relative; flex: none; width: 96px; height: 96px; }
.gx-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gx-gt { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 9; }
.gx-gv { fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 90 100; filter: drop-shadow(0 0 6px rgba(0, 230, 118, .7)); }
.gx-gauge span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 11px; color: var(--tx3); line-height: 1.1; }
.gx-gauge b { display: block; font: 600 22px var(--font-ui); color: var(--tx); }
.gx-bands { min-width: 0; }
.gx-bands .b { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 6px 0; font-size: 13px; font-weight: 600; }
.gx-bands .b i { width: 9px; height: 9px; border-radius: 50%; }
.gx-bands .g i { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .gx-bands .a i { background: var(--warn); box-shadow: 0 0 8px var(--warn); } .gx-bands .r i { background: #FF5470; box-shadow: 0 0 8px #FF5470; }
.gx-bands p { margin: 2px 0 0; font-size: 13px; color: var(--tx2); line-height: 1.5; }
.gx-soon { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 14px 18px; border-radius: 16px; border: 1px dashed rgba(168, 85, 247, .4); color: var(--tx2); font-size: 15px; }
.gx-soon b { font: 400 11px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--g3); }
.menu .m-gh { color: #E3CFFF; text-shadow: 0 0 10px rgba(168, 85, 247, .8); letter-spacing: .14em; }
.sheet .it.gh { color: #E3CFFF; text-shadow: 0 0 10px rgba(168, 85, 247, .8); }
@media (max-width: 900px) { .gx-grid { grid-template-columns: minmax(0, 1fr); } .gh-mark { --g: 56px; } .gx-title { gap: 16px; } }
@media (max-width: 420px) { .gx-run { grid-template-columns: minmax(0, 1fr); } .gx-res { flex-direction: column; align-items: flex-start; } .gx-wm { letter-spacing: .2em; margin-right: -.2em; } }
@media (prefers-reduced-motion: reduce) { .ghost .gh-mark *, .pr-ghost .gh-mark *, .gx-beam { animation: none !important; } .gx-beam { display: none; } .gx-tag { animation: none !important; opacity: 1; transform: none; } }

/* ── Тарифи ── */
.pr-sw { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); }
.pr-sw button { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tx2); transition: background .25s, color .25s; }
.pr-sw button.on { background: linear-gradient(90deg, var(--ac), var(--ac2)); color: #031016; }
.pr-sw em { font-style: normal; font-weight: 500; opacity: .8; }
.prs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.prs.prs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; margin: 0 auto; }
.pr { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--glass); }
.pr.pop { border-color: rgba(0, 242, 254, .5); background: radial-gradient(120% 70% at 50% 0%, rgba(0, 242, 254, .12), transparent 60%), var(--glass2); box-shadow: 0 0 0 1px rgba(0, 242, 254, .15), 0 24px 60px rgba(0, 242, 254, .12); }
.pr-badge { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #031016; background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 16px rgba(0, 242, 254, .5); }
.pr h3 { margin: 0; font: 400 15px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.pr-p { margin: 14px 0 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-p b { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.pr-p span { color: var(--tx3); font-size: 14px; }
.pr ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--tx2); flex: 1; align-content: start; }
.pr li { position: relative; padding-left: 20px; }
.pr li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 5px; border-left: 2px solid var(--ac); border-bottom: 2px solid var(--ac); transform: rotate(-45deg); }
.pr-gh { color: #E3CFFF; text-shadow: 0 0 10px rgba(168, 85, 247, .7); }
.pr-over { margin: 0 0 14px; font-size: 13px; color: var(--tx3); }
.pr .btn { width: 100%; justify-content: center; }
.pr-ghost { display: flex; gap: 20px; align-items: center; margin-top: 20px; padding: 20px 24px; border-radius: var(--r); border: 1px solid rgba(168, 85, 247, .4);
  background: radial-gradient(120% 120% at 0% 0%, rgba(168, 85, 247, .16), transparent 60%), var(--glass); }
.pr-ghost .gh-mark { --g: 52px; }
.pr-ghost h3 { margin: 0 0 4px; color: #E3CFFF; }
.pr-ghost p { margin: 0; color: var(--tx2); font-size: 15px; }
.pr-ghost b { color: var(--tx); }
.pr-note { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--tx3); }
@media (max-width: 1100px) { .prs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .prs.prs-3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
@media (max-width: 620px) { .prs { grid-template-columns: minmax(0, 1fr); } .pr-ghost { flex-direction: column; align-items: flex-start; } }

/* ── Реферальна програма ── */
.rf-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rf-t { padding: 22px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--glass); text-align: center; }
.rf-t span { font: 400 11.5px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); }
.rf-t b { display: block; margin: 8px 0 4px; font-size: clamp(40px, 5vw, 56px); font-weight: 700; line-height: 1; color: var(--tx); }
.rf-t.mid b { color: var(--ac); text-shadow: 0 0 18px rgba(0, 242, 254, .45); }
.rf-t.top { border-color: rgba(0, 242, 254, .45); background: radial-gradient(120% 80% at 50% 0%, rgba(0, 242, 254, .12), transparent 60%), var(--glass2); }
.rf-t.top b { background: linear-gradient(90deg, var(--ac), var(--ac2), var(--vi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-t p { margin: 0; color: var(--tx2); font-size: 14.5px; }
.rf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rf-c { padding: 22px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--glass); }
.rf-c h3 { margin: 0 0 12px; font-size: 18px; }
.rf-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--tx2); }
.rf-c li { position: relative; padding-left: 20px; }
.rf-c li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 5px; border-left: 2px solid var(--ac); border-bottom: 2px solid var(--ac); transform: rotate(-45deg); }
.rf-ex { margin: 16px 0 0; padding: 16px 20px; border-radius: 16px; border: 1px dashed var(--line); color: var(--tx2); font-size: 15px; }
.rf-ex b { color: var(--tx); }
@media (max-width: 900px) { .rf-tiers, .rf-grid { grid-template-columns: minmax(0, 1fr); } }
.rf-note { margin: 0 0 16px; text-align: center; font-size: 14px; color: var(--tx3); }

.pr-who { margin: 0 0 10px; font-size: 13px; color: var(--tx3); }
.pr h3 .pr-x { text-transform: none; letter-spacing: .04em; color: var(--tx2); }
.pr-yr { margin: -8px 0 12px; font-size: 13px; color: var(--tx3); }
.pr-yr[hidden] { display: none; }

.gx-price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 0}@media (max-width:760px){.gx-price{grid-template-columns:1fr}}
.gx-pc{padding:16px 18px;border-radius:16px;border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08)}.gx-pc span{display:block;font:400 11px var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:#B9A6FF;margin-bottom:6px}.gx-pc b{display:block;font-size:20px;color:#F5F7FA;margin-bottom:6px}.gx-pc p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tx3)}

.gx-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 0}.gx-story .gx-st-txt{grid-column:1/-1;padding:18px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}.gx-st-txt h3{margin:0 0 8px;font-size:18px}.gx-st-txt p{margin:0;color:var(--tx2);line-height:1.6;font-size:15px}
.gx-st-num{padding:16px 18px;border-radius:16px;background:rgba(245,177,76,.08);border:1px solid rgba(245,177,76,.35)}.gx-st-num b{display:block;font-size:26px;color:#F5B14C}.gx-st-num span{font-size:13px;color:var(--tx3)}@media (max-width:760px){.gx-story{grid-template-columns:1fr}}