/* Natwar Rathore Creative World: attention + polish layer (loaded on every page after ui.css).
   Pure CSS, no libraries. Motion is opt-in via prefers-reduced-motion: no-preference. */
:root {
  --lime-2: #e4ff9c;
  --cool: #5b8cff;
  --glass: rgba(16, 18, 25, .72);
  --card-bg: linear-gradient(180deg, rgba(20, 22, 30, .92), rgba(11, 12, 17, .96));
  --edge: linear-gradient(140deg, rgba(200, 255, 61, .30), rgba(242, 240, 234, .08) 34%, rgba(242, 240, 234, .04) 66%, rgba(91, 140, 255, .24));
  --edge-hi: linear-gradient(140deg, rgba(200, 255, 61, .75), rgba(242, 240, 234, .14) 40%, rgba(91, 140, 255, .45));
  --shadow-lg: 0 34px 70px -34px rgba(0, 0, 0, .85), 0 2px 0 0 rgba(255, 255, 255, .02) inset;
  --r-card: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- richer page background: soft mesh + film grain (static, fixed, one layer) ---------- */
body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(900px 620px at 84% -10%, rgba(200, 255, 61, .10), transparent 65%),
    radial-gradient(760px 560px at -6% 38%, rgba(91, 140, 255, .07), transparent 62%),
    radial-gradient(820px 600px at 104% 86%, rgba(200, 255, 61, .05), transparent 60%),
    linear-gradient(180deg, #0b0c11 0%, #07080c 55%, #08090d 100%) !important;
}

/* ---------- typography rhythm ---------- */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h2 .it, h1 .it, .sec__head h2 .it {
  background: linear-gradient(92deg, var(--lime) 0%, var(--lime-2) 60%, var(--lime) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .08em; margin-right: -.08em;
}
.sec__head p.sub, .sub, .lede { line-height: 1.65; }
.sec__head > .mono, .hero__tag, .x-hook { letter-spacing: .14em; }
.mono.lime, .x-rw__cap .mono, .x-blogcards .m { color: var(--lime); }

/* ---------- section backgrounds: alternating soft glows (no images) ---------- */
main > .sec, main > section.contact, main > .x-bdf, main > .x-svcl { position: relative; isolation: isolate; }
main > .sec::before, main > section.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 92% 8%, rgba(200, 255, 61, .045), transparent 70%);
}
main > .sec:nth-of-type(even)::before { background: radial-gradient(58% 50% at 4% 30%, rgba(91, 140, 255, .05), transparent 70%), radial-gradient(40% 40% at 96% 96%, rgba(200, 255, 61, .035), transparent 70%); }
main > section.contact::before { background: radial-gradient(70% 70% at 50% 0%, rgba(200, 255, 61, .07), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(91, 140, 255, .06), transparent 70%); }

/* ---------- consistent glass cards with gradient edges ---------- */
.card, .x-ww__card, .x-blogcards a, .x-aiv__card, .x-stat, .pstep__card {
  --mx: 50%; --my: 0%;
  border: 1px solid transparent !important;
  border-radius: var(--r-card);
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(200, 255, 61, .07), transparent 42%) padding-box,
    var(--card-bg) padding-box,
    var(--edge) border-box !important;
  box-shadow: var(--shadow-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s ease !important;
}
.x-stat { border-radius: 16px; }
@media (hover: hover) {
  .card:hover, .x-ww__card:hover, .x-blogcards a:hover, .x-aiv__card:hover {
    background:
      radial-gradient(420px circle at var(--mx) var(--my), rgba(200, 255, 61, .11), transparent 45%) padding-box,
      var(--card-bg) padding-box,
      var(--edge-hi) border-box !important;
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 255, 61, .05), 0 18px 50px -30px rgba(200, 255, 61, .25);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover, .x-ww__card:hover, .x-blogcards a:hover { transform: translateY(-4px); }
}

