/* Smooth-scroll (Lenis) + creative layers */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--cyan), var(--coral)); }
html[dir="rtl"] .progress { transform-origin: 100% 50%; }
.cursor-glow { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(122, 92, 255, .20), rgba(34, 211, 238, .08) 45%, transparent 68%); opacity: 0; transition: opacity .4s; will-change: transform; }
@media (hover: none) { .cursor-glow { display: none; } }

/* split-word reveal for headings */
.sw-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sw-w > i { display: inline-block; font-style: normal; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.split.in .sw-w > i { transform: none; }
.no-js .sw-w > i { transform: none; }

/* marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: rgba(255, 255, 255, .025); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 52px; width: max-content; animation: mq 38s linear infinite; }
.marquee span { font: 700 clamp(20px, 3vw, 34px) var(--font-h); letter-spacing: .06em; color: rgba(230, 232, 240, .55); white-space: nowrap; display: inline-flex; align-items: center; gap: 52px; }
.marquee span::after { content: "✦"; color: var(--violet); font-size: .6em; }
@keyframes mq { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee .track { animation-direction: reverse; }

/* Horizontal journey (pinned) */
.journey { padding: 0; }
.journey .pin { height: 100vh; height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.journey .jhead { padding-bottom: 28px; }
.journey .track { display: flex; gap: 28px; padding-inline: max(16px, calc((100vw - 1200px) / 2)); width: max-content; will-change: transform; }
.panel { width: min(78vw, 760px); flex: none; padding: 34px; display: grid; gap: 14px; align-content: start; min-height: 420px; position: relative; overflow: hidden; }
.panel .num { font: 800 clamp(70px, 10vw, 130px)/0.85 var(--font-h); color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); letter-spacing: -.04em; }
.panel h3 { font-size: clamp(30px, 4vw, 52px); }
.panel p { color: var(--muted); max-width: 46ch; }
.panel .pl { height: 84px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; mix-blend-mode: screen; }
html[dir="rtl"] .panel .pl { object-position: right center; }
.panel .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .35; right: -120px; bottom: -160px; background: var(--g, var(--violet)); pointer-events: none; }
.panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panel li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 14px; color: var(--silver); border: 1px solid var(--line); }
.jbar { margin-top: 26px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); width: min(1200px, calc(100% - 32px)); margin-inline: auto; overflow: hidden; }
.jbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .journey .pin { height: auto; padding: 60px 0; }
  .journey .track { flex-direction: column; width: auto; padding-inline: 16px; }
  .panel { width: auto; min-height: 0; }
  .jbar { display: none; }
}

/* hero extras */
.hero .badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font: 500 14px var(--font-b); color: var(--silver); margin-bottom: 26px; }
.hero .badge i { width: 8px; height: 8px; border-radius: 50%; background: #5cf0b6; box-shadow: 0 0 12px #5cf0b6; }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 44px; color: var(--muted); font-size: 14px; }
.scroll-cue .m { width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 14px; position: relative; }
.scroll-cue .m::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 3px; background: var(--cyan); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.stats .glass { padding: 24px; text-align: center; }
.stats b { display: block; font: 800 clamp(34px, 4.4vw, 52px) var(--font-h); }
.stats span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* tilt cards */
.tilt { transform-style: preserve-3d; will-change: transform; }
.shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .12), transparent 45%); opacity: 0; transition: opacity .3s; }
.glass:hover > .shine, .tilt:hover > .shine { opacity: 1; }
.glass { position: relative; }

/* feature tabs (product pages) */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.fgrid .fcard { grid-column: auto; }
@media (max-width: 980px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

.formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; justify-content: center; }
.formats span { padding: 6px 14px; border-radius: 10px; font: 600 13px var(--font-h); background: var(--glass); border: 1px solid var(--line); color: var(--silver); }

.appwin { position: relative; }
.cmp .lab { pointer-events: none; }
.pcard .tag { align-self: flex-start; }
.pcard .art { background: radial-gradient(120% 120% at 50% 0%, #1a1f6b 0%, #070a2a 70%); }
#why { padding-top: 40px; }
.pcard .art img, .panel .pl, .phero .plogo { mix-blend-mode: normal; }
.imgbox { min-height: 430px; }
.imgbox img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-height: none; max-width: none; object-fit: contain; border-radius: 6px; transition: filter .15s, transform .25s, opacity .5s; }
html[dir="rtl"] .btn svg:has(path[d^="M5 12h14"]) { transform: scaleX(-1); }

/* iPhone: let the background run under the browser bars and keep content above the home indicator */
body { padding-bottom: env(safe-area-inset-bottom); }

/* currency picker (header + footer) */
.cur-sel { appearance: none; -webkit-appearance: none; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14px var(--font-b); padding: 0 12px; cursor: pointer; }
.cur-sel option { color: #111; }
.fine-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; } .fine-row .fine { margin: 0; }
.cur-foot { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; } .cur-foot .cur-sel { min-width: 190px; border-radius: 12px; }
@media (max-width: 900px) { .nav .bar .cur-sel { padding: 0 8px; min-width: 62px; } }