/* =========================================
   PURGEBYTE - CORE DESIGN SYSTEM & LAYOUT
   ========================================= */

/* === CSS VARIABLES === */
html {
  scroll-behavior: smooth;
}
:root {
  /* Light Theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  
  /* Brand Gradient */
  --accent-start: #0ea5e9;
  --accent-end: #10b981;
  --gradient-primary: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  --gradient-hover: linear-gradient(135deg, #0284c7, #059669);
  
  /* UI Tokens */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --sidebar-width: 280px;
  --header-height: 64px;
}

[data-theme="dark"] {
  /* Dark Theme */
  --bg-primary: #0b1120;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
  display: flex;
  min-height: 100vh;
}

/* === SIDEBAR === */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.sidebar-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }

.logo-container { position: relative; width: 75px; height: 75px; flex-shrink: 0; }
.logo-img { width: 100%; height: 100%; object-fit: contain; display: none; }
.logo-placeholder {
  width: 100%; height: 100%; border-radius: var(--radius-md);
  background: var(--gradient-primary); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.4rem; box-shadow: var(--shadow-sm); user-select: none;
}

.brand-info { display: flex; flex-direction: column; }
.brand-name {
  font-size: 1.8rem; font-weight: 800; background: var(--gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.6;
}
.brand-tagline { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; font-weight: 500; }

/* === NAVIGATION === */
.nav-menu { list-style: none; padding: 0 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.nav-link {
  display: block; padding: 0.9rem 1.15rem; border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.2px; transition: var(--transition); border-left: 3px solid transparent;
}
.nav-link:hover, .nav-link.active { background: var(--bg-tertiary); color: var(--text-primary); border-left-color: var(--accent-start); }

/* === SIDEBAR FOOTER & THEME TOGGLE === */
.sidebar-footer { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--border-color); margin-top: auto; }

/* === BULLETPROOF THEME TOGGLE (COMPACT) === */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 126px; /* Fixed compact width */
  padding: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  height: 31px;
  user-select: none;
  transition: border-color 0.2s;
  margin: 0 auto; /* Centers the button in the sidebar */
}

.theme-toggle:hover { border-color: var(--accent-start); }

.toggle-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sun-icon { color: #f59e0b; }
.moon-icon { color: #60a5fa; }

/* Icon states: Active = bold & scaled, Inactive = dimmed */
[data-theme="light"] .sun-icon { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.5)); }
[data-theme="light"] .moon-icon { opacity: 0.35; transform: scale(0.85); }
[data-theme="dark"] .sun-icon { opacity: 0.35; transform: scale(0.85); }
[data-theme="dark"] .moon-icon { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.5)); }

.toggle-track {
  flex: 1;
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 999px;
  position: relative;
  margin: 0 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--gradient-primary);
  border-radius: 50%;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 2;
}

/* Slide thumb to right in dark mode */
[data-theme="dark"] .toggle-thumb { left: calc(100% - 22px); }

/* === MAIN LAYOUT === */
.main-content { margin-left: var(--sidebar-width); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* === ANNOUNCEMENT BAR === */
.announcement-bar {
  height: 44px; background: var(--gradient-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 1.25rem;
  font-size: 0.9rem; font-weight: 500; position: relative; transition: var(--transition);
}
.announcement-bar.hidden { display: none; }
.announcement-bar .dismiss-btn {
  position: absolute; right: 1rem; background: none; border: none;
  color: #fff; font-size: 1.4rem; cursor: pointer; opacity: 0.85; transition: opacity 0.2s;
}
.announcement-bar .dismiss-btn:hover { opacity: 1; }

/* === HEADER & CONTENT === */
.page-header { padding: 2.5rem 2.5rem 2rem; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.page-title { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.page-subtitle { color: var(--text-secondary); font-size: 1.15rem; max-width: 700px; }
.page-content { padding: 2.5rem; flex: 1; }
.container { max-width: 1200px; margin: 0 auto; }

/* === BUTTONS & UTILITIES === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.75rem;
  background: var(--gradient-primary); color: #fff; border: none; border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition);
}
.btn:hover { background: var(--gradient-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; border: 2px solid var(--accent-start); color: var(--accent-start); }
.btn-outline:hover { background: var(--accent-start); color: #fff; }
.text-gradient {
  background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* === WHATSAPP WIDGET === */
.whatsapp-widget {
  position: fixed; bottom: 1.5rem; right: 1.5rem; width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35); text-decoration: none; z-index: 2000;
  transition: var(--transition); animation: whatsappPulse 2.5s infinite;
}
.whatsapp-widget:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5); }
.whatsapp-widget svg { width: 30px; height: 30px; fill: #fff; }
@keyframes whatsappPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* === FOOTER === */
.site-footer {
  padding: 1.5rem 2.5rem; border-top: 1px solid var(--border-color);
  background: var(--bg-secondary); font-size: 0.9rem; color: var(--text-muted); text-align: center;
}
.site-footer a { color: var(--text-secondary); text-decoration: none; margin: 0 0.25rem; }
.site-footer a:hover { text-decoration: underline; color: var(--accent-start); }

/* === MOBILE NAV === */
.mobile-menu-toggle {
  display: none; position: fixed; top: 1rem; left: 1rem; z-index: 1100;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.6rem; cursor: pointer;
}
.mobile-menu-toggle svg { width: 24px; height: 24px; color: var(--text-primary); }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-md); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-menu-toggle { display: flex; }
  .page-header, .page-content, .site-footer { padding: 1.5rem; }
  .brand-name { font-size: 1.35rem; }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 2px solid var(--accent-start); outline-offset: 2px; }

/* =========================================
   PHASE 3: SERVICES LAYOUTS
   ========================================= */

.grid-2-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.service-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-start);
}

.service-icon {
  width: 42px; height: 42px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.2);
}
.service-icon svg { width: 20px; height: 20px; stroke-width: 2.5; }

.service-text { flex: 1; }
.service-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--text-primary); }
.service-card p { color: var(--text-secondary); margin-bottom: 0.4rem; line-height: 1.45; font-size: 0.9rem; }
.service-list { list-style: none; padding: 0; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.service-list li { color: var(--text-muted); font-size: 0.8rem; }

.center-cta { text-align: center; margin-top: 1rem; margin-bottom: 3rem; }

/* External Services Layout */
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-color); }
.grid-3-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.service-card-sm { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; transition: var(--transition); display: flex; flex-direction: column; justify-content: space-between; }
.service-card-sm:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.service-card-sm h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); }
.service-card-sm p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.25rem; line-height: 1.5; }
.btn-sm { display: inline-block; width: 100%; text-align: center; padding: 0.6rem; background: var(--bg-tertiary); color: var(--accent-start); border: 1px solid var(--accent-start); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: var(--transition); }
.btn-sm:hover { background: var(--accent-start); color: white; }

@media (max-width: 900px) {
  .grid-2-services { grid-template-columns: 1fr; }
  .service-card { flex-direction: column; text-align: center; align-items: center; padding: 1.25rem; }
  .service-list { justify-content: center; }
  .grid-3-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-3-services { grid-template-columns: 1fr; }
}

/* =========================================
   PHASE 2: HERO ANIMATIONS
   ========================================= */
.hero {
  padding: 4rem 0;
  background: var(--bg-primary);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 540px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Hero Visual / Animation Container */
.hero-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anim-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.anim-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 300px; height: 300px;
  background: var(--gradient-primary);
  filter: blur(80px);
  opacity: 0.15;
  border-radius: 50%;
  z-index: 0;
}

.anim-item {
  position: absolute;
  color: var(--accent-start);
  z-index: 1;
}

.anim-item svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* Specific Device Positioning & Animations */
.anim-laptop {
  width: 280px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-primary);
  animation: float 6s ease-in-out infinite;
}

.anim-phone {
  width: 120px;
  top: 10%; right: 5%;
  color: var(--accent-end);
  animation: float 5s ease-in-out infinite 1s;
}

.anim-file {
  width: 100px;
  bottom: 15%; left: 10%;
  color: var(--accent-start);
  animation: float 7s ease-in-out infinite 2s;
}

.anim-check {
  width: 80px;
  top: 20%; left: 20%;
  color: #10b981;
  animation: pulse 3s infinite;
}

.anim-gear {
  width: 70px;
  bottom: 25%; right: 15%;
  color: var(--text-muted);
  animation: spin 15s linear infinite;
}

/* Keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Features Section */
.section-features, .section-steps, .section-cta { padding: 5rem 0; }
.section-features { background: var(--bg-secondary); }

.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-primary); }
.section-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.card {
  background: var(--bg-primary); padding: 2.5rem 2rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border-color); transition: var(--transition);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-start); }
.card-icon {
  width: 50px; height: 50px; background: var(--bg-tertiary); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--accent-start);
}
.card-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-primary); }
.card p { color: var(--text-secondary); line-height: 1.6; }

/* Steps Section */
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  max-width: 900px; margin: 0 auto;
}
.step {
  text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius-lg);
  background: var(--bg-primary); border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-number {
  width: 50px; height: 50px; background: var(--gradient-primary); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; margin: 0 auto 1.25rem;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.25);
}
.step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); }
.step p { color: var(--text-secondary); font-size: 0.95rem; }

