/* ============================================
   NEXUS DIGITAL — Service Detail Pages
   Shared styles for all individual service pages
   ============================================ */

/* ── Service Hero ── */
.svc-hero {
  padding: 140px 0 80px;
  position: relative; overflow: hidden;
}
.svc-hero__inner {
  display: grid; grid-template-columns: 1fr;
  gap: 48px; align-items: center;
}
.svc-hero__content { position: relative; z-index: 2; }
.svc-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 6px 14px;
  border-radius: var(--r-full); margin-bottom: 20px;
}
.svc-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 16px; }
.svc-hero__subtitle { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); max-width: 540px; margin-bottom: 28px; }
.svc-hero__visual {
  position: relative; min-height: 320px;
  border-radius: var(--r-xl); overflow: hidden;
}

@media(min-width:768px) {
  .svc-hero__inner { grid-template-columns: 1fr 1fr; }
  .svc-hero { padding: 160px 0 100px; }
}

/* ── Animated Visual Container ── */
.visual-scene {
  position: relative; width: 100%; height: 100%; min-height: 320px;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--navy);
}
.visual-scene::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(37,99,235,0.08) 0%, transparent 70%);
}

/* ── Floating Icons ── */
.float-icon {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: floatBounce 4s ease-in-out infinite;
  z-index: 3; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em;
}
.float-icon--sm { width: 44px; height: 44px; border-radius: 12px; }
.float-icon--md { width: 56px; height: 56px; }
.float-icon--lg { width: 68px; height: 68px; border-radius: 18px; }

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatBounceSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes floatBounceAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* ── Browser Mockup (enhanced) ── */
.browser-mock {
  width: 85%; margin: 24px auto 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative; z-index: 2;
}
.browser-mock__bar {
  height: 32px; background: rgba(255,255,255,0.04);
  display: flex; align-items: center; padding: 0 12px; gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-mock__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.browser-mock__url {
  margin-left: 12px; height: 18px; border-radius: 4px;
  background: rgba(255,255,255,0.04); flex: 1; max-width: 200px;
}
.browser-mock__body { padding: 16px; min-height: 180px; background: rgba(0,0,0,0.2); }

/* ── Phone Mockup ── */
.phone-mock {
  width: 55%; max-width: 220px; margin: 24px auto 0;
  border-radius: 28px; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative; z-index: 2;
}
.phone-mock__notch {
  width: 100px; height: 24px; margin: 0 auto;
  background: rgba(0,0,0,0.4); border-radius: 0 0 16px 16px;
}
.phone-mock__body { padding: 12px; min-height: 280px; background: rgba(0,0,0,0.2); }

/* ── Feature Grid ── */
.svc-features { display: grid; grid-template-columns: 1fr; gap: 16px; }
.svc-feature {
  padding: 28px 24px; background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: all var(--t-base) var(--ease);
}
.svc-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-feature__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 1.3rem;
}
.svc-feature h3 { font-size: 1.05rem; margin-bottom: 8px; }
.svc-feature p { font-size: 0.88rem; line-height: 1.6; }
[data-theme="dark"] .svc-feature { background: var(--bg-white); border-color: var(--border); }
[data-theme="dark"] .svc-feature h3 { color: var(--text); }

@media(min-width:640px) { .svc-features { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .svc-features { grid-template-columns: repeat(3, 1fr); } }
.svc-features--2col { max-width: 800px; }
@media(min-width:640px) { .svc-features--2col { grid-template-columns: repeat(2, 1fr); } }

/* ── Stats Strip (Service-specific) ── */
.svc-stats {
  padding: 56px 0;
  background: var(--navy);
  color: white;
}
.svc-stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; text-align: center;
}
.svc-stat__number {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1; margin-bottom: 4px;
}
.svc-stat__label { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
@media(min-width:768px) { .svc-stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Tech Stack Grid ── */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tech-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px; background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  text-align: center; transition: all var(--t-fast) var(--ease);
}
.tech-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tech-item__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.tech-item__name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
[data-theme="dark"] .tech-item { background: var(--bg-white); border-color: var(--border); }
[data-theme="dark"] .tech-item__name { color: var(--text); }

@media(min-width:640px) { .tech-grid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width:1024px) { .tech-grid { grid-template-columns: repeat(6, 1fr); } }

/* ── FAQ Section (SEO) ── */
.svc-faq { max-width: 720px; margin: 0 auto; }
.svc-faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.svc-faq-item:last-child { border-bottom: none; }
.svc-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 20px 0; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 1rem; text-align: left; color: var(--text);
  background: none; border: none;
  transition: color var(--t-fast);
}
.svc-faq-q:hover { color: var(--blue); }
[data-theme="dark"] .svc-faq-q { color: var(--text); }
[data-theme="dark"] .svc-faq-q:hover { color: var(--cyan); }
.svc-faq-q__icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); flex-shrink: 0; margin-left: 16px;
  transition: all var(--t-base) var(--ease);
}
.svc-faq-q__icon svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
.svc-faq-item.is-open .svc-faq-q__icon { background: var(--blue); color: white; }
.svc-faq-item.is-open .svc-faq-q__icon svg { transform: rotate(45deg); }
[data-theme="dark"] .svc-faq-q__icon { background: rgba(255,255,255,0.06); }
.svc-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 0 0 0 0;
}
.svc-faq-item.is-open .svc-faq-a {
  max-height: 500px; padding: 0 0 20px 0;
}
.svc-faq-a p {
  font-size: 0.92rem; line-height: 1.7; color: var(--text-secondary);
}

