/* JOVLIYEV FX v1 — site.css ustiga: aurora fon, gradient sarlavhalar, 3D kartalar, Telegram oqimi.
   Faqat index.html, ai-team.html va crm.html ulaydi — boshqa sahifalarga ta'sir qilmaydi. */
:root {
  --grad: linear-gradient(100deg, #2f5bff, #7a4dff 45%, #ff5b1f);
  --grad-ai: linear-gradient(100deg, #2f5bff, #7a4dff 60%, #b14dff);
  --grad-dv: linear-gradient(100deg, #0f9d58, #12b886 50%, #2f9bff);
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ——— Fon: nuqtali to'r va mayin don ——— */
body { background-image: radial-gradient(#1112140f 1px, transparent 1.3px); background-size: 22px 22px; }
@media (min-width: 861px) {
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300; opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* Scroll ko'rsatkichi */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad); pointer-events: none; }

/* ——— Tugmalar: yaltirash ——— */
.btn:not(.ghost) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.ghost)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, #ffffff38 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn:not(.ghost):hover::after { transform: translateX(120%); }
.nav .btn.sm:not(.ghost) { background: var(--ink); background-image: linear-gradient(100deg, #111214, #23264a); }

/* ——— Hero: aurora ——— */
.hero { isolation: isolate; }
.hero::before { display: none; }
.fx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; animation: drift 22s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(1) { width: 560px; height: 560px; right: -8%; top: -18%; background: #2f5bff; opacity: .28; }
.fx-aurora i:nth-child(2) { width: 420px; height: 420px; right: 22%; top: 30%; background: #ff5b1f; opacity: .16; animation-duration: 26s; animation-delay: -6s; }
.fx-aurora i:nth-child(3) { width: 380px; height: 380px; left: -10%; top: 40%; background: #7a4dff; opacity: .16; animation-duration: 30s; animation-delay: -12s; }
.t-ai .fx-aurora i:nth-child(2) { background: #b14dff; }
.t-dv .fx-aurora i:nth-child(1) { background: #12a058; }
.t-dv .fx-aurora i:nth-child(2) { background: #2f9bff; }
.t-dv .fx-aurora i:nth-child(3) { background: #ffb020; opacity: .12; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 40px) scale(1.12); } 100% { transform: translate(40px, -30px) scale(.94); } }

/* Gradient, jonli sarlavha */
.hero h1 em, .fx-grad {
  background: linear-gradient(100deg, #2f5bff, #7a4dff, #ff5b1f, #7a4dff, #2f5bff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 9s linear infinite;
}
.hero.t-ai h1 em, .t-ai .fx-grad { background-image: linear-gradient(100deg, #2f5bff, #7a4dff, #b14dff, #7a4dff, #2f5bff); }
.hero.t-dv h1 em, .t-dv .fx-grad, .t-dvpage .fx-grad { background-image: linear-gradient(100deg, #0f9d58, #12b886, #2f9bff, #12b886, #0f9d58); }
@keyframes shimmer { to { background-position: 300% 0; } }
.hero h1 { text-shadow: none; }

/* Telefon atrofidagi suzuvchi kartochkalar */
.fx-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 14px; border-radius: 16px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #ffffffd9; border: 1px solid #ffffff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px #1c3fd670, 0 2px 0 #0000000a; animation: bob 6s ease-in-out infinite;
}
.fx-chip b { background: var(--grad); color: #fff; padding: 3px 8px; border-radius: 999px; font-size: 12px; }
.fx-chip span { color: var(--muted); font-weight: 500; }
.fx-chip.c1 { top: 54px; left: -84px; }
.fx-chip.c2 { top: 190px; right: -92px; animation-delay: -1.5s; }
.fx-chip.c3 { bottom: 170px; left: -104px; animation-delay: -3s; }
.fx-chip.c4 { bottom: 70px; right: -64px; animation-delay: -4.5s; }
@keyframes bob { 50% { transform: translateY(-9px); } }

/* Lenta: qiya qora tasma */
.hero .ticker { background: var(--ink); border: 0; transform: rotate(-1.4deg); margin: 6px -3% 34px; box-shadow: 0 20px 40px -24px #11121499; }
.hero .ticker-in > span { color: #f3f1ea; }
.hero .ticker-in > span::after { color: #ff8a5b; }

/* ——— 3D kartalar (JS --rx/--ry/--mx/--my beradi) ——— */
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #ffffff30, transparent 42%); z-index: 3; }
.fx-tilt:hover::after { opacity: 1; }

/* ——— Platformalar: qorong'i bento ——— */
.fx-dark { position: relative; overflow: hidden; isolation: isolate; }
.fx-dark::before, .fx-dark::after { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.fx-dark::before { left: -220px; top: -200px; background: radial-gradient(closest-side, #2f5bff55, transparent); }
.fx-dark::after { right: -220px; bottom: -260px; background: radial-gradient(closest-side, #12a05840, transparent); }
.fx-dark h2 em { font-style: normal; }
.platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plat { position: relative; display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; border-radius: 26px; overflow: hidden; background: #17191dd9; border: 1px solid #ffffff14; box-shadow: 0 30px 70px -40px #000; transition: transform .3s ease, box-shadow .3s; }
.plat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--a), transparent 0 70%, var(--c, #2f5bff) 82%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-a 6s linear infinite; }
.plat.t-ai { --c: #6f8dff; } .plat.t-dv { --c: #3fd08a; }
@keyframes spin-a { to { --a: 360deg; } }
.plat:hover { box-shadow: 0 40px 90px -40px var(--c); }
.plat .pc-body h3 { font-size: 1.4rem; color: #fff; }
.plat .muted { color: #a3a6ad; }
.plat .pc-foot { border-top-color: #ffffff14; }
.plat .price { color: #a3a6ad; } .plat .price b { color: #fff; }
.plat .go { background: #fff; color: var(--ink); }
.plat:hover .go { transform: rotate(-45deg); }
.plat-art { position: relative; padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 250px; overflow: hidden; }
.t-ai .plat-art { background: radial-gradient(120% 90% at 100% 0, #6f8dff, #2f5bff 55%, #1c3fd6); }
.t-dv .plat-art { background: radial-gradient(120% 90% at 0 0, #6fd9a3, #12a058 55%, #0b7a42); }
.plat-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(#ffffff26 1px, transparent 1.3px); background-size: 16px 16px; pointer-events: none; }
.t-dv .badge { background: var(--green-soft); color: var(--green); }
.pa-row { position: relative; z-index: 1; width: min(340px, 100%); color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: 0 6px 16px -8px #0006; font-size: 13px; transition: transform .35s; }
.pa-row:nth-child(2) { margin-left: 14px; } .pa-row:nth-child(3) { margin-left: 28px; }
.plat:hover .pa-row:nth-child(1) { transform: translateX(6px); }
.plat:hover .pa-row:nth-child(2) { transform: translateX(-6px); }
.plat:hover .pa-row:nth-child(3) { transform: translateX(4px); }
.pa-row i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; flex: none; }
.pa-row b { font-weight: 600; }
.pa-row em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.pa-row em::before, .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .3; transform: scale(.7); } }
.pa-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pa-cell { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 6px 16px -8px #0006; transition: transform .35s; }
.plat:hover .pa-cell:nth-child(odd) { transform: translateY(-4px); }
.pa-cell b { display: block; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.pa-cell span { font-size: 12px; color: var(--muted); }
.pa-tg { position: relative; z-index: 1; margin-top: 4px; background: #e1f7cb; color: var(--ink); border-radius: 12px 12px 12px 4px; padding: 9px 12px; font-size: 12.5px; box-shadow: 0 6px 16px -8px #0006; width: fit-content; max-width: 95%; }
.plat-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plat-tags li { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: #ffffff0a; border: 1px solid #ffffff1a; color: #d6d8dd; }

/* ——— Telegram oqimi ——— */
.tgx { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.tgx .checks { margin-top: 26px; gap: 14px; }
.tgx .checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 8px; background: var(--grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7'/%3E%3C/svg%3E"); }
.tgx .checks li { color: var(--ink-2); }
.tg-orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin-inline: auto; }
.tg-orbit svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tg-orbit line { stroke: #2f5bff; stroke-opacity: .45; stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1.2 1.4; animation: flow 2.2s linear infinite; }
.tg-orbit line:nth-child(even) { animation-direction: reverse; stroke: #ff5b1f; }
@keyframes flow { to { stroke-dashoffset: -10.4; } }
.tg-ring { position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed var(--line-2); animation: spin 50s linear infinite; }
.tg-ring.r2 { inset: 24%; border-style: solid; border-color: #2f5bff1f; animation-duration: 30s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.tg-hub { position: absolute; left: 50%; top: 50%; width: 25%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 28%, #7fb6ff, #2f5bff 55%, #1c3fd6); box-shadow: 0 24px 60px -18px #2f5bffcc, inset 0 2px 0 #ffffff55; }
.tg-hub svg { width: 46%; height: auto; transform: translateX(-4%); }
.tg-hub::before, .tg-hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2f5bff66; animation: ping 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.tg-hub::after { animation-delay: 1.4s; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.tg-node { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 12px 8px 8px; border-radius: 14px; font-size: 13.5px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: bob 6s ease-in-out infinite; transition: border-color .2s, box-shadow .2s; }
.tg-node:hover { border-color: #2f5bff; box-shadow: 0 0 0 4px #2f5bff1f, var(--shadow); }
.tg-node i { font-style: normal; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); font-size: 15px; }
.tg-node:nth-of-type(2) { animation-delay: -1s; } .tg-node:nth-of-type(3) { animation-delay: -2s; } .tg-node:nth-of-type(4) { animation-delay: -3s; }
.tg-node:nth-of-type(5) { animation-delay: -4s; } .tg-node:nth-of-type(6) { animation-delay: -5s; }

/* ——— Qadamlar, nega biz, CTA, muallif ——— */
.steps li { overflow: hidden; transition: transform .25s, box-shadow .25s; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0; transition: transform .45s ease; }
.steps li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.steps li:hover::before { transform: scaleX(1); }
.step-n { background: var(--grad); box-shadow: 0 10px 24px -10px #7a4dffaa; }
.why-item { transition: border-color .25s, background .25s, transform .25s; }
.why-item:hover { border-color: #ffffff3a; background: #ffffff0d; transform: translateY(-3px); }
.feat { position: relative; overflow: hidden; }
.feat::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(closest-side, #2f5bff26, transparent); opacity: 0; transition: opacity .3s; }
.t-dvpage .feat::after { background: radial-gradient(closest-side, #12a05826, transparent); }
.feat:hover::after { opacity: 1; }
.avatar { border: 4px solid transparent; background: linear-gradient(135deg, var(--blue), var(--violet)) padding-box, conic-gradient(from var(--a), #2f5bff, #7a4dff, #ff5b1f, #2f5bff) border-box; animation: spin-a 5s linear infinite; }
.band { background: linear-gradient(120deg, #111214, #171b33 55%, #111214); }
.band::after { content: ""; position: absolute; width: 420px; height: 420px; left: -140px; bottom: -240px; border-radius: 50%; background: radial-gradient(closest-side, #ff5b1f55, transparent); animation: drift 16s ease-in-out infinite alternate; }

/* ——— Footer: qorong'i, toza ustunlar, pastda katta so'z ——— */
.fx-foot { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: #d6d8dd; border-top: 0; padding: 76px 0 26px; }
.fx-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--grad); }
.fx-foot::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; left: 50%; bottom: -640px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, #7a4dff3d, #2f5bff14 55%, transparent); pointer-events: none; }
.ff-top { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; }
.ff-brand { display: grid; gap: 18px; align-content: start; max-width: 400px; }
.fx-foot .logo { color: #fff; }
.fx-foot .logo-mark { background: #fff; color: var(--ink); }
.ff-brand p { color: #9a9ea7; font-size: 15px; }
.ff-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ff-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; border: 1px solid #ffffff1f; background: #ffffff08; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s, border-color .2s, transform .2s; }
.ff-chip:hover { background: #ffffff14; border-color: #ffffff45; transform: translateY(-2px); }
.ff-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fx-foot h4 { font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #6f747e; margin-bottom: 18px; }
.fx-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fx-foot ul a { color: #e6e7ea; text-decoration: none; font-weight: 500; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s, color .2s; }
.fx-foot ul a:hover { color: #fff; background-size: 100% 1.5px; }
.fx-word { margin: 64px 0 0; font-weight: 800; letter-spacing: -.06em; line-height: .92; white-space: nowrap; user-select: none; text-align: center;
  font-size: clamp(3.8rem, 16.5vw, 14.5rem); color: transparent; background: linear-gradient(180deg, #ffffff30, #ffffff06 90%); -webkit-background-clip: text; background-clip: text; }
.fx-word i { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ff-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 22px; border-top: 1px solid #ffffff14; color: #80858f; font-size: 14px; }
.ff-up { color: #fff; text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid #ffffff1f; transition: background .2s; }
.ff-up:hover { background: #ffffff14; }

/* Bosh sahifa katalogi: 2 ta bot — kengroq kartalar */
.catalog { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.catalog .pc-art { height: 260px; }

/* ——— Mahsulot sahifalari ——— */
.hero.t-dv .badge, .t-dv .badge { background: var(--green-soft); color: var(--green); }
.team-vis, .dash { position: relative; background: #ffffffcc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: #fff; box-shadow: 0 40px 80px -40px #1c3fd666, var(--shadow); }
.dash { box-shadow: 0 40px 80px -40px #0b7a4266, var(--shadow); }
.team-row { transition: transform .25s; }
.team-row:hover { transform: translateX(6px); }
.team-row .st { display: inline-flex; align-items: center; gap: 6px; }
.tv-live { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--blue-soft); font-size: 13.5px; font-weight: 500; color: var(--blue-2); }
.tv-dots { display: inline-flex; gap: 4px; }
.tv-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dot 1s infinite ease-in-out; }
.tv-dots i:nth-child(2) { animation-delay: .15s; } .tv-dots i:nth-child(3) { animation-delay: .3s; }
.tv-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tv-bar i { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--grad-ai); animation: load 3.2s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.dash-bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; margin-top: 12px; padding: 12px 12px 10px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.dash-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #3fd08a, var(--green)); transform-origin: bottom; animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n) * .08s + .4s); }
.dash-bars i:last-child { background: var(--grad-dv); }
@keyframes grow { from { transform: scaleY(0); } }
.dash-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
.fx-toast { position: absolute; z-index: 2; left: -28px; bottom: -22px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; font-size: 13px; font-weight: 600;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -20px #0b7a4288; animation: bob 6s ease-in-out infinite; }
.fx-toast i { font-style: normal; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #2f9bff; color: #fff; font-size: 14px; }
.fx-toast small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.fx-toast.ai i { background: var(--blue); }
.t-dvpage .fx-toast { bottom: auto; top: -44px; left: -40px; }
.plan { overflow: visible; }
.plan.best { border: 0; padding: 27.5px; isolation: isolate; }
.plan.best::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--a), #2f5bff, #7a4dff, #ff5b1f, #2f5bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 5s linear infinite; }
.t-dvpage .plan.best::before { background: conic-gradient(from var(--a), #12a058, #2f9bff, #3fd08a, #12a058); }
.plan.best::after { content: "★ Eng ommabop"; position: absolute; top: -13px; right: 20px; padding: 5px 11px; border-radius: 999px; font: 600 12px/1 var(--font); color: #fff; background: var(--grad); box-shadow: 0 8px 18px -8px #7a4dffaa; }
.t-dvpage .plan.best::after { background: var(--grad-dv); box-shadow: 0 8px 18px -8px #12a058aa; }
.roles-list span { transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: default; }
.roles-list span:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.ubot-note { position: relative; overflow: hidden; }
.ubot-note::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff66 50%, transparent 65%); transform: translateX(-100%); animation: sweep 5s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 60%, 100% { transform: translateX(100%); } }
.order-sec .card { position: relative; overflow: hidden; }
.order-sec .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.t-dvpage .order-sec .card::before { background: var(--grad-dv); }

/* Scroll bilan paydo bo'lish (JS .fx-js qo'shadi) */
.fx-js .fx-up:not(.in) { opacity: 0; transform: translateY(26px); }
.fx-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }

/* Menyu: 6 ta havola o'rta ekranlarda bir qatorga sig'sin */
@media (min-width: 861px) { .nav-links a { white-space: nowrap; } }
@media (min-width: 861px) and (max-width: 1120px) { .nav-links a { padding: 8px 9px; font-size: 14px; } .nav-links a[href="#how"] { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-up:not(.in) { opacity: 1; transform: none; }
  .fx-tilt:hover { transform: none; }
}
@media (max-width: 1100px) {
  .fx-chip.c1 { left: -40px; } .fx-chip.c3 { left: -54px; } .fx-chip.c2 { right: -44px; } .fx-chip.c4 { right: -24px; }
}
@media (max-width: 1020px) {
  .platforms, .tgx { grid-template-columns: 1fr; }
  .ff-top { grid-template-columns: 1fr; gap: 40px; }
  .plat { grid-template-columns: .9fr 1.1fr; } .pa-grid { grid-template-columns: 1fr 1fr; }
  .tgx { gap: 30px; }
}
@media (max-width: 640px) {
  .plat { grid-template-columns: 1fr; } .plat-art { min-height: 230px; padding: 22px; }
  .fx-chip { font-size: 12px; padding: 8px 10px; }
  .fx-chip.c1 { left: -6px; top: 40px; } .fx-chip.c2 { right: -6px; top: 150px; }
  .fx-chip.c3, .fx-chip.c4 { display: none; }
  .tg-node { font-size: 11.5px; padding: 5px 8px 5px 5px; gap: 6px; border-radius: 11px; }
  .tg-node i { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
  .fx-toast { left: 8px; bottom: -26px; }
  .t-dvpage .fx-toast { left: 8px; top: -30px; }
  .hero .ticker { margin-bottom: 20px; }
  .catalog { grid-template-columns: 1fr; }
  .ff-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ff-cols > div:last-child { grid-column: 1 / -1; }
  .fx-foot { padding: 56px 0 96px; }
  .ff-bottom { justify-content: flex-start; }
}

/* ═══════════ v2: qo'shimcha kreativ qatlam ═══════════ */

/* Sichqoncha nuri */
.fx-cursor { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(closest-side, #7a4dff12, #2f5bff0a 45%, transparent); transform: translate(var(--cx, -999px), var(--cy, -999px)); transition: transform .18s ease-out; }

/* Tugmalar: magnit harakat silliq bo'lsin */
.btn { transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .18s, color .18s, border-color .18s, box-shadow .18s; }

/* Hero telefoni: 3D burilish, kartochkalar oldinga chiqadi */
.hero .phone { transform: perspective(1200px) rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)); transform-style: preserve-3d; transition: transform .35s ease-out; }
.hero .phone .fx-chip { translate: 0 0 60px; }

/* Katalog kartalari: raqam va nuqtali naqsh */
.catalog { counter-reset: pc; }
.pcard .pc-body { position: relative; }
.pcard .pc-body::before { counter-increment: pc; content: "0" counter(pc); position: absolute; right: 24px; top: 22px; font: 600 13px/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
.pcard .pc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(#ffffff2e 1px, transparent 1.3px); background-size: 16px 16px; mask: linear-gradient(180deg, #000, transparent 85%); -webkit-mask: linear-gradient(180deg, #000, transparent 85%); }

/* Katta harakatlanuvchi yozuv */
.fx-marquee { overflow: hidden; padding: 26px 0 30px; border-block: 1px solid var(--line); background: var(--paper); }
.fx-mq-in { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.fx-marquee:hover .fx-mq-in { animation-play-state: paused; }
.fx-mq-in span { font-size: clamp(2.6rem, 7.5vw, 6.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; white-space: nowrap; padding-right: .5em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink); display: inline-flex; align-items: center; gap: .5em; }
.fx-mq-in span::after { content: "✦"; -webkit-text-stroke: 0; color: var(--orange); font-size: .4em; }
.fx-mq-in span:nth-child(odd) { -webkit-text-stroke: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; }

/* FAQ: ochilganda gradient ramka */
details { border-width: 1.5px; transition: border-color .2s, box-shadow .25s, transform .25s; }
details:hover { transform: translateX(4px); }
details[open] { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; box-shadow: 0 20px 40px -26px #7a4dff66; }
.t-dvpage details[open] { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-dv) border-box; box-shadow: 0 20px 40px -26px #12a05866; }

/* Muallif kartasi: rangli to'r */
.about { background: radial-gradient(60% 120% at 100% 0, #2f5bff14, transparent), radial-gradient(50% 100% at 0 100%, #ff5b1f12, transparent), var(--surface); position: relative; overflow: hidden; }
.about::after { content: "AJ"; position: absolute; right: -10px; bottom: -40px; font-size: 13rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #11121410; pointer-events: none; }

/* Taqqoslash: eski usul va yangi usul */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.vs-col { border-radius: 26px; padding: 32px; display: grid; gap: 18px; align-content: start; }
.vs-col h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.vs-col h3 small { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vs-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.vs-col li::before { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 1px; }
.vs-col.old { background: var(--paper); border: 1.5px dashed var(--line-2); color: var(--muted); }
.vs-col.old h3 { color: var(--ink-2); } .vs-col.old h3 small { background: var(--red-soft); color: var(--red); }
.vs-col.old li { text-decoration: line-through; text-decoration-color: #d9342b55; }
.vs-col.old li::before { content: "✕"; background: var(--red-soft); color: var(--red); }
.vs-col.new { position: relative; background: var(--ink); color: #f3f1ea; box-shadow: 0 40px 80px -40px #2f5bffaa; overflow: hidden; isolation: isolate; }
.vs-col.new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--a), #2f5bff, #7a4dff, #ff5b1f, #2f5bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 6s linear infinite; }
.vs-col.new::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -140px; border-radius: 50%; z-index: -2; background: radial-gradient(closest-side, #2f5bff55, transparent); }
.vs-col.new h3 small { background: #ffffff14; color: #9fb4ff; }
.vs-col.new li::before { content: "✓"; background: var(--grad); color: #fff; }
.t-dvpage .vs-col.new { box-shadow: 0 40px 80px -40px #12a058aa; }
.t-dvpage .vs-col.new::before { background: conic-gradient(from var(--a), #12a058, #2f9bff, #3fd08a, #12a058); }
.t-dvpage .vs-col.new::after { background: radial-gradient(closest-side, #12a05555, transparent); }
.t-dvpage .vs-col.new li::before { background: var(--grad-dv); }
.t-dvpage .vs-col.new h3 small { color: #8ee6b8; }
.vs-mid { align-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: var(--grad); box-shadow: 0 14px 30px -12px #7a4dffaa; animation: bob 5s ease-in-out infinite; }
.t-dvpage .vs-mid { background: var(--grad-dv); }

/* Telefonda pastki tezkor panel */
.fx-dock { display: none; }
@media (max-width: 640px) {
  .fx-dock { display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 8px; border-radius: 20px;
    background: #ffffffd9; border: 1px solid #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -18px #11121466;
    transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .fx-dock.show { transform: none; }
  .fx-dock .btn { flex: 1; }
  .vs { grid-template-columns: 1fr; }
  .vs-mid { justify-self: center; margin: -8px 0; width: 52px; height: 52px; font-size: 15px; }
  .vs-col { padding: 24px 20px; }
  .fx-mq-in span { -webkit-text-stroke-width: 1px; }
  .about::after { font-size: 8rem; }
}
@media (min-width: 641px) and (max-width: 860px) { .vs { grid-template-columns: 1fr; } .vs-mid { justify-self: center; } }