/* ============================================================
   Slidey — work-card mockups. Shared by index pages and case-study pages.
   Animations are gated on .wcard.in (added by IntersectionObserver on the
   index; case-study pages render the card with .in already set).
   ============================================================ */
  .wcard {
    display: flex; flex-direction: column; cursor: pointer;
    transform: translateY(26px); opacity: 0; perspective: 1100px;
    transition: transform 0.9s cubic-bezier(.16,.84,.34,1), opacity 0.9s ease;
  }
  .wcard.in { transform: translateY(0); opacity: 1; }
  .works-grid .wcard:nth-child(2).in { transition-delay: 0.08s; }
  .works-grid .wcard:nth-child(3).in { transition-delay: 0.06s; }
  .works-grid .wcard:nth-child(4).in { transition-delay: 0.12s; }

  .wcard-media {
    position: relative; aspect-ratio: 4/3; border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; background: var(--bg-2);
    transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
    transition: transform 0.25s ease-out, border-color 0.4s ease, box-shadow 0.5s ease;
  }
  .wcard:hover .wcard-media {
    border-color: var(--line-strong);
    box-shadow: 0 40px 90px rgba(0,0,0,0.5);
  }
  /* striped placeholder — taller than frame so it can parallax */
  .ph {
    position: absolute; left: 0; right: 0; top: -12%; height: 124%;
    background-color: #14171d;
    background-image: repeating-linear-gradient(
      -45deg, rgba(243,243,240,0.07) 0 1px, transparent 1px 14px);
    display: flex; align-items: center; justify-content: center;
    will-change: transform; transition: transform 0.6s cubic-bezier(.16,.84,.34,1);
    transform: translateY(var(--py,0));
  }
  .wcard:hover .ph { transform: translateY(var(--py,0)) scale(1.04); }
  .wcard-cat {
    position: absolute; top: 16px; left: 16px; z-index: 4;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); padding: 6px 12px; border-radius: 100px;
    background: rgba(8,9,11,0.55); border: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }

  /* cursor spotlight */
  .glow {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    mix-blend-mode: screen; transition: opacity 0.45s ease;
    background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
      rgba(120,150,210,0.24), rgba(120,150,210,0) 62%);
  }
  .wcard:hover .glow { opacity: 1; }

  /* ---- portfolio mockups — same design language as the services motifs; animate on scroll reveal (.wcard.in) ---- */
  .ph.mock { background-image: none; background: linear-gradient(180deg,#0f1116,#0a0b0e); }
  .duo { position: relative; z-index: 1; width: 86%; max-width: 560px; }
  /* Phones: the mock's inner parts are sized in px, so a narrow .duo did not
     shrink them — the window grew taller than the frame (286px in a 260px
     frame at 390px wide) and got cropped. Instead, lay the whole composition
     out at a fixed design width and scale it to fit the frame.
     420px is the narrowest width where the rows stay on one line (SKU codes
     wrapped below that); a square frame gives the scaled window room.
     The scale factor --mk (90% of the frame / 420px) is set by js/mockfit.js;
     without JS the mock renders at design width, centred and cropped. */
  @media (max-width: 700px) {
    /* Centred absolutely, not by the parent's flex centring: WebKit (all iOS
       browsers) left-aligned the 420px box in the narrower frame, pushing the
       scaled mock ~40px to the right. translate(-50%) uses the unscaled box. */
    .duo {
      position: absolute; left: 50%; top: 50%;
      width: 420px; max-width: none;
      transform: translate(-50%, -50%) scale(var(--mk, 1));
    }
  }
  /* iOS WebKit: GPU-composited children (.ph parallax, the scaled .duo) escape
     a border-radius + overflow:hidden clip and paint square corners on the
     device, even though desktop emulation looks round. clip-path clips the
     composited layers too. Scoped to touch/narrow screens because it would
     also clip the desktop hover box-shadow. */
  @media (hover: none), (max-width: 700px) {
    .wcard-media { clip-path: inset(0 round 16px); -webkit-clip-path: inset(0 round 16px); }
    /* no scroll parallax / hover zoom on phones: it shifted the scaled mock
       inside the frame while scrolling, and dropping the extra GPU layer also
       avoids the iOS square-corner bug */
    .ph, .wcard:hover .ph { transform: none; will-change: auto; }
    /* case-study pages render the frame square on purpose */
    .cs-visual .wcard-media { clip-path: none; -webkit-clip-path: none; }
    /* the case-study frame is shorter than the homepage one, so the phone mock
       hanging off the window was cut off at the bottom; the [class] selector
       just raises specificity over the per-page rule that sets min-height.
       The category pill is dropped here: it sat on top of the window's URL bar,
       and the page header already says what kind of project this is. */
    .cs-visual .wcard-media[class] { min-height: 320px; }
    .cs-visual .wcard-cat { display: none; }
  }
  /* square frame only where the scaled window would otherwise feel cramped;
     wider screens keep 4:3 so the frame doesn't balloon with empty space */
  @media (max-width: 520px) {
    .wcard-media { aspect-ratio: 1 / 1; }
    /* not on case-study pages: there the frame takes its height from the
       parent, so a 1/1 ratio derived the WIDTH from that height and pushed the
       frame (427px) past the screen edge */
    .cs-visual .wcard-media[class] { aspect-ratio: auto; }
  }
  .duo .win {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    background: rgba(243,243,240,.02); box-shadow: 0 30px 70px -40px rgba(0,0,0,.8);
  }
  .win-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
  .win-top i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .win-top i:nth-child(1) { background: #ff5f57; }
  .win-top i:nth-child(2) { background: #febc2e; }
  .win-top i:nth-child(3) { background: #28c840; }
  .win-url { margin-left: 8px; font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-live { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: #54c569; display: inline-flex; align-items: center; gap: 5px; flex: none; }
  .win-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #54c569; }
  .dphone {
    position: absolute; right: -4%; bottom: -10%; width: 24%; z-index: 2; aspect-ratio: 9/17.5;
    border: 1.5px solid var(--line-strong); border-radius: 20px; overflow: hidden;
    background: linear-gradient(180deg,#101318,#0b0d10);
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.9);
    display: flex; flex-direction: column;
  }
  .dp-status { flex: none; height: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
  .dp-time { width: 16px; height: 4px; border-radius: 2px; background: rgba(243,243,240,.3); }
  .dp-sig { display: flex; gap: 2.5px; align-items: center; }
  .dp-sig i { width: 4px; height: 4px; border-radius: 1px; background: rgba(243,243,240,.3); }
  .dp-sig i:last-child { width: 9px; border-radius: 2px; }
  /* overflow:hidden keeps the phone's own rows off its tab bar when the mock is
     scaled down on phones; at full size the content fits, so nothing is cut */
  .dp-body { flex: 1; padding: 8px 9px 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 0; overflow: hidden; }
  .dp-url { height: 7px; border-radius: 4px; background: rgba(243,243,240,.09); flex: none; }
  .dp-row { display: flex; align-items: center; gap: 6px; }
  .dp-sku { width: 26%; height: 5px; flex: none; border-radius: 3px; background: rgba(243,243,240,.12); }
  .dp-tab { flex: none; height: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; }
  .dp-tab i { width: 9px; height: 9px; border-radius: 3px; background: rgba(243,243,240,.16); }
  .dp-tab i.on { background: rgba(var(--accent-rgb),.9); }
  /* shared mock keyframes */
  @keyframes wgrow { to { transform: scaleX(var(--s,.6)); } }
  @keyframes wfill { to { transform: scaleX(1); } }
  @keyframes wgrowY { to { transform: scaleY(1); } }
  @keyframes wtick { to { transform: rotate(45deg) scale(1); } }
  @keyframes wdot { to { background: var(--accent); border-color: var(--accent); } }
  /* shared phone detail elements */
  .dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .dp-title { width: 42%; height: 6px; border-radius: 3px; background: rgba(243,243,240,.16); }
  .dp-av { width: 14px; height: 14px; border-radius: 50%; flex: none; background: rgba(var(--accent-rgb),.6); }
  .dp-av.g { background: rgba(84,197,105,.6); }
  .dp-search { height: 15px; flex: none; border: 1px solid var(--line); border-radius: 5px; background: rgba(243,243,240,.05); display: flex; align-items: center; gap: 5px; padding: 0 6px; }
  .dp-search i { width: 6px; height: 6px; border: 1px solid var(--dim); border-radius: 50%; flex: none; }
  .dp-search span { flex: 1; height: 4px; border-radius: 2px; background: rgba(243,243,240,.1); }
  .dp-sec { display: flex; align-items: center; justify-content: space-between; }
  .dp-seclbl { width: 36%; height: 5px; border-radius: 3px; background: rgba(243,243,240,.16); }
  .dp-see { width: 20px; height: 5px; border-radius: 3px; background: var(--accent); opacity: .7; }
  .dp-see.g { background: #54c569; }
  .dp-stats2 { display: flex; gap: 6px; }
  .dp-st { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; }
  .dp-st b { font-size: 10px; font-weight: 800; line-height: 1; }
  .dp-st em { width: 70%; height: 3.5px; border-radius: 2px; background: rgba(243,243,240,.12); }

  /* PlantPass — plant inventory dashboard (green) */
  .pp-app { display: flex; min-height: 252px; }
  .pp-side { flex: none; width: 54px; border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
  .pp-logo { width: 22px; height: 22px; border-radius: 7px; background: #54c569; margin-bottom: 3px; }
  .pp-nav { height: 8px; border-radius: 4px; background: rgba(243,243,240,.1); }
  .pp-nav.on { background: rgba(84,197,105,.65); }
  .pp-main { flex: 1; min-width: 0; padding: 15px 16px; display: flex; flex-direction: column; gap: 13px; }
  .pp-tiles { display: flex; gap: 10px; }
  .pp-tile { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; opacity: 0; transform: translateY(8px); }
  .wcard.in .pp-tile { animation: mmappear .5s var(--d,0s) forwards; }
  .pp-tile b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
  .pp-tile.warn b { color: #febc2e; }
  /* label under the number: real text, so the mock reads as a screen and not a placeholder */
  .pp-tile em { display: block; margin-top: 4px; font-family: var(--mono); font-style: normal;
    font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
  .pp-graph { flex: 1; min-height: 64px; }
  .pp-graph svg { width: 100%; height: 100%; }
  .pp-graph .area { fill: rgba(84,197,105,.13); stroke: none; opacity: 0; }
  .pp-graph .line { fill: none; stroke: #54c569; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .wcard.in .pp-graph .area { animation: mmfade .8s .6s forwards; }
  .wcard.in .pp-graph .line { animation: mmdraw 1.3s .35s cubic-bezier(.5,0,.2,1) forwards; }
  .pp-row { display: flex; align-items: center; gap: 9px; }
  .pp-leaf { width: 14px; height: 14px; flex: none; border-radius: 2px 10px 2px 10px; background: rgba(84,197,105,.6); }
  .pp-name { width: 33%; flex: none; font-size: 8px; line-height: 1.2; color: rgba(243,243,240,.78);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-stock { flex: 1; height: 7px; border-radius: 4px; background: rgba(243,243,240,.08); overflow: hidden; }
  .pp-stock i { display: block; height: 100%; border-radius: 3px; background: rgba(84,197,105,.6); transform: scaleX(0); transform-origin: left; }
  .wcard.in .pp-stock i { animation: wgrow .9s var(--d,0s) cubic-bezier(.16,.84,.34,1) forwards; }
  .pp-qty { font-family: var(--mono); font-size: 9.5px; color: var(--dim); flex: none; width: 20px; text-align: right; }
  .pp-row.low .pp-leaf { background: rgba(254,188,46,.65); }
  .pp-row.low .pp-stock i { background: rgba(254,188,46,.65); }
  .pp-row.low .pp-qty { color: #febc2e; }
  .pp-banner { height: 34px; border-radius: 8px; background: linear-gradient(120deg, rgba(84,197,105,.5), rgba(84,197,105,.1)); flex: none; }
  .pp-cards2 { display: flex; gap: 6px; }
  .pp-pcard { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
  .pp-thumb { height: 22px; border-radius: 5px; background: rgba(84,197,105,.28); }
  .pp-tl { height: 5px; border-radius: 3px; background: rgba(243,243,240,.14); }
  .pp-tl.s { width: 60%; background: rgba(243,243,240,.08); }
  .dphone .pp-leaf { width: 9px; height: 9px; }
  .pp-fab {
    position: absolute; right: 8px; bottom: 28px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
    background: #54c569; color: #0b0c0e; font-size: 13px; font-weight: 800; line-height: 1;
    display: grid; place-items: center; transform: scale(0);
  }
  .wcard.in .pp-fab { animation: mmpop .45s 1s cubic-bezier(.34,1.56,.64,1) forwards; }

  /* PNRgazdanapló — farm log program: records · submission steps · notifications */
  .pnr-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px; padding: 15px 16px; min-height: 252px; }
  .pnr-h { height: 8px; width: 55%; border-radius: 4px; background: rgba(243,243,240,.18); margin-bottom: 2px; }
  .pnr-recs { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; }
  .pnr-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .pnr-chead .pnr-h { margin-bottom: 0; }
  .pnr-chip { font-family: var(--mono); font-size: 9.5px; color: var(--dim); padding: 3px 8px; border: 1px solid var(--line); border-radius: 100px; flex: none; }
  .pnr-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .pnr-l2 { width: 62%; height: 5px; border-radius: 3px; background: rgba(243,243,240,.07); }
  .pnr-rec { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); }
  .wcard.in .pnr-rec { animation: mmappear .45s var(--d,0s) forwards; }
  .pnr-chk { width: 15px; height: 15px; flex: none; border: 1px solid var(--line-strong); border-radius: 5px; position: relative; }
  .pnr-chk::after {
    content: ""; position: absolute; left: 4.5px; top: 2px; width: 3.5px; height: 8px;
    border: solid #54c569; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0);
  }
  .wcard.in .pnr-chk::after { animation: wtick .35s calc(var(--d,0s) + .3s) cubic-bezier(.34,1.56,.64,1) forwards; }
  .pnr-l { flex: 1; height: 8px; border-radius: 4px; background: rgba(243,243,240,.14); }
  .pnr-date { font-family: var(--mono); font-size: 9px; color: var(--dim); flex: none; }
  .pnr-sub { border-left: 1px solid var(--line); padding-left: 15px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .pnr-sub .pnr-done { margin-top: auto; }
  .pnr-steps { display: flex; align-items: center; margin-top: 3px; }
  .pnr-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .wcard.in .pnr-dot { animation: wdot .3s var(--d,0s) forwards; }
  .pnr-seg { flex: 1; height: 2px; background: rgba(243,243,240,.1); overflow: hidden; }
  .pnr-seg i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
  .wcard.in .pnr-seg i { animation: wfill .5s var(--d,0s) ease forwards; }
  .pnr-note { display: flex; flex-direction: column; gap: 6px; }
  .pnr-note span { height: 6px; border-radius: 3px; background: rgba(243,243,240,.08); }
  .pnr-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; opacity: 0; transform: translateY(6px); }
  .wcard.in .pnr-cal { animation: mmappear .5s .7s forwards; }
  .pnr-cal i { aspect-ratio: 1; border-radius: 3px; background: rgba(243,243,240,.07); }
  .pnr-cal i.hi { background: rgba(var(--accent-rgb),.55); }
  .pnr-cal i.g { background: rgba(84,197,105,.5); }
  .pnr-fab {
    position: absolute; right: 8px; bottom: 28px; z-index: 2; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: #0b0c0e; font-size: 13px; font-weight: 800; line-height: 1;
    display: grid; place-items: center; transform: scale(0);
  }
  .wcard.in .pnr-fab { animation: mmpop .45s 1.1s cubic-bezier(.34,1.56,.64,1) forwards; }
  .pnr-done {
    align-self: flex-start; font-family: var(--mono); font-size: 9.5px; color: #54c569;
    border: 1px solid rgba(84,197,105,.4); background: rgba(84,197,105,.12);
    padding: 4px 9px; border-radius: 100px; opacity: 0; transform: translateY(6px);
  }
  .wcard.in .pnr-done { animation: mmappear .45s 1.7s forwards; }
  .pnr-toast {
    position: absolute; top: 34px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 6px;
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #12151a;
    box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(-8px);
  }
  .wcard.in .pnr-toast { animation: mmappear .5s 1.1s forwards; }
  .pnr-bell { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
  .pnr-toast span { width: 46px; height: 5px; border-radius: 3px; background: rgba(243,243,240,.16); }
  .pnr-banner {
    flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 7px;
    border: 1px solid rgba(var(--accent-rgb),.4); border-radius: 8px; background: rgba(var(--accent-rgb),.16);
    opacity: 0; transform: translateY(-6px);
  }
  .wcard.in .pnr-banner { animation: mmappear .45s .9s forwards; }
  .pnr-banner::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
  .pnr-banner span { flex: 1; height: 4px; border-radius: 2px; background: rgba(243,243,240,.16); }

  /* Nagarflex — inventory SaaS: sidebar · toolbar · SKU table · movements */
  .ngx-app { display: flex; min-height: 252px; }
  .ngx-nav2 { flex: none; width: 54px; border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
  .ngx-logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); margin-bottom: 3px; }
  .ngx-mnav { height: 8px; border-radius: 4px; background: rgba(243,243,240,.1); }
  .ngx-mnav.on { background: rgba(var(--accent-rgb),.65); }
  .ngx-body { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.35fr .8fr; gap: 15px; padding: 15px 16px; }
  .ngx-bar { display: flex; gap: 8px; align-items: center; }
  .ngx-search { flex: 1; height: 20px; border: 1px solid var(--line); border-radius: 7px; background: rgba(243,243,240,.04); display: flex; align-items: center; gap: 7px; padding: 0 8px; }
  .ngx-search i { width: 8px; height: 8px; border: 1.5px solid var(--dim); border-radius: 50%; flex: none; }
  .ngx-search span { flex: 1; height: 5px; border-radius: 3px; background: rgba(243,243,240,.1); }
  .ngx-add { flex: none; width: 34px; height: 20px; border-radius: 7px; background: rgba(var(--accent-rgb),.75); color: #0b0c0e; font-weight: 800; font-size: 12px; display: grid; place-items: center; line-height: 1; opacity: 0; transform: translateY(4px); }
  .wcard.in .ngx-add { animation: mmappear .4s .5s forwards; }
  .ngx-name { width: 16%; height: 6px; flex: none; border-radius: 3px; background: rgba(243,243,240,.1); }
  .ngx-flux { display: flex; gap: 6px; }
  .ngx-chip { font-family: var(--mono); font-size: 9px; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--line); opacity: 0; }
  .ngx-chip.cin { color: #54c569; border-color: rgba(84,197,105,.35); }
  .ngx-chip.cout { color: #ff5f57; border-color: rgba(255,95,87,.35); }
  .wcard.in .ngx-chip { animation: mmfade .5s var(--d,0s) forwards; }
  .dp-kpi { display: flex; align-items: baseline; gap: 6px; }
  .dp-kpi b { font-size: 12px; font-weight: 800; line-height: 1; }
  .dp-kpi em { flex: 1; height: 4px; border-radius: 2px; background: rgba(243,243,240,.1); }
  .ngx-tbl { display: flex; flex-direction: column; justify-content: space-between; gap: 11px; min-width: 0; }
  .ngx-head { display: flex; gap: 8px; }
  .ngx-head span { height: 5px; border-radius: 3px; background: rgba(243,243,240,.14); }
  .ngx-head span:nth-child(1) { width: 24%; }
  .ngx-head span:nth-child(2) { flex: 1; }
  .ngx-head span:nth-child(3) { width: 16%; }
  .ngx-row { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px); }
  .wcard.in .ngx-row { animation: mmappear .45s var(--d,0s) forwards; }
  .ngx-sku { font-family: var(--mono); font-size: 10px; color: var(--dim); flex: none; width: 24%; letter-spacing: .03em; }
  .ngx-lvl { flex: 1; height: 7px; border-radius: 4px; background: rgba(243,243,240,.08); overflow: hidden; }
  .ngx-lvl i { display: block; height: 100%; border-radius: 3px; background: rgba(var(--accent-rgb),.65); transform: scaleX(0); transform-origin: left; }
  .wcard.in .ngx-lvl i { animation: wgrow .9s var(--d,0s) cubic-bezier(.16,.84,.34,1) forwards; }
  .ngx-row.low .ngx-lvl i, .dp-row.low .ngx-lvl i { background: rgba(255,95,87,.6); }
  .ngx-dir { font-style: normal; font-family: var(--mono); font-size: 9px; flex: none; opacity: 0; }
  .wcard.in .ngx-dir { animation: mmfade .5s calc(var(--d,0s) + .55s) forwards; }
  .ngx-dir.up { color: #54c569; }
  .ngx-dir.dn { color: #ff5f57; }
  .ngx-pill {
    font-family: var(--mono); font-size: 8.5px; color: #ff5f57; flex: none;
    border: 1px solid rgba(255,95,87,.4); background: rgba(255,95,87,.1);
    padding: 2px 7px; border-radius: 100px; opacity: 0;
  }
  .wcard.in .ngx-pill { animation: mmfade .4s calc(var(--d,0s) + .55s) forwards; }
  .ngx-side { border-left: 1px solid var(--line); padding-left: 15px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
  .ngx-kpi b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
  .ngx-kpi em { display: block; width: 60%; height: 5px; border-radius: 3px; background: rgba(243,243,240,.14); margin-top: 6px; }
  .ngx-delta { font-family: var(--mono); font-size: 10px; color: #54c569; opacity: 0; }
  .wcard.in .ngx-delta { animation: mmfade .5s .8s forwards; }
  .ngx-spark { display: flex; align-items: flex-end; gap: 4px; height: 58px; margin-top: auto; }
  .ngx-spark i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(var(--accent-rgb),.55); height: calc(var(--h,.6) * 100%); transform: scaleY(0); transform-origin: bottom; }
  .wcard.in .ngx-spark i { animation: wgrowY .6s var(--d,0s) cubic-bezier(.16,.84,.34,1) forwards; }

  /* "Your app" — open slot card: empty-state UI assembling itself */
  .wcard-next .win { border-style: dashed; border-color: var(--line-strong); background: rgba(243,243,240,.015); }
  .win-live.nx { color: var(--accent); }
  .win-live.nx::before { background: var(--accent); }
  .nx-body { padding: 17px 18px; display: flex; flex-direction: column; gap: 13px; min-height: 252px; }
  .nx-sk { height: 9px; width: 46%; border-radius: 4px; background: rgba(243,243,240,.1); opacity: 0; transform: translateY(6px); }
  .nx-sk.w2 { width: 30%; height: 6px; background: rgba(243,243,240,.06); }
  .wcard.in .nx-sk { animation: mmappear .5s var(--d,0s) forwards; }
  .nx-grid { display: flex; gap: 9px; margin-top: 2px; }
  .nx-box { flex: 1; height: 62px; border: 1px solid var(--line); border-radius: 9px; background: rgba(243,243,240,.02); opacity: 0; transform: translateY(8px); }
  .nx-box.dash { border-style: dashed; border-color: var(--line-strong); display: grid; place-items: center; color: var(--dim); font-size: 19px; font-weight: 700; }
  .wcard.in .nx-box { animation: mmappear .5s var(--d,0s) forwards; }
  .wcard.in .nx-box.dash { animation: mmappear .5s var(--d,0s) forwards; }
  .nx-cta { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
  .nx-big { font-size: clamp(19px,1.9vw,26px); font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; }
  .nx-caret { width: 2px; height: 1em; background: var(--accent); margin-left: 4px; }
  .nx-sub { font-family: var(--mono); font-size: 10px; color: var(--dim); letter-spacing: .04em; }
  .nx-phone { border-style: dashed; }
  .nx-psk { flex: none; height: 6px; width: 50%; border-radius: 3px; background: rgba(243,243,240,.09); opacity: 0; transform: translateY(5px); }
  .nx-psk.w2 { width: 32%; height: 5px; background: rgba(243,243,240,.06); }
  .wcard.in .nx-psk { animation: mmappear .5s var(--d,0s) forwards; }
  .nx-pbox { flex: none; height: 30px; border: 1px dashed var(--line-strong); border-radius: 8px; opacity: 0; transform: translateY(6px); }
  .wcard.in .nx-pbox { animation: mmappear .5s var(--d,0s) forwards; }
  .nx-plus {
    align-self: center; margin-top: auto; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px dashed var(--line-strong); color: var(--dim);
    display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
    opacity: 0; transform: translateY(6px);
  }
  .wcard.in .nx-plus { animation: mmappear .45s .85s forwards; }

  .wcard-info { padding: 22px 2px 0; }
  .wcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
  .wcard-info h3 {
    font-size: clamp(24px,2.3vw,34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1;
  }
  .wcard-go {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--dim);
    white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; flex: none;
    transition: color 0.35s ease;
  }
  .wcard:hover .wcard-go { color: var(--ink); }
  .wcard-did { margin-top: 12px; color: var(--dim); font-size: 15px; line-height: 1.5; }
  .wcard-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
  .wcard-tags span {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--dim);
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px;
    transition: border-color 0.35s ease, color 0.35s ease;
  }
  .wcard:hover .wcard-tags span { border-color: var(--line-strong); color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    .wcard { opacity: 1; transform: none; }
    .ph { transition: none; }
    .wcard-media { transform: none !important; }
  }

  /* shared motif keyframes (also defined in main.css for the services motifs) */
  @keyframes mmappear { to { opacity: 1; transform: none; } }
  @keyframes mmpop { to { transform: scale(1); } }
  @keyframes mmfade { to { opacity: 1; } }
  @keyframes mmdraw { to { stroke-dashoffset: 0; } }