/*
Theme Name: Zisan Mridha
Theme URI: https://example.com
Author: Zisan Mridha
Description: One-page liquid glass portfolio theme on a white page with soft glowing orbs behind the glass. Everything (profile, skills, about, process, timelines, reviews, colors, tracking codes) is editable from Dashboard > Bento Settings. Portfolio and My Gallery come from the ZM Portfolio & Gallery plugin.
Version: 2.7.1
License: GNU General Public License v2 or later
Text Domain: zm-bento
*/

/* ---------- Design tokens ---------- */
:root {
  --zm-accent: #45124D;
  --zm-accent2: #8B0A9C;
  --zm-bg: #ffffff;
  --zm-card: #ffffff;
  --zm-text: #1c0f20;
  --zm-muted: #5d4a63;
  --zm-surface: rgba(255,255,255,.55);
  --zm-line: rgba(255,255,255,.55);
  --zm-glass: 22%;
  --zm-radius: 26px;
  --zm-blur: 20px;
  --zm-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 .5px rgba(30,30,60,.07), 0 14px 34px rgba(60,40,90,.14);
  --zm-shadow-hover: inset 1px 1px 0 rgba(255,255,255,1), inset -1px -1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 .5px rgba(30,30,60,.09), 0 20px 46px rgba(60,40,90,.2);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--zm-bg);
  color: var(--zm-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ol, ul { list-style: none; }

/* ---------- Soft glowing orbs (what the glass blurs) ---------- */
.zm-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--zm-orb, .38); }
.zm-bg[data-strength="medium"] { --zm-orb: .7; }
.zm-bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: zmFloat 26s ease-in-out infinite alternate; will-change: transform; }
.zm-bg i:nth-child(1) { width: 44vmax; height: 44vmax; left: -12vmax; top: -14vmax; background: var(--zm-o1, #e3b5ee); }
.zm-bg i:nth-child(2) { width: 40vmax; height: 40vmax; right: -10vmax; top: -6vmax; background: var(--zm-o2, #c9a6f2); opacity: .45; animation-duration: 30s; animation-delay: -7s; }
.zm-bg i:nth-child(3) { width: 34vmax; height: 34vmax; left: 30vw; top: 34vh; background: var(--zm-o3, #f0c4e8); opacity: .42; animation-duration: 34s; animation-delay: -12s; }
.zm-bg i:nth-child(4) { width: 36vmax; height: 36vmax; right: -8vmax; bottom: -14vmax; background: var(--zm-o1, #e3b5ee); opacity: .36; animation-duration: 29s; animation-delay: -4s; }
.zm-bg i:nth-child(5) { width: 34vmax; height: 34vmax; left: -8vmax; bottom: -12vmax; background: var(--zm-o2, #c9a6f2); opacity: .38; animation-duration: 36s; animation-delay: -15s; }
@keyframes zmFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 5vh, 0) scale(1.15); } }

.zm-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 60px; display: flex; flex-direction: column; gap: 20px; position: relative; }

/* ---------- Glass cards ---------- */
.zm-card {
  background-color: color-mix(in srgb, var(--zm-card) var(--zm-glass), transparent);
  background-image: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.2) 55%, rgba(255,255,255,.36));
  -webkit-backdrop-filter: blur(var(--zm-blur)) saturate(190%);
  backdrop-filter: blur(var(--zm-blur)) saturate(190%);
  border: 1px solid var(--zm-line);
  border-radius: var(--zm-radius);
  box-shadow: var(--zm-shadow);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .3s ease, transform .3s ease;
}
.zm-card:hover { box-shadow: var(--zm-shadow-hover); }
.zm-card h2 { font-weight: 600; line-height: 1.2; }
.zm-card h2 span { color: var(--zm-accent); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zm-card { background-color: rgba(250,250,252,.96); background-image: none; }
  :root { --zm-surface: #ffffff; }
}

.zm-btn { display: inline-block; background: linear-gradient(135deg, var(--zm-accent), var(--zm-accent2)); color: #fff; padding: 11px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px color-mix(in srgb, var(--zm-accent) 32%, transparent); transition: transform .2s ease, filter .2s ease; white-space: nowrap; }
.zm-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.zm-btn--sm { padding: 8px 18px; font-size: 13.5px; }

/* ---------- Top: profile + Cliqsan | skills (same height) ---------- */
.zm-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px; align-items: stretch; }
.zm-side { display: flex; flex-direction: column; gap: 20px; }

.zm-profile { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 24px; flex: 1; }
.zm-avatar { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--zm-accent); object-fit: cover; background: var(--zm-surface); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--zm-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--zm-accent) 14%, transparent); }
.zm-profile h1 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; line-height: 1.15; }
.zm-profile h1 span { color: var(--zm-accent); }
.zm-profile p { font-size: 14.5px; color: var(--zm-muted); max-width: 360px; }
.zm-profile .zm-btn { margin-top: 4px; }

.zm-cliq { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-color: color-mix(in srgb, var(--zm-accent) 50%, transparent); }
.zm-cliq-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: var(--zm-surface); padding: 5px; flex: none; }
.zm-cliq-text { flex: 1; min-width: 0; line-height: 1.25; }
.zm-cliq-text small { display: block; font-size: 12px; color: var(--zm-muted); }
.zm-cliq-text strong { font-size: 19px; font-weight: 600; }
.zm-cliq-text strong span { color: var(--zm-accent); }

