:root {
  --teal: #00a6a6;
  --blue: #003366;
  --dark: #021526;
  --light: #f5f7fb;
  --accent: #00c4c4;
  --text: #1a1a1a;
  --white: #ffffff;
  --maxw: 1150px;

  --grad-primary: linear-gradient(135deg, var(--teal), var(--accent));
  --grad-dark: linear-gradient(160deg, #031a30 0%, var(--dark) 60%, #010d1a 100%);
  --grad-hero: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,166,166,0.14), transparent 60%),
               radial-gradient(ellipse 700px 500px at 100% 0%, rgba(0,51,102,0.10), transparent 55%),
               var(--white);

  --shadow-sm: 0 2px 10px rgba(2,21,38,0.06);
  --shadow-md: 0 10px 28px rgba(2,21,38,0.10);
  --shadow-lg: 0 22px 48px -12px rgba(2,21,38,0.28);
  --shadow-glow: 0 8px 24px rgba(0,166,166,0.28);

  --radius: 16px;
  --radius-sm: 10px;

  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Tech-hero additions */
  --circuit-line: rgba(0,196,196,0.35);
  --circuit-line-dim: rgba(0,196,196,0.14);
  --pulse-glow: 0 0 14px rgba(0,196,196,0.85), 0 0 34px rgba(0,196,196,0.35);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

a {
  color: var(--teal);
  text-decoration: none;
  transition: color 0.15s ease;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 2000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ===== Top bar ===== */
.top-bar {
  background: var(--grad-dark);
  color: var(--white);
}
.top-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.top-bar-inner a {
  color: var(--accent);
  font-weight: 600;
}

/* ===== Header / Nav ===== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e6eaf2;
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  gap: 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--blue);
  font-weight: 700;
  font-family: var(--font-display);
}

.nav-logo img {
  height: 60px;
  width: auto;
  display: block;
}

.nav-logo-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  color: #6b7a86;
  border-left: 1px solid #d9dfe8;
  padding-left: 0.55rem;
}

@media (max-width: 480px) {
  .nav-logo img {
    height: 48px;
  }
  .nav-logo-tag {
    display: none;
  }
}

/* Slightly larger logo on the homepage */
.home .nav-logo img {
  height: 74px;
}
@media (max-width: 480px) {
  .home .nav-logo img {
    height: 56px;
  }
}

/* Nav toggle (mobile hamburger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  gap: 1.15rem;
  align-items: center;
}

.nav-links > a,
.dropdown-trigger {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.5rem 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}

.nav-links > a:hover,
.dropdown-trigger:hover {
  color: var(--teal);
}

.nav-links > a.active,
.dropdown-trigger.active {
  color: var(--blue);
}
.nav-links > a.active::after,
.dropdown-trigger.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-primary);
}

.chev {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}
.nav-item.open .chev {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-item.has-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 0;
  min-width: 250px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid #eef1f6;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1100;
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.dropdown-menu a:hover {
  background: var(--light);
  color: var(--teal);
  padding-left: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.btn-primary {
  background: var(--grad-primary);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,166,166,0.38);
  color: var(--white);
}

.btn-outline {
  background: var(--white);
  color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn-outline:hover {
  background: var(--teal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Hybrid sections */
.section-light {
  background: var(--light);
  padding: 4rem 1rem;
  position: relative;
}

.section-dark {
  background: var(--grad-dark);
  color: var(--white);
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(0,196,196,0.16), transparent 45%);
  pointer-events: none;
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}
.section-dark p {
  color: #cfd8e3;
}

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

.section-light h2,
.section-dark h2 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.section-light > .section-inner > h2,
.section-dark > .section-inner > h2 {
  margin-bottom: 0.5rem;
}
.section-light .section-inner::before,
.section-dark .section-inner::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--grad-primary);
  margin: 0 auto 1.25rem;
}

