/* styles/components.css */
.service-card{position:relative; overflow:hidden}
.service-card::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  filter: blur(18px); opacity:.35; transform: translateZ(0);
}
.service-card > *{position:relative}
.package-card{transition: transform .2s ease, box-shadow .2s ease}
.package-card:hover{transform: translateY(-4px); box-shadow: 0 10px 40px rgba(138,128,255,.15)}
.testimonial{display:flex; gap:14px; align-items:flex-start}
.testimonial .avatar{width:42px; height:42px; border-radius:50%; background:rgba(138,128,255,.2)}
.carousel{position:relative; overflow:hidden}
.carousel-track{display:flex; gap:18px; transition: transform .5s ease}
.carousel-nav{display:flex; gap:8px; justify-content:center; margin-top:10px}
.carousel-dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.25); border:none}
.carousel-dot.active{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08); padding:12px 0}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--text); padding:12px 0; font-size:1.05rem}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:400px}


/* --- Patch: Service cards readability & height --- */
.service-grid .service-card{min-height: 220px; display:flex; flex-direction:column; justify-content:space-between}
.service-card{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));}
.service-card::before{opacity:.22; filter: blur(12px);} /* reduce glow */
.service-card p{color:var(--text); opacity:.86}


/* --- Flip card styles --- */
.flip{perspective: 1000px;}
.flip-inner{position:relative; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); min-height:220px}
.flip .flip-front, .flip .flip-back{
  position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center;
}
.flip .flip-back{transform: rotateY(180deg)}
.flip.active .flip-inner{transform: rotateY(180deg)}

/* Details reveal */
#service-details{transform: translateY(10px); opacity:0; transition: transform .35s ease, opacity .35s ease}
#service-details.show{transform:none; opacity:1}



/* === Services Card Readability & Height (Patch v1.2) === */
.service-grid .service-card{
  min-height: 300px; /* taller cards */
}
.service-card{
  position:relative; overflow:hidden; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
}
.service-card::before{opacity:.14; filter: blur(10px);} /* softer glow */
.service-card:hover{box-shadow: 0 10px 30px rgba(138,128,255,.12);}
.service-card h3{letter-spacing:.3px}
/* Flip visuals */
.flip{perspective:1000px}
.flip-inner{position:relative; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); border-radius: inherit; min-height: 260px}
.flip .flip-front, .flip .flip-back{position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; padding: clamp(16px, 3vw, 24px)}
.flip .flip-back{transform: rotateY(180deg)}
.flip.active .flip-inner{transform: rotateY(180deg)}

/* Details panel animation */
#service-details{transform: translateY(8px); opacity:0; transition: transform .25s ease, opacity .25s ease}
#service-details.show{transform:none; opacity:1}


/* === Services UX Update (integrated) === */
.service-grid .service-card{min-height:420px;display:flex;flex-direction:column;justify-content:space-between}
.service-card{background:linear-gradient(180deg, rgba(22,30,46,.85), rgba(12,16,24,.85));border:1px solid var(--surface-3, rgba(255,255,255,.08));}
.service-card::before{opacity:.14;filter:blur(10px)} /* softer glow */
.service-card .icon{opacity:.9;margin-bottom:.5rem}
.service-card .icon img{width:48px;height:48px}
.service-card:hover{transform:scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.45)}
/* Flip styles */
.flip{perspective:1200px}
.flip .flip-inner{position:relative;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.22,1,.36,1);border-radius:inherit;height:100%}
.flip .flip-front,.flip .flip-back{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,3vw,24px)}
.flip .flip-back{transform:rotateY(180deg)}
.flip.active .flip-inner{transform:rotateY(180deg)}
/* Expanded details panel */
#service-details{border:1px solid var(--surface-3, rgba(255,255,255,.08));border-radius:16px;background:var(--surface-1, rgba(6,8,12,.6));overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease, opacity .25s ease;padding:0}
#service-details.show{max-height:1200px;opacity:1;padding:clamp(16px,2.5vw,24px)}



