/* Home page: "What are you making today?" job cards, the "Every language" demo, template language tabs,
   the nav language picker and the right-to-left (Arabic) overrides for the shared home page. Uses the tokens
   from app.css / landing.css. */

/* ---------- nav language picker ---------- */
.nav-lang { display: inline-flex; align-items: center; margin-inline-end: 10px; color: var(--text-2, var(--muted)); }
.nav-lang .lang-switch select { max-width: 132px; }
@media (max-width: 640px) { .nav-lang { display: none; } }

/* ---------- job cards ---------- */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.job { display: flex; flex-direction: column; border: 1px solid var(--text); border-radius: 8px; background: var(--panel); overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.job:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text); }
.jv { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid var(--text); background: var(--bg); display: grid; place-items: center; }
.jt { padding: 16px 20px 20px; }
.jk { display: inline-block; font: 700 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--accent); border: 1px solid var(--text); margin-bottom: 10px; }
.jk em { font-style: normal; }
.jt h3 { font-size: 19px; letter-spacing: -0.02em; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.jt h3 em { font: 700 9.5px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 3px; background: var(--text); color: var(--bg); letter-spacing: .05em; }
.jt p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (max-width: 980px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .jobs { grid-template-columns: 1fr; } .jv { height: 180px; } }

/* 1 · describe it */
.j-design .jv { padding: 18px; display: flex; flex-direction: column; gap: 14px; place-items: initial; background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--text) 6%, transparent) 23px 24px), var(--bg); }
.jp { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--text); border-radius: 8px; background: var(--field, #fff); box-shadow: 3px 3px 0 var(--accent); font: 500 13px var(--font); }
.jp-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: j-type 6s steps(40) infinite; }
@keyframes j-type { 0% { max-width: 0; } 45%, 100% { max-width: 100%; } }
.jcards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jcards i { display: grid; place-items: center; border-radius: 6px; background: var(--c); border: 1px solid var(--text); animation: j-pop 6s ease-out infinite both; }
.jcards i:nth-child(2) { animation-delay: .15s; } .jcards i:nth-child(3) { animation-delay: .3s; }
.jcards b { font: 800 22px var(--display); color: #fff; mix-blend-mode: difference; letter-spacing: -0.03em; }
@keyframes j-pop { 0%, 48% { opacity: 0; transform: translateY(10px) scale(.94); } 58%, 100% { opacity: 1; transform: none; } }

/* 2 · long video → shorts */
.j-shorts .jv { background: #17150f; gap: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.jstrip { position: relative; display: flex; gap: 3px; height: 44px; width: 100%; }
.jstrip i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #3a3730, #26241f); }
.jstrip i:nth-child(2), .jstrip i:nth-child(5), .jstrip i:nth-child(7) { background: #ffd60a; }
.jph { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #fff; animation: j-scan 4s linear infinite; }
@keyframes j-scan { from { left: 0; } to { left: 100%; } }
.jclips { display: flex; gap: 12px; justify-content: center; }
.jclips span { position: relative; width: 58px; aspect-ratio: 9/16; border-radius: 6px; background: linear-gradient(160deg, #ffd60a, #ff7a59); border: 1px solid #f3f0e8; animation: j-rise 4s ease-out infinite both; }
.jclips span:nth-child(2) { animation-delay: .25s; background: linear-gradient(160deg, #9ee7ff, #2f6690); } .jclips span:nth-child(3) { animation-delay: .5s; background: linear-gradient(160deg, #f6d6dc, #c84f78); }
.jclips b { position: absolute; top: -9px; right: -9px; font: 700 11px var(--mono); padding: 2px 5px; border-radius: 4px; background: #f3f0e8; color: #17150f; }
@keyframes j-rise { 0%, 30% { opacity: 0; transform: translateY(16px); } 45%, 100% { opacity: 1; transform: none; } }

/* 3 · every language */
.j-lang .jv { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); gap: 14px; display: flex; flex-direction: column; justify-content: center; }
.jcap { position: relative; width: 82%; height: 52px; }
.jcap span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 6px 12px; border-radius: 8px; background: #17150f; color: #fff; font: 800 16px/1.2 var(--display); letter-spacing: -0.01em; opacity: 0; animation: j-cycle 12.5s infinite; }
.jcap span[lang="ar"] { font-family: 'Cairo', var(--display); letter-spacing: 0; }
.jcap span:nth-child(2) { animation-delay: 2.5s; } .jcap span:nth-child(3) { animation-delay: 5s; } .jcap span:nth-child(4) { animation-delay: 7.5s; } .jcap span:nth-child(5) { animation-delay: 10s; }
@keyframes j-cycle { 0% { opacity: 0; transform: translateY(6px); } 3%, 18% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; transform: translateY(-6px); } }
.jchips { display: flex; gap: 6px; }
.jchips b { font: 700 11px var(--mono); padding: 3px 7px; border-radius: 4px; border: 1px solid var(--text); background: var(--bg); animation: j-chip 12.5s steps(1) infinite; }
.jchips b:nth-child(2) { animation-delay: 2.5s; } .jchips b:nth-child(3) { animation-delay: 5s; } .jchips b:nth-child(4) { animation-delay: 7.5s; } .jchips b:nth-child(5) { animation-delay: 10s; }
@keyframes j-chip { 0%, 19% { background: var(--text); color: var(--bg); } 20%, 100% { background: var(--bg); color: var(--text); } }

/* 4 · product → ad */
.j-product .jv { background: #f6d6dc; }
.jprod { position: relative; width: 150px; height: 170px; }
.jbottle { position: absolute; left: 50%; bottom: 10px; width: 64px; height: 120px; margin-left: -32px; border-radius: 14px 14px 10px 10px; background: linear-gradient(90deg, #2f6690, #4f8ec0 45%, #2f6690); border: 1px solid #17150f; box-shadow: 10px 12px 0 rgba(23,21,15,.18); animation: j-float 4s ease-in-out infinite; }
.jbottle::before { content: ''; position: absolute; left: 18px; top: -22px; width: 26px; height: 24px; border-radius: 5px 5px 0 0; background: #17150f; }
.jbottle::after { content: ''; position: absolute; left: 10px; right: 10px; top: 40px; height: 34px; border-radius: 4px; background: #f3f0e8; }
.jtag { position: absolute; right: -14px; top: 18px; font: 800 18px var(--display); padding: 6px 10px; border-radius: 999px; background: #ffd60a; border: 1px solid #17150f; transform: rotate(10deg); animation: j-pop 4s ease-out infinite both; }
.jbuy { position: absolute; left: -24px; right: -24px; bottom: -18px; text-align: center; font: 700 12px var(--mono); padding: 7px; border-radius: 6px; background: #17150f; color: #ffd60a; clip-path: inset(0 100% 0 0); animation: j-wipe 4s ease-in-out infinite; }
@keyframes j-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes j-wipe { 0%, 35% { clip-path: inset(0 100% 0 0); } 55%, 100% { clip-path: inset(0 0 0 0); } }

/* 5 · captions that pop */
.j-caps .jv { background: #2f6690; }
.jwords { max-width: 80%; text-align: center; font: 900 26px/1.15 var(--display); color: #fff; text-transform: uppercase; letter-spacing: -0.02em; }
.jwords span { display: inline-block; padding: 0 3px; border-radius: 4px; animation: j-word 3.6s steps(1) infinite; }
.jwords span:nth-child(1) { animation-delay: 0s; } .jwords span:nth-child(2) { animation-delay: .6s; } .jwords span:nth-child(3) { animation-delay: 1.2s; } .jwords span:nth-child(4) { animation-delay: 1.8s; } .jwords span:nth-child(5) { animation-delay: 2.4s; } .jwords span:nth-child(6) { animation-delay: 3s; }
@keyframes j-word { 0% { background: #ffd60a; color: #17150f; transform: scale(1.08); } 16%, 100% { background: transparent; color: #fff; transform: none; } }

/* 6 · screen recorder */
.j-rec .jv { background: #17150f; }
.jscr { position: relative; width: 78%; aspect-ratio: 16/10; border-radius: 6px; background: #f3f0e8; overflow: hidden; animation: j-zoom 6s ease-in-out infinite; transform-origin: 70% 60%; }
.jbar { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: #dcd6c6; }
.jl { position: absolute; left: 10%; height: 6%; width: 60%; border-radius: 3px; background: #cbc4b0; }
.jl:nth-of-type(2) { top: 24%; } .jl.s { top: 38%; width: 40%; } .jl:nth-of-type(4) { top: 52%; }
.jzoom { position: absolute; left: 52%; top: 48%; width: 34%; height: 26%; border-radius: 4px; background: #ffd60a; border: 1px solid #17150f; }
.jcur { position: absolute; left: 66%; top: 58%; width: 0; height: 0; border-left: 7px solid #17150f; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: rotate(-30deg); animation: j-cur 6s ease-in-out infinite; }
.jcam { position: absolute; right: 5%; bottom: 7%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #e0a77f 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, #17150f 0 45%, #2f6690 46%); border: 2px solid #fff; }
@keyframes j-zoom { 0%, 25% { transform: scale(1); } 45%, 75% { transform: scale(1.6); } 95%, 100% { transform: scale(1); } }
@keyframes j-cur { 0% { left: 30%; top: 30%; } 25%, 100% { left: 66%; top: 58%; } }

@media (prefers-reduced-motion: reduce) { .job * { animation: none !important; } .jcap span:first-child { opacity: 1; } .jp-t { max-width: none; } .jbuy { clip-path: none; } }

/* ---------- every language ---------- */
.lx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lx-copy h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.035em; line-height: 1.05; margin: 10px 0 14px; }
.lx-copy > p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 0 22px; }
.lx-stats { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--text); border-inline-start: 1px solid var(--text); }
.lx-stats li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-inline-end: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.lx-stats b { font: 800 34px/1 var(--display); letter-spacing: -0.04em; }
.lx-stats span { font-size: 13.5px; color: var(--muted); }
.lx-ui { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.lx-ui span { font: 600 12.5px var(--font); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-2, var(--border)); background: var(--panel); }
.lx-ui span[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Cairo', var(--font); }
.lx-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lx-phone { position: relative; width: min(300px, 78vw); aspect-ratio: 9/16; border-radius: 30px; border: 1px solid var(--text); background: #17150f; padding: 10px; box-shadow: 14px 14px 0 var(--accent); }
.lx-screen { position: absolute; inset: 10px; border-radius: 22px; overflow: hidden; background: #17150f; }
.lx-screen .tpl-prev { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; transition: opacity .35s; }
.lx-screen .tpl-prev.out { opacity: 0; }
.lx-screen .tpl-canvas { width: 100%; height: 100%; object-fit: cover; }
.lx-cap { position: absolute; left: 22px; right: 22px; bottom: 26%; text-align: center; font: 800 15px/1.3 var(--display); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; transition: opacity .3s; }
.lx-cap span { background: rgba(15,14,12,.72); padding: 4px 8px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-cap[lang="ar"] { font-family: 'Cairo', var(--display); }
.lx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px; }
.lx-chips button { font: 600 12.5px var(--font); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--text); background: var(--panel); color: var(--text); cursor: pointer; }
.lx-chips button[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Cairo', var(--font); }
.lx-chips button.on { background: var(--text); color: var(--bg); }
.lx-voice { font: 600 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; min-height: 18px; }
.lx-voice i { display: inline-flex; gap: 2px; align-items: center; height: 14px; }
.lx-voice i b { width: 3px; border-radius: 2px; background: var(--text); animation: lx-bar .9s ease-in-out infinite alternate; }
@keyframes lx-bar { from { height: 3px; } to { height: 14px; } }
@media (max-width: 900px) { .lx { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .lx-stats { grid-template-columns: 1fr; } }

/* ---------- template language tabs ---------- */
.tw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.tw-tabs button { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--font); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--text); background: var(--panel); color: var(--text); cursor: pointer; }
.tw-tabs button small { font: 600 11px var(--mono); opacity: .7; }
.tw-tabs button.on { background: var(--text); color: var(--bg); }
.tw-tabs button[lang="ar"] { font-family: 'IBM Plex Sans Arabic', 'Cairo', var(--font); }

/* ---------- right to left (the Arabic home page) ---------- */
html[dir="rtl"] body { line-height: 1.7; }
html[dir="rtl"] .logo, html[dir="rtl"] .price, html[dir="rtl"] .lp-stats b, html[dir="rtl"] .lx-stats b, html[dir="rtl"] .step::before { font-family: 'Bricolage Grotesque', sans-serif; }
html[dir="rtl"] .pill, html[dir="rtl"] .eyebrow, html[dir="rtl"] .hero-note, html[dir="rtl"] .hero-live, html[dir="rtl"] .tool-card .go, html[dir="rtl"] .tpl-card > span, html[dir="rtl"] .price-card .tag, html[dir="rtl"] .pseg button, html[dir="rtl"] .cp-lbl, html[dir="rtl"] .lp-ticker .lbl, html[dir="rtl"] .v-duck .ln, html[dir="rtl"] .bx h3 em, html[dir="rtl"] .v-green .lbl, html[dir="rtl"] .v-testi .inbox small, html[dir="rtl"] .jk, html[dir="rtl"] .mg-txt h3 em, html[dir="rtl"] .jt h3 em { font: 600 13px 'IBM Plex Sans Arabic', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .hero h1 { letter-spacing: -0.01em; line-height: 1.2; }
html[dir="rtl"] .sec-head h2, html[dir="rtl"] .final h2, html[dir="rtl"] .lp-band h2, html[dir="rtl"] .lx-copy h2 { letter-spacing: -0.01em; line-height: 1.3; }
html[dir="rtl"] .step h3, html[dir="rtl"] .feature h3, html[dir="rtl"] .tool-card b, html[dir="rtl"] .tpl-card b, html[dir="rtl"] .faq summary, html[dir="rtl"] .bx h3, html[dir="rtl"] .jt h3, html[dir="rtl"] .mg-txt h3 { letter-spacing: 0; }
html[dir="rtl"] .feature::after { right: auto; left: 24px; }
html[dir="rtl"] .features, html[dir="rtl"] .tool-grid, html[dir="rtl"] .lp-stats { border-left: 0; border-right: 1px solid var(--border-2); }
html[dir="rtl"] .feature, html[dir="rtl"] .tool-card, html[dir="rtl"] .lp-stats div { border-right: 0; border-left: 1px solid var(--border-2); }
html[dir="rtl"] .lp-ticker .lbl { border-right: 0; border-left: 1px solid var(--text); padding: 0 24px 0 18px; }
html[dir="rtl"] .lp-track a::after { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .price-card.hl, html[dir="rtl"] .bx:hover, html[dir="rtl"] .job:hover, html[dir="rtl"] .mg-bx:hover { box-shadow: -6px 6px 0 var(--text); transform: translate(2px, -2px); }
html[dir="rtl"] .price-card .tag { left: auto; right: 24px; }
html[dir="rtl"] .faq summary::after { margin-right: auto; margin-left: 0; }
html[dir="rtl"] .cp-phone, html[dir="rtl"] .lx-phone { box-shadow: -14px 14px 0 var(--accent); }
html[dir="rtl"] .jclips b { right: auto; left: -9px; }

/* Longer languages (German, Indonesian…) need the nav to stay on one line. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1240px) { .nav-links a[href="#tour"], .nav-links a[href="#faq"] { display: none; } }
@media (max-width: 1060px) and (min-width: 641px) { .nav-links a[href="/tools"] { display: none; } }