/* CTA Section */
.section-cta { background: var(--bg-primary); }
.cta-box {
  background: var(--gradient-primary); border-radius: var(--radius-lg);
  padding: 4rem 2rem; text-align: center; color: white; box-shadow: var(--shadow-md);
}
.cta-box h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; }
.cta-box p { font-size: 1.15rem; margin-bottom: 2rem; opacity: 0.9; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-box .btn { background: #ffffff; color: #0ea5e9; }
.cta-box .btn:hover { background: #f0f9ff; transform: translateY(-2px); }
.cta-box .btn-outline { background: transparent; border: 2px solid #ffffff; color: #ffffff; }
.cta-box .btn-outline:hover { background: rgba(255,255,255,0.15); color: #ffffff; }

/* Responsive for Phase 2 */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-buttons { justify-content: center; }
  .hero-visual { height: 300px; margin-top: 2rem; }
  .anim-laptop { width: 220px; }
  .anim-phone { width: 90px; right: 10%; }
  .anim-file { width: 80px; left: 5%; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.5rem; }
}


/* =========================================
   PHASE 4: PRICING & BOOKING
   ========================================= */

/* --- Pricing Grid --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: flex-start;
}

.pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.pricing-card.popular {
  border: 2px solid var(--accent-start);
  background: var(--bg-primary);
}

.pricing-card.popular .badge {
  position: absolute;
  top: 1rem;
  right: -2rem;
  background: var(--gradient-primary);
  color: white;
  padding: 0.25rem 3rem;
  transform: rotate(45deg);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.pricing-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.price-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  text-align: left;
}

.pricing-features li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.pricing-features li:last-child { border-bottom: none; }
.pricing-features li.disabled { opacity: 0.5; }

.full-width { width: 100%; display: block; }

/* --- Booking Form --- */
.booking-container { max-width: 700px; }

.booking-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}

.booking-box h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-start);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.booking-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn-whatsapp {
  background: #25D366;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-whatsapp:hover { background: #1ebc57; }

/* Responsive for Phase 4 */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.popular { order: -1; } /* Show popular first on mobile */
  .booking-actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}

/* =========================================
   PRICING & COMPARISON ENHANCEMENTS
   ========================================= */

/* Gradient Checkmark Icon */
.gradient-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: var(--gradient-primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.gradient-check svg {
  width: 10px;
  height: 10px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
}

/* Updated Feature List Styling */
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-subtitle {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Professional Comparison Table */
.comparison-section {
  margin-top: 4rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.comparison-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.comparison-table th,
.comparison-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.comparison-table th {
  background: var(--bg-tertiary);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
}
.comparison-table th:first-child { width: 35%; }
.comparison-table th:nth-child(2),
.comparison-table th:nth-child(3) { text-align: center; }
.comparison-table td { color: var(--text-secondary); font-size: 0.95rem; }
.comparison-table td:first-child { font-weight: 500; color: var(--text-primary); }
.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3) { text-align: center; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .check-icon { color: #10b981; font-weight: 700; font-size: 1.1rem; }
.comparison-table .dash-icon { color: var(--text-muted); }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .comparison-table th, .comparison-table td { padding: 0.85rem; font-size: 0.9rem; }
  .pricing-grid { gap: 1.5rem; }
}


/* =========================================
   PHASE 4: ENHANCED BOOKING STYLES
   ========================================= */

.booking-container { max-width: 700px; margin: 0 auto; }

.booking-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.booking-box h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 2rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booking-box h3:first-child { margin-top: 0; }

.step-number {
  background: var(--gradient-primary);
  color: white;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Plan Selection Radio Buttons */
.plan-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.plan-option { position: relative; }

.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.plan-card-label {
  display: block;
  padding: 1.25rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  background: var(--bg-primary);
}

.plan-card-label:hover { border-color: var(--text-muted); }

/* When Radio is Checked */
.plan-option input[type="radio"]:checked + .plan-card-label {
  border-color: var(--accent-start);
  background: rgba(14, 165, 233, 0.05); /* Subtle blue tint */
  box-shadow: 0 0 0 1px var(--accent-start);
}

.plan-label-title {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.plan-label-price {
  display: block;
  color: var(--accent-end);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Form Inputs */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-start);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Action Buttons */
.booking-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.btn-whatsapp {
  background: #25D366;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
}
.btn-whatsapp:hover { background: #1ebc57; }

/* Responsive */
@media (max-width: 600px) {
  .plan-group { grid-template-columns: 1fr; }
  .booking-actions { flex-direction: column; }
}



/* =========================================
   BOOKING ENHANCEMENTS (PHASE 4)
   ========================================= */

/* Divider Between Buttons */
.booking-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.divider-icon { font-size: 1.3rem; }

/* How Booking Works */
.how-it-works-booking {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.how-it-works-booking h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  color: var(--text-primary);
}
.booking-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.booking-step .step-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}
.booking-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Communication Policy Alert */
.policy-alert {
  margin-top: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
[data-theme="dark"] .policy-alert {
  background: rgba(245, 158, 11, 0.12);
}
.policy-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 0.1rem; }
.policy-content h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.policy-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 768px) {
  .booking-steps { grid-template-columns: 1fr; gap: 1.25rem; }
  .booking-actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
  .policy-alert { flex-direction: column; gap: 0.75rem; }
}


/* =========================================
   BOOKING LAYOUT ENHANCEMENTS
   ========================================= */

/* Two-Column Layout */
.booking-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
}

.booking-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

/* Right Side Info Container */
.booking-info-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.how-it-works-booking {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.how-it-works-booking h3 {
  text-align: left;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.booking-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.booking-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
}

.booking-step .step-icon {
  font-size: 1.25rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.booking-step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Policy Alert (fits right column) */
.policy-alert { margin-top: 0; }

/* Divider & Actions (unchanged structure, just scoped) */
.booking-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.divider-icon { font-size: 1.2rem; }

.booking-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn-whatsapp {
  background: #25D366;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
}
.btn-whatsapp:hover { background: #1ebc57; }

/* Responsive */
@media (max-width: 900px) {
  .booking-layout { grid-template-columns: 1fr; }
  .how-it-works-booking h3 { text-align: center; }
  .booking-actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}



/* =========================================
   ABOUT & CONTACT PAGE STYLES
   ========================================= */
.about-layout { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }

.about-section h2, .founder-section h2, .contact-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  border-left: 4px solid var(--accent-start);
  padding-left: 0.75rem;
}

.about-section p { color: var(--text-secondary); line-height: 1.7; font-size: 1.05rem; margin-bottom: 1.5rem; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.value-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.value-item h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.value-item p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Founder Section */
.founder-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.founder-avatar {
  width: 230px;
  height: 230px;
  border-radius: var(--radius-lg); /* Rounded square instead of circle */
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-muted);
  flex-shrink: 0;
  border: 2px solid var(--border-color);
  overflow: hidden; /* Ensures future photo uploads crop cleanly to the square shape */
}
.founder-bio h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.founder-bio .role { font-size: 0.9rem; color: var(--accent-start); font-weight: 500; margin-bottom: 0.75rem; display: block; }
.founder-bio p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  transition: var(--transition);
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.contact-icon { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
.contact-card h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.contact-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
.contact-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-start);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.contact-link:hover { text-decoration: underline; }

.policy-reminder {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-md);
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.policy-reminder strong { color: var(--text-primary); }

/* Responsive */
@media (max-width: 768px) {
  .values-grid, .contact-grid { grid-template-columns: 1fr; }
  .founder-card { flex-direction: column; text-align: center; }
  .about-section h2, .founder-section h2, .contact-section h2 { border-left: none; border-bottom: 2px solid var(--accent-start); padding-left: 0; padding-bottom: 0.5rem; }
}



/* =========================================
   PHASE 5: ENHANCED FAQS PAGE STYLES
   ========================================= */

.faq-layout { max-width: 1000px; margin: 0 auto; }

/* Enhanced Category Navigation */
.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}
.faq-category-btn {
  padding: 0.65rem 1.25rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.faq-category-btn:hover {
  border-color: var(--accent-start);
  color: var(--accent-start);
  transform: translateY(-2px);
}
.faq-category-btn.active {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* FAQ Sections */
.faq-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: 100px;
}
.faq-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.1));
  border-left: 4px solid var(--accent-start);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Accordion Items - Enhanced */
.faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: var(--transition);
}
.faq-item:hover {
  border-color: var(--accent-start);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
  line-height: 1.4;
}
.faq-question:hover { background: var(--bg-tertiary); }
.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-start);
  transition: transform 0.3s;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item.active .faq-question::after {
  content: '−';
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.active .faq-answer {
  max-height: 600px;
  padding: 0 1.5rem 1.5rem;
}

/* About PurgeByte Section - Special Styling */
.about-purgebyte-section {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(16, 185, 129, 0.08));
  border: 2px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 3rem;
}
.about-purgebyte-section h3 {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-left: none;
  padding-left: 0;
  font-size: 1.75rem;
  margin-bottom: 2rem;
}

/* Section Icons */
.section-icon {
  font-size: 1.75rem;
  margin-right: 0.5rem;
}

/* Policy Note in Answers */
.policy-note {
  display: inline-block;
  background: var(--bg-tertiary);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-start);
  margin: 0.5rem 0;
  border-left: 3px solid var(--accent-start);
}

/* Highlight Box */
.highlight-box {
  background: rgba(14, 165, 233, 0.1);
  border-left: 4px solid var(--accent-start);
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0.75rem 0;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-categories { 
    justify-content: flex-start;
    padding: 1rem;
    gap: 0.5rem;
  }
  .faq-category-btn { 
    font-size: 0.85rem; 
    padding: 0.5rem 1rem;
  }
  .faq-question { 
    font-size: 0.95rem; 
    padding: 1rem 1.25rem;
  }
  .faq-answer { 
    font-size: 0.9rem;
    padding: 0 1.25rem;
  }
  .faq-item.active .faq-answer {
    padding: 0 1.25rem 1.25rem;
  }
  .about-purgebyte-section {
    padding: 1.5rem;
  }
  .faq-section h3 {
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
  }
}



/* =========================================
   PHASE 6: LEGAL PAGES STYLES
   ========================================= */

.legal-layout { max-width: 800px; margin: 0 auto; }

.legal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p { margin-bottom: 1rem; }

.legal-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.legal-content li { margin-bottom: 0.5rem; }

.legal-note {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.legal-note strong { color: var(--text-primary); }

.last-updated {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 2rem;
  display: block;
}

.contact-link {
  color: var(--accent-start);
  text-decoration: none;
  font-weight: 500;
}
.contact-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .legal-content { padding: 1.5rem; }
  .legal-content h2 { font-size: 1.25rem; }
}



/* =========================================
   HOMEPAGE GRID ENHANCEMENTS
   ========================================= */
.features-grid, .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1050px; /* Prevents excessive stretching on wide screens */
  margin: 0 auto;
}

.feature-card, .step-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.feature-card { align-items: flex-start; }
.step-card { align-items: center; text-align: center; }

.feature-card:hover, .step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-start);
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.25);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .features-grid, .steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  .step-card { align-items: flex-start; text-align: left; }
}




/* =========================================
   SERVICES PAGE ALERT
   ========================================= */
.services-alert {
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
  margin: 0 auto 2.5rem;
  max-width: 900px;
}
[data-theme="dark"] .services-alert {
  background: rgba(245, 158, 11, 0.12);
}
.alert-icon { 
  font-size: 1.4rem; 
  margin-right: 0.75rem; 
  vertical-align: middle;
}
.services-alert h3 {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.services-alert p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}