/* Hero */
.hero {
  background: var(--grad-hero);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 2.5rem;
  align-items: center;
  padding: 4rem 1rem;
  margin: 0 calc(-50vw + 50%);
  padding-left: calc(50vw - var(--maxw) / 2 + 1rem);
  padding-right: calc(50vw - var(--maxw) / 2 + 1rem);
}
@media (max-width: 1150px) {
  .hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  color: var(--blue);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.hero p {
  margin-bottom: 0.75rem;
  color: #3a4a58;
}

.hero-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  background: linear-gradient(135deg, #e4f7f7, #eef3fb);
  border: 1px solid #d7ecec;
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.hero-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid #eef1f6;
  position: relative;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1.5px;
  background: var(--grad-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
}

.hero-card h3 {
  color: var(--blue);
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}

.hero-card ul {
  margin-left: 1.25rem;
  margin-top: 0.5rem;
}
.hero-card li {
  margin-bottom: 0.4rem;
}

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid #eef1f6;
  border-top: 3px solid transparent;
  border-image: var(--grad-primary) 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.section-dark .card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid transparent;
  border-image: linear-gradient(135deg, var(--accent), rgba(0,196,196,0.2)) 1;
  backdrop-filter: blur(4px);
}

.card h3 {
  margin-bottom: 0.5rem;
  color: var(--blue);
  font-size: 1.1rem;
}
.section-dark .card h3 {
  color: var(--white);
}

/* Lists */
ul {
  margin-left: 1.25rem;
  margin-top: 0.5rem;
}

ul li {
  margin-bottom: 0.4rem;
}

/* Headings */
h2 {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  color: var(--blue);
}

h1 {
  margin-bottom: 1rem;
  color: var(--blue);
}

main h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  position: relative;
  padding-bottom: 0.75rem;
}
main h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--grad-primary);
}

main h2 {
  margin-top: 2.25rem;
  padding-top: 0.25rem;
}
main h2:first-of-type {
  margin-top: 1.75rem;
}

main .card h3 {
  padding-bottom: 0;
}

/* Pricing "most popular" ribbon support */
.card.featured {
  border: 1.5px solid var(--teal);
  box-shadow: var(--shadow-glow);
  position: relative;
  transform: translateY(-4px) scale(1.02);
}
.card.featured::after {
  content: "Most Popular";
  position: absolute;
  top: -13px;
  right: 1.25rem;
  background: var(--grad-primary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* Footer */
footer {
  background: var(--grad-dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-primary);
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.25rem 1rem 2.25rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  font-size: 0.9rem;
}

.footer-col h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
}

.footer-col a {
  color: #cfe9e9;
  display: block;
  margin-bottom: 0.55rem;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer-col a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.footer-col p {
  color: #a9b7c4;
  margin-top: 0.5rem;
}

.footer-logo {
  color: var(--white);
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  background: linear-gradient(135deg, #ffffff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.1rem;
  text-align: center;
  font-size: 0.8rem;
  color: #a9b7c4;
}

/* Contact form */
form.contact-form {
  max-width: 560px;
  display: grid;
  gap: 0.9rem;
  background: var(--white);
  border: 1px solid #eef1f6;
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-top: 1.5rem;
}

form.contact-form label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

form.contact-form input,
form.contact-form textarea {
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #dbe1ea;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,166,166,0.15);
}

form.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

form.contact-form button {
  justify-self: start;
}

/* Responsive */
@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .card.featured {
    transform: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    border-bottom: 1px solid #e0e4ee;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links > a,
  .dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid #eef1f6;
  }
  .nav-links > a.active::after,
  .dropdown-trigger.active::after {
    display: none;
  }
  .nav-links .btn {
    margin-top: 0.75rem;
    justify-content: center;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0 0 0.5rem 0.75rem;
    transition: none;
  }
  .nav-item.open .dropdown-menu {
    display: flex;
  }

  .top-bar-inner {
    font-size: 0.72rem;
  }
}

@media (max-width: 500px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TECH HERO — circuit + heartbeat motif (matches logo mark)
   ========================================================= */
.hero-tech {
  position: relative;
  background: var(--grad-hero);
  overflow: hidden;
  margin: 0 calc(-50vw + 50%);
  padding: 4rem 1rem;
}

.hero-tech-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-tech-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.circuit-node {
  animation: node-pulse 3.4s ease-in-out infinite;
}
.circuit-node:nth-child(2n) { animation-delay: 0.6s; }
.circuit-node:nth-child(3n) { animation-delay: 1.3s; }
.circuit-node:nth-child(4n) { animation-delay: 2s; }

@keyframes node-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.heartbeat-path {
  fill: none;
  stroke: url(#pulseGradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-pulse 2.6s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(0,196,196,0.55));
}
@keyframes draw-pulse {
  to { stroke-dashoffset: 0; }
}


.hero-tech-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: center;
}

.hero-tech h1 {
  color: var(--blue);
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero-tech p {
  color: #3a4a58;
  margin-bottom: 0.75rem;
  max-width: 46ch;
}

/* Rotating stat slider (fancy slider #1) */
.stat-slider {
  position: relative;
  background: var(--white);
  border: 1px solid #eef1f6;
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.4rem;
  min-height: 230px;
  box-shadow: var(--shadow-lg);
}
.stat-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1.5px;
  background: var(--grad-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}

.stat-slide {
  display: none;
  animation: slide-in 0.5s ease;
}
.stat-slide.active { display: block; }

@keyframes slide-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.stat-slide .stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5vw, 3rem);
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.stat-slide .stat-label {
  color: var(--blue);
  font-weight: 600;
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.stat-slide .stat-detail {
  color: #62717d;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.slider-dots button {
  width: 26px;
  height: 4px;
  border-radius: 4px;
  border: none;
  background: #dbe1ea;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.slider-dots button.active {
  background: var(--grad-primary);
  width: 40px;
}

/* =========================================================
   TECH MARQUEE — auto-scrolling stack strip (fancy slider #2)
   ========================================================= */
.tech-marquee {
  background: var(--white);
  border-bottom: 1px solid #eef1f6;
  padding: 1.1rem 0;
  overflow: hidden;
  margin: 0 calc(-50vw + 50%);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue);
  white-space: nowrap;
  opacity: 0.75;
}
.marquee-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   SERVICE ICONS
   ========================================================= */
.icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,166,166,0.12), rgba(0,51,102,0.08));
  border: 1px solid rgba(0,166,166,0.25);
  margin-bottom: 0.9rem;
}
.icon-badge svg {
  width: 24px;
  height: 24px;
  stroke: var(--teal);
  fill: none;
  stroke-width: 1.8;
}
.section-dark .icon-badge {
  background: rgba(0,196,196,0.1);
  border: 1px solid rgba(0,196,196,0.3);
}
.section-dark .icon-badge svg { stroke: var(--accent); }

