/* VYNEX/public/devices.css — hero device scene: laptop (sales dashboard), tablet (service ads), phone (live enquiries).
   Every size is in container units (cqw) so the whole scene scales with the hero column.
   Markup is built by devices.js. The scene is decorative (aria-hidden). */

.devices { container-type: inline-size; position: relative; isolation: isolate; width: 100%; aspect-ratio: 100 / 90;
  font-family: var(--font); color: #e9ecf8; -webkit-font-smoothing: antialiased; }
.devices::before { content: ""; position: absolute; inset: -8% -10% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 44% at 32% 34%, rgba(59,130,246,.30), transparent 70%), radial-gradient(38% 38% at 80% 72%, rgba(255,150,30,.22), transparent 70%), radial-gradient(34% 30% at 12% 82%, rgba(139,92,246,.20), transparent 70%); }
.devices svg { display: block; }
.dev { position: absolute; }
.devices .glass { position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 26%, transparent 38%), linear-gradient(0deg, rgba(0,0,0,.16), transparent 22%); }

/* ============ LAPTOP ============ */
.laptop { left: 1.5cqw; top: 0; width: 77cqw; z-index: 1; filter: drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.55)); }
.lp-lid { border-radius: 2.1cqw 2.1cqw .5cqw .5cqw; padding: .32cqw; background: linear-gradient(155deg, #566079 0%, #2c3345 32%, #171b27 100%); box-shadow: inset 0 0 0 .1cqw rgba(255,255,255,.12); }
.lp-bezel { position: relative; border-radius: 1.8cqw 1.8cqw .3cqw .3cqw; background: #02040a; padding: 2.5cqw 1.7cqw 1.6cqw; }
.lp-cam { position: absolute; top: .95cqw; left: 50%; width: .6cqw; height: .6cqw; margin-left: -.3cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34437a, #060912 70%); box-shadow: 0 0 0 .14cqw #0a0e1b; }
.lp-screen { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; border-radius: .45cqw; overflow: hidden; background: #0a0f1f; }
.lp-base { position: relative; height: 2.4cqw; margin: 0 -3.8cqw; border-radius: 0 0 3.4cqw 3.4cqw / 0 0 1.6cqw 1.6cqw;
  background: linear-gradient(180deg, #e3e6ee 0%, #b9bfcd 38%, #8b91a2 100%);
  box-shadow: inset 0 .16cqw 0 rgba(255,255,255,.8), inset 0 -.22cqw .35cqw rgba(0,0,0,.28); }
.lp-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15cqw; height: .85cqw; margin-left: -7.5cqw; border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #8c92a3, #c3c8d5); box-shadow: inset 0 -.1cqw .2cqw rgba(0,0,0,.25); }
.lp-base::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -1.4cqw; height: 1.6cqw; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(1.1cqw); z-index: -1; }

/* ---- dashboard (1cqw here = 1% of the laptop screen) ---- */
.db { position: absolute; inset: 0; display: grid; grid-template-columns: 15cqw 1fr; font-size: 1.9cqw; line-height: 1.25; }
.db-side { background: #080c1a; border-right: .15cqw solid rgba(255,255,255,.06); padding: 2.2cqw 1.4cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.db-brand { display: flex; align-items: center; gap: 1.2cqw; font-weight: 600; font-size: 1.75cqw; line-height: 1.15; }
.db-brand b { flex: none; width: 4cqw; height: 4cqw; border-radius: 1.1cqw; display: grid; place-items: center; font: 700 2.2cqw var(--display); color: #fff; background: linear-gradient(135deg, #ff9a1f, #ff5a36); }
.db-side nav { display: flex; flex-direction: column; gap: .5cqw; }
.db-side a { display: flex; align-items: center; gap: 1.1cqw; padding: 1.15cqw 1.1cqw; border-radius: .9cqw; color: #8f98b8; font-size: 1.75cqw; }
.db-side a.on { background: rgba(59,130,246,.16); color: #fff; box-shadow: inset 0 0 0 .1cqw rgba(96,150,255,.3); }
.db-side a svg { width: 2.3cqw; height: 2.3cqw; flex: none; }
.db-side a em { margin-left: auto; font-style: normal; font-size: 1.45cqw; padding: .25cqw .8cqw; border-radius: 99px; background: rgba(255,255,255,.08); color: #b9c2e6; }
.db-side a em.hot { background: #ff6a3d; color: #fff; }
.db-main { padding: 2.2cqw 2.4cqw 0; display: flex; flex-direction: column; gap: 1.7cqw; min-width: 0; transition: opacity .45s ease; }
.db-main.fade { opacity: 0; }
.db-main header { display: flex; align-items: center; justify-content: space-between; }
.db-main h4 { margin: 0; font: 600 2.7cqw var(--display); letter-spacing: -.01em; color: #fff; }
.db-main header p { margin: .15cqw 0 0; font-size: 1.5cqw; color: #8f98b8; }
.db-tools { display: flex; align-items: center; gap: 1.2cqw; }
.db-tools .pill { font-size: 1.5cqw; padding: .8cqw 1.5cqw; border-radius: 99px; border: .12cqw solid rgba(255,255,255,.12); color: #c7cee8; background: rgba(255,255,255,.04); }
.db-tools .avatar { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; display: grid; place-items: center; font-size: 1.4cqw; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.kpi { position: relative; padding: 1.5cqw 1.5cqw 1.4cqw; border-radius: 1.2cqw; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: .12cqw solid rgba(255,255,255,.08); overflow: hidden; }
.kpi p { margin: 0 0 .5cqw; font-size: 1.4cqw; color: #8f98b8; white-space: nowrap; }
.kpi strong small { font-size: .56em; font-weight: 500; color: #8f98b8; margin-right: .25em; letter-spacing: 0; }
.kpi strong { display: block; font: 600 2.9cqw var(--display); letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta { display: inline-block; margin-top: .7cqw; font-size: 1.35cqw; font-weight: 600; padding: .2cqw .8cqw; border-radius: 99px; color: #34d399; background: rgba(52,211,153,.13); }
.kpi svg { position: absolute; right: 1.2cqw; bottom: 1.3cqw; width: 6.5cqw; height: 3.2cqw; overflow: visible; }
.kpi svg polyline { fill: none; stroke: #34d399; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.row { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.85fr 1fr; gap: 1.4cqw; }
.card { position: relative; border-radius: 1.3cqw; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: .12cqw solid rgba(255,255,255,.08); padding: 1.6cqw 1.7cqw; min-height: 0; display: flex; flex-direction: column; }
.card h5 { margin: 0; font: 600 1.85cqw var(--font); color: #fff; }
.ch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6cqw; }
.legend { font-size: 1.35cqw; color: #8f98b8; display: inline-flex; align-items: center; gap: .7cqw; }
.legend i { width: 1.4cqw; height: .5cqw; border-radius: 9px; background: linear-gradient(90deg, #34d399, #22d3ee); }
.ch-plot { position: relative; flex: 1; min-height: 0; }
.ch-area { position: absolute; left: 6.4cqw; right: .6cqw; top: 1cqw; bottom: 3.6cqw; }
.ch-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ylab, .xlab { position: absolute; font-size: 1.3cqw; color: #6f7899; font-variant-numeric: tabular-nums; }
.ylab { left: 0; width: 5cqw; text-align: right; transform: translateY(-50%); }
.xlab { bottom: .1cqw; transform: translateX(-50%); }
.launch { position: absolute; top: .2cqw; transform: translateX(-50%); font-size: 1.3cqw; font-weight: 600; white-space: nowrap; color: #ffd36b; padding: .3cqw 1cqw; border-radius: 99px; background: rgba(255,170,40,.14); border: .12cqw solid rgba(255,190,70,.4); opacity: 0; transition: opacity .5s; }
.tip { position: absolute; transform: translate(-100%, -135%); font-size: 1.35cqw; font-weight: 700; white-space: nowrap; color: #06241b; padding: .45cqw 1cqw; border-radius: .8cqw; background: #34d399; box-shadow: 0 .6cqw 1.4cqw rgba(52,211,153,.4); opacity: 0; transition: opacity .5s; }
.dot-end { position: absolute; width: 1.7cqw; height: 1.7cqw; margin: -.85cqw 0 0 -.85cqw; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 .5cqw rgba(52,211,153,.25), 0 0 1.8cqw #34d399; opacity: 0; transition: opacity .4s; }
.is-in { opacity: 1 !important; }
.src h5 { margin-bottom: 1.3cqw; }
.bar { margin-bottom: 1.35cqw; }
.bar div { display: flex; justify-content: space-between; font-size: 1.45cqw; color: #aeb7d6; margin-bottom: .55cqw; }
.bar div em { font-style: normal; }
.bar div b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar span { display: block; height: .8cqw; border-radius: 9px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar span i { display: block; height: 100%; border-radius: 9px; transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); background: linear-gradient(90deg, var(--c1, #3b82f6), var(--c2, #8b5cf6)); }
.bar.go span i { transform: scaleX(1); }

/* ============ TABLET (service ads) ============ */
.tablet { left: 0; bottom: 0; width: 49cqw; z-index: 2; aspect-ratio: 4 / 3; border-radius: 3.2cqw; padding: .32cqw;
  background: linear-gradient(145deg, #6b7590 0%, #343b4f 30%, #1a1e2b 100%); box-shadow: inset 0 0 0 .1cqw rgba(255,255,255,.14), 0 2.6cqw 3.6cqw -1cqw rgba(0,0,0,.65);
  animation: dv-float 9s ease-in-out infinite; }
.tb-bezel { position: relative; height: 100%; border-radius: 2.9cqw; background: #02040a; padding: 2cqw; }
.tb-cam { position: absolute; top: .8cqw; left: 50%; width: .55cqw; height: .55cqw; margin-left: -.28cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #34437a, #060912 70%); }
.tb-screen { container-type: inline-size; position: relative; height: 100%; border-radius: 1.1cqw; overflow: hidden; background: #0a0f1f; }
.ad { position: absolute; inset: 0; padding: 4.6cqw 5cqw 7.8cqw 5.5cqw; display: grid; grid-template-columns: 1.55fr 1fr; gap: 2cqw; align-items: center;
  background: radial-gradient(70% 90% at 88% 35%, color-mix(in srgb, var(--ac) 30%, transparent), transparent 70%), linear-gradient(160deg, #0d1330, #080c1c);
  opacity: 0; transform: translateX(5cqw); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.ad.on { opacity: 1; transform: none; }
.ad.out { opacity: 0; transform: translateX(-5cqw); }
.ad-brand { z-index: 4; position: absolute; left: 5.5cqw; top: 4cqw; display: flex; align-items: center; gap: 1.5cqw; font: 700 3.1cqw var(--display); letter-spacing: .01em; color: #fff; }
.ad-brand i { width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: url("images/logo.png") center / contain no-repeat; }
.ad-count { z-index: 4; position: absolute; right: 5.5cqw; top: 4.6cqw; font: 500 2.6cqw var(--mono); color: #8f98b8; }
.ad-copy { padding-top: 6.2cqw; }
.ad-tag { display: inline-flex; align-items: center; gap: 1.2cqw; font-size: 2.45cqw; font-weight: 600; padding: .8cqw 1.8cqw; border-radius: 99px; color: color-mix(in srgb, var(--ac) 40%, #fff); background: color-mix(in srgb, var(--ac) 18%, transparent); border: .15cqw solid color-mix(in srgb, var(--ac) 45%, transparent); margin-bottom: 2.2cqw; }
.ad-tag svg { width: 2.8cqw; height: 2.8cqw; }
.ad h3 { margin: 0 0 1.6cqw; font: 700 5.5cqw/1.1 var(--display); letter-spacing: -.025em; color: #fff; }
.ad p { margin: 0 0 2.6cqw; font-size: 2.75cqw; line-height: 1.4; color: #aeb7d6; }
.ad-cta { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.5cqw 3cqw; border-radius: 99px; font: 700 2.6cqw var(--font); color: #1a1200; background: linear-gradient(135deg, #ffd23a, #ff9a1f); box-shadow: 0 1.4cqw 3cqw -1cqw rgba(255,160,30,.6); }
.ad-art { padding-top: 4cqw; }
.ad-art svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2cqw 3cqw rgba(0,0,0,.45)); }
.ad.on .ad-art svg { animation: dv-float 6s ease-in-out infinite; }
.ad-prog { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 3.6cqw; display: flex; gap: 1.2cqw; z-index: 3; }
.ad-prog span { flex: 1; height: .7cqw; border-radius: 9px; background: rgba(255,255,255,.14); overflow: hidden; }
.ad-prog i { display: block; height: 100%; width: 0; background: #fff; border-radius: 9px; }
.ad-prog span.done i { width: 100%; opacity: .85; }
.ad-prog span.now i { animation: dv-fill var(--dur, 5s) linear forwards; }
@keyframes dv-fill { to { width: 100%; } }

/* ============ PHONE (live enquiries) ============ */
.phone { right: 0; bottom: 0; width: 26.5cqw; z-index: 3; aspect-ratio: 9 / 19.5; border-radius: 4.4cqw; padding: .3cqw;
  background: linear-gradient(150deg, #8b93ab 0%, #3a4157 28%, #1b1f2c 70%, #50586f 100%); box-shadow: inset 0 0 0 .1cqw rgba(255,255,255,.18), 0 2.8cqw 3.6cqw -1cqw rgba(0,0,0,.7);
  animation: dv-float 8s ease-in-out -2.5s infinite; }
.phone::before, .phone::after { content: ""; position: absolute; width: .32cqw; border-radius: 9px; background: linear-gradient(90deg, #2a3042, #6d7690); }
.phone::before { left: -.28cqw; top: 15cqw; height: 5cqw; box-shadow: 0 7cqw 0 #4b536a; }
.phone::after { right: -.28cqw; top: 19cqw; height: 8cqw; }
.ph-bezel { position: relative; height: 100%; border-radius: 4.1cqw; background: #000; padding: .55cqw; }
.ph-screen { container-type: inline-size; position: relative; height: 100%; border-radius: 3.6cqw; overflow: hidden; background: linear-gradient(180deg, #0c1230, #070b1b); display: flex; flex-direction: column; }
.ph-island { position: absolute; z-index: 6; top: 1.1cqw; left: 50%; width: 7.6cqw; height: 2.1cqw; margin-left: -3.8cqw; border-radius: 99px; background: #000; }
.ph-island::after { content: ""; position: absolute; right: .7cqw; top: 50%; width: .7cqw; height: .7cqw; margin-top: -.35cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a74, #04060d 70%); }
.ph-status { display: flex; align-items: center; justify-content: space-between; padding: 4.4cqw 8cqw 0 9cqw; font: 600 5.2cqw var(--font); color: #fff; height: 13cqw; }
.ph-sig { display: inline-flex; align-items: center; gap: 1.6cqw; }
.ph-sig svg { height: 4.2cqw; width: auto; fill: #fff; }
.ph-head { padding: 3cqw 7cqw 0; }
.ph-head small { display: block; font-size: 4.3cqw; color: #8f98b8; }
.ph-head h4 { margin: .5cqw 0 0; font: 700 8cqw var(--display); letter-spacing: -.02em; color: #fff; }
.ph-stat { margin: 4cqw 5.5cqw 0; padding: 5cqw 5cqw 4.4cqw; border-radius: 6cqw; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2f6bff, #7a4bff 70%, #b14bff); box-shadow: 0 4cqw 8cqw -3cqw rgba(80,90,255,.65); }
.ph-stat::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.28), transparent 60%); }
.ph-stat span { display: block; font-size: 4.2cqw; color: rgba(255,255,255,.82); }
.ph-stat strong { display: block; font: 700 17cqw/1 var(--display); letter-spacing: -.04em; color: #fff; margin: 1.4cqw 0 1.8cqw; font-variant-numeric: tabular-nums; }
.ph-stat em { font-style: normal; font-size: 4cqw; font-weight: 600; padding: .8cqw 2.6cqw; border-radius: 99px; background: rgba(255,255,255,.2); color: #fff; }
.ph-bars { position: absolute; right: 5cqw; bottom: 5cqw; display: flex; align-items: flex-end; gap: 1.5cqw; height: 14cqw; z-index: 1; }
.ph-bars i { width: 2.8cqw; border-radius: 1cqw; background: rgba(255,255,255,.55); height: var(--h); transform-origin: bottom; animation: dv-bar 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.35s); }
.ph-bars i:last-child { background: #fff; }
@keyframes dv-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.78); } }
.ph-label { display: flex; align-items: center; justify-content: space-between; padding: 5cqw 7cqw 2.4cqw; font-size: 4.6cqw; font-weight: 600; color: #dfe4f7; }
.ph-label b { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3.7cqw; font-weight: 600; color: #34d399; }
.ph-label b i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #34d399; animation: dv-pulse 1.6s ease-in-out infinite; }
@keyframes dv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 60% { box-shadow: 0 0 0 1.8cqw rgba(52,211,153,0); } }
.ph-feed { position: relative; flex: 1; min-height: 0; margin: 0 4.5cqw; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.msg { display: flex; align-items: center; gap: 3.4cqw; padding: 3.2cqw 3.6cqw; margin-bottom: 2.6cqw; border-radius: 4.6cqw; background: rgba(255,255,255,.065); border: .25cqw solid rgba(255,255,255,.08); }
.msg.new { animation: dv-in .7s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes dv-in { from { opacity: 0; transform: translateY(-9cqw) scale(.94); max-height: 0; margin-bottom: 0; padding-block: 0; } to { opacity: 1; transform: none; max-height: 30cqw; } }
.msg .ic { flex: none; width: 10.5cqw; height: 10.5cqw; border-radius: 50%; display: grid; place-items: center; background: var(--ic); color: #fff; }
.msg .ic svg { width: 5.6cqw; height: 5.6cqw; }
.msg .tx { min-width: 0; flex: 1; }
.msg .tx b { display: block; font-size: 4.3cqw; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.7cqw; line-height: 1.3; color: #9aa4c6; }
.msg time { flex: none; align-self: flex-start; font-size: 3.4cqw; color: #6f7899; }
.ph-tabs { display: flex; justify-content: space-around; align-items: center; padding: 3.4cqw 6cqw 1.6cqw; background: rgba(5,8,22,.85); border-top: .25cqw solid rgba(255,255,255,.07); }
.ph-tabs svg { width: 6.6cqw; height: 6.6cqw; stroke: #6f7899; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ph-tabs svg.on { stroke: #6aa0ff; }
.ph-home { height: 1.3cqw; width: 34cqw; margin: 1.2cqw auto 2.2cqw; border-radius: 9px; background: rgba(255,255,255,.75); flex: none; }

.dev-note { margin: 18px 0 0; font: 400 .72rem var(--mono); color: #6f7899; text-align: center; letter-spacing: .01em; }
@keyframes dv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.9cqw; } }

/* ============ small screens (the laptop screen is narrower than 380px) ============ */
@container (max-width: 380px) {
  .db { grid-template-columns: 1fr; }
  .db-side { display: none; }
  .db-main { padding: 3cqw 3.4cqw 0; gap: 2.4cqw; }
  .db-main h4 { font-size: 3.8cqw; }
  .db-main header p { font-size: 2.1cqw; }
  .db-tools .pill { font-size: 2cqw; padding: 1cqw 2cqw; }
  .db-tools .avatar { width: 5cqw; height: 5cqw; font-size: 1.9cqw; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 2cqw; }
  .kpi:nth-child(n + 3) { display: none; }
  .kpi { padding: 2cqw 2.2cqw; }
  .kpi p { font-size: 2.1cqw; }
  .kpi strong { font-size: 4.4cqw; }
  .delta { font-size: 1.9cqw; margin-top: 1cqw; }
  .kpi svg { width: 10cqw; height: 5cqw; right: 2cqw; bottom: 2cqw; }
  .row { grid-template-columns: 1fr; }
  .src { display: none; }
  .card { padding: 2.2cqw 2.4cqw; }
  .card h5 { font-size: 2.5cqw; }
  .legend { font-size: 1.9cqw; }
  .ch-area { left: 8.5cqw; bottom: 4.6cqw; }
  .ylab, .xlab { font-size: 1.8cqw; }
  .ylab { width: 7cqw; }
  .launch { font-size: 1.8cqw; }
  .tip { font-size: 1.9cqw; }
}
@media (min-width: 1025px) { .hero-inner { grid-template-columns: 1fr 1.1fr; gap: 40px; } }
@media (max-width: 1024px) { .devices { max-width: 600px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .tablet, .phone, .ad.on .ad-art svg, .ph-bars i, .ph-label b i { animation: none; }
  .ad, .db-main, .msg.new { transition: none; animation: none; }
}