/* === PRINT FIX FOR CHROME PDF === */
@media print {
  /* Force solid color for brand text (gradients don't print) */
  .brand-name,
  .text-gradient,
  .brand {
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
  }
  
  /* Ensure small tagline is visible */
  .brand-tagline,
  .brand small {
    -webkit-text-fill-color: #64748b !important;
    color: #64748b !important;
  }
  
  /* Force all colors to render in PDF */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Ensure body background is white for clean PDF */
  body {
    background: #ffffff !important;
  }
}


/* =========================================
   ENHANCED SERVICES STYLES
   ========================================= */

/* Alert Box */
.services-alert {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.5rem 2rem;
  margin: 0 auto 3rem;
  max-width: 900px;
}
[data-theme="dark"] .services-alert {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
}
.alert-icon { 
  font-size: 1.4rem; 
  margin-right: 0.75rem; 
  vertical-align: middle;
}
.services-alert h3 {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.services-alert p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Enhanced Service Cards */
.service-card-enhanced {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin-bottom: 3rem;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.service-card-enhanced:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(14, 165, 233, 0.15);
  border-color: var(--accent-start);
}

/* Service Header */
.service-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-color);
}
.service-icon-wrapper {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}
.service-icon-wrapper svg {
  width: 35px;
  height: 35px;
  fill: white;
}
.service-meta {
  flex: 1;
}
.service-meta h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.service-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Service Grid Layout */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/* Problem & Feature Lists */
.service-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.5rem 0 1rem;
}
.service-info h3:first-child {
  margin-top: 0;
}
.problem-list, .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.problem-list li {
  padding: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.feature-list li {
  padding: 0.5rem 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Benefits Section */
.service-benefits {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(16, 185, 129, 0.05));
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.service-benefits h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}
.benefit-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.benefit-box:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.benefit-box:last-child {
  margin-bottom: 0;
}
.benefit-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.benefit-box strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.benefit-box p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Perfect For Tags */
.perfect-for {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-color);
}
.perfect-for strong {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  font-size: 1rem;
}
.perfect-for .tag {
  display: inline-block;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.25rem;
  transition: var(--transition);
}
.perfect-for .tag:hover {
  background: var(--accent-start);
  color: white;
  border-color: var(--accent-start);
}

/* CTA Section */
.center-cta {
  text-align: center;
  margin-top: 4rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.1));
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-color);
}
.btn-large {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white;
  padding: 1.2rem 3rem;
  border-radius: var(--radius-lg);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
}
.btn-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(14, 165, 233, 0.4);
}
.cta-subtext {
  margin: 1rem 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
}
.cta-subtext a {
  color: var(--accent-start);
  text-decoration: none;
  font-weight: 600;
}
.cta-subtext a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 968px) {
  .service-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .service-header {
    flex-direction: column;
    text-align: center;
  }
  .service-card-enhanced {
    padding: 1.5rem;
  }
  .service-meta h2 {
    font-size: 1.5rem;
  }
}


/* =========================================
   ENHANCED COMPACT SERVICES (MEDIUM DENSITY)
   ========================================= */

/* Duration Notice - Styled like Hardware Notice (Alert Box) */
.duration-notice {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Blue tint for Info */
  border-left: 4px solid #0ea5e9; /* Blue border to match brand */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.5rem;
  margin: 0 auto 2rem; /* Reduced margin */
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
[data-theme="dark"] .duration-notice {
  background: rgba(14, 165, 233, 0.08);
  border-color: #0ea5e9;
}
.duration-notice .alert-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Compact Service Cards */
.service-card-enhanced {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg); /* Slightly tighter radius */
  margin-bottom: 1.25rem; /* Reduced gap between cards */
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.service-card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.1);
  border-color: var(--accent-start);
}

/* Toggle Header */
.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 1rem; /* Reduced gap */
  padding: 1.25rem 1.5rem; /* Tighter padding */
  cursor: pointer;
  background: transparent;
  transition: background 0.2s;
}
.collapsible-toggle:hover {
  background: rgba(14, 165, 233, 0.02);
}

.toggle-icon {
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-start);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.collapsible.expanded .toggle-icon {
  transform: rotate(45deg);
  background: var(--accent-start);
  color: white;
}

/* Collapsible Content */
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 1.5rem;
}
.collapsible.expanded .collapsible-content {
  padding: 0 1.5rem 1.5rem; /* Reduced padding */
}

/* Medium Grid Layout */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* Tighter gap */
}

/* Typography & Lists */
.service-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1rem 0 0.5rem;
}
.service-info h3:first-child { margin-top: 0; }

.problem-list li { padding: 0.35rem 0; color: var(--text-secondary); font-size: 0.9rem; }
.feature-list li { padding: 0.35rem 0; color: var(--text-primary); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }

.check {
  width: 16px; height: 16px; font-size: 0.65rem; flex-shrink: 0;
}

/* Benefits Box */
.service-benefits {
  background: rgba(14, 165, 233, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem; /* Tighter padding */
}
.service-benefits h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.service-benefits p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }

.perfect-for {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.perfect-for strong { font-size: 0.9rem; margin-bottom: 0.5rem; }
.perfect-for .tag {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  margin: 0.2rem;
}

/* CTA */
.center-cta { margin-top: 2.5rem; }
.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }

/* Mobile */
@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; gap: 1rem; }
  .collapsible-toggle { padding: 1rem; }
  .service-card-enhanced { margin-bottom: 1rem; }
}

/* Reuse existing inner styles */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.service-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.5rem 0 0.75rem;
}
.service-info h3:first-child { margin-top: 0; }
.problem-list, .feature-list { list-style: none; padding: 0; margin: 0; }
.problem-list li { padding: 0.4rem 0; color: var(--text-secondary); font-size: 0.95rem; }
.feature-list li { padding: 0.4rem 0; color: var(--text-primary); font-size: 0.95rem; display: flex; align-items: center; gap: 0.75rem; }
.check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white; border-radius: 50%; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.service-benefits {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(16, 185, 129, 0.05));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.service-benefits h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; }
.perfect-for { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.perfect-for strong { display: block; margin-bottom: 0.5rem; color: var(--text-primary); font-size: 0.95rem; }
.perfect-for .tag {
  display: inline-block; background: var(--bg-secondary); border: 1px solid var(--border-color);
  padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; color: var(--text-secondary); margin: 0.2rem;
}

@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .collapsible-toggle { padding: 1.25rem; gap: 1rem; }
  .collapsible-content { padding: 0 1.25rem; }
  .collapsible.expanded .collapsible-content { padding: 0 1.25rem 1.5rem; }
}



/* =========================================
   TIGHT COLLAPSIBLE SERVICES (NO GRID)
   ========================================= */

/* Alert Boxes (Hardware & Duration) */
.services-alert {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0 auto 1.25rem;
  max-width: 850px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #92400e;
}
[data-theme="dark"] .services-alert {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}
.services-alert .alert-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.services-alert p { margin: 0; line-height: 1.5; }

/* Service Cards Container */
.services-list {
  max-width: 850px;
  margin: 0 auto;
}

/* Collapsible Card */
.service-card-collapsible {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color 0.2s;
}
.service-card-collapsible:hover { border-color: var(--accent-start); }

/* Header Toggle */
.service-header-toggle {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  background: transparent;
}
.service-icon-circle {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-icon-circle svg { width: 20px; height: 20px; fill: white; }
.service-title-block { flex: 1; }
.service-title-block h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.service-title-block span {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
}
.toggle-btn {
  width: 26px;
  height: 26px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  color: var(--accent-start);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
  cursor: pointer;
}
.service-card-collapsible.expanded .toggle-btn {
  transform: rotate(45deg);
  background: var(--accent-start);
  color: white;
}

/* Collapsible Body */
.service-body-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1rem;
}
.service-card-collapsible.expanded .service-body-collapsible {
  padding: 0 1rem 1rem;
}