/* === Flip rendering fix (Firefox/WebKit safe) === */
.flip{perspective:1200px; transform-style:preserve-3d; will-change:transform}
.flip .flip-inner{position:relative; transform-style:preserve-3d; transition: transform .45s cubic-bezier(.22,1,.36,1); height:100%}
.flip .flip-front, .flip .flip-back,
.card-front, .card-back{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(16px,3vw,24px); backface-visibility:hidden; -webkit-backface-visibility:hidden; transform: translateZ(0)}
.flip .flip-back, .card-back{transform: rotateY(180deg)}
.flip.active .flip-inner{transform: rotateY(180deg)}

/* Reduce mirrored ghosting during rotation */
.flip .flip-front *, .flip .flip-back *{transform: translateZ(0)}

/* Expanded global details panel remains */
#service-details{border:1px solid var(--surface-3, rgba(255,255,255,.08));border-radius:16px;background:var(--surface-1, rgba(6,8,12,.6));overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease, opacity .25s ease;padding:0}
#service-details.show{max-height:1600px;opacity:1;padding:clamp(16px,2.5vw,24px)}

/* Mobile per-card panel */
.service-details{border:1px solid var(--surface-3, rgba(255,255,255,.08));border-radius:16px;background:rgba(12,16,24,.85); margin-top:12px; overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .25s ease; padding:0}
.service-details.show{padding:clamp(12px,3vw,18px); max-height:1600px; opacity:1}
@media (min-width: 641px){ .service-details{display:none !important} } /* only show these on mobile */


/* Global Button Refresh v2 */
.btn, .button, .card .btn, .card .button, .service-card .btn, .service-card .learn-more, .pricing-card .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, var(--accent, #7C4DFF), var(--accent-2, #00E5FF));
  color:#0b0f14; font-weight:700; letter-spacing:.02em; text-shadow:none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover, .button:hover, .service-card .learn-more:hover, .btn:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(124,77,255,.35), 0 6px 18px rgba(0,0,0,.35);
  outline:none;
}
.btn.ghost, .button.ghost { background: transparent; border-color: rgba(255,255,255,.2); color: var(--text); }
.btn[disabled], .button[disabled] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.list.suggestions{margin:.5rem 0 0 .25rem; padding-left:1rem; color:var(--text); opacity:.9}
.list.suggestions li{margin:.2rem 0; list-style:disc}