.zm-skills { padding: 28px 26px; display: flex; flex-direction: column; }
.zm-skills h2 { font-size: clamp(24px, 3.2vw, 32px); }
.zm-skills-text { color: var(--zm-muted); font-size: 14.5px; margin-top: 4px; }
.zm-skill-list { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-content: space-evenly; gap: 24px 10px; margin-top: 22px; }
.zm-skill { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: 13px; font-weight: 500; }
.zm-skill-ico { width: 58px; height: 58px; border-radius: 18px; background: var(--zm-surface); border: 1px solid var(--zm-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.zm-skill:hover .zm-skill-ico { transform: translateY(-5px) scale(1.1); }
.zm-skill-ico img { width: 30px; height: 30px; object-fit: contain; }
.zm-skill-badge { font-weight: 700; font-size: 15px; color: var(--zm-accent); }

/* ---------- Stats row (full width) ---------- */
.zm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.zm-works, .zm-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 150px; padding: 18px 12px; }
.zm-works { font-weight: 600; font-size: 17px; }
.zm-works img { max-height: 64px; width: auto; object-fit: contain; }
.zm-works-ico { font-size: 40px; line-height: 1; }
.zm-stat b { font-size: clamp(34px, 4.4vw, 46px); color: var(--zm-accent); font-weight: 600; line-height: 1; }
.zm-stat span { font-size: 16px; font-weight: 500; }

/* ---------- About ---------- */
.zm-about { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 30px 28px; }
.zm-about.has-img { grid-template-columns: 240px minmax(0, 1fr); align-items: center; }
.zm-about-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 3px solid var(--zm-accent); }
.zm-about h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 12px; }
.zm-about-body p { color: var(--zm-muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 12px; }
.zm-about-body p strong { color: var(--zm-text); font-weight: 600; }
.zm-about.has-img .zm-about-body p { max-width: 820px; }
.zm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 22px 0 0; }
.zm-fact { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--zm-accent) 9%, #fff), color-mix(in srgb, var(--zm-accent2) 14%, #fff)); border: 1px solid color-mix(in srgb, var(--zm-accent2) 28%, transparent); border-radius: 18px; padding: 14px 16px 14px 20px; box-shadow: 0 6px 18px color-mix(in srgb, var(--zm-accent) 12%, transparent); transition: transform .25s ease, box-shadow .25s ease; }
.zm-fact::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--zm-accent), var(--zm-accent2)); }
.zm-fact:hover { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--zm-accent) 22%, transparent); }
.zm-fact small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--zm-accent2); margin-bottom: 3px; }
.zm-fact b { font-size: 17px; font-weight: 700; color: var(--zm-accent); line-height: 1.25; }
.zm-about .zm-btn { margin-top: 14px; }