/* ── Process Steps (inline) ── */
.svc-process { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: step; }
.svc-process-step {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 20px; padding: 28px 0;
  border-bottom: 1px solid var(--border);
  counter-increment: step;
}
.svc-process-step:last-child { border-bottom: none; }
.svc-process-step__num {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: white; flex-shrink: 0;
}
.svc-process-step h3 { font-size: 1rem; margin-bottom: 6px; }
.svc-process-step p { font-size: 0.88rem; line-height: 1.6; }
[data-theme="dark"] .svc-process-step { border-bottom-color: var(--border); }
[data-theme="dark"] .svc-process-step h3 { color: var(--text); }

/* ── CTA Banner (Service) ── */
.svc-cta {
  padding: 80px 0;
  text-align: center;
}
.svc-cta h2 { margin-bottom: 12px; }
.svc-cta p { max-width: 500px; margin: 0 auto 28px; color: var(--text-secondary); }

/* ── Dashboard mockup lines ── */
.dash-row {
  display: flex; gap: 6px; margin-bottom: 6px;
}
.dash-line {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,0.05);
}
.dash-block {
  border-radius: 8px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}

/* ── Typing animation (AI page) ── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.typing-cursor {
  display: inline-block; width: 2px; height: 14px;
  background: var(--cyan); margin-left: 2px;
  animation: blink 1s infinite;
}

/* ── Chart bar animation ── */
@keyframes growBar { from { height: 0; } }
.chart-bar {
  border-radius: 3px 3px 0 0;
  animation: growBar 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Pulse ring (hosting) ── */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  animation: pulseRing 2s infinite;
}

/* ── Color wheel spin (design page) ── */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.color-wheel { animation: spinSlow 20s linear infinite; }

/* ── Service Page Inline Style Replacements ── */

/* Hero background variants per service page */
.svc-hero--web     { background: linear-gradient(180deg, var(--bg) 0%, rgba(37,99,235,0.04) 100%); }
.svc-hero--ai      { background: linear-gradient(180deg, var(--bg) 0%, rgba(16,185,129,0.04) 100%); }
.svc-hero--design  { background: linear-gradient(180deg, var(--bg) 0%, rgba(168,85,247,0.04) 100%); }
.svc-hero--mobile  { background: linear-gradient(180deg, var(--bg) 0%, rgba(6,182,212,0.04) 100%); --svc-accent: var(--cyan); }
.svc-hero--hosting { background: linear-gradient(180deg, var(--bg) 0%, rgba(99,102,241,0.04) 100%); }
.svc-hero--seo     { background: linear-gradient(180deg, var(--bg) 0%, rgba(249,115,22,0.04) 100%); }

