/* iQlinic home v4 — hero (live product in a hand-rotatable 3D device) + sections. Tokens come from site-v4.css */
.page{font-family:var(--fa); color:var(--ink); background:var(--bg); min-height:100%; overflow-x:hidden; position:relative; line-height:1.6; padding-top:var(--hdr-h)}
.aura{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aura::before,.aura::after{content:""; position:absolute; border-radius:50%; filter:blur(80px); opacity:.55}
.aura::before{width:760px; height:760px; top:-260px; inset-inline-start:-200px; background:radial-gradient(circle,rgba(70,140,255,.45),transparent 62%)}
.aura::after{width:620px; height:620px; top:240px; inset-inline-end:-220px; background:radial-gradient(circle,rgba(124,107,255,.35),transparent 62%)}
.wrap{max-width:1280px; margin:0 auto; padding-inline:26px; position:relative; z-index:2}
.page a{color:inherit; text-decoration:none}
.btn{font-family:var(--fa); font-weight:700; font-size:15px; border-radius:12px; padding:12px 22px; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:10px; transition:transform .15s, box-shadow .25s, filter .25s}
.btn-pri{background:linear-gradient(90deg,#2F7BFF,#4FB1FF); color:#fff; box-shadow:0 10px 30px -8px rgba(60,140,255,.7), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-pri:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn-ghost{background:rgba(20,32,58,.55); color:var(--ink); border-color:var(--line); backdrop-filter:blur(8px)}
/* hero */
.hero{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; padding-block:44px 40px; min-height:min(86vh,800px); cursor:grab}
.hero.drag{cursor:grabbing}
.copy{text-align:start}
.ey{font-family:var(--lat); font-size:11px; letter-spacing:.32em; color:var(--ink-3); font-weight:600; display:flex; align-items:center; gap:10px}
.ey::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue)}
h1{font-size:clamp(32px,4.2vw,54px); line-height:1.18; font-weight:800; margin:16px 0 0; letter-spacing:-.01em; text-wrap:balance}
h1 .g{background:linear-gradient(90deg,#6EB7FF,#4F8DFF 60%,#8C7BFF); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{margin-top:16px; color:var(--ink-2); font-size:clamp(15px,1.4vw,17.5px); max-width:32em}
.sub b{color:var(--ink); font-weight:700}
.mods{display:grid; gap:8px; margin-top:24px}
.mod{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:13px; border:1px solid var(--line); background:rgba(14,24,44,.5); cursor:pointer; text-align:start; transition:border-color .2s, background .2s, transform .15s; position:relative; overflow:hidden}
.mod:hover{border-color:rgba(120,170,255,.45); transform:translateX(-2px)}
.mod .k{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(60,120,255,.14); color:var(--cyan); flex:0 0 auto}
.mod .t{display:block; font-weight:700; font-size:14.5px}
.mod .d{display:block; font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.5}
.mod .bar{position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--cyan),var(--violet)); opacity:0; transition:opacity .25s}
.mod.on{border-color:rgba(57,208,224,.6); background:rgba(20,40,70,.7); box-shadow:0 0 0 1px rgba(57,208,224,.15) inset, 0 12px 30px -16px rgba(57,208,224,.5)}
.mod.on .bar{opacity:1}
.mod .prog{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--cyan); opacity:.8}
.mod.on .prog{animation:prog 6.5s linear forwards}
@keyframes prog{to{width:100%}}
.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

