/* Lino product page: lockup, interactive desktop (.ln-*), steps, specs. Prefix ln- on purpose (no ad-/banner/promo names). */
.ln-lockup { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin: 0 auto 22px; }
.ln-lockup img { width: clamp(72px, 9vw, 112px); height: auto; border-radius: 26%; box-shadow: 0 24px 60px rgba(110, 80, 255, .45); }
.ln-lockup span { font: 800 clamp(48px, 8vw, 92px)/1 var(--font-h); letter-spacing: -.03em; }
html[lang="ar"] .ln-lockup span { font-family: Cairo, var(--font-h); letter-spacing: 0; }
html[data-theme="light"] .ln-lockup span { color: var(--silver); }
.ln-free { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font: 700 13px var(--font-h); letter-spacing: .08em; text-transform: uppercase; color: #06231a; background: linear-gradient(120deg, #7cf0c4, #22d3ee); margin-bottom: 18px; }
.ln-trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.ln-trust > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font: 600 13.5px var(--font-b, inherit); background: var(--glass); border: 1px solid var(--line); color: var(--silver); }
.ln-trust svg { width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- desktop simulation ---------- */
.ln-desk { position: relative; height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); direction: ltr; text-align: start; color: #f2f5fd; font: 14px/1.45 "Segoe UI", Cairo, system-ui, sans-serif;
  background: radial-gradient(600px 400px at 85% 0%, rgba(143, 91, 255, .45), transparent 70%), radial-gradient(500px 400px at 10% 100%, rgba(61, 123, 255, .4), transparent 70%), #0d1230; }
.ln-desk * { box-sizing: border-box; }
.ln-rope { position: absolute; top: 20px; left: 8%; right: 8%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #b28cff, #22d3ee, #b28cff, transparent); box-shadow: 0 0 14px rgba(143, 91, 255, .7); z-index: 2; }
.ln-line { position: absolute; top: 10px; left: 0; right: 0; display: flex; gap: 14px; justify-content: center; padding-top: 4px; z-index: 3; min-height: 130px; }
.ln-card { position: relative; width: 120px; height: 84px; margin-top: 10px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .35); cursor: grab; user-select: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(143, 91, 255, .35);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), opacity .25s; transform: rotate(var(--r, 0deg)); animation: ln-drop .45s cubic-bezier(.2, .9, .3, 1.3), ln-sway 5s ease-in-out infinite; animation-delay: 0s, var(--d, 0s); }
.ln-card:hover { transform: translateY(8px) rotate(0deg) scale(1.04); }
.ln-card:active { cursor: grabbing; }
.ln-card::before, .ln-card::after { content: ""; position: absolute; top: -14px; width: 9px; height: 22px; border-radius: 5px; background: linear-gradient(#ff8a7a, #e04a3a); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.ln-card::before { left: 22px; } .ln-card::after { right: 22px; }
.ln-card .x { position: absolute; top: -9px; inset-inline-end: -9px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1a2148; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; z-index: 2; }
.ln-card:hover .x { opacity: 1; }
.ln-card.gone { opacity: 0; transform: translateY(-30px) scale(.8); }
@keyframes ln-drop { from { transform: translateY(-80px) rotate(0); opacity: 0; } }
@keyframes ln-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@media (prefers-reduced-motion: reduce) { .ln-card { animation: none; } }
.ln-card i { position: absolute; left: 10px; right: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); }
.ln-card i:nth-child(1) { top: 16px; width: 55%; } .ln-card i:nth-child(2) { top: 30px; right: 30px; } .ln-card i:nth-child(3) { top: 44px; right: 50px; background: rgba(255, 255, 255, .35); }
.ln-bar { position: absolute; inset-inline-start: 18px; bottom: 18px; display: flex; gap: 10px; align-items: center; z-index: 4; }
.ln-btn { padding: 10px 18px; border-radius: 11px; border: 0; color: #fff; font: 600 14px inherit; font-family: inherit; cursor: pointer; background: linear-gradient(135deg, #3d7bff, #8f5bff); box-shadow: 0 6px 20px rgba(110, 80, 255, .4); }
.ln-btn:hover { filter: brightness(1.1); } .ln-btn:active { transform: scale(.97); }
.ln-tag { font-size: 11.5px; color: #ffd9a0; background: rgba(255, 180, 76, .12); border: 1px solid rgba(255, 180, 76, .3); padding: 3px 10px; border-radius: 999px; }
.ln-chat { position: absolute; inset-inline-end: 18px; bottom: 18px; width: min(330px, 48%); height: 230px; border-radius: 14px; background: rgba(14, 20, 40, .55); border: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.ln-chat.over { border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.ln-chat h5 { margin: 0; padding: 10px 14px; font: 600 13px inherit; font-family: inherit; border-bottom: 1px solid rgba(255, 255, 255, .1); letter-spacing: 0; }
.ln-msgs { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; justify-content: flex-end; }
.ln-msgs .m { align-self: flex-start; max-width: 80%; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .09); font-size: 13px; }
.ln-msgs .me { align-self: flex-end; background: rgba(143, 91, 255, .35); }
.ln-msgs .me .pic { width: 90px; height: 58px; border-radius: 8px; margin-top: 4px; }
.ln-toast { position: absolute; top: 150px; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: 86%; padding: 10px 18px; border-radius: 12px; z-index: 6; background: rgba(20, 70, 50, .95); border: 1px solid rgba(70, 210, 138, .5); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation: ln-in .25s ease; pointer-events: none; }
@keyframes ln-in { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 700px) { .ln-desk { height: 520px; } .ln-chat { width: calc(100% - 36px); inset-inline-start: 18px; bottom: 70px; height: 170px; } .ln-card { width: 84px; height: 60px; } .ln-line { gap: 10px; } }

/* ---------- steps + specs ---------- */
.ln-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } .ln-steps3 > div { padding: 28px; } .ln-steps3 .n { font: 800 54px/1 var(--font-h); background: linear-gradient(120deg, #9d86ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.ln-steps3 h4 { font-size: 22px; margin-bottom: 8px; } .ln-steps3 p { color: var(--muted); }
.ln-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 30px; padding: 10px 28px; } .ln-spec div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; } .ln-spec b { color: var(--silver); font-weight: 600; } .ln-spec span { color: var(--muted); text-align: end; }
@media (max-width: 900px) { .ln-steps3, .ln-spec { grid-template-columns: 1fr; } }

/* ---------- tabs and extra screens ---------- */
.ln-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ln-tabs button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--silver); font: 600 14px inherit; font-family: inherit; cursor: pointer; }
.ln-tabs button.on { background: linear-gradient(135deg, #3d7bff, #8f5bff); color: #fff; border-color: transparent; }
.ln-hint { position: absolute; top: 150px; left: 0; right: 0; text-align: center; color: #a5b1cd; font-size: 13px; pointer-events: none; }
.ln-btn:disabled { opacity: .5; cursor: wait; }
.ln-prev { position: absolute; top: 170px; left: 50%; transform: translateX(-50%); width: 300px; border-radius: 14px; overflow: hidden; z-index: 5; background: rgba(20, 28, 60, .85); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.ln-prev .hd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: move; touch-action: none; } .ln-prev .sp { flex: 1; }
.ln-prev button { border: 0; border-radius: 8px; padding: 4px 10px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; font: 600 12px inherit; font-family: inherit; } .ln-prev button.on { background: #8f5bff; }
.ln-prev .im { height: 170px; position: relative; } .ln-prev .im i { position: absolute; left: 18px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .6); } .ln-prev .im i:nth-child(1) { top: 28px; width: 50%; } .ln-prev .im i:nth-child(2) { top: 50px; width: 70%; } .ln-prev .im i:nth-child(3) { top: 72px; width: 40%; background: rgba(255, 255, 255, .35); }
.ln-ocr { position: absolute; top: 160px; left: 5%; right: 5%; bottom: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ln-ocr .shot { position: relative; border-radius: 12px; background: #f4f6fb; color: #1a2148; padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; overflow: hidden; } .ln-ocr .shot .ttl { font-weight: 700; font-size: 16px; }
.ln-ocr .scan { position: absolute; left: 0; right: 0; height: 36px; top: -40px; background: linear-gradient(transparent, rgba(143, 91, 255, .45), transparent); } .ln-ocr .shot.scanning .scan { animation: ln-scan 1.2s linear; } @keyframes ln-scan { to { top: 100%; } }
.ln-ocr .out { border-radius: 12px; padding: 14px; background: rgba(14, 20, 40, .55); border: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 10px; } .ln-ocr h5 { margin: 0; font: 600 13px inherit; font-family: inherit; letter-spacing: 0; color: #a5b1cd; }
.ln-ocr pre { flex: 1; margin: 0; white-space: pre-wrap; font: 14px/1.7 inherit; font-family: inherit; color: #d8f5e6; text-align: start; }
.ln-menu { position: absolute; top: 160px; inset-inline-start: 50%; transform: translateX(-50%); width: min(330px, 86%); padding: 8px; border-radius: 12px; z-index: 5; background: rgba(24, 30, 62, .94); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); font-size: 13.5px; }
html[dir="rtl"] .ln-menu, html[lang="ar"] .ln-menu { transform: translateX(-50%); }
.ln-menu .it { padding: 7px 12px 7px 30px; border-radius: 7px; cursor: pointer; position: relative; } .ln-menu .it:hover { background: rgba(143, 91, 255, .28); }
.ln-menu .ck::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; border: 1.5px solid rgba(255, 255, 255, .4); } .ln-menu .ck.on::before { background: #46d28a; border-color: #46d28a; }
.ln-menu .sep { height: 1px; margin: 5px 6px; background: rgba(255, 255, 255, .12); } .ln-menu .sub b { display: block; padding: 4px 12px; font-size: 12px; color: #a5b1cd; font-weight: 600; }
@media (max-width: 700px) { .ln-ocr { grid-template-columns: 1fr; bottom: 60px; } .ln-hint { display: none; } .ln-prev { top: 150px; }.ln-menu { top: 150px; } }