/* The landing page ("showcase"): its own look, in both themes. Every class is
   x-* so nothing here touches the app's styles. */

body.is-home {
  --x-bg: #05081a; --x-bg2: #0a1030; --x-ink: #eef2ff; --x-mut: #9aa6cf;
  --x-card: rgba(255, 255, 255, 0.045); --x-card2: rgba(255, 255, 255, 0.02); --x-bd: rgba(255, 255, 255, 0.1);
  --x-letter: 170, 190, 255; --x-spot: rgba(91, 124, 255, 0.22);
  --x-console: linear-gradient(180deg, rgba(14, 22, 62, 0.96), rgba(8, 12, 36, 0.98));
  --x-g: linear-gradient(100deg, #8fb4ff 0%, #c4b5fd 45%, #67e8f9 100%);
  --x-chip: #c7d2fe; --x-paper-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.8);
  --x-flag: rgba(14, 22, 62, 0.92); --x-tile: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --x-best: linear-gradient(180deg, #141d52, #0b1035); --x-final: linear-gradient(180deg, #0b1240, #070b24);
  background: var(--x-bg); color: var(--x-ink);
}
[data-theme="light"] body.is-home {
  --x-bg: #f5f7ff; --x-bg2: #eef2ff; --x-ink: #0f1733; --x-mut: #586386;
  --x-card: rgba(15, 23, 51, 0.035); --x-card2: rgba(15, 23, 51, 0.02); --x-bd: rgba(15, 23, 51, 0.1);
  --x-letter: 70, 92, 190; --x-spot: rgba(91, 124, 255, 0.16);
  --x-console: linear-gradient(180deg, #ffffff, #f7f9ff);
  --x-g: linear-gradient(100deg, #3155c6 0%, #7c3aed 50%, #0891b2 100%);
  --x-chip: #3b4a9a; --x-paper-shadow: 0 40px 90px -36px rgba(30, 45, 110, 0.45);
  --x-flag: #ffffff; --x-tile: linear-gradient(180deg, #ffffff, #f8faff);
  --x-best: linear-gradient(180deg, #ffffff, #f3f6ff); --x-final: linear-gradient(180deg, #eef2ff, #e3e9ff);
}

/* the site's navbar over the landing, light theme */
[data-theme="light"] .is-home .navbar { background: rgba(255, 255, 255, 0.82); border-bottom-color: rgba(15, 23, 51, 0.08); --ls-logo-ink: #0f1733; backdrop-filter: blur(14px); }
[data-theme="light"] .is-home .navbar .nav-links, [data-theme="light"] .is-home .navbar .nav-links a,
[data-theme="light"] .is-home .navbar .lang-menu > summary, [data-theme="light"] .is-home .navbar .theme-toggle,
[data-theme="light"] .is-home .navbar .nav-login { color: #1b2547; }
[data-theme="light"] .is-home .navbar .nav-login, [data-theme="light"] .is-home .navbar .theme-toggle,
[data-theme="light"] .is-home .navbar .lang-menu > summary { border-color: rgba(15, 23, 51, 0.16); background: #fff; }
[data-theme="light"] .is-home .navbar .nav-burger { color: #1b2547; border-color: rgba(15, 23, 51, 0.16); }
[data-theme="light"] .is-home .navbar.is-open .nav-links { background: #fff; border-color: rgba(15, 23, 51, 0.08); }
.is-home .navbar { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }

.x { overflow-x: clip; font-family: "Noto Sans Armenian", "Noto Sans", system-ui, sans-serif; }
.x a { color: inherit; text-decoration: none; }
.x button { font: inherit; cursor: pointer; }
.x-wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.x-g { background: var(--x-g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.x-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 14px; font-weight: 700; font-size: 16px; border: 1px solid transparent; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s; overflow: hidden; }
.x-btn-p { background: linear-gradient(135deg, #6d8bff, #3d5cf0 60%, #7c3aed); color: #fff !important; box-shadow: 0 12px 40px -12px #5b7cff, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.x-btn-p::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35), transparent 70%); background-size: 250% 100%; animation: x-shine 3.5s infinite; }
@keyframes x-shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -60% 0; } }
.x-btn-o { border-color: var(--x-bd); background: var(--x-card); color: var(--x-ink); }
.x-btn-o:hover { border-color: rgba(122, 168, 255, 0.6); }
.x-eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--x-bd); background: var(--x-card); font: 700 12.5px "Noto Sans", "Noto Sans Armenian", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-chip); }
.x h2 { font-size: 52px; line-height: 1.08; margin: 18px 0 14px; letter-spacing: -0.02em; font-weight: 900; color: var(--x-ink); }
.x-sub { color: var(--x-mut); font-size: 19px; line-height: 1.55; max-width: 660px; margin: 0 auto; }
.x-sec { position: relative; padding: 120px 0; }
.x-center { text-align: center; }
.x-reveal { opacity: 0; transform: translateY(40px); transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.x-reveal.in { opacity: 1; transform: none; }
.x-note { display: inline-block; margin-top: 18px; padding: 5px 11px; border-radius: 8px; background: rgba(245, 158, 11, 0.14); color: #d97706; font: 600 12.5px "Noto Sans", sans-serif; }

/* ── hero ── */
.x-hero { position: relative; min-height: calc(100vh - 72px); padding: 90px 0 90px; overflow: hidden; }
.x-letters { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-spot { position: absolute; inset: 0; background: radial-gradient(650px circle at var(--mx, 70%) var(--my, 30%), var(--x-spot), transparent 60%); pointer-events: none; }
.x-aur { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.45; pointer-events: none; }
.x-aur.a1 { background: #3048d6; top: -420px; right: -260px; animation: x-dr 18s ease-in-out infinite; }
.x-aur.a2 { background: #6d28d9; bottom: -520px; left: -320px; opacity: 0.35; animation: x-dr 22s ease-in-out infinite reverse; }
[data-theme="light"] .x-aur { opacity: 0.18; }
@keyframes x-dr { 50% { transform: translate(-80px, 60px) scale(1.1); } }
.x-hero .x-wrap { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; }
.x-hero h1 { font-size: 66px; line-height: 1.04; margin: 22px 0 22px; font-weight: 900; letter-spacing: -0.025em; color: var(--x-ink); }
.x-swap { position: relative; display: inline-block; }
.x-swap .w1 { position: relative; color: #fb7185; transition: 0.6s; }
.x-swap .w1::after { content: ""; position: absolute; left: -2%; top: 54%; height: 7px; width: 0; border-radius: 4px; background: #f43f5e; transform: rotate(-3deg); transition: width 0.55s cubic-bezier(0.7, 0, 0.3, 1); }
.x-swap.done .w1::after { width: 104%; }
.x-swap.done .w1 { position: absolute; left: 0; top: -0.42em; opacity: 0.6; font-size: 0.42em; }
.x-swap .w2 { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; padding-bottom: 0.08em; transition: max-width 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s; }
.x-swap.done .w2 { max-width: 10em; }
.x-lead { font-size: 20px; line-height: 1.6; color: var(--x-mut); max-width: 560px; margin: 0 0 34px; }
.x-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.x-trust { display: flex; gap: 26px; margin-top: 38px; color: var(--x-mut); font-size: 14px; flex-wrap: wrap; }
.x-trust b { color: var(--x-ink); font: 800 22px "Noto Sans", sans-serif; display: block; }

.x-try { position: relative; border-radius: 24px; padding: 1.5px; background: linear-gradient(140deg, rgba(143, 180, 255, 0.7), rgba(139, 92, 246, 0.35) 40%, rgba(34, 211, 238, 0.6)); box-shadow: 0 40px 100px -30px rgba(61, 92, 240, 0.6); }
.x-tryin { border-radius: 23px; background: var(--x-console); padding: 22px; }
.x-tryhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.x-live { display: inline-flex; align-items: center; gap: 7px; font: 700 12px "Noto Sans", "Noto Sans Armenian", sans-serif; color: #16a34a; letter-spacing: 0.06em; }
.x-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: x-ping 1.6s infinite; }
@keyframes x-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
.x-tryhead span:last-child { margin-left: auto; color: var(--x-mut); font-size: 12.5px; }
.x-field { border: 1px solid var(--x-bd); border-radius: 16px; background: var(--x-card); transition: 0.3s; }
.x-field:focus-within { border-color: #7aa8ff; box-shadow: 0 0 0 4px rgba(91, 124, 255, 0.18); }
.x-field textarea { display: block; width: 100%; min-height: 96px; resize: none; border: 0; background: none; color: var(--x-ink); font: 500 17px/1.6 "Noto Sans Armenian", sans-serif; padding: 16px 18px; outline: none; }
.x-field textarea::placeholder { color: var(--x-mut); opacity: 0.7; }
.x-ex { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.x-ex button { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--x-bd); background: var(--x-card); color: var(--x-chip); font-size: 13px; transition: 0.2s; text-align: left; }
.x-ex button:hover { background: rgba(91, 124, 255, 0.16); border-color: #7aa8ff; transform: translateY(-2px); }
.x-verdicts { display: flex; flex-direction: column; gap: 10px; min-height: 170px; }
.x-v { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--x-bd); background: var(--x-card); animation: x-vin 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes x-vin { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.x-v .ic { flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; }
.x-v.r .ic { background: rgba(244, 63, 94, 0.16); color: #f43f5e; }
.x-v.a .ic { background: rgba(245, 158, 11, 0.16); color: #d97706; }
.x-v.ok .ic { background: rgba(34, 197, 94, 0.16); color: #16a34a; }
.x-v b { display: block; font-size: 15px; margin-bottom: 2px; color: var(--x-ink); }
.x-v span { color: var(--x-mut); font-size: 13.5px; line-height: 1.45; }
.x-v em { font-style: normal; display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 7px; background: rgba(91, 124, 255, 0.12); color: #6d7ff0; font: 700 11.5px "Noto Sans", "Noto Sans Armenian", sans-serif; }
.x-v.ghost { opacity: 0.6; border-style: dashed; animation: none; }
.x-tryfoot { margin-top: 12px; color: var(--x-mut); opacity: 0.8; font-size: 12px; }
.x-thinking { display: flex; gap: 5px; padding: 16px; }
.x-thinking i { width: 8px; height: 8px; border-radius: 50%; background: #7aa8ff; animation: x-th 1s infinite; }
.x-thinking i:nth-child(2) { animation-delay: 0.15s; } .x-thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes x-th { 50% { transform: translateY(-6px); opacity: 0.4; } }

/* ── marquees ── */
.x-mq { padding: 26px 0; border-block: 1px solid var(--x-bd); background: var(--x-card2); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.x-track { display: flex; gap: 14px; width: max-content; animation: x-mq 40s linear infinite; }
.x-mq .x-track + .x-track { margin-top: 14px; animation-direction: reverse; animation-duration: 48s; }
@keyframes x-mq { to { transform: translateX(-50%); } }
.x-art { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--x-bd); background: var(--x-card); white-space: nowrap; font-size: 14.5px; color: var(--x-ink); }
.x-art b { font: 800 13px "Noto Sans", "Noto Sans Armenian", sans-serif; color: #6d8bff; }
.x-logos { padding: 70px 0 30px; }
.x-logos h3 { margin: 0 0 30px; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-mut); font-weight: 700; }
.x-lgrow { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-lgtrack { display: flex; gap: 18px; width: max-content; animation: x-mq 34s linear infinite; }
.x-lgrow:hover .x-lgtrack, .x-revs:hover .x-revtrack { animation-play-state: paused; }
.x-lg { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 26px; border-radius: 18px; border: 1px solid var(--x-bd); background: var(--x-card); color: var(--x-mut); font: 700 17px "Noto Sans Armenian", sans-serif; white-space: nowrap; transition: 0.3s; }
.x-lg:hover { color: var(--x-ink); border-color: rgba(143, 180, 255, 0.5); }
.x-lg i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 19px; background: linear-gradient(135deg, var(--c1), var(--c2)); }

/* ── story ── */
.x-story { height: 520vh; }
.x-stick { position: sticky; top: 72px; height: calc(100vh - 72px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.x-steps { position: relative; padding-left: 26px; margin-top: 26px; }
.x-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--x-bd); }
.x-rail i { display: block; width: 100%; height: 0; border-radius: 2px; background: linear-gradient(180deg, #7aa8ff, #a78bfa, #22d3ee); box-shadow: 0 0 14px #7aa8ff; }
.x-st { padding: 12px 0; opacity: 0.3; transition: 0.5s; transform: translateX(-6px); }
.x-st.on { opacity: 1; transform: none; }
.x-st small { font: 800 12px "Noto Sans", sans-serif; letter-spacing: 0.1em; color: #6d8bff; }
.x-st h3 { margin: 6px 0; font-size: 26px; font-weight: 800; color: var(--x-ink); }
.x-st p { margin: 0; color: var(--x-mut); font-size: 16px; line-height: 1.55; max-height: 0; overflow: hidden; transition: max-height 0.6s; }
.x-st.on p { max-height: 120px; }
.x-stage { position: relative; height: 560px; }
.x-paper { position: absolute; left: 50%; top: 50%; width: 440px; height: 520px; margin: -260px 0 0 -220px; border-radius: 16px; background: #fbfbfd; color: #1b2340; padding: 30px; box-shadow: var(--x-paper-shadow); border: 1px solid rgba(15, 23, 51, 0.06); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s; font: 14px/1.75 "Noto Serif Armenian", serif; }
.x-beamclip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.s0 .x-paper { transform: translateY(80px) rotate(-6deg) scale(0.9); opacity: 0; }
.x-paper h5 { margin: 0 0 4px; text-align: center; font: 700 13px "Noto Sans Armenian", sans-serif; letter-spacing: 0.12em; }
.x-paper .meta { text-align: center; font: 12px "Noto Sans Armenian", sans-serif; color: #7a84a6; margin-bottom: 14px; }
.x-paper p { margin: 0 0 10px; }
.x-ph { position: relative; display: inline-block; }
.x-ph .t { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0.5); opacity: 0; padding: 1px 8px; border-radius: 7px; background: linear-gradient(135deg, #5b7cff, #8b5cf6); color: #fff; font: 700 11.5px "Noto Sans", sans-serif; white-space: nowrap; transition: 0.5s; }
.x-ph .r { transition: 0.5s; }
.s2 .x-ph .r, .s3 .x-ph .r, .s4 .x-ph .r, .s5 .x-ph .r { position: absolute; opacity: 0; filter: blur(5px); }
.s2 .x-ph .t, .s3 .x-ph .t, .s4 .x-ph .t, .s5 .x-ph .t { position: relative; top: auto; opacity: 1; transform: none; }
.x-rk { border-radius: 4px; transition: 0.6s; padding: 0 2px; }
.s3 .x-rk { background: rgba(244, 63, 94, 0.18); box-shadow: inset 0 -2px #f43f5e; }
.x-rk .n { display: none; color: #15803d; }
.s4 .x-rk, .s5 .x-rk { background: rgba(34, 197, 94, 0.14); box-shadow: inset 0 -2px #22c55e; }
.s4 .x-rk .o, .s5 .x-rk .o { display: none; }
.s4 .x-rk .n, .s5 .x-rk .n { display: inline; }
.x-bars i { display: block; height: 7px; border-radius: 4px; background: #e7eaf3; margin: 8px 0; }
.x-beam { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(91, 124, 255, 0.25)); border-bottom: 2px solid #5b7cff; opacity: 0; pointer-events: none; }
.s1 .x-beam { animation: x-beam 1.8s ease-in-out infinite; opacity: 1; }
@keyframes x-beam { 0% { top: -120px; } 100% { top: 100%; } }
.x-flag { position: absolute; right: -190px; width: 230px; padding: 12px 14px; border-radius: 14px; background: var(--x-flag); border: 1px solid rgba(244, 63, 94, 0.5); color: var(--x-ink); font: 13px/1.45 "Noto Sans Armenian", sans-serif; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateX(30px); transition: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.x-flag b { display: block; color: #f43f5e; font-size: 12px; margin-bottom: 3px; }
.x-flag.f2 { transition-delay: 0.15s; } .x-flag.f3 { transition-delay: 0.3s; }
.s3 .x-flag, .s4 .x-flag { opacity: 1; transform: none; }
.s4 .x-flag { border-color: rgba(34, 197, 94, 0.6); }
.s4 .x-flag b { color: #16a34a; }
.x-stamp { position: absolute; right: 26px; bottom: 60px; width: 150px; height: 150px; border-radius: 50%; border: 4px double #2563eb; color: #2563eb; display: grid; place-items: center; text-align: center; font: 900 15px "Noto Sans Armenian", sans-serif; transform: rotate(-14deg) scale(2.4); opacity: 0; transition: 0.45s cubic-bezier(0.5, 1.8, 0.5, 1); }
.s5 .x-stamp { opacity: 0.9; transform: rotate(-14deg) scale(1); }
.x-sig { position: absolute; left: 30px; bottom: 40px; width: 170px; height: 60px; }
.x-sig path { fill: none; stroke: #1d4ed8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s ease 0.3s; }
.s5 .x-sig path { stroke-dashoffset: 0; }
.x-sib { position: absolute; left: 50%; top: 50%; width: 240px; height: 300px; margin: -150px 0 0 -120px; border-radius: 14px; background: #eef2ff; color: #1b2340; padding: 18px; font: 700 13px "Noto Sans Armenian", sans-serif; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.6); opacity: 0; transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.x-sib i { display: block; height: 6px; border-radius: 3px; background: #c7d2fe; margin: 9px 0; }
.s5 .x-sib.o1 { opacity: 1; transform: translate(-300px, -40px) rotate(-12deg); }
.s5 .x-sib.o2 { opacity: 1; transform: translate(330px, 30px) rotate(10deg); }
.x-ring { position: absolute; left: 0; bottom: 6px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--x-flag); border: 1px solid var(--x-bd); font: 12.5px "Noto Sans Armenian", sans-serif; color: var(--x-mut); opacity: 0; transition: 0.5s; }
.s3 .x-ring, .s4 .x-ring, .s5 .x-ring { opacity: 1; }
.x-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.x-ring circle { fill: none; stroke-width: 5; }
.x-ring .bgc { stroke: var(--x-bd); }
.x-ring .fg { stroke: #f43f5e; stroke-dasharray: 46 100; transition: 1s; stroke-linecap: round; }
.s4 .x-ring .fg, .s5 .x-ring .fg { stroke: #22c55e; stroke-dasharray: 100 100; }
.x-ring b { font: 800 15px "Noto Sans", sans-serif; color: var(--x-ink); }

/* ── features (bento) ── */
.x-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 250px; gap: 18px; margin-top: 60px; text-align: left; }
.x-tile { position: relative; border-radius: 24px; border: 1px solid var(--x-bd); background: var(--x-tile); padding: 26px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s; }
.x-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(122, 168, 255, 0.16), transparent 50%); opacity: 0; transition: 0.3s; pointer-events: none; }
.x-tile:hover::before { opacity: 1; }
.x-tile:hover { border-color: rgba(143, 180, 255, 0.45); }
.x-tile h4 { position: relative; margin: 0 0 6px; font-size: 21px; font-weight: 800; color: var(--x-ink); }
.x-tile p { position: relative; margin: 0; color: var(--x-mut); font-size: 15px; line-height: 1.5; max-width: 340px; }
.x-t1 { grid-column: span 4; } .x-t2, .x-t3, .x-t4, .x-t5 { grid-column: span 2; } .x-t6, .x-t7 { grid-column: span 3; }
.x-t2 p { max-width: 150px; }
.x-viz { position: absolute; right: 22px; bottom: 20px; }
.x-pass { width: 230px; height: 140px; border-radius: 12px; background: linear-gradient(135deg, #1e3a8a, #312e81); border: 1px solid rgba(255, 255, 255, 0.15); padding: 14px; overflow: hidden; position: relative; }
.x-pass .ph2 { width: 52px; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); }
.x-pass .ln { position: absolute; left: 78px; right: 14px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.x-pass .sc { position: absolute; left: 0; right: 0; height: 3px; background: #22d3ee; box-shadow: 0 0 18px 4px #22d3ee; animation: x-sc 2.4s ease-in-out infinite; }
@keyframes x-sc { 0%, 100% { top: 8%; } 50% { top: 90%; } }
.x-bell { font-size: 56px; display: inline-block; transform-origin: 50% 8%; animation: x-ring 3s ease-in-out infinite; }
@keyframes x-ring { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(16deg); } 70% { transform: rotate(-13deg); } 76% { transform: rotate(8deg); } 82% { transform: rotate(-4deg); } }
.x-bub { position: absolute; right: 20px; bottom: 96px; padding: 6px 10px; border-radius: 10px; background: #f59e0b; color: #1b1300; font: 800 12px "Noto Sans", sans-serif; animation: x-pop 3s ease-in-out infinite; }
@keyframes x-pop { 0%, 55% { transform: scale(0); } 62%, 100% { transform: scale(1); } }
.x-sig2 path { fill: none; stroke: #8b9cf6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; animation: x-draw 4s ease-in-out infinite; }
@keyframes x-draw { 0% { stroke-dashoffset: 500; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.x-ba { position: relative; height: 140px; margin-top: 18px; border-radius: 14px; overflow: hidden; border: 1px solid var(--x-bd); user-select: none; cursor: ew-resize; touch-action: pan-y; }
.x-ba .side { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 22px; font: 600 16px/1.5 "Noto Serif Armenian", serif; }
.x-ba .bef { background: #2a0f1a; color: #fecdd3; }
.x-ba .aft { background: #0b2a1a; color: #bbf7d0; clip-path: inset(0 0 0 var(--p, 50%)); }
.x-ba .knob { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 3px; background: #fff; box-shadow: 0 0 18px #fff; }
.x-ba .knob::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #1b2340; display: grid; place-items: center; font-weight: 900; }
.x-ba .lb { position: absolute; top: 10px; font: 800 11px "Noto Sans", "Noto Sans Armenian", sans-serif; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); color: #fff; }
.x-counter { font: 900 64px "Noto Sans", sans-serif; line-height: 1; }
.x-tags { position: absolute; right: 26px; bottom: 24px; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.x-tags span { padding: 6px 12px; border-radius: 9px; background: linear-gradient(135deg, #5b7cff, #8b5cf6); color: #fff; font: 700 12.5px "Noto Sans", sans-serif; animation: x-tag 4.5s ease-in-out infinite; }
.x-tags span:nth-child(2) { animation-delay: 0.4s; } .x-tags span:nth-child(3) { animation-delay: 0.8s; }
@keyframes x-tag { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-14px); } }
.x-fan { position: absolute; right: 40px; bottom: -30px; width: 250px; height: 170px; }
.x-fan div { position: absolute; bottom: 0; width: 120px; height: 150px; border-radius: 12px; background: #eef2ff; color: #1b2340; padding: 12px; font: 800 11px "Noto Sans Armenian", sans-serif; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6); transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: 50% 100%; border: 1px solid rgba(15, 23, 51, 0.08); }
.x-fan div i { display: block; height: 5px; border-radius: 3px; background: #c7d2fe; margin: 7px 0; }
.x-fan div:nth-child(1) { left: 0; transform: rotate(-14deg); } .x-fan div:nth-child(2) { left: 65px; transform: rotate(-2deg); } .x-fan div:nth-child(3) { left: 130px; transform: rotate(11deg); }
.x-t7:hover .x-fan div:nth-child(1) { transform: rotate(-24deg) translateY(-14px); }
.x-t7:hover .x-fan div:nth-child(2) { transform: translateY(-22px); }
.x-t7:hover .x-fan div:nth-child(3) { transform: rotate(22deg) translateY(-14px); }

/* ── pricing ── */
.x-bill { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; border: 1px solid var(--x-bd); background: var(--x-card); margin: 34px 0 46px; }
.x-bill button { border: 0; background: none; color: var(--x-mut); padding: 10px 20px; border-radius: 10px; font-weight: 700; }
.x-bill button.on { background: linear-gradient(135deg, #6d8bff, #3d5cf0); color: #fff; box-shadow: 0 8px 22px -10px #5b7cff; }
.x-bill em { font-style: normal; margin-left: 7px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.18); color: #16a34a; font-size: 12px; }
.x-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.x-plan { position: relative; border-radius: 26px; padding: 32px; border: 1px solid var(--x-bd); background: var(--x-tile); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s; }
.x-plan:hover { box-shadow: 0 40px 80px -40px rgba(91, 124, 255, 0.6); }
.x-plan.best { border: 0; padding: 33px; background: none; isolation: isolate; }
.x-plan.best::after { content: ""; position: absolute; inset: 0; border-radius: 26px; z-index: -1; background: var(--x-best); }
.x-plan.best::before { content: ""; position: absolute; inset: -1.5px; border-radius: 27px; z-index: -2; background: conic-gradient(from var(--x-a, 0deg), #5b7cff, #8b5cf6, #22d3ee, #5b7cff); animation: x-rot 5s linear infinite; }
@property --x-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes x-rot { to { --x-a: 360deg; } }
.x-plan .hot { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #f43f5e); color: #fff; font: 800 12px "Noto Sans", "Noto Sans Armenian", sans-serif; white-space: nowrap; box-shadow: 0 8px 20px -8px #f43f5e; }
.x-plan h4 { margin: 0; font-size: 22px; font-weight: 800; color: var(--x-ink); }
.x-plan .for { color: var(--x-mut); font-size: 14.5px; margin: 6px 0 20px; }
.x-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.x-price b { font: 900 50px "Noto Sans", "Noto Sans Armenian", sans-serif; letter-spacing: -0.02em; color: var(--x-ink); }
.x-price span { color: var(--x-mut); font-size: 15px; }
.x-save { min-height: 20px; font-size: 13px; color: #16a34a; margin-bottom: 20px; }
.x-plan ul { list-style: none; padding: 0; margin: 0 0 26px; }
.x-plan li { display: flex; gap: 10px; align-items: flex-start; margin: 11px 0; font-size: 15px; color: var(--x-ink); opacity: 0.9; }
.x-plan li::before { content: "✓"; flex: 0 0 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: rgba(34, 197, 94, 0.16); color: #16a34a; font: 800 11px "Noto Sans", sans-serif; margin-top: 1px; }
.x-plan .x-btn { width: 100%; }
.x-free { margin-top: 26px; color: var(--x-mut); font-size: 15px; }
.x-free b { color: var(--x-ink); }

/* ── reviews ── */
.x-revs { margin-top: 54px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.x-revtrack { display: flex; gap: 20px; width: max-content; animation: x-mq 60s linear infinite; padding-top: 12px; }
.x-rev { position: relative; width: 390px; flex: 0 0 390px; text-align: left; border-radius: 22px; padding: 26px; border: 1px solid var(--x-bd); background: var(--x-tile); transition: 0.35s; }
.x-rev:hover { border-color: rgba(143, 180, 255, 0.5); transform: translateY(-6px); }
.x-rev .qm { position: absolute; right: 20px; top: 6px; font: 900 70px "Noto Serif Armenian", serif; color: rgba(122, 150, 255, 0.16); line-height: 1; }
.x-rev .stars { color: #f59e0b; letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; }
.x-rev p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--x-ink); }
.x-rev .who { display: flex; align-items: center; gap: 12px; }
.x-rev .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px "Noto Sans Armenian", sans-serif; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.x-rev .who b { display: block; font-size: 15px; color: var(--x-ink); }
.x-rev .who span { color: var(--x-mut); font-size: 13.5px; }
.x-rev .ex { position: absolute; left: 20px; top: -10px; padding: 2px 8px; border-radius: 6px; background: #f59e0b; color: #1b1300; font: 800 10.5px "Noto Sans", "Noto Sans Armenian", sans-serif; letter-spacing: 0.05em; }
.x-metric { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 5px 10px; border-radius: 9px; background: rgba(34, 197, 94, 0.12); color: #16a34a; font: 700 13px "Noto Sans Armenian", sans-serif; }

/* ── questions ── */
.x-faq { max-width: 860px; margin: 40px auto 0; text-align: left; }
.x-q { border: 1px solid var(--x-bd); border-radius: 16px; margin-bottom: 10px; background: var(--x-card); overflow: hidden; }
.x-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 700; font-size: 16.5px; cursor: pointer; color: var(--x-ink); }
.x-q summary::-webkit-details-marker { display: none; }
.x-q summary i { font-style: normal; flex: 0 0 28px; height: 28px; border-radius: 9px; background: rgba(91, 124, 255, 0.14); color: #6d8bff; display: grid; place-items: center; transition: 0.3s; }
.x-q[open] summary i { transform: rotate(45deg); }
.x-q p { margin: 0; padding: 0 20px 18px; color: var(--x-mut); line-height: 1.6; }

/* ── final + footer ── */
.x-final { position: relative; border-radius: 32px; padding: 80px 40px; text-align: center; overflow: hidden; border: 1px solid var(--x-bd); background: radial-gradient(800px 400px at 50% 120%, rgba(91, 124, 255, 0.45), transparent 60%), var(--x-final); }
.x-final h2 { font-size: 58px; }
.x-orb { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #8fb4ff; box-shadow: 0 0 20px #8fb4ff; animation: x-orbit 9s linear infinite; }
.x-orb.o2 { animation-delay: -4.5s; background: #c4b5fd; box-shadow: 0 0 20px #c4b5fd; }
@keyframes x-orbit { from { transform: rotate(0) translateX(300px) rotate(0); } to { transform: rotate(360deg) translateX(300px) rotate(-360deg); } }
.x-foot { margin-top: 110px; padding: 56px 0 32px; border-top: 1px solid var(--x-bd); color: var(--x-mut); font-size: 14.5px; }
.x-foot .x-wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.x-foot b { display: block; color: var(--x-ink); margin-bottom: 12px; }
.x-foot a, .x-foot button { display: block; margin: 8px 0; color: var(--x-mut); background: none; border: 0; padding: 0; font-size: 14.5px; text-align: left; }
.x-foot a:hover, .x-foot button:hover { color: var(--x-ink); }
.x-foot .bottom { grid-column: 1 / -1; border-top: 1px solid var(--x-bd); padding-top: 20px; margin-top: 10px; font-size: 13px; }
.x-foot .bottom a { display: inline; }

@media (max-width: 980px) {
  .x-hero .x-wrap, .x-stick { grid-template-columns: 1fr; }
  .x-hero { padding-top: 50px; min-height: 0; }
  .x-hero h1 { font-size: 42px; }
  .x h2, .x-final h2 { font-size: 34px; }
  .x-sec { padding: 80px 0; }
  .x-bento, .x-plans { grid-template-columns: 1fr; }
  .x-bento { grid-auto-rows: auto; }
  .x-tile { grid-column: auto !important; min-height: 230px; }
  .x-story { height: auto; }
  .x-stick > div:first-child { order: 2; }
  .x-st h3 { font-size: 19px; }
  .x-st { padding: 7px 0; }
  .x-hero h1 { line-height: 1.16; }
  .x-stick { position: relative; top: 0; height: auto; padding: 70px 24px; gap: 30px; }
  .x-stage { height: 520px; transform: scale(0.72); transform-origin: top center; margin-bottom: -140px; }
  .x-flag { display: none; }
  .x-foot .x-wrap { grid-template-columns: 1fr 1fr; }
  .x-rev { width: 300px; flex-basis: 300px; }
}
@media (max-width: 560px) {
  .x-wrap { padding: 0 16px; }
  .x-hero h1 { font-size: 36px; }
  .x-lead { font-size: 17px; }
  .x-btn { width: 100%; }
  .x-viz, .x-tags, .x-fan { transform: scale(0.8); transform-origin: bottom right; }
  .x-stage { transform: scale(0.62); margin-bottom: -200px; }
}
@media (prefers-reduced-motion: reduce) { .x *, .x *::before, .x *::after { animation: none !important; transition: none !important; } }