/* ---------- image framing: rounded, shadow, hover zoom ---------- */
.x-rw__media, .case__media, .fig, .x-ad__media {
  border-radius: var(--r-card) !important;
  border: 1px solid rgba(242, 240, 234, .09) !important;
  box-shadow: var(--shadow-lg);
  transition: box-shadow .5s ease, transform .6s var(--ease-out), border-color .4s ease;
}
.case__media img, .fig img { transition: transform 1s var(--ease-out), filter .6s ease; }
@media (hover: hover) {
  .x-rw__card:hover .x-rw__media, .case:hover .case__media, .fig:hover {
    border-color: rgba(200, 255, 61, .45) !important;
    box-shadow: 0 44px 90px -40px rgba(0, 0, 0, .95), 0 22px 60px -34px rgba(200, 255, 61, .35);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .x-rw__card:hover .x-rw__media, .case:hover .case__media { transform: translateY(-5px); }
  .case:hover .case__media img, .fig:hover img { transform: scale(1.045); }
  /* striking portfolio grid: focus the card under the pointer, soften the rest */
  .x-rw:hover .x-rw__card:not(:hover), .pf:hover .case:not(:hover) { opacity: .62; filter: saturate(.7); }
  .x-rw__card, .pf .case { transition: opacity .45s ease, filter .45s ease; }
}
.x-rw__cap, .case__cap { border-top-color: rgba(242, 240, 234, .09); }

/* ---------- hero: glow, hook, rotating headline ---------- */
.x-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.x-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.x-glow i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -10vw; top: -14vw; background: radial-gradient(circle, rgba(200, 255, 61, .32), transparent 65%); }
.x-glow i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -8vw; top: 18%; background: radial-gradient(circle, rgba(91, 140, 255, .28), transparent 65%); }
.x-glow i:nth-child(3) { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 34%; bottom: -12vw; background: radial-gradient(circle, rgba(37, 211, 102, .18), transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .x-glow i:nth-child(1) { animation: xDrift1 18s ease-in-out infinite alternate; }
  .x-glow i:nth-child(2) { animation: xDrift2 22s ease-in-out infinite alternate; }
  .x-glow i:nth-child(3) { animation: xDrift3 26s ease-in-out infinite alternate; }
}
@keyframes xDrift1 { to { transform: translate3d(12vw, 8vw, 0) scale(1.15); } }
@keyframes xDrift2 { to { transform: translate3d(-10vw, -6vw, 0) scale(.9); } }
@keyframes xDrift3 { to { transform: translate3d(-8vw, -10vw, 0) scale(1.2); } }
@media (max-width: 760px) { .x-glow i { filter: blur(40px); opacity: .45; } }

.x-hook {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%;
  margin: 0 0 clamp(14px, 2.2vw, 22px); padding: 9px 16px 9px 12px; border-radius: 999px;
  font: 500 12px/1.4 var(--mono); text-transform: uppercase; color: var(--paper);
  background: rgba(13, 14, 19, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid transparent;
  background-image: linear-gradient(rgba(13, 14, 19, .78), rgba(13, 14, 19, .78)), var(--edge-hi);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.x-hook b { color: var(--lime); font-weight: 500; }
.x-live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--wa); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .x-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--wa); animation: xPing 1.8s ease-out infinite; }
}
@keyframes xPing { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

.x-rot { margin: clamp(14px, 2vw, 22px) 0 0; font: 600 clamp(24px, 4.2vw, 56px)/1.12 var(--sans); letter-spacing: -.03em; color: var(--paper); }
.x-rot__box { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0 .06em; }
.x-rot__w {
  grid-area: 1 / 1; white-space: nowrap; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  background: linear-gradient(92deg, var(--lime), var(--lime-2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0; transform: translateY(100%);
}
.x-rot__w.is-on { opacity: 1; transform: none; }
.x-rot__w.is-out { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .x-rot.is-live .x-rot__w { transition: transform .7s var(--ease-out), opacity .45s ease; }
}
.x-rot__u { position: relative; white-space: nowrap; }
.x-rot__u::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 4px; background: linear-gradient(90deg, var(--lime), transparent); opacity: .55; }
.x-idea-note { flex-basis: 100%; margin: -4px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- pulsing WhatsApp CTAs ---------- */
.x-pulse, .x-fab__wa, .x-mbar__wa { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .x-pulse::before, .x-fab__wa::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wa);
    animation: xPulse 2.4s ease-out infinite; pointer-events: none;
  }
  .x-mbar__wa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: xPulseSh 2.4s ease-out infinite; }
}
@keyframes xPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.35, 1.6); opacity: 0; } }
@keyframes xPulseSh { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } }
.x-fab__wa::before { border-radius: 50%; }
@keyframes xPulseRound { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .x-fab__wa::before { animation-name: xPulseRound; } }