/* Content Tightening */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 0.3rem 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.check-icon {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; flex-shrink: 0;
}
.service-overview {
  background: var(--bg-tertiary);
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.perfect-for {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.perfect-for strong { color: var(--text-primary); }
.perfect-for .tag {
  display: inline-block;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin: 0.15rem 0.25rem 0 0;
  font-size: 0.75rem;
}

/* CTA */
.center-cta { text-align: center; margin-top: 2rem; }
.btn-large { padding: 0.9rem 2rem; font-size: 1rem; }

@media (max-width: 600px) {
  .service-header-toggle { padding: 0.75rem; gap: 0.65rem; }
  .service-body-collapsible { padding: 0 0.75rem; }
  .service-card-collapsible.expanded .service-body-collapsible { padding: 0 0.75rem 0.85rem; }
}


/* =========================================
   ENGAGEMENT HELPERS & PROBLEM CARDS
   ========================================= */

/* See What We Fix Cards */
.problem-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.problem-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.problem-card:hover {
  background: var(--accent-start);
  color: white;
  border-color: var(--accent-start);
}
.problem-card.active {
  background: var(--accent-start);
  color: white;
  border-color: var(--accent-start);
}
.problem-card .emoji { font-size: 1rem; }

.solution-tip {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(14, 165, 233, 0.08);
  border-left: 3px solid var(--accent-start);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.4;
  display: none;
}
.solution-tip.show { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* Not Sure Helper Box */
.service-helper-box {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin: 2rem auto 0;
  max-width: 700px;
}
.service-helper-box p { margin: 0 0 0.75rem; font-weight: 600; color: var(--text-primary); }
.service-helper-box .subtext { font-weight: 400; font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem; }

/* Session Checklist */
.session-checklist {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1.5rem auto 0;
  max-width: 700px;
}
[data-theme="dark"] .session-checklist {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.session-checklist strong { color: #059669; display: block; margin-bottom: 0.5rem; }
.session-checklist ul { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 600px) {
  .problem-cards { gap: 0.4rem; }
  .problem-card { padding: 0.35rem 0.6rem; font-size: 0.78rem; }
  .service-helper-box, .session-checklist { padding: 1rem; }
}




/* =========================================
   FIXED "SEE WHAT WE FIX" SECTION
   ========================================= */

/* Wrapper for Cards + Solution Tip */
.solution-wrapper {
  margin-top: 1rem;
}
.solution-wrapper strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* Problem Cards - Default State */
.problem-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}

/* Problem Cards - Hover & Active (Gradient) */
.problem-card:hover, .problem-card.active {
  /* PurgeByte Gradient: Sky Blue -> Emerald Green */
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #ffffff; /* White text for readability */
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.problem-card .emoji {
  font-size: 1.1rem;
}

/* Dynamic Solution Box */
.solution-tip {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem;
  background: rgba(14, 165, 233, 0.08); /* Light blue tint */
  border-left: 4px solid #0ea5e9;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 1.5em; /* Prevents layout jump */
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }


/* =========================================
   SIDE-BY-SIDE HELPER SECTIONS
   ========================================= */

/* Container for both helper boxes */
.helpers-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem auto 0;
  max-width: 900px;
}

/* Not Sure Helper Box */
.service-helper-box {
  text-align: center;
  padding: 1.5rem;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.service-helper-box p { margin: 0 0 0.75rem; font-weight: 600; color: var(--text-primary); }
.service-helper-box .subtext { font-weight: 400; font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem; }

/* Session Checklist */
.session-checklist {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
[data-theme="dark"] .session-checklist {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
.session-checklist strong { 
  color: #059669; 
  display: block; 
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}
.session-checklist ul { 
  margin: 0; 
  padding-left: 1.2rem; 
  color: var(--text-secondary); 
  font-size: 0.9rem; 
  line-height: 1.7; 
}

/* Mobile Responsive - Stack on small screens */
@media (max-width: 768px) {
  .helpers-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .service-helper-box, .session-checklist {
    padding: 1.25rem;
  }
}


/* =========================================
   SIDE-BY-SIDE NOTICE ALERTS
   ========================================= */

/* Container for both notices */
.notices-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 auto 2rem;
  max-width: 900px;
}

/* Individual alert boxes */
.services-alert {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 0; /* Remove individual margins */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: #92400e;
}
.services-alert .alert-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.services-alert p {
  margin: 0;
  line-height: 1.5;
}

/* Duration Notice (Blue) */
.duration-notice {
  background: #f0f9ff;
  border-left-color: #0ea5e9;
  color: #0c4a6e;
}
[data-theme="dark"] .services-alert {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}
[data-theme="dark"] .duration-notice {
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
}

/* Mobile Responsive - Stack on small screens */
@media (max-width: 768px) {
  .notices-container {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}






/* =========================================
   CORE SERVICES FAQ STYLES
   ========================================= */

/* Section Styling */
#core-services-faqs {
  padding: 3rem 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
#core-services-faqs .section-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
#core-services-faqs .section-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

/* Category Groups */
.faq-category {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.faq-group-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.25rem;
}

/* FAQ Items */
.faq-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.faq-question:hover {
  background: rgba(14, 165, 233, 0.05);
}
.faq-toggle {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-start);
  transition: transform 0.3s;
}
.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: var(--bg-secondary);
}
.faq-item.active .faq-answer {
  padding: 1rem 1.25rem 1.25rem;
  max-height: 1000px;
}
.faq-answer p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}
.faq-answer strong {
  color: var(--text-primary);
}

/* Lists & Grids */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.faq-list li {
  padding: 0.3rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0.75rem 0;
}
.faq-col strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.92rem;
}

/* Table */
.faq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.88rem;
}
.faq-table th,
.faq-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.faq-table th {
  background: var(--bg-tertiary);
  font-weight: 700;
  color: var(--text-primary);
}
.faq-table td {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .faq-table {
    display: block;
    overflow-x: auto;
  }
  #core-services-faqs {
    padding: 2rem 0;
  }
}


.btn-jump-to-faq {
  display: inline-block;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-jump-to-faq:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}



/* Remove any existing ::before or ::after pseudo-elements that add + icons */
.faq-question::before,
.faq-question::after {
  display: none !important;
}

/* Ensure only the .faq-toggle span shows the + */
.faq-toggle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-start);
  transition: transform 0.3s;
  margin-left: auto;
  line-height: 1;
}

/* Rotate on active */
.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}



/* Not sure which service you need? Section*/


.faq-teaser-badge {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.1));
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.5rem 2rem;
  margin: 3rem auto;
  max-width: 800px;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2); }
  50% { box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4); }
}
.teaser-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.teaser-icon {
  font-size: 2.5rem;
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.teaser-text {
  flex: 1;
  min-width: 200px;
}
.teaser-text strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.teaser-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.teaser-btn {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all 0.3s;
}
.teaser-btn:hover {
  transform: translateX(5px);
}
.teaser-btn .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.teaser-btn:hover .arrow {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .teaser-content {
    flex-direction: column;
    text-align: center;
  }
  .teaser-btn {
    width: 100%;
    text-align: center;
  }
}



/* =========================================
CLEAN EXTERNAL SERVICES STYLES
========================================= */

/* Compact Header Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Process Section */
.process-section { margin: 3rem 0; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-xl); border: 1px solid var(--border-color); }
.process-section .section-title { text-align: center; margin-bottom: 2rem; border: none; padding: 0; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.process-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; transition: transform 0.3s; }
.process-card:hover { transform: translateY(-5px); }
.process-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.process-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.process-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Narrower Bundle Banner */
.bundle-banner-compact {
  max-width: 800px;
  margin: 2.5rem auto;
  background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(16,185,129,0.1));
  border: 2px dashed var(--accent-start);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.banner-content { display: flex; flex-direction: column; gap: 0.25rem; }
.banner-content strong { font-size: 1.05rem; color: var(--text-primary); }
.banner-content p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Service Grid & Cards */
.services-category { margin: 3rem 0; }
.category-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--border-color); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.service-card-external { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s; }
.service-card-external:hover { box-shadow: 0 8px 30px rgba(14,165,233,0.15); }
.service-mockup { background: var(--bg-tertiary); padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.mockup-placeholder { text-align: center; padding: 1.5rem; background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(16,185,129,0.1)); border: 2px dashed var(--border-color); border-radius: var(--radius-lg); width: 100%; }
.mockup-icon { font-size: 3rem; display: block; margin-bottom: 0.5rem; opacity: 0.7; }
.mockup-label { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; }
.service-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.service-content h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--text-primary); }
.service-content > p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; margin-bottom: 1rem; flex: 1; }

/* Deliverables Box */
.deliverables-box { background: rgba(16,185,129,0.08); border-left: 3px solid #10b981; border-radius: 0 8px 8px 0; padding: 0.85rem; margin: 1rem 0; }
.deliverables-box strong { display: block; margin-bottom: 0.4rem; color: var(--text-primary); font-size: 0.92rem; }
.deliverables-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.deliverables-list li { font-size: 0.85rem; color: var(--text-secondary); }

/* Buttons */
.service-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; }
.btn-whatsapp { background: #25D366; color: white; }
.btn-whatsapp:hover { background: #128C7E; }
.btn-email { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-email:hover { background: var(--accent-start); color: white; border-color: var(--accent-start); }

/* FAQ Section */
.faq-section-external { margin: 3rem 0; padding: 2rem; background: var(--bg-secondary); border-radius: var(--radius-xl); border: 1px solid var(--border-color); }
.faq-section-external .section-title { margin-bottom: 1.5rem; border: none; padding: 0; }
.faq-item { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; }
.faq-question { width: 100%; padding: 1rem 1.25rem; background: transparent; border: none; text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question:hover { background: rgba(14, 165, 233, 0.05); }
.faq-toggle { font-size: 1.3rem; font-weight: 700; color: var(--accent-start); transition: transform 0.3s; }
.faq-item.active .faq-toggle { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 1.25rem; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-item.active .faq-answer { padding: 1rem 1.25rem 1.25rem; max-height: 500px; }
.faq-answer p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

/* Final CTA */
.final-cta-box { text-align: center; padding: 2.5rem 2rem; background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(16,185,129,0.1)); border: 2px solid var(--border-color); border-radius: var(--radius-xl); margin: 3rem 0; }
.final-cta-box h3 { font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--text-primary); }
.final-cta-box > p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 1.5rem; }
.cta-buttons-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-large { padding: 0.9rem 1.8rem; font-size: 1rem; }

/* Animations */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll { opacity: 0; transition: all 0.6s ease-out; }
.animate-on-scroll.visible { opacity: 1; animation: slideUpFade 0.6s ease-out forwards; }

/* Responsive */
@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; }
  .deliverables-list { grid-template-columns: 1fr; }
  .bundle-banner-compact { flex-direction: column; text-align: center; }
  .cta-buttons-group { flex-direction: column; }
  .btn-large { width: 100%; }
}




/* Fix FAQ Accordion Issues */
.faq-section-external .faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq-section-external .faq-question {
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.faq-section-external .faq-question:hover {
  background: rgba(14, 165, 233, 0.05);
}

.faq-section-external .faq-toggle {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-start);
  transition: transform 0.3s;
  flex-shrink: 0;
  margin-left: 1rem;
}

.faq-section-external .faq-item.active .faq-toggle {
  transform: rotate(180deg);
  content: '−';
}

.faq-section-external .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.25rem;
  transition: max-height 0.35s ease, padding 0.35s ease;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
}

.faq-section-external .faq-item.active .faq-answer {
  max-height: 500px;
  padding: 0 1.25rem 1.25rem;
}

.faq-section-external .faq-answer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}







/* =========================================
HOMEPAGE TRUST & ENGAGEMENT SECTIONS
========================================= */

.hp-section {
  padding: 4rem 0;
}
.hp-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.hp-section .section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.hp-section .section-header p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 1. Trust Banner */
.hp-trust-banner {
  background: var(--gradient-primary);
  padding: 2rem 0;
  color: white;
}
.trust-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
  text-align: center;
}
.trust-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.trust-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.trust-item strong { font-size: 1.1rem; font-weight: 700; display: block; }
.trust-item span { font-size: 0.9rem; opacity: 0.9; }

