/* ================================
   SERVICES SECTION (Scoped) - PREMIUM++
   ✅ Bigger text
   ✅ Premium animations (scroll-safe hover)
   ✅ Enhanced card depth + aura
   ✅ Inner box: double border + rotating gradient dashed + glow pulse
   Only affects .xyz-services
================================ */
.xyz-services {
  --s-bg1: #12002a;
  --s-bg2: #2a003a;
  --s-accent: #ffb400;
  --s-accent2: #ff3d7f;
  --s-card: rgba(255,255,255,0.975);
  --s-text: #111;
  --s-muted: #2f2f2f;
  --s-btn: #1c0a5a;
  --s-border: rgba(0,0,0,0.12);

  /* stronger, premium shadow stack */
  --s-shadow: 0 26px 80px rgba(0,0,0,0.28);
  --s-shadow2: 0 18px 55px rgba(0,0,0,0.22);

  --s-radius: 20px;
  --s-speed: 260ms;

  position: relative;
  padding: clamp(64px, 7.2vw, 110px) 0;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(1200px 600px at 18% 18%, rgba(255,180,0,0.14), transparent 58%),
    radial-gradient(900px 500px at 78% 62%, rgba(255,0,120,0.10), transparent 62%),
    radial-gradient(900px 520px at 52% 105%, rgba(0,220,255,0.08), transparent 65%),
    linear-gradient(135deg, var(--s-bg1), var(--s-bg2));
}

/* soft moving aurora light */
.xyz-services::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  background:
    radial-gradient(600px 300px at 30% 35%, rgba(255,180,0,0.18), transparent 60%),
    radial-gradient(560px 280px at 70% 55%, rgba(255,61,127,0.12), transparent 62%),
    radial-gradient(520px 280px at 55% 75%, rgba(0,220,255,0.10), transparent 62%);
  filter: blur(24px);
  opacity: 0.7;
  transform: translate3d(0,0,0);
  animation: xyzAurora 10s ease-in-out infinite;
  pointer-events:none;
}

@keyframes xyzAurora{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(2.5%, -2%) scale(1.02); }
}

/* Decorative sparkle background */
.xyz-services .xyz-services__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,180,0,0.10) 1px, transparent 1px);
  background-size: 18px 18px, 26px 26px;
  background-position: 0 0, 10px 14px;
  opacity: 0.55;
  pointer-events: none;
  animation: xyzStarsFloat 9s ease-in-out infinite;
}

@keyframes xyzStarsFloat {
  0%, 100% { transform: translateY(0); opacity: 0.50; }
  50%      { transform: translateY(-12px); opacity: 0.64; }
}

.xyz-services .xyz-services__container {
  position: relative;
  z-index: 1;
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* Header */
.xyz-services .xyz-services__head {
  text-align: center;
  margin-bottom: 40px;
}

.xyz-services .xyz-services__title {
  margin: 0 0 14px;
  color: #fff;
  font-weight: 1000;

  /* ✅ bigger */
  font-size: clamp(42px, 4.6vw, 76px);
  letter-spacing: -1.2px;
  line-height: 1.02;

  text-shadow: 0 18px 60px rgba(0,0,0,0.35);
  animation: xyzTitleGlow 3.2s ease-in-out infinite, xyzTitleFloat 6s ease-in-out infinite;
}

@keyframes xyzTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,180,0,0)); }
  50%      { filter: drop-shadow(0 14px 28px rgba(255,180,0,0.18)); }
}

@keyframes xyzTitleFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

.xyz-services .xyz-services__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.86);

  /* ✅ bigger */
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.85;
  max-width: 920px;
  margin-inline: auto;
}

/* Grid */
.xyz-services .xyz-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card */
.xyz-services .xyz-services__card {
  background: rgba(255,255,255,0.98);
  border-radius: var(--s-radius);
  overflow: hidden;

  /* premium border */
  border: 1px solid rgba(255,255,255,0.10);

  box-shadow: var(--s-shadow2);
  position: relative;

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  animation: xyzSvcFadeUp 860ms cubic-bezier(.2,.8,.2,1) forwards;

  transition: transform var(--s-speed) ease, box-shadow var(--s-speed) ease, filter var(--s-speed) ease;
  will-change: transform;
}

/* stagger */
.xyz-services .xyz-services__card:nth-child(1){ animation-delay: 90ms; }
.xyz-services .xyz-services__card:nth-child(2){ animation-delay: 170ms; }
.xyz-services .xyz-services__card:nth-child(3){ animation-delay: 250ms; }
.xyz-services .xyz-services__card:nth-child(4){ animation-delay: 330ms; }
.xyz-services .xyz-services__card:nth-child(5){ animation-delay: 410ms; }
.xyz-services .xyz-services__card:nth-child(6){ animation-delay: 490ms; }

@keyframes xyzSvcFadeUp {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Premium glass edge */
.xyz-services .xyz-services__card .xyz-services__imgWrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 55%);
  pointer-events:none;
}

/* Soft glow ring on hover */
.xyz-services .xyz-services__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--s-radius) + 2px);
  background:
    radial-gradient(640px 260px at 30% 15%, rgba(255,180,0,0.22), transparent 58%),
    radial-gradient(600px 260px at 85% 60%, rgba(255,61,127,0.16), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--s-speed) ease;
}

.xyz-services .xyz-services__card:hover::before { opacity: 1; }

/* Shine sweep */
.xyz-services .xyz-services__card::after {
  content: "";
  position: absolute;
  inset: -60% -60%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.40) 50%, transparent 65%);
  transform: translateX(-45%) rotate(8deg);
  opacity: 0;
  pointer-events: none;
}