/* 3D device */
.stage{position:relative; perspective:1600px; display:grid; place-items:center; min-height:520px; --acc:#39D0E0; --acc2:#4EA3FF; --accr:57,208,224}
/* perspective grid floor — the device hovers above a data plane */
.grid{position:absolute; left:-20%; right:-20%; bottom:-6%; height:62%; z-index:0; pointer-events:none; transform:perspective(900px) rotateX(72deg); transform-origin:50% 100%;
  background:linear-gradient(rgba(var(--accr),.28) 1px,transparent 1px) 0 0/100% 34px, linear-gradient(90deg,rgba(var(--accr),.28) 1px,transparent 1px) 0 0/34px 100%;
  -webkit-mask:radial-gradient(60% 90% at 50% 100%, #000 20%, transparent 75%); mask:radial-gradient(60% 90% at 50% 100%, #000 20%, transparent 75%); animation:gridflow 6s linear infinite; transition:background .6s}
@keyframes gridflow{to{background-position:0 34px, 0 0}}
/* ambient halo tinted by the active module */
.halo{position:absolute; width:120%; height:120%; left:-10%; top:-10%; z-index:0; pointer-events:none; background:radial-gradient(45% 45% at 50% 50%, rgba(var(--accr),.3), transparent 70%); filter:blur(30px); transition:background .8s; animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.7; transform:scale(1.04)}}
/* data streams flowing INTO the device from behind */
.streams{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 80%); mask:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 80%)}
.streams i{position:absolute; height:1px; width:160px; left:-160px; background:linear-gradient(90deg,transparent,rgba(var(--accr),.9),transparent); opacity:0; animation:stream var(--du,4s) linear var(--de,0s) infinite; top:var(--y)}
@keyframes stream{0%{transform:translateX(0);opacity:0}15%{opacity:.9}70%{opacity:.6}100%{transform:translateX(calc(100vw + 200px));opacity:0}}
/* reflection pool under the device */
.pool{position:absolute; left:50%; bottom:2%; width:72%; height:90px; transform:translateX(-50%); z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 60% at 50% 40%, rgba(var(--accr),.42), rgba(var(--accr),.08) 55%, transparent 75%); filter:blur(10px); transition:background .8s; animation:pool 3.6s ease-in-out infinite}
@keyframes pool{50%{transform:translateX(-50%) scaleX(.92); opacity:.75}}

.device{position:relative; width:min(100%,600px); aspect-ratio:16/10.4; transform-style:preserve-3d; transform:rotateX(8deg) rotateY(-18deg); will-change:transform; z-index:1}
.frame{position:absolute; inset:0; border-radius:22px; background:linear-gradient(160deg,#1b2740,#0a1222); box-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 60px -20px rgba(70,140,255,.35); transform:translateZ(0)}
.frame::after{content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none; background:radial-gradient(220px 160px at var(--lx,30%) var(--ly,20%), rgba(255,255,255,.14), transparent 70%); mix-blend-mode:screen}
.frame::before{content:""; position:absolute; inset:0; border-radius:22px; padding:1.5px; background:conic-gradient(from var(--ang,0deg), rgba(255,255,255,.05), rgba(var(--accr),.9) 12%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.04) 70%, rgba(var(--accr),.6) 88%, rgba(255,255,255,.05)); animation:rim 9s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.edge{position:absolute; inset:0; border-radius:22px; background:#070d19; transform:translateZ(-14px); box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 70px -10px rgba(var(--accr),.55); transition:box-shadow .8s}
.edge.e2{transform:translateZ(-7px); background:#0c1527}
.screen{position:absolute; inset:14px; border-radius:14px; overflow:hidden; background:var(--app-bg); transform:translateZ(2px); font-size:11.5px; color:var(--app-ink); direction:rtl}
.sheen{position:absolute; inset:0; border-radius:14px; pointer-events:none; z-index:9; background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.09) 45%, rgba(255,255,255,0) 60%); transform:translateX(var(--sx,0)); mix-blend-mode:screen}
.sweep{position:absolute; left:0; right:0; top:-40%; height:40%; z-index:10; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(57,208,224,.22),transparent); opacity:0}
.sweep.go{animation:sweep .8s cubic-bezier(.2,.7,.2,1) forwards}
@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
@keyframes rim{to{--ang:360deg}}
@keyframes sweep{0%{top:-40%;opacity:0}15%{opacity:1}100%{top:110%;opacity:0}}


/* holographic chips floating in front of the screen at real depth */
.chip{position:absolute; z-index:12; padding:9px 12px; border-radius:12px; font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; direction:rtl;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--accr),.25), 0 0 30px -8px rgba(var(--accr),.7);
  transform:translateZ(var(--z,70px)) translateY(10px) scale(.9); opacity:0; transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.chip.on{opacity:1; transform:translateZ(var(--z,70px)) translateY(0) scale(1); animation:hover var(--hd,4s) ease-in-out var(--hdl,0s) infinite}
