/* Base and Variables */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background-color: var(--background);
  line-height: 1.6;
}
h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--heading);
}
p {
  margin-bottom: 1rem;
  color: var(--text-light);
}
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Root color palette (electric cyan + dark) */
:root {
  /* Updated palette: deeper backdrop softened and more vibrant neon shades.
     These colours were adjusted to lighten card backgrounds and body text for
     improved contrast while maintaining a rich electric feel. */
  --background: #021529;       /* slightly lighter than before */
  --card-bg: #08294d;          /* softened dark blue for cards */
  --footer-bg: #01192f;        /* lighter footer backdrop */
  --footer-text: #b0c6d8;      /* softer footer text */
  --primary: #00f5ff;          /* electric cyan core */
  --primary-light: #5cf6ff;    /* lighter cyan for hover */
  --primary-dark: #00c3d4;     /* darker cyan for contrast */
  --accent: #8d6cf3;           /* brighter purple accent */
  --heading: #eef6ff;          /* lighter heading colour */
  --text: #e3edf9;             /* general body text brightened for readability */
  --text-light: #b6cbe2;       /* secondary body text lightened */
  --border: #1d3f5e;           /* border colour slightly lighter */
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* Layout helpers */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* allow wrapping on smaller screens */
.wrap {
  flex-wrap: wrap;
  gap: 1.5rem;
}
.text-center {
  text-align: center;
}

/* Header & Navigation */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(1, 13, 26, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.logo {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}
.logo .accent {
  color: var(--primary-light);
}

/* Logo image styling */
/* Larger logo for prominence and subtle glow */
.logo-img {
  height: 40px;
  width: auto;
  margin-right: 1rem;
  /* add a slight drop shadow to stand out on dark backgrounds */
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.5));
}
.nav {
  display: flex;
}
.nav-list {
  display: flex;
  list-style: none;
}
.nav-list li {
  margin-left: 1.5rem;
}
.nav-list a {
  color: var(--text);
  font-weight: 500;
}
.nav-list a.active,
.nav-list a:hover {
  color: var(--primary-light);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: transform 0.3s;
}

/* Mobile navigation */
@media (max-width: 768px) {
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--background);
    width: 220px;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    transition: height 0.3s ease;
  }
  .nav.open {
    height: auto;
    padding: 1rem;
  }
  .nav-list {
    flex-direction: column;
  }
  .nav-list li {
    margin: 0.5rem 0;
  }
  .nav-toggle {
    display: flex;
  }
}