/* button micro-interactions */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .x-pbtn, .x-more { transition: transform .35s var(--ease-out), filter .25s ease, box-shadow .35s ease, background-color .25s ease, color .25s ease !important; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(200, 255, 61, .45); }
  .btn--wa:hover { box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .55); }
  .btn:active { transform: translateY(0) scale(.97); }
}

/* ---------- scroll reveal for pages without their own (.xr added by boost.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .xr-on .xr { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s var(--ease-out); }
  .xr-on .xr.is-in { opacity: 1; transform: none; }
}

/* ---------- gentle nudge banner (scroll 60% / exit intent, once per session) ---------- */
.x-nudge {
  position: fixed; z-index: 70; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 180px)); transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px; align-items: center;
  padding: 14px 14px 14px 16px; border-radius: 20px; border: 1px solid transparent;
  background: linear-gradient(rgba(14, 15, 21, .94), rgba(14, 15, 21, .94)) padding-box, var(--edge-hi) border-box;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .9), 0 10px 40px -24px rgba(200, 255, 61, .35);
  transition: transform .55s var(--ease-out), opacity .35s ease, visibility 0s linear .55s;
}
.x-nudge.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .55s var(--ease-out), opacity .35s ease; }
.x-nudge__ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #07080c; }
.x-nudge__ico svg { width: 22px; height: 22px; fill: currentColor; }
.x-nudge__t { margin: 0; font-size: 15px; line-height: 1.4; color: var(--paper); }
.x-nudge__t span { display: block; color: var(--muted); font-size: 13px; }
.x-nudge__acts { display: flex; gap: 8px; align-items: center; }
.x-nudge__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--wa); color: #07080c; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.x-nudge__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; }
.x-nudge__x:hover { border-color: var(--lime); color: var(--lime); }
.x-nudge a:focus-visible, .x-nudge button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 760px) {
  .x-nudge { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; width: calc(100vw - 24px); grid-template-columns: auto 1fr; transform: translate(-50%, -160%); }
  .x-nudge__acts { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .x-nudge, .x-nudge.is-on { transition: none; } }

/* ---------- AI Assistant · 24/7 (rule-based, client side) ---------- */
.x-ai-launch {
  position: fixed; z-index: 64; right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: calc(16px + 56px * 2 + 12px + 16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; color: var(--paper); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(rgba(13, 14, 19, .9), rgba(13, 14, 19, .9)) padding-box, var(--edge-hi) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8), 0 8px 30px -18px rgba(200, 255, 61, .5);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.x-ai-launch__dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #07080c; flex: none; }
.x-ai-launch__dot svg { width: 18px; height: 18px; }
.x-ai-launch:hover { transform: translateY(-2px); }
.x-ai-launch:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.x-ai-launch[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(200, 255, 61, .5); }
@media (prefers-reduced-motion: no-preference) {
  .x-ai-launch__dot { animation: xBreath 3s ease-in-out infinite; }
  .x-ai-launch[aria-expanded="true"] .x-ai-launch__dot { animation: none; }
}
@keyframes xBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 61, .45); } 50% { box-shadow: 0 0 0 7px rgba(200, 255, 61, 0); } }