.chip b{display:block; font-family:var(--lat); font-size:17px; letter-spacing:-.01em; line-height:1.1; color:var(--acc)}
.chip small{display:block; font-weight:500; color:rgba(255,255,255,.75); font-size:10.5px; margin-top:2px}
.chip.c1{top:-6%; inset-inline-start:-7%; --z:90px}
.chip.c2{bottom:-4%; inset-inline-start:16%; --z:120px; --hd:5s; --hdl:-2s}
.chip.c3{top:40%; inset-inline-end:-9%; --z:70px; --hd:4.6s; --hdl:-1s}
@keyframes hover{50%{transform:translateZ(var(--z,70px)) translateY(-7px) scale(1)}}
@media (max-width:960px){ .chip{font-size:10px; padding:7px 9px} .chip b{font-size:14px} .chip.c3{inset-inline-end:-3%} .chip.c1{inset-inline-start:-2%} }
@media (prefers-reduced-motion:reduce){ .grid,.halo,.pool,.streams i,.chip.on,.frame::before{animation:none} }

/* app chrome */
.app{position:absolute; top:0; right:0; width:572px; height:362px; transform-origin:top right; display:grid; grid-template-columns:150px 1fr; opacity:0; transform:translateY(14px) scale(calc(.985*var(--sc,1))); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.app.on{opacity:1; transform:scale(var(--sc,1)); pointer-events:auto}
.app.out{opacity:0; transform:translateY(-10px) scale(calc(.985*var(--sc,1)))}
.sb{background:#0A1120; border-inline-start:1px solid var(--app-line); padding:12px 10px; display:flex; flex-direction:column; gap:3px}
.sb .lg{display:flex; align-items:center; gap:7px; font-family:var(--lat); font-weight:800; font-size:13px; margin-bottom:10px; padding:0 4px}
.sb .lg i{width:20px; height:20px; border-radius:6px; background:linear-gradient(145deg,#2DD4BF,#0E8E77); display:grid; place-items:center; color:#04130f; font-size:9px; font-style:normal}
.sb .g{font-size:9.5px; color:var(--ink-3); margin:8px 6px 3px}
.sb .it{display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:8px; color:var(--app-muted); font-size:11px}
.sb .it.on{background:rgba(45,212,191,.12); color:#CFFAF4; box-shadow:inset 2px 0 0 var(--teal)}
.sb .it b{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7}
.main{padding:11px 13px; display:flex; flex-direction:column; gap:9px; min-width:0}
.top{display:flex; align-items:center; gap:8px}
.top .srch{flex:1; background:#0E172A; border:1px solid var(--app-line); border-radius:8px; padding:5px 9px; color:var(--app-muted); font-size:10.5px}
.live{font-size:9.5px; color:#CFFAF4; background:rgba(45,212,191,.14); border:1px solid rgba(45,212,191,.35); padding:3px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:5px}
.live i{width:5px; height:5px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); font-style:normal; animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.h{font-weight:800; font-size:13.5px}
.h small{display:block; font-weight:400; color:var(--app-muted); font-size:10px; margin-top:1px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.kpi{background:var(--app-panel); border:1px solid var(--app-line); border-radius:10px; padding:8px 10px}
.kpi .l{font-size:9.5px; color:var(--app-muted)} .kpi .v{font-family:var(--lat); font-weight:800; font-size:17px; margin-top:2px; font-variant-numeric:tabular-nums}
.kpi .v.r{color:#F87171} .kpi .v.g{color:#4ADE80} .kpi .v.c{color:var(--cyan)}
.panel{background:var(--app-panel); border:1px solid var(--app-line); border-radius:10px; padding:9px 10px; min-width:0}
.row{display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--app-line)}
.row:last-child{border-bottom:0}
.av{width:22px; height:22px; border-radius:50%; background:rgba(78,163,255,.18); color:#BFDCFF; display:grid; place-items:center; font-size:9.5px; font-weight:700; flex:0 0 auto}
.nm{font-weight:600; font-size:11px} .mt{font-size:9.5px; color:var(--app-muted)}
.chip{font-size:9px; padding:2px 7px; border-radius:999px; border:1px solid var(--app-line); color:var(--app-muted); white-space:nowrap}
.chip.r{color:#FCA5A5; border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.08)}
.chip.a{color:#FCD34D; border-color:rgba(245,179,66,.35); background:rgba(245,179,66,.08)}
.chip.g{color:#86EFAC; border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.08)}
.ring{width:30px; height:30px; flex:0 0 auto}
.ring circle{fill:none; stroke-width:3.2}
.ring .bg{stroke:rgba(255,255,255,.08)} .ring .fg{stroke:var(--cyan); stroke-linecap:round; stroke-dasharray:88; stroke-dashoffset:88; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .25s}
.app.on .ring .fg{stroke-dashoffset:var(--o)}
.ring text{fill:#E6EEF8; font-size:9px; font-weight:800; font-family:var(--lat)}
.bar{height:6px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; flex:1}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#2DD4BF,#39D0E0); border-radius:999px; transition:width 1s cubic-bezier(.2,.7,.2,1) .25s}
.bar i.y{background:linear-gradient(90deg,#F5B342,#F59E0B)} .bar i.r{background:linear-gradient(90deg,#F87171,#EF4444)}
.app.on .bar i{width:var(--w)}
.two{display:grid; grid-template-columns:1.25fr 1fr; gap:8px; min-width:0}
.act{border:1px solid rgba(57,208,224,.35); background:rgba(57,208,224,.07); border-radius:10px; padding:9px 10px}
.act .t{font-weight:800; font-size:12px} .act .why{font-size:9.5px; color:var(--app-muted); margin-top:4px; line-height:1.5}
.btns{display:flex; gap:6px; margin-top:7px}
.b{font-size:9.5px; padding:4px 9px; border-radius:7px; border:1px solid var(--app-line); color:var(--app-ink)} .b.p{background:var(--teal); color:#04130f; border-color:transparent; font-weight:700}
.tl{display:flex; flex-direction:column; gap:6px}
.tl .e{display:flex; gap:7px; align-items:flex-start; font-size:10px} .tl .e i{width:7px; height:7px; border-radius:50%; margin-top:4px; flex:0 0 auto; background:var(--cyan); font-style:normal} .tl .e i.y{background:#F5B342} .tl .e i.r{background:#F87171}
.chart{display:flex; align-items:flex-end; gap:4px; height:58px; padding-top:4px}
.chart i{flex:1; background:linear-gradient(180deg,#39D0E0,#2563EB); border-radius:3px 3px 1px 1px; height:0; transition:height .9s cubic-bezier(.2,.7,.2,1) .25s; display:block; position:relative}
.chart i.s{background:linear-gradient(180deg,#9B7BFF,#5B4BD9)}
.app.on .chart i{height:var(--h)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:9.5px; color:#FCA5A5; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); padding:2px 7px; border-radius:999px}
.hint{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); color:var(--ink-3); font-size:12px; white-space:nowrap; display:flex; gap:8px; align-items:center}

/* ===== v3: cinematic layer ===== */
#field{position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.9}
.stage{-webkit-box-reflect:below 6px linear-gradient(transparent 62%, rgba(0,0,0,.28))}
/* layered device: back plate, circuit board, glass */
.edge,.edge.e2,.frame,.screen,.board,.glass{transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .9s ease}
.board{position:absolute; inset:0; border-radius:22px; transform:translateZ(-10px); background:#081120; overflow:hidden; opacity:0}
.board::before{content:""; position:absolute; inset:0; opacity:.9;
  background:
   radial-gradient(circle at 20% 30%, rgba(var(--accr),.55) 0 2px, transparent 3px),
   radial-gradient(circle at 70% 60%, rgba(var(--accr),.55) 0 2px, transparent 3px),
   radial-gradient(circle at 45% 80%, rgba(var(--accr),.55) 0 2px, transparent 3px),
   linear-gradient(90deg, transparent 49.4%, rgba(var(--accr),.35) 49.4% 50.6%, transparent 50.6%) 0 0/70px 70px,
   linear-gradient(0deg, transparent 49.4%, rgba(var(--accr),.35) 49.4% 50.6%, transparent 50.6%) 0 0/70px 70px}
.board::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(var(--accr),.35) 50%, transparent 70%) -200% 0/200% 100% no-repeat; animation:trace 2.8s linear infinite}
@keyframes trace{to{background-position:200% 0}}
.glass{position:absolute; inset:14px; border-radius:14px; z-index:11; pointer-events:none; transform:translateZ(4px);
  background:linear-gradient(105deg, rgba(255,255,255,.0) 35%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.0) 55%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* exploded (x-ray) state */
.device.x .edge{transform:translateZ(-150px)} .device.x .edge.e2{transform:translateZ(-95px)}
.device.x .board{transform:translateZ(-50px); opacity:1} .device.x .frame{transform:translateZ(0)}
.device.x .screen{transform:translateZ(60px)} .device.x .glass{transform:translateZ(120px); background:linear-gradient(105deg, rgba(255,255,255,.04) 35%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.04) 55%)}
.device.x .chip{--z:150px}
.device.x .edge,.device.x .edge.e2,.device.x .board{box-shadow:0 0 0 1px rgba(var(--accr),.35), 0 40px 80px -20px rgba(0,0,0,.9)}
/* boot (intro) state: parts far apart & dark, then assemble */
.device.boot .edge{transform:translateZ(-420px); opacity:0} .device.boot .edge.e2{transform:translateZ(-300px); opacity:0}
.device.boot .frame{transform:translateZ(-120px); opacity:0} .device.boot .screen{transform:translateZ(240px); opacity:0} .device.boot .glass{transform:translateZ(380px); opacity:0}
.device.boot .board{opacity:0}
/* switch transition: the new page is revealed under a light scan line, the old one sinks back and blurs */
.shutter{position:absolute; left:0; right:0; top:0; height:2px; z-index:10; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(var(--accr),1) 18%, #fff 50%, rgba(var(--accr),1) 82%, transparent);
  box-shadow:0 0 14px 3px rgba(var(--accr),.65), 0 0 40px 8px rgba(var(--accr),.25)}
.shutter::before{content:""; position:absolute; left:0; right:0; bottom:2px; height:90px; background:linear-gradient(180deg, transparent, rgba(var(--accr),.16)); pointer-events:none}
.shutter.go{animation:scan .78s cubic-bezier(.25,.75,.25,1) both}
@keyframes scan{0%{top:0; opacity:0}8%{opacity:1}88%{opacity:1}100%{top:100%; opacity:0}}
.app.reveal{animation:reveal .78s cubic-bezier(.25,.75,.25,1) both}
@keyframes reveal{0%{clip-path:inset(0 0 100% 0); filter:brightness(1.8) saturate(1.3)}70%{filter:brightness(1.15)}100%{clip-path:inset(0 0 0 0); filter:none}}
.app.out{animation:sink .6s ease both}
@keyframes sink{to{opacity:0; filter:blur(5px) brightness(.6)}}
/* flash on switch */
.flash{position:absolute; inset:-40%; z-index:0; pointer-events:none; background:radial-gradient(40% 40% at 50% 50%, rgba(var(--accr),.55), transparent 70%); opacity:0}
.flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
/* intro for copy */
.copy>*{opacity:0; transform:translateY(18px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.copy>:nth-child(1){animation-delay:.2s} .copy>:nth-child(2){animation-delay:.35s} .copy>:nth-child(3){animation-delay:.5s} .copy>:nth-child(4){animation-delay:.65s} .copy>:nth-child(5){animation-delay:.8s}
@keyframes rise{to{opacity:1; transform:none}}
/* magnetic module buttons */
.mod{transition:border-color .2s, background .2s, transform .25s cubic-bezier(.2,.7,.2,1)}
/* x-ray toggle */
.xr{position:absolute; top:-6px; inset-inline-end:0; z-index:14; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--ink-2); background:var(--glass); border:1px solid var(--line); padding:7px 12px; border-radius:999px; cursor:pointer; backdrop-filter:blur(8px); transition:border-color .2s, color .2s}
.xr:hover{border-color:rgba(var(--accr),.6); color:var(--ink)} .xr .sw{width:28px; height:16px; border-radius:999px; background:rgba(255,255,255,.12); position:relative; transition:background .25s}
.xr .sw::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .25s}
.xr.on .sw{background:var(--acc)} .xr.on .sw::after{transform:translateX(12px)}
@media (max-width:960px){ .stage{-webkit-box-reflect:none} .xr{top:auto; bottom:-10px} }
@media (prefers-reduced-motion:reduce){ .copy>*{animation:none; opacity:1; transform:none} .board::after,.shutter.go,.app.reveal,.app.out,.flash.go{animation:none} }

/* ---------- sections ---------- */
.sec{position:relative; z-index:2; padding-block:72px}
.sec.alt{background:linear-gradient(180deg,rgba(10,18,34,0),rgba(10,18,34,.55) 20%,rgba(10,18,34,.55) 80%,rgba(10,18,34,0))}
.sec .kick{font-size:13px; font-weight:700; color:var(--cyan); display:flex; align-items:center; gap:10px}
.sec .kick::before{content:""; width:28px; height:2px; background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:2px}
.sec h2{font-size:clamp(24px,3vw,38px); font-weight:800; line-height:1.3; margin:12px 0 0; max-width:22em; text-wrap:balance; letter-spacing:-.01em}
.sec .lead{color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); max-width:40em; margin:14px 0 0}
.sec .head{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:end}
.sec .head .lead{margin-top:0}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.tile{position:relative; background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:26px 24px; backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; transition:transform .3s var(--ease), border-color .3s}
.tile:hover{transform:translateY(-4px); border-color:var(--line-strong)}
.tile::after{content:""; position:absolute; inset:auto -40px -60px auto; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accr),.22),transparent 65%); pointer-events:none}
.tile .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(60,120,255,.14); color:var(--cyan); font-size:20px; margin-bottom:16px}
.tile h3{font-size:17.5px; font-weight:700; margin:0}
.tile p{color:var(--ink-2); font-size:14.5px; margin:8px 0 0; line-height:1.8}
.story{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
.story .pnl{background:var(--panel-solid); border:1px solid var(--line); border-radius:20px; padding:28px; position:relative; overflow:hidden}
.story .pnl::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--cyan),var(--violet))}
.story .pnl:nth-child(2)::before{background:linear-gradient(90deg,var(--teal),var(--blue))}
.story h3{margin:0 0 14px; font-size:14px; letter-spacing:.14em; color:var(--ink-3); font-weight:700}
.story ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.story li b{display:block; font-size:16px; font-weight:700}
.story li span{display:block; color:var(--ink-2); font-size:14px; margin-top:3px}
.story li{padding-inline-start:18px; position:relative}
.story li::before{content:""; position:absolute; inset-inline-start:0; top:10px; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px; position:relative}
.steps::before{content:""; position:absolute; top:34px; inset-inline:60px; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.step{position:relative; padding:0 8px}
.step .n{width:68px; height:68px; border-radius:50%; display:grid; place-items:center; margin:0 auto; background:var(--bg); border:1px solid var(--line-strong); font-family:var(--fa); font-weight:800; font-size:20px; color:var(--cyan); box-shadow:0 0 30px -8px rgba(57,208,224,.6); position:relative; z-index:1}
.step h3{text-align:center; font-size:16.5px; margin:16px 0 0}
.step p{text-align:center; color:var(--ink-2); font-size:14px; margin:6px 0 0}
.ev{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; align-items:start}
.ev .note{background:linear-gradient(160deg,rgba(57,208,224,.1),rgba(155,123,255,.08)); border:1px solid var(--line); border-radius:20px; padding:28px; font-size:15.5px; color:var(--ink-2); line-height:1.9}
.ev .note b{color:var(--ink); display:block; font-size:19px; margin-bottom:10px}
.ev .metrics{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ev .m{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:18px}
.ev .m b{display:block; font-size:14.5px; color:var(--cyan)}
.ev .m span{display:block; color:var(--ink-2); font-size:13.5px; margin-top:6px}
.faq{display:grid; gap:10px; margin-top:34px; max-width:860px}
.faq details{background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:4px 20px}
.faq summary{cursor:pointer; font-weight:700; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--cyan); font-size:22px; font-weight:400; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 16px; color:var(--ink-2)}
.contact{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:28px; padding:56px 48px; background:radial-gradient(70% 120% at 100% 0%, rgba(78,163,255,.22), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(155,123,255,.2), transparent 60%), var(--panel-solid); text-align:center}
.contact h2{margin:12px auto 0}
.contact .lead{margin-inline:auto}
.contact .kick{justify-content:center}
.contact .acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.contact .tags{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:34px; color:var(--ink-3); font-size:11px; letter-spacing:.18em; font-weight:700}
.contact .tags span::before{content:"•"; color:var(--cyan); margin-inline-end:8px}
.rv{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (max-width:960px){ .sec .head,.story,.ev{grid-template-columns:1fr} .tiles{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .steps::before{display:none} .contact{padding:40px 24px} }
@media (max-width:600px){ .tiles,.steps,.ev .metrics{grid-template-columns:1fr} .sec{padding-block:52px} }
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

/* LTR pages: product screen reads left-to-right; stage sits on the right */
[dir="ltr"] .screen{direction:ltr}
@media (min-width:961px){ [dir="ltr"] .hero{grid-template-columns:1.1fr 1fr} [dir="ltr"] .stage{order:2} }
.xr{top:auto; bottom:-14px; inset-inline-end:0}
.hint{left:auto; inset-inline-start:0; transform:none; bottom:-8px}
@media (max-width:960px){ [dir="ltr"] .stage{order:-1} .xr{bottom:-10px} .hint{display:none} }
.srch .kb{float:left;font-family:var(--lat);font-size:9px;opacity:.6} [dir="ltr"] .srch .kb{float:right}

.chs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px auto 0; max-width:860px}
.ch{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(10,18,34,.6); text-align:start; transition:transform .25s var(--ease), border-color .25s}
.ch:hover{transform:translateY(-3px); border-color:var(--line-strong)}
.ch .ci{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(78,163,255,.14); color:var(--blue); flex:0 0 auto}
.ch .ci svg{width:22px; height:22px} .ch .ci.wa{color:#3ddc84; background:rgba(61,220,132,.12)} .ch .ci.tg{color:#56b4ff; background:rgba(86,180,255,.14)}
.ch b{display:block; font-size:15px} .ch small{display:block; color:var(--ink-2); font-size:12.5px; margin-top:2px}
@media (max-width:700px){ .chs{grid-template-columns:1fr} }

/* responsive hero */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; gap:24px; padding-block:26px 30px; min-height:0}
  .stage{order:-1; min-height:0; margin-bottom:8px} .device{width:min(100%,560px)}
  .mods{grid-template-columns:1fr 1fr}
  
}
@media (max-width:560px){ .mods{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .mod.on .prog{animation:none} .live i{animation:none} }
@media (max-width:560px){ .chip.c3{display:none} }
@media (max-width:960px){ .xr{position:relative; top:auto; bottom:auto; inset-inline-end:auto; margin-top:26px; justify-self:center} }

/* SEO: primary keyword as the first line of the H1, styled as an eyebrow */
h1 .kw{display:flex; align-items:center; gap:10px; font-size:clamp(13px,1.1vw,15px); font-weight:700; letter-spacing:0; color:var(--cyan); margin-bottom:14px; line-height:1.4}
h1 .kw::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); flex:0 0 auto}
[dir="ltr"] h1 .kw{letter-spacing:.02em}

/* ---------- v5: hero 3D logo ---------- */
.hero-mark{display:flex; align-items:center; gap:14px; margin-bottom:6px}
.hero .hero-mark .lg3d .st{--w:clamp(72px,7vw,100px); --dz:1.7px}
.hero .hero-mark .lg3d .st i.f{filter:drop-shadow(0 0 26px rgba(var(--accr),.6)) drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.copy>:nth-child(6){animation-delay:.95s}
@media (max-width:960px){ .hero-mark{justify-content:center} .hero .hero-mark .lg3d .st{--w:84px} }

/* ---------- v5: inside view shows the other app pages as layers ---------- */
.pl{position:absolute; inset:14px; border-radius:14px; overflow:hidden; background:#0a1424; color:var(--app-ink); font-size:11.5px; direction:rtl;
  opacity:0; transform:translateZ(-12px); pointer-events:none; transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease, box-shadow .3s;
  box-shadow:0 0 0 1px rgba(var(--accr),.35), 0 30px 60px -20px rgba(0,0,0,.9)}
[dir="ltr"] .pl{direction:ltr}
.pl .app{transition:none}
.pl::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,9,18,.05), rgba(5,9,18,.35)); pointer-events:none; transition:opacity .3s}
.pl-tag{position:absolute; top:8px; inset-inline-start:8px; z-index:3; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; background:rgba(5,10,20,.8); border:1px solid rgba(var(--accr),.55); color:#fff; white-space:nowrap}
.device.x .pl{opacity:.94; pointer-events:auto; cursor:pointer}
.device{--xs:-4%} [dir="ltr"] .device{--xs:4%}
.device.x .pl.l1{transform:translate3d(calc(var(--xs)*1),-14%,-70px)} .device.x .pl.l2{transform:translate3d(calc(var(--xs)*2),-28%,-140px)} .device.x .pl.l3{transform:translate3d(calc(var(--xs)*3),-42%,-210px)} .device.x .pl.l4{transform:translate3d(calc(var(--xs)*4),-56%,-280px)}
.device.x .chip.on{opacity:0; animation:none}
.device.x .pl:hover{opacity:1; box-shadow:0 0 0 1.5px rgba(var(--accr),.95), 0 0 40px -6px rgba(var(--accr),.6)} .device.x .pl:hover::after{opacity:0}
.device.x .edge,.device.x .edge.e2,.device.x .board{opacity:0}
.device.x .screen{transform:translateZ(40px); background:#0a1424} .device.x .glass{transform:translateZ(80px)}
.device.x .frame{opacity:0}
.stage .xhint{position:absolute; bottom:-8px; inset-inline-start:0; z-index:14; font-size:12px; color:var(--ink-2); opacity:0; transition:opacity .4s; pointer-events:none}
.stage.xon .xhint{opacity:1} .stage.xon .hint{opacity:0}
@media (max-width:960px){ .device.x .pl.l1{transform:translate3d(0,-11%,-50px)} .device.x .pl.l2{transform:translate3d(0,-22%,-100px)} .device.x .pl.l3{transform:translate3d(0,-33%,-150px)} .device.x .pl.l4{transform:translate3d(0,-44%,-200px)} .device.x{margin-top:22%} .stage .xhint{position:static; order:3; margin-top:8px; text-align:center} }
@media (prefers-reduced-motion:reduce){ .pl{transition:opacity .3s} }

/* ---------- v5: phones scroll normally over the hero; only a sideways drag on the device turns it ---------- */
@media (hover:none){ .hero{cursor:auto} .stage{touch-action:pan-y} }

/* ---------- v5 polish: calmer hero, compact module tabs, on-device controls ---------- */
.hero{cursor:auto}
.hero .hero-mark{margin-bottom:0}
.hero .hero-mark .lg3d .st{--w:clamp(64px,5.6vw,84px)}
h1{margin-top:10px}
.mods{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.mod{padding:8px 14px 9px; border-radius:999px; gap:8px; background:rgba(14,24,44,.42)}
.mod:hover{transform:none; border-color:rgba(120,170,255,.4)}
.mod .k{width:auto; height:auto; background:none; font-size:13px}
.mod .t{font-size:13.5px; font-weight:600; white-space:nowrap}
.mod .d,.mod .bar{display:none}
.mod.on{background:rgba(57,208,224,.1); box-shadow:none}
.mod.on .t{color:#fff}
.mod .prog{left:14px; right:14px; bottom:3px; border-radius:2px; opacity:.7}
.mod-desc{margin:14px 0 0; min-height:1.7em; color:var(--ink-2); font-size:14.5px; transition:opacity .35s, transform .35s}
.mod-desc.swap{opacity:0; transform:translateY(4px)}
.cta{margin-top:26px}
.chip.c3{display:none}
.streams{opacity:.5}
.stage{cursor:grab} .hero.drag .stage{cursor:grabbing}
.screen{cursor:pointer}
.hint{display:none}
.dctl{position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); z-index:14; display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:999px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); white-space:nowrap}
.dctl .nav{width:30px; height:30px; border-radius:50%; border:0; background:transparent; color:var(--ink-2); font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s, color .2s}
.dctl .nav:hover{background:rgba(255,255,255,.08); color:#fff}
.dctl .dots{display:flex; gap:6px; padding:0 4px}
.dctl .dots button{width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.25); cursor:pointer; transition:width .3s, background .3s}
.dctl .dots button.on{width:22px; background:var(--acc)}
.dctl .sep{width:1px; height:18px; background:var(--line); margin:0 4px}
.dctl .xr{position:static; margin:0; padding:5px 10px; border:0; background:transparent; backdrop-filter:none}
.stage .xhint{position:absolute; bottom:24px; left:50%; inset-inline-start:auto; transform:translateX(-50%); white-space:nowrap}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
@media (max-width:960px){
  .hero .hero-mark{display:none}
  .mods{justify-content:center} .copy{text-align:center} .sub{margin-inline:auto} .cta{justify-content:center} h1 .kw{justify-content:center}
  .dctl{position:relative; bottom:auto; left:auto; transform:none; margin-top:22px; justify-self:center}
  .stage .xhint{position:static; transform:none; margin-top:8px}
}
@media (max-width:420px){ .dctl .xr{font-size:11.5px} .mod{padding:7px 11px 8px} .mod .t{font-size:12.5px} }
.hero.paused .mod.on .prog{animation-play-state:paused}
.mod .k{display:none} .mod{padding:7px 13px 9px} .mods{gap:7px}
@media (max-width:960px){ .stage{-webkit-box-reflect:initial !important} .device .chip{display:none} }
/* capability tiles (SEO section) */
.tiles.caps .tile{display:block; text-decoration:none; color:inherit}
.tile .more{display:inline-flex; gap:6px; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--cyan)}
.tile.cap:hover .more{text-decoration:underline}