/* ===== Project demo "videos" ===== */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proj { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.proj:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.proj__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.proj__body h3 { font-size: 1.5rem; margin-bottom: .35em; }
.proj__body > p:not(.tag) { color: var(--muted); font-size: .97rem; }
.tag { font-size: .78rem; font-weight: 600; color: var(--accent); margin-bottom: .5em; }
.proj__metrics { display: flex; gap: 32px; margin-top: auto; padding-top: 1.1em; border-top: 1px solid var(--line); }
.proj__metrics b { display: block; font: 800 1.6rem var(--font-head); letter-spacing: -.02em; }
.proj__metrics small { color: var(--muted); font-size: .82rem; }

.proj--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; }
.proj--wide .proj__body { justify-content: center; padding: 40px; }
.proj--wide .proj__body h3 { font-size: 1.9rem; }

/* Player */
.player { position: relative; overflow: hidden; }
.stage { position: relative; height: 590px; display: grid; place-items: center; padding: 28px 20px 64px; overflow: hidden; isolation: isolate; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; }
.stage--1 { background: radial-gradient(420px 320px at 25% 15%, rgba(59,130,246,.55), transparent 70%), #0b1b33; }
.stage--2 { background: radial-gradient(420px 320px at 80% 20%, rgba(245,165,36,.42), transparent 70%), #0d1a2e; }
.stage--3 { background: radial-gradient(420px 320px at 20% 85%, rgba(20,184,166,.45), transparent 70%), #0b1b33; }
.stage--4 { height: auto; min-height: 480px; padding: 48px 40px 76px; background: radial-gradient(520px 360px at 85% 10%, rgba(59,130,246,.5), transparent 70%), radial-gradient(420px 300px at 5% 95%, rgba(245,165,36,.25), transparent 70%), #0b1b33; }

.live { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(8px); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.player__ui { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(8, 16, 30, .55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.player__btn { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: #0b1b33; display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.player__btn:hover { transform: scale(1.08); }
.player__btn svg { width: 14px; height: 14px; fill: currentColor; }
.player .i-play { display: none; }
.player.is-paused .i-play { display: block; }
.player.is-paused .i-pause { display: none; }
.player.is-paused * { animation-play-state: paused !important; }
.player__bars { flex: 1; display: flex; gap: 5px; }
.seg { flex: 1; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.seg i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; position: relative; }
.seg i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: #fff; border-radius: 2px; }

/* Phone */
.phone { width: 244px; height: 500px; border-radius: 40px; padding: 8px; background: #05080f; box-shadow: 0 0 0 1.5px #2a3448, 0 40px 80px -24px rgba(0,0,0,.7), inset 0 0 0 1px #000; position: relative; }
.phone__screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; color: #0b1b33; font: 400 12px/1.4 var(--font-body); }
.phone__screen::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 76px; height: 20px; border-radius: 99px; background: #05080f; z-index: 10; }

.scr { position: absolute; inset: 0; padding: 40px 14px 14px; opacity: 0; transform: translateX(26px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.scr.is-prev { transform: translateX(-26px); }
.scr.is-active { opacity: 1; transform: none; }
.scr--dark { background: #070d18; color: #fff; }
.scr--center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.scr--center h4 { font: 800 18px var(--font-head); margin: 10px 0 0; }
.scr--center p { color: #55627a; margin: 0 0 8px; }

/* generic animated bits */
.pop { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .35s ease; }
.pop.on { opacity: 1; transform: none; }
.tap { position: absolute; left: var(--x); top: var(--y); width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(29,78,216,.22); border: 2px solid rgba(29,78,216,.65); opacity: 0; pointer-events: none; z-index: 8; }
.tap.on { animation: tap .65s ease-out forwards; }
@keyframes tap { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.5); } }

.app-h { margin-bottom: 10px; }
.app-h b { display: block; font: 800 16px var(--font-head); letter-spacing: -.01em; }
.app-h small { color: #6b7790; font-size: 11px; }

/* QR camera */
.cam { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.cam p { margin: 0; color: #b9c5d8; font-size: 12px; }
.cam__frame { position: relative; width: 150px; height: 150px; display: grid; place-items: center;
  background:
    linear-gradient(#4f7dff, #4f7dff) top left / 26px 3px, linear-gradient(#4f7dff, #4f7dff) top left / 3px 26px,
    linear-gradient(#4f7dff, #4f7dff) top right / 26px 3px, linear-gradient(#4f7dff, #4f7dff) top right / 3px 26px,
    linear-gradient(#4f7dff, #4f7dff) bottom left / 26px 3px, linear-gradient(#4f7dff, #4f7dff) bottom left / 3px 26px,
    linear-gradient(#4f7dff, #4f7dff) bottom right / 26px 3px, linear-gradient(#4f7dff, #4f7dff) bottom right / 3px 26px;
  background-repeat: no-repeat; }
.qr { width: 104px; height: 104px; fill: #fff; padding: 6px; }
.cam__line { position: absolute; left: 10px; right: 10px; top: 12%; height: 2px; background: #60a5fa; box-shadow: 0 0 12px 2px rgba(96,165,250,.8); animation: scan 1.4s ease-in-out infinite alternate; }
@keyframes scan { to { top: 86%; } }
.chip-ok { background: #0f9d6b; color: #fff; font-weight: 700; padding: 6px 14px; border-radius: 99px; }

/* Menu list */
.tabs { display: flex; gap: 5px; margin-bottom: 8px; }
.tabs > span { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: #f0f3f8; color: #55627a; }
.tabs > span.on { background: #0b1b33; color: #fff; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf0f5; }
.menu li > div { flex: 1; min-width: 0; }
.menu b { display: block; font-size: 12.5px; }
.menu small { display: block; color: #8691a6; font-size: 10.5px; }
.menu em { font-style: normal; font-weight: 700; color: #1d4ed8; font-size: 11.5px; }
.thumb { width: 40px; height: 40px; border-radius: 12px; background: #f2f5fa; display: grid; place-items: center; font-size: 19px; flex: none; }
.add { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #e4ecff; color: #1d4ed8; font-weight: 700; font-size: 16px; transition: background .2s, color .2s, transform .2s; flex: none; }
.add.on { background: #1d4ed8; color: #fff; transform: scale(1.12); }
.cartbar { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 8px; background: #0b1b33; color: #fff; padding: 11px 12px; border-radius: 14px; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(11,27,51,.6); }
.cartbar b { margin-left: auto; }
.cartbar__n { width: 20px; height: 20px; border-radius: 50%; background: #f5a524; color: #0b1b33; display: grid; place-items: center; font-size: 11px; font-weight: 800; }

/* Cart & checkout */
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed #dfe5ee; font-size: 12.5px; }
.note { background: #fff6e3; color: #8a5a00; border-radius: 10px; padding: 8px 10px; font-size: 11px; margin: 12px 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 12px; margin-top: 10px; }
.total b { font: 800 17px var(--font-head); }
.cta { position: absolute; left: 12px; right: 12px; bottom: 14px; background: #1d4ed8; color: #fff; text-align: center; font-weight: 700; font-size: 13px; padding: 13px; border-radius: 14px; transition: transform .15s, background .2s, opacity .35s; box-shadow: 0 10px 22px -10px rgba(29,78,216,.8); }
.cta:not(.pop).on { transform: scale(.95); background: #163fb3; }
.bigcheck { width: 74px; height: 74px; border-radius: 50%; background: #0f9d6b; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(15,157,107,.14); }
.bigcheck svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pill { background: #e4ecff; color: #1d4ed8; font-weight: 700; padding: 6px 14px; border-radius: 99px; }

/* Booking */
.svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svc li { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1.5px solid #e3e8f0; border-radius: 12px; transition: border-color .25s, background .25s; }
.svc b { display: block; font-size: 12.5px; }
.svc small { color: #8691a6; }
.svc em { font-style: normal; font-weight: 800; }
.svc li.on { border-color: #1d4ed8; background: #eef3ff; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11.5px; }
.cal span { padding: 7px 0; border-radius: 8px; font-weight: 500; transition: background .25s, color .25s; }
.cal .dow { font-size: 10px; font-weight: 700; color: #8691a6; padding: 2px 0; }
.cal .off { color: #c3cad6; }
.cal .d14.on { background: #1d4ed8; color: #fff; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.slots span { text-align: center; padding: 8px 0; border: 1.5px solid #e3e8f0; border-radius: 9px; font-weight: 600; font-size: 11.5px; transition: all .25s; }
.slots .off { color: #c3cad6; text-decoration: line-through; }
.slots .s1530.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.notif { position: absolute; top: 34px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: center; text-align: left; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 12px 30px -8px rgba(11,27,51,.35); border: 1px solid #edf0f5; transform: translateY(-16px); }
.notif.on { transform: none; }
.notif > span { width: 30px; height: 30px; border-radius: 9px; background: #25d366; display: grid; place-items: center; font-size: 15px; flex: none; }
.notif b { display: block; font-size: 11.5px; }
.notif small { color: #55627a; font-size: 11px; }
.ticket { width: 100%; background: #f3f6fb; border-radius: 12px; padding: 6px 12px; margin-top: 10px; text-align: left; }
.ticket div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 11.5px; }
.ticket div + div { border-top: 1px solid #e3e8f0; }
.ticket small { color: #8691a6; }

/* Delivery */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard { position: relative; background: #f5f7fb; border-radius: 14px; padding: 10px 10px 12px; }
.pz { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; font-size: 24px; margin-bottom: 8px; box-shadow: 0 4px 12px -4px rgba(11,27,51,.2); }
.pcard b { display: block; font-size: 12px; }
.pcard em { font-style: normal; font-weight: 700; color: #1d4ed8; font-size: 11.5px; }
.pcard .add { position: absolute; right: 8px; bottom: 8px; }
.segctl { display: flex; background: #f0f3f8; border-radius: 11px; padding: 3px; margin-bottom: 6px; }
.segctl > span { flex: 1; text-align: center; padding: 7px; border-radius: 9px; font-weight: 600; color: #55627a; transition: all .25s; }
.segctl > .segon.on { background: #fff; color: #0b1b33; box-shadow: 0 2px 6px rgba(11,27,51,.12); }
.field { padding: 8px 0; border-bottom: 1px solid #edf0f5; }
.field small { display: block; color: #8691a6; font-size: 10.5px; }
.field b { font-size: 12.5px; }
.map { position: relative; height: 140px; border-radius: 14px; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(90deg, rgba(11,27,51,.05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(rgba(11,27,51,.05) 1px, transparent 1px) 0 0 / 22px 22px, #eaf2ee; }
.road { position: absolute; left: 18%; right: 18%; top: 52%; border-top: 3px dashed #94a3b8; }
.pin-a, .pin-b { position: absolute; top: 52%; translate: -50% -50%; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 17px; box-shadow: 0 4px 12px -2px rgba(11,27,51,.3); }
.pin-a { left: 18%; } .pin-b { left: 82%; }
.scooter { position: absolute; top: 30%; left: 20%; font-size: 22px; transform: scaleX(-1); transition: left 1.5s ease-in-out; }
.scooter.on { left: 66%; }
.track { list-style: none; margin: 0; padding: 0 0 0 4px; }
.track li { position: relative; padding: 0 0 16px 26px; color: #9aa5b8; font-weight: 500; transition: color .3s; }
.track li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #cfd6e1; background: #fff; transition: all .3s; box-sizing: border-box; }
.track li::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: #e3e8f0; }
.track li:last-child::after { display: none; }
.track li.on { color: #0b1b33; font-weight: 700; }
.track li.on::before { background: #0f9d6b; border-color: #0f9d6b; box-shadow: 0 0 0 4px rgba(15,157,107,.15); }

/* Desktop dashboard */
.fit { width: 100%; max-width: 860px; aspect-ratio: 760 / 440; position: relative; }
.desk { position: absolute; top: 0; left: 0; width: 760px; height: 440px; transform: scale(var(--s, 1)); transform-origin: top left; background: #fff; color: #0b1b33; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 90px -30px rgba(0,0,0,.75); font: 400 12px/1.4 var(--font-body); }
.desk__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f3f6fb; border-bottom: 1px solid #e3e8f0; }
.desk__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.desk__bar i:nth-child(2) { background: #febc2e; } .desk__bar i:nth-child(3) { background: #28c840; }
.desk__bar span { margin-left: 12px; font-size: 11px; color: #6b7790; background: #fff; border: 1px solid #e3e8f0; padding: 2px 12px; border-radius: 6px; }
.desk__body { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 34px); }
.side { background: #0b1b33; color: #b9c5d8; padding: 16px 10px; display: flex; flex-direction: column; gap: 3px; }
.side__logo { color: #fff; font: 800 15px var(--font-head); padding: 0 8px 14px; }
.side__i { padding: 8px 10px; border-radius: 8px; font-size: 12px; transition: background .3s, color .3s; }
.side__i.on { background: rgba(255,255,255,.1); color: #fff; }
.desk__main { position: relative; overflow: hidden; }
.scr--desk { padding: 16px; }
.dk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dk-kpis > div { background: #f3f6fb; border-radius: 10px; padding: 10px 12px; }
.dk-kpis small { display: block; color: #6b7790; font-size: 10.5px; }
.dk-kpis b { font: 800 19px var(--font-head); }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.col { background: #f6f8fb; border-radius: 10px; padding: 8px; min-height: 250px; }
.col h5 { font: 700 10px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: #6b7790; margin: 2px 2px 8px; }
.oc { position: relative; background: #fff; border: 1px solid #e3e8f0; border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; font-size: 11px; max-height: 80px; transition: opacity .35s, transform .35s, max-height .35s, padding .35s, margin .35s; }
.oc b { display: block; font-size: 11.5px; padding-right: 50px; }
.oc small { color: #6b7790; }
.oc--new { border-left: 3px solid #f5a524; }
.oc--done { opacity: .65; }
.oc.gone { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; overflow: hidden; }
.oc__btn { position: absolute; right: 8px; top: 8px; background: #1d4ed8; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; transition: transform .15s, background .2s; }
.oc__btn.on { transform: scale(.9); background: #0f9d6b; }
.oc__time { position: absolute; right: 8px; top: 8px; color: #6b7790; font-size: 10.5px; font-weight: 600; }
.toast { position: absolute; right: 16px; bottom: 16px; background: #0b1b33; color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; box-shadow: 0 12px 28px -8px rgba(11,27,51,.6); }
.dk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.panel { background: #f6f8fb; border-radius: 12px; padding: 12px 14px; }
.panel h5 { font: 700 11px var(--font-body); color: #55627a; margin: 0 0 10px; }
.panel--row { grid-column: 1 / -1; display: flex; justify-content: space-around; text-align: center; }
.panel--row small { display: block; color: #6b7790; font-size: 10.5px; }
.panel--row b { font: 800 18px var(--font-head); }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 170px; }
.vbars i { flex: 1; height: 3%; border-radius: 6px 6px 2px 2px; background: linear-gradient(#3b82f6, #1d4ed8); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.vbars i.on { height: var(--h); }
.vlabels { margin-top: 6px; font-size: 10px; color: #8691a6; letter-spacing: 1.95em; padding-left: 10px; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hbars li { font-size: 11px; font-weight: 600; }
.hbars i { display: block; margin-top: 4px; height: 8px; width: 0; border-radius: 4px; background: linear-gradient(90deg, #f5a524, #fbbf24); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.hbars i.on { width: var(--w); }

/* Responsive */
@media (max-width: 1024px) {
  .projects { grid-template-columns: 1fr 1fr; }
  .proj--wide { grid-template-columns: 1fr; }
  .proj--wide .proj__body { padding: 28px; }
  .stage--4 { padding: 44px 20px 72px; min-height: 0; }
}
@media (max-width: 640px) {
  .projects { grid-template-columns: 1fr; }
  .stage { height: 570px; }
  .stage--4 { height: auto; padding: 44px 14px 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .scr, .pop, .tap, .vbars i, .hbars i, .scooter { transition: none !important; }
}

/* ===== Layout: 6-column grid (phones span 2, halves span 3, wide spans all) ===== */
.projects { grid-template-columns: repeat(6, 1fr); }
.proj { grid-column: span 2; }
.proj--half { grid-column: span 3; }
.proj--wide { grid-column: 1 / -1; }
.proj--rev { grid-template-columns: 1fr 1.6fr; }
.proj--rev .player { order: 2; }

.stage--5 { background: radial-gradient(420px 320px at 75% 15%, rgba(56,189,248,.45), transparent 70%), #0b1b33; }
.stage--6 { background: radial-gradient(420px 320px at 20% 20%, rgba(239,68,68,.38), transparent 70%), #0d1a2e; }
.stage--7 { height: auto; min-height: 480px; padding: 48px 40px 76px; background: radial-gradient(520px 360px at 15% 10%, rgba(201,162,39,.38), transparent 70%), radial-gradient(420px 300px at 95% 95%, rgba(59,130,246,.35), transparent 70%), #0b1b33; }

/* Doctor app */
.search { background: #f0f3f8; border-radius: 10px; padding: 9px 10px; color: #8691a6; margin-bottom: 10px; font-size: 11.5px; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.docs li { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1.5px solid #e3e8f0; border-radius: 12px; transition: border-color .25s, background .25s; }
.docs li.on { border-color: #1d4ed8; background: #eef3ff; }
.docs b { display: block; font-size: 12.5px; }
.docs small { display: block; color: #8691a6; font-size: 10.5px; }
.docs em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #0f9d6b; }
.dav { width: 40px; height: 40px; border-radius: 50%; background: #e6f4fb; display: grid; place-items: center; font-size: 21px; flex: none; }
.dav--lg { width: 50px; height: 50px; font-size: 27px; }
.dochead { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.dochead b { display: block; font: 800 15px var(--font-head); }
.dochead small { color: #6b7790; font-size: 11px; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.days > span { text-align: center; padding: 7px 0; border: 1.5px solid #e3e8f0; border-radius: 11px; font-weight: 800; font-size: 15px; transition: all .25s; }
.days small { display: block; font-size: 10px; font-weight: 600; color: #8691a6; }
.days .dsel.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.days .dsel.on small { color: #c7d7ff; }
.notif > span.notif__mail { background: #1d4ed8; }

/* Garage website */
.scr--site { padding: 38px 0 0; }
.gnav { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 10px; }
.gnav b { font: 800 14px var(--font-head); }
.ghero { margin: 0 10px; padding: 16px; border-radius: 16px; color: #fff; background: radial-gradient(200px 120px at 100% 0%, rgba(239,68,68,.45), transparent 70%), linear-gradient(160deg, #111827, #1f2937); }
.ghero small { color: #fca5a5; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ghero h4 { font: 800 21px/1.1 var(--font-head); margin: 6px 0 8px; }
.gstars { color: #fbbf24; font-size: 12px; margin: 0 0 4px; }
.gstars > span { color: #cbd5e1; font-size: 10.5px; }
.gbtn { background: #ef4444; color: #fff; text-align: center; padding: 10px; border-radius: 10px; font-weight: 700; margin-top: 8px; transition: transform .15s, background .2s; }
.gbtn.on { transform: scale(.95); background: #dc2626; }
.gbtn--wa { background: #25d366; margin-top: 6px; }
.gserv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 10px; }
.gserv > span { background: #f5f7fb; border-radius: 12px; padding: 10px 4px; text-align: center; font-size: 19px; }
.gserv b { display: block; font-size: 10.5px; margin-top: 3px; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gchips > span { padding: 6px 11px; border: 1.5px solid #e3e8f0; border-radius: 99px; font-weight: 600; font-size: 11px; transition: all .25s; }
.gchips .gsel.on { background: #ef4444; border-color: #ef4444; color: #fff; }
.plate { display: inline-block; min-width: 104px; margin-top: 3px; padding: 2px 8px; border: 2px solid #1e3a8a; border-left: 10px solid #1d4ed8; border-radius: 5px; font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; }

/* Law firm website */
.lw h4, .lw__nav b, .lw__h, .lw__areas b, .lw__badge b, .lw__free b { font-family: Georgia, "Times New Roman", serif; }
.lw__view { position: relative; height: calc(100% - 34px); overflow: hidden; }
.scr--desk.lw__scr { padding: 0; }
.lw__page { transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
.lw__page.on { transform: translateY(-196px); }
.lw__nav { display: flex; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 1px solid #eef0f4; background: #fff; }
.lw__nav b { margin-right: auto; letter-spacing: .14em; font-size: 13px; color: #10203b; }
.lw__nav em { font-style: normal; color: #b8913a; }
.lw__nav > span { font-size: 11px; color: #55627a; }
.lw__nav i { font-style: normal; background: #10203b; color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.lw__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: 28px 24px; background: #f8f6f1; }
.lw__hero small { color: #b8913a; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.lw__hero h4 { font-size: 28px; line-height: 1.15; color: #10203b; margin: 8px 0 10px; font-weight: 700; }
.lw__hero p { color: #55627a; font-size: 12.5px; margin: 0 0 12px; }
.lw__btn { display: inline-block; background: #b8913a; color: #fff; padding: 9px 16px; border-radius: 4px; font-weight: 700; font-size: 12px; transition: transform .15s, background .2s; }
.lw__art { position: relative; height: 190px; border-radius: 8px; background: linear-gradient(150deg, #10203b, #1e3a66); display: grid; place-items: center; }
.lw__art > span { font-size: 64px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.lw__badge { position: absolute; left: -14px; bottom: 18px; background: #fff; border-radius: 8px; padding: 8px 12px; box-shadow: 0 10px 24px -8px rgba(16,32,59,.4); }
.lw__badge--2 { left: auto; right: -10px; top: 16px; bottom: auto; }
.lw__badge b { display: block; font-size: 18px; color: #10203b; }
.lw__badge small { color: #6b7790; font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.lw__h { font-size: 19px; color: #10203b; margin: 22px 24px 12px; font-weight: 700; }
.lw__areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 24px 24px; }
.lw__areas > div { background: #fff; border: 1px solid #eceae4; border-top: 3px solid #b8913a; border-radius: 8px; padding: 12px; font-size: 20px; }
.lw__areas b { display: block; font-size: 13px; color: #10203b; margin-top: 6px; }
.lw__areas small { display: block; font-size: 10.5px; color: #6b7790; }
.lw__book { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; padding: 18px 24px; }
.lw__form h4 { font-size: 20px; color: #10203b; margin: 0 0 10px; }
.lw__form label { display: block; border: 1px solid #e3e1da; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
.lw__form label small { display: block; font-size: 10px; color: #8691a6; }
.lw__form label b { display: block; font-size: 12px; font-weight: 500; min-height: 17px; }
.lw__ta b { min-height: 34px !important; }
.lw__check { display: flex; gap: 8px; align-items: center; font-size: 11px; margin: 4px 0 10px; color: #55627a; }
.lw__check .box { width: 15px; height: 15px; border: 1.5px solid #b8913a; border-radius: 3px; display: grid; place-items: center; font-size: 10px; color: transparent; transition: all .2s; }
.lw__check .box.on { background: #b8913a; color: #fff; }
.lw__submit.on { transform: scale(.95); background: #9a7a2f; }
.lw__ok { margin-top: 10px; background: #ecfdf5; color: #047857; border-radius: 6px; padding: 8px 10px; font-size: 11.5px; font-weight: 600; }
.lw__side { background: #f8f6f1; border-radius: 8px; padding: 16px; }
.lw__side p { font-size: 11.5px; margin: 8px 0; color: #334155; }
.lw__free { background: #10203b; color: #fff; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.lw__free b { display: block; font-size: 14px; }
.lw__free small { color: #cbd5e1; font-size: 10.5px; }
.lw__rev { color: #b8913a; font-size: 13px; margin-top: 10px; }
.lw__rev small { color: #6b7790; }

@media (max-width: 1024px) {
  .projects { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .proj, .proj--half { grid-column: span 1; }
  .proj--wide { grid-column: 1 / -1; }
  .proj--rev { grid-template-columns: 1fr; }
  .proj--rev .player { order: 0; }
  .stage--7 { padding: 44px 20px 72px; min-height: 0; }
}
@media (max-width: 640px) {
  .projects { grid-template-columns: 1fr; }
  .stage--7 { height: auto; padding: 44px 14px 70px; }
}

/* ===== Live demo-site previews (real websites in a scaled iframe) ===== */
.sitecard { position: relative; display: block; height: 590px; padding: 52px 26px 26px; text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; }
.sitecard::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; }
.sitecard__browser { height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.75); transition: transform .4s ease; }
.sitecard:hover .sitecard__browser { transform: translateY(-4px); }
.sitecard__browser .desk__bar { flex: none; }
.sitecard__viewport { position: relative; flex: 1; overflow: hidden; background: #f3f5f8; }
.sitecard__viewport iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(100% / var(--s, .3)); border: 0; transform: scale(var(--s, .3)); transform-origin: top left; pointer-events: none; }
.sitecard__open { position: absolute; right: 42px; bottom: 42px; z-index: 3; background: #0b1b33; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .88rem; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.sitecard:hover .sitecard__open, .sitecard:focus-visible .sitecard__open { opacity: 1; transform: none; }
@media (hover: none) { .sitecard__open { opacity: 1; transform: none; } }
.proj__cta { margin-top: 18px; align-self: flex-start; }
@media (max-width: 640px) {
  .sitecard { height: 470px; padding: 48px 14px 14px; }
  .sitecard__open { right: 26px; bottom: 26px; }
}

/* Website portfolio cards: doctor & mechanic use the same wide layout as the law firm */
.proj--wide .sitecard { height: auto; padding: 48px 40px 44px; display: grid; place-items: center; }
.proj--wide .sitecard__browser { width: 100%; max-width: 860px; height: auto; aspect-ratio: 760 / 474; }
.proj--rev .sitecard { order: 2; }
@media (max-width: 1024px) {
  .proj--rev .sitecard { order: 0; }
  .proj--wide .sitecard { padding: 44px 20px 28px; }
}
@media (max-width: 640px) {
  .proj--wide .sitecard { padding: 44px 14px 18px; }
}