/* mrnaveedshah.com: alphapost.io/app wala 3D design, laal aur jamni rang (Naveed, 13 Sep). */
:root {
  --bg: #f8f1f6; --ink: #1d1326; --ink2: #3a2d45; --mute: #6d6078; --line: #ecdfe9;
  --edge: #e6d5e2; --edge2: #d4bfd0;
  --r1: #ff6b81; --r2: #ef233c; --r-edge: #a4122a;
  --p1: #b17cff; --p2: #7b2ff7; --p-edge: #4f16a8;
  --grad: linear-gradient(135deg, #ff4d6d 0%, #e5195b 38%, #9d2bd8 72%, #6a1fd1 100%);
  --grad-edge: #5e1478;
  --slab: 0 1px 0 #fff inset, 0 0 0 1px rgba(80, 20, 70, .06), 0 6px 0 var(--edge), 0 18px 30px -14px rgba(80, 20, 70, .28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: Nunito, ui-rounded, system-ui, sans-serif; background: var(--bg); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

.page {
  position: relative; min-height: 100vh; overflow-x: hidden; font-weight: 700; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(157, 43, 216, .20), transparent 60%),
    radial-gradient(800px 480px at -10% 28%, rgba(255, 77, 109, .16), transparent 60%),
    var(--bg);
}

/* ── ooper patti ─────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 30; flex-wrap: wrap;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px clamp(14px, 4vw, 24px);
  background: var(--grad); color: #fff;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 5px 0 var(--grad-edge), 0 14px 24px -12px rgba(94, 20, 120, .6);
  border-radius: 0 0 24px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 21px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.brandAv { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; }
.brandAv img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.brandAv::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, #fff 260deg, #ffd6e0 320deg, #fff 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: spin 2.4s linear infinite;
}
.brandAv.big { width: 58px; height: 58px; }
.brandAv.big::after { background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, var(--r1) 260deg, var(--p2) 320deg, #f0d9ff 350deg, transparent 360deg); }
.nav { display: none; }
.barRight { display: flex; align-items: center; gap: 8px; }
.barBtn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap;
  padding: 10px 18px 9px; border-radius: 14px; font-weight: 900; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, #fff, #f6eef4);
  box-shadow: 0 2px 0 #fff inset, 0 0 0 1px rgba(80, 20, 70, .1), 0 5px 0 #c9a6c4, 0 10px 16px -8px rgba(60, 10, 60, .45);
  transition: transform .08s;
}
.barBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #fff inset, 0 1px 0 #c9a6c4; }
.menuBtn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .18); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 3px 0 rgba(0, 0, 0, .18);
}
.mNav { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 0 8px; }
.mNav a {
  text-decoration: none; text-align: center; padding: 12px 10px; border-radius: 14px; font-weight: 900; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, #fff, #f6eef4); box-shadow: 0 4px 0 #c9a6c4;
}

@media (min-width: 900px) {
  .bar { flex-wrap: nowrap; max-width: 1200px; margin: 12px auto 0; top: 12px; border-radius: 22px; padding: 10px 14px 10px 16px; }
  .menuBtn, .mNav { display: none !important; }
  .nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
  .nav a {
    text-decoration: none; padding: 9px 14px; border-radius: 12px; font-weight: 900; font-size: 15px; color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: background .15s, transform .15s;
  }
  .nav a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero {
  max-width: 1200px; margin: 0 auto; padding: clamp(30px, 6vw, 72px) clamp(16px, 4vw, 48px) 40px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 64px); align-items: center;
}
.heroText { animation: rise .7s ease-out both; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 6px; border-radius: 99px;
  font-weight: 900; font-size: 14px; color: var(--r-edge); background: linear-gradient(180deg, #fff, #fbf0f5);
  box-shadow: 0 0 0 2px #ff9fb2, 0 4px 0 #d9738a, 0 10px 16px -6px rgba(229, 25, 91, .35);
}
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--r2); box-shadow: 0 0 0 4px #ffd6de; animation: blink 1.6s ease-in-out infinite; }
.hero h1 { margin: 22px 0 14px; font-weight: 900; letter-spacing: -.01em; font-size: clamp(34px, 5.2vw, 62px); line-height: 1.06; color: var(--ink); }
.mark { position: relative; z-index: 0; color: #fff; padding: 0 .12em; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mark::after {
  content: ""; position: absolute; inset: .06em -.06em -.02em; z-index: -1; border-radius: 14px;
  background: var(--grad); box-shadow: 0 5px 0 var(--grad-edge), 0 14px 20px -8px rgba(157, 43, 216, .5);
}
.lead { margin: 0 0 30px; font-size: clamp(17px, 1.8vw, 20px); color: var(--ink2); max-width: 580px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; }

/* bara 3D button: chamak, uchal, roshni */
.cta {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: #fff; padding: 12px 18px 11px 12px; border-radius: 22px; background: var(--grad);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .45) inset, 0 -4px 0 rgba(60, 0, 60, .2) inset, 0 8px 0 var(--grad-edge), 0 22px 30px -10px rgba(157, 43, 216, .6);
  animation: bob 2.8s ease-in-out infinite;
}
.cta::before {
  content: ""; position: absolute; top: -60%; left: -45%; width: 34%; height: 220%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: rotate(18deg); animation: shine 3.4s ease-in-out infinite;
}
.cta:active { animation: none; transform: translateY(6px); box-shadow: 0 2px 0 rgba(255, 255, 255, .45) inset, 0 2px 0 var(--grad-edge); }
.ctaIco {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; color: var(--r2);
  background: linear-gradient(180deg, #fff, #f6eef4); box-shadow: 0 2px 0 #fff inset, 0 4px 0 rgba(60, 0, 60, .35);
}
.ctaText { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ctaText b { font-weight: 900; font-size: 20px; }
.ctaText em { font-style: normal; font-weight: 800; font-size: 13px; opacity: .9; margin-top: 3px; overflow-wrap: anywhere; }
.ctaArrow { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset; animation: nudge 1.4s ease-in-out infinite; }
.ghost {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 12px 18px 11px; border-radius: 16px;
  font-weight: 900; font-size: 16px; color: var(--ink); background: linear-gradient(180deg, #fff, #f7f0f5);
  box-shadow: 0 2px 0 #fff inset, 0 0 0 1px rgba(80, 20, 70, .1), 0 5px 0 var(--edge2), 0 10px 16px -8px rgba(80, 20, 70, .35);
  transition: transform .08s;
}
.ghost:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge2); }
.ghost .yt { color: #ff0033; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; color: var(--ink2); font-size: 15px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 18px; height: 18px; color: var(--p2); stroke-width: 3.2; }

/* hero tasveer: ghoomti ring, tairte chip */
.heroArt { position: relative; height: clamp(420px, 48vw, 560px); display: grid; place-items: center; }
.ring {
  position: absolute; width: min(470px, 92%); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 180deg, #ff4d6d 240deg, #9d2bd8 300deg, #f0d9ff 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  filter: drop-shadow(0 0 10px rgba(229, 25, 91, .55)); animation: spin 5s linear infinite;
}
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ffd6e0, #d9b8ff, #ffd6e0); opacity: .5; }
.photo {
  position: relative; z-index: 2; width: min(380px, 74%); aspect-ratio: 1; border-radius: 50%; padding: 10px;
  background: linear-gradient(160deg, #fff, #f3e6ef);
  box-shadow: 0 2px 0 #fff inset, 0 10px 0 #d9b9d2, 0 40px 60px -20px rgba(94, 20, 120, .55);
  animation: float 5.5s ease-in-out infinite;
}
.photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 14px 9px; border-radius: 16px; font-weight: 900; font-size: 14.5px; color: var(--ink);
  background: linear-gradient(180deg, #fff, #fcf6fa);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(80, 20, 70, .07), 0 5px 0 var(--edge), 0 18px 26px -12px rgba(80, 20, 70, .4);
}
.chip svg { width: 20px; height: 20px; }
.chip .red { color: var(--r2); }
.chip .purple { color: var(--p2); }
.chipA { left: 0; top: 16%; animation: float 4.5s ease-in-out infinite; }
.chipB { right: -2%; top: 46%; animation: float2 5.2s ease-in-out infinite; }
.chipC { left: 6%; bottom: 10%; animation: float 5.8s ease-in-out infinite; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--r2); box-shadow: 0 0 0 4px #ffd6de; }
.since {
  position: absolute; z-index: 4; right: 6%; top: 6%; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  color: #fff; background: var(--grad); box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 6px 0 var(--grad-edge), 0 16px 24px -10px rgba(157, 43, 216, .6);
  animation: float2 4.8s ease-in-out infinite; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.since b { font-size: 30px; font-weight: 900; line-height: 1; }
.since em { font-style: normal; font-size: 12px; font-weight: 900; line-height: 1.1; }

/* ── hunar ki patti ──────────────────────────────────────────────────── */
.skills { max-width: 1100px; margin: 10px auto 0; padding: 0 clamp(16px, 4vw, 48px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.skill {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 16px; border-radius: 22px; text-decoration: none;
  background: linear-gradient(180deg, #fff, #fdf8fb);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px color-mix(in srgb, var(--pc) 18%, transparent), 0 6px 0 color-mix(in srgb, var(--pc) 35%, #e6d5e2),
    0 18px 26px -14px color-mix(in srgb, var(--pc) 55%, transparent);
  transition: transform .2s;
}
.skill:hover { transform: translateY(-4px); }
.skill b { font-weight: 900; font-size: 15px; color: var(--ink); }
.skIco {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 65%, #fff), var(--pc) 60%);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .45) inset, 0 5px 0 color-mix(in srgb, var(--pc) 70%, #000), 0 12px 16px -8px color-mix(in srgb, var(--pc) 70%, transparent);
}
.skIco svg { width: 26px; height: 26px; }

/* ── hisse ───────────────────────────────────────────────────────────── */
.block { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 48px) 0; }
.h2 { margin: 0; text-align: center; font-weight: 900; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; color: var(--ink); }
.sub { margin: 10px auto 36px; text-align: center; color: var(--mute); font-size: 17px; max-width: 600px; }
.center { text-align: center; margin-top: 30px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { padding: 24px; border-radius: 24px; background: linear-gradient(180deg, #fff, #fdf8fb); box-shadow: var(--slab); transition: transform .2s; }
.card:hover { transform: translateY(-5px); }
.card h3 { margin: 16px 0 6px; font-weight: 900; font-size: 20px; color: var(--ink); }
.card p { margin: 0; color: var(--mute); font-size: 15.5px; }
.tile { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; color: #fff; }
.tile svg { width: 28px; height: 28px; }
.t-red { background: linear-gradient(180deg, #ff6b81, #ef233c); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 5px 0 #a4122a, 0 14px 20px -8px rgba(239,35,60,.55); }
.t-purple { background: linear-gradient(180deg, #a66bff, #7b2ff7); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 5px 0 #4f16a8, 0 14px 20px -8px rgba(123,47,247,.55); }
.t-rose { background: linear-gradient(180deg, #ff5c9a, #e5195b); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 5px 0 #9c0f3d, 0 14px 20px -8px rgba(229,25,91,.55); }
.t-violet { background: linear-gradient(180deg, #c77dff, #9d4edd); box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 5px 0 #6a2b9e, 0 14px 20px -8px rgba(157,78,221,.55); }

/* safar: beech mein lakeer, har padaav ek gol nishan */
.road { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; position: relative; }
.road::before { content: ""; position: absolute; left: 38px; top: 20px; bottom: 20px; width: 6px; border-radius: 6px; background: linear-gradient(180deg, #ff4d6d, #9d2bd8); opacity: .35; }
.stop { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 22px; }
.year {
  position: relative; z-index: 1; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  background: linear-gradient(180deg, #ff6b81, #ef233c); box-shadow: 0 0 0 5px #fff, 0 7px 0 #a4122a, 0 16px 22px -10px rgba(239, 35, 60, .55);
}
.year.alt { background: linear-gradient(180deg, #a66bff, #7b2ff7); box-shadow: 0 0 0 5px #fff, 0 7px 0 #4f16a8, 0 16px 22px -10px rgba(123, 47, 247, .55); }
.year.now { background: var(--grad); box-shadow: 0 0 0 5px #fff, 0 7px 0 var(--grad-edge), 0 16px 22px -10px rgba(157, 43, 216, .6); font-size: 17px; }
.year svg { width: 30px; height: 30px; }
.stopCard { padding: 18px 22px; border-radius: 22px; background: linear-gradient(180deg, #fff, #fdf8fb); box-shadow: var(--slab); }
.stopCard h3 { margin: 0 0 4px; font-weight: 900; font-size: 19px; color: var(--ink); }
.stopCard p { margin: 0; color: var(--mute); font-size: 15.5px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.step { position: relative; padding: 36px 24px 24px; border-radius: 24px; background: linear-gradient(180deg, #fff, #fdf8fb); box-shadow: var(--slab); text-align: center; }
.step h3 { margin: 10px 0 6px; font-weight: 900; font-size: 19px; color: var(--ink); }
.step p { margin: 0; color: var(--mute); font-size: 15px; }
.num {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; background: var(--grad);
  box-shadow: 0 0 0 4px #fff, 0 5px 0 var(--grad-edge), 0 12px 18px -8px rgba(157, 43, 216, .55);
}

/* videos */
.vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vid { display: block; text-align: left; padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #fff, #fdf8fb); box-shadow: var(--slab); transition: transform .2s; }
.vid:hover { transform: translateY(-5px); }
.vid > span { display: block; }
.vThumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #1d1326; overflow: hidden; }
.vThumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vid:hover .vThumb img { transform: scale(1.05); }
.vPlay {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--grad); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 5px 0 var(--grad-edge), 0 14px 20px -6px rgba(0, 0, 0, .5);
}
.vPlay svg { width: 24px; height: 24px; fill: #fff; stroke: none; margin-left: 3px; }
.vBody { padding: 14px 16px 16px; }
.vTitle { margin: 0 0 10px; font-weight: 900; font-size: 16px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid .vMeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
.vMeta b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-weight: 900; color: var(--r-edge); background: #ffe8ee; box-shadow: 0 0 0 1px #ffc9d5, 0 3px 0 #f4b3c2; }
.vSkel { aspect-ratio: 16 / 12; border-radius: 22px; background: linear-gradient(90deg, #f2e7ef, #fbf5f9, #f2e7ef); background-size: 200% 100%; animation: skel 1.4s linear infinite; }

/* aakhri bulawa */
.final {
  max-width: 980px; margin: clamp(64px, 8vw, 100px) auto 0; padding: 46px clamp(18px, 4vw, 48px) 50px; text-align: center; border-radius: 34px; color: #fff;
  background: radial-gradient(600px 240px at 50% 0%, rgba(255, 255, 255, .28), transparent 70%), var(--grad);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 9px 0 var(--grad-edge), 0 34px 50px -20px rgba(94, 20, 120, .6);
  margin-left: max(16px, calc((100% - 980px) / 2)); margin-right: max(16px, calc((100% - 980px) / 2));
}
.finalAv { display: inline-block; width: 96px; height: 96px; border-radius: 50%; padding: 5px; background: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .2), 0 18px 26px -10px rgba(0, 0, 0, .45); animation: float 4.6s ease-in-out infinite; }
.finalAv img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.final h2 { margin: 16px 0 6px; font-weight: 900; font-size: clamp(28px, 3.6vw, 42px); text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.final p { margin: 0 auto 30px; font-size: 17px; max-width: 560px; opacity: .95; }
.finalActs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.ctaWhite { color: var(--ink); text-shadow: none; background: linear-gradient(180deg, #fff, #f7eef5); box-shadow: 0 2px 0 #fff inset, 0 8px 0 #3d0c52, 0 22px 30px -10px rgba(40, 0, 50, .55); }
.ctaWhite .ctaIco { color: #fff; background: var(--grad); box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 4px 0 var(--grad-edge); }
.ctaWhite::before { background: linear-gradient(90deg, transparent, rgba(255, 200, 220, .7), transparent); }
.copyBtn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 16px; color: #fff;
  padding: 13px 18px 12px; border-radius: 16px; background: rgba(255, 255, 255, .18);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 5px 0 rgba(40, 0, 50, .35);
}
.copyBtn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(40, 0, 50, .35); }

/* footer */
.foot { max-width: 1200px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 48px) 40px; }
.footCard { border-radius: 30px; background: linear-gradient(180deg, #fff, #fdf8fb); box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(80, 20, 70, .07), 0 9px 0 var(--edge), 0 26px 38px -14px rgba(80, 20, 70, .34); overflow: hidden; }
.footTop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 30px; padding: 30px clamp(18px, 3vw, 34px); }
.footBrand { display: flex; align-items: center; gap: 16px; }
.footBrand b { font-size: 24px; font-weight: 900; }
.footBrand p { margin: 2px 0 0; color: var(--mute); font-size: 15px; }
.footCols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.footCols h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 900; font-size: 16px; }
.footCols i { width: 12px; height: 12px; border-radius: 5px; }
.dotR { background: linear-gradient(180deg, #ff6b81, #ef233c); box-shadow: 0 2px 0 #a4122a; }
.dotP { background: linear-gradient(180deg, #a66bff, #7b2ff7); box-shadow: 0 2px 0 #4f16a8; }
.footCols a { display: block; margin: 0 0 9px; text-decoration: none; font-weight: 800; font-size: 15px; color: var(--ink2); transition: padding .15s, color .15s; }
.footCols a:hover { color: var(--ink); padding-left: 4px; text-decoration: underline; text-decoration-color: var(--r1); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.footBottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(18px, 3vw, 34px) 20px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14.5px; }
.mailChip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 900; font-size: 14px; color: var(--r-edge); padding: 6px 12px; border-radius: 99px; background: #ffe8ee; box-shadow: 0 0 0 1px #ffc9d5, 0 3px 0 #f4b3c2; overflow-wrap: anywhere; }
.mailChip svg { width: 16px; height: 16px; }

/* video parda */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(20, 5, 25, .82); }
.modalBox { position: relative; width: min(960px, 100%); }
.modalVid { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.modalVid iframe { width: 100%; height: 100%; border: 0; display: block; }
.modalX { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1; font-weight: 900; color: var(--ink); background: #fff; box-shadow: 0 4px 0 #c9a6c4; }

/* harkat */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes shine { 0% { left: -45%; } 55%, 100% { left: 130%; } }
@keyframes nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* chhoti screen */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .acts, .trust { justify-content: center; }
  .heroArt { order: -1; height: 440px; }
  .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards, .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footTop { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .brand { font-size: 19px; }
  .barBtn { padding: 9px 14px 8px; font-size: 14px; }
  .heroArt { height: 360px; }
  .photo { width: 68%; }
  .chip { font-size: 12.5px; padding: 8px 11px 7px; }
  .chip svg { width: 17px; height: 17px; }
  .chipA { top: 8%; left: 0; }
  .chipB { top: auto; bottom: 26%; right: 0; }
  .chipC { bottom: 2%; left: 4%; }
  .since { width: 78px; height: 78px; right: 2%; top: 2%; }
  .since b { font-size: 24px; }
  .since em { font-size: 10.5px; }
  .cta { gap: 10px; padding: 10px 14px 9px 10px; }
  .ctaIco { width: 44px; height: 44px; }
  .ctaText b { font-size: 18px; }
  .ctaText em { font-size: 12px; }
  .ctaArrow { display: none; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cards, .vids { grid-template-columns: minmax(0, 1fr); }
  .road::before { left: 29px; }
  .stop { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .year { width: 64px; height: 64px; font-size: 16px; }
  .year.now { font-size: 13.5px; }
  .year svg { width: 24px; height: 24px; }
  .stopCard { padding: 14px 16px; }
  .footCols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footBottom { justify-content: center; text-align: center; }
}

/* phone par chhota aur saaf: service card mein nishan baayen, videos do qataar */
@media (max-width: 600px) {
  .card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px; border-radius: 22px; }
  .card .tile { grid-row: span 2; align-self: start; width: 52px; height: 52px; border-radius: 16px; }
  .card .tile svg { width: 24px; height: 24px; }
  .card h3 { margin: 0 0 3px; font-size: 17.5px; }
  .card p { font-size: 14.5px; }
  .cards { gap: 16px; }
  .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vBody { padding: 10px 10px 12px; }
  .vTitle { font-size: 13.5px; margin-bottom: 8px; }
  .vid .vMeta > span { display: none; }
  .vMeta b { font-size: 12px; padding: 2px 8px; }
  .vPlay { width: 42px; height: 42px; }
  .vPlay svg { width: 18px; height: 18px; }
  .step { padding: 32px 18px 20px; }
}