:root {
  --bg: #08080B; --bg2: #0C0C10; --card: #101015; --card2: #16161C; --card3: #1F1F27; --line: rgba(255, 255, 255, .085);
  --txt: #F5F5F8; --muted: #9A9AAB; --dim: #5F5F6E;
  --accent: #8B5CF6; --accent2: #A78BFA; --accent3: #C4B5FD; --soft: rgba(139, 92, 246, .16);
  --ok: #34D399; --warn: #FBBF24;
  --r: 18px; --r-sm: 12px;
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent2); text-decoration: none; }
img, svg { max-width: 100%; }
.wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; line-height: 1.12; }
h1 { font-size: clamp(32px, 4.3vw, 52px); font-weight: 700; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent2); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.kicker::before { content: ""; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; }
section { padding: 96px 0; }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head h2 { margin-top: 14px; }
.sec-head p { margin-top: 14px; font-size: 19px; color: var(--muted); }
section { padding: 88px 0; }

.card.b12.radarcard .txt { flex: 1 1 380px; }
.card.b12.radarcard .mock { flex: 1 1 460px; }
.rstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
@media (max-width: 760px) { .rstats { grid-template-columns: 1fr; } }
.rstats div { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.rstats b { display: block; font-size: 17px; }
.rstats span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.rstage { overflow: hidden; }
.road { position: relative; height: 322px; border-radius: 16px; overflow: hidden; background:
  radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,.16), transparent 60%),
  linear-gradient(180deg, #0a0a10 0%, #0c0c13 55%, #101018 100%); }
@media (max-width: 560px) { .road { height: 300px; } .road .horizon { top: 53%; } .obj { top: 53%; } }
.road .rd { position: absolute; inset: 0; width: 100%; height: 100%; }
.road .rd .mid { animation: rdash 1.1s linear infinite; }
@keyframes rdash { to { stroke-dashoffset: -26; } }
.road .horizon { position: absolute; left: 0; right: 0; top: 44%; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,139,250,.5), transparent); }
.obj { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.5); transform-origin: 50% 50%; will-change: transform, opacity; }
.obj .glyph { display: grid; place-items: center; width: 86px; height: 86px; }
.obj .lbl { margin-top: 4px; text-align: center; font-size: 12px; font-weight: 700; color: var(--accent3); white-space: nowrap; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.sign { width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 9px solid #E53935; display: grid; place-items: center; color: #111; font-weight: 800; font-size: 28px; font-variant-numeric: tabular-nums; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.mycar { position: absolute; left: 61%; bottom: -6px; transform: translateX(-50%); animation: rbob 1.6s ease-in-out infinite; }
.mycar svg { display: block; width: 116px; height: 83px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
@keyframes rbob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(2px); } }
@media (max-width: 560px) { .mycar svg { width: 92px; height: 66px; } }
.ralert { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: rgba(10,10,16,.92); border: 1px solid var(--accent2); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .25s, border-color .2s; }
.ralert.on { opacity: 1; transform: none; }
.ralert.over { border-color: #F87171; }
.ralert .nm { font-weight: 700; font-size: 17px; line-height: 1.2; }
.ralert.over .nm, .ralert.over .dist b { color: #F87171; }
.ralert .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ralert .grow { flex: 1; min-width: 0; }
.ralert .sign { width: 54px; height: 54px; border-width: 7px; font-size: 20px; flex: 0 0 auto; box-shadow: none; }
.ralert .dist { text-align: right; flex: 0 0 auto; }
.ralert .dist b { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; }
.ralert .dist span { display: block; font-size: 11.5px; color: var(--dim); }
.ralert .dist .spd { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #F87171; }
@media (max-width: 560px) {
  .ralert { gap: 10px; padding: 10px 12px; left: 10px; right: 10px; top: 10px; }
  .ralert .nm { font-size: 14.5px; }
  .ralert .sub { display: none; }
  .ralert .sign { width: 40px; height: 40px; border-width: 5px; font-size: 15px; }
  .ralert .dist b { font-size: 22px; }
  .ralert .dist span { font-size: 10.5px; }
}
.rsay { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 52px; }
.rsay .beep { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--card3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent2); flex: 0 0 auto; }
.rsay .beep.pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); animation: rping 1s ease-out infinite; }
@keyframes rping { from { transform: scale(.85); opacity: .9 } to { transform: scale(1.35); opacity: 0 } }
.rsay .txt { background: var(--card2); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 6px; padding: 10px 14px; font-size: 15.5px; color: var(--txt); }
.rsay .txt.mute { color: var(--muted); }
.menu a { white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--card2); color: var(--txt); font-weight: 600; font-size: 16px; cursor: pointer; transition: transform .08s, filter .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); } .btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #B39DFA, #7C3AED 60%, #6D28D9); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(124, 58, 237, .35); }
.btn.primary:hover { box-shadow: 0 14px 36px rgba(124, 58, 237, .5); }
.btn.lg { padding: 18px 32px; font-size: 18px; border-radius: 18px; }

