/* Home hero (owner design): navy grid, gold eyebrow, two-line headline, three cascading browser windows playing the real
   template heroes, Omxio and omxio.com at the foot. Sticky and scroll-driven; the template showcase starts right under it. */
.wl-immersive{position:relative;height:160vh;margin-inline:calc(50% - 50vw);margin-top:calc(-8px - var(--st));background:var(--hero-navy);color:var(--hero-ink);view-timeline-name:--wlim}
.wl-im-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;padding:calc(8px + var(--st)) clamp(20px,5vw,64px) calc(var(--space-4) + var(--sb));background:radial-gradient(80% 60% at 30% 0%,var(--hero-navy-2),transparent 70%),linear-gradient(var(--hero-grid) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px) 0 0/64px 64px,var(--hero-navy)}
.wl-im-top{position:relative}
.wl-im-top .wl-bar{max-width:none}
.wl-im-top .wm,.wl-im-top .omx-ar{color:var(--hero-ink)}
.wl-im-top .omx-brand{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:var(--space-2);row-gap:2px}
.wl-im-top .omx-brand .omx-face{grid-row:1 / span 2}
.wl-im-top .omx-brand .wm{align-self:end}
.wl-im-top .omx-brand .omx-ar{grid-column:2;align-self:start;font-size:11px;line-height:1;opacity:.8}
.wl-im-head{position:relative;margin-top:clamp(12px,3vh,32px);max-width:1200px;z-index:2}
.wl-im-eyebrow{margin:0;color:var(--hero-gold);font-size:clamp(12px,1.3vw,16px);font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.wl-im-h{margin:var(--space-2) 0 0;color:var(--hero-ink);font-size:clamp(30px,5.6vw,76px);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.wl-im-line{display:block}
.wl-im-line + .wl-im-line{margin-top:.35em;font-size:.48em;font-weight:500;line-height:1.35;color:var(--hero-ink-2)}
.wl-im-cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.wl-im-cta .wl-go,.wl-im-cta .wl-new{min-height:44px;padding-inline:22px}

.wl-im-wins{position:relative;flex:1;min-height:0;width:min(100%,1100px);margin:clamp(12px,3vh,32px) auto 0}
.wl-win{position:absolute;margin:0;border-radius:12px;overflow:hidden;background:var(--hero-win-bar);border:1px solid var(--hero-win-ring);box-shadow:var(--hero-win-shadow);aspect-ratio:16/10.6}
.wl-win[data-w=nova]{inset-inline-start:0;top:0;width:56%;z-index:1}
.wl-win[data-w=noma]{inset-inline-end:0;top:18%;width:54%;z-index:2}
.wl-win[data-w=red]{inset-inline-start:21%;top:40%;width:54%;z-index:3}
.wl-win-bar{display:flex;gap:7px;align-items:center;height:28px;padding-inline:12px;background:var(--hero-win-bar)}
.wl-dot{width:11px;height:11px;border-radius:50%;background:var(--hero-dot-1)}
.wl-dot:nth-child(2){background:var(--hero-dot-2)}
.wl-dot:nth-child(3){background:var(--hero-dot-3)}
.wl-win-vid{display:block;width:100%;height:calc(100% - 28px);object-fit:cover;object-position:top;background:var(--hero-navy-2)}
.wl-im-foot{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-3);font-weight:800;font-size:clamp(16px,1.6vw,22px);z-index:4}
.wl-im-brand{color:var(--hero-ink)}
.wl-im-site{color:var(--hero-gold)}
.wl-show{margin-inline:calc(50% - 50vw);margin-top:-12vh}
.wl-rest{width:min(1080px,100%);margin:var(--space-6) auto 0;display:flex;flex-direction:column;gap:28px}
.wl-rest .wl-actions{margin-inline:auto}
[dir=rtl] .wl-im-h{font-family:var(--font-head-ar),var(--font-body-ar),sans-serif;letter-spacing:normal;line-height:1.4}
[dir=rtl] .wl-im-eyebrow{font-family:var(--font-body-ar),sans-serif;letter-spacing:normal;text-transform:none}
@media (max-width:719px){
  .wl-immersive{height:140vh}
  .wl-im-wins{width:100%}
  .wl-win{border-radius:8px}
  .wl-win-bar{height:18px;gap:5px;padding-inline:8px}
  .wl-dot{width:7px;height:7px}
  .wl-win-vid{height:calc(100% - 18px)}
  .wl-win[data-w=nova]{width:78%;top:0}
  .wl-win[data-w=noma]{width:78%;top:22%}
  .wl-win[data-w=red]{width:82%;top:46%;inset-inline-start:9%}
}
@keyframes wl-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes wl-par-1{to{transform:translateY(-14vh)}}
@keyframes wl-par-2{to{transform:translateY(-8vh)}}
@keyframes wl-par-3{to{transform:translateY(-3vh)}}
@keyframes wl-head-out{to{opacity:.25;transform:translateY(-6vh)}}
@media (prefers-reduced-motion:no-preference){
  .wl-win{animation:wl-float 7s ease-in-out infinite}
  .wl-win[data-w=noma]{animation-delay:-2.3s}
  .wl-win[data-w=red]{animation-delay:-4.6s}
  @supports (animation-timeline:view()){
    .wl-im-wins .wl-win[data-w=nova]{animation:wl-float 7s ease-in-out infinite,wl-par-1 linear both;animation-timeline:auto,--wlim;animation-range:normal,contain 0% contain 100%}
    .wl-im-wins .wl-win[data-w=noma]{animation:wl-float 7s ease-in-out -2.3s infinite,wl-par-2 linear both;animation-timeline:auto,--wlim;animation-range:normal,contain 0% contain 100%}
    .wl-im-wins .wl-win[data-w=red]{animation:wl-float 7s ease-in-out -4.6s infinite,wl-par-3 linear both;animation-timeline:auto,--wlim;animation-range:normal,contain 0% contain 100%}
    .wl-im-head{animation:wl-head-out linear both;animation-timeline:--wlim;animation-range:contain 20% contain 100%}
  }
}
@media (prefers-reduced-motion:reduce){.wl-immersive{height:100vh}.wl-show{margin-top:0}}