/* Icon accent update */
.service-card .icon,
.card .icon { color: var(--accent, #7C4DFF); opacity:.95 }
.service-card:hover .icon { color: var(--accent-2, #00E5FF); }
.card .icon img, .service-card .icon img { filter: none !important }


/* Pricing card height bump */
.pricing-card{min-height: 360px; display:flex; flex-direction:column; justify-content:space-between}
.pricing-card .body{flex-grow:1}


/* Inline SVG icon colors */
.icon-svg{ width:48px; height:48px; color: var(--accent, #7C4DFF); display:block; }
.service-card:hover .icon-svg{ color: var(--accent-2, #00E5FF); }

.header-btn {
  width: 70px; height: 40px; font-size: 13px;
}

/* Global Button Refresh v5 */
.btn, .button, .card .btn, .card .button, .service-card .btn, .service-card .learn-more, .pricing-card .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, var(--accent, #7C4DFF), var(--accent-2, #00E5FF));
  color:#0b0f14; font-weight:700; letter-spacing:.02em;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover, .button:hover, .service-card .learn-more:hover, .btn:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 2px rgba(124,77,255,.35), 0 6px 18px rgba(0,0,0,.35);
  outline:none;
}
.btn.ghost, .button.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--text, #E6EAF2); }
.btn[disabled], .button[disabled] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }


/* Service card icon accent */
.service-card .icon, .service-card i, .service-card svg { color: var(--accent, #7C4DFF); transition: color .3s ease }
.service-card:hover .icon, .service-card:hover i, .service-card:hover svg { color: var(--accent-2, #00E5FF) }
.service-card svg { fill: none; stroke: currentColor; }



/* Mobile service details */
.service-details{border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(12,16,24,.85); margin-top:12px; overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .25s ease; padding:0}
.service-details.show{padding:clamp(12px,3vw,18px); max-height:1600px; opacity:1}
@media (min-width: 641px){ .service-details{display:none !important} }


/* === Global Button Override (no black buttons) === */
button, a.button, .button, .btn, .btn-secondary, .btn-outline, .btn.ghost, .btn.dark {
  background: linear-gradient(90deg, var(--accent, #7C4DFF), var(--accent-2, #00E5FF)) !important;
  color: #0b0f14 !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  padding: .75rem 1.25rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}
button:hover, a.button:hover, .button:hover, .btn:hover, .btn-secondary:hover, .btn-outline:hover, .btn.ghost:hover, .btn.dark:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 0 2px rgba(124,77,255,.35), 0 6px 18px rgba(0,0,0,.35);
}

/* Package features & marquee highway */
.pkg-features{margin:.5rem 0 0 0; padding-left:1.1rem; opacity:.92}
.pkg-features li{margin:.25rem 0; list-style:disc}
.pkg-suggested{margin:.5rem 0 0 0; font-size:.95rem; opacity:.95}
.pkg-suggested .chip{display:inline-block; border:1px solid rgba(255,255,255,.18); padding:.15rem .5rem; border-radius:999px; margin:.15rem .25rem; font-style:normal; background:rgba(255,255,255,.06)}

.marquee-wrap{margin:28px 0 8px; overflow:hidden; border-radius:12px;}
.marquee{display:flex; white-space:nowrap; gap:32px; padding:10px 0; opacity:.9}
.marquee .tag{display:inline-block; padding:.35rem .75rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(12,16,24,.6)}
.marquee[data-speed="slow"] .track{animation: slide 40s linear infinite}
.marquee[data-speed="med"] .track{animation: slide 28s linear infinite}
.marquee[data-speed="fast"] .track{animation: slide 18s linear infinite}
.marquee[data-speed="hyper"] .track{animation: slide 18s linear infinite}
@keyframes slide { from { transform: translateX(0)} to { transform: translateX(-50%) } }

/* Custom calculator controls */
.ui-radio,.ui-check{appearance:none;-webkit-appearance:none; width:18px;height:18px; margin-right:8px;
  border:1.5px solid rgba(255,255,255,.35); border-radius:4px; display:inline-grid; place-content:center;
  background:rgba(12,16,24,.6); vertical-align:middle; position:relative; cursor:pointer;}
.ui-radio{border-radius:50%;}
.ui-radio::after{content:""; width:10px;height:10px; border-radius:50%; transform:scale(0); transition:transform .16s ease; background:linear-gradient(90deg,var(--accent,#7C4DFF),var(--accent-2,#00E5FF));}
.ui-check::after{content:""; width:10px;height:10px; transform:scale(0) rotate(0deg); transition:transform .16s ease; background:linear-gradient(90deg,var(--accent,#7C4DFF),var(--accent-2,#00E5FF)); clip-path: polygon(14% 44%, 0 59%, 40% 96%, 100% 24%, 84% 10%, 38% 76%);}
.ui-radio:checked::after,.ui-check:checked::after{transform:scale(1);}
label:hover .ui-radio, label:hover .ui-check{box-shadow:0 0 0 3px rgba(124,77,255,.25);}
label{user-select:none}

/* === Reduce Motion — extended site-wide (v33) === */
html.reduce-motion .marquee .track { animation: none !important; transform: none !important; }
html.reduce-motion .neon-sweep { animation: none !important; transform: none !important; }
html.reduce-motion .carousel-track { transition: none !important; }
html.reduce-motion * { scroll-behavior: auto !important; }
/* Optional: calm button and card hover effects */
html.reduce-motion .package-card,
html.reduce-motion .service-card,
html.reduce-motion .card,
html.reduce-motion .glow-hover,
html.reduce-motion [class*="hover"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}