/* =========================================================
   ANIMATED COUNTER STATS
   ========================================================= */
.counter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 2.25rem;
  text-align: center;
}
.counter-item {
  padding: 1.25rem 1rem;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.counter-item:first-child { border-left: none; }
.counter-value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(0,196,196,0.35);
}
.counter-caption {
  color: #c3d3dd;
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band {
  position: relative;
  background: var(--grad-dark);
  overflow: hidden;
  text-align: center;
  padding: 3.5rem 1.5rem;
  margin: 0 calc(-50vw + 50%);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 300px at 50% 0%, rgba(0,196,196,0.18), transparent 60%);
  pointer-events: none;
}
.cta-band-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: #c3d3dd; margin-bottom: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .heartbeat-path, .circuit-node, .marquee-track, .stat-slide, .page-intro-corner path {
    animation: none !important;
  }
  .heartbeat-path { stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
  .heartbeat-path {
    opacity: 0.28;
  }
}

@media (max-width: 768px) {
  .hero-tech-inner {
    grid-template-columns: 1fr;
  }
  .counter-item {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .counter-item:first-child { border-top: none; }
}

/* =========================================================
   PAGE INTRO BANNER (subpages)
   ========================================================= */
.page-intro {
  position: relative;
  background: var(--grad-hero);
  padding: 3.25rem 1rem 2.75rem;
  margin: 0 calc(-50vw + 50%);
  overflow: hidden;
}
.page-intro-corner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}
.page-intro-corner path {
  stroke-dasharray: 6 10;
  animation: circuit-flow 7s linear infinite;
}
@keyframes circuit-flow {
  to { stroke-dashoffset: -160; }
}

.page-intro-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-intro h1 {
  margin-bottom: 0.75rem;
}
.page-intro .lead {
  max-width: 56ch;
  color: #3a4a58;
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* Compact stat slider used in page-intro banners */
.stat-slider--compact {
  min-height: 168px;
  padding: 1.4rem 1.5rem 1.15rem;
}
.stat-slider--compact .stat-number {
  font-size: clamp(1.8rem, 3.6vw, 2.3rem);
}
.stat-slider--compact .stat-label {
  font-size: 0.98rem;
}
.stat-slider--compact .stat-detail {
  font-size: 0.85rem;
}

main .page-intro:first-child {
  margin-top: -2rem;
}
@media (max-width: 1150px) {
  .page-intro { padding-left: 1rem; padding-right: 1rem; }
}

/* =========================================================
   CHECK LIST — teal checkmark list used across service pages
   ========================================================= */
ul.check-list {
  list-style: none;
  margin-left: 0;
  margin-top: 0.75rem;
}
ul.check-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
}
ul.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 800;
}
.section-dark ul.check-list li::before {
  color: var(--accent);
}