.xyz-services .xyz-services__card:hover::after{
  opacity: 1;
  animation: xyzSvcShine 980ms ease forwards;
}

@keyframes xyzSvcShine {
  from { transform: translateX(-48%) rotate(8deg); }
  to   { transform: translateX(48%) rotate(8deg); }
}

.xyz-services .xyz-services__card:hover {
  transform: translateY(-10px);
  box-shadow: var(--s-shadow);
}

/* Image */
.xyz-services .xyz-services__imgWrap {
  position: relative;
  width: 100%;
  height: 290px; /* ✅ bigger */
  background: #eee;
  overflow: hidden;
}

.xyz-services .xyz-services__imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 820ms ease, filter 820ms ease;
}

.xyz-services .xyz-services__card:hover .xyz-services__imgWrap img {
  transform: scale(1.10);
  filter: saturate(1.08) contrast(1.05);
}

/* ================================
   PREMIUM INNER BOX
================================ */
.xyz-services .xyz-services__inner {
  position: relative;
  margin: 14px;
  border-radius: 18px;

  /* ✅ more padding (bigger text space) */
  padding: 22px 18px 22px;

  background: rgba(255,255,255,0.992);
  display: grid;
  gap: 14px;
  text-align: center;
  overflow: hidden;

  border: 1px solid rgba(122,0,0,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 12px 30px rgba(0,0,0,0.08);
}

/* Rotating gradient dashed rectangle border */
.xyz-services .xyz-services__inner::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  pointer-events: none;
  transform-origin: center;

  background: linear-gradient(
    90deg,
    rgba(255,180,0,0.72),
    rgba(255,0,0,0.48),
    rgba(28,10,90,0.40),
    rgba(0,220,255,0.22),
    rgba(255,180,0,0.72)
  );
  background-size: 240% 100%;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;

  outline: 2px dashed rgba(179,0,0,0.55);
  outline-offset: -2px;

  /* ✅ smoother + slightly faster pulse */
  animation: xyzInnerRotate 16s linear infinite, xyzInnerGlow 2.4s ease-in-out infinite, xyzInnerGrad 4s linear infinite;
}

/* Thin inner solid line */
.xyz-services .xyz-services__inner::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,180,0,0.24);
  pointer-events: none;
  opacity: 0.95;
}

/* Keep content above border layers */
.xyz-services .xyz-services__inner > * {
  position: relative;
  z-index: 1;
}

@keyframes xyzInnerRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes xyzInnerGrad {
  0%   { background-position: 0% 0; }
  100% { background-position: 240% 0; }
}
@keyframes xyzInnerGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,180,0,0)); opacity: 0.92; }
  50%     { filter: drop-shadow(0 14px 22px rgba(255,180,0,0.22)); opacity: 1; }
}

/* Text sizes */
.xyz-services .xyz-services__name {
  margin: 0;
  font-weight: 1000;

  /* ✅ bigger */
  font-size: clamp(26px, 1.9vw, 34px);

  color: #7a0000;
  letter-spacing: -0.45px;
  line-height: 1.12;
}

.xyz-services .xyz-services__desc {
  margin: 0;
  color: #232323;

  /* ✅ bigger */
  font-size: clamp(17px, 1.2vw, 20px);

  line-height: 1.85;
}

/* Button */
.xyz-services .xyz-services__btn {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 175px;      /* ✅ bigger */
  padding: 13px 20px;    /* ✅ bigger */
  border-radius: 14px;

  background:
    radial-gradient(120px 40px at 30% 20%, rgba(255,180,0,0.18), transparent 55%),
    linear-gradient(180deg, #240a72, var(--s-btn));

  color: #fff;
  text-decoration: none;
  font-weight: 950;

  /* ✅ bigger */
  font-size: 16.5px;

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
  transition: transform var(--s-speed) ease, box-shadow var(--s-speed) ease, filter var(--s-speed) ease;
  position: relative;
  overflow: hidden;
}

/* button sheen */
.xyz-services .xyz-services__btn::after{
  content:"";
  position:absolute;
  inset:-60% -60%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%);
  transform: translateX(-50%) rotate(8deg);
  opacity: 0;
  pointer-events:none;
}

.xyz-services .xyz-services__btn:hover::after{
  opacity: 1;
  animation: xyzBtnShine 900ms ease forwards;
}

@keyframes xyzBtnShine{
  from { transform: translateX(-55%) rotate(8deg); }
  to   { transform: translateX(55%) rotate(8deg); }
}

.xyz-services .xyz-services__btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 22px 55px rgba(0,0,0,0.28);
}

.xyz-services .xyz-services__btn:active{
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px) {
  .xyz-services .xyz-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xyz-services .xyz-services__imgWrap { height: 260px; }
}

@media (max-width: 640px) {
  .xyz-services .xyz-services__grid {
    grid-template-columns: 1fr;
  }
  .xyz-services .xyz-services__imgWrap { height: 230px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xyz-services::before { animation: none; }
  .xyz-services .xyz-services__bg { animation: none; }
  .xyz-services .xyz-services__title { animation: none; }
  .xyz-services .xyz-services__card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .xyz-services .xyz-services__card::after { display: none; }
  .xyz-services .xyz-services__imgWrap img { transition: none; }
  .xyz-services .xyz-services__inner::before { animation: none !important; }
  .xyz-services .xyz-services__btn { transition: none; }
  .xyz-services .xyz-services__btn::after { display: none; }
}