/* ---------- Working process (simple, one line) ---------- */
.zm-process { padding: 24px 24px 26px; }
.zm-process h2 { text-align: center; font-size: 22px; }
.zm-flow { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); position: relative; margin-top: 22px; }
.zm-flow::before { content: ''; position: absolute; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); top: 16px; height: 2px; background: linear-gradient(90deg, var(--zm-accent), var(--zm-accent2)); border-radius: 2px; transform-origin: left; }
.zm-flow li { text-align: center; position: relative; }
.zm-flow li i { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; background: color-mix(in srgb, var(--zm-card) 92%, var(--zm-accent)); border: 2px solid var(--zm-accent); color: var(--zm-accent); font-style: normal; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.zm-flow li:last-child i { background: var(--zm-accent); color: #fff; }
.zm-flow li b { font-size: 15px; font-weight: 600; }

/* ---------- Experience & Education ---------- */
.zm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; }
.zm-time h2 { font-size: 22px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.zm-time-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--zm-surface); border: 1px solid var(--zm-line); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.zm-timeline { position: relative; padding-left: 28px; }
.zm-timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--zm-accent), var(--zm-accent2)); transform-origin: top; border-radius: 2px; }
.zm-timeline li { position: relative; padding-bottom: 22px; }
.zm-timeline li:last-child { padding-bottom: 0; }
.zm-dot { position: absolute; left: -28px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--zm-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--zm-accent) 18%, transparent); }
.zm-tl-body { display: flex; flex-direction: column; gap: 1px; }
.zm-tl-body em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--zm-accent); }
.zm-tl-body strong { font-size: 17px; font-weight: 600; }
.zm-tl-body span { font-size: 14px; color: var(--zm-muted); }
.zm-tl-body p { font-size: 13.5px; color: var(--zm-muted); margin-top: 3px; }

/* ---------- Portfolio & Gallery sections (content from plugin) ---------- */
.zm-pg { padding: 32px 24px 30px; }
.zm-pg-head { text-align: center; margin-bottom: 26px; }
.zm-pg-head h2 { font-size: clamp(26px, 4vw, 36px); }
.zm-pg-head p { color: var(--zm-muted); margin-top: 6px; }
.zm-note { text-align: center; color: var(--zm-muted); font-size: 14px; }

/* ---------- Reviews | Contact ---------- */
.zm-end { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.zm-reviews { min-height: 220px; display: flex; align-items: center; justify-content: center; text-align: center; }
.zm-review { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; transition: opacity .6s ease; }
.zm-review.is-on { opacity: 1; z-index: 1; }
.zm-review q { font-style: italic; font-size: 15.5px; color: var(--zm-text); max-width: 480px; quotes: none; opacity: .9; }
.zm-who { display: flex; align-items: center; gap: 10px; text-align: left; }
.zm-who img, .zm-who em { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--zm-accent); font-style: normal; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--zm-accent); background: var(--zm-surface); }
.zm-who strong { color: var(--zm-accent); display: block; line-height: 1.2; }
.zm-who small { color: var(--zm-muted); font-size: 12.5px; }

.zm-contact { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 24px; }
.zm-contact h2 { font-size: clamp(24px, 3.4vw, 32px); }
.zm-contact p { color: var(--zm-muted); max-width: 440px; }

/* ---------- Social icons ---------- */
.zm-follow { margin-top: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.zm-follow > span { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--zm-muted); }
.zm-soc-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.zm-soc { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.25)); border: 1px solid var(--zm-line); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); display: flex; align-items: center; justify-content: center; box-shadow: var(--zm-shadow); transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
.zm-soc img, .zm-soc svg { width: 24px; height: 24px; object-fit: contain; }
.zm-soc b { color: var(--zm-accent); font-size: 18px; }
.zm-soc:hover { transform: translateY(-5px) scale(1.08); box-shadow: var(--zm-shadow-hover); }