/* =========================================================
   TIMELINE — onboarding steps (real sequence, numbered)
   ========================================================= */
.timeline {
  position: relative;
  margin: 2.5rem 0 1rem;
  padding-left: 3rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--teal), var(--blue));
  opacity: 0.35;
}
.timeline-step {
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline-step:last-child {
  margin-bottom: 0;
}
.timeline-step .step-marker {
  position: absolute;
  left: -3rem;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.9rem;
  box-shadow: var(--shadow-glow);
}
.timeline-step h3 {
  color: var(--blue);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  padding-top: 0.15rem;
}

/* =========================================================
   CONTACT LAYOUT
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.contact-info {
  background: var(--white);
  border: 1px solid #eef1f6;
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.contact-info h3 {
  color: var(--blue);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}
.contact-info-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-item .icon-badge {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.contact-info-item .icon-badge svg { width: 19px; height: 19px; }
.contact-info-item strong {
  display: block;
  color: var(--blue);
  font-size: 0.92rem;
}
.contact-info-item span, .contact-info-item a {
  color: #62717d;
  font-size: 0.92rem;
}
.contact-info-item > div a,
.contact-info-item > div span { display: block; }

.contact-steps {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef1f6;
}
.contact-steps ol {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  color: #62717d;
  font-size: 0.9rem;
}
.contact-steps li { margin-bottom: 0.4rem; }

@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* Anchor scroll offset for sticky header */
[id] {
  scroll-margin-top: 100px;
}

/* ===== Additions: promo band, service slider, grouped services ===== */
.promo-band{background:var(--grad-primary);color:var(--white)}
.promo-inner{max-width:var(--maxw);margin:0 auto;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.promo-band .btn-primary{background:var(--white);color:var(--blue);box-shadow:none}
.svc-group{text-align:left!important;margin:2.5rem 0 1.25rem;font-size:1.35rem!important;color:var(--blue)}
.svc-group:first-child{margin-top:0}
.svc-slider{max-width:760px;margin:1.5rem auto 0;text-align:center}
.svc-slide{display:none;padding:2rem 1.5rem;background:rgba(255,255,255,0.06);border:1px solid rgba(0,196,196,0.25);border-radius:var(--radius)}
.svc-slide.active{display:block}
.svc-slide h3{font-size:1.5rem;margin-bottom:.6rem}
.svc-slide p{margin-bottom:1.2rem}
.svc-slide .btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.svc-slide .btn-outline:hover{background:var(--accent);color:var(--dark)}
.svc-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.svc-controls button{background:none;border:1px solid var(--accent);color:var(--accent);width:36px;height:36px;border-radius:50%;font-size:1.3rem;cursor:pointer}
.svc-dots{display:flex;gap:.45rem}
.svc-dots button{width:10px;height:10px;padding:0;border-radius:50%;background:rgba(255,255,255,.3);border:none}
.svc-dots button.active{background:var(--accent)}

/* =====================================================================
   HIGH-TECH UPGRADE: spotlight cards, glow, reveal, hover effects
   (same palette and fonts; only adds interaction and depth)
   ===================================================================== */
:root{--glow:0 0 0 1px rgba(0,196,196,.35),0 14px 40px -10px rgba(0,196,196,.35)}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;background:var(--grad-primary);box-shadow:0 0 10px rgba(0,196,196,.8)}

/* Buttons: light sweep + lift */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:140%}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(0,196,196,.5),0 16px 36px rgba(0,166,166,.45)}

/* Nav: animated underline, glass header */
header{background:rgba(255,255,255,.78);backdrop-filter:saturate(200%) blur(16px);-webkit-backdrop-filter:saturate(200%) blur(16px)}
.nav-links>a:not(.btn)::before,.dropdown-trigger::before{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--grad-primary);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links>a:not(.btn):hover::before,.dropdown-trigger:hover::before{transform:scaleX(1)}
.dropdown-menu{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(0,196,196,.25);box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,196,196,.08)}
.dropdown-menu a{position:relative;transition:background .18s,color .18s,padding-left .18s}
.dropdown-menu a::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:3px;background:var(--grad-primary);opacity:0;transition:opacity .18s}
.dropdown-menu a:hover::before{opacity:1}