/* Hero with parallax and background image */
.hero {
  min-height: 100vh;
  color: #fff;
  /* Use flexbox to vertically and horizontally centre the hero content. A
     top padding ensures the fixed header doesn’t overlap the section. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 6rem;
  /* Layer a subtle radial gradient over an abstract background image. The order
     matters: dark overlay -> swirling graphic -> radial gradient for depth */
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/hero-bg.jpg'), radial-gradient(circle at 30% 30%, var(--primary-dark), var(--background) 80%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 3.2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hero p {
  max-width: 650px;
  margin: 0 auto 2.2rem;
  color: var(--text-light);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Floating shapes in hero for subtle motion */
.hero-shape {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: float 10s ease-in-out infinite alternate;
  z-index: 1;
}
.hero-shape.shape-one {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  top: -120px;
  left: -150px;
}
.hero-shape.shape-two {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  bottom: -100px;
  right: -120px;
  animation-delay: 4s;
}
@keyframes float {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(-30px) translateX(30px); }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.primary-btn {
  background: var(--primary);
  color: #00111f;
}
.primary-btn:hover {
  background: var(--primary-dark);
}
.secondary-btn {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.secondary-btn:hover {
  background: var(--primary);
  color: #00111f;
}

/* Section titles */
/* Section titles are accentuated with a coloured underline for better
   delineation between sections. A slightly larger font size and
   primary‑light colour help the headings stand out. */
.section-title {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  /* Use the accent colour for section headings to improve contrast and tie into the overall neon palette */
  color: var(--accent);
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

/* Features */
.features {
  padding: 4rem 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.feature-item {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.feature-item:hover {
  transform: translateY(-6px);
}
.feature-icon {
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Why choose us */
.choose-section {
  padding: 4rem 0;
}
.choose-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.choose-item {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.choose-item:hover {
  transform: translateY(-6px);
}
.choose-icon {
  font-size: 2.5rem;
  margin-bottom: 0.7rem;
  color: var(--primary);
}
.choose-item h3 {
  margin-bottom: 0.5rem;
  color: var(--heading);
}
.choose-item p {
  color: var(--text-light);
}

/* Process */
.process-section {
  padding: 4rem 0;
}
.process-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.process-step {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.process-step:hover {
  transform: translateY(-6px);
}
.process-icon {
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Case studies */
.cases-section {
  padding: 4rem 0;
}
.cases-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.case-item {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.case-item:hover {
  transform: translateY(-6px);
}
.case-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}
.case-item h3 {
  margin: 1rem;
  color: var(--heading);
}
.case-item p {
  margin: 0 1rem 1.5rem;
  color: var(--text-light);
}

/* FAQ */
.faq-section {
  padding: 4rem 0;
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--heading);
  position: relative;
}
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  font-size: 1.6rem;
  transition: transform 0.3s ease;
}
.faq-item.active .accordion-header::after {
  content: '–';
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
}
.accordion-content p {
  margin: 1rem 0;
  color: var(--text-light);
}

/* Testimonials */
.testimonials-section {
  background: var(--card-bg);
  padding: 4rem 0;
}
.testimonial-slide {
  opacity: 0;
  transition: opacity 0.6s ease;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.testimonial-slide.active {
  position: relative;
  opacity: 1;
}
.testimonial-author {
  display: block;
  margin-top: 1rem;
  font-style: italic;
  color: var(--text-light);
}
.testimonial-slide p {
  color: var(--text);
}

/* CTA */
.cta-section {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--background);
  padding: 4rem 0;
  text-align: center;
}
.cta-section h2 {
  margin-bottom: 1rem;
}

/* CTA strip used between sections */
.cta-strip {
  background: var(--card-bg);
  padding: 2rem 0;
  margin-top: 2rem;
  color: var(--text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-strip h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--heading);
}
.cta-strip p {
  margin-bottom: 0;
  color: var(--text-light);
}
.cta-strip .btn {
  align-self: center;
}
/* Override paragraph colour inside CTA for better contrast */
.cta-section p {
  color: var(--background);
}

/* Footer */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 2rem 0;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1.5rem;
}
.footer-nav,
.footer-contact {
  list-style: none;
}
.footer-nav li,
.footer-contact li {
  margin-bottom: 0.5rem;
}
.footer a {
  color: var(--footer-text);
}
.footer a:hover {
  color: var(--primary);
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary);
  color: #00111f;
  padding: 0.5rem 0.8rem;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: none;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
.back-to-top:hover {
  background: var(--primary-dark);
}

/* Page hero generic style */
/* Page hero for inner pages.
   Use the electric swirl background with a semi‑transparent overlay similar to the pricing hero.
   The hero contents are vertically centred and wrapped in a dark panel for readability. */
.page-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 6rem;
  color: #fff;
  /* Order: overlay -> swirling graphic -> radial gradient */
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../img/hero-bg.jpg'), radial-gradient(circle at 30% 30%, var(--primary-dark), var(--background) 80%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Pricing hero uses the same abstract swirling background as the home
   hero but with a shorter height. Reuses hero shapes for subtle motion. */
/* Pricing hero inherits the electric swirl from the home page but uses a shorter height.  
   A lighter overlay allows the swirling texture to show through while still keeping
   text readable. */
.pricing-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 6rem;
  color: #fff;
  /* Layer order: dark overlay (slightly lighter than home hero) -> swirling graphic -> radial gradient */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/hero-bg.jpg'), radial-gradient(circle at 30% 30%, var(--primary-dark), var(--background) 80%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Adjust typography within the pricing hero for better impact */
.pricing-hero .hero-content h1 {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.pricing-hero .hero-content p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  color: var(--text-light);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Ribbons for highlighting pricing cards */
.pricing-card {
  position: relative;
}
.ribbon {
  position: absolute;
  top: -10px;
  left: -40px;
  transform: rotate(-45deg);
  transform-origin: left top;
  padding: 0.4rem 1.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow);
}
.ribbon-primary {
  background: var(--primary);
}
.ribbon-accent {
  background: var(--accent);
}

/* Badges for pricing cards (replaces diagonal ribbons).  The badge sits at the top centre
   of the card and uses accent or primary colours.  Adjust top padding on cards to
   accommodate the badge. */
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.badge-primary {
  background: var(--primary);
}
.badge-accent {
  background: var(--accent);
}
/* Give cards a little extra top padding so the badge doesn't overlap the border */
.pricing-card {
  padding-top: 2.5rem;
}

/* Glow animation for highlighted pricing cards */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 8px 0 rgba(0, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(0, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 8px 0 rgba(0, 255, 255, 0.3);
  }
}
.pricing-card.highlight {
  animation: pulseGlow 4s ease-in-out infinite;
  border-color: var(--primary-light);
}
.page-hero h1 {
  font-size: 3rem;
  margin-bottom: 0.6rem;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Dark panel behind the text on inner page heroes */
.page-hero .container {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}

/* Adjust inner hero paragraph for clarity on dark backgrounds */
.page-hero p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--text-light);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* About page */
.about-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  padding: 4rem 0;
}
.about-image {
  background: url('../img/about.jpg') center/cover no-repeat;
  height: 300px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.values-section {
  padding: 4rem 0;
}
.values-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.value-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.value-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Contact page */
.contact-section {
  padding: 4rem 0;
}
.contact-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.contact-details {
  list-style: none;
  margin-top: 1rem;
}
.contact-details li {
  margin-bottom: 0.5rem;
}
.contact-form {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.contact-form .form-group {
  margin-bottom: 1rem;
}
.contact-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.contact-form textarea {
  resize: vertical;
}
.form-note {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: var(--text-light);
}

/* Pricing page */
.pricing-section {
  padding: 4rem 0;
}
.pricing-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pricing-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary);
  transition: transform 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
}
.price {
  font-size: 2rem;
  color: var(--primary);
  margin: 1rem 0;
}
.price-desc {
  margin-bottom: 1rem;
  color: var(--text-light);
}
.pricing-list {
  list-style: none;
  text-align: left;
  margin-bottom: 1.5rem;
}
.pricing-list li {
  margin-bottom: 0.5rem;
  color: var(--text-light);
}
.guarantee-section {
  background: var(--card-bg);
  padding: 4rem 0;
}

/* Services page structure */
.service-detail {
  padding: 4rem 0;
}
.service-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}
.service-grid.reverse {
  direction: rtl;
}
.service-grid.reverse > * {
  direction: ltr;
}
.service-image {
  height: 240px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
}
.web-img { background-image: url('../img/service-web.jpg'); }
.modules-img { background-image: url('../img/service-modules.jpg'); }
.desktop-img { background-image: url('../img/service-desktop.jpg'); }
.maintenance-img { background-image: url('../img/service-maintenance.jpg'); }
.consulting-img { background-image: url('../img/service-consulting.jpg'); }
.service-list {
  list-style: disc inside;
  margin-top: 1rem;
}
.service-list li {
  margin-bottom: 0.5rem;
  color: var(--text-light);
}

/* Animation helpers */
.animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}
.animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* --- Icon bullets for lists (pricing + services) --- */
.pricing-list li,
.service-list li {
  position: relative;
  padding-left: 2rem;            /* space for icon */
  list-style: none;              /* hide default bullet */
}


/* ===== Contact Modal ===== */
.vf-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.vf-modal.is-hidden { display: none; }
.vf-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 10, 20, .55); backdrop-filter: blur(2px); }
.vf-modal__dialog {
  position: relative; width: min(520px, 92vw); background: #0b1624; color: #e7f0fb;
  border: 1px solid #163153; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.vf-modal__close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: #9fb2c7; font-size: 28px; cursor: pointer; }
.vf-modal__title { margin: 8px 0 4px; text-align: center; }
.vf-modal__desc { margin: 0 0 8px; text-align: center; color: #cfe0f4; }

/* States */
.vf-state { display: grid; justify-items: center; gap: 10px; }
.vf-spinner {
  width: 48px; height: 48px; border: 3px solid rgba(0,245,255,.25); border-top-color: #00f5ff; border-radius: 50%;
  animation: vf-spin 1s linear infinite; margin-top: 8px;
}
@keyframes vf-spin { to { transform: rotate(360deg); } }

/* Success check animation */
.vf-check { width: 64px; height: 64px; margin-top: 4px; }
.vf-check__circle { stroke: #00f5ff; stroke-width: 3; stroke-linecap: round; animation: dash 0.6s ease-out forwards; }
.vf-check__check { stroke: #00f5ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .4s .4s ease-out forwards; }
@keyframes dash { from { stroke-dasharray: 0 157; } to { stroke-dasharray: 157 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Error */
.vf-error-icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #2b0f12; color: #ff6b6b; border: 2px solid #ff6b6b; font-weight: 800; font-family: system-ui;
}
.vf-error-list { margin: 6px 0 0; padding-left: 18px; text-align: left; }
.vf-error-list li { margin: 4px 0; color: #ffd3d3; }

/* Buttons reuse your existing .btn / .secondary-btn */


/* Default cyan bolt icon */
.pricing-list li::before,
.service-list li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.45rem;
  width: 1.1rem;
  height: 1.1rem;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.35));
  /* Inline SVG (bolt) tinted via fill; keep it lightweight */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300f5ff'>\
    <path d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/>\
  </svg>");
  opacity: 0.95;
}

/* Accented icon for highlighted cards to subtly differentiate */
.pricing-card.highlight .pricing-list li::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238d6cf3'>\
    <path d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/>\
  </svg>");
  filter: drop-shadow(0 0 4px rgba(141,108,243,0.4));
}

/* Optional: alternate icon style for Premium cards (a small star) */
.pricing-card:has(h3:nth-of-type(1):where(:not(.nope))) .price { /* noop: keeps CSS valid in older browsers */ }
.pricing-card:nth-child(3) .pricing-list li::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300f5ff'>\
    <path d='M12 2l2.9 6.2L22 9.3l-5 4.8 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.8 7.1-1.1L12 2z'/>\
  </svg>");
}

/* Tighter vertical rhythm for icon lists */
.pricing-list li + li,
.service-list li + li {
  margin-top: 0.35rem;
}


/* Ensure only one state ever shows; [hidden] is respected */
.vf-state[hidden] { display: none !important; }


/* Local SEO intro block */
.local-seo {
  padding: 2.5rem 0 0;          /* space above cards */
  text-align: center;
}
.local-seo .section-title {
  margin-bottom: 0.5rem;        /* tighter gap to the paragraph */
}
.local-seo p {
  max-width: 920px;
  margin: 0 auto 1.5rem;
  color: var(--text-light);
  line-height: 1.65;
}
@media (max-width: 768px) {
  .local-seo { padding-top: 1.75rem; }
  .local-seo .section-title { font-size: 1.6rem; }
}


/* Footer */
.site-footer {
  background: #0b1624;
  color: #eee;
  padding: 2rem 1rem;
  font-size: 0.95rem;
}

.footer-content { /* wrapper keeps spacing; grid handled by .footer-grid now */
  text-align: left;
}

.footer-logo {
  max-width: 120px;
  margin-bottom: 0.75rem;
}

.footer-location,
.footer-contact,
.footer-social {
  font-size: 0.9rem;
}

.footer-contact a,
.footer-links a {
  color: #eee;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-links a:hover {
  color: #00f5ff; 
}

/* Social */
.social-link {
  display: inline-block;
  margin: 0 0.4rem;
  color: #eee;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #00f5ff;
}

.social-icon {
  width: 22px;
  height: 22px;
}
/* Enhanced footer layout additions */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.4rem 2rem;
  width: 100%;
  align-items: start;
}
.footer-column { text-align: left; }
@media (max-width: 960px){
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px){
  .footer-grid { grid-template-columns: 1fr; }
  .footer-column { text-align: center; }
}
.footer-heading { font-size: 0.95rem; letter-spacing:.5px; text-transform: uppercase; margin:0 0 .75rem; color:#b9c4d1; }
.footer-list { list-style:none; margin:0; padding:0; }
.footer-list li { margin:0 0 .4rem; }
.footer-tagline { font-size:0.85rem; line-height:1.4; color:#c7d3dd; margin:0 0 .75rem; }
.footer-copy { font-size:0.75rem; color:#90a0b2; margin:0; }
.legal-text { margin:.35rem 0 0; color:#6f7d8b; font-size:0.7rem; }
.legal-text.small { font-size:0.65rem; }
.social-group { margin-top:.5rem; }
.footer-bottom { grid-column: 1 / -1; margin-top:1.5rem; text-align:center; }

/* Icon animations for footer phrase */
.icon-heart, .icon-bolt { display:inline-block; transition:transform .3s ease; }
.icon-heart { animation: heartBeat 3s infinite; transform-origin:center; }
.icon-bolt { animation: boltGlow 4s infinite; }
@keyframes heartBeat {
  0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); }
  10%, 50%, 70% { transform: scale(1.25); }
}
@keyframes boltGlow {
  0%, 85%, 100% { filter: drop-shadow(0 0 0 rgba(0,245,255,0)); }
  45% { filter: drop-shadow(0 0 6px rgba(0,245,255,.9)); }
  46% { filter: drop-shadow(0 0 2px rgba(0,245,255,.4)); }
  60% { filter: drop-shadow(0 0 4px rgba(0,245,255,.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-heart, .icon-bolt { animation: none; }
}

/* Footer bottom emphasis adjustments */
.footer-bottom .legal-text.small {
  font-size: 0.8rem; /* slightly larger */
  line-height: 1.35;
}

/* Themed heart icon styling (override previous generic rule) */
.icon-heart {
  color: var(--primary, #00f5ff);
  filter: drop-shadow(0 0 4px rgba(0,245,255,.55)) drop-shadow(0 0 8px rgba(0,245,255,.25));
}

/* Optional: bolt matches accent slightly brighter on pulse */
.icon-bolt { color: var(--primary, #00f5ff); }
/* ===== Breadcrumbs ===== */
.vf-breadcrumbs { background: rgba(1,13,26,.6); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.vf-breadcrumbs ol { margin: 0 auto; list-style: none; width: 90%; max-width: 1200px; display:flex; gap:.5rem; padding:.6rem 0; }
.vf-breadcrumbs a { color: var(--text-light); text-decoration: none; }
.vf-breadcrumbs a:hover { color: var(--primary); }
.vf-breadcrumbs li { color: var(--text); }
.vf-breadcrumbs li + li::before { content: "›"; color: var(--text-light); margin: 0 .35rem 0 .1rem; }