/* 2. Comparison Section */
.hp-comparison { background: var(--bg-secondary); }
.comparison-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.comparison-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 320px;
  box-shadow: var(--shadow-sm);
}
.before-card { border-top: 4px solid #ef4444; }
.after-card { border-top: 4px solid #10b981; transform: scale(1.05); box-shadow: var(--shadow-md); }
.comparison-badge {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.stat-row:last-child { border-bottom: none; }
.stat-row strong { color: var(--text-primary); }
.comparison-arrow {
  font-size: 2rem;
  color: var(--accent-start);
  display: none; /* Hidden on mobile, shown on desktop */
}
@media (min-width: 768px) {
  .comparison-arrow { display: block; }
}

/* 3. Myths Section */
.hp-myths { background: var(--bg-primary); }
.myths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.myth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.myth-header, .fact-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}
.myth-header { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.fact-header { background: rgba(16, 185, 129, 0.1); color: #10b981; margin-top: 1rem; }
.myth-card p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }

/* 4. Tools Bar */
.hp-tools {
  background: var(--bg-tertiary);
  padding: 2rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.tools-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}
.tools-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.tool-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}
.tool-icon { font-size: 1.2rem; }

/* 5. Founder Spotlight */
.hp-founder { background: var(--bg-primary); }
.founder-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.founder-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  flex-shrink: 0;
}
.founder-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.founder-content p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.founder-link {
  color: var(--accent-start);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.founder-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .founder-card { flex-direction: column; text-align: center; padding: 1.5rem; }
}

/* 6. Pro Tips */
.hp-tips { background: var(--bg-secondary); }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.tip-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  transition: var(--transition);
}
.tip-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tip-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--bg-tertiary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.tip-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.tip-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.tips-cta {
  text-align: center;
  background: var(--bg-primary);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--accent-start);
}
.tips-cta p {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem;
}






/* =========================================
ENHANCED HERO ANIMATIONS (PULSE & DATA FLOW)
========================================= */

/* 1. System Pulse Rings */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 2px solid var(--accent-start);
    border-radius: 50%;
    opacity: 0;
    z-index: 0; /* Sits behind the laptop */
    pointer-events: none;
}

.pulse-ring-1 {
    animation: systemPulse 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.pulse-ring-2 {
    animation: systemPulse 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.5s; /* Staggered delay */
}


@keyframes systemPulse {
    0% { 
        width: 80px; 
        height: 80px; 
        opacity: 0.5; 
        border-width: 3px; 
    }
    100% { 
        width: 320px; 
        height: 320px; 
        opacity: 0; 
        border-width: 0px; 
    }
}

/* 2. Data Flow Particles */
.data-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-start);
    opacity: 0;
    z-index: 2; /* Sits above the glow */
    pointer-events: none;
}

/* Particle 1: Flows from top-right (Phone area) */
.particle-1 { 
    top: 20%; 
    right: 20%; 
    animation: flowToCenter1 3s ease-in-out infinite; 
}

/* Particle 2: Flows from bottom-left (File area) */
.particle-2 { 
    bottom: 25%; 
    left: 20%; 
    animation: flowToCenter2 3s ease-in-out infinite 1s; 
}

/* Particle 3: Flows from bottom-right (Gear area) */
.particle-3 { 
    bottom: 30%; 
    right: 25%; 
    animation: flowToCenter3 3s ease-in-out infinite 2s; 
}

/* Keyframes directing particles toward the center laptop */
@keyframes flowToCenter1 {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translate(-10px, 10px) scale(1.2); }
    80% { opacity: 1; }
    100% { transform: translate(-100px, 80px) scale(0.5); opacity: 0; }
}

@keyframes flowToCenter2 {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translate(10px, -10px) scale(1.2); }
    80% { opacity: 1; }
    100% { transform: translate(100px, -80px) scale(0.5); opacity: 0; }
}

@keyframes flowToCenter3 {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    20% { opacity: 1; transform: translate(10px, 10px) scale(1.2); }
    80% { opacity: 1; }
    100% { transform: translate(-80px, -100px) scale(0.5); opacity: 0; }
}

/* Mobile Adjustment for Particles */
@media (max-width: 900px) {
    @keyframes flowToCenter1 { 100% { transform: translate(-60px, 50px) scale(0.5); opacity: 0; } }
    @keyframes flowToCenter2 { 100% { transform: translate(60px, -50px) scale(0.5); opacity: 0; } }
    @keyframes flowToCenter3 { 100% { transform: translate(-50px, -60px) scale(0.5); opacity: 0; } }
}




/* =========================================
ENHANCED TRUST BADGE (PRICING PAGE)
========================================= */
.pricing-trust-badge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.04), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem 2rem;
  max-width: 750px;
  margin: 0 auto 3rem;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.06);
  transition: var(--transition);
}

/* Subtle hover lift for interactivity */
.pricing-trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.3);
}

/* The Gradient Icon Seal */
.trust-badge-icon {
  width: 52px;
  height: 52px;
  background: var(--gradient-primary); /* Uses your Blue-to-Green brand gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Text Layout */
.trust-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
}

.trust-badge-text strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  /* The .text-gradient class is already in your CSS, making the text shine! */
}

.trust-badge-text span {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .pricing-trust-badge {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1rem;
  }
  .trust-badge-text { text-align: center; }
}



/* =========================================
FIX: REMOTE SESSION WALKTHROUGH BOXES
========================================= */
.session-walkthrough {
  margin-top: 4rem !important;
  padding: 2.5rem !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  text-align: center !important;
}

.session-walkthrough h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 2rem !important;
}

.session-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}

.session-step {
  background: var(--bg-primary) !important;
  padding: 1.5rem !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  transition: var(--transition) !important;
}

.session-step:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--accent-start) !important;
}

.step-icon {
  font-size: 2rem !important;
  margin-bottom: 1rem !important;
  display: inline-block !important;
}

.session-step h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.5rem !important;
}

.session-step p {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .session-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}



/* Person Icon Animation in Hero section */
.anim-person {
  width: 90px;
  top: 15%;
  left: 5%;
  color: var(--accent-end);
  animation: float 6s ease-in-out infinite 1.5s;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .anim-person {
    width: 60px;
    left: 2%;
  }
}



/* =========================================
OPTIONAL FINAL POLISH: ORGANIC HERO FLOAT
========================================= */

/* 1. Update the float animation to include a tiny rotation for a premium feel */
@keyframes floatOrganic {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* Apply to all anim items (overrides the basic float if you used that class) */
.anim-item {
  animation-name: floatOrganic !important;
}

/* Stagger them slightly so they don't move in perfect unison */
.anim-laptop { animation-delay: 0s !important; }
.anim-phone { animation-delay: 1s !important; }
.anim-file { animation-delay: 2s !important; }
.anim-check { animation-delay: 0.5s !important; }
.anim-gear { animation-delay: 1.5s !important; }
.anim-person { animation-delay: 2.5s !important; }

/* 2. Make the Checkmark icon subtly glow/pulse to signify "Success" */
.anim-check svg {
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
  animation: checkPulse 3s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.2)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6)); transform: scale(1.05); }
}



/* =========================================
FEATURED WEB DESIGN SECTION
========================================= */
.featured-service-section {
  padding: 3rem 0 2rem;
}

.featured-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* Update your existing .featured-card to this: */
.featured-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* Text takes more space than mockup */
  gap: 3rem;
  align-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem; /* Space between top half and pricing */
}

/* Ensure the mockup has a subtle 3D effect */
.mockup-browser {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.3s ease;
}

.mockup-browser:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* Subtle gradient glow behind the card */
.featured-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: var(--gradient-primary);
  opacity: 0.05;
  border-radius: 50%;
  z-index: 0;
}

.featured-content { position: relative; z-index: 1; }

.featured-card h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.featured-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.featured-deliverables h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-start);
  margin-bottom: 1rem;
}

.featured-deliverables ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.75rem;
}

.featured-deliverables li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Pricing & Buttons Row */
.featured-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.featured-price { display: flex; flex-direction: column; }
.price-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.price-amount { font-size: 2.2rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin: 0.25rem 0; }
.price-note { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }

.featured-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Visual Mockup (Pure CSS Browser Window) 
.featured-visual { position: relative; z-index: 1; }
.mockup-browser {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.browser-dots {
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 0.4rem;
}
.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}
.browser-content { padding: 1.5rem; }
.mock-hero {
  width: 100%;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  opacity: 0.8;
}
.mock-text {
  width: 100%;
  height: 12px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.mock-text.short { width: 60%; }

/* Responsive 
@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr;
    padding: 2rem;
    text-align: center;
  }
  .featured-visual { display: none; /* Hides mockup on mobile to save space  }
  .featured-pricing-row { justify-content: center; text-align: center; }
  .featured-actions { justify-content: center; width: 100%; }
  .featured-actions .btn { flex: 1; }
} */

/* Professional Browser Mockup */
.mockup-browser {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.3s ease;
}

.mockup-browser:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.browser-dots {
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot-red, .dot-yellow, .dot-green {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.browser-url {
  flex: 1;
  margin-left: 1rem;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.url-lock { font-size: 0.7rem; }

/* Mini Website Inside Browser */
.mini-site {
  padding: 0;
  background: var(--bg-primary);
}

/* Mini Navigation */
.mini-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.mini-logo {
  width: 60px;
  height: 8px;
  background: var(--gradient-primary);
  border-radius: 4px;
}

.mini-nav-links {
  display: flex;
  gap: 0.5rem;
}

.mini-nav-links span {
  width: 30px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
}

/* Mini Hero Section */
.mini-hero {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.1));
  padding: 1.5rem 1rem;
  text-align: center;
}

.mini-hero-content {
  max-width: 200px;
  margin: 0 auto;
}

.mini-hero-title {
  width: 100%;
  height: 12px;
  background: var(--text-primary);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.mini-hero-subtitle {
  width: 80%;
  height: 8px;
  background: var(--text-secondary);
  border-radius: 4px;
  margin: 0 auto 0.75rem;
  opacity: 0.6;
}

.mini-hero-btn {
  width: 80px;
  height: 20px;
  background: var(--gradient-primary);
  border-radius: var(--radius-sm);
  margin: 0 auto;
}

/* Mini Features Grid */
.mini-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 1rem;
}

.mini-feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  text-align: center;
}

.mini-feature-icon {
  width: 24px;
  height: 24px;
  background: var(--gradient-primary);
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  opacity: 0.8;
}

.mini-feature-title {
  width: 80%;
  height: 6px;
  background: var(--text-primary);
  border-radius: 3px;
  margin: 0 auto 0.4rem;
  opacity: 0.7;
}

.mini-feature-text {
  width: 100%;
  height: 4px;
  background: var(--text-secondary);
  border-radius: 2px;
  opacity: 0.5;
}

/* Responsive */
@media (max-width: 900px) {
  .mockup-browser {
    transform: none;
  }
  .mockup-browser:hover {
    transform: none;
  }
}


/* =========================================
MODAL POPUP STYLES
========================================= */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 550px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--bg-tertiary);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.modal-close:hover { background: var(--border-color); }