.x-ai {
  position: fixed; z-index: 66; right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: calc(16px + 56px * 2 + 12px + 16px + 60px + env(safe-area-inset-bottom, 0px));
  width: min(390px, calc(100vw - 24px)); height: min(560px, calc(100vh - 300px)); min-height: 340px;
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(rgba(12, 13, 18, .97), rgba(12, 13, 18, .97)) padding-box, var(--edge-hi) border-box;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 16px 60px -36px rgba(200, 255, 61, .45);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
}
.x-ai.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s var(--ease-out); }
.x-ai__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(200, 255, 61, .06), transparent); }
.x-ai__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #07080c; flex: none; }
.x-ai__av svg { width: 20px; height: 20px; }
.x-ai__title { flex: 1; min-width: 0; }
.x-ai__title .x-ai__name { margin: 0; font: 600 15px/1.2 var(--sans); letter-spacing: 0; color: var(--paper); }
.x-ai__title .x-ai__sub { margin: 3px 0 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.x-ai__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.x-ai__close:hover { border-color: var(--lime); color: var(--lime); }
.x-ai__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scroll-behavior: smooth; }
.x-ai__msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; color: var(--paper); white-space: pre-line; }
.x-ai__msg--bot { align-self: flex-start; background: #161820; border: 1px solid var(--line-soft); border-bottom-left-radius: 6px; }
.x-ai__msg--me { align-self: flex-end; background: rgba(200, 255, 61, .14); border: 1px solid rgba(200, 255, 61, .3); border-bottom-right-radius: 6px; }
.x-ai__msg a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.x-ai__wa { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--wa); color: #07080c; font: 600 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.x-ai__wa svg { width: 16px; height: 16px; fill: currentColor; }
.x-ai__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-soft); max-height: 112px; overflow-y: auto; }
.x-ai__chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(242, 240, 234, .03); color: var(--paper); font: 500 12px/1 var(--sans); cursor: pointer; }
.x-ai__chip:hover { border-color: var(--lime); color: var(--lime); }
.x-ai__chip--wa { border-color: rgba(37, 211, 102, .6); color: #7af0a6; }
.x-ai__form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line-soft); }
.x-ai__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #0e0f14; color: var(--paper); font: 400 16px/1 var(--sans); }
.x-ai__form button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--lime); color: #07080c; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.x-ai__note { margin: 0; padding: 0 14px 10px; font-size: 11px; color: var(--muted); }
.x-ai button:focus-visible, .x-ai a:focus-visible, .x-ai input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.x-ai__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #161820; border: 1px solid var(--line-soft); }
.x-ai__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .x-ai__typing i { animation: aiDot 1.2s ease-in-out infinite; }
  .x-ai__typing i:nth-child(2) { animation-delay: .15s; } .x-ai__typing i:nth-child(3) { animation-delay: .3s; }
}
@media (max-width: 760px) {
  /* mobile: launcher sits above the Call/WhatsApp bar on the right; the music button stays on the left */
  .x-ai-launch { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); min-height: 44px; padding: 0 12px 0 6px; font-size: 11px; }
  .x-ai-launch__dot { width: 30px; height: 30px; }
  .x-ai { left: 12px; right: 12px; width: auto; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); height: calc(100vh - 150px - 84px); height: calc(100dvh - 150px - 84px - env(safe-area-inset-bottom, 0px)); max-height: 560px; min-height: 280px; }
  .x-ai-open .x-top { opacity: 0 !important; visibility: hidden !important; }
}
@media (prefers-reduced-motion: reduce) { .x-ai, .x-ai.is-open, .x-ai-launch { transition: none; } .x-ai__log { scroll-behavior: auto; } }
@media print { .x-ai, .x-ai-launch, .x-nudge, .x-glow { display: none !important; } }
.hero > .x-glow { z-index: 1; }
.hero > .hero__in { z-index: 2; }