.zm-foot { text-align: center; margin-top: 6px; font-size: 13.5px; color: var(--zm-muted); }

/* ---------- Animations (only when JS is on) ---------- */
.zm-js .zm-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0ms); }
.zm-js .zm-reveal.is-in { opacity: 1; transform: none; }
.zm-js .zm-reveal.is-done { transition: background-color .35s ease, border-color .35s ease, box-shadow .3s ease, transform .3s ease, opacity .3s ease; transition-delay: 0s; }
.zm-js .zm-reveal.is-done:hover { transform: translateY(-3px); }

/* timelines: line draws, items slide in, dots pop and pulse */
.zm-js .zm-timeline::before { transform: scaleY(0); transition: transform 1.2s ease .2s; }
.zm-js .is-in .zm-timeline::before { transform: scaleY(1); }
.zm-js .zm-timeline li { opacity: 0; transform: translateX(-22px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--d, 0ms) + 350ms); }
.zm-js .is-in .zm-timeline li { opacity: 1; transform: none; }
.zm-js .zm-dot { transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d, 0ms) + 450ms); }
.zm-js .is-in .zm-dot { transform: scale(1); animation: zmPulse 2.4s ease-out infinite; animation-delay: calc(var(--d, 0ms) + 1.2s); }
@keyframes zmPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zm-accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--zm-accent) 0%, transparent); } }

/* process: line draws left to right, steps pop in one by one */
.zm-js .zm-flow::before { transform: scaleX(0); transition: transform 1.4s ease .25s; }
.zm-js .is-in .zm-flow::before { transform: scaleX(1); }
.zm-js .zm-flow li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--d, 0ms) + 300ms); }
.zm-js .is-in .zm-flow li { opacity: 1; transform: none; }


/* ---- always-on motion (keeps running after the entrance) ---- */
.zm-flow::after { content: ''; position: absolute; top: 12px; left: calc(50% / var(--n, 5)); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--zm-accent2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--zm-accent2) 25%, transparent), 0 0 16px var(--zm-accent2); opacity: 0; z-index: 2; }
.zm-js .is-done .zm-flow::after { animation: zmTravelX 4.8s ease-in-out 1s infinite; }
@keyframes zmTravelX { 0% { opacity: 0; left: calc(50% / var(--n, 5)); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 50% / var(--n, 5)); } }
.zm-js .is-done .zm-flow li i { animation: zmStep 6.4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4); }
@keyframes zmStep { 0%, 14%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 6% { transform: scale(1.22); box-shadow: 0 0 0 7px color-mix(in srgb, var(--zm-accent) 20%, transparent), 0 6px 18px color-mix(in srgb, var(--zm-accent) 35%, transparent); } }
.zm-js .is-done .zm-flow li b { animation: zmLabel 6.4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4); }
@keyframes zmLabel { 0%, 14%, 100% { color: inherit; transform: none; } 6% { color: var(--zm-accent); transform: translateY(-2px); } }

.zm-timeline::after { content: ''; position: absolute; left: 4px; top: 6px; width: 6px; height: 46px; border-radius: 6px; background: linear-gradient(transparent, #fff, transparent); opacity: 0; }
.zm-js .is-done .zm-timeline::after { animation: zmTravelY 3.6s ease-in-out 1s infinite; }
@keyframes zmTravelY { 0% { opacity: 0; top: 6px; } 15% { opacity: .95; } 85% { opacity: .95; } 100% { opacity: 0; top: calc(100% - 52px); } }
.zm-js .is-done .zm-timeline li .zm-tl-body { animation: zmNudge 6.4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 5); }
@keyframes zmNudge { 0%, 16%, 100% { transform: none; } 7% { transform: translateX(6px); } }
.zm-js .is-done .zm-timeline li .zm-tl-body em { animation: zmLabel 6.4s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 5); }