.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: rgba(9, 9, 13, .72); border-bottom: 1px solid rgba(43, 43, 53, .6); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 68px; width: min(1320px, 100% - 40px); }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; color: var(--txt); }
.orb { width: 34px; height: 34px; border-radius: 50%; position: relative; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #DDD3FF, var(--accent) 45%, #2E1F5E 78%, #0b0b10); box-shadow: 0 0 22px rgba(139, 92, 246, .5); }
.orb::before, .orb::after { content: ""; position: absolute; top: 13px; width: 4px; height: 8px; border-radius: 2px; background: #fff; }
.orb::before { left: 12px; } .orb::after { left: 19px; }
.menu { display: flex; gap: 22px; margin-left: auto; margin-right: auto; }
@media (min-width: 1300px) { .menu { gap: 26px; } }
.menu a { color: var(--muted); font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--txt); }
.top .btn { padding: 10px 18px; font-size: 15px; border-radius: 13px; }
@media (max-width: 999px) { .menu { display: none; } .top .btn { margin-left: auto; } }

.hero { position: relative; padding: 64px 0 80px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8, 8, 11, .92), rgba(8, 8, 11, .62) 40%, rgba(8, 8, 11, .06) 70%), linear-gradient(180deg, rgba(8, 8, 11, .75), transparent 24%), linear-gradient(0deg, var(--bg), transparent 26%); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero h1 { margin: 0 0 20px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #C4B5FD, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 19px; color: var(--muted); max-width: 540px; }
.hero .lead b { color: var(--txt); font-weight: 600; }
.hero .cta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; }
.hero .duo { display: flex; gap: 10px; }
.hero .free { flex-basis: 100%; color: var(--muted); font-size: 15px; }
.hero .free b { color: var(--txt); font-weight: 600; }
.trust { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14.5px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l7 2.8v5.7c0 4.9-3.1 9.4-7 11-3.9-1.6-7-6.1-7-11V5.3zM9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l7 2.8v5.7c0 4.9-3.1 9.4-7 11-3.9-1.6-7-6.1-7-11V5.3zM9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero-orb { position: relative; width: min(460px, 100%); aspect-ratio: 1; justify-self: center; }
.hero-orb::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .38), transparent 72%); filter: blur(18px); }
.hero-orb canvas { position: absolute; left: -40%; top: -40%; width: 180%; height: 180%; pointer-events: none; }
.orb-tap { position: absolute; z-index: 2; left: 50%; top: 79%; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 9px; border-radius: 999px; white-space: nowrap; color: #EDE9FE; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer; background: linear-gradient(180deg, rgba(36, 26, 66, .72), rgba(18, 14, 32, .72)); border: 1px solid rgba(167, 139, 250, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0, 0, 0, .4), 0 0 28px rgba(139, 92, 246, .28), inset 0 1px 0 rgba(255, 255, 255, .08); opacity: 0; transform: translate(-50%, 10px); transition: opacity .5s, transform .5s cubic-bezier(.2, .9, .3, 1.2); pointer-events: none; }
.orb-tap.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.orb-tap::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg); background: rgba(36, 26, 66, .9); border-left: 1px solid rgba(167, 139, 250, .5); border-top: 1px solid rgba(167, 139, 250, .5); }
.orb-tap i { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #B39DFA, #7C3AED 60%, #6D28D9); box-shadow: 0 0 14px rgba(139, 92, 246, .6); }
.orb-tap i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(196, 181, 253, .8); opacity: 0; animation: orbTapRing 1.8s ease-out infinite; }
.orb-tap svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: orbTapPress 1.8s ease-in-out infinite; }
.orb-tap b { font-weight: 600; }
@keyframes orbTapRing { 0%, 30% { opacity: 0; transform: scale(.8); } 40% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes orbTapPress { 0%, 22%, 48%, 100% { transform: none; } 32% { transform: translate(1px, 2px) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .orb-tap i::after, .orb-tap svg { animation: none; } }
@media (max-width: 960px) { .hero { padding: 48px 0 60px; } .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero::before { background: linear-gradient(180deg, rgba(8, 8, 11, .9), rgba(8, 8, 11, .62) 52%, rgba(8, 8, 11, .08) 74%), linear-gradient(0deg, var(--bg), transparent 12%); } .hero-orb { width: min(320px, 82%); } }

.stage { position: relative; width: 170px; height: 170px; margin: 0 auto 22px; }
.ring { position: absolute; inset: 10px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, .55); opacity: 0; transform: scale(.9); pointer-events: none; }
.listen .ring { animation: ripple 1.6s ease-out infinite; }
.listen .ring.r2 { animation-delay: .55s; }
.listen .ring.r3 { animation-delay: 1.1s; }
@keyframes ripple { 0% { opacity: .7; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.35); } }
.bigorb { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E5DEFF, #A78BFA 30%, #7C3AED 55%, #2E1F5E 80%, #0b0b10); box-shadow: 0 0 60px rgba(139, 92, 246, .55), 0 0 140px rgba(139, 92, 246, .25); animation: breathe 4s ease-in-out infinite; transition: box-shadow .4s, transform .4s; }
.listen .bigorb { box-shadow: 0 0 80px rgba(139, 92, 246, .8), 0 0 180px rgba(139, 92, 246, .4); transform: scale(1.04); animation: none; }
.talk .bigorb { animation: talk .55s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes talk { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.05) translateY(-4px); } }
.eyes { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 18px; transition: transform .25s; }
.eye { width: 14px; height: 30px; border-radius: 7px; background: #fff; transform-origin: center; transition: height .22s, width .22s, border-radius .22s, transform .22s; animation: blink 5.5s infinite; }
.eye.r { animation-delay: .05s; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.listen .eye { height: 34px; width: 15px; animation: none; }
.happy .eye { height: 11px; width: 22px; border-radius: 11px 11px 3px 3px; animation: none; transform: translateY(-3px); }
.wow .eye { height: 30px; width: 20px; border-radius: 50%; animation: none; }
.glance-l .eyes { transform: translateX(-9px); } .glance-r .eyes { transform: translateX(9px); } .glance-u .eyes { transform: translateY(-7px); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card.b12 { flex-direction: row; align-items: center; gap: 28px; flex-wrap: wrap; }
.card.b12 .txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.card.b12 .mock { margin-top: 0; flex: 1 1 420px; }
.card .head { display: flex; align-items: center; gap: 12px; }
.card .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; color: var(--accent2); flex: 0 0 auto; }
.card .ic svg { width: 21px; height: 21px; }
.card h3 { font-size: 19px; }
.card p { color: var(--muted); font-size: 15px; }
.mock { margin-top: auto; background: #0B0B10; border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-size: 14px; }

.features { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cx { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; grid-template-areas: "head head head" "tabs stage phr"; column-gap: 28px; background: linear-gradient(180deg, #14141b, #0f0f15); border: 1px solid rgba(255, 255, 255, .07); border-radius: 28px; padding: 28px 28px 24px; }
.cx-head { grid-area: head; display: flex; align-items: baseline; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cx-head h3 { font-size: 24px; letter-spacing: -.01em; }
.cx-head p { color: var(--muted); font-size: 15px; max-width: 540px; }
.cx-tabs { grid-area: tabs; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.cx-tabs button { display: flex; align-items: center; gap: 12px; font: inherit; font-size: 15px; font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; white-space: nowrap; transition: color .2s, background .2s; }
.cx-tabs button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.cx-tabs button:hover { color: var(--txt); background: rgba(255, 255, 255, .03); }
.cx-tabs button.on { color: #fff; background: rgba(139, 92, 246, .15); }
.cx-tabs button.on svg { color: var(--accent2); opacity: 1; }
.cx-stage { grid-area: stage; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; min-height: 540px; }
.cx-stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: 320px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .04), transparent); pointer-events: none; }
.cx-car { position: relative; width: 250px; height: 462px; }
.cx-st { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cx-orb { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 38% 32%, #fff, #DDD3FF 22%, #A78BFA 48%, #6D28D9 78%, #2E1F5E); }
.cx-orb::before, .cx-orb::after { content: ""; position: absolute; top: 33%; width: 12%; height: 26%; border-radius: 40%; background: #16121f; transition: height .2s, top .2s, border-radius .2s; }
.cx-orb::before { left: 32%; } .cx-orb::after { right: 32%; }
.cx-orb i { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, .7); opacity: 0; }
.cx.listen .cx-orb i { animation: ripple 1.2s ease-out infinite; }
.cx.listen .cx-orb i + i { animation-delay: .4s; }
.cx.happy .cx-orb::before, .cx.happy .cx-orb::after { top: 38%; height: 12%; border-radius: 60% 60% 20% 20%; }
.cx-dlg { position: absolute; left: 50%; top: 42px; z-index: 2; width: min(330px, 100%); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.cx-dlg p { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.35; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.cx-dlg p.vis { opacity: 1; transform: none; }
.cx-dlg .me { align-self: flex-end; background: rgba(38, 38, 47, .85); border: 1px solid rgba(255, 255, 255, .08); border-bottom-right-radius: 5px; }
.cx-dlg .jv { align-self: flex-start; background: rgba(70, 40, 140, .6); border: 1px solid rgba(167, 139, 250, .4); border-bottom-left-radius: 5px; }
.cx-hud { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-height: 72px; }
.cx-hud span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cx-hud b { font-size: 28px; font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
.cx-hud em { font-style: normal; font-size: 13.5px; color: var(--muted); }
.cx-hud.bump b { animation: bump .35s ease; }
.cx-phr { grid-area: phr; align-self: start; }
.cx-cap { padding: 10px 12px 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-list[hidden] { display: none; }
.cx-p { width: 100%; display: flex; align-items: center; gap: 12px; font: inherit; font-size: 16px; line-height: 1.3; color: #DDD6FE; text-align: left; background: none; border: 0; border-radius: 14px; padding: 9px 12px; cursor: pointer; transition: background .2s, color .2s; }
.cx-p:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.cx-p .mic { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: rgba(139, 92, 246, .14); transition: background .2s; }
.cx-p .mic::before { content: ""; position: absolute; inset: 9px; background: var(--accent2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.cx-p.on { background: rgba(139, 92, 246, .12); color: #fff; }
.cx-p.on .mic { background: var(--accent); }
.cx-p.on .mic::before { background: #fff; }
.cx-p.on .mic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 1.3s ease-out infinite; }
@media (max-width: 1100px) { .cx { grid-template-columns: 190px minmax(0, 1fr) 280px; column-gap: 20px; } }
@media (max-width: 900px) {
  .cx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "tabs" "phr"; padding: 22px 18px 16px; border-radius: 24px; }
  .cx-head { flex-direction: column; border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
  .cx-head h3 { font-size: 22px; }
  .cx-head p { font-size: 14.5px; }
  .cx-stage { min-height: 0; gap: 10px; padding-top: 34px; }
  .cx-car { width: 206px; height: 380px; }
  .cx-dlg { top: 38px; width: 100%; }
  .cx-hud b { font-size: 24px; }
  .cx-tabs { flex-direction: row; gap: 6px; margin: 16px -18px 0; padding: 0 18px 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .cx-tabs::-webkit-scrollbar { display: none; }
  .cx-tabs button { flex: 0 0 auto; scroll-snap-align: start; gap: 8px; padding: 9px 14px; font-size: 14.5px; border-radius: 999px; background: rgba(255, 255, 255, .045); }
  .cx-tabs button svg { width: 16px; height: 16px; }
  .cx-tabs button.on { background: rgba(139, 92, 246, .22); }
  .cx-cap { display: none; }
  .cx-list { margin-top: 12px; gap: 2px; }
  .cx-p { font-size: 15.5px; padding: 8px 10px; }
  .cx-p .mic { width: 32px; height: 32px; }
}

.car { display: block; width: 100%; height: 100%; overflow: visible; }
.car .c-lamp { transition: stroke .6s; }
.car .c-air path { fill: none; stroke: #C4B5FD; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 7; opacity: 0; transition: opacity .6s, stroke .6s; animation: cair 1.2s linear infinite; }
@keyframes cair { to { stroke-dashoffset: -20; } }
.car .c-defrost { transition: opacity .6s; }
.car .c-defrost.on { animation: cpulse 1.6s ease-in-out infinite; }
@keyframes cpulse { 50% { stroke-opacity: .35; opacity: .6; } }
.car .c-seat .cu, .car .c-seat .bk { fill: url(#cSeat); stroke: rgba(255, 255, 255, .07); transition: fill .6s, filter .6s; }
.car .c-win .gap { fill: #0c0c12; stroke: #A78BFA; stroke-width: 1.3; stroke-opacity: 0; transition: stroke-opacity .6s; }
.car .c-win .gl { fill: url(#cSide); transition: opacity .9s; }
.car .c-breeze path { fill: none; stroke: #C4B5FD; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0; transition: opacity .6s; animation: cair 1s linear infinite; }
.car .c-roof { opacity: 0; transition: opacity .5s; }
.cx[data-c="roof"] .car .c-roof { opacity: 1; }
.car .c-roof .glass { transition: transform 1.1s cubic-bezier(.3, .7, .3, 1); }
.car .c-roof .hole { fill: rgba(139, 92, 246, .12); stroke: #A78BFA; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0; transition: opacity .6s; }
.car .c-roof .shade { fill: #2a2a35; opacity: 0; transition: opacity .8s; }
.car .c-spk circle { fill: none; stroke: #A78BFA; stroke-width: 1; opacity: 0; transition: opacity .4s; }
.car .c-spk.on circle { opacity: 1; animation: cspk .7s ease-in-out infinite alternate; }
.car .c-spk.on circle:nth-child(2n) { animation-delay: .35s; }
@keyframes cspk { from { stroke-width: 1; stroke-opacity: .9; } to { stroke-width: 6; stroke-opacity: .15; } }
.car .c-scr-map, .car .c-scr-music, .car .c-scr-call, .car .c-clu-map { opacity: 0; transition: opacity .5s; }
.car .c-scr-call.ring { animation: cpulse .8s ease-in-out infinite; }
.car .c-batt, .car .c-fuel { opacity: 0; transition: opacity .5s; }
.car .c-batt rect, .car .c-batt path { fill: rgba(139, 92, 246, .18); stroke: #A78BFA; stroke-width: 1.3; stroke-linecap: round; }
.car .c-batt path { fill: none; }
.car .c-fuel { fill: rgba(139, 92, 246, .35); stroke: #A78BFA; stroke-width: 1.3; }
.car .c-batt.on, .car .c-fuel.on { opacity: 1; }
.facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts li { padding: 18px 22px 0 0; }
.facts li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.facts b { display: block; font-size: 16.5px; font-weight: 600; }
.facts span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts li, .facts li + li { padding: 14px 0; border-left: 0; } .facts li + li { border-top: 1px solid var(--line); } }

.cars .sec-head { margin-bottom: 26px; }
.mk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.mk button { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 12px; padding: 8px 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.mk button:hover { color: var(--txt); }
.mk button.on { color: #fff; border-color: rgba(139, 92, 246, .7); background: var(--soft); }
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ct { position: relative; display: flex; flex-direction: column; padding: 8px 16px 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)); color: var(--txt); transition: border-color .2s, transform .2s; }
.ct[hidden], .cars-more[hidden] { display: none; }
.ct:hover { border-color: rgba(139, 92, 246, .6); transform: translateY(-2px); }
.ct img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
.ct b { margin-top: 2px; font-size: 17px; font-weight: 600; }
.ct .st { display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.ct .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c, var(--dim)); box-shadow: 0 0 8px var(--c, transparent); }
.st.ok { --c: var(--ok); color: var(--ok); }
.st.part { --c: var(--warn); }
.ct .go { position: absolute; right: 16px; bottom: 15px; color: var(--accent2); font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .2s; }
.ct:hover .go, .ct:focus-visible .go { opacity: 1; }
.cars-more { margin-top: 14px; color: var(--muted); font-size: 15px; }
.cars-legend { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.cars-legend .st { display: inline-flex; align-items: baseline; gap: 8px; }
.cars-legend .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px var(--c); transform: translateY(-1px); }
.cars-legend .st b { color: var(--txt); font-weight: 600; }
.cars-ask { margin-top: 12px; color: var(--muted); font-size: 15px; }

.care { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
@media (max-width: 900px) { .care { grid-template-columns: 1fr; padding: 20px; gap: 20px; } }
.care-w { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: var(--ok); font-weight: 700; font-size: 14px; }
.care-w svg { width: 16px; height: 16px; }
.care h3 { font-size: 26px; margin: 14px 0 10px; }
.care-l > p { color: var(--muted); font-size: 16px; }
.care-no { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.care-no span { font-size: 13.5px; color: var(--muted); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 10px; display: inline-flex; align-items: center; gap: 7px; }
.care-no span::before { content: "✕"; font-size: 11px; font-weight: 700; color: #F87171; }

.care-help { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.care-help svg { width: 20px; height: 20px; color: var(--accent2); flex: 0 0 auto; margin-top: 1px; }
.care-help b { color: var(--txt); font-weight: 600; }
.care-r { background: #0B0B10; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.care-sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; }
.care-sw::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: linear-gradient(135deg, #B39DFA, #7C3AED 60%, #6D28D9); transition: transform .4s cubic-bezier(.3, .7, .3, 1); }
.care-r.gone .care-sw::before { transform: translateX(100%); }
.care-sw button { position: relative; z-index: 1; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: color .25s; }
.care-sw button.on { color: #fff; }
.care-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.care-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; transition: border-color .4s; }
.care-list li b { font-weight: 600; }
.care-list li span { text-align: right; font-size: 13.5px; color: var(--accent3); white-space: nowrap; }
@media (max-width: 560px) { .care-list li { font-size: 13.5px; padding: 9px 11px; } .care-list li span { font-size: 12.5px; } }
.care-list li.same span { color: var(--ok); }
.care-list li.same span::before { content: "✓ "; font-weight: 700; }
.care-list li.flip span { animation: careflip .45s ease; }
.care-list li.same.flash { border-color: rgba(52, 211, 153, .55); }
@keyframes careflip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.care-foot { margin-top: 10px; padding: 0 4px; font-size: 13px; color: var(--dim); }
.care h2 { font-size: 30px; margin: 14px 0 10px; }

.more-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.more-l li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); }
.more-l .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--accent2); }
.more-l .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.more-l b { display: block; font-size: 16.5px; font-weight: 600; }
.more-l span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 960px) { .more-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .more-l { grid-template-columns: minmax(0, 1fr); } .more-l li { padding: 14px 0; } }

.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps li { counter-increment: st; padding: 24px 26px 0 0; }
.steps li + li { padding-left: 26px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; border: 1px solid rgba(139, 92, 246, .6); color: var(--accent3); font-weight: 700; font-size: 15px; }
.steps b { display: block; font-size: 18px; font-weight: 600; }
.steps span { display: block; margin-top: 6px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.start .cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 34px; }
.start .help { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps li, .steps li + li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-left: 0; } .steps li::before { grid-row: span 2; margin: 0; } .steps li + li { border-top: 1px solid var(--line); } }

.pricing { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cfg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: 22px; align-items: start; }
@media (max-width: 960px) { .cfg { grid-template-columns: 1fr; } }
.picker { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.picker .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.picker .lbl b { font-size: 18px; }
.picker .lbl span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.p-free { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; color: var(--muted); font-size: 15px; }
.p-free::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.p-free b { color: var(--txt); font-weight: 600; }
.rows { display: grid; gap: 8px; margin-top: 6px; }
.row-p { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card2); cursor: pointer; transition: border-color .15s, background .15s; }
.row-p:hover { border-color: #3a3a4a; }
.row-p.on { border-color: rgba(139, 92, 246, .75); background: linear-gradient(90deg, rgba(139, 92, 246, .16), var(--card2) 70%); }
.row-p .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dim); display: grid; place-items: center; transition: border-color .15s; }
.row-p.on .dot { border-color: var(--accent2); }
.row-p.on .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
.row-p .nm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; font-size: 16px; }
.row-p .tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #A78BFA, #7C3AED); color: #fff; }
.row-p .tag.new { background: rgba(52, 211, 153, .14); color: var(--ok); }
.row-p .tag.best { background: linear-gradient(135deg, #F5C518, #F59E0B); color: #1A1405; }
.row-p .pm { display: flex; align-items: center; gap: 9px; margin-top: 5px; font-size: 13px; color: var(--muted); }
.row-p .pm i { flex: 0 0 auto; width: 84px; height: 4px; border-radius: 2px; background: var(--card3); overflow: hidden; }
.row-p .pm i::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, var(--accent), #22D3EE); }
.row-p .pm em { font-style: normal; color: var(--ok); font-weight: 600; }
.row-p .pr { text-align: right; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-p .pr small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
@media (max-width: 560px) { .row-p .pm i { display: none; } .row-p .pr { font-size: 18px; } .picker .lbl { flex-wrap: wrap; } .picker .lbl span { white-space: normal; } .summary .cta .btn { white-space: normal; padding-left: 16px; padding-right: 16px; line-height: 1.25; } .summary .say { flex-wrap: wrap; } .summary .say button { margin-left: 0; } }
.summary { position: sticky; top: 90px; background: linear-gradient(180deg, rgba(139, 92, 246, .18), var(--card) 42%); border: 1px solid rgba(139, 92, 246, .6); border-radius: var(--r); padding: 28px 26px 24px; box-shadow: 0 30px 80px rgba(139, 92, 246, .15); display: flex; flex-direction: column; }
@media (max-width: 960px) { .summary { position: static; } }
.summary .per { color: var(--accent2); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.summary .price { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.summary .price small { font-size: 28px; font-weight: 600; margin-left: 4px; }
.summary .price.bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: translateY(8px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.summary .permo { color: var(--muted); font-size: 15px; margin-top: 8px; min-height: 22px; }
.summary .save { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); color: var(--ok); font-size: 14px; font-weight: 600; align-self: flex-start; line-height: 1.3; }
.summary .save::before { content: "↓"; font-weight: 700; }
.summary .save.info { background: var(--soft); border-color: rgba(139, 92, 246, .35); color: var(--accent3); }
.summary .save.info::before { content: "∞"; }
.summary .until { color: var(--muted); font-size: 14px; margin-top: 14px; line-height: 1.4; }
.summary .until b { color: var(--txt); font-weight: 600; }
.summary ul { list-style: none; padding: 0; margin: 18px 0 4px; display: grid; gap: 7px; color: var(--muted); font-size: 14.5px; }
.summary li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 8px; }
.summary .cta { display: grid; gap: 10px; margin-top: 18px; }
.summary .cta .btn { width: 100%; }
.summary .say { margin-top: 12px; display: flex; align-items: center; gap: 10px; background: #0B0B10; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.summary .say b { color: var(--txt); font-weight: 500; }
.summary .say button { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--line); background: var(--card2); color: var(--txt); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; transition: color .15s, border-color .15s; }
.summary .say button.ok { color: var(--ok); border-color: rgba(52, 211, 153, .4); }
.salebar { display: block; background: linear-gradient(90deg, #160F2A, #24123A 50%, #160F2A); border-bottom: 1px solid rgba(167, 139, 250, .32); color: var(--txt); font-size: 14.5px; }
.salebar[hidden] { display: none; }
.salebar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; white-space: nowrap; overflow: hidden; }
.sb-l { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #F472B6, #8B5CF6); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 18px rgba(244, 114, 182, .35); }
.sb-l em { font-style: normal; }
.salebar s { color: var(--muted); text-decoration: line-through 1.5px #F87171; }
.salebar b { color: #fff; font-weight: 700; }
.sb-go { color: var(--accent3); font-weight: 600; }
.salebar:hover .sb-go { text-decoration: underline; }
@media (max-width: 860px) { .salebar .sb-x, .salebar .sb-p { display: none; } }
@media (max-width: 560px) { .salebar { font-size: 13.5px; } .salebar .wrap { gap: 8px; padding: 7px 0; } .sb-l { font-size: 10.5px; padding: 2px 8px; } }
@media (max-width: 380px) { .sb-l em { display: none; } }
.row-p .pr s.was { display: block; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: line-through 2px #F87171; }
.summary .price .was { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 12px; text-decoration: line-through 2px #F87171; }
.incl { margin-top: 26px; display: flex; gap: 10px 26px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.incl span::before { content: "✓ "; color: var(--ok); font-weight: 700; }

.faq { max-width: 860px; }
details { border-bottom: 1px solid var(--line); padding: 4px 0; }
summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-size: 18px; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--accent2); font-weight: 400; transition: transform .2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--muted); padding: 0 0 20px; font-size: 16px; max-width: 760px; }

.contact { text-align: center; padding: 110px 0; position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 360px at 50% 100%, rgba(139, 92, 246, .22), transparent 65%); pointer-events: none; }
.contact .wrap { position: relative; }
.contact p { margin: 16px auto 30px; max-width: 620px; color: var(--muted); font-size: 19px; }
.contact .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact .ph { margin-top: 22px; color: var(--dim); font-size: 14px; }
footer { border-top: 1px solid var(--line); padding: 28px 0 36px; color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); }
.summary .terms { margin-top: 10px; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.summary .terms a { color: var(--muted); text-decoration: underline; }
.contact .kicker { justify-content: center; }
.contact .ph a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.showcase { position: relative; overflow: hidden; padding: 10px 0 80px; }
.showcase .sec-head { margin-bottom: 28px; }
.showcase::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 420px at 28% 60%, rgba(139, 92, 246, .14), transparent 65%); pointer-events: none; }
.showcase .wrap { position: relative; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 32px; align-items: center; }
@media (max-width: 960px) { .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ov-grid > * { min-width: 0; } }
.screen { position: relative; background: linear-gradient(180deg, #1A1A22, #0B0B10); border: 1px solid var(--line); border-radius: 26px; padding: 14px; box-shadow: 0 40px 100px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); }
.frame { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.frame img, .frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 3px; background: linear-gradient(90deg, #22D3EE, #8B5CF6 50%, #EC4899); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; }
.frame.listen::after { opacity: 1; animation: framePulse 1.4s ease-in-out infinite; }
@keyframes framePulse { 50% { filter: brightness(1.4); } }
.frame .play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(6, 6, 10, .3); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: inherit; transition: background .25s, opacity .3s; }
.frame .play:hover { background: rgba(6, 6, 10, .18); }
.frame .play i { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #B39DFA, #7C3AED 60%, #6D28D9); box-shadow: 0 16px 50px rgba(124, 58, 237, .55), 0 0 0 10px rgba(139, 92, 246, .18); display: grid; place-items: center; transition: transform .2s; }
.frame .play:hover i { transform: scale(1.06); }
.frame .play i svg { width: 30px; height: 30px; margin-left: 5px; }
.frame .play b { max-width: 88%; font-size: 18px; font-weight: 600; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.frame .play span { font-size: 13.5px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.playing .frame .play { opacity: 0; pointer-events: none; }
.screen .under { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 0 4px; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.screen .under b { color: var(--muted); font-weight: 500; }
.screen .under a { color: var(--muted); white-space: nowrap; }
.screen .under a:hover { color: var(--txt); }
.guide { display: flex; flex-direction: column; gap: 14px; }
.fly { position: relative; display: flex; align-items: center; gap: 16px; }
.fly .stage { width: 150px; height: 150px; margin: 0; flex: 0 0 auto; zoom: .6; animation: fly 7s ease-in-out infinite; }
.fly .shadow { position: absolute; left: 22px; bottom: -4px; width: 48px; height: 12px; border-radius: 50%; background: rgba(139, 92, 246, .4); filter: blur(8px); animation: flyShadow 7s ease-in-out infinite; }
@keyframes fly { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 30% { transform: translate(6px, -16px) rotate(3deg); } 65% { transform: translate(-5px, -6px) rotate(-1deg); } }
@keyframes flyShadow { 0%, 100% { transform: scale(1); opacity: .5; } 30% { transform: scale(.72); opacity: .22; } 65% { transform: scale(.9); opacity: .4; } }
.bubble { position: relative; flex: 1 1 auto; min-width: 0; background: var(--card); border: 1px solid rgba(139, 92, 246, .4); border-radius: 18px; border-bottom-left-radius: 6px; padding: 12px 16px; min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 3px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.bubble small { color: var(--accent2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.bubble .say { font-size: 15.5px; line-height: 1.35; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chapters button { width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--txt); font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.chapters button:hover { background: var(--card); }
.chapters li.on button { background: var(--card); border-color: rgba(139, 92, 246, .5); }
.pl-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #000; }
.pl-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-th i { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .78); font-style: normal; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chapters div { min-width: 0; }
.chapters div span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.chapters div em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapters li.on div em { color: var(--accent2); }
@media (max-width: 960px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fly .stage { zoom: .5; } .fly .shadow { left: 16px; width: 40px; } }

.vm { width: min(980px, 100% - 24px); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--txt); }
.vm::backdrop { background: rgba(5, 5, 8, .84); backdrop-filter: blur(6px); }
.vm-box { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.vm-fr { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vm-fr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.vm-bar div { min-width: 0; flex: 1; }
.vm-bar b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-bar span { display: block; font-size: 13px; color: var(--muted); }
.vm-bar a { white-space: nowrap; font-size: 14px; font-weight: 600; }
.vm-x { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--card2); color: var(--txt); cursor: pointer; font-size: 18px; line-height: 1; }
@media (max-width: 560px) { .vm-bar { flex-wrap: wrap; } .vm-bar a { order: 3; } }
.vm.tall { width: min(430px, 100% - 24px, (100vh - 96px) * 9 / 16); width: min(430px, 100% - 24px, (100dvh - 96px) * 9 / 16); }
.vm.tall .vm-fr { aspect-ratio: 9 / 16; }
.vm.tall .vm-bar a { display: none; }
.vm-fr video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.promo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin-top: 32px; padding: 14px 22px 14px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--txt); transition: border-color .2s, transform .2s; }
.promo:hover, .promo:focus-visible { border-color: rgba(139, 92, 246, .7); transform: translateY(-2px); }
.promo-th { position: relative; display: block; width: 76px; aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.promo-th img { position: absolute; left: -55%; top: -74.2%; width: 210%; max-width: none; height: auto; }
.promo-th i { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 10, 16, .78); border: 1px solid rgba(255, 255, 255, .4); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.promo-th i svg { width: 10px; height: 10px; margin-left: 1px; fill: #fff; }
.promo:hover .promo-th i { background: var(--accent); border-color: transparent; }
.promo-tx { min-width: 0; display: grid; gap: 4px; }
.promo-tx small { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); }
.promo-tx b { font-size: 20px; line-height: 1.2; }
.promo-tx span { font-size: 15px; color: var(--muted); }
.promo-go { white-space: nowrap; padding: 11px 18px; border-radius: 13px; border: 1px solid var(--line); background: var(--card2); font-weight: 600; font-size: 15px; }
.promo:hover .promo-go { background: var(--accent); border-color: transparent; }
@media (max-width: 640px) { .promo { grid-template-columns: auto 1fr; gap: 14px; padding: 12px 14px 12px 12px; margin-top: 24px; } .promo-go { display: none; } .promo-th { width: 64px; } .promo-tx b { font-size: 17px; } .promo-tx span { font-size: 14px; } }

.maxic { width: 20px; height: 20px; flex: 0 0 auto; }
.tgic { width: 18px; height: 18px; flex: 0 0 auto; }
.btn.max { border-color: rgba(21, 145, 255, .35); }
.btn.tg { border-color: rgba(42, 171, 238, .35); }
.btn.tg .tgic { color: #2AABEE; }
.btn.tg:hover { border-color: rgba(42, 171, 238, .7); box-shadow: 0 8px 26px rgba(42, 171, 238, .2); }
.btn.max:hover { border-color: rgba(0, 234, 255, .6); box-shadow: 0 8px 26px rgba(21, 145, 255, .2); }
.top .maxtop { display: none; }
@media (min-width: 1100px) { .top .maxtop { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) { .bigorb, .eye, .ring, .fly .stage, .fly .shadow, .frame.listen::after { animation: none !important; opacity: 1; transform: none; } }

.launcher { position: relative; padding-top: 40px; }
.launcher::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: radial-gradient(900px 420px at 50% 30%, rgba(139, 92, 246, .16), transparent 70%); pointer-events: none; }
.launcher .wrap { position: relative; }
.launcher .sec-head { margin-left: auto; margin-right: auto; text-align: center; max-width: 820px; }
.launcher .sec-head .kicker::after { content: ""; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; }
.lx-tabs { display: flex; justify-content: center; gap: 8px; margin: -10px auto 22px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; width: max-content; max-width: 100%; }
.lx-tabs button { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: none; border: 0; border-radius: 13px; padding: 10px 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s; }
.lx-tabs button svg { width: 18px; height: 18px; }
.lx-tabs button.on { color: #fff; background: linear-gradient(135deg, #B39DFA, #7C3AED 60%, #6D28D9); box-shadow: 0 8px 24px rgba(124, 58, 237, .35); }
@media (max-width: 480px) { .lx-tabs button { padding: 9px 13px; font-size: 14px; } .lx-tabs button svg { display: none; } }

.hu { position: relative; margin: 0 auto; max-width: 1180px; padding: 12px; border-radius: 30px; background: linear-gradient(180deg, #17171d, #0b0b0f); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 50px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.hu::after { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 28%); pointer-events: none; }
.hu-fit { position: relative; width: 100%; aspect-ratio: 1920 / 720; border-radius: 18px; overflow: hidden; background: #050507; }
.hu-scroll { position: relative; width: calc(1920px * var(--k, .6)); height: calc(720px * var(--k, .6)); }
.hu-screen { position: absolute; left: 0; top: 0; width: 1920px; height: 720px; transform-origin: 0 0; transform: scale(var(--k, .6)); font-size: 16px; line-height: 1.25; color: #F5F5F8; overflow: hidden;
  background: radial-gradient(900px 520px at 72% -10%, rgba(139, 92, 246, .20), transparent 70%), radial-gradient(700px 460px at 18% 110%, rgba(139, 92, 246, .10), transparent 70%), #08080B; }
.hu-screen svg { display: block; }
.hu-screen .ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .hu { padding: 6px; border-radius: 18px; } .hu::after { border-radius: 18px; }
  .hu-fit { aspect-ratio: auto; height: 288px; border-radius: 13px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hu-fit::-webkit-scrollbar { display: none; }
}
.hu-hint { display: none; text-align: center; margin-top: 10px; font-size: 13px; color: var(--dim); }
@media (max-width: 700px) { .hu-hint { display: block; } }

.hu-orb { position: relative; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fff, #E4DBFF 18%, #A78BFA 46%, #6D28D9 78%, #2A1B57); box-shadow: 0 0 34px rgba(139, 92, 246, .45); }
.hu-orb::before, .hu-orb::after { content: ""; position: absolute; top: 36%; width: 11%; height: 22%; background: #fff; border-radius: 40%; box-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.hu-orb::before { left: 34%; } .hu-orb::after { right: 34%; }

.hu-sb { position: absolute; left: 0; top: 0; width: 168px; height: 720px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(255, 255, 255, .07); background: radial-gradient(260px 300px at 40% 12%, rgba(139, 92, 246, .16), transparent 70%), #07070A; }
.hu-sb .hu-orb { width: 96px; height: 96px; margin-top: 42px; }
.hu-sb .tm { margin-top: 22px; font-size: 46px; font-weight: 300; letter-spacing: -.02em; }
.hu-sb .dt { margin-top: 4px; font-size: 15px; color: #9090A0; }
.hu-sb .wx { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 19px; }
.hu-sb .wx svg { width: 22px; height: 22px; }
.hu-sb .tl { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; background: #121217; border: 1px solid rgba(255, 255, 255, .08); color: #E6E6EE; }
.hu-sb .tl svg { width: 28px; height: 28px; }
.hu-sb .tl.a { margin-top: auto; }
.hu-sb .tl + .tl { margin-top: 36px; }
.hu-sb .tl.home { background: linear-gradient(135deg, #B39DFA, #8B5CF6 55%, #6D28D9); border: 0; color: #fff; box-shadow: 0 10px 30px rgba(139, 92, 246, .35); margin-bottom: 33px; }

.hu-rail { position: absolute; left: 168px; top: 0; width: 100px; height: 720px; display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 28px; }
.hu-rail .hu-orb { width: 44px; height: 44px; margin-bottom: 10px; box-shadow: 0 0 20px rgba(139, 92, 246, .45); }
.hu-rail i { width: 56px; height: 52px; border-radius: 13px; display: grid; place-items: center; color: #9A9AAB; }
.hu-rail i svg { width: 25px; height: 25px; }
.hu-rail i.on { background: rgba(139, 92, 246, .17); border: 1px solid rgba(139, 92, 246, .45); color: #C4B5FD; }
.hu-rail .dot { margin-top: auto; margin-bottom: 30px; width: 12px; height: 12px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 6px rgba(52, 211, 153, .16); }

.hu-rb { position: absolute; right: 0; top: 0; width: 96px; height: 720px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 34px; color: #F5F5F8; }
.hu-rb svg { width: 34px; height: 34px; }

.hu-app { position: absolute; left: 268px; top: 0; width: 1556px; height: 720px; }
.hu-top { position: absolute; left: 24px; right: 12px; top: 16px; height: 56px; display: flex; align-items: center; gap: 12px; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .9, .3, 1.15); }
.hu-top.off { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.hu-top .hu-orb { width: 48px; height: 48px; box-shadow: 0 0 22px rgba(139, 92, 246, .4); }
.hu-top .who { flex: 1; min-width: 0; margin-left: 4px; }
.hu-top .who b { display: block; font-size: 24px; font-weight: 600; }
.hu-top .who span { display: block; margin-top: 3px; font-size: 16px; color: #9090A0; }
.hu-top .wave { display: none; align-items: center; gap: 4px; height: 26px; margin-left: 10px; }
.hu-top .wave i { width: 4px; border-radius: 2px; background: #A78BFA; animation: huw 1s ease-in-out infinite; }
.hu-top .wave i:nth-child(2) { animation-delay: .15s; } .hu-top .wave i:nth-child(3) { animation-delay: .3s; } .hu-top .wave i:nth-child(4) { animation-delay: .45s; }
@keyframes huw { 0%, 100% { height: 6px; } 50% { height: 24px; } }
.hu-screen.voice .hu-top .wave { display: flex; }
.hu-btn { height: 52px; padding: 0 22px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 600; color: #F5F5F8; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; transition: transform .15s; }
.hu-btn.p { color: #fff; border: 0; background: linear-gradient(135deg, #B39DFA, #8B5CF6 55%, #6D28D9); box-shadow: 0 8px 24px rgba(139, 92, 246, .3); }
.hu-btn.sq { width: 52px; padding: 0; position: relative; }
.hu-btn.sq svg { width: 25px; height: 25px; }
.hu-btn.sq b { position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
.hu-btn.tap { transform: scale(.93); }
.hu-top.ed .tile { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .4); color: #C4B5FD; }
.hu-top.ed .tile svg { width: 24px; height: 24px; }

.hu-grid { position: absolute; left: 24px; top: 90px; width: 1520px; height: 616px; --cw: 243.33px; --rh: 145px; --g: 12px; }
.blk { position: absolute; left: calc(var(--c) * (var(--cw) + var(--g))); top: calc(var(--r) * (var(--rh) + var(--g)));
  width: calc(var(--w) * var(--cw) + (var(--w) - 1) * var(--g)); height: calc(var(--h) * var(--rh) + (var(--h) - 1) * var(--g));
  border-radius: 18px; background: rgba(255, 255, 255, .042); border: 1px solid rgba(255, 255, 255, .085); padding: 18px 20px; overflow: hidden;
  transition: left .55s cubic-bezier(.2, .9, .25, 1.06), top .55s cubic-bezier(.2, .9, .25, 1.06), width .55s cubic-bezier(.2, .9, .25, 1.06), height .55s cubic-bezier(.2, .9, .25, 1.06), transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s, border-color .3s, opacity .35s; }
.blk.gone { opacity: 0; transform: scale(.86); }
.blk .cap { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9090A0; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.blk .cap svg { width: 17px; height: 17px; color: #A78BFA; }
.blk .big { font-size: 34px; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; }
.blk .big small { font-size: 16px; color: #9090A0; margin-left: 3px; }
.blk .sub { font-size: 15px; color: #9090A0; white-space: nowrap; }
.blk .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 9px; }
.blk .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8B5CF6, #C4B5FD); }

.blk:not(.b-map) { overflow: visible; }
.blk .minus, .blk .arc { position: absolute; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; z-index: 3; }
.blk .minus { left: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; background: #2B2B35; border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.blk .minus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 12.5px; height: 2px; border-radius: 1px; background: #fff; }
.blk .arc { right: -6px; bottom: -6px; width: 34px; height: 34px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-bottom-right-radius: 26px; }
.b-map .minus { left: 6px; top: 6px; } .b-map .arc { right: 6px; bottom: 6px; }
.hu-screen.edit .blk { border-color: rgba(167, 139, 250, .5); animation: hujig .6s ease-out 1; }
.hu-screen.edit .blk .minus, .hu-screen.edit .blk .arc { opacity: 1; transform: none; }
@keyframes hujig { 0% { transform: rotate(0); } 25% { transform: rotate(-.6deg); } 55% { transform: rotate(.45deg); } 80% { transform: rotate(-.2deg); } 100% { transform: rotate(0); } }
.blk.lift { z-index: 5; transform: scale(1.035); background: #17171E; border-color: #A78BFA; box-shadow: 0 30px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(167, 139, 250, .4); }
.blk.grab .arc { border-color: #C4B5FD; transform: scale(1.15); }
.hu-slot { position: absolute; border-radius: 18px; background: rgba(139, 92, 246, .1); border: 2px dashed rgba(167, 139, 250, .55); opacity: 0; transition: opacity .3s, left .45s, top .45s;
  left: calc(var(--c) * (var(--cw) + var(--g))); top: calc(var(--r) * (var(--rh) + var(--g))); width: calc(var(--w) * var(--cw) + (var(--w) - 1) * var(--g)); height: calc(var(--h) * var(--rh) + (var(--h) - 1) * var(--g)); }
.hu-slot.on { opacity: 1; }
.hu-finger { position: absolute; z-index: 9; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .6); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06);
  opacity: 0; transition: opacity .25s, left .9s cubic-bezier(.4, 0, .2, 1), top .9s cubic-bezier(.4, 0, .2, 1), transform .2s; pointer-events: none; }
.hu-finger.on { opacity: 1; } .hu-finger.down { transform: scale(.82); }

.b-music { display: flex; align-items: center; gap: 20px; }
.b-music .cover { flex: 0 0 auto; width: 108px; height: 108px; border-radius: 13px; background: radial-gradient(circle at 30% 30%, #FBCFE8, transparent 45%), linear-gradient(135deg, #EC4899, #8B5CF6 55%, #312E81); box-shadow: 0 10px 30px rgba(236, 72, 153, .25); }
.b-music .tx { flex: 1; min-width: 0; }
.b-music .tx b { display: block; margin-top: 7px; font-size: 26px; font-weight: 600; }
.b-music .tx .sub { margin-top: 3px; font-size: 16px; }
.b-music .tx .bar { width: 82%; }
.b-music .ctl { display: flex; align-items: center; gap: 18px; color: #E6E6EE; }
.b-music .ctl svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.b-music .ctl .pl { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #B39DFA, #8B5CF6 55%, #6D28D9); box-shadow: 0 8px 22px rgba(139, 92, 246, .35); }
.b-music .ctl .pl svg { width: 26px; height: 26px; }

.cells { display: flex; gap: 22px; height: 100%; align-items: center; }
.cells > div { flex: 1; min-width: 0; }
.cells .big { margin-top: 7px; }
.b-trip .tabs { display: flex; align-items: center; gap: 14px; }
.b-trip .tabs span { display: inline-flex; padding: 4px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.b-trip .tabs em { font-style: normal; font-size: 15px; font-weight: 600; padding: 6px 13px; border-radius: 8px; color: #A4A4B2; }
.b-trip .tabs em.on { color: #fff; background: linear-gradient(135deg, #B39DFA, #8B5CF6 55%, #6D28D9); }
.b-trip .cells { height: auto; margin-top: 14px; align-items: flex-start; }
.b-trip .big { font-size: 30px; }

.b-weather { display: flex; align-items: center; gap: 18px; }
.b-weather .now { display: flex; align-items: center; gap: 14px; }
.b-weather .now svg { width: 44px; height: 44px; color: #E6E6EE; }
.b-weather .now .t { font-size: 46px; font-weight: 200; }
.b-weather .days { flex: 1; display: flex; justify-content: space-between; margin-left: 10px; }
.b-weather .days div { text-align: center; font-size: 13px; color: #9090A0; }
.b-weather .days svg { width: 24px; height: 24px; margin: 5px auto 4px; color: #9FD2FF; }
.b-weather .days b { display: block; font-size: 17px; color: #F5F5F8; }

.b-apps { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px; }
.b-apps div { text-align: center; font-size: 14px; color: #E6E6EE; }
.b-apps .ai { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 8px; color: #fff; }
.b-apps .ai svg { width: 30px; height: 30px; }

.b-clock { display: flex; align-items: center; }
.b-clock .tm { font-size: 58px; font-weight: 300; letter-spacing: -.02em; }
.b-clock .sub { font-size: 16px; margin-top: 2px; }
.b-clock .r { margin-left: auto; text-align: right; }
.b-clock .r b { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 32px; font-weight: 300; }
.b-clock .r svg { width: 32px; height: 32px; }

.b-map { padding: 0; background: #0E0F15; }
.b-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-map .pl { position: absolute; background: rgba(9, 9, 13, .9); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; }
.b-map .man { left: 16px; top: 16px; padding: 12px 18px 12px 14px; display: flex; align-items: center; gap: 12px; }
.b-map .man svg { width: 40px; height: 40px; color: #fff; }
.b-map .man b { display: block; font-size: 28px; font-weight: 600; } .b-map .man span { font-size: 15px; color: #B4B4C0; }
.b-map .rad { right: 16px; top: 16px; padding: 10px 16px 10px 10px; display: flex; align-items: center; gap: 12px; }
.b-map .rad .lim { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 7px solid #E53935; display: grid; place-items: center; color: #111; font-weight: 800; font-size: 20px; }
.b-map .rad b { display: block; font-size: 24px; font-weight: 700; } .b-map .rad span { font-size: 14px; color: #D4D4DC; }
.b-map .spd { left: 16px; bottom: 16px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.b-map .spd b { display: block; font-size: 28px; font-weight: 700; line-height: 1; } .b-map .spd span { font-size: 12px; color: #B4B4C0; }
.b-map .eta { left: 50%; bottom: 16px; transform: translateX(-50%); padding: 11px 20px; font-size: 17px; white-space: nowrap; }
.b-map .eta b { font-weight: 700; }
.b-map .lay { right: 16px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; }
.b-map .lay svg { width: 24px; height: 24px; }
.b-map .me { position: absolute; left: 41%; top: 58%; width: 40px; height: 40px; margin: -20px; }

.hu-dim { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hu-sheet { position: absolute; z-index: 11; left: 50%; top: 50%; width: 1060px; padding: 26px 28px 28px; border-radius: 22px; background: rgba(14, 14, 19, .98); border: 1px solid rgba(255, 255, 255, .14);
  background-image: linear-gradient(180deg, rgba(139, 92, 246, .16), transparent 45%); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.2, .9, .3, 1.15); pointer-events: none; }
.hu-screen.cat .hu-dim { opacity: 1; } .hu-screen.cat .hu-sheet { opacity: 1; transform: translate(-50%, -50%); }
.hu-sheet h4 { margin: 0; font-size: 28px; font-weight: 600; }
.hu-sheet > p { margin: 6px 0 20px; font-size: 16px; color: #9090A0; }
.hu-sheet .x { position: absolute; right: 26px; top: 26px; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); display: grid; place-items: center; color: #fff; }
.hu-sheet .x svg { width: 20px; height: 20px; }
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat-grid > div { padding: 10px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); transition: transform .2s, border-color .2s; }
.cat-grid > div.has { opacity: .5; }
.cat-grid > div.tap { transform: scale(.95); border-color: #A78BFA; }
.cat-grid .pv { height: 82px; border-radius: 10px; background: rgba(255, 255, 255, .04); display: grid; place-items: center; color: #A78BFA; }
.cat-grid .pv svg { width: 36px; height: 36px; }
.cat-grid b { display: block; margin: 10px 4px 0; font-size: 17px; font-weight: 600; }
.cat-grid span { display: block; margin: 4px 4px 0; font-size: 13px; color: #5F5F6E; }
.cat-grid .has span { color: #34D399; }

.hu-voice { position: absolute; right: 120px; bottom: 34px; z-index: 8; width: 620px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.hu-voice p { margin: 0; max-width: 88%; padding: 16px 20px; border-radius: 18px; font-size: 21px; line-height: 1.35; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.hu-voice p.show { opacity: 1; transform: none; }
.hu-voice .me { align-self: flex-end; background: #1C1C23; border: 1px solid rgba(255, 255, 255, .1); }
.hu-voice .jv { align-self: flex-start; background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.hu-voice .jv small { display: block; font-size: 12px; opacity: .8; margin-bottom: 3px; letter-spacing: .06em; text-transform: uppercase; }
.hu-screen.voice .hu-grid { filter: brightness(.5) saturate(.9); }
.hu-grid { transition: filter .45s; }

.duo { display: flex; gap: 14px; flex-wrap: wrap; }
.btn small.ver { font-size: .82em; font-weight: 500; color: var(--muted); }
.hero .btn small.ver { display: none; }
.watch { display: inline-flex; align-items: center; gap: 10px; color: var(--txt); font-weight: 600; font-size: 16px; padding: 8px 4px; }
.watch span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s; }
.watch span svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
.watch:hover span { background: var(--accent); }
.watches { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.burger { display: none; }
.mnav { display: none; }
.mbar { display: none; }

@media (max-width: 999px) {
  .burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-left: 4px; border-radius: 13px; border: 1px solid var(--line); background: var(--card2); cursor: pointer; }
  .burger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--txt); transition: transform .25s; }
  .top .btn.primary { margin-left: auto; }
  body.menu-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mnav { position: fixed; inset: 68px 0 0; z-index: 9; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); background: rgba(9, 9, 13, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; overflow-y: auto; }
  .mnav[hidden] { display: none; }
  .mnav.on { opacity: 1; transform: none; }
  .mnav nav { display: flex; flex-direction: column; }
  .mnav nav a { color: var(--txt); font-size: 26px; font-weight: 600; letter-spacing: -.01em; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .mnav-cta { display: grid; gap: 10px; }
  .mnav-cta .btn { width: 100%; }
  .mnav-cta .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.menu-open { overflow: hidden; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  section { padding: 48px 0; }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2, h2 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; }
  .sec-head p { font-size: 16.5px; line-height: 1.5; }
  .kicker { font-size: 12px; letter-spacing: .1em; }
  .btn { padding: 14px 18px; border-radius: 15px; }
  .btn.lg { padding: 16px 18px; font-size: 16.5px; border-radius: 16px; }
  .btn small.ver { display: none; }
  .top .wrap { height: 64px; gap: 10px; width: calc(100% - 32px); }
  .top .btn { padding: 10px 14px; font-size: 14.5px; }
  .mnav { inset: 64px 0 0; }
  .logo { font-size: 19px; }
  .sec-head { margin-bottom: 22px; }

  .hero { padding: 24px 0 44px; }
  .hero .wrap { gap: 28px; }
  .hero h1 { font-size: 38px; margin-bottom: 14px; }
  .hero .lead { font-size: 16.5px; line-height: 1.5; }
  .hero .cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  .hero .cta .btn { width: 100%; }
  .hero .free { order: 1; text-align: center; font-size: 14px; }
  .hero .duo { order: 2; display: grid; grid-template-columns: 1fr 1fr; }
  .hero .duo .btn { width: 100%; }
  .hero .watch { order: 3; justify-self: center; }
  .trust { justify-content: center; gap: 6px 14px; margin-top: 18px; padding-top: 16px; font-size: 13px; }
  .trust li::before { width: 14px; height: 14px; }
  .hero-orb { width: 300px; margin-top: 20px; }
  .orb-tap { font-size: 13.5px; padding: 7px 14px 7px 8px; }

  .cg { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .cg::-webkit-scrollbar { display: none; }
  .ct { flex: 0 0 46%; scroll-snap-align: start; padding: 4px 10px 12px; border-radius: 14px; }
  .ct b { font-size: 15px; }
  .ct .st { font-size: 12.5px; }
  .ct .go { display: none; }
  .mk { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 14px; padding: 0 20px 2px; scrollbar-width: none; }
  .mk::-webkit-scrollbar { display: none; }
  .mk button { flex: none; padding: 8px 13px; font-size: 14.5px; }
  .cars-legend { flex-direction: column; gap: 8px; font-size: 14px; }


  .launcher { padding-top: 24px; }
  .launcher .sec-head { text-align: left; }
  .launcher .sec-head .kicker::after { display: none; }
  .lx-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0 0 16px; }
  .lx-tabs button { justify-content: center; padding: 10px 6px; }

  .showcase { padding-bottom: 56px; }
  .ov-grid { gap: 16px; }
  .fly { display: none; }
  .chapters { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scroll-snap-type: x proximity; scroll-padding: 0 20px; scrollbar-width: none; }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters li { flex: 0 0 62%; scroll-snap-align: start; }
  .chapters button { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 6px 6px 9px; background: var(--card); border-color: var(--line); }
  .chapters div { padding: 0 4px; }
  .chapters div span { font-size: 14px; }
  .screen { padding: 8px; border-radius: 20px; }
  .frame, .frame::after { border-radius: 13px; }
  .screen .under { font-size: 12px; margin-top: 8px; }
  .screen .under span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frame .play i { width: 64px; height: 64px; }
  .frame .play b { font-size: 16px; }

  .card { padding: 18px; border-radius: 20px; }
  .card.b12 { gap: 18px; }
  .card.b12 .txt, .card.b12 .mock { flex-basis: 100%; }
  .rstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rstats div { padding: 9px 10px; }
  .rstats b { font-size: 15px; }
  .rstats span { font-size: 11.5px; }
  .care { padding: 20px 18px; border-radius: 20px; }
  .care h3 { font-size: 23px; }
  .care h2 { font-size: 25px; }

  .care-no { gap: 6px; }
  .care-no span { font-size: 12.5px; padding: 4px 10px 4px 8px; }
  .picker { padding: 18px; }
  .row-p { gap: 12px; padding: 12px 14px; }
  .row-p .nm { font-size: 15.5px; gap: 8px; }
  .row-p .pm { font-size: 12.5px; flex-wrap: wrap; gap: 4px 8px; }
  .row-p .pm em { white-space: nowrap; }
  .summary { padding: 22px 18px 18px; }
  .summary .price { font-size: 48px; }
  .incl { display: grid; gap: 8px; font-size: 14.5px; }
  .p-free { font-size: 14px; }

  .contact { padding: 72px 0 96px; }
  .contact .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact .cta .btn { width: 100%; }
  .contact p { font-size: 16.5px; }
  footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  footer .wrap { flex-direction: column; gap: 10px; font-size: 13px; }

  .mbar { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 8; padding: 8px; border-radius: 20px; background: rgba(20, 20, 27, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); visibility: hidden; transform: translateY(130%); transition: transform .35s cubic-bezier(.3, .7, .3, 1), visibility .35s; }
  .mbar.on { visibility: visible; transform: none; }
  .mbar .btn.primary { flex: 1; padding: 14px 12px; box-shadow: none; }
  .mbar .btn.max { flex: 0 0 52px; padding: 0; }
  .mbar .btn.tg { flex: 0 0 52px; padding: 0; }
  .contact { padding: 60px 0 80px; }
  .contact .cta { grid-template-columns: minmax(0, 1fr); }
  .start .cta { display: grid; gap: 12px; margin-top: 24px; }
  .start .cta .btn { width: 100%; }
  .start .help { text-align: center; font-size: 14px; }
  .cx-head { display: none; }
  .cx-stage { padding-top: 30px; }
  .cx-car { width: 180px; height: 332px; }
  .facts { display: flex; gap: 8px; overflow-x: auto; margin: 18px -20px 0; padding: 0 20px 4px; border-top: 0; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .facts::-webkit-scrollbar { display: none; }
  .facts li, .facts li + li { flex: 0 0 74%; scroll-snap-align: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
  .facts b { font-size: 15.5px; }
  .facts span { font-size: 13.5px; }
  .dh-hint, .incl { display: none; }
  summary { padding: 15px 36px 15px 0; font-size: 16.5px; }
  details p { padding-bottom: 16px; font-size: 15px; }
}
.wardrobe { position: relative; overflow: hidden; --wd: 249, 115, 22; --wd2: 253, 186, 116; --wdr: 255, 77, 141; }
.wardrobe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(640px 460px at 74% 46%, rgba(var(--wd), .13), transparent 72%); transition: opacity .8s; }
.wardrobe .wrap { position: relative; }
.wardrobe .kicker { color: rgb(var(--wd2)); transition: color .8s; }
.wardrobe .kicker::before { background: rgb(var(--wd)); transition: background .8s; }
.wd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head stage" "body stage"; column-gap: 56px; align-items: center; }
.wd-grid .sec-head { grid-area: head; margin-bottom: 26px; align-self: end; }
.wd-body { grid-area: body; align-self: start; }
.wd-stage { grid-area: stage; }
.wd-pts { list-style: none; margin: 0; padding: 0; display: grid; }
.wd-pts li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); }
.wd-pts li:last-child { border-bottom: 1px solid var(--line); }
.wd-pts .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--wd), .14); color: rgb(var(--wd2)); transition: background .8s, color .8s; }
.wd-pts .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wd-pts b { display: block; font-size: 17px; font-weight: 600; }
.wd-pts span { display: block; margin-top: 4px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.wd-stage { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
.wd-orb { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1; }
.wd-orb canvas, .wd-orb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wd-orb img { object-fit: contain; }
.wd-badge { text-align: center; margin-top: -6px; min-height: 64px; }
.wd-badge .r { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--wdr)); transition: color .6s; }
.wd-badge b { display: block; margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.wd-skins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 440px; margin: 14px auto 0; }
.wd-skin { display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; padding: 5px 14px 5px 5px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.wd-skin canvas, .wd-skin img { width: 34px; height: 34px; }
.wd-skin:hover { color: var(--txt); }
.wd-skin.on { color: var(--txt); border-color: rgba(var(--wd), .7); background: rgba(var(--wd), .12); }
.wd-skin:focus-visible { outline: 2px solid rgb(var(--wd2)); outline-offset: 2px; }
@media (max-width: 900px) { .wd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; } .wd-grid .sec-head { margin-bottom: 6px; } .wd-stage { max-width: 420px; margin-bottom: 18px; } .wd-orb { max-width: 250px; } }
@media (max-width: 520px) { .wd-skin { gap: 7px; font-size: 13px; padding: 4px 8px 4px 4px; } .wd-skin canvas, .wd-skin img { width: 28px; height: 28px; } .wd-pts li { padding: 13px 0; } .wd-pts span { font-size: 14.5px; } }
.dash { position: relative; overflow: hidden; --dh: 139, 92, 246; --dh2: 196, 181, 253; }
.dash::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 480px at 50% 36%, rgba(var(--dh), .15), transparent 72%); transition: background .9s; }
.dash .wrap { position: relative; }
.dash .kicker { color: rgb(var(--dh2)); transition: color .9s; }
.dash .kicker::before { background: rgb(var(--dh)); transition: background .9s; }
.dash .sec-head { margin-bottom: 36px; }
.dh-new { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, rgb(var(--dh2)), rgb(var(--dh))); vertical-align: 2px; transition: background .9s; }
.dh-cmp { position: relative; aspect-ratio: 1440 / 540; border-radius: 30px; overflow: hidden; background: #000; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; --x: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 0 0 10px #050507, 0 0 0 11px rgba(255, 255, 255, .06), 0 40px 110px rgba(0, 0, 0, .6), 0 0 140px rgba(var(--dh), .2); transition: box-shadow .9s; }
.dh-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.dh-b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.dh-b img + img { opacity: 0; transition: opacity .7s; }
.dh-b img.show { opacity: 1; }
.dh-h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 16px rgba(var(--dh), .9); outline: none; }
.dh-h i { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(8, 8, 12, .82); border: 2px solid #fff; box-shadow: 0 0 26px rgba(var(--dh), .85); display: grid; place-items: center; }
.dh-h i svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dh-h:focus-visible i { outline: 2px solid rgb(var(--dh2)); outline-offset: 3px; }
.dh-tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(8, 8, 11, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); pointer-events: none; transition: opacity .3s, color .9s, border-color .9s; }
.dh-tag.l { left: 16px; color: #C9C9D6; }
.dh-tag.r { right: 16px; color: rgb(var(--dh2)); border-color: rgba(var(--dh), .6); }
.dh-bar { display: flex; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 26px; flex-wrap: wrap; }
.dh-col { display: flex; gap: 10px; }
.dh-col button { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .15s, box-shadow .25s; }
.dh-col button:hover { transform: scale(1.08); }
.dh-col button.on { transform: scale(1.06); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c), 0 0 20px var(--c); }
.dh-col button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.dh-hint { color: var(--muted); font-size: 15px; }
.dh-note { margin-top: 18px; text-align: center; color: var(--muted); font-size: 15px; }
.dh-note em { font-style: normal; color: rgb(var(--dh2)); transition: color .9s; }
.to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; margin-top: 72px; padding: 40px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(520px 320px at 85% 50%, rgba(139, 92, 246, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); }
.to .kicker { color: var(--accent2); }
.to .kicker::before { background: var(--accent); }
.to h3 { margin-top: 12px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; }
.to-l > p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.to-l > p em { font-style: normal; color: var(--accent3); }
.to-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.to-chips li { padding: 6px 12px; border-radius: 10px; font-size: 14px; color: #D6D6E2; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.to-w { position: relative; }
.to-w svg { display: block; width: 100%; height: auto; }
.to-w text { font-family: var(--font); }
.to-done { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); padding: 12px 26px; border-radius: 14px; font-weight: 600; font-size: 15.5px; color: #fff; white-space: nowrap; background: linear-gradient(135deg, #A78BFA, #8B5CF6 45%, #6D28D9); box-shadow: 0 14px 36px rgba(139, 92, 246, .45); transition: transform .12s, opacity .4s; cursor: pointer; border: 0; font-family: inherit; }
.to-done.tap { transform: translateX(-50%) scale(.94); }
.to-done.hide { opacity: 0; pointer-events: none; }
.to-mob { display: none; }
@media (max-width: 900px) { .to { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 28px 22px 44px; } }
@media (max-width: 640px) {
  .dh-cmp { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 0 0 6px #050507, 0 20px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(var(--dh), .2); }
  .dh-tag { top: 10px; font-size: 10.5px; padding: 4px 8px; }
  .dh-tag.l { left: 10px; } .dh-tag.r { right: 10px; }
  .dh-h i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .dh-col button { width: 30px; height: 30px; }
  .dh-note { font-size: 14px; }
  .to { margin-top: 36px; }
  .to-w svg { max-width: 300px; margin: 0 auto; }
  .to-mob { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 14px; }
  .to-mob b { color: var(--txt); font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; }
  .to-mob i { font-style: normal; align-self: center; padding: 3px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; }
  .to-mob i:empty { display: none; }
}
.hero-gp { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(251, 191, 36, .32); background: rgba(251, 191, 36, .06); color: var(--txt); font-size: 14.5px; transition: border-color .2s, background .2s; }
.hero-gp:hover { border-color: rgba(251, 191, 36, .6); background: rgba(251, 191, 36, .1); }
.hero-gp i { font-style: normal; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #1A1204; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hero-gp b { font-weight: 600; }
.hero-gp span { color: var(--muted); }
.gp { position: relative; overflow: hidden; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gp::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 420px at 82% 30%, rgba(251, 191, 36, .1), transparent 70%), radial-gradient(520px 380px at 10% 90%, rgba(139, 92, 246, .12), transparent 70%); }
.gp .wrap { position: relative; }
.gp .kicker { color: #FCD34D; }
.gp .kicker::before { background: #F59E0B; }
.gp h2 em { font-style: normal; background: linear-gradient(90deg, #FDE68A, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.gp .sec-head { margin-bottom: 28px; }
.gp-prizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gp-prizes li { padding: 18px 16px 18px 0; }
.gp-prizes li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.gp-prizes small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.gp-prizes b { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.gp-prizes li:first-child b { font-size: 24px; background: linear-gradient(90deg, #FDE68A, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: gp; }
.gp-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; counter-increment: gp; }
.gp-steps li::before { content: counter(gp); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(251, 191, 36, .4); color: #FCD34D; font-weight: 700; font-size: 14px; }
.gp-steps b { display: block; font-weight: 600; }
.gp-steps span { display: block; margin-top: 2px; color: var(--muted); font-size: 15.5px; }
.gp .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.gp-board { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.gp-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gp-bh b { font-size: 17px; }
.gp-bh span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.gp-bh span em { font-style: normal; color: #FCD34D; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.gp-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.gp-rows .pl { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); }
.gp-rows li:nth-child(1) .pl { background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #1A1204; border: 0; }
.gp-rows li:nth-child(2) .pl { background: linear-gradient(135deg, #F1F5F9, #94A3B8); color: #0F172A; border: 0; }
.gp-rows li:nth-child(3) .pl { background: linear-gradient(135deg, #FDBA74, #B45309); color: #1C0D02; border: 0; }
.gp-rows .nm { min-width: 0; }
.gp-rows .nm b { display: block; font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rows .nm small { display: block; color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rows .fr { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; white-space: nowrap; }
.gp-rows li.you { border-top-style: dashed; }
.gp-rows li.you .pl { border-style: dashed; color: #FCD34D; border-color: rgba(251, 191, 36, .5); }
.gp-rows li.you .nm b { color: #FCD34D; }
.gp-gap { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .22); font-size: 15px; }
.gp-gap b { color: #FCD34D; }
.gp-gap[hidden] { display: none; }
.gp-bf { margin-top: 12px; color: var(--dim); font-size: 13px; }
.gp-rules { margin-top: 30px; max-width: 860px; color: var(--muted); font-size: 15px; }
.gp-rules summary { font-size: 16px; color: var(--accent2); }
.gp-rules ul { margin: 0; padding: 0 0 18px 20px; display: grid; gap: 6px; }
.gp-aff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 44px; padding: 18px 22px; border-radius: var(--r); border: 1px solid rgba(139, 92, 246, .35); background: linear-gradient(90deg, rgba(139, 92, 246, .12), rgba(139, 92, 246, .03)); color: var(--txt); transition: border-color .2s, transform .2s; }
.gp-aff:hover { border-color: rgba(139, 92, 246, .7); transform: translateY(-2px); }
.gp-aff .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--accent3); font-size: 21px; font-weight: 700; }
.gp-aff b { display: block; font-size: 18px; }
.gp-aff small { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; }
.gp-aff .go { white-space: nowrap; padding: 11px 18px; border-radius: 13px; border: 1px solid var(--line); background: var(--card2); font-weight: 600; font-size: 15px; }
.gp-aff:hover .go { background: var(--accent); border-color: transparent; }
.summary li a { color: inherit; text-decoration: underline; text-decoration-color: rgba(251, 191, 36, .5); text-underline-offset: 3px; }
@media (max-width: 1199px) { .menu a[href="#grandprix"] { display: none; } }
@media (max-width: 960px) { .gp-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 640px) {
  .hero-gp { gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 5px; font-size: 14px; }
  .hero-gp i { font-size: 11px; padding: 3px 8px; }
  .hero-gp span { display: none; }
  .hero-gp { white-space: nowrap; }
  .hero-gp b::after { content: " · до 31.12 →"; font-weight: 400; color: var(--muted); }
  .gp-prizes { grid-template-columns: 1fr 1fr; }
  .gp-prizes li:first-child { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--line); }
  .gp-prizes li:nth-child(2) { padding-left: 0; border-left: 0; }
  .gp .cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gp .cta .btn { width: 100%; }
  .gp-board { padding: 18px 16px 14px; }
  .gp-aff { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .gp-aff .go { display: none; }
}
@media (max-width: 380px) { .hero-gp b::after { content: " →"; } }
@media (max-width: 640px) { .gp-rows li:nth-child(n+4):not(.you) { display: none; } .gp-steps { gap: 10px; margin-top: 20px; } .gp-steps span { font-size: 14.5px; } .gp-aff { margin-top: 28px; } }
@media (max-width: 640px) { .to-chips { display: none; } .wd-orb { max-width: 200px; } }

.post { width: min(820px, 100% - 40px); margin: 0 auto; padding: 28px 0 80px; }
.post .crumbs { color: var(--dim); font-size: 14px; margin-bottom: 18px; }
.post .crumbs a { color: var(--muted); }
.post h1 { margin: 14px 0 18px; }
.post h2 { font-size: clamp(24px, 3vw, 31px); margin: 48px 0 14px; }
.post h3 { margin: 30px 0 10px; }
.post p { margin: 0 0 16px; color: #DCDCE6; font-size: 18px; line-height: 1.65; }
.post .lead { font-size: 20px; color: var(--muted); }
.post ul, .post ol { margin: 0 0 16px; padding-left: 22px; }
.post li { margin: 7px 0; color: #DCDCE6; font-size: 18px; line-height: 1.6; }
.post b { color: var(--txt); }
.post blockquote { margin: 26px 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 14px 14px 0; color: var(--txt); }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.post code { background: var(--card2); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.post .cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; }
.post .cta.big { flex-direction: column; align-items: flex-start; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; margin: 56px 0 0; }
.post .cta.big strong { font-size: 24px; }
.post .cta.big span { color: var(--muted); }
.post .cta.big .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.post .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 28px 0; }
.post .card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; color: var(--txt); }
.post .card:hover { border-color: var(--accent2); }
.post .card b { display: block; font-size: 19px; margin-bottom: 4px; }
.post .card span { color: var(--muted); font-size: 15px; }
@media (max-width: 640px) { .post p, .post li { font-size: 17px; } .post .lead { font-size: 18px; } .post .cta .btn { flex: 1 1 100%; } }