/* Hero badge colour variants */
.svc-hero__badge--blue    { background: rgba(37,99,235,0.08);  color: var(--blue); }
.svc-hero__badge--green   { background: rgba(16,185,129,0.08); color: var(--green); }
.svc-hero__badge--purple  { background: rgba(168,85,247,0.08); color: var(--purple); }
.svc-hero__badge--cyan    { background: rgba(6,182,212,0.08);  color: var(--cyan); }
.svc-hero__badge--indigo  { background: rgba(99,102,241,0.08); color: #6366F1; }
.svc-hero__badge--orange  { background: rgba(249,115,22,0.08); color: var(--orange); }

/* Accent text span inside hero h1 */
.svc-accent--green   { color: var(--green); }
.svc-accent--purple  { color: var(--purple); }
.svc-accent--cyan    { color: var(--cyan); }
.svc-accent--indigo  { color: #6366F1; }
.svc-accent--orange  { color: var(--orange); }

/* Visual scene background variants */
.visual-scene--web     { background: linear-gradient(135deg, #0A1628, #111D33); }
.visual-scene--ai      { background: linear-gradient(135deg, #0A1628, #0f2922); }
.visual-scene--design  { background: linear-gradient(135deg, #1a1035, #1e1b4b); }
.visual-scene--mobile  { background: linear-gradient(135deg, #0A1628, #0f172a); }
.visual-scene--hosting { background: linear-gradient(135deg, #0A1628, #0d1a2d); }
.visual-scene--seo     { background: linear-gradient(135deg, #1a0f00, #1C1207); }

/* Visual scene with centered content and padding */
.visual-scene--padded {
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

/* Hero image (cover + radius + shadow) */
.svc-hero-img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-2xl); box-shadow: var(--shadow-xl);
}

/* Stats section background variants */
.svc-stats--ai      { background: linear-gradient(135deg, #0f2922, #0A1628); }
.svc-stats--design  { background: linear-gradient(135deg, #1e1b4b, #312e81); }
.svc-stats--mobile  { background: linear-gradient(135deg, #0D2137, #0A1628); }
.svc-stats--hosting { background: linear-gradient(135deg, #1a1a3e, #0A1628); }
.svc-stats--seo     { background: linear-gradient(135deg, #1C1207, #0A1628); }

/* Feature icon colour variants */
.svc-feature__icon--blue   { background: rgba(37,99,235,0.08); }
.svc-feature__icon--green  { background: rgba(16,185,129,0.08); }
.svc-feature__icon--purple { background: rgba(168,85,247,0.08); }
.svc-feature__icon--cyan   { background: rgba(6,182,212,0.08); }
.svc-feature__icon--orange { background: rgba(249,115,22,0.08); }
.svc-feature__icon--red    { background: rgba(239,68,68,0.08); }
.svc-feature__icon--indigo { background: rgba(99,102,241,0.08); }
.svc-feature__icon--sky    { background: rgba(59,130,246,0.08); }
.svc-feature__icon--amber  { background: rgba(245,158,11,0.08); }
.svc-feature__icon--dark   { background: rgba(0,0,0,0.06); }

/* Tech-item icon colour variants (reuse same backgrounds) */
.tech-icon--blue   { background: rgba(37,99,235,0.08); }
.tech-icon--green  { background: rgba(16,185,129,0.08); }
.tech-icon--purple { background: rgba(168,85,247,0.08); }
.tech-icon--cyan   { background: rgba(6,182,212,0.08); }
.tech-icon--orange { background: rgba(249,115,22,0.08); }
.tech-icon--red    { background: rgba(239,68,68,0.08); }
.tech-icon--aws    { background: rgba(255,153,0,0.08); }
.tech-icon--dark   { background: rgba(0,0,0,0.06); }

/* Feature list (disc bullets inside feature cards) */
.svc-feature-list {
  list-style-type: disc; padding-left: 20px;
  color: var(--text-secondary); line-height: 1.6; font-size: 0.95rem;
}

/* Prose disc list (for long-form content sections) */
.svc-disc-list {
  list-style-type: disc; padding-left: 20px; margin-bottom: 1.5rem;
}

/* Full-width button inside pricing cards */
.btn--full { width: 100%; }

/* Pricing disclaimer text */
.svc-pricing-note {
  text-align: center; font-size: 0.85rem;
  color: var(--text-secondary); margin-top: 24px;
}

/* Process step number colour variants */
.svc-process-step__num--blue   { background: var(--blue); }
.svc-process-step__num--purple { background: var(--purple); }
.svc-process-step__num--cyan   { background: var(--cyan); }
.svc-process-step__num--green  { background: var(--green); }

/* Constrained container widths */
.svc-narrow       { max-width: 800px; }
.svc-process--narrow { max-width: 640px; }

/* Long-form prose styling */
.svc-prose {
  font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary);
}

/* Section subtitle / description (muted, centered, constrained) */
.svc-section-desc {
  max-width: 700px; margin: 0 auto;
  color: var(--text-muted); line-height: 1.7;
}
.svc-section-desc--sm { max-width: 660px; }
.svc-section-desc--lg { max-width: 800px; }

/* Custom quote CTA block */
.svc-quote-cta {
  max-width: 800px; margin: 32px auto 0; text-align: center;
  padding: 48px 32px;
  background: rgba(255,255,255,0.03); border-radius: var(--r-2xl);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.svc-quote-cta__title {
  margin-bottom: 16px; font-size: 1.75rem; font-weight: 700;
}
.svc-quote-cta__desc {
  color: var(--text-secondary); margin-bottom: 32px;
  font-size: 1.1rem; line-height: 1.6;
}

/* Hosting content block (prose) */
.svc-content--narrow {
  max-width: 800px; margin: 0 auto;
  font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary);
}

/* Content sub-heading (hosting/seo pattern) */
.svc-content__heading {
  color: var(--text); margin-top: 28px; margin-bottom: 12px;
}

/* Prose sub-heading (mobile apps) */
.svc-prose__heading {
  margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem;
}

/* Inline link accent colours */
.svc-link--purple  { color: var(--purple); }
.svc-link--orange  { color: var(--orange); text-decoration: underline; }

/* Inline text-button (unstyled button that looks like a link) */
.svc-text-btn {
  background: none; border: none; cursor: pointer;
  font-weight: 700; text-decoration: underline; font-size: inherit;
}
.svc-text-btn--orange { color: var(--orange); }

/* Internal links / explore wrapper */
.svc-explore {
  margin-top: 48px; text-align: center;
}
.svc-explore__label {
  color: var(--text-muted); margin-bottom: 16px;
}

/* Section with no top padding */
.section--no-pt { padding-top: 0; }

/* Content block with top margin */
.content-block--mt { margin-top: 40px; }
.content-block--mt-sm { margin-top: 32px; }

/* Centered content block with text-align center */
.content-block--center { text-align: center; }