/* ---------- Courses ---------- */
.zm-courses h2 { font-size: 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.zm-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.zm-course { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid rgba(69,18,77,.1); box-shadow: 0 4px 14px rgba(69,18,77,.06); transition: transform .25s ease, box-shadow .25s ease; }
a.zm-course:hover, .zm-course:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--zm-accent) 16%, transparent); }
.zm-course-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--zm-accent), var(--zm-accent2)); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.zm-course-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zm-course-txt strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.zm-course-txt span { font-size: 13px; color: var(--zm-muted); }
.zm-course-txt u { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--zm-accent2); margin-top: 3px; }
.zm-js .zm-cgrid li { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--d, 0ms) + 250ms); }
.zm-js .is-in .zm-cgrid li { opacity: 1; transform: none; }

/* liquid glass chips (facts + courses) */
.zm-fact, .zm-course {
  background-color: color-mix(in srgb, var(--zm-accent2) 7%, rgba(255,255,255,.28));
  background-image: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.12) 50%, rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(16px) saturate(190%); backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 18px rgba(255,255,255,.35), 0 8px 22px color-mix(in srgb, var(--zm-accent) 14%, transparent);
}
.zm-fact::before { display: none; }
.zm-fact::after, .zm-course::after { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 42%; border-radius: 0 0 60% 60% / 0 0 100% 100%; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.zm-course { position: relative; overflow: hidden; }
.zm-fact:hover, .zm-course:hover { box-shadow: inset 0 1.5px 0 #fff, inset 0 0 22px rgba(255,255,255,.5), 0 14px 30px color-mix(in srgb, var(--zm-accent) 24%, transparent); }
.zm-course-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px color-mix(in srgb, var(--zm-accent) 30%, transparent); }
.zm-fact > *, .zm-course > * { position: relative; z-index: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .zm-top { grid-template-columns: 1fr; align-items: start; }
  .zm-profile { flex: none; }
  .zm-skill-list { align-content: start; }
  .zm-about.has-img { grid-template-columns: 1fr; }
  .zm-about-img { max-width: 200px; }
}
@media (max-width: 640px) {
  .zm-wrap { padding: 20px 12px 50px; gap: 16px; }
  .zm-card { padding: 20px; --zm-blur: 16px; }
  .zm-skill-list { grid-template-columns: repeat(3, 1fr); }
  .zm-skill-ico { width: 52px; height: 52px; }
  .zm-cliq { flex-wrap: wrap; }
  /* process stays side by side on phones, just smaller */
  .zm-process { padding: 20px 8px 18px; }
  .zm-flow { margin-top: 18px; }
  .zm-flow::before { top: 14px; }
  .zm-flow::after { top: 10px; width: 9px; height: 9px; margin-left: -4.5px; }
  .zm-flow li { padding: 0 1px; min-width: 0; }
  .zm-flow li i { width: 28px; height: 28px; font-size: 12.5px; margin-bottom: 6px; }
  .zm-flow li b { display: block; font-size: 11px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
  .zm-timeline li .zm-tl-body strong { font-size: 16px; }
}
@media (max-width: 380px) {
  .zm-flow li b { font-size: 10px; }
  .zm-flow li i { width: 26px; height: 26px; font-size: 12px; }
  .zm-flow::before { top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .zm-bg i { animation: none; }
  .zm-js .zm-reveal, .zm-js .zm-timeline li, .zm-js .zm-dot, .zm-js .zm-timeline::before, .zm-js .zm-cgrid li, .zm-js .zm-flow li, .zm-js .zm-flow::before { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .zm-flow::after, .zm-timeline::after, .zm-flow li i, .zm-flow li b, .zm-tl-body, .zm-tl-body em { animation: none !important; }
}

/* ---------- Plum polish: gradient name/highlights ---------- */
.zm-wrap h1 span, .zm-wrap h2 span, .zm-cliq strong span { background: linear-gradient(120deg, var(--zm-accent), var(--zm-accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--zm-accent); }
.zm-btn { background: linear-gradient(135deg, var(--zm-accent) 0%, var(--zm-accent2) 100%); }