/* =====================================================================
   AVANT GARDTECH — Portfolio product mockups
   Pure CSS/SVG mini-UIs that suggest each project. All sizing in cqw so
   the scene scales perfectly inside the 16/10 .port-media container.
   ===================================================================== */

.port-media { container-type: inline-size; }
.mk {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  font-family: var(--font);
}
.mk * { box-sizing: border-box; }

/* tiny shared primitives */
.mk-bar { background: currentColor; border-radius: 1cqw; display: block; }
.mk-win-dots { display: flex; gap: 1.4cqw; }
.mk-win-dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: rgba(10,10,10,0.16); }

/* ░ 01 — Ticketing (immersive, dark) ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */
.mk--tix { background: radial-gradient(120% 90% at 70% 0%, #1c2a52 0%, #0b1020 55%, #07090f 100%); }
.mk--tix .glow {
  position: absolute; width: 60cqw; height: 60cqw; left: -10cqw; top: -22cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(21,93,252,0.55), transparent 62%); filter: blur(2cqw);
}
.mk--tix .beam {
  position: absolute; top: -6cqw; left: 56cqw; width: 26cqw; height: 70cqw;
  background: linear-gradient(180deg, rgba(37,195,235,0.30), transparent 70%);
  transform: rotate(18deg); filter: blur(1.5cqw);
}
.phone {
  position: absolute; right: 7cqw; top: 7cqw; width: 39cqw; height: 50cqw;
  background: #0d1322; border: 0.9cqw solid #1b2236; border-radius: 5cqw;
  box-shadow: 0 6cqw 14cqw rgba(0,0,0,0.5); overflow: hidden; transform: rotate(3deg);
}
.phone .notch { position: absolute; top: 1.6cqw; left: 50%; transform: translateX(-50%); width: 12cqw; height: 1.8cqw; background: #060912; border-radius: 2cqw; z-index: 3; }
.phone .poster {
  position: absolute; inset: 0 0 38% 0;
  background: linear-gradient(160deg, #2b3a78 0%, #6d3a8a 55%, #b1486a 100%);
}
.phone .poster::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 1.2cqw, transparent 1.2cqw 5cqw);
}
.phone .play {
  position: absolute; left: 50%; top: 29%; transform: translate(-50%,-50%);
  width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(255,255,255,0.92);
  display: grid; place-items: center; box-shadow: 0 0 0 1.8cqw rgba(255,255,255,0.16);
}
.phone .play::before { content: ""; border-left: 3.4cqw solid var(--ink); border-top: 2.2cqw solid transparent; border-bottom: 2.2cqw solid transparent; margin-left: 0.8cqw; }
.phone .sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: #0d1322; padding: 3cqw 3.4cqw; }
.phone .chip { display: inline-flex; align-items: center; gap: 1cqw; font-size: 2.1cqw; font-weight: 700; color: #7fd0ec; background: rgba(37,195,235,0.14); padding: 0.9cqw 1.8cqw; border-radius: 4cqw; letter-spacing: 0.02em; }
.phone .ttl { color: #fff; height: 2.8cqw; width: 78%; margin-top: 2.4cqw; }
.phone .sub { color: rgba(255,255,255,0.28); height: 1.8cqw; width: 50%; margin-top: 1.6cqw; }
.phone .buy {
  position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3.2cqw; height: 7cqw; border-radius: 2.4cqw;
  background: var(--blue-bright); display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw;
  box-shadow: 0 2cqw 5cqw rgba(21,93,252,0.5);
}
.phone .buy .lbl { color: #fff; font-size: 2.4cqw; font-weight: 700; }
.phone .buy .pr { color: #fff; font-size: 2.6cqw; font-weight: 800; font-variant-numeric: tabular-nums; }

.tix-float {
  position: absolute; left: 6cqw; bottom: 9cqw; width: 33cqw;
  background: rgba(13,19,34,0.86); border: 1px solid rgba(255,255,255,0.12); border-radius: 2.4cqw;
  padding: 2.6cqw 2.8cqw; backdrop-filter: blur(2px);
}
.tix-float .h { display: flex; align-items: center; gap: 1.6cqw; }
.tix-float .av { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: linear-gradient(135deg,#25c3eb,#2563eb); flex: none; }
.tix-float .l1 { color: #fff; height: 2cqw; width: 60%; }
.tix-float .l2 { color: rgba(255,255,255,0.3); height: 1.5cqw; width: 40%; margin-top: 1.2cqw; }
.tix-float .ref { margin-top: 2.4cqw; display: flex; align-items: baseline; gap: 1.4cqw; }
.tix-float .ref b { color: #6ee7a8; font-size: 4.4cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.tix-float .ref span { color: rgba(255,255,255,0.4); font-size: 2cqw; font-weight: 600; }

/* ░ 02 — Hotel booking (browser, light) ░░░░░░░░░░░░░░░░░░░░░░░░░░░ */
.mk--win { background: linear-gradient(160deg, #eef3fb 0%, #dde6f5 100%); }
.win {
  position: absolute; left: 6cqw; right: 6cqw; top: 6cqw; bottom: 0;
  background: #fff; border-radius: 3cqw 3cqw 0 0; overflow: hidden;
  box-shadow: 0 5cqw 13cqw rgba(20,40,90,0.18); border: 1px solid rgba(10,10,10,0.06);
}
.win .topbar { height: 7cqw; display: flex; align-items: center; gap: 2.6cqw; padding: 0 3cqw; border-bottom: 1px solid rgba(10,10,10,0.07); }
.win .url { flex: 1; height: 3.6cqw; background: #f1f1ef; border-radius: 2cqw; }
.win .body { position: absolute; inset: 7cqw 0 0 0; padding: 3.4cqw; }

.hotel { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4cqw; height: 100%; }
.hotel .photo { border-radius: 2.4cqw; background: linear-gradient(155deg,#3a6ad4,#7bb0e8 60%,#cfe0f4); position: relative; overflow: hidden; }
.hotel .photo::after { content: ""; position: absolute; left: 14%; bottom: 0; width: 30%; height: 56%; background: rgba(255,255,255,0.16); clip-path: polygon(0 100%,50% 0,100% 100%); }
.hotel .photo .stamp { position: absolute; top: 2.4cqw; left: 2.4cqw; font-size: 1.9cqw; font-weight: 700; color: #fff; background: rgba(10,20,40,0.35); padding: 0.8cqw 1.8cqw; border-radius: 3cqw; letter-spacing: 0.04em; }
.hotel .info { display: flex; flex-direction: column; }
.hotel .brand { display: flex; align-items: center; gap: 1.6cqw; }
.hotel .brand .dot { width: 4.6cqw; height: 4.6cqw; border-radius: 1.4cqw; background: linear-gradient(135deg,#1447e6,#155dfc); }
.hotel .brand .nm { color: var(--ink); height: 2cqw; width: 22cqw; }
.hotel .title { color: var(--ink-800); height: 3.2cqw; width: 86%; margin-top: 3cqw; }
.hotel .title.s { width: 60%; margin-top: 1.8cqw; }
.hotel .dates { display: flex; gap: 1.6cqw; margin-top: 3cqw; }
.hotel .dates .d { flex: 1; height: 6cqw; border-radius: 1.8cqw; border: 1px solid rgba(10,10,10,0.12); background: #fafafa; }
.hotel .price { margin-top: auto; display: flex; align-items: baseline; gap: 1.4cqw; }
.hotel .price b { color: var(--ink); font-size: 5cqw; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.hotel .price span { color: var(--ink-500); font-size: 2.1cqw; font-weight: 600; }
.hotel .book { margin-top: 2.4cqw; height: 7cqw; border-radius: 2cqw; background: var(--blue); display: grid; place-items: center; box-shadow: 0 2cqw 5cqw rgba(20,71,230,0.3); }
.hotel .book span { color: #fff; font-size: 2.4cqw; font-weight: 700; }

/* ░ 03 — eLearning (browser dashboard, light) ░░░░░░░░░░░░░░░░░░░░ */
.mk--edu { background: linear-gradient(160deg,#eaf0fa,#e0e9f6); }
.mk--edu .body { position: absolute; inset: 7cqw 0 0 0; display: grid; grid-template-columns: 17cqw 1fr; }
.mk--edu .side { background: #0f1830; padding: 3cqw 2.4cqw; }
.mk--edu .side .brand { display: flex; align-items: center; gap: 1.4cqw; }
.mk--edu .side .brand .dot { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: linear-gradient(135deg,#25c3eb,#2563eb); flex: none; }
.mk--edu .side .brand .nm { color: rgba(255,255,255,0.85); height: 1.8cqw; width: 8cqw; }
.mk--edu .side .nav { margin-top: 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.mk--edu .side .nav i { height: 2cqw; border-radius: 1cqw; background: rgba(255,255,255,0.14); display: block; }
.mk--edu .side .nav i.on { background: var(--blue-bright); width: 80%; }
.mk--edu .side .nav i:nth-child(2){width:70%}.mk--edu .side .nav i:nth-child(3){width:85%}.mk--edu .side .nav i:nth-child(4){width:60%}
.mk--edu .main { padding: 3.4cqw; }
.mk--edu .head { display: flex; align-items: center; justify-content: space-between; }
.mk--edu .head .h { color: var(--ink-800); height: 3cqw; width: 28cqw; }
.mk--edu .head .pill { width: 7cqw; height: 7cqw; border-radius: 50%; background: linear-gradient(135deg,#1447e6,#25c3eb); }
.mk--edu .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; margin-top: 3.4cqw; }
.mk--edu .crs { border: 1px solid rgba(10,10,10,0.09); border-radius: 2.2cqw; background: #fff; overflow: hidden; box-shadow: 0 1.5cqw 4cqw rgba(20,40,90,0.06); }
.mk--edu .crs .thumb { height: 11cqw; background: linear-gradient(150deg,#4f7be6,#9ec3ef); }
.mk--edu .crs:nth-child(2) .thumb { background: linear-gradient(150deg,#7a52c9,#d29ad6); }
.mk--edu .crs .pad { padding: 2.2cqw; }
.mk--edu .crs .t { color: var(--ink-700); height: 2cqw; width: 88%; }
.mk--edu .crs .t.s { width: 56%; margin-top: 1.4cqw; }
.mk--edu .crs .track { margin-top: 2.6cqw; height: 1.8cqw; border-radius: 2cqw; background: #edf0f6; overflow: hidden; }
.mk--edu .crs .track i { display: block; height: 100%; border-radius: 2cqw; background: var(--blue); }
.mk--edu .crs .pct { margin-top: 1.4cqw; color: var(--ink-400); font-size: 1.8cqw; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ░ 04 — Gardening landing + chatbot (browser, green) ░░░░░░░░░░░ */
.mk--grd { background: linear-gradient(160deg,#e8f1e6,#dbe9d6); }
.mk--grd .body { position: absolute; inset: 7cqw 0 0 0; padding: 0; }
.mk--grd .nav { height: 6.6cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; border-bottom: 1px solid rgba(10,10,10,0.06); }
.mk--grd .nav .lg { display: flex; align-items: center; gap: 1.4cqw; }
.mk--grd .nav .lg .leaf { width: 4cqw; height: 4cqw; border-radius: 50% 0 50% 50%; background: #2f8f4e; transform: rotate(45deg); }
.mk--grd .nav .lg .nm { color: var(--ink); height: 1.8cqw; width: 14cqw; }
.mk--grd .nav .menu { display: flex; gap: 2.2cqw; }
.mk--grd .nav .menu i { width: 6cqw; height: 1.6cqw; border-radius: 1cqw; background: rgba(10,10,10,0.14); }
.mk--grd .hero { position: relative; padding: 5cqw 4cqw; height: calc(100% - 6.6cqw); overflow: hidden; background: linear-gradient(120deg,#f4f9f1 60%, #e3f0dd); }
.mk--grd .hero .eg { color: #2f8f4e; height: 1.8cqw; width: 16cqw; opacity: 0.7; }
.mk--grd .hero .hl { color: var(--ink); height: 4cqw; width: 60%; margin-top: 2.8cqw; }
.mk--grd .hero .hl.s { width: 44%; margin-top: 2cqw; }
.mk--grd .hero .cta { margin-top: 3.4cqw; width: 22cqw; height: 6cqw; border-radius: 2cqw; background: #2f8f4e; display: grid; place-items: center; box-shadow: 0 2cqw 5cqw rgba(47,143,78,0.32); }
.mk--grd .hero .cta span { color: #fff; font-size: 2.2cqw; font-weight: 700; }
.mk--grd .hero .blob { position: absolute; right: -8cqw; bottom: -14cqw; width: 40cqw; height: 40cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6fbf7f, #2f8f4e 70%); opacity: 0.85; }
.mk--grd .hero .blob::after { content: ""; position: absolute; right: 22%; top: 24%; width: 40%; height: 40%; border-radius: 50% 0 50% 50%; background: rgba(255,255,255,0.18); transform: rotate(45deg); }

.chat {
  position: absolute; right: 4cqw; bottom: 4cqw; width: 30cqw;
  background: #fff; border-radius: 2.6cqw; box-shadow: 0 4cqw 11cqw rgba(20,50,30,0.22);
  border: 1px solid rgba(10,10,10,0.06); overflow: hidden; z-index: 4;
}
.chat .bar { height: 6cqw; background: #2f8f4e; display: flex; align-items: center; gap: 1.4cqw; padding: 0 2.4cqw; }
.chat .bar .ic { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255,255,255,0.9); }
.chat .bar .nm { height: 1.8cqw; width: 13cqw; background: rgba(255,255,255,0.85); border-radius: 1cqw; }
.chat .msgs { padding: 2.6cqw; display: flex; flex-direction: column; gap: 2cqw; }
.chat .b { max-width: 80%; height: 4.4cqw; border-radius: 2cqw; }
.chat .b.in { background: #eef1f4; align-self: flex-start; width: 74%; }
.chat .b.out { background: #d6ecd9; align-self: flex-end; width: 56%; height: 3.4cqw; }
.chat .input { margin: 0 2.6cqw 2.6cqw; height: 5cqw; border-radius: 2.6cqw; background: #f3f4f2; border: 1px solid rgba(10,10,10,0.07); display: flex; align-items: center; padding: 0 2cqw; justify-content: space-between; }
.chat .input .ph { width: 50%; height: 1.6cqw; border-radius: 1cqw; background: rgba(10,10,10,0.12); }
.chat .input .send { width: 4cqw; height: 4cqw; border-radius: 50%; background: #2f8f4e; }