/* ===== Shared depth-layer components (themed via each variant's CSS vars) =====
   Expected vars: --accent --ink --muted --card --border --panel --radius(optional)
   Reused by both variants. Motion respects prefers-reduced-motion. */

/* ---- icon primitives ---- */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;stroke:none}
.icon-tile{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent)}
.icon-tile .ico{width:28px;height:28px;stroke-width:1.8}
.icon-tile--solid{background:var(--accent);color:#fff}

/* ---- animated counter ---- */
.count{font-variant-numeric:tabular-nums}

/* ---- marquee (logo/trades/pages strip) ---- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:56px;animation:mq-scroll 32s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:12px;white-space:nowrap;font-weight:600;color:var(--muted)}
.marquee__item .ico{width:26px;height:26px;color:var(--accent);stroke-width:1.7}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ---- section shape divider ---- */
.divider{display:block;width:100%;height:60px;line-height:0}
.divider svg{width:100%;height:100%;display:block}

/* ---- badges / floating cards ---- */
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.badge .ico{width:15px;height:15px;stroke-width:2}
.float-card{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.28);display:flex;align-items:center;gap:12px}
.float-card .ico{width:20px;height:20px}

/* ---- device mockups (portfolio) ---- */
.device{border-radius:12px;overflow:hidden;background:#0b0d10;border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.30);position:relative}
.device__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1b1f26;border-bottom:1px solid rgba(255,255,255,.06)}
.device__bar i{width:11px;height:11px;border-radius:50%;background:#3a4049;display:block}
.device__bar i:nth-child(1){background:#ff5f57}.device__bar i:nth-child(2){background:#febc2e}.device__bar i:nth-child(3){background:#28c840}
.device__bar .url{margin-left:12px;height:18px;flex:1;max-width:340px;border-radius:6px;background:#2a2f37}
.device img{display:block;width:100%;height:auto}
.device-phone{width:200px;border-radius:22px;border:6px solid #12151a;background:#12151a;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.32);position:relative}
.device-phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);z-index:2}
.device-phone img{display:block;width:100%;height:auto}

/* portfolio slider */
.pf-rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 22px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pf-rail::-webkit-scrollbar{height:8px}.pf-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.pf-slide{scroll-snap-align:start;flex:0 0 clamp(300px,44%,560px)}
.pf-slide .device{transition:transform .3s ease}
.pf-slide:hover .device{transform:translateY(-6px)}
.pf-slide .pf-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.pf-slide .pf-meta .t{font-weight:700}
.pf-slide .pf-meta .badge{font-size:12px}
.pf-combo{position:relative;padding-right:60px}
.pf-combo .device-phone{position:absolute;right:0;bottom:-14px;width:120px}
.pf-nav{display:flex;gap:10px;justify-content:center;margin-top:22px}
.pf-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .18s,transform .18s}
.pf-nav button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.pf-nav .ico{width:20px;height:20px;stroke-width:2}

/* ---- UI mockups (illustrative) ---- */
.uimock{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.uimock__top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--muted)}
.uimock__top .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.uimock__body{padding:18px}
.mock-row{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:10px;border:1px solid var(--border);margin-bottom:10px}
.mock-row .ico{width:18px;height:18px;color:var(--accent)}
.mock-row .grow{flex:1}
.mock-row .bar{height:9px;border-radius:5px;background:color-mix(in srgb,var(--muted) 35%,transparent)}
.mock-row .pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.mock-row .pill--new{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
/* chat thread */
.chat{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:80%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.45}
.bubble--in{align-self:flex-start;background:color-mix(in srgb,var(--muted) 16%,transparent);border-bottom-left-radius:4px}
.bubble--out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble .meta{display:block;font-size:11px;opacity:.7;margin-top:4px}
/* google search result mock */
.serp{font-size:13px}
.serp .ad{display:inline-block;font-size:11px;font-weight:800;color:var(--accent);margin-bottom:4px}
.serp .u{color:var(--muted);font-size:12px}
.serp .h{color:#1a6fe0;font-size:16px;font-weight:600;margin:2px 0 4px}
.serp .d{color:var(--muted)}
.illus-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:5px 12px;border-radius:999px}

/* ---- image frame treatment (consistent grade overlay) ---- */
.ph{position:relative;overflow:hidden;background:#141414 center/cover no-repeat;filter:saturate(.92) contrast(1.02)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,transparent) 0%,rgba(12,14,18,.18) 45%,rgba(8,9,12,.42) 100%)}
.ph--light::after{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(255,255,255,.02))}

/* ---- reveal / motion ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.pf-slide:hover .device,.device{transition:none}}