.modal-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}
.modal-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.modal-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin: 0; }

.modal-body { padding: 1.5rem 2rem; }
.modal-description { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; }
.modal-body h4 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--accent-start); margin: 1.5rem 0 0.75rem; letter-spacing: 0.5px; }

.modal-features-list { list-style: none; padding: 0; margin: 0; }
.modal-features-list li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  color: var(--text-primary); font-size: 0.95rem; line-height: 1.5;
  margin-bottom: 0.75rem;
}
.modal-features-list li::before {
  content: '✓'; color: var(--accent-end); font-weight: bold; flex-shrink: 0;
}

.modal-time { color: var(--text-secondary); font-size: 0.95rem; margin: 0; }

.modal-pricing-note {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.modal-footer {
  padding: 1.5rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Side by side */
  gap: 1rem;
}


/* Keep them stacked on mobile */
@media (max-width: 600px) {
  .modal-footer {
    grid-template-columns: 1fr; /* Stacked on mobile */
  }
}



/* =========================================
COMPACT INFO SECTION (PERFECT ALIGNMENT)
========================================= */
.compact-info-section {
  padding: 3rem 0;
  background: var(--bg-primary);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Side by side */
  gap: 4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3rem;
}

.info-block h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2rem;
  position: relative;
}

/* Underline accent for headings */
.info-block h3::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gradient-primary);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* List Styles - Identical for both sides */
.compact-list, .compact-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Consistent spacing between rows */
}

.compact-list li, .compact-steps li {
  display: flex;
  align-items: flex-start; /* Aligns icon/number with the top of the text */
  gap: 1rem; /* Tight gap between icon/number and text */
}

/* Icons and Numbers - Fixed size to prevent layout shifts */
.list-icon, .step-number {
  width: 40px;
  height: 40px;
  flex-shrink: 0; /* Prevents them from squishing */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Specific styles for Left Side Icons */
.list-icon {
  background: rgba(14, 165, 233, 0.1);
  border-radius: 8px;
  color: var(--accent-start);
}

/* Specific styles for Right Side Numbers */
.step-number {
  background: var(--gradient-primary);
  color: white;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);
}

/* Text Styles */
.compact-list li div, .compact-steps li div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.2rem; /* Slight optical adjustment to align text with icon center */
}

.compact-list li strong, .compact-steps li strong {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
}

.compact-list li span, .compact-steps li span {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2rem;
  }
}


/* =========================================
ULTRA-COMPACT UNIFIED GRID
========================================= */
.unified-info-section {
  padding: 3rem 0;
  background: var(--bg-primary);
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* The Grid Layout */
.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 1.5rem; /* Tight gap for compact look */
}

/* Individual Card Styles */
.info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
}

.info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-start);
}

/* Icons and Badges */
.card-icon, .step-badge {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 10px;
}

.card-icon {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-start);
}

.step-badge {
  background: var(--gradient-primary);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.2);
}

/* Text Styles */
.info-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.info-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Mobile Responsive: Stack to 1 column on phones */
@media (max-width: 768px) {
  .info-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .info-card {
    padding: 1.25rem;
  }
}



/* =========================================
3-COLUMN COMPACT MYTHS GRID
========================================= */
.myths-3col-section {
  padding: 3rem 0;
  background: var(--bg-primary);
}

.myths-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Columns */
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Mini Card Styling */
.myth-mini-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.myth-mini-card:hover {
  background: var(--bg-secondary); /* Subtle highlight on hover */
}

/* Labels */
.mini-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}

.myth-label { color: #ef4444; /* Red for Myth */ }
.fact-label { color: #10b981; /* Green for Fact */ }

/* Text */
.mini-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.fact-text {
  color: var(--text-primary);
  font-weight: 500;
}

/* Mobile Responsive: Stack to 1 column */
@media (max-width: 900px) {
  .myths-3col-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }
}

@media (max-width: 600px) {
  .myths-3col-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 1.5rem;
  }
  .myth-mini-card {
    padding: 1.25rem;
    border: 1px solid var(--border-color); /* Add border on mobile for separation */
  }
}






/* =========================================
WEB DESIGN PRICING GRID
========================================= */
.web-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.web-pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.web-pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* Popular Card Highlight */
.web-pricing-card.popular {
  border: 2px solid var(--accent-start);
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-primary);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.package-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.package-header h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.package-target {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}

.package-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.package-timeline {
  font-size: 0.85rem;
  color: var(--accent-start);
  font-weight: 600;
  margin: 0;
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex: 1;
}

.package-features li {
  padding: 0.6rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.package-features li:last-child {
  border-bottom: none;
}

.web-pricing-card .btn {
  width: 100%;
}

/* Mobile Responsive: Stack on small screens */
@media (max-width: 768px) {
  .web-pricing-grid {
    grid-template-columns: 1fr;
  }
  .web-pricing-card.popular {
    order: -1; /* Shows the popular package first on mobile */
  }
}




/* =========================================
FULL-WIDTH WEB PRICING GRID (BOTTOM HALF)
========================================= */
.web-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}

.web-pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.web-pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.web-pricing-card.popular {
  border: 2px solid var(--accent-start);
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-primary);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.package-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.package-header h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.5rem; }
.package-target { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; line-height: 1.4; }
.package-price { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 0.5rem; }
.package-timeline { font-size: 0.85rem; color: var(--accent-start); font-weight: 600; margin: 0; }

.package-features {
  list-style: none; padding: 0; margin: 0 0 2rem; flex: 1;
}
.package-features li {
  padding: 0.6rem 0; color: var(--text-secondary); font-size: 0.95rem;
  border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;
}
.package-features li:last-child { border-bottom: none; }

.web-pricing-card .btn { width: 100%; }

/* Mobile Responsive */
@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr;
    padding: 2rem;
    text-align: center;
  }
  .featured-visual { display: none; /* Hides mockup on mobile to save space */ }
  .web-pricing-grid { grid-template-columns: 1fr; }
  .web-pricing-card.popular { order: -1; /* Shows popular package first on mobile */ }
}

/* Web Design Teaser Banner in homepage */
.web-design-teaser {
  padding: 3rem 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
.teaser-container {
  max-width: 1000px;
  margin: 0 auto;
}
.teaser-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.teaser-icon-wrapper {
  font-size: 2.5rem;
  background: rgba(14, 165, 233, 0.1);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.teaser-text {
  flex: 1;
}
.teaser-text h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.teaser-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.teaser-action {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .teaser-content {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  .teaser-action { width: 100%; }
  .teaser-action .btn { width: 100%; }
}




/* Web Design Bridge Banner in services page*/
.web-design-bridge {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  max-width: 850px;
  transition: var(--transition);
}
.web-design-bridge:hover {
  border-color: var(--accent-start);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.1);
}
.bridge-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.bridge-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bridge-text strong {
  font-size: 1rem;
  color: var(--text-primary);
}
.bridge-text span {
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.bridge-link {
  color: var(--accent-start);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.bridge-link:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .web-design-bridge {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}


/* =========================================
FIX: WEB PRICING BUTTON WIDTH
========================================= */
.web-pricing-card .btn {
  width: auto !important; /* Removes the full-width stretch */
  min-width: 200px; /* Gives them a consistent, professional size */
  margin: 0 auto; /* Centers the button perfectly */
  display: block; /* Required for margin: auto to work */
  padding: 0.85rem 2rem; /* Slightly more horizontal padding for balance */
}






/* Website Repair Highlight Box */
.repair-service-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.05));
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  transition: var(--transition);
}

.repair-service-box:hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.repair-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.repair-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.repair-content strong {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 700;
}

.repair-content span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.repair-link {
  color: #f59e0b;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.repair-link:hover {
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .repair-service-box {
    flex-direction: column;
    padding: 1rem;
  }
}





/* =========================================
WEBSITE REPAIR DROPDOWN STYLES
========================================= */
.repair-service-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.05));
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  transition: var(--transition);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.repair-service-box:hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  transform: translateY(-2px);
}

.repair-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.repair-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.repair-content strong {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 700;
}

.repair-content span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.repair-link {
  background: none;
  border: none;
  color: #f59e0b;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: transform 0.2s;
}

.repair-link:hover {
  transform: translateX(3px);
}

/* Dropdown Container */
.repair-details-dropdown {
  max-width: 1000px;
  margin: 0 auto 2rem;
  background: var(--bg-secondary);
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-lg);
  padding: 2rem;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Grid Layout for Categories */
.repair-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.repair-category {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: var(--transition);
}

.repair-category:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
  transform: translateY(-3px);
}

.repair-category h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.repair-category-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-style: italic;
}

.repair-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.repair-list li {
  padding: 0.4rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-color);
}

.repair-list li:last-child {
  border-bottom: none;
}

/* CTA Buttons */
.repair-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-color);
}

.repair-cta .btn {
  min-width: 200px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .repair-details-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .repair-service-box {
    flex-direction: column;
    padding: 1rem;
  }
  
  .repair-content span {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .repair-cta .btn {
    width: 100%;
    min-width: unset;
  }
}







/* =========================================
FIX: REPAIR SECTION GRID LAYOUT
========================================= */

/* 1. Force the main grid to be 1 column (since you only have 1 category now) */
.repair-details-grid {
  grid-template-columns: 1fr !important;
}

/* 2. Make the list items inside flow into 3 columns to fill the space */
.repair-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

/* 3. Clean up the list items for the new grid look */
.repair-list li {
  border-bottom: none !important; /* Remove the horizontal lines (they look messy in a grid) */
  padding: 0.4rem 0 !important;
  font-size: 0.9rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile adjustment: Stack to 2 columns on tablets */
@media (max-width: 768px) {
  .repair-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile adjustment: Stack to 1 column on phones */
@media (max-width: 480px) {
  .repair-list {
    grid-template-columns: 1fr;
  }
}



/* =========================================
WEBSITE REPAIR PRICING CLARITY
========================================= */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.category-header h4 {
  margin: 0;
  flex: 1;
}

.price-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.repair-category-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-style: italic;
}

.multi-fix-note {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(14, 165, 233, 0.08);
  border-left: 3px solid var(--accent-start);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.multi-fix-note strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.25rem;
}

.whatsapp-link {
  color: var(--accent-start);
  font-weight: 600;
  text-decoration: none;
}

.whatsapp-link:hover {
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .price-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
  }
}



/* =========================================
ENHANCED "LEARN MORE" BUTTON
========================================= */
.repair-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  padding: 0.45rem 1rem !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
  margin-left: 0.5rem !important;
  white-space: nowrap !important;
}