/* Cards: cursor spotlight, glowing edge, top accent line */
.card{position:relative;overflow:hidden;border-image:none;border-top:1px solid #eef1f6;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--grad-primary);transform:scaleX(.18);transform-origin:left;transition:transform .45s ease}
.card:hover{transform:translateY(-8px);border-color:rgba(0,196,196,.55);box-shadow:var(--glow)}
.card:hover::before{transform:scaleX(1)}
.card>*{position:relative;z-index:1}
.card h3{transition:color .25s}
.card:hover h3{color:var(--teal)}

/* Icon badges: glow + tilt */
.icon-badge{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s}
.card:hover .icon-badge{transform:translateY(-3px) rotate(-6deg) scale(1.08);background:var(--grad-primary);box-shadow:0 10px 24px rgba(0,196,196,.45)}
.card:hover .icon-badge svg{stroke:#fff}

/* Checklist items nudge on hover */
.check-list li{transition:transform .2s ease,color .2s ease}
.card:hover .check-list li:hover{transform:translateX(6px);color:var(--blue)}

/* Dark sections: glass cards with neon edge */
.section-dark .card{background:rgba(255,255,255,.05);border:1px solid rgba(0,196,196,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.section-dark .card:hover{border-color:rgba(0,196,196,.8);box-shadow:0 0 0 1px rgba(0,196,196,.5),0 18px 50px -12px rgba(0,196,196,.55)}
.section-dark .card:hover h3{color:var(--accent)}

/* Hero: drifting grid + glow orb */
.hero-tech{position:relative;overflow:hidden}
.hero-tech::before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(0,196,196,.28),transparent 65%);animation:orb 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes orb{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.15)}}
.hero-tag{box-shadow:0 0 0 1px rgba(0,196,196,.35),0 0 18px rgba(0,196,196,.25)}
.stat-slider{transition:transform .3s ease,box-shadow .3s ease}
.stat-slider:hover{transform:translateY(-4px);box-shadow:var(--glow)}
.stat-number{text-shadow:0 0 22px rgba(0,196,196,.45)}

/* Service slider + promo */
.svc-slide{transition:box-shadow .3s,border-color .3s}
.svc-slider:hover .svc-slide.active{border-color:rgba(0,196,196,.8);box-shadow:0 0 40px -6px rgba(0,196,196,.5)}
.svc-slide.active{animation:slideIn .5s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.svc-controls button:hover{background:var(--accent);color:var(--dark);box-shadow:0 0 16px rgba(0,196,196,.7)}
.promo-band{background:linear-gradient(110deg,var(--teal),var(--accent),var(--teal));background-size:200% 100%;animation:shimmer 8s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* Counters, timeline, marquee, footer */
.counter-item{transition:transform .3s ease}
.counter-item:hover{transform:translateY(-4px)}
.counter-item:hover .counter-value{text-shadow:0 0 24px rgba(0,196,196,.8)}
.timeline-step{transition:transform .3s ease}
.timeline-step:hover{transform:translateX(6px)}
.timeline-step:hover .step-marker{box-shadow:0 0 0 6px rgba(0,196,196,.2),0 0 22px rgba(0,196,196,.6)}
.step-marker{transition:box-shadow .3s ease}
.tech-marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{transition:color .2s,text-shadow .2s}
.marquee-item:hover{color:var(--accent);text-shadow:0 0 14px rgba(0,196,196,.7)}
.footer-col a{display:inline-block;transition:transform .2s,color .2s}
.footer-col a:hover{transform:translateX(5px);color:var(--accent)}

/* Scroll reveal (only active when JS adds .js) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in.card:hover{transform:translateY(-8px)}

@media (hover:none){.card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-tech::before,.promo-band,.svc-slide.active{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .card,.btn::after{transition:none}
}

/* Fix: spotlight uses background (the ::after on .card.featured is the "Most Popular" badge) */
.card:hover{background-image:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,196,196,.14),transparent 60%)}
.card::before{border-radius:var(--radius) var(--radius) 0 0}
.card.featured{overflow:visible}
.card.featured:hover{transform:translateY(-10px) scale(1.02)}
.js .reveal.in.card.featured{transform:translateY(-4px) scale(1.02)}
.js .reveal.in.card.featured:hover{transform:translateY(-10px) scale(1.02)}

/* =====================================================================
   NEW CLIENT OFFER: glow + zoom in/out animation (CSS only)
   ===================================================================== */
.promo-band{position:relative;z-index:2;border-radius:14px;margin:0 0 1.5rem;
  animation:shimmer 8s linear infinite,promoGlow 2.4s ease-in-out infinite}
@keyframes promoGlow{
  0%,100%{box-shadow:0 0 14px rgba(0,196,196,.45),0 0 34px rgba(0,196,196,.25)}
  50%{box-shadow:0 0 26px rgba(0,230,230,.95),0 0 70px rgba(0,196,196,.55),0 0 110px rgba(0,196,196,.3)}}
.promo-inner>div:first-child{position:relative;transform-origin:left center;
  animation:promoZoom 2.4s ease-in-out infinite;text-shadow:0 0 14px rgba(255,255,255,.65)}
@keyframes promoZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.promo-inner>div:first-child::before{content:"LIMITED TIME";display:inline-block;margin-right:.7rem;
  padding:.18rem .6rem;border-radius:999px;background:#fff;color:var(--blue);font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-shadow:none;vertical-align:middle;animation:badgeBlink 1.2s ease-in-out infinite}
@keyframes badgeBlink{0%,100%{opacity:1}50%{opacity:.55}}
.promo-inner>div:first-child strong{font-family:var(--font-display);font-size:1.08em}
.promo-band .btn-primary{animation:promoBeat 1.6s ease-in-out infinite}
@keyframes promoBeat{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.75)}
  50%{transform:scale(1.09);box-shadow:0 0 0 14px rgba(255,255,255,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.promo-band:hover,.promo-band:hover .promo-inner>div:first-child,.promo-band:hover .btn-primary{animation-play-state:paused}
.promo-band:hover{box-shadow:0 0 30px rgba(0,230,230,.95),0 0 80px rgba(0,196,196,.6)}
.promo-band .btn-primary:hover{transform:scale(1.12);background:#fff;color:var(--teal)}
@media (max-width:640px){.promo-inner{justify-content:center;text-align:center}.promo-inner>div:first-child{transform-origin:center}}
@media (prefers-reduced-motion:reduce){
  .promo-band,.promo-inner>div:first-child,.promo-inner>div:first-child::before,.promo-band .btn-primary{animation:none}
  .promo-band{box-shadow:0 0 26px rgba(0,196,196,.6)}}

/* Promo amount: bigger, glowing, pulsing */
.promo-amount{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:1.45em;line-height:1;
  padding:.1em .35em;border-radius:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);
  color:#fff;text-shadow:0 0 12px #fff,0 0 28px rgba(255,255,255,.8);
  animation:amountPulse 1.6s ease-in-out infinite}
@keyframes amountPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 10px rgba(255,255,255,.4)}
  50%{transform:scale(1.12);box-shadow:0 0 26px rgba(255,255,255,.9)}}
.promo-band:hover .promo-amount{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.promo-amount{animation:none}}

/* =====================================================================
   PHONE FIXES: visible heartbeat, gentle-motion mode, tap feedback
   ===================================================================== */
html{-webkit-tap-highlight-color:rgba(0,196,196,.22)}
@media (max-width:640px){.heartbeat-path{opacity:.75}}

/* Phones/PCs with "reduce motion" on: keep the gentle effects (glow, pulse,
   slow ticker) and drop only the zooming/sliding ones */
@keyframes heartGlow{
  0%,100%{opacity:.55;filter:drop-shadow(0 0 4px rgba(0,196,196,.4))}
  50%{opacity:1;filter:drop-shadow(0 0 12px rgba(0,196,196,.95))}}
@keyframes promoRing{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}
  100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@keyframes amountGlow{
  0%,100%{box-shadow:0 0 10px rgba(255,255,255,.4)}
  50%{box-shadow:0 0 26px rgba(255,255,255,.95)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:marquee-scroll 40s linear infinite!important}
  .circuit-node{animation:node-pulse 3.4s ease-in-out infinite!important}
  .heartbeat-path{stroke-dashoffset:0!important;animation:heartGlow 2.4s ease-in-out infinite!important}
  .promo-band{animation:promoGlow 2.4s ease-in-out infinite!important}
  .promo-band .btn-primary{animation:promoRing 1.6s ease-out infinite!important}
  .promo-amount{animation:amountGlow 1.6s ease-in-out infinite!important}
  .promo-inner>div:first-child::before{animation:badgeBlink 1.2s ease-in-out infinite!important}
}
.tech-marquee.paused .marquee-track{animation-play-state:paused!important}

/* Touch screens have no hover, so show the same effects while tapping */
@media (hover:none){
  .nav-links>a:active,.dropdown-trigger:active,.dropdown-menu a:active{background:var(--light);color:var(--teal)}
  .dropdown-menu a{border-left:3px solid transparent}
  .dropdown-menu a:active{border-left-color:var(--teal)}
  .card:active{border-color:rgba(0,196,196,.6);box-shadow:var(--glow)}
  .card:active h3{color:var(--teal)}
  .card:active .icon-badge{background:var(--grad-primary);transform:scale(1.08)}
  .card:active .icon-badge svg{stroke:#fff}
  .btn:active{transform:scale(.96)}
  .marquee-item:active{color:var(--accent);text-shadow:0 0 14px rgba(0,196,196,.7)}
}


/* ===== ITINICAL PULSE V10: SAME SVG PATH ON DESKTOP AND PHONE ===== */
.heartbeat-base{display:none!important}
.pulse-layer{
  fill:none;
  stroke:#00bcbc;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  will-change:stroke-dashoffset;
  animation:pulseTravel 3.6s linear infinite!important;
}
.pulse-layer-fade{
  stroke-width:3.5;
  stroke-dasharray:15 85;
  opacity:.08;
  animation-delay:0s!important;
}
.pulse-layer-mid{
  stroke-width:4;
  stroke-dasharray:15 85;
  opacity:.42;
  animation-delay:-.54s!important;
}
.pulse-layer-main{
  stroke-width:4.5;
  stroke-dasharray:40 60;
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(0,196,196,.82));
  animation-delay:-1.08s!important;
}
.pulse-layer-tail{
  stroke-width:3.5;
  stroke-dasharray:22 78;
  opacity:.16;
  animation-delay:-.28s!important;
}
@keyframes pulseTravel{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
.mobile-pulse-strip{display:none}
@media(max-width:768px){
  .hero-tech-bg .heartbeat-pulse-group{display:none!important}
  .mobile-pulse-strip{
    display:block;
    position:relative;
    z-index:2;
    width:100%;
    height:118px;
    margin:.7rem 0 .2rem;
    overflow:visible;
    pointer-events:none;
  }
  .mobile-pulse-strip svg{display:block;width:100%;height:118px;overflow:visible}
  .mobile-pulse-strip .pulse-layer{
    stroke:#00bcbc!important;
    vector-effect:non-scaling-stroke!important;
    animation-name:pulseTravel!important;
    animation-duration:3.6s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
  }
  .mobile-pulse-strip .pulse-layer-tail{opacity:.34!important;stroke-width:5!important}
  .mobile-pulse-strip .pulse-layer-fade{opacity:.22!important;stroke-width:4.5!important}
  .mobile-pulse-strip .pulse-layer-mid{opacity:.55!important;stroke-width:4.5!important}
  .mobile-pulse-strip .pulse-layer-main{
    filter:drop-shadow(0 0 5px rgba(0,188,188,.95)) drop-shadow(0 0 14px rgba(0,188,188,.45))!important;
  }
  .mobile-pulse-strip .heartbeat-pulse-group{display:block!important}
  .hero-tech-inner{gap:1rem}
  .hero-actions{margin-top:.55rem}
  .stat-slider{margin-top:0}
  .promo-inner>div:first-child{width:100%;transform:none!important;animation:none!important}
  .promo-amount{animation:amountGlow 1.8s ease-in-out infinite!important}
  .promo-band .btn-primary{animation:promoRing 1.8s ease-out infinite!important}
}
@media(max-width:430px){
  .mobile-pulse-strip,
  .mobile-pulse-strip svg{height:108px}
}
@media(prefers-reduced-motion:reduce){.pulse-layer{animation:pulseTravel 3.6s linear infinite!important}}
/* ===== FINAL CENTERED FLOATING GLASS HEADER ===== */
/* Outer header is only the sticky positioning layer. */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Only this centered card receives the glass treatment. */
header .nav-container {
  position: relative !important;
  width: max-content !important;
  min-width: min(1100px, calc(100vw - 96px)) !important;
  max-width: calc(100vw - 96px) !important;
  margin: 0 auto !important;
  padding: .72rem 1.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.15rem !important;
  overflow: visible !important;
  background: rgba(245, 249, 252, .68) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 26px !important;
  box-shadow:
    0 14px 42px rgba(2,21,38,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
  backdrop-filter: blur(26px) saturate(175%) !important;
  transition: min-width .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}

header.scrolled .nav-container {
  min-width: min(1060px, calc(100vw - 120px)) !important;
  background: rgba(245,249,252,.80) !important;
  border-color: rgba(0,166,166,.22) !important;
  box-shadow:
    0 18px 50px rgba(2,21,38,.18),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* The supplied replacement PNG contains real alpha transparency. */
header .nav-logo img {
  display: block !important;
  width: auto !important;
  height: 64px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}

.home header .nav-logo img {
  height: 68px !important;
}

header .dropdown-menu,
header .nav-links.open {
  background: rgba(245,249,252,.92) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
}

@media (max-width: 1200px) {
  header .nav-container,
  header.scrolled .nav-container {
    width: calc(100% - 48px) !important;
    min-width: 0 !important;
    max-width: 1120px !important;
  }
}

@media (max-width: 768px) {
  header {
    padding: 8px 0 !important;
  }

  header .nav-container,
  header.scrolled .nav-container {
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: .5rem .8rem !important;
    border-radius: 18px !important;
  }

  header .nav-logo img,
  .home header .nav-logo img {
    height: 44px !important;
  }

  header .nav-logo {
    gap: .4rem !important;
    min-width: 0 !important;
  }

  header .nav-logo-tag {
    display: inline !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #5c6d7c !important;
    white-space: nowrap !important;
    border-left: 1px solid #d5dee8 !important;
    padding-left: .4rem !important;
  }

  header .nav-links {
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(0,166,166,.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(2,21,38,.18) !important;
  }
}



/* ===== CONTENT-ONLY FORM COMPATIBILITY ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
form.contact-form select{padding:.7rem .85rem;border-radius:8px;border:1.5px solid #dbe1ea;font-size:.95rem;font-family:inherit;width:100%;background:#fff}
form.contact-form select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,166,166,.15)}
.check-row{display:flex!important;align-items:flex-start;gap:.65rem;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;color:#3a4a58!important}
.check-row input{width:auto!important;margin-top:.25rem;flex:0 0 auto}
.check-row span{line-height:1.5}.form-privacy{font-size:.8rem;color:#62717d}.hp{position:absolute;left:-9999px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}

/* Footer links stack. The earlier inline-block rule was gluing them into one line. */
.footer-col a{
  display:block !important;
  width:100%;
  margin:0 0 .55rem !important;
}
.footer-bottom a{
  display:inline !important;
  width:auto !important;
  margin:0 !important;
}

/* Fixed WhatsApp button */
.top-bar-contacts{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.top-bar-contacts a{color:var(--accent);font-weight:600}
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:6500;
  display:flex;align-items:center;gap:.55rem;
  height:64px;padding:0 16px 0 8px;border-radius:999px;
  background:#075E54;color:#fff !important;text-decoration:none !important;
  box-shadow:0 14px 34px rgba(7,94,84,.38);
  animation:wa-bob 2.6s ease-in-out infinite;
}
.wa-float:hover{color:#fff !important;animation-play-state:paused;transform:translateY(-3px)}
.wa-icon{
  width:48px;height:48px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;position:relative;z-index:2;flex:0 0 auto;
  animation:wa-glow 1.8s ease-out infinite;
}
.wa-icon svg{width:28px;height:28px;display:block}
.wa-ring,.wa-ring-2{
  position:absolute;left:8px;top:8px;width:48px;height:48px;border-radius:50%;
  border:2px solid rgba(37,211,102,.75);pointer-events:none;
  animation:wa-ring 2.2s ease-out infinite;
}
.wa-ring-2{animation-delay:1.1s}
.wa-label{display:flex;flex-direction:column;line-height:1.05;z-index:2}
.wa-label strong{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:#fff}
.wa-label span{font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82)}
@keyframes wa-ring{0%{transform:scale(.85);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@keyframes wa-glow{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes wa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:640px){
  .wa-float{right:12px;bottom:12px;height:58px;padding-right:14px}
  .wa-label span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .wa-float,.wa-icon,.wa-ring,.wa-ring-2{animation:none}
}