.repair-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(135deg, #d97706, #b45309) !important;
}

.repair-link:active {
  transform: translateY(0) !important;
}

/* Arrow animation on hover */
.repair-link::after {
  content: '→';
  font-size: 1rem;
  transition: transform 0.3s ease;
  display: inline-block;
}

.repair-link:hover::after {
  transform: translateX(4px);
}



/* =========================================
LINUX TRAINING MODAL STYLES
========================================= */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.custom-modal-content {
    background: var(--bg-primary, #ffffff);
    border-radius: 16px;
    max-width: 650px;
    margin: 40px auto;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color, #e2e8f0);
    animation: modalSlideDown 0.3s ease-out;
}
@keyframes modalSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: var(--bg-secondary, #f1f5f9);
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary, #64748b);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.custom-modal-close:hover { background: var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b); }
.custom-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--border-color, #f1f5f9);
    padding-bottom: 15px; margin-bottom: 20px;
}
.custom-modal-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary, #1e293b); margin: 0; }
.custom-price-tag {
    background: var(--gradient-primary, linear-gradient(135deg, #10b981, #059669));
    color: white; padding: 6px 16px; border-radius: 20px;
    font-weight: 700; font-size: 1.1rem;
}
.custom-modal-section { margin-bottom: 20px; }
.custom-section-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 10px; }
.custom-highlight-box {
    background: rgba(14, 165, 233, 0.08);
    border-left: 4px solid var(--accent-start, #0ea5e9);
    padding: 12px; border-radius: 6px; margin-bottom: 10px;
    font-size: 0.95rem; color: var(--text-secondary, #475569);
}
.custom-warning-box {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    padding: 12px; border-radius: 6px;
    font-size: 0.95rem; color: var(--text-secondary, #475569);
}
.custom-modal-section p { font-size: 0.95rem; color: var(--text-secondary, #475569); margin: 5px 0; line-height: 1.6; }
.custom-download-section {
    background: var(--bg-secondary, #f8fafc);
    padding: 20px; border-radius: 10px;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.custom-download-btn {
    background: var(--gradient-primary, linear-gradient(135deg, #0ea5e9, #0284c7));
    color: white; padding: 10px 20px; border-radius: 8px;
    text-decoration: none; font-weight: 600; font-size: 0.95rem;
    transition: transform 0.2s; width: 100%; text-align: center; max-width: 300px;
}
.custom-download-btn.secondary { background: linear-gradient(135deg, #10b981, #059669); }
.custom-download-btn:hover { transform: translateY(-2px); }
.custom-download-note { font-size: 0.8rem; color: var(--text-muted, #94a3b8); margin: 0 !important; text-align: center; }

@media (max-width: 600px) {
    .custom-modal-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .custom-modal-content { padding: 20px; margin: 20px auto; }
}




/* Linux Training Teaser Specifics */
.linux-theme {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  border: 1px solid rgba(102, 126, 234, 0.2);
}
.linux-theme:hover {
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}
.linux-icon {
  background: rgba(102, 126, 234, 0.15) !important;
  font-size: 2.2rem !important;
}




/* =========================================
LINUX TRAINING HIGHLIGHT ANIMATION (Blue/Green)
========================================= */
@keyframes trainingPulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.6); /* Brand Blue Glow */
        border-color: #10b981 !important; /* Brand Green Border */
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); /* Fading Green/Blue Glow */
        border-color: #0ea5e9 !important; /* Brand Blue Border */
        transform: scale(1.02); /* Slight pop out effect */
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); 
        border-color: var(--border-color) !important; 
        transform: scale(1);
    }
}

.highlight-target {
    animation: trainingPulse 2s ease-in-out 3; /* Pulses 3 times (6 seconds total) */
    z-index: 10;
    position: relative;
}



/* Pricing Disclaimer Box for external services */
.pricing-disclaimer {
    background: rgba(14, 165, 233, 0.05);
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    border-radius: 6px;
    margin: 20px 0 30px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.pricing-disclaimer strong { color: var(--text-primary); }

/* Updated Price Tag for "Starting From" */
.ext-card-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.ext-card-price span {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-left: 5px;
}




/* ==========================================
   AWAY MODE STYLES
========================================== */
.away-mode-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.85); /* Dark professional overlay */
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.away-mode-modal {
    background: #ffffff;
    max-width: 600px;
    width: 100%;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    border-top: 6px solid var(--primary, #0ea5e9);
}
.away-mode-icon {
    font-size: 48px;
    margin-bottom: 20px;
}
.away-mode-modal h2 {
    color: var(--dark, #0f172a);
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
}
.away-mode-modal p {
    color: var(--text-secondary, #475569);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
}
.away-mode-btn {
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--secondary, #10b981));
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.away-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

/* Warning Banner for Booking Areas */
.away-mode-warning-banner {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    margin: 20px 0;
    line-height: 1.6;
    font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .away-mode-modal { padding: 30px 20px; }
    .away-mode-modal h2 { font-size: 24px; }
    .away-mode-modal p { font-size: 15px; }
}





/* =========================================
   LINUX QUIZ MODAL STYLES
========================================== */
.quiz-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}
.quiz-modal-content {
    background: var(--bg-primary, #ffffff);
    border-radius: 16px;
    max-width: 700px;
    margin: 30px auto;
    padding: 35px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color, #e2e8f0);
    animation: quizSlideDown 0.3s ease-out;
}
@keyframes quizSlideDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-icon { font-size: 48px; text-align: center; margin-bottom: 10px; }
.quiz-title {
    font-size: 1.5rem; font-weight: 800; color: var(--text-primary, #0f172a);
    text-align: center; margin-bottom: 8px;
}
.quiz-subtitle {
    text-align: center; color: var(--text-secondary, #64748b);
    font-size: 0.95rem; margin-bottom: 20px;
}

.quiz-info-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 20px;
}
.quiz-info-item {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px; padding: 12px 8px; text-align: center;
}
.quiz-info-label { display: block; font-size: 0.75rem; color: var(--text-secondary, #64748b); margin-bottom: 4px; }
.quiz-info-value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary, #0ea5e9); }

.quiz-rules {
    background: #f0f9ff; border-left: 4px solid var(--primary, #0ea5e9);
    padding: 15px; border-radius: 6px; margin-bottom: 25px;
    font-size: 0.9rem; color: var(--text-secondary, #475569);
}
.quiz-rules h4 { color: var(--text-primary, #0f172a); margin-bottom: 8px; }
.quiz-rules ul { padding-left: 20px; margin: 0; }
.quiz-rules li { margin-bottom: 5px; }

/* Buttons */
.quiz-btn {
    padding: 12px 24px; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s; font-family: inherit;
}
.quiz-btn:hover { transform: translateY(-2px); }
.quiz-btn-start {
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    color: white; width: 100%; font-size: 1.1rem; margin-bottom: 10px;
}
.quiz-btn-cancel {
    background: transparent; color: var(--text-secondary, #64748b);
    width: 100%; border: 1px solid var(--border-color, #e2e8f0);
}
.quiz-btn-next, .quiz-btn-submit {
    background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white;
}
.quiz-btn-submit { background: linear-gradient(135deg, #10b981, #059669); }
.quiz-btn-prev { background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #0f172a); }
.quiz-btn-review { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; }
.quiz-btn-retake { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.quiz-btn-close, .quiz-btn-back {
    background: transparent; color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
}

/* Quiz Start Button in Linux Modal */
.quiz-start-btn {
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    color: white; padding: 12px 28px; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: transform 0.2s; font-family: inherit;
}
.quiz-start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(14,165,233,0.3); }

/* Top Bar & Timer */
.quiz-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.quiz-progress-text { font-weight: 600; color: var(--text-primary, #0f172a); font-size: 0.95rem; }
.quiz-timer {
    background: #fffbeb; color: #92400e; padding: 6px 14px;
    border-radius: 20px; font-weight: 700; font-size: 0.95rem;
    border: 1px solid #fcd34d;
}
.quiz-timer.danger { background: #fef2f2; color: #dc2626; border-color: #fca5a5; animation: timerPulse 1s infinite; }
@keyframes timerPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Progress Bar */
.quiz-progress-bar {
    width: 100%; height: 8px; background: var(--bg-secondary, #e2e8f0);
    border-radius: 4px; margin-bottom: 25px; overflow: hidden;
}
.quiz-progress-fill {
    height: 100%; background: linear-gradient(90deg, #0ea5e9, #10b981);
    border-radius: 4px; transition: width 0.3s ease;
    width: 4%;
}

/* Question */
.quiz-question-text {
    font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #0f172a);
    margin-bottom: 20px; line-height: 1.6;
}

/* Options */
.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.quiz-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 10px; cursor: pointer; transition: all 0.2s;
    font-size: 0.95rem; color: var(--text-primary, #334155);
}
.quiz-option:hover { border-color: var(--primary, #0ea5e9); background: #f0f9ff; }
.quiz-option.selected { border-color: var(--primary, #0ea5e9); background: #e0f2fe; font-weight: 600; }
.quiz-option.correct { border-color: #10b981; background: #ecfdf5; }
.quiz-option.wrong { border-color: #ef4444; background: #fef2f2; }
.quiz-option-letter {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-secondary, #f1f5f9); display: flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.quiz-option.selected .quiz-option-letter { background: var(--primary, #0ea5e9); color: white; }
.quiz-option.correct .quiz-option-letter { background: #10b981; color: white; }
.quiz-option.wrong .quiz-option-letter { background: #ef4444; color: white; }

/* Nav Buttons */
.quiz-nav-buttons { display: flex; gap: 10px; justify-content: space-between; }

/* Results */
.quiz-score-circle {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; margin: 20px auto 10px;
    color: white;
}
.quiz-score-number { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.quiz-score-label { font-size: 0.75rem; opacity: 0.9; }
.quiz-score-percentage { text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--text-primary, #0f172a); margin-bottom: 15px; }
.quiz-result-message { text-align: center; font-size: 0.95rem; color: var(--text-secondary, #475569); margin-bottom: 20px; line-height: 1.6; }
.quiz-stats-grid { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; }
.quiz-stat { text-align: center; }
.quiz-stat-num { display: block; font-size: 1.5rem; font-weight: 800; }
.quiz-stat-label { font-size: 0.8rem; color: var(--text-secondary, #64748b); }

/* Review */
.quiz-review-item {
    background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px; padding: 15px; margin-bottom: 12px;
}
.quiz-review-q { font-weight: 600; color: var(--text-primary, #0f172a); margin-bottom: 8px; font-size: 0.95rem; }
.quiz-review-answer { font-size: 0.85rem; margin-bottom: 4px; }
.quiz-review-explanation { font-size: 0.85rem; color: var(--text-secondary, #475569); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color, #e2e8f0); font-style: italic; }
.quiz-review-item.review-correct { border-left: 4px solid #10b981; }
.quiz-review-item.review-wrong { border-left: 4px solid #ef4444; }
.quiz-review-item.review-skipped { border-left: 4px solid #f59e0b; }

@media (max-width: 600px) {
    .quiz-modal-content { padding: 20px; margin: 15px auto; }
    .quiz-info-grid { grid-template-columns: repeat(2, 1fr); }
    .quiz-nav-buttons { flex-direction: column; }
    .quiz-stats-grid { gap: 15px; }
}




/* Fix for Quiz Rules in Dark Mode */
.quiz-rules {
    background: var(--bg-secondary, #f0f9ff);
    border-left: 4px solid var(--primary, #0ea5e9);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    color: var(--text-secondary, #475569);
}

.quiz-rules h4 {
    color: var(--text-primary, #0f172a);
    margin-bottom: 8px;
    font-weight: 700;
}

/* Dark Mode Specific Styles */
[data-theme="dark"] .quiz-rules,
.dark-mode .quiz-rules,
body.dark .quiz-rules {
    background: rgba(14, 165, 233, 0.15);
    border-left-color: var(--primary, #0ea5e9);
    color: #e2e8f0;	
}

[data-theme="dark"] .quiz-rules h4,
.dark-mode .quiz-rules h4,
body.dark .quiz-rules h4 {
    color: #60a5fa;
}

[data-theme="dark"] .quiz-rules ul li,
.dark-mode .quiz-rules ul li,
body.dark .quiz-rules ul li {
    color: #cbd5e1;
}

[data-theme="dark"] .quiz-rules strong,
.dark-mode .quiz-rules strong,
body.dark .quiz-rules strong {
    color: #ffffff;
}

/* =========================================
   FIX: QUIZ START & CANCEL BUTTONS
========================================== */
.quiz-btn-start, 
.quiz-btn-cancel {
    width: auto !important;          /* Stop them from stretching full width */
    display: inline-block !important;/* Allow them to sit side-by-side */
    padding: 12px 24px !important;   /* Comfortable padding */
    margin: 0 10px !important;       /* Space between the two buttons */
    min-width: 150px;                /* Keep them uniform in size */
    text-align: center;
}

/* Ensure the container centers them nicely */
.quiz-screen#quiz-start-screen {
    text-align: center; 
}


/* =========================================
   FIX: QUIZ RULES BULLET POINTS
========================================== */
.quiz-rules ul {
    text-align: left !important;       /* Fixes the gap between bullet and text */
    padding-left: 20px !important;     /* Standard indent for bullets */
    margin: 0 auto !important;         /* Keeps the list block centered */
    max-width: 90% !important;         /* Prevents it from stretching too wide */
}

.quiz-rules ul li {
    text-align: left !important;       /* Ensures each line is left-aligned */
    margin-bottom: 8px !important;     /* Nice spacing between rules */
}

/* =========================================
   FIX: ALIGN "RULES:" HEADING TO LEFT
========================================== */
.quiz-rules h4 {
    text-align: left !important;
    margin-left: 0 !important;
}


/* =========================================
   FIX: CENTER QUIZ RESULTS BUTTONS
========================================== */
#quiz-results-screen .quiz-btn,
#quiz-review-screen .quiz-btn {
    display: inline-block !important;
    width: auto !important;
    margin: 8px !important;
    min-width: 140px;
    text-align: center;
}

/* Center the button container */
#quiz-results-screen,
#quiz-review-screen {
    text-align: center !important;
}

/* Ensure buttons wrap nicely on mobile */
@media (max-width: 600px) {
    #quiz-results-screen .quiz-btn,
    #quiz-review-screen .quiz-btn {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
}




/* =========================================
   QUIZ ERROR NOTIFICATION
========================================== */
.quiz-error-msg {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    animation: shakeError 0.4s ease-in-out;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}




/* =========================================
   FIX: QUIZ SELECTED OPTION VISIBILITY (DARK MODE)
========================================== */

/* Ensure selected option text is clearly visible in dark mode */
[data-theme="dark"] .quiz-option.selected,
.dark-mode .quiz-option.selected,
body.dark .quiz-option.selected {
    background: #1e40af !important; /* Darker blue for better contrast */
    border-color: #3b82f6 !important;
    color: #ffffff !important; /* White text */
}

[data-theme="dark"] .quiz-option.selected .quiz-option-letter,
.dark-mode .quiz-option.selected .quiz-option-letter,
body.dark .quiz-option.selected .quiz-option-letter {
    background: #ffffff !important; /* White circle */
    color: #1e40af !important; /* Blue letter */
}

[data-theme="dark"] .quiz-option.selected span:last-child,
.dark-mode .quiz-option.selected span:last-child,
body.dark .quiz-option.selected span:last-child {
    color: #ffffff !important; /* White text for option */
    font-weight: 600 !important;
}

/* Also fix hover state in dark mode */
[data-theme="dark"] .quiz-option:hover,
.dark-mode .quiz-option:hover,
body.dark .quiz-option:hover {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
}

/* Ensure light mode still works perfectly */
.quiz-option.selected {
    background: #dbeafe !important; /* Light blue in light mode */
    border-color: #0ea5e9 !important;
    color: #0f172a !important; /* Dark text in light mode */
}

.quiz-option.selected .quiz-option-letter {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

.quiz-option.selected span:last-child {
    color: #0f172a !important;
    font-weight: 600 !important;
}



/* Web Design Pricing Responsive */
@media (max-width: 768px) {
    /* Reset the scale on mobile */
    div[style*="transform: scale(1.05)"] {
        transform: scale(1) !important;
    }
    
    /* Stack content add-ons vertically on mobile */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   WEB DESIGN FAQ & TIMELINE - DARK MODE
========================================== */

/* Why 5-7 Days Callout Box */
[data-theme="dark"] div[style*="background: #f0f9ff"],
.dark-mode div[style*="background: #f0f9ff"],
body.dark div[style*="background: #f0f9ff"] {
    background: #1e3a5f !important;
    border-left-color: #60a5fa !important;
}

[data-theme="dark"] div[style*="background: #f0f9ff"] h4,
.dark-mode div[style*="background: #f0f9ff"] h4,
body.dark div[style*="background: #f0f9ff"] h4 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] div[style*="background: #f0f9ff"] p,
[data-theme="dark"] div[style*="background: #f0f9ff"] ul,
[data-theme="dark"] div[style*="background: #f0f9ff"] li,
[data-theme="dark"] div[style*="background: #f0f9ff"] strong,
.dark-mode div[style*="background: #f0f9ff"] p,
.dark-mode div[style*="background: #f0f9ff"] ul,
.dark-mode div[style*="background: #f0f9ff"] li,
.dark-mode div[style*="background: #f0f9ff"] strong,
body.dark div[style*="background: #f0f9ff"] p,
body.dark div[style*="background: #f0f9ff"] ul,
body.dark div[style*="background: #f0f9ff"] li,
body.dark div[style*="background: #f0f9ff"] strong {
    color: #cbd5e1 !important;
}

/* FAQ Section Background */
[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f8fafc"],
.dark-mode div[style*="background: linear-gradient(135deg, #f8fafc"],
body.dark div[style*="background: linear-gradient(135deg, #f8fafc"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f8fafc"] h3,
.dark-mode div[style*="background: linear-gradient(135deg, #f8fafc"] h3,
body.dark div[style*="background: linear-gradient(135deg, #f8fafc"] h3 {
    color: #f1f5f9 !important;
}

/* FAQ Individual Question Boxes */
[data-theme="dark"] div[style*="background: white"][style*="border: 1px solid #e2e8f0"],
.dark-mode div[style*="background: white"][style*="border: 1px solid #e2e8f0"],
body.dark div[style*="background: white"][style*="border: 1px solid #e2e8f0"] {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] div[style*="background: white"][style*="border: 1px solid #e2e8f0"] h4,
.dark-mode div[style*="background: white"][style*="border: 1px solid #e2e8f0"] h4,
body.dark div[style*="background: white"][style*="border: 1px solid #e2e8f0"] h4 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] div[style*="background: white"][style*="border: 1px solid #e2e8f0"] p,
[data-theme="dark"] div[style*="background: white"][style*="border: 1px solid #e2e8f0"] strong,
.dark-mode div[style*="background: white"][style*="border: 1px solid #e2e8f0"] p,
.dark-mode div[style*="background: white"][style*="border: 1px solid #e2e8f0"] strong,
body.dark div[style*="background: white"][style*="border: 1px solid #e2e8f0"] p,
body.dark div[style*="background: white"][style*="border: 1px solid #e2e8f0"] strong {
    color: #cbd5e1 !important;
}



/* =========================================
   JUMP DOWN BUTTON STYLES
========================================== */

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px; /* Prevents the heading from hiding under the navbar */
}

/* Button Styling */
.jump-down-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--primary, #0ea5e9);
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--border, #e2e8f0);
    transition: all 0.2s ease;
}

.jump-down-btn:hover {
    transform: translateY(-2px);
    background: var(--primary, #0ea5e9);
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

/* Dark mode support for the button */
[data-theme="dark"] .jump-down-btn,
.dark-mode .jump-down-btn,
body.dark .jump-down-btn {
    background: #1e293b;
    color: #60a5fa;
    border-color: #334155;
}

[data-theme="dark"] .jump-down-btn:hover,
.dark-mode .jump-down-btn:hover,
body.dark .jump-down-btn:hover {
    background: #60a5fa;